Untitled

Dan ketika Allah telah berfirman, kau bisa apa? Selain menerimanya walau air mata berlinang. Pedih memang, namun apa bisa dikata? Kau tidak punya kehendak, kaupun tidak berhak mengelak. Segigih apapun kau berusaha, sekuat apapun kau meronta, jika itu sudah ketetapan-Nya, harus apa lagi selain menerima? 

Bukan, aku bukan menyuruhmu berhenti, apalagi putus asa. Hanya saja kita harus tau, kapan saat yang pas untuk memulai dan kapan saat yang tepat untuk menyudahi. Agar tak terlalu dalam bila jatuh, tak terlalu rindu bila jauh, dan tak terlalu pahit bila sakit.

Surabaya, (un)hidden room.

5 Desember 2017.

7.47 WIB.

Read More

Coretan Sore Hari

Firstly, I would like to give my condolences on the passing of Alm. Adam Fabumi, who had fought during 7 months against trysomi 13. If you don’t know who Adam Fabumi is, you can see his instagram @AdamFabumi or just take a simple choice: googling it.

If you are netizen zaman now, you guys should have known what’s happening now on. Such as tragedy of “Tiang Listrik”, a child who war with her dad’s girlfriendꟷwell known as pelakorꟷ, public figure who decided to uncover her hair (again), the dance of Masha Bengek, the viral video from Devi to Dyo, include the story about Alm. Adam Fabumi. Well, welcome to Indonesia. The country which has so many talents and stories. Everything can be something.

Actually, I don’t wanna tell about those virals or something like that. Yang mau gue bahas dan ceritakan adalah tentang hal-hal yang belakangan ini gue rasakan, yang sedikit banyak telah membuat gue “terpelatuq”. Lebih terpelatuq lagi ketika gue baru menyadari bahwa semester ini, entah kenapa, matkulnya terasa so hard and need so much effort to pass it well. Waktu seminggu tuh rasanya kaya gak ada libur-liburnya. Padahal semester ini gue cuma kuliah hari Senen-Rabu doang. Kamis-Minggu nya libur dan kosong blong (harusnya). Tapi, gue gatau waktu gue kebuang kemana dari hari Kamis-Minggu. Ujug-ujug udah mau Senen aja lol. Kadang ketika gue lagi lack of motivation, gue merasa nyesel kenapa gue memutuskan untuk nyemplung di “dunia itu”. Terlebih lagi ngeliat temen-temen di lab gue yang tiap hari adaaa aja kerjaan ngodingnya. Beda ama gue yang kalo ada waktu senggang pasti gue pake buat ngurusin “dunia itu”. Yang sebenarnya gue juga gak tau kenapa dulu gue peduli banget sama “dunia itu”. Dan kenapa sampe sekarang gue masih memprioritaskan “dunia itu”. Apa gue salah? Apa yang gue ambil keliru? Apa mendingan gue mundur aja sekarang daripada kedepannya jadi gak ikhlas dan wasting time?

Sayangnya, gue bukan tipikal orang yang gampang mundur ketika udah telanjur nyemplung. Emang, ada beberapa orang yang berprinsip “Mending berhenti mumpung belom basah semua”. Ya, it’s you, not me. Ada beberapa kasus yang gue tetap memilih untuk go on and end up it fairly. Contohnya, banyak. Seperti keputusan gue untuk tetap mengambil matkul yang sebenarnya bisa aja gue ganti dosen sehingga hidup gue bisa lebih tenang. Dan keputusan gue untuk tetap dedicate waktu gue ngurusin “dunia itu” yang sebenarnya bisa aja gue berubah pikiran dan memilih untuk stay focus sama pelajaran ajah. Toh tanpa nyemplung di dunia itu gue tetep bisa bersosialisasi dengan temen-temen gue dari jurusan lain. Toh tanpa harus masuk di dunia itu juga gue tetep kenal dan bisa mengenal sama orang-orang. Dan tanpa terlibat di dunia itu pun gue tetep bisa ngasih ide dan saran gue. TAPI, LO YAKIN NGOMONG GITU???

Engga juga sih. Hal fundamental kenapa gue melakukan itu semua adalah karena gue yakin gue bisa, gue yakin ini adalah jalan gue, gue yakin Allah bakal ngasih kejutan indah buat gue, dan alasan lain yang gak bisa gue beberkan secara cuma-cuma disini *wqwq. Especially keterlibatan gue di dunia itu. Emang, bisa aja gue tetep kenal sama orang-orang di jurusan lain. Tapi, gue ga yakin gue bakal meluangkan waktu gue buat bersosialisasi dengan teman-teman di jurusan lain kalo gak ada sesuatu atau event yang mempertemukan kita. Paling juga ujung-ujungnya gue cuma bisa kenal sama orang-orang yang emang udah dari dulu gue kenal. Bukan hal yang mustahil sih kalo gue bakal ngasih ide dan saran gue buat “dunia itu”, tapi gue siapa? Cuma mahasiswa biasa yang ga tau track sebenarnya di “dunia itu” seperti apa. Yang ada malah gue dongkol sendiri, terus mutung, terus memutuskan buat ansos, BOOM! Alhasil semua kesombongan-kesombongan kalimat yang diutarakan tanpa nyemplung di “dunia itu” sirna dan cuma omong kosong belaka. Intinya sih semua ini tentang panggilan jiwa. Anjay, bullshit banget sih gue lol. Bingung juga sih how to say and explain it. Sama susahnya menjelaskan perasaan yang “Lo bukan siapa-siapa gue, gue pun bukan siapa-siapa lo, tapi gue khawatir dan ga mau lo kenapa-kenapa”.

Well, gimanapun juga gue tetep manusia biasa. Gue juga pernah memutuskan untuk stop and pada akhirnya ada rasa menyesal setiap kali gue mengingat momen itu. Nyesel. Banget. Tapi mau gimana lagi? Udah telanjur dan kadung lewat. Mungkin ada hal yang Allah gak pengen terjadi sama gue ketika gue tetap kekeuh melanjutkannya. Ibu gue selalu mengajarkan gue untuk tetap positive thinking sama apapun yang terjadi dalam hidup ini. Walaupun memang, semua yang terjadi juga karena keputusan-keputusan yang kita buat (juga dengan kekuasaan Allah sih pastinya). Itulah mengapa ibu gue selalu mewanti-wanti anak-anaknya buat berhati-hati dalam mengambil keputusan. Karena gimana-gimana yang bakal ngejalanin kan kita sendiri, yang tau capability kita kan cuma kita, orang tua cuma bisa memberikan pandangannya dari luar aja. Apalagi sodara dan kerabat, mereka hanya bisa memberi saran dan dukungan. Selebihnya?? That’s our privilege to take or leave it. Intinya, hidup ini pilihan. Gimana caranya untuk memilih, itu tergandeng dari diri lo sendiri. Mau lo base on yourself, your friend, your siblings, your parent, it’s all up to you. Tapi satu yang harus lo inget, gue selalu ada buat lo. Azek. Ga nyambung. Wakaka.

Surabaya, di sore yang dingin.

24 November 2017.

Read More

Untold Story

Even after almost 3 years have passed, I still don’t know why am I here? What is Allah’s purpose of put me here? Kenapa harus Surabaya? Kenapa harus ITS? Kenapa harus Teknik Informatika?

