Don’t Reinvent the Wheel

Kembali ke masa lima atau enam tahun yang lalu waktu saya merilis Content Management System (CMS)* versi terakhir saya untuk www.its.ac.id yang saya beri codename fitri (v3). Saat itu saya tidak menggunakan CMS yang sudah jadi — yang terkenal waktu itu Mamboo — tetapi mengembangkan CMS sendiri berbasis PHP dari awal. Jadi saya membuat satu per satu modul tampilan, dinamisasi konten melalui manipulasi database, hingga manajemen user dan hak aksesnya. Themes atau tampilannya belum bisa dinamis, karena antara kode untuk tampilan dengan kode untuk data tercampur menjadi satu.

Tujuan saya waktu itu hanya satu: belajar. Sebagaimana mahasiswa teknik yang seharusnya. Website-website akademis semacam ITS sebaiknya harus secara aktif berubah secara radikal, karena di sana lah tempat bereksplorasi, belajar, dan bermain. Ngoprek, istilah geek-nya. Tampilan jelek, rusak, dan kacau harus dimaklumi karena untuk belajar. Makanya saya terkejut ketika dikabari bahwa versi obrak-abrik besar yang terakhir dari website ITS itu masih versi kembangan dari fitri itu, setelah sekian tahun.

Zaman sekarang, saya pikir bukan saatnya lagi membuat sebuah CMS dari awal, bahkan untuk kebutuhan belajar sekalipun. CMS-CMS modern sudah sedemikian modular dan dinamisnya sehingga apapun bisa dibuat di atas CMS tersebut. Don’t reinvent the wheel. Sekarang saatnya mempelajari dengan detail salah satu CMS tersebut agar kita bisa dengan maksimal memanfaatkannya. Ketimbang menghabiskan waktu untuk membuat operasi-operasi dasar seperti memasukkan, update, dan hapus data, manajemen user, lebih baik kita memanfaatkan yang sudah disediakan CMS, kemudian memodifikasinya untuk kebutuhan kita.

Gambarannya bisa saya jelaskan dalam diagram di bawah ini:

Secara garis besar, pada umumnya CMS modern memiliki arsitektur seperti diagram di atas. Layer terbawah mengurusi operasi dasar seperti manajemen data, pengguna, session, dan koneksi melalui berbagai protokol (web services, chatting, dll). Di atasnya kemudian ada pengaturan untuk dinamisasi tampilan (themes), dan modul-modul. CMS yang baik selalu dibangun dari modul-modul kecil untuk menjaga agar dia bisa fleksibel untuk kebutuhan yang berbeda-beda. Layer paling atas adalah bagian pengaturan yang spesifik untuk kebutuhan setiap website.

Jika seorang progammer akan membangun CMS sendiri, mau tidak mau ia harus membuat itu semua. Ibaratnya, dia akan membangun sebuah rumah, dia membuat sendiri batu batanya, mengolah pasir untuk menjadi semen, membelah kayu untuk dijadikan pintu dan jendela, dst.Baru dari bahan-bahan itu, dia mulai membangun rumah sesuai dengan desainnya. Sebaliknya, dengan menggunakan CMS yang sudah jadi, ibaratnya dalam membangun rumah sudah disediakan semen, jendela, batu, bahkan hingga pintu, lemari, dan atap. Dia tinggal merakit, merangkai, menyusun, dan menyesuaikan warna, peletakannya sesuai dengan selera. Tentu saja ia harus mengerti cara merakit pintu dan kawan-kawannya itu. Tetapi paling tidak, ia tidak harus mulai membuat pintu dulu untuk membuat rumah.

Bayangkan berapa banyak waktu yang bisa dihemat untuk membuat sebuah website jadi yang lengkap. Kesulitan utama mungkin ada pada mempelajari CMS itu sendiri sebagai framework. Bagaimana cara memodifikasi modul dan mengaplikasikan desain tampilan HTML dan CSS ke dalam theme engine CMS tersebut. Tetapi jika learning curve itu sudah dicapai, saya kira semuanya akan menjadi mudah.

Ada banyak CMS modern yang populer, misalnya WordPress, Joomla, dan Drupal. WordPress adalah yang paling sederhana dan paling mudah dipelajari, tetapi kurang dalam fleksibilitas. Jika Anda akan membangun sebuah website yang tidak hanya melulu tentang publikasi teks, mungkin Anda bisa mempertimbangkan Drupal atau Joomla. Saya sendiri sekarang sedang tertarik untuk memahami Drupal, setelah sekian lama saya tidak mendapatkan feeling dengan Joomla.

*) Content Management System (CMS) dalam ini merujuk pada Web Content Management System.

Framework dan Tumpukan Masalah yang Menyertainya

Saya sudah agak lama tidak terlibat dalam sebuah project yang sangat intens dengan coding dan saya merasa rindu karenanya. Saya sudah cukup banyak tahu dan mencoba bermacam framework seperti Spring, Hibernate, Webwork, Struts, Seam, IceFaces (Java sudah jenuh dengan framework ya?). Saya bukan programmer yang tahu terlalu dalam dengan tumpukan framework tersebut dan tidak terlalu tahu bagaimana memanfaatkan mereka dengan benar. Izinkan saya meletakkan ego saya dengan berkata bahwa saya tidak terlalu paham dengan konsep MVC (Model View Controller).

Saya pernah gagal dalam merancang sebuah software dengan tumpukan framework MVC, dimana di sisi model menggunakan Hibernate sebagai ORM (Object Relational Model), di sisi view menggunakan Struts/Webwork, sedangkan Spring menangani sisi controller-nya. Singkatnya, dengan begitu tumpukan framework yang besar, permasalahan datang karena batasan-batasan framework, bukan karena proses bisnisnya. Akhirnya, banyak energi yang harus dihabiskan untuk memenuhi syarat-syarat cukup yang diwajibkan framework.

Seharusnya dengan perancangan, desain, dan perencanaan yang baik hal itu tidak terjadi. Janji-janji framework dimana proses skalabilitas dan perawatan akan lebih mudah menjadi janji palsu belaka. Nyatanya proses tambal sulam menjadi sedemikian besar. Apakah dengan framework tersebut proses pengerjaan akan menjadi lebih cepat? Mungkin jika project-nya begitu besar iya, tapi dengan skala kecil, akan ada waktu yang dihabiskan untuk membuat sistem dasar dimana semua framework berjalan dan saling bekerja sama dengan baik sebelum menyentuh ke proses bisnis intinya.

Akhirnya saya begitu merindukan PHP. PHP from scratch. PHP tanpa framework. PHP yang dengan begitu buruknya menangani variabel dan nilai null karena pemesanan blok memory tanpa deklarasi. Dan itulah yang saya lakukan. Semua saya gabung jadi satu. Query ke database, validasi, HTML, Javascript, semua dalam satu file PHP yang besar. Saya hanya memakai library kecil-kecil saja tanpa framework besar yang bertumpuk-tumpuk. Cukup merepotkan, tapi saya fokus dan hanya dihadapkan pada permasalahan inti, bukan masalah-masalah yang ditimbulkan karena penggunaan framework yang tidak benar.

Pelajaran moral yang saya dapatkan: tidak semua permasalahan harus menggunakan solusi framework yang besar. Kadang-kadang, sebuah permasalahan lebih efektif jika dikerjakan dengan cara “gila” tanpa aturan seperti ini. Permasalahan selesai, dan ada banyak orang yang lebih mengerti dengan cara dasar (karena mudah) dan sulit mengerti cara framework karena learning curve-nya jauh-jauh lebih panjang. Lebih mudah mendelegasikan pekerjaan.

Anda boleh menyebut saya programmer yang buruk karena tidak patuh terhadap kaidah suci MVC. Toh, saya mungkin tidak akan kembali lagi ke dunia ini, ha ha ha ha…

PS: Saya jadi ingat tulisan-tulisan beberapa tahun yang lalu waktu masih memuja MVC hehe.

Komentar untuk Website ITS v4

Website ITS v4.

Wah, sebenarnya saya menyimpan komentar kalau sudah benar-benar selesai nanti, tapi ternyata pas saya lihat di sana ada untouched link yang bernama “Komentar Anda”. Karena sudah dimintai komentar dan ternyata di sana tidak ada media untuk mencurahkan komentar, ya saya tulis di sini. Yang jelas first of all, congratz untuk tim webmaster ITS.

Secara umum, saya suka konsep layout yang dibawa. Fresh! Segar! Mantaps! Beberapa catatan subjektif sayah:

1. Header terlalu kosong. Hanya tulisan webmail yang sedikit menemani.
   Yaya… saya tahu, webmaster tak punya pilihan banyak menempatkan logo. Dilema yang pernah saya alami berkali-kali dulu. Mungkin bisa dibuat semacam ornamen pemanis warna-warni di sana. Nggak usah ngeblok. Jika dibuat overflow keluar dari batas kotak 800 pixel mungkin lebih manis. Adik saya, Fitri, berkomentar kalau layout itu mirip buku TA. Hmm… masuk akal juga, mungkin memang inspirasinya dari situ?
2. Bagaimana kalau link webmail dibuat login form-nya sekalian? Untuk accessbility rasanya lebih praktis. Juga untuk mengurangi ruang yang terlalu kosong di sana. Terakhir, saya tahu SquirellMail yang dipakai sudah mendukung untuk tujuan ini kok.
3. Penonjolan informasi.
   Ini penting. Saya melihat portal ini terlalu flat. Tak ada informasi yang ditonjolkan. Saya ambil contoh: Di bagian Agenda. Mata saya tak bisa langsung di-drive untuk melihat suatu agenda. Kapan? Dimana? Tentang apa? Saya harus cari-cari di tulisan bertypo Trebuchet yang kecil itu.
4. Kenapa ITS Tour ada di bawah? Kenapa membuat pengunjung baru dan awam men-scroll halaman untuk melihat bagian yang bisa mereka lihat pertama kali. Taruh saja di atas, sebab informasi ini memang ditujukan untuk orang-orang yang belum tahu sama sekali tentang ITS, apalagi struktur website-nya. Key-nya tetap: penonjolan informasi.
5. Ada bagian cukup besar untuk foto. Komentar saya untuk foto saat ini: Jelek. Olah digital yang kurang rapi untuk seorang desainer DKV ITS. Tapi saya yakin, ini sementara. Saya usul, kalau memang ada content, lebih baik adalah movie flash yang melakukan slide show mengenai informasi yang diperlukan oleh pengunjung baru. Kalau tidak ada, ya foto-foto tentang suasana lingkungan ITS. Tapi jangan diedit habis seperti itu. Kalau ingin foto IR ya yang dari filter IR lah, jangan Photoshop.

Sedangkan kritik saya tentang konsep:

1. Konsep Web 2.0-nya mana? Zaman sudah akan beranjak ke Web 3.0, kok masih tetap bertahan dengan konsep ala tahun 2003?
2. Back to table layout? Is tableless layout too difficult for you?

Selebihnya Oke. Saya tak bisa berkomentar tentang sitemapping dan kemudahan navigasi karena belum jadi. Sebenarnya saya lebih setuju kalau tidak usah ada preview dan meminta sedekah komentar (meminjam istilah Bu Velisa) seperti ini. Langsung saja hajar jadi website utama. Karena kalau meminta kritik terlebih dahulu, web baru ini kehilangan kesempatan untuk membuat surprise. Padahal surprise itu penting. Orang cuma bisa mengkritik, dan orang tak bisa memuaskan semua pihak. Jadi, apa gunanya menerima kritik yang kebanyakan sifatnya subjektif dan selera saja?

Congratz Ridho’ and the team. Keep on hard work guys.

Sang Juara yang Memprihatinkan

Saya masih di sana ketika lomba website di seantero lingkungan ITS diadakan. Meskipun menjadi penjaga gawang portal utama, saya tidak dilibatkan baik sebagai peserta maupun penilai. Saya tak tahu siapa jurinya, tetapi waktu itu yang menjadi juara salah satunya adalah website ini: FTIF. Website fakultas dimana saya belajar.

Reaksi pertama saya waktu mendengar itu adalah berteriak,

“HAH!! APA?!? GAK SALAH TUH??!”

Memang, website ini membawa konsep baru dalam dunia website pendidikan, yaitu sebagai agregator blog-blog anggota fakultas — saya termasuk yang didaftarkan. Meskipun hal ini kontroversial, tapi saya anggap ini adalah sebuah konsep baru yang patut dihargai lebih.

Menurut saya, website yang baik adalah website yang dirawat dengan baik. Membuat website itu mudah, lima menit juga jadi. Yang jauh lebih sulit adalah merawatnya. Perlu cinta kasih dalam merawat sebuah website. Bagi saya, hal inilah yang seharusnya menjadi faktor penilaian dengan bobot terbesar. Setelah itu adalah isi, baru kemudian tampilan layout dan sitemapping.

Karena menjadi penjaga portal, saya jadi tahu kinerja semua website di lingkungan ITS. Dan saya tahu website yang menjadi juara itu (FTIF) dari dulu kurang dirawat. Kok tiba-tiba waktu lomba menjadi sebegitu bagusnya, saya curiga itu hanyalah tren sesaat^TM saja.

Dugaan saya terbukti. Iseng saya membuka website FTIF. Aktivitas ngeblog anggotanya juga tren sesaat. Entri agregator itu seperti saya dominasi sendirian (scharra saya ngeblog tiap hari sekarang) ) Ayo dong! Saya tahu betul, FTIF ITS adalah gudangnya mahasiswa dan dosen jenius luar biasa. Hanya diperlukan sedikit kasih sayang untuk merawat website itu. Ini penting karena citra pertama yang dilihat orang luar adalah kesan website-nya.

Artikel terkait: Web ITS, Ganti Layout dong!

Screenshot dokumentasi:

Read More

Web ITS, Ganti Layout dong!

Hari ini saya membuka halaman biru website Institut Teknologi Sepuluh Nopember (ITS) Surabaya. Tampilan biru membuat pikiran saya melamun ke beberapa tahun sebelumnya…

Juli 2006, saya menyelesaikan kuliah  S1 saya dengan berhasil mempresentasikan Tugas Akhir bidang minat Sistem Bisnis Cerdas. Setelah itu, saya merasa waktu saya di ITSnet tinggal sebentar. Bagi saya ITSnet adalah tempat yang sangat baik untuk belajar dan mengeksplorasi segala hal yang berhubungan dengan teknologi informasi. Dan tentu saja, sudah saatnya saya harus pergi untuk mengaplikasikan apa yang saya dapatkan di bangku kuliah. Turun gunung kalau meminjam istilah serial Wiro Sableng 212.

Sebelum pergi, saya ingin membuat kenang-kenangan untuk keluarga saya di ITSnet: sebuah tampilan yang baru untuk website generasi berikutnya. Saya sebut generasi ini dengan nama V3. Versi ketiga. Boleh juga dibaca fitri. Mengekspos teknologi tableless layout dan Ajax, saya mencoba mendesain dengan penuh cinta dan kasih sayang dengan segala daya yang saya miliki selama saya belajar web design. Dan itulah hasilnya, layout biru sederhana. Saya suka kesederhanaan. Simpler is better.

Pertimbangan saya membuat tampilan baru sederhana juga, yaitu memberikan waktu untuk pengganti saya menyiapkan masterpiece-nya. Selama persiapan itu, website ITS masih dalam tampilan yang segar sehingga tidak perlu buru-buru menyelesaikan generasi berikutnya dari web ITS. Nanti ketika sudah waktunya web ITS harus ganti, tampilan baru telah siap. Tidak harus lebih baik daripada punya saya, tetapi cukuplah ganti dan segar. Website kampus sebaiknya memang digunakan untuk eksperimen mahasiswanya. Namanya juga belajar.

Hampir dua tahun berlalu. Siapa sangka layout yang sedianya untuk transisi itu masih belum berganti juga sampai sekarang? Saya lihat, informasi yang harus ditampilkan ITS semakin banyak. Layout yang sekarang sudah tidak mungkin lagi mengakomodasi informasi itu. Terlihat terlalu dipaksakan. Tak ada pilihan lain, kecuali ganti tampilan.

Ayo dong!

Dilema Layout Tanpa Tabel (Tableless Layout)

Dunia web 2.0 membawa teknologi baru dalam hal layouting tampilan, yaitu layout tanpa tabel (tableless layout) dengan menggunakan CSS (Cascading Stylesheet). Keunggulan CSS dibandingkan dengan tabel adalah pada fleksibilitasnya. Dengan topografi yang sama, desain bisa dirombak secara dramatis hanya dengan mengubah stylesheet-nya. Contohnya, layout-layout WordPress dan Joomla yang begitu mudah diubah dengan berbekal stylesheet dan dengan sedikit modifikasi pada topografi desain.

Komponen utama CSS adalah floating-div. Setiap kotak div bisa dilempar kesana kemari, tumpah ke kiri atau ke kanan, bertumpuk-tumpuk sesuka hati. Dengan kemampuan seperti ini, desainer web bisa mengeksplorasi desain web yang tidak terbatas pada layout konvensional: bagian navigasi situs di kiri/kanan, halaman utama mendapat porsi yang lebih besar di sebelah bagian navigasi situs. Kalau Anda menyempatkan diri berkunjung ke situs CSS Mania, Anda akan menemukan berbagai desain yang begitu kreatif memanfaatkan kehebatan CSS.

Bukan berarti tabel tidak bisa menampilkan desain yang aneh dan kreatif. Tetap bisa, tetapi terbatas. Sifat tabel adalah kaku. Kalau ia sudah diam di suatu tempat, ia akan tetap diam di situ tidak akan bisa digeser oleh siapapun termasuk Javascript. Atribut tabel yang bisa dinamis dikendalikan oleh script sangat sedikit, terbatas pada warna dan font, bukan pada tata letak, posisi, dan lebarnya.

Kedinamisan CSS membawa petaka: konsistensi tampilan di setiap browser yang berbeda. Kekakuan tabel membawa keuntungan: konsistensi tampilan di setiap browser yang berbeda.

Saya selalu kagum pada desainer web CSS. Kemampuan untuk tetap konsisten di browser yang berbeda-beda (minimal IE, Firefox, Opera, dan Safari) adalah sesuatu yang sulit dilakukan. Ketidak-standar-an dalam menerjemahkan kode-kode CSS jauh lebih parah daripada ketidak-standar-an Javascript. Di Firefox tampil cantik, di IE porak-poranda. Di IE sudah tampil memukau, di Firefox kacau balau. Demikian seterusnya. Melakukan kodifikasi dengan CSS adalah mimpi buruk bagi desainer web bau kencur seperti saya. Belum lagi kalau sudah dikejar-kejar deadline.

CSS bukan pilihan kalau kita dikejar deadline yang sempit: katakanlah dalam dua hari Anda harus menyelesaikan sebuah website. Saya tidak berani melakukan hal itu dengan CSS.

Tentu saja, saya akan lari ke tabel. Dengan tabel, kita tak perlu pusing-pusing dengan masalah kompabilitas antar browser. Konsentrasi dengan apa yang kita kerjakan. Apa yang perlu ditampilkan. Apalagi kalau ada tool dahsyat Adobe Photoshop dan Macromedia Adobe Dreamweaver. Pekerjaan desain web dalam waktu dua hari bukanlah sesuatu yang mustahil dilakukan.