Pindah Rumah

Blog ini *resmi* ditutup. Selanjutnya saya nge-blog di SeaGateSoft. Fitur komentar juga saya tutup karena saya tidak akan merawat blog ini lagi (khawatir banyak spam). Namun, artikel dan komentar yang sudah ada akan saya biarkan apa adanya. Terima kasih untuk para pembaca sekalian.

 

Mid Susulan Pemrograman Web 1

  1. Buatlah halaman web dengan spesifikasi sebagai berikut:

    1. Title pada title bar adalah “MID PEMROGRAMAN WEB”.
    2. Merujuk pada file CSS dengan nama “style.css” (terletak pada satu folder dengan file HTML).
    3. Merujuk pada file JavaScript dengan nama “client.js” (terletak pada satu folder dengan file HTML).
    4. Memiliki elemen judul level pertama “Client Side Scripting”.
    5. Memiliki 3 elemen paragraf (isi paragraf bebas).
    6. Memiliki tabel dengan 3 buah kolom (nomor, NIM, nama) dan 10 baris (isi data bebas). Tabel dibuat menggunakan tag table, thead, th, tbody, tr, dan td.
    7. Memiliki sebuah form dengan 2 elemen input teks untuk input nim dan nama, 2 elemen radio untuk input jenis kelamin (pria/wanita), 1 elemen combo box untuk input program studi (komsi/rekmed), dan 3 elemen checkbox untuk input hobi (membaca/olahraga/menyanyi).
    8. Memiliki sebuah ordered list dengan elemen-elemen (harus urut): ASP, JSP, PHP, Python, Perl, Ruby
    9. Memiliki sebuah unordered list dengan elemen-elemen: HTML, XHTML, XML, CSS, JavaScript
    10. Memiliki sebuah gambar dengan nama file “icon.gif” (terletak pada satu folder dengan file HTML).
    11. Memiliki sebuah hyperlink yang merujuk ke situs http://cs.ugm.ac.id
    12. Warna background halaman web hitam, warna teks pada paragraf pertama merah dan tebal, pada paragraf kedua hijau dan italic, pada paragraf ketiga biru dan bergaris bawah. Pengaturan warna dan style teks harus menggunakan CSS, tidak boleh menggunakan tag B, I, U, BASEFONT, dan FONT.
    13. Tabel harus memiliki border antar baris dan antar kolom.
  2. Buatlah halaman web dengan spesifikasi sesuai gambar pada link ini:

    1. Bagian Logo berwarna hitam
    2. Bagian Nav berwarna merah
    3. Bagian Main Content Area berwarna hijau
    4. Bagian Links berwarna biru
    5. Usahakan keseluruhan bagian rata tengah
  3. Carilah referensi mengenai HTML, XHTML, dan CSS, kemudian jawablah soal-soal berikut (sebutkan referensi yang Anda gunakan):

    1. Apa perbedaan antara HTML dengan XHTML?
    2. Apa keuntungan penggunaan XHTML dibanding HTML?
    3. Apa keuntungan mendesain halaman web menggunakan CSS dibandingkan dengan menggunakan tabel HTML?
  4. Carilah referensi mengenai HTML 5, kemudian jawablah soal-soal berikut (sebutkan referensi yang Anda gunakan):
    1. Apa yang melatarbelakangi pembuatan HTML 5?
    2. Sebut dan jelaskan 5 fitur baru pada HTML 5!

Jawaban dikirim ke sigitdewanto11[at]yahoo[dot]co[dot]uk paling lambat sabtu 12 desember 2009 pukul 20.00 wib (sampai di inbox). KERJAKAN SENDIRI-SENDIRI. Jika ada jawaban yang sama persis, maka nilai akan dibagi sesuai jumlah jawaban yang sama. Selamat mengerjakan. Semoga sukses.

 

Lubang Paku

Saya pertama kali membaca cerita ini dari email seorang teman yang dikirim secara massal. Kalau tidak salah saya baca waktu SMA. Cerita dengan pengarang anonim yang mungkin menyebar lewat email, forum, dan blog. Dan benar saja, ketika saya googling saya menemukan banyak blog yang memuat cerita ini. Versi yang saya tampilkan di blog ini diambil dari Blog-nya Hilman.

Suatu ketika, ada seorang anak laki-laki yang bersifat pemarah. Untuk mengurangi kebiasaan marah sang anak, ayahnya memberikan sekantong paku dan mengatakan pada anak itu untuk memakukan sebuah paku di pagar belakang setiap kali dia marah…

Hari pertama anak itu telah memakukan 48 paku ke pagar setiap kali dia marah … Lalu secara bertahap jumlah itu berkurang. Dia mendapati bahwa ternyata lebih mudah menahan amarahnya daripada memakukan paku ke pagar.

Akhirnya tibalah hari dimana anak tersebut merasa sama sekali bisa mengendalikan amarahnya dan tidak cepat kehilangan kesabarannya. Dia memberitahukan hal ini kepada ayahnya, yang kemudian mengusulkan agar dia mencabut satu paku untuk setiap hari dimana bisa meminta maaf pada orang-orang yang telah dimarahinya.

Hari-hari berlalu dan anak laki-laki itu akhirnya memberitahu ayahnya bahwa semua paku telah tercabut olehnya. Lalu sang ayah menuntun anaknya ke pagar. “Hmm, kamu telah berhasil dengan baik anakku, tapi, lihatlah lubang-lubang di pagar ini. Pagar ini tidak akan pernah bisa sama seperti sebelumnya.” Ketika kamu mengatakan sesuatu dalam kemarahan. Kata-katamu meninggalkan bekas seperti lubang ini … di hati orang lain.

Do U feel the pain that I feel….?

 

Pelajaran dari Kisah Sukses Google

Artikel ini merupakan kelanjutan dari artikel saya sebelumnya, Bagaimana Suatu Halaman Web Diakses?. Beberapa orang teman saya berkomentar mengenai artikel tersebut, “Ngapain begituan ditulis?”. Tentu saja, mereka baru membaca ringkasan (excerpt) dari artikel tersebut di Facebook :-D . Ringkasan tersebut hanya berisi daftar bagaimana suatu halaman web diakses oleh penggunanya (atau sepertinya istilah yang lebih tepat adalah: ditemukan oleh penggunanya), tanpa penjelasan pada tiap-tiap poin. Beberapa komentar yang masuk baik di Facebook maupun di blog ini menyatakan bahwa hasil pencarian Google adalah cara yang paling sering mereka gunakan.

Saya yakin, bukan hanya teman-teman saya saja yang demikian bergantung pada Google untuk menemukan informasi di Web, pengguna Internet di seluruh dunia pasti juga begitu. Demikian pula para pemilik situs web, mereka berusaha keras agar situs mereka berada pada urutan teratas hasil pencarian Google. Jika mereka kurang memiliki sumber daya untuk melakukan hal itu dan memiliki uang berlebih, mereka akan memasang iklan di Google. SEO kian populer dewasa ini, bahkan menjadi lahan bisnis.

Mengapa saya hanya menyebut Google, bukankah mesin pencari bukan hanya Google? Bagaimana dengan Yahoo!, Microsoft Live Search, AltaVista, dan mesin pencari lainnya? Hal ini tak lain karena begitu dominannya Google sebagai mesin pencari. Bahkan ada yang mengatakan bahwa 70% trafik dari situs-situs web berasal dari Google.Sebagaimana yang diungkapkan oleh Jeff Atwood dalam artikelnya: The Elephant in the Room: Google Monoculture bahwa jika misalnya, dengan suatu alasan tertentu Google memutuskan untuk menghilangkan situs kita dari hasil pencariannya, maka situs kita bisa dianggap tidak ada karena kecil kemungkinan orang lain akan menemukannya.

Mengenang Masa Before Google

Melihat begitu dominannya Google saat ini, mungkin akan menarik jika kita melihat masa sebelum Google dikenal luas. Masa itu biasa disebut dengan masa Before Google, dengan menganalogikan pada masa prasejarah. Berikut kisah yang saya dapatkan setelah membaca buku Kisah Sukses Google. Kebanyakan mesin pencari pada masa itu (AltaVista, Yahoo, Excite) menampilkan hasil pencarian dalam urutan yang tidak jelas, yang membuat pengguna harus menghabiskan waktu berjam-jam untuk mengklik tiap halaman hasil pencarian untuk menemukan informasi yang mereka inginkan.

Larry Page, salah satu dari pendiri Google meneliti masalah ini pada tahun 1997 untuk tesis Ph.D.-nya. Dia dibantu oleh pendiri Google lainnya, Sergey Brin, dan beberapa orang dosen pembimbing di Stanford University (tempat di mana Page dan Brin menjadi mahasiswa Ph.D.). Makalah-makalah yang memuat hasil penelitian mereka masih dapat diunduh dari situs milik Stanford University. Page menemukan solusi pengurutan hasil pencarian mesin pencari, yaitu menggunakan algoritma PageRank. Mereka juga membuat mesin pencari Google versi awal dengan menggunakan sumber daya komputer dan jaringan milik kampus. Google waktu itu sudah dijalankan di atas sistem paralel, yang memungkinkan Google mampu mengindeks jutaan halaman web dan memberikan hasil pencarian dalam waktu yang singkat. Hasilnya, Google menjadi mesin pencari yang populer di Stanford.

Awalnya, Page dan Brin hanya ingin menjual lisensi teknologi pencarian Google pada perusahaan-perusahaan seperti AltaVista, Excite, dan Yahoo!, lalu mereka akan meneruskan studi mereka untuk meraih gelar Ph.D. Namun, AltaVista, Excite, Yahoo!, dan situs mesin pencari lain menolak untuk membeli lisensi mereka. Perusahaan-perusahaan tersebut masih menganggap bahwa fasilitas pencarian hanyalah sebagai pelengkap semata. Hal ini bisa dimaklumi mengingat pada waktu itu kebanyakan perusahaan web masih menganggap bahwa aplikasi yang akan menarik banyak pengguna (dan juga uang) adalah web portal. Web portal adalah web yang memiliki fasilitas serba ada, seperti Yahoo! saat ini. Web portal seperti itu akan berusaha menahan pengunjungnya untuk lebih lama di situs mereka, tempat mereka bisa berbelanja, memeriksa email, bermain game, melihat-lihat iklan, dan menghabiskan waktu dan uang lebih banyak. Hal ini tentu saja berlawanan dengan mesin pencari ala Google yang membuat penggunanya akan langsung meninggalkan Google begitu memperoleh hasil pencarian yang sesuai.

Salah satu pendiri Yahoo, David Filo, yang juga merupakan lulusan Stanford, memberi saran kepada Brin dan Page bahwa apabila mereka memang ingin mewujudkan potensi sistem pencari mereka yang unik dan yakin sekali tentang itu, yang terbaik bagi mereka adalah mengambil cuti dari program Ph.D. di Stanford dan langsung mendirikan perusahaan sendiri (Vise & Malseed, 2005). Dan hal itulah yang lalu dilakukan oleh Google Guys.

Pelajaran dari Google

Sekarang lihatlah Google, perusahaan tersebut sudah melampaui Yahoo!, apalagi Altavista dan Excite. Web portal yang dahulu digadang-gadang sebagai aplikasi yang akan menjadi homepage pengguna Internet dikalahkan oleh mesin pencari Google yang dulu diremehkan. Ada dua pelajaran yang bisa dipetik dari kisah Google ini:

  1. Ide cemerlang kita boleh jadi dianggap remeh orang lain. Dan satu-satunya cara untuk membuktikannya adalah dengan mewujudkannya sendiri.

    Memang tidak mudah, apalagi jika yang menolak adalah perusahaan sekelas Yahoo!. Tapi jika kita memang memiliki tekad baja dan yakin bahwa ide kita benar-benar berkualitas, maka wujudkanlah. Jangan selalu merasa bahwa ide kita memiliki kekurangan sehingga enggan untuk mengimplementasikannya. Lihatlah solusi-solusi yang sudah ada dan bandingkanlah apakah solusi kita mampu mengatasi masalah lebih baik? Apa kelemahan dari solusi kita? Adakah cara untuk mengatasi atau meminimalisir kelemahan tersebut? Proses komputasi algoritma PageRank memerlukan waktu yang tidak sedikit. Namun Page dan Brin mampu mengatasinya dengan menggunakan komputasi paralel.

  2. Jika tidak bisa menjadi yang pertama, jadilah yang lebih baik dari yang sudah ada.

    Kisah seperti ini sudah banyak. Google bukan mesin pencari pertama, namun mampu menjadi yang terbaik hingga saat ini. Facebook bukan situs jejaring sosial pertama. Kita jangan berkecil hati karena ide kita sudah diimplementasikan oleh orang lain. Belum tentu implementasi orang lain tersebut lebih baik daripada implementasi kita.

Penutup

Google memang luar biasa, namun tentu saja dominasi Google di Internet dikhawatirkan oleh banyak orang. Selain itu, menurut saya kompetisi di Google terlalu kejam untuk para blogger. Artikel kita harus bersaing dengan artikel-artikel lain dari seluruh dunia, atau lebih tepatnya dari seluruh halaman web yang diindeks oleh Google. Mungkinkah suatu saat ada yang mampu membuat sistem lain dengan kompetisi yang tidak terlalu kejam? Kita tunggu saja :-D .

 

Sekilas Mengenai Arsitektur Perangkat Lunak dan Framework

There is a third category; those with demanding needs who want to build their own software. The first thing I’d say here is to look carefully at using tools. I’ve seen more than one project get sucked into a long exercise at building frameworks, which wasn’t what the project was really about. (Martin Fowler, Patterns of Enterprise Application Architecture, 2002)

Selama satu minggu kemarin saya sibuk mengerjakan suatu proyek sistem informasi (dan sebagai konsekuensinya adalah skripsi menjadi terbengkalai). Proyek ini berbeda dari proyek-proyek yang saya kerjakan sebelumnya karena aplikasi yang dibuat merupakan aplikasi desktop, standalone, dan basisdatanya embedded (iya-iya, maaf saya pake bahasa geek :-D ). Sebelumnya saya baru membuat sistem informasi yang berbasis web, multipengguna, dan menggunakan basisdata yang multipengguna juga. Selain itu, aplikasi desktop yang telah saya buat selama ini untuk keperluan akademis (baca tugas kuliah dan skripsi), dan bukan untuk keperluan komersil. Aplikasi tersebut saya buat menggunakan bahasa pemrograman Java, tanpa framework, meskipun mungkin menggunakan library. GUI-nya pun saya buat dengan tangan kosong alias koding AWT dan Swing tanpa menggunakan GUI designer.

Saya agak ragu-ragu menggunakan Java untuk membuat aplikasi desktop standalone karena berjalan di atas virtual machine, lagipula (katanya) aplikasi Java terkenal mengonsumsi banyak memori. Menurut saya solusi yang paling tepat adalah menggunakan library wxWidgets atau C#. Mengingat wxWidgets umumnya digunakan dengan C++, yang notabene belum saya kuasai, saya mencoba menggunakan C# yang dari segi bahasa mirip Java. Namun karena nampaknya akan terlalu lama proyek tersebut selesai jika menggunakan bahasa pemrograman yang baru saya pelajari.

Akhirnya, pilihan kembali jatuh ke Java. Untuk DBMS, pilihan jatuh pada Apache Derby, suatu DBMS yang dapat digunakan secara embedded dengan aplikasi atau multipengguna. Seperti biasa saya membuat tampilan GUI dengan Swing, main class berupa kelas yang merupakan turunan dari kelas javax.swing.JFrame dengan cascading menu. Untuk koneksi ke basisdata menggunakan package java.sql. Awalnya saya agak bingung mengatur koneksi dengan basisdata dan bagaimana memodelkan tiap-tiap tabel dalam basisdata (maklum biasanya dimanjakan dengan Model di CakePHP :-D ). Saya juga bingung bagaimana menyusun aplikasi dalam kelas-kelas yang secara logis dan teratur, menentukan di kelas mana harus meletakkan operasi (baca method) tertentu, juga mengatur bagaimana sebaiknya hubungan antarkelas. Saya juga banyak melakukan copy-paste-edit dari suatu kelas ke kelas lain untuk melakukan hal-hal yang mirip, seperti membuat tab untuk manajemen data (menampilkan data, menambah, mengedit, dan menghapus) untuk tabel-tabel yang berbeda. Operasi-operasi yang dilakukan sama namun tabel yang digunakan berbeda. Terakhir, segala keruwetan di atas masih harus ditambah dengan “logika bisnis” yang agak-agak rumit dari klien.

Arsitektur Perangkat Lunak dan Framework

Saya berusaha mencari pencerahan dengan membaca kitab karya Martin Fowler, Patterns of Enterprise Application Architecture. Dan pada bagian Who This Book Is For saya menemukan paragraf yang saya kutip di awal artikel ini. Selain itu saya juga menemukan kata-kata ini pada sebuah slide presentasi mengenai pengenalan Swing Application Framework:

Reasons Why A Desktop App Framework is Needed: For Starters… For many developers, particularly new ones, the absence of any advice about how to structure an application is an obstacle in and of itself. Developers should focus on their problem domain, not on the “application architecture” domain.

Sadarlah saya bahwa saya mengerjakan dua hal sekaligus, membuat arsitektur aplikasi dan menyelesaikan masalah klien. Tapi kalau saya harus menggunakan framework malas juga. Soalnya ukuran aplikasi tidak sampai 100 KB (sudah dikompresi dalam format JAR), ditambah basisdata dan driver-nya sekitar 4 MB. Nah, kalau menggunakan framework tentu ukuran aplikasi akan membengkak. Lagipula ini cuma aplikasi standalone. Jadilah aplikasi itu tetap saya garap tanpa framework atau object relational mapping library seperti Hibernate. Untuk melakukan refactor agar aplikasi menjadi lebih tersusun rapi dan meningkatkan internal reuse saya memerlukan waktu sekitar 3 hari. Bayangkan apa yang bisa diperoleh dalam 3 hari jika kita fokus pada problem domain.

Hmmm, itulah gunanya framework, agar kita dapat lebih fokus pada menerjemahkan kebutuhan klien ke dalam perangkat lunak, dan tidak perlu sibuk memikirkan arsitektur aplikasi. Seperti yang dikatakan Martin Fowler di atas, sudah banyak proyek yang terjebak menjadi proyek pembuatan framework. Mungkin juga nantinya proyek yang sedang saya kerjakan tadi bisa menjadi framework yang bisa saya gunakan untuk mengerjakan proyek-proyek sejenis berikutnya (kalau ada).

A framework is a set of cooperating classes that make up a reusable design for a specific class of software [Deu89, JF88]…
The framework dictates the architecture of your application. It will define the overall structure, its partitioning into classes and objects, the key responsibilities thereof, how the classes and objects collaborate, and the thread of control. A framework predefines these design parameters so that you, the application designer/implementer, can concentrate on the specifics of your application. The framework captures the design decisions that are common to its application domain. Frameworks thus emphasize design reuse over code reuse, though a framework will usually include concrete subclasses you can put to work immediately. (Erich Gamma et al., Design Patterns: Elements of Reuseable Object-Oriented Software, 1994)

Membuat framework memang susah, oleh karena itu saya sebenarnya lebih suka menggunakan framework open sourc yang banyak tersedia di Internet. Beberapa software house juga memiliki framework internal sendiri. Namun, tentu saja software house tersebut juga harus membuat dokumentasi untuk framework tersebut. Beberapa teman saya yang bekerja di suatu software house (saya gak berani sebut merk :-D ) dan menggunakan framework internal software house tersebut mengeluhkan ketiadaan dokumentasi. Akhirnya mereka mempelajari bagaimana menggunakan framework internal tersebut dengan mempelajari aplikasi-aplikasi yang telah dibuat sebelumnya menggunakan framework tersebut (kalau saya sih ogah :-D ).