Dilema terbesar dari anak SMA tingkat akhir adalah “Kalo lulus gue mau lanjut kemana?”, “Abis lulus gue mau jadi apa?”. Well, some of my friends have decided their life and dreams. Although, some many more still didn’t know what will their life be. Gue, yang orang-orang menganggap termasuk dalam kategori “Have decided where to go”, pada nyatanya tidak demikian. Gue sempet dilemma harus ambil jurusan apa, saking banyaknya pilihan yang bisa gue masukin kali ya, wqwq sombong banget gue. Tapi dengan kondisi yang demikian, gue semakin tertinggal dan terbelakang (?). Minusnya itu. Temen-temen gue yang, gue gak tau why they are so simple in thinking, dengan yakin dan tanpa ragunya memutuskan buat “Gue ambil jurusan ini.”. Big applause for my friends. Kadang gue merasa iri. Disaat gue masih mendalami setiap pilihan jurusan dan kampus yang ada, mereka udah memilih next life mereka. Ada yang milih ambil jurusan Biologi karena emang masterpiece di bidang itu, ada yang milih jurusan HI karena emang cita-citanya jadi Diplomat, ada yang milih jurusan Mesin karena emang passion disitu, ada yang milih jurusan Informatika karena emang hobi di dunia tersebut. Sedangkan gue? Mau ambil biologi, hmm I have no passion on it. HI? I want, but I don’t have any dream for being diplomat. Mesin? Fisika? Informatika? I don’t want it at all. Sempet akung gue nyuruh jadi dokter aja, well BIG NO DOUBLE NO. Gue sadar gue jijik banget sama darah, gue ga telaten kalo ngerawat luka korengan, dan gue emang gada niatan jadi dokter ☹. Kalo punya suami dokter atau ex calon dokter gapapa dah *eh hahaha*. Selain dokter, akung gue juga nyuruh gue jadi Polwan. Hahahahaha cuma bisa ketawa :’(. Dari kebimbangan itu, gue pun akhirnya mengadukan perasaan kepada kedua orang tua gue. Mereka sempet menawarkan STIS sebagai tujuan kuliah gue, menawarkan. Well, I agreed and decided to fight on it. Dan sejak saat itu, cita-cita terbesar gue adalah menjadi PNS BPS. Sesederhana itu. Namun, kebimbangan gue gak selesai hanya sampai disitu. Sebagai manusia yang cuma bisa berencana, maka gue dan orang tua gue pun membuat rencana berikutnya. Kalo manusia bisa memastikan mah, udah dipastiin langsung kali ya tanpa perlu bikin seribu strategi. Well, rencana gue ini disebut dengan “Iseng-iseng berhadiah” lewat jalur SNMPTN. Gue bener-bener gak punya gambaran lagi harus ngambil jurusan apa setelah hati gue terpaku sama STIS. Pas malam terakhir ngisi form SNMPTN, orang tua gue telpon “Pilihan pertama Teknik Informatika ITS aja, Han”. Tanpa melawan dan adu alasan, gue mengiyakan. Pilihan kedua gue adalah Teknik Lingkungan ITS, dan terakhir Statistika UNAIR. Setelah gue submit dan apply semua form SNMPTN, gue bener-bener yang udah gak peduli lagi hasilnya gimana, udah ikhlas banget sama pengumumannya. Karena hati dan fokus gue udah sepenuhnya buat STIS. Walaupun sempet hati gue mbatin “Kalo ternyata lu keterima di ITS gimana Han?”. Dan dengan sigap gue berdoa supaya keterima STIS. Lalu, ada satu momen yang entah kenapa membuat gue yakin jawaban Allah itu akan apa. Itu adalah ketika gue ikut kompetisi yang diadain Jawa Pos buat anak kelas 12 SMA, dan hasilnya adalah gue jadi Juara 1 Jurusan IPA se-Kota Pasuruan. Hadiah yang gue dapet itu Harddisk. Ketika temen gue yang dapet hadiah flashdisk bilang “Pas banget gue lagi butuh ini”, then gue langsung dagdigdugser. Jangan-jangan…harddisk itu menandakan kalo gue bakal masuk Teknik Informatika? Seketika hati gue berdebar sekali namun berarti. Jengjeng.

Perjuangan STIS pun dimulai…

Waktu itu ada salah satu mahasiswa STIS yang promosi di kelas gue. And I was too excited. Dan unpredictable nya adalah, guru BK gue sampe beliin buku STIS buat gue. Gue diam seribu bahasa sambil menanyakan kenapa tiba-tiba beliin gue buku STIS itu. Beliau pun bilang “Karena ibu ngeliat kamu cocok ke STIS dan ada potensi.”. Gue terkejut. Wow kaget kaget. Setelah pemberian buku itu, gue bener-bener yang spent my time with that book. Soal dari tahun ke tahun gue libas abis. Waktu-waktu yang sebenernya bisa gue pake buat pulang ke Bali, gue pake bener-bener buat belajar. Bahkan orang tua gue sampe bilang “Kamu gak mau ke Bali aja? Sendirian lho di Pasuruan. Entar berangkat tesnya biar dari Bali.”, gue pun menolak dengan halus “Kalo di Bali gabisa fokus belajar bu. Entar buang-buang duit juga kan bolak-balik.”. Dan orang tua gue memaklumi. Tes demi tes gue lewati bersama Ayah dan Ibu gue. Saking seringnya bolbal Pasuruan-Surabaya nih, gue sampe apal Bungurasih kalo malem hari itu ada apa aja, kondisi kamar mandinya gimana, musholanya gimana, wqwq. Makanya kan waktu pas ke gunung itu gue bilang “Udaah mandi di bungurasih aja”. Eh, malah gue dikatain “Lu cowo apa cewe sih?”. Kurang ajar -_-. Setelah beberapa tes kami lalui, ayah gue pun tiba-tiba berkata. “Kamu beneran pengen ke STIS han?”. Yang kalo lu tau, pertanyaan itu merupakan indikator bahwa sebenarnya ada keraguan dan kekhawatiran orang tua terhadap apa yang dipilih anaknya. Dan, beberapa pesan diberikan ayah gue mengenai keputusan gue yang tetep pengen STIS. Dan gue yakin, mereka pasti selalu doain yang terbaik buat gue.

Hari pengumuman pun tiba…

Diawali dengan pengumuman SNMPTN yang gue inget banget pas hari itu gue lagi puasa, dan buka pengumumannya bener-bener abis adzan maghrib. Dan warna pertama yang gue liat adalah ijo. Yang pas banget ibu gue nelpon dan langsung ngasih selamat ke gue *karena ibu gue tau user dan pw gue*. Antara seneng sama biasa aja. Gila sombong banget gue wakakak. Senengnya adalah, denger suara ibu gue yang seneng banget anaknya keterima di Teknik Informatika ITS yang terkenal sebagai jurusan Teknik Informatika terbagus. Biasa aja nya gue karena, yaa karena hati gue masih ke STIS kali ya? Wqwq. Tapi gue ga menyesalinya kok. Bener-bener gue ngelakuin itu karena orang tua gue. Daful segala macem ya gue lakuin buat nyenengin orang tua gue. Yang alhamdulillah, entah kenapa mendapat beribu kemudahan dalam prosesnya. Yang begonya gue melihat dan menganggapnya “Oh, yaudah.”. Dengan kondisi hati gue yang masih yakin bahwa gue bisa keterima STIS, doa gue tetep bisa kuliah di STIS. Walaupun sebenarnya, entah kenapa, hati gue yang lain bilang “Udahlah, ITS aja”. Gitu. Hingga akhirnya pengumuman akhir STIS keluar. Inget banget gue malem itu bangun, niatnya sholat malam biar gue ikhlas dengan segala hasilnya. Dan ketika kelar sholat, ibu gue langsung menyambut gue dengan “Gak lolos nduk”, sambil senyum yang menenangkan gue. Kalimat-kalimat penenang pun keluar dari mulut ibu gue. Yang honestly, gue gak kecewa sama sekali, gue biasa aja, gue yang “Oh yaudah.”. Gitu. Lalu pagi harinya, ibu gue ngajak gue ngobrol lagi, memastikan bahwa gue gak kenapa-kenapa. Dan memang gue gak kenapa-kenapa, pada awalnya. Baru setelah ibu gue bilang “Itu tuh ayahmu kasian sama kamu sampe tidur lagi, katanya ‘Kasian hania udah berjuang banget tapi gak lolos’.”. Mendengar itu, seketika timbul perasaan sedih dan kecewa gegara gak lolos. Gue kecewa udah buat orang tua gue sampe kasian gitu ke gue. Padahal nih ya, perjuangan yang sebenarnya gede banget itu ya Ayah gue. Beliau yang nemenin gue dari awal ampe akhir. Beliau yang rela bolak balik Pasuruan-Bali hanya dalam waktu tidak lebih dari sehari. Gila kan. Akhirnya, gue mencoba ikhlas dengan keputusan Allah yang menakdirkan gue di ITS. Dengan pesan-pesan ibu gue yang meyakinkan bahwa dunia kuliah itu tidak seseram yang gue bayangkan, gue mencoba berani dan ikhlas. Walaupun sempat gue ingin mencoba STAN, tapi sekali lagi, orang tua gue nampaknya khawatir dengan pilihan anaknya. Yaudah. Dengan keyakinan “Pasti Allah punya alasan dan rencana kenapa gue kuliah di Teknik Informatika ITS”, gue mencoba ikhlas, sampe sekarang.

After all this time…

Setelah hampir tiga tahun gue kuliah, gue masih belum bisa menyadari apa sesungguhnya rencana Allah itu. Sampe sekarang. Tapi gue masih yakin, bahwa Allah punya rencana terbaik-Nya buat gue, yang akan terkuak kelak. Walaupun terkadang, bahkan seringnya, setiap liat STIS hati gue rasanya kaya terkoyak dan sakit tak berdarah, wqwq. Pada awalnya gue menjalani kehidupan kampus murni hanya untuk belajar tanpa memikirkan organisasi dan asmara, seiring berubah dengan ketertarikan gue nyemplung sana-sini sama seperti gue SMA (yang hampir semua ekskul gue ikutin), sampe kisah tragis asmara gue yang menyebar hampir ke seluruh angkatan, yang membuat tujuan awal gue jadi gak lurus lagi wqwq. Alhasil, sekarang gue menjadi ada apanya gue. Dengan kompetensi gue yang gue anggap bahwa gue masih bisa diperhitungkan (lol af), dengan jadwal-jadwal gue ngurus organisasi-pertemuan-lab, dan pastinya dengan sisa kisah tragis asmara gue yang berhujung tidak sesuai harapan, namun ada harapan baru lain yang datang *eaa wqwq*. Dari yang awalnya gue bingung mau jadi apa dengan titel Sarjana Komputer ketika gue lulus nanti, sampe akhirnya sekarang gue mulai punya bayangan tentang “Mau jadi apa gue dan ngapain setelah lulus kuliah nanti.”. Emang, bayangan gue itu ya gak jauh-jauh dari saran ibu gue yang secara tidak langsung hanya merestui gue jadi PNS, hehe. Namun, prinsip gue adalah selama orang tua gue restu, gue ikhlas. Karena ridho Allah adalah ridho  orang tua. Azek joz. Dan beberapa mimpi-mimpi gue seketika SMP dan SMA yang sempat melenyap, sedikit demi sedikit mulai muncul lagi. Seolah meminta gue untuk menjadikan mimpi tersebut nyata. Wanjay. Dan hal-hal yang entah kenapa membuat gue berpikiran bahwa ini adalah alasan Allah menempatkan gue disini. Walaupun masih belum yakin sepenuhnya dengan tebakan itu. Walaupun belum percaya sepenuhnya dengan itu.

Berdoa aja yang terbaik.

Surabaya, sore hari.

14 Oktober 2017.

Read More

Sampai Pada Akhirnya

Waktu akan terus berjalan.
Walaupun kau mencabut baterai jam dinding, dan kau sengaja menonaktifkan ponselmu, lalu kau tidur dan berdiam diri sepanjang waktu.

Waktu akan terus berjalan.
Meninggalkan yang lalu dan menyisakan kenangan, hadir di depanmu dan mendatangkan kejutan, juga misteri yang akan terkuak pada masa mendatang.

Waktu akan terus berjalan.
Jika kau berdiam kau akan tenggelam, jika kau berlari kau malah dikejar, dan jika dituruti kau akan terbuai.

Waktu akan terus berjalan.
Hingga kau sadar betapa beharganya sebuah kebersamaan, hingga kau belajar tentang arti kehidupan, juga mengetahui betapa pentingnya menghargai.

Waktu akan terus berjalan.
Sampai kau tak bisa jalan, lalu ingatanmu perlahan hilang, dan hanya bisa berbaring diatas ranjang.

Waktu akan terus berjalan.
Sampai pada waktunya tiba, sampai pada masanya datang, sampai pada saatnya menjelang.

Waktu akan terus berjalan.
Sampai pada akhirnya, ia berhenti berjalan.

Tangerang, pagi hari.

18 Agustus 2017

Read More

SADAR!!!

Dan katakanlah: “Kebenaran itu datangnya dari Tuhanmu; maka barangsiapa yang ingin (beriman) hendaklah ia beriman, dan barangsiapa yang ingin (kafir) biarlah ia kafir”. – Al Kahfi 29.

Lo pasti sering minta ditunjukan jalan, diberikan kebenaran, dan dilihatkan kepastian akan hal-hal yang lagi lo dilemma-in which is lo harap-harap cemas terhadap hasilnya. Dan lo dengan (sok) tegar dan tawakkalnya menyerahkan segala hal ke Allah. Meminta diberikan yang terbaik, meminta diberikan keikhlasan, meminta diberikan petunjuk, meminta diberikan kebenaran, meminta didekatkan, meminta dijodohkan, meminta yang lebih banyak, sampai-sampai lo lupa kalo sebenarnya lo minta keinginan dan tendensi lo itu dikabulkan. Disinilah yang biasanya orang-orang lakukan, tak terkecuali gue.

Sebagai manusia yang wajar tapi ga kurang ajar *azek*, gue ga luput dari sifat maruk dan lupa diri kalo sebenarnya Allah udah ngabulin dan menuhin semua permintaan dan doa-doa gue. Gue minta biar uas gue lancar, alhamdulillah ga ada kendala berarti. Gue minta didekatkan, alhamdulillah sempet dekat, walaupun sekarang udah ada sekat *wkwk*. Gue minta diberi kepastian, giliran kepastian itu datang gue malah berpaling. Gue minta diberi petunjuk dan pertanda, ketika berbagai tanda berdatangan, gue malah menampik, malah menyalahkan orang lain. Yang akhirnya membuat gue merombak ulang keinginan gue. Yang tadinya gue udah sok tawakkal dan ikhlas, eh malah berdoa biar didekatkan lagi, biar dipertemukan lagi, minta diberi petunjuk lagi. Yang lagi-lagi Allah udah mendekatkan, udah mempertemukan, udah ngasih petunjuk, tetep aja gue ingkar. Stupid banget ga si.

Seringkali kita ga ngerti bahasa yang digunakan Allah buat menjawab doa-doa kita. Contohnya aja nih, lo berdoa buat diberi petunjuk dan kepastian terhadap perasaan lo ke si X, lo berdoa kalo emang dia yang terbaik buat lo, dekatkanlah, kalo dia bukan yang terbaik buat lo, jauhkanlah, dan datangkanlah orang yang tepat pada waktu yang tepat. Aamiin. Dengan perasaan ketar-ketir menunggu jawaban Allah, dan berusaha untuk ikhlas terhadap hasilnya, eh tetiba skenario Allah jauh dari ekspektasi sederhana lo. Pada awalnya lo didekatkan dengan dia, dia mendekat, lo semakin rapat, semakin hangat, dan lo udah keburu geer aja kalo jawaban Allah adalah dia yang terbaik, tapi ternyata BOOM! Disaat lo udah mengira dan cengar-cengir sendiri atas skenario Allah itu, Allah ngasih jawabannya. Lo ditunjukan kebenaran dan kepastiannya (untuk kesekian kalinya). Yang tiba-tiba membuat lo diem seribu bahasa and dunno what to do.

Emang sih, kadang manusia susah banget sadarnya. Kalo belom ‘ditampol’ Allah belom nyaho! Paling kesel itu ketika bermaksud buat memberi pengertian kepada orang-orang yang keliru, tapi dianya ga sadar-sadar! Udah dikasih tau berkali-kali teteeeep aja ga ngerti. Huh. Udah deh, orang begitu mah kudu Allah yang ‘nampol’. Hehe. Semoga kita termasuk orang-orang yang terlindung dari siksa dan adzab Allah, aamiin.

Jakarta, sore hari.

26 Juli 2017.

Read More

Tanya #2

Aku tak tahu bagaimana perasaan seorang induk ketika melihat anaknya tidak ada di rumah.

Yang aku tahu adalah rasa rindu ingin pulang dari seorang anak kepada induknya.

Aku tak paham betul bagaimana perasaan seorang induk ketika melihat anaknya sakit.

Yang aku tahu adalah rasa ingin didekap dan diperhatikan dari seorang anak kepada induknya.

Aku pun belum mengerti bagaimana perasaan seorang induk ketika melihat anaknya telah bertemu dengan seorang anak dari induk lain.

Dan aku pun belum tahu perasaan apa yang dimiliki seorang anak ketika ia memutuskan untuk hidup bersama dengan anak dari induk lain tersebut.

Yang aku tahu adalah perasaan bahagia sekaligus khawatir.

Bahagia karena akhirnya menemukanmu,

Juga khawatir,

Apakah ini adalah ujian dari-Mu?

Jakarta, menjelang sore.

12 Juli 2017.

Read More

Surat Rindu Untuk Kamu

Hai, apa kabar?

Rasanya telah satu purnama terlewati, padahal bulan sabit pun belum berganti. Apa memang benar ya kata orang, ketika hati merindu waktu terasa begitu lama berlalu. Sejam pun terasa seperti setahun, sehari terasa seabad lamanya.

Alangkah lucunya hati ini. Yang terus menyimpan rasa, terus berusaha mengikutimu tanpa tanda, terus mencoba melihatmu meski jauh di mata, dan terus menunggumu tanpa ragu melanda. Walau terkadang rindu ini membuat gelisah, tak jarang pula membuat hati resah. Apa kabar kamu yang disana? Lagi dimana? Dengan siapa? Sekarang lagi apa?

Jarak dan waktu memang telah menjadi musuh utama bagiku, orang yang sedang mencinta. Tanpa tanda tanpa tanya ia hadir diantara aku dan kamu. Dengan teganya pula ia menghadirkan rindu yang tak terduga. Mengisi setiap sudut kosong di hati, menghujam jiwa dari pagi hingga pagi lagi, membuat suasana mendung walau surya terik menyinari.

Aku lebih memilih diam dengan semua perasaan ini. Aku memilih menyimpan saja rasa rindu ini. Bukan karena takut melihat reaksimu, apalagi mendengar pengakuanmu. Aku hanya ingin menyimpannya dalam hati, dalam dimensi yang tak tertandingi. Aku hanya ingin menikmatinya sendiri, merasakan setiap aroma magi yang menghiasi. Aku hanya ingin menyapamu melalui tulisan, juga memelukmu lewat doa. Karena menyapamu tanpa perantara terlalu jauh, dan memelukmu langsung belum muhrim.

Ini bukan surat cinta untuk Starla. Ini adalah surat rindu untuk kamu. Dengan tulisan ini aku mengungkapkan perasaanku, mencoba mengurangi sakit walau sedikit. Karena sesungguhnya aku tak ingin tenggelam dalam setiap resah yang hadir bersama jarak dan waktu yang membawa rindu. Karena sesungguhnya aku tak ingin terus terbuai dalam elegi yang tak kenal henti.

Semoga saja semogaku dipertemukan dengan aminmu,  dan semogamu dipertemukan dengan aminku. Lalu membawa kita pada satu muara, yang memberi kedamaian hati bagi keduanya, tanpa ada yang tersakiti, tanpa ada yang terdzalimi.

Aamiin.

Brebes, siang hari.

20 Juni 2017.

Read More

Lima Hari Penuh Ekspresi

Kita tidak akan pernah tau apa yang akan terjadi. Kadang yang terlihat sekarang bukanlah hasil akhir di belakang. Kadang pula yang diprediksikan tidak akan terjadi, ternyata itulah realitanya. Hidup ini memang misteri. Tidak ada satupun yang bisa tepat memprediksi kecuali Sang Ilahi. Yang dirasa saat ini bisa jadi hanya sebuah ilusi. Yang tampak hari ini mungkin saja fatamorgana. Tidak ada yang kekal, tidak ada yang mutlak benar, kecuali Yang Maha Besar.

Lima hari yang berarti dan penuh ekspresi. Dimana aku, kamu, dia, mereka, saling menunjukkan identitas, saling berbagi kisah, saling berbagi resah dan gelisah. Bukan hal yang mudah untuk menjadikan banyak kepala ini menjadi satu frekuensi, satu harmoni, satu sinergi. Konflik, perdebatan, muka masam, masa bodo, dan ekspresi kecut lainnya yang telah menjadi warna dasar dari pelangi kami. Perlahan mulai berdamai, seiring berjalan, bersama-sama berusaha melunturkan ego, membuka hati dan mata, hingga terwujudnya satu suara.

Lima hari yang penuh makna dan cerita. Dimana aku, kamu, dia, dan kita saling bertatap muka. Berusaha menjadi kuat, tidak patah semangat, dan sebisa mungkin untuk tetap tegak. Lelah? Pastinya. Waktu tidur kami berkurang, waktu istirahat kami juga menipis. Hanya saja jatah makan kami yang bertambah. Membuat semangat kembali membuncah. Saat-saat ternikmat yang pernah ada ketika duduk bersama dengan satu rasa. Rasa yang membuat kami menjadi akrab, dekat, dan hangat. Rasa yang membuat kami malah menjadi semangat, kompak, dan bergerak cepat. Tidak peduli apa dan seberapa banyak yang disajikan. Yang terpenting adalah satu, kenyang. Momen selanjutnya yang selalu ditunggu-tunggu adalah berdiri di depan pintu ekspresi. Saling berbagi semangat, berbagi kisah, berbagi tatap. Tatapan yang selalu aku tunggu, tatapan yang selalu bisa membuatku untuk rela menunggu, tatapan yang selalu bisa menaikkan gairahku. Seketika tatapan itu berkakhir, kami digiring masuk ke dalam meja setengah lingkaran. Dimulailah lagi perjuangan kami. Berjuang melawan lelah, suntuk, dan aura negatif lainnya. Sesekali mata ini mencuri-curi untuk mencari tatapan tadi. Tatapan yang bisa menghilangkan rasa lelah, gelisah, dan resah. Sesekali pula tatapanku terperangkap dalam tatapannya, yang membuat aku terkejut namun tetap bisa naif.

Hari pertama kami berjalan sangat menarik, sampai-sampai tidak ada satupun yang bisa tetap energik. Ya, kami menjadi bulan-bulanan amukan massa. Berbagai tuduhan menghujani kami yang sudah setengah sadar. Ingin rasanya cepat berakhir, cepat diakhiri. Agar tak ada lagi suara tinggi yang selalu membuat kami ingin menjerit. Dengan sabar dan penuh pengertiannya, sosok manusia itu menenangkan kami. Dan ia selalu berhasil membuat kami merasa tidak salah dan berada diposisi yang benar. Walau sebenarnya memang kami yang salah, walau sebenarnya juga mereka tidak sepenuhnya benar. Namun, pada akhirnya ia selalu memberikan pesan dan misi ke depan untuk kami yang lebih baik lagi. Begitu seterusnya, dengan suara dan nada yang sama, dengan gaya bahasa dan pembawaan yang tidak berbeda, ia selalu berhasil membuat kami patuh, membuat kami teguh, membuat kami semangat untuk menjadi lebih baik. Kami saling menguatkan, saling mengingatkan, saling mendorong dan saling berbagi. Tanpa tendensi yang bertele-tele, yang penting misi kami berhasil.

For better endurance, for better performance, for better relation, for better memory. Rentetan misi yang berhasil kami jalani. Matriks performance menunjukkan grafik yang meningkat. Tidak hanya satu atau beberapa orang. Semua tersenyum dan bangga, namun tetap rendah dan tidak jemawa. Keberhasilan ini bukan hanya karena kita sebagai peserta, namun juga sosok manusia yang sangat berjasa memberi kami asa, sosok mereka yang memiliki peran penting untuk membuat kami satu nasib satu perjuangan, dan sosok dia yang selalu berhasil melenyapkan lelah menghilangkan gundah.

Lima hari yang telah mengajarkanku banyak hal, banyak arti. Lewat kisah yang aku tangkap dari setiap gerak-geriknya. Lewat pesan yang bisa kupahami lewat mata dan perkataannya. Lima hari yang tidak akan cukup diceritakan dalam waktu lima hari. Lima hari yang tidak akan dikenang selama lima hari, bulan, tahun, windu, ataupun abad. Namun lima hari, yang selalu akan membekas di hati. Tumbuh menjadi benih-benih relasi yang akan terus bersemi. Karena kami adalah kita, Balvacordia. 

Terima kasih untuk yang telah memberikan ekspresinya. Terima kasih untuk yang tidak malu berbagi kisah hidupnya. Jangan lupa makan dan tidur yang cukup. Ingat untuk bahagia.

Dari yang sedang berdamai dengan diri sendiri,

With love.

Surabaya, 15 April 2017.

Ba’da Isya.

Read More

Tanya #1

Rasa khawatir ini membuatku berpikir. Apakah ini perasaan antara manusia dengan manusia, atau perasaan antara wanita dengan pria? ꟷ HM

­­­Surabaya, 15 April 2017.

Sedang berdamai dengan diri sendiri.

Read More

Tugas 5-ETS Pemrograman Web Kelas F: Membuat Website

Tugas 5-ETS Pemrograman Web Kelas F: Membuat Website

Nama: Hania Maghfira
NRP: 5115100042

Source code:

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
      <title>MAPAGAMA – Mahasiswa Pencinta Alam Universitas Gadjah Mada</title>  
      <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">  
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">  
      <link rel="stylesheet" href="style.css">  
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arial">  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">  
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho">  
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  <link rel="icon" href="http://mapagama.ukm.ugm.ac.id/wp-content/uploads/2012/09/Lambang-MAPAGAMA-150x150.png" sizes="32x32">  
 <!--style-->  
  <style>  
   body{font-family: "Raleway"}  
   #overlay {  
   position: scroll;  
   display: block;  
   width: 100%;  
   height: 512px;  
   }  
   h1 {letter-spacing: 1px; font-family: "Arial"}  
   .carousel-inner > .item > img,  
   .carousel-inner > .item > a > img {  
      width: 70%;  
      margin: auto;  
   }  
   .parallax1 {  
   /* The image used */  
   background-image: url("bendera-mapa.jpg");  
   opacity: 0.9;  
   margin-top: -40px;  
   /* Set a specific height */  
   width: 100%;  
   height: 600px;  
   /* Create the parallax scrolling effect */  
   background-attachment: fixed;  
   background-position: bottom center;  
   background-repeat: no-repeat;  
   background-size: cover;  
   }  
   .parallax2 {  
   /* The image used */  
   background-image: url("body1.jpg");  
   opacity: 0.9;  
   /* Set a specific height */  
   width: 100%;  
   height: 1300px;  
   /* Create the parallax scrolling effect */  
   background-attachment: fixed;  
   background-position: bottom center;  
   background-repeat: no-repeat;  
   background-size: cover;  
   }  
   .parallax3 {  
   /* The image used */  
   background-image: url("head.jpg");  
   opacity: 0.9;  
   /* Set a specific height */  
   width: 100%;  
   height: 300px;  
   /* Create the parallax scrolling effect */  
   background-attachment: fixed;  
   background-position: bottom center;  
   background-repeat: no-repeat;  
   background-size: cover;  
   }  
   .w3-button {width:120px; border-radius: 6px;}  
   #myBtn {  
    display: none;  
    position: fixed;  
    bottom: 20px;  
    right: 30px;  
    z-index: 99;  
    border: none;  
    outline: none;  
    background-color: grey;  
    color: white;  
    cursor: pointer;  
    padding: 15px;  
    border-radius: 10px;  
   }  
   #myBtn:hover {  
    background-color: #555;  
   }  
   input[type=text], select, textarea {  
     width: 100%;  
     padding: 12px;  
     border: 1px solid #ccc;  
     border-radius: 4px;  
     box-sizing: border-box;  
     margin-top: 6px;  
     margin-bottom: 16px;  
     resize: vertical;  
   }  
   input[type=submit] {  
     background-color: #4CAF50;  
     color: white;  
     padding: 12px 20px;  
     border: none;  
     border-radius: 4px;  
     cursor: pointer;  
   }  
   input[type=submit]:hover {  
     background-color: #45a049;  
   }  
   .container {  
     border-radius: 5px;  
     background-color: #f2f2f2;  
     padding: 20px;  
   }  
   #a{font-family: "Arial"}  
   #p{font-family: "Pacifico"}  
   #r{font-family: "Rancho"}  
   #rl{font-family: "Raleway"}  
  </style>  
 </head>  
 <body>  
 <!-- button up -->  
 <div id="r" style="font-size: 14px">  
 <button onclick="topFunction()" id="myBtn" title="Go to top">UP</button>  
 </div>  
 <script>  
 window.onscroll = function() {scrollFunction()};  
 function scrollFunction() {  
   if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {  
     document.getElementById("myBtn").style.display = "block";  
   } else {  
     document.getElementById("myBtn").style.display = "none";  
   }  
 }  
 function topFunction() {  
   document.body.scrollTop = 0;  
   document.documentElement.scrollTop = 0;  
 }  
 </script>  
 <!-- end of button up -->  
 <!-- HEADER -->  
 <section id="header">  
 <header>  
 <div class="content">  
  <div class="parallax1">  
   <div class="header-content-wrap" style="background: rgba(0,0,0,0.5); min-height: 600px; width: 100%">  
    <div class="w3-container w3-center">  
     <h1 style="color: #FFFFFF; margin-top: 250px; margin-left: 100px; margin-right: 100px; font-size: 55px"><b>MAHASISWA PENCINTA ALAM UNIVERSITAS GADJAH MADA</b></h1>  
     <div id="a" style="margin-top: 100px; font-size: 12px;">  
      <a href="#focus" class="w3-button w3-indigo">BERANDA</a>  
      <a href="#about" class="w3-button w3-pink">TENTANG KAMI</a>  
      <a href="#galeri" class="w3-button w3-green">GALERI</a>  
      <a href="#hub" class="w3-button w3-deep-orange">HUBUNGI KAMI</a>  
     </div>  
    </div>  
   </div>  
  </div>   
 </div>  
 </header>  
 </section>  
 <!-- / END HEADER SECTION -->  
 <!-- SECTION BERANDA -->  
 <section class="focus" id="focus">  
 <div class="w3-container" style="min-height: 670px;">  
  <div class="w3-center">  
   <h2 style="margin-top: 20px; font-size: 30px; color: #212121" id="a"><b>MAPAGAMA</b></h2>  
   <div id="r" style="color: #8A8A8A; font-size: 20px">Mahasiswa Pencinta Alam Universitas Gadjah Mada</div>  
  </div>  
  <div class="w3-center" style="margin-top: 100px; margin-left: 100px; margin-right: 100px; ">  
   <div class="row">  
    <div class="col-lg-4 col-sm-4 focus-box">  
    <div class="service-icon">  
    <img src="h1.png" class="img-circle" width="105" height="100">  
    </div>  
    <br>  
    <h3 id="r" class="w3-red-border-bottom" style="letter-spacing: 2px"><b>GUNUNG HUTAN</b></h3>  
    <hr>  
    <p>Divisi yang menawarkan pengalaman berpetualang menjelajah gunung-gunung di nusantara dan dunia</p>  
    <br>  
    <br>  
    </div>  
    <div class="col-lg-4 col-sm-4 focus-box">  
    <div class="service-icon">  
    <img src="h2.png" class="img-circle" width="105" height="119">  
    </div>  
    <h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>OLAHRAGA ARUS DERAS</b></h3>  
    <hr>  
    <p>Divisi yang menawarkan sensasi lebih bagi para petualang dan eksplorasi sungai-sungai di nusantara &amp; dunia</p>  
    <br>  
    <br>  
    </div>  
    <div class="col-lg-4 col-sm-4 focus-box">  
    <div class="service-icon">  
    <img src="h3.png" class="img-circle" width="105" height="118">  
    </div>  
    <h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>PANJAT TEBING</b></h3>  
    <hr>  
    <p>Divisi yang menawarkan pengalaman menantang adrenalin di ketinggian dan tebing-tebing di nusantara maupun dunia</p>  
    <br>  
    <br>  
    </div>  
    <div class="col-lg-6 col-sm-6 focus-box">  
    <div class="service-icon">  
    <img src="h4.png" class="img-circle" width="105" height="119">  
    </div>  
    <h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>PENELUSURAN GUA</b></h3>  
    <hr>  
    <p>Divisi yang menawarkan petualangan di dalam lorong gelap dan mengeksplorasi gua-gua di nusantara dan dunia</p>  
    <br>  
    <br>  
    </div>  
    <div class="col-lg-6 col-sm-6 focus-box">  
    <div class="service-icon">  
    <img src="h5.jpg" class="img-circle" width="105" height="119">  
    </div>  
    <h3 id="r" class="red-border-bottom" style="letter-spacing: 2px"><b>PARALAYANG</b></h3>  
    <hr>  
    <p>Divisi yang menawarkan terbang melayang di udara. Membutuhkan skill tingkat tinggi dan pengalaman, dapat mengeksplorasi keindahan alam nusantara dan dunia dari udara.</p>  
    <br>  
    <br>  
    </div>  
   </div>  
  </div>  
 </div>  
 </section>  
 <!-- / END OF BERANDA -->  
 <!-- TENTANG KAMI -->  
 <section id=about>  
 <div class="content">  
  <div class="parallax2">  
   <div class="header-content-wrap" style="background: rgba(0,0,0,0.1); min-height: 1300px; width: 100%">  
   <br>  
   <br>  
   <br>  
   <div id="a" class="w3-center">  
   <h2 style="margin-top: 20px; font-size: 50px; color: #FFFFFF"><b>TENTANG KAMI</b></h2>  
   <div id="r" style="color: #EFEBEB; font-size: 30px">Selamat Datang di website resmi Mahasiswa Pencinta Alam Universitas Gadjah Mada</div>  
   </div>  
    <div class="w3-row col-md-6">  
    <div class="w3-container">  
     <h1 id="rl" style="color: #FFFFFF; margin-top: 100px; margin-left: 100px; font-size: 40px; text-align: right; letter-spacing: 2px">"Setiap manusia punya sejarahnya, lalu dengan sejarah mereka mengenyam masa depan."  
     </h1>  
    </div>  
    </div>  
    <div class="w3-row col-md-6">  
    <div class="w3-container">  
    <p id="rl" style="color: #FFFFFF; text-align: left; font-size: 14px; margin-top: 100px; margin-right: 100px">Mahasiswa Pencinta Alam Universitas Gadjah Mada merupakan unit kegiatan mahasiswa di tingkat universitas yang mewadahi minat dan bakat mahasiswa di lingkungan UGM dalam kegiatan yang bersifat kepencintaalaman. MAPAGAMA merupakan salah satu sarana guna mewujudkan keberadaan mahasiswa UGM dalam memperjuangkan cita-citanya yang berlandaskan Pancasila, UUD 1945 dan Tri Dharma Perguruan Tinggi. Dalam setiap kegiatan kepencintaalaman secara operasional MAPAGAMA selalu berlandaskan pada Tri Dharma Perguruan Tinggi yaitu Pendidikan, Penelitian dan Pengabdian Masyarakat. <br> <br> Pada bulan September 1973 MAPAGAMA didirikan sebagai unit kegiatan ekstrakurikuler kepencintaalaman di bawah Dewan Mahasiswa UGM (DEMA UGM). Namun, pada saat itu sedang terjadi gerakan Mahasiswa yang mengalami puncaknya pada peristiwa Malari 1974. Sehingga mendorong Pangkop kamtib mengeluarkan S.Kep/02/Kopkam/1978 tentang pembubaran Dema dan Sema dan lanjut keluar SK tentang NKK/BKK oleh Menteri P dan K. Sehingga dengan dibekukannnya Dema, maka secara otomatis MAPAGAMA yang pada saat itu berada di bawah DEMA ikut bubar. Hingga dari tahun tersebut sampai tahun 1981, MAPAGAMA tidak aktif lagi. <br> <br> Pada Tahun 80-an muncul kembali ide untuk menghidupkan MAPAGAMA, sehingga pada Agustus 1981 MAPAGAMA resmi berdiri lagi dengan Pengurus Harian yang memperoleh mandat dari kelompok-kelompok PENCINTA alam yang ada di UGM untuk mengembalikan eksistensi MAPAGAMA dengan menyusun program kerja serta sistem organisasi yang baru. Pada saat itu MAPAGAMA merupakan sentral wadah kepencintaalaman di UGM dan sebagai pusat koordinasi mapala fakultas. Internal MAPAGAMA sebagai pengarah kegiatan MG di fakultas dan ekstern sebagai saluran aspirasi mapala fakultas. <br> <br> Sebagai langkah untuk membuktikan eksistensi MAPAGAMA pada tahun 1984 direncakan sebuah Ekspedisi Gajah Mada yang akhirnya berhasil terlaksana tepatnya pada bulan Juli – September 1989 di Kecamatan Ilaga dan Beoga, Kabupaten Jayawijaya, Irian. Materi ekspedisi meliputi penelitian pengabdian masyarakat dan olahraga PENCINTA alam (ke Pegunungan Jaya Wijaya-Puncak Carstenz). Seusai EGM 84 beberapa personil kembali ke fakultas karena merasa bentuk perserikatan dirasa kurang cocok bagi perkembangan MAPAGA. Oleh karena itu pada tanggal 23 Desember 1984 diadakan suatu pertemuan untuk membahas masalah keanggotaan dan bentuk MAPAGAMA. <br> <br> Berdasarkan pertemuan tersebut, akhirnya diputuskan bahwa keanggotaan MAPAGAMA bersifat individu. Diadakan heregistrasi bagi anggota agar sesuai dengan bentuk organisasi yang baru. Kriteria anggota adalah eks Gladimula 1, eks panitia pembina, instruktur Gladimula 1, eks EGM 84 dan pengurus harian. Dan setelah itu dibentuk kepengurusan transisi dari bentuk perserikatan ke bentuk perhimpunan biasa. Maka harus ada revisi total untuk AD/ART, yang pelaksanaannya dikerjakan oleh tim yang dipimpin Mas Sunyoto, disahkan tanggal 23 September 1985. Sejak tahun 1985, MG hidup sebagai organisasi kepencintaalaman dengan semangat yang baru. MAPAGAMA mempertahankan eksistensi struktur organisasi dan keanggotaannya hingga sekarang sudah dilaksanakan 33 kali Gladimula.</p>  
    </div>  
    </div>  
   </div>  
  </div>   
 </div>  
 </section>  
 <!-- END TENTANG KAMI -->  
 <!-- STRUKTUR-->  
 <section id=struktur>  
 <div class="w3-container w3-center" style="background-color: #FFFFFF; min-height: 500px">  
   <h1 id="r" style="color: #000000; margin-top: 50px"><b>PENGURUS HARIAN MAPAGAMA 2017</b></h1>  
     <br>  
     <br>  
     <br>  
     <div class="row">  
     <div style="color: #000000" id="rl">  
      <div class="col-sm-3">  
      <div class="service-icon">  
       <img src="ketua.jpg" class="img-circle" width="100" height="100">  
      </div>  
      <br>  
      <p><b>MANTO SITINDAON</b></p><p>Ketua Umum</p>  
      <br>  
      <br>  
      </div>  
      <div class="col-sm-3">  
      <div class="service-icon">  
       <img src="sekretaris.jpg" class="img-circle" width="100" height="100">  
      </div>  
      <br>  
      <p><b>ANDOYO RESPATI FITRIONO</b></p><p>Sekretari</p>  
      <br>  
      <br>  
      </div>  
      <div class="col-sm-3" style="margin-top: 115px">  
      <p><b>EVA LUTVI ATUR ROHMAH NINGSIH</b></p><p>Bendahara</p>  
      <br>  
      <br>  
      </div>  
      <div class="col-sm-3">  
      <div class="service-icon">  
       <img src="kabid.jpg" class="img-circle" width="100" height="100">  
      </div>  
      <br>  
      <p><b>M. REZA KHAIRURRAHMAN</b></p><p>Kabid. Pendidikan dan Pengembangan</p>  
      <br>  
      <br>  
      </div>  
      <div>  
      <p><b>ALIEF FAHMIL UMAM</b></p><p>Kabid. Operasional</p>  
      </div>  
     </div>  
     </div>  
 </div>  
 </section>  
 <!-- END OF STRUKTUR -->  
 <!-- GALERI -->  
 <section id=galeri>  
 <div class="w3-container w3-center" style="background-color: #141414; min-height: 750px">  
 <h2 style="margin-top: 40px; font-size: 35px; color: #FFFFFF" id="a"><b>GALERI</b></h2>  
 <div id="r" style="color: #EFEBEB; font-size: 20px">Kumpulan beberapa dokumentasi dari kegiatan MAPAGAMA</div>  
 <br>  
 <br>  
  <div class="w3-container">  
    <div id="myCarousel" class="carousel slide" data-ride="carousel">  
   <!-- Indicators -->  
    <ol class="carousel-indicators">  
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>  
      <li data-target="#myCarousel" data-slide-to="1"></li>  
      <li data-target="#myCarousel" data-slide-to="2"></li>  
      <li data-target="#myCarousel" data-slide-to="3"></li>  
    </ol>  
   <!-- Wrapper for slides -->  
    <div class="carousel-inner" role="listbox">  
      <div class="item active">  
       <img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17634437_1241286579325789_4352830271091747789_n.jpg?oh=d58a27dd6529c0d173613c83ae6bc4b3&amp;oe=595E6913" style="width: 760px; height: 500px">  
      </div>  
      <div class="item">  
      <img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17626686_1241286649325782_2679845175080918401_n.jpg?oh=4bca56e6eef641a58df56294c7ff730d&amp;oe=595943F7" style="width: 760px; height: 500px">  
      </div>  
      <div class="item">  
      <img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17757531_1241286619325785_6402507763782517221_n.jpg?oh=a1e02575d8179348f31ef5f61c396ed1&amp;oe=5992FA3D" style="width: 760px; height: 500px">  
      </div>  
      <div class="item">  
      <img src="https://scontent-sin6-1.xx.fbcdn.net/v/t1.0-9/17522674_1241286702659110_4637063509380936746_n.jpg?oh=f655113005455b9be6a9935990cc0a97&amp;oe=594E1094" style="width: 760px; height: 500px">  
      </div>  
    </div>  
   <!-- Left and right controls -->  
   <a class="left carousel-control" href="#myCarousel" data-slide="prev">  
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>  
    <span class="sr-only">Previous</span>  
    <!-- <span class="icon-prev"></span> -->  
   </a>  
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">  
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  
    <span class="sr-only">Next</span>  
   </a>  
    </div>  
  </div>  
 </div>  
 </section>  
 <!-- END OF GALERI -->  
 <!-- HUBUNGI KAMI -->  
 <section id=hub>  
 <div class="content">  
   <div class="header-content-wrap" style="background-color: #FFFFFF; min-height: 300px; width: 100%">  
   <div class="w3-center">  
   <h2 style="margin-top: 50px; font-size: 30px; color: #212121" id="a"><b>KONTAK</b></h2>  
    <div class="w3-row" style="margin-left: 300px ">  
     <div class="col-sm-3 w3-center" style="margin-top: 30px">  
     <div style="color: #000000; margin-top: 40px;">  
      <div class="service-icon">  
       <img src="loc.png" width="50" height="50">  
      </div>  
     <br>  
     <p>Jln. Bougenvile, Kompleks Perumahan Dosen Blok N30, Sekip Utara, Sinduadi, Mlati, Sleman, Yogyakarta. 55281</p>  
     </div>  
     </div>  
     <div class="col-sm-3 w3-center" style="margin-top: 30px">  
     <div style="color: #000000; margin-top: 40px;">  
      <div class="service-icon">  
       <img src="fb.png" width="50" height="50">  
      </div>  
     <br>  
     <p>MAPAGAMA UGM</p>  
     </div>  
     </div>  
     <div class="col-sm-3 w3-center" style="margin-top: 30px">  
     <div style="color: #000000; margin-top: 40px;">  
      <div class="service-icon">  
       <img src="ig.png" width="50" height="50">  
      </div>  
     <br>  
     <p>@mapagama</p>  
     </div>  
     </div>  
    </div>  
   </div>  
   </div>  
 </div>  
 </section>  
 <!-- END OF HUBUNGI KAMI -->   
 <!-- ISI FEEDBACK -->  
 <section id=call>  
 <div class="w3-container" style="background-color: #2E2E2E; min-height: 300px">  
 <h2 class="w3-center" style="margin-top: 40px; font-size: 35px; color: #FFFFFF" id="a"><b>HUBUNGI KAMI</b></h2>  
 <div class="w3-center" id="r" style="color: #EFEBEB; font-size: 20px">Anda dapat menghubungi kami disini:</div>  
 <br>  
 <br>  
  <div style="margin-left: 300px; margin-right: 300px; max-width: 800px;">  
  <form action="/action_page.php">  
   <label for="fname" style="color: #FFFFFF">Nama Lengkap</label>  
   <input type="text" id="fname" name="firstname" placeholder="Your name..">  
   <label for="fname" style="color: #FFFFFF">Email</label>  
   <input type="text" id="fname" name="firstname" placeholder="Your name..">  
   <label for="fname" style="color: #FFFFFF">Subjek</label>  
   <input type="text" id="fname" name="firstname" placeholder="Your name..">  
   <label for="subject" style="color: #FFFFFF">Pesan</label>  
   <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>  
   <input type="submit" value="Submit">  
  </form>  
  </div>  
 </div>  
 </section>  
 <!-- END OF FEEDBACK -->  
 </body>  
 </html>  

Tampilan Source Code

Read More

Sketsa Pemrograman Web F

Tugas 5 Pemrograman Web Kelas F: Membuat Sketsa Web

Nama: Hania Maghfira
NRP: 5115100042

Beranda dan Tentang Kami

Struktur Organisasi dan Galeri

Kontak

Read More

Katamu

Katanya kau tidak merindukan hujan.
Namun, diam-diam kau berdoa agar hujan datang.

Katanya kau tidak akan membenci matahari.
Namun, ketika ia datang kau selalu menghindari, mencari tempat berlindung untuk bersembunyi.

Katanya kau tidak apa jika tidak bersama.
Namun, dengan sadar kau meronta, mengumpat dia yang belum tentu tersangkanya.

Katanya kau akan menerima setiap ketentuanNya.
Namun, kau berharap datangnya keajaiban dan memohon untuk tetap didekatkan.

Katanya kau sudah sepenuhnya merelakan,
tidak akan merintih,
tidak akan resah,
tidak berkeluh kesah.
Benarkah?

Surabaya, 30 Maret 2017.

Ketika fajar menyongsong.

Read More

Tugas 4 Pemrograman Web Kelas F

Tugas 4 Pemrograman Web Kelas F: Membuat Bootstrap

Nama: Hania Maghfira
NRP: 5115100042

Source code:

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
      <title>Hania Maghfira</title>  
      <meta charset="utf-8">  
       <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">  
      <!-- <link rel="stylesheet" href="style.css"> -->  
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">  
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
      <link rel="icon" type="image/gif" href="https://s-media-cache-ak0.pinimg.com/originals/03/11/20/0311203c3a6e3808bff8d23daf44a4af.png">  
 <!--style-->  
      <style>  
           body, h1 {font-family: "Raleway"}  
           h1 {letter-spacing: 7px}  
           .carousel-inner > .item > img,  
            .carousel-inner > .item > a > img {  
              width: 70%;  
              margin: auto;  
            }  
      </style>  
 </head>  
 <body>  
 <!--Page content-->  
 <div class="w3-content" style="max-width: 1000px">  
 <!--Header-->  
      <header class="w3-center w3-opacity w3-padding-16 w3-container ">  
           <h1 class="w3-xlarge">Autobiography</h1>  
           <h1 style="font-size: 45px">Hania Maghfira</h1>  
           <p style="letter-spacing: 4px; font-size: 12px">student &#9900; netizen &#9900; traveller</p>  
      <div style="margin-top: 30px; letter-spacing: 3px" class="w3-center">  
      <a href="https://twitter.com/haniamaghfira" rel="nofollow" target="_blank" title="Twitter" class="w3-hover-text-red"><i class="fa fa-twitter transition35"></i></a>  
      <a href="https://www.facebook.com/haniamaghfira" rel="nofollow" target="_blank" title="Facebook" class="w3-hover-text-kight-blue"><i class="fa fa-facebook transition35"></i></a>  
      <a href="https://www.linkedin.com/in/hmaghfira" rel="nofollow" target="_blank" title="Linkedin" class="w3-hover-text-yellow"><i class="fa fa-linkedin transition35"></i></a>  
      <a href="https://www.instagram.com/hmaghfira" rel="nofollow" target="_blank" title="Instagram" class="w3-hover-text-green"><i class="fa fa-instagram transition35"></i></a>  
       </div>  
      </header>  
 <!--end header-->  
 <!--body content-->  
 <div class="w3-center" style="margin-right: 200px; margin-left: 200px">  
      <div class="w3-container">  
       <br>  
       <div id="myCarousel" class="carousel slide" data-ride="carousel">  
   <!-- Indicators -->  
   <ol class="carousel-indicators">  
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>  
    <li data-target="#myCarousel" data-slide-to="1"></li>  
    <li data-target="#myCarousel" data-slide-to="2"></li>  
    <li data-target="#myCarousel" data-slide-to="3"></li>  
   </ol>  
   <!-- Wrapper for slides -->  
   <div class="carousel-inner" role="listbox">  
    <div class="item active">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/16585346_206911493117517_7226495926804676608_n.jpg" alt="Hania" style="width: 760px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Rooftop, 10 February 2017</h5>  
      <p class="w3-opacity">"If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you."—A. A. Milne</p>  
     </div>  
    </div>  
    <div class="item">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/16585590_435309843478880_538959915373297664_n.jpg" style="width: 412px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Villa Bumi Mas Pacet, East Java, 18-19 April 2017</h5>  
      <p class="w3-opacity">"Life isn't about finding yourself. Life is about creating yourself."—George Bernard.</p>  
     </div>  
    </div>  
    <div class="item">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/12317534_1060464463984013_1459294193_n.jpg" style="width: 451px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Penanggungan, East Java</h5>  
     </div>  
    </div>  
    <div class="item">  
     <img src="https://scontent-sit4-1.cdninstagram.com/t51.2885-15/e35/17126877_770919969724602_829539754600038400_n.jpg" style="width: 482px; height: 357px">  
     <div class="carousel-caption" style="font-size: 11px">  
      <h5>Kamu</h5>  
      <p class="w3-opacity">"Ada begitu banyak cara bagi Tuhan untuk mempertemukan. Terlihat rumit padahal sederhana, terlihat jauh padahal dekat, terlihat orang lain padahal kamu"—Makna Pencarian</p>  
     </div>  
    </div>  
   </div>  
   <!-- Left and right controls -->  
   <a class="left carousel-control" href="#myCarousel" data-slide="prev">  
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>  
    <span class="sr-only">Previous</span>  
    <!-- <span class="icon-prev"></span> -->  
   </a>  
   <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">  
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  
    <span class="sr-only">Next</span>  
   </a>  
  </div>  
 </div>  
 <!-- quote -->  
      <blockquote style="margin-top: 12px; letter-spacing: 1px; font-size: 13px">Bukankah mengharapkan surga jauh lebih mungkin dari mengharapkan seseorang yang tidak jelas? Mari kita tata dan benahi lagi harapan kita. Sudahkah di tempat yang tepat?<footer>Kurniawan Gunadi</footer>  
      </blockquote>  
 </div>  
 <!-- boumme -->  
 <div style="margin-left: 100px; margin-right: 100px; margin-top: 20px; margin-bottom: 100px; font-size: 18px; word-spacing: 5px; text-align: justify;">  
      <p>An on-going-to 20 years old girl who still pursuing and striving to reach her dreams. Become ESTJ person makes her love thinking, expressing all of her feeling, sometimes judging with sensing. But, she's actually friendly girl. Making joke or conversation with her will make you comfort and become entertained.<br>  
      <br>I was born on 19th August in Pasuruan, East Java. Do you know where is it? It is located among three main roads which is connecting Surabaya-Malang-Banyuwangi. It's so amazing, isn't? Haha. I am naturally Javanese, my mom from Brebes and my dad from Pasuruan. They meet each other in 'Rain City' when they were bachelor student in one of the best institute in there. And now, I am study in Surabaya. Will I meet my soulmate as my parent did? Wqwq.<br>  
      <br>My family live in Bali, paradise of Indonesia. And my current address is Keputih, Surabaya. I have become 2nd year student‌ in Informatics Department of ITS Surabaya. It's such a wonderful life become a part of this world haha. I can create code, compile, and run it. Sounds easy, right? Wqwq. Beside that, I can meet people with unique characteristics, so I can learn how to life with manner and face them.<br>  
      <br>I like writing, anything, but often personal opini. Actually I'm not a girl who very loves read novel, story, or something like that, but I'm trying to love books and try to read them. Since October 2016 till now, I've succeeded read 4 books, those are Hujan Matahari and Lautan Langit by Kurniawan Gunadi, Filosofi Kopi by Dee Lestari, and Tentang Kamu by Tere Liye. And now I'm still reading biography of Tan Malaka. Beside writing, I love travelling. Adventure (always) makes my day haha!<br>  
      <br>Maybe this is just short of my life story. If you wonder how my life was or is or will, feel free to talk with me :). Choose any social media (that I have) to keep in touch. It won't make you regret, trust me, it works :D  
      </p>  
 </div>  
 <div class="w3-container" style="background-color: #242423; margin-top: 16px">  
      <p class="w3-center" style="letter-spacing: 1px; color: #FFFFFF; margin-top: 20px">Visit <a href="http://hmaghfira.blogspot.com">hmaghfira.blogspot.com</a>  
      </p>  
 </div>  
 <!--end of body content-->  
 </div>  
 <!--end of page content-->  
 </body>  
 </html>  

Tampilan source code

Read More

Tugas 3 Pemrograman Web Kelas F

Tugas 3 Pemrograman Web Kelas F: Membuat Form Registrasi dengan Javascript

Nama: Hania Maghfira
NRP: 5115100042

Source code:

 <html>  
 <head>  
   <title>Registration Form</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
      <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">  
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">  
      <link rel="icon" type="image/gif" href="http://www.eyp74.com/imagenes/logo-form.gif">  
      <style>  
      body {font-family: "Raleway"; font-size: 12px;  
      }  
      </style>  
      <script type="text/javascript">  
           function valregister(){  
       var x=register.txtusername.value;  
       var x1=parseInt(x);  
       if(register.txtusername.value==""){  
             alert("Nama masih kosong");  
             register.txtusername.focus();  
             return false;  
       }  
       if(isNaN(x1)==false){  
             alert("Nama harus huruf");  
             register.txtusername.focus();  
             return false;       
       }  
       var y=register.txtnim.value;  
       var panjang=y.length;  
       if(register.txtnim.value==""){  
             alert("NIM masih kosong");  
             register.txtnim.focus();  
             return false;  
       }  
       if(panjang<10 || panjang>10){  
             alert("NIM harus 10 karakter");  
             register.txtnim.focus();  
             return false;  
       }      
       var z=register.txtmatkul.value;  
       if(z==""){  
             alert("NIM masih kosong");  
             register.txtnim.focus();  
             return false;  
       }  
       var a=register.txtdosen.value;  
       if(a==""){  
             alert("Dosen masih kosong");  
             register.txtdosen.focus();  
             return false;  
       }  
       return true;   
           }  
 </script>  
 </head>  
 <body>  
      <div class="w3-container" style="background-color: #2E2E2E">  
      <h1 class="w3-center" style="margin-top: 64px; color: #FFFFFF; letter-spacing: 7px">REGISTRATION FORM</h1>  
      <hr>  
      </div>  
 <form name="register" action="" method="post" enctype="multipart/form-data" onSubmit="return valregister()">  
  <table align="center" width="364" border="0" style="margin-top: 128px">  
  <tr>  
   <td width="113">Nama</td>  
        <td width="241">  
             <label>  
                  <input name="txtusername" type="text" id="txtusername" list="daftarnama">  
                  <datalist id="daftarnama"></datalist>  
                    <script>  
                     var nama = ["Hania Maghfira", "M Satrio Ramadhana Y", "Irfun Hanif", "Panji", "Yuga Mitra Hakiki", "Lee Yong Dae", "Rio Haryanto", "Syamsir Alam"];  
                     var option = '';  
                     for(var m=0; m<nama.length; m++){  
                          option += '<option value="'+nama[m]+'">';  
                     }  
                     document.getElementById('daftarnama').innerHTML = option;  
                     console.log(option);  
                    </script>  
             </label>  
        </td>  
  </tr>  
  <tr>  
   <td height="32">NIM</td>  
        <td>  
        <label>  
             <input type="text" name="txtnim" id="txtnim" maxlength="10" list="daftarnim"></td>  
             <datalist id="daftarnim"></datalist>  
                    <script>  
                     var nim = ["5115100042", "5112100217", "5114100177", "5115100706", "5114100075", "5113100097"];  
                     var option = '';  
                     for(var n=0; n<nim.length; n++){  
                          option += '<option value="'+nim[n]+'">';  
                     }  
                     document.getElementById('daftarnim').innerHTML = option;  
                     console.log(option);  
                    </script>  
          </label>  
  </tr>  
  <tr>  
   <td height="32">Mata Kuliah</td>  
        <td>  
        <label>  
              <input name="txtmatkul" type="text" id="txtmatkul" list="daftarmatkul">  
              <datalist id="daftarmatkul"></datalist>  
                    <script>  
                     var matkul = ["Jaringan Komputer", "Kecerdasan Buatan","Manajemen Basis Data","Otomata","Pemrograman Web","Perancangan Analisis Algoritma II"];  
                     var option = '';  
                     for(var k=0; k<matkul.length; k++){  
                          option += '<option value="'+matkul[k]+'">';  
                     }  
                     document.getElementById('daftarmatkul').innerHTML = option;  
                     console.log(option);  
                    </script>  
        </label>  
        </td>  
  </tr>  
  <tr>  
   <td height="32">Dosen</td>  
        <td>  
        <label>  
              <input name="txtdosen" type="text" id="txtdosen" list="daftardosen">  
             <datalist id="daftardosen"></datalist>  
                    <script>  
                     var dosen = ["Abdul Munif", "Bilqis Amaliah", "Chastine Fatichah", "Fajar Baskoro", "Hening TC", "M. Husni", "Rizky Januar", "Sarwosri", "Tohari Ahmad", "Victor"];  
                     var option = '';  
                     for(var l=0; l<dosen.length; l++){  
                          option += '<option value="'+dosen[l]+'">';  
                     }  
                     document.getElementById('daftardosen').innerHTML = option;  
                     console.log(option);  
                    </script>  
        </label>  
        </td>  
  </tr>  
  <tr>  
   <td>  
             <input name="save" type="submit" id="save" value="Submit">  
   </td>  
  </tr>  
 </table>  
 </form>  
 <div class="w3-container" style="background-color: #FFFFFF; margin-top: 128px">  
      <hr>  
      <p class="w3-center w3-bar" style="color: #000000; letter-spacing: 7px">THANKS</p>  
 </div>  
 </body>  
 </html>  

Tampilan source code

Read More

Tugas 2 Pemrograman Web Kelas F

Tugas 2 Pemrograman Web Kelas F: Membuat Form Pemesanan Kereta Api (PT KAI)

Nama: Hania Maghfira
NRP: 5115100042

Source code:

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Situs Resmi PT KAI</title>  
      <meta charset="utf-8">  
      <meta name="viewport" content="width=device-width, initial-scale=1">  
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
      <link rel="stylesheet" href="form.css" type="text/css">  
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
      <link rel="icon" type="image/gif" href="https://upload.wikimedia.org/wikipedia/id/thumb/4/4e/Logo_PT_KAI_(Persero).svg/1280px-Logo_PT_KAI_(Persero).svg.png">  
 </head>  
 <body>  
 <div class="content" style="background-color: #E0E0E0;">  
      <nav class="navbar navbar-default">  
            <div class="navbar-header">  
         <a class="navbar-brand" href="#" style="color: #FFFFFF; font-size: 20px; margin-left: 25px">Pemesanan Tiket Kereta Online</a>  
        </div>  
        <div class="collapse navbar-collapse" id="myNavbar" style="background-color: #3399CC">  
             <ul class="nav navbar-nav">  
              <li><a href="#" style="color: #FFFFFF; font-size: 16px">Daftar Harga Kelas KA</a></li>  
              <li><a href="#" style="color: #FFFFFF; font-size: 16px">Daftar Jadwal KA</a></li>  
              <li><a href="#" style="color: #FFFFFF; font-size: 16px">Data Pesanan Tiket</a></li>  
             </ul>  
             <ul class="nav navbar-nav navbar-right">  
              <li><a href="#" style="color: #FFFFFF"><span class="glyphicon glyphicon-log-out" style="color: #FFF"></span> Logout</a></li>  
             </ul>  
        </div>  
      </nav>  
      <div class="container">  
           <div class="col-sm-3">  
                <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/id/thumb/4/4e/Logo_PT_KAI_(Persero).svg/1280px-Logo_PT_KAI_(Persero).svg.png" alt="PT KAI">  
           </div>  
           <div class="col-sm-6">  
                <h1 style="color : #3366CC; font-size: 50px; margin-top: 50px;">Selamat Datang!!!</h1>  
           </div>  
      </div>  
      <hr>  
      <div class="container">  
       <form class="form-horizontal" role="form" method="post" action="send.php">  
        <div class="form-group">  
            <label class="control-label col-sm-offset-3 col-sm-2" for="pilihan-kereta">Nama Kereta:</label>  
            <div class="col-sm-3">  
                 <select class="form-control" id="pilihan-kereta" style="background-color: #F0F0F0">  
                 <option> </option>  
             <option>Argo Anggrek</option>  
             <option>Jayabaya</option>  
             <option>Kertajaya</option>  
             <option>Bima</option>  
             <option>Argo Bromo</option>  
             <option>Matarmaja</option>  
                 </select>  
            </div>  
           </div>  
        <div class="form-group">  
         <label class="control-label col-sm-offset-3 col-sm-2" for="tgl-berangkat">Tanggal Berangkat:</label>  
         <div class="col-sm-3">       
          <input type="date" class="form-control" id="tgl-berangkat" style="background-color: #F0F0F0">  
         </div>  
        </div>  
        <div class="form-group">  
         <label class="control-label col-sm-offset-3 col-sm-2" for="jam-berangkat">Jam Berangkat:</label>  
         <div class="col-sm-3">       
          <input type="time" class="form-control" id="jam-berangkat" style="background-color: #F0F0F0">  
         </div>  
        </div>  
        <div class="form-group">  
         <label class="control-label col-sm-offset-3 col-sm-2" for="tempat-asal">Dari:</label>  
         <div class="col-sm-3">  
                 <select class="form-control" id="tempat-asal" style="background-color: #F0F0F0">  
                 <option> </option>  
             <option>Bandung</option>  
             <option>Cirebon</option>  
             <option>Jakarta</option>  
             <option>Kediri</option>  
             <option>Semarang</option>  
             <option>Surabaya</option>  
             <option>Yogyakarta</option>  
             <option>Tegal</option>  
                 </select>  
            </div>  
        </div>  
        <div class="form-group">  
         <label class="control-label col-sm-offset-3 col-sm-2" for="tempat-tujuan">Ke:</label>  
         <div class="col-sm-3">  
                 <select class="form-control" id="tempat-tujuan" style="background-color: #F0F0F0">  
                 <option> </option>  
             <option>Bandung</option>  
             <option>Cirebon</option>  
             <option>Jakarta</option>  
             <option>Kediri</option>  
             <option>Semarang</option>  
             <option>Surabaya</option>  
             <option>Yogyakarta</option>  
             <option>Tegal</option>  
                 </select>  
            </div>  
        </div>  
        <div class="form-group">  
         <label class="control-label col-sm-offset-3 col-sm-2" for="kelas">Kelas:</label>  
         <div class="col-sm-3">  
                 <select class="form-control" id="kelas" style="background-color: #F0F0F0">  
                 <option> </option>  
             <option>Eksekutif</option>  
             <option>Bisnis</option>  
             <option>Ekonomi</option>  
                 </select>  
            </div>  
        </div>  
        <div class="form-group">      
         <div class="col-sm-offset-5 col-sm-10">  
          <button type="submit" class="btn btn-primary">Pesan Tiket</button>  
          <button type="submit" class="btn btn-warning" style="color:white">Batal</button>  
         </div>  
        </div>  
       </form>  
      </div>  
      <hr>  
      <footer class="container">  
           <p>  
           <center>Terima kasih atas kepercayaan Anda</center>  
           </p>  
      </footer>  
 </div>  
 </body>  
 </html>  

Tampilan source code

Read More