Iznyn Blog

Menyambut Kehadiran WordPress 3.0

mxtniznyn — Fri, 25 Jun 2010 00:43:19 +0000

Pada 17 Juni lalu, WordPress secara resmi telah memplubikasikan versi terbaru dari WordPress 3.0. Pada versi ini mempunyai banyak perbaikan serta fasilitas baru yang kemudian menjadikan WordPress dapat dikatakan makin mendekati untuk menjadi sebuah CMS dari sebelumnya yang hanya sebuah mesin blog.
Disini kami akan sedikit menjelaskan beberapa feature penting terbaru yang dimiliki oleh WordPress 3.0, semoga dapat menjadi panduan dalam menggunakannya.

Opsi Installasi

Sesuatu yang baru sudah anda temukan ketika melakukan instalasi WordPress 3.0. Sebelum melakukan instalasi, kali ini kita dapat menentukan username dan password secara langsung. Pada versi sebelumnya, WordPress menentukan sendiri username dan password, sehingga kita perlu menggantinya jika ingin menambah keamanan untuk akses ke bagian administrator. Berikut gambaran tentang opsi pada proses installasi.

WordPress Updates

Pada versi terbaru ini, WordPress mengumpulkan info tentang update terbaru, baik versi WordPress ataupun plugins dan themes, di dalam satu halaman. Halaman ini dapat diakses melalui menu Dashboard > Updates. Hal ini menjadikan proses pengawasan terhadap updates dari WordPress, plugins dan themes ada di dalam satu tempat. Berikut gambaran tentang halaman updates.

Theme Default Baru

Bersamaan dengan versi terbarunya, WordPress juga memperkenalkan theme default barunya yang bernama Tweenty Ten. Pada situs resminya WordPress menyatakan akan mengeluarkan theme default baru untuk setiap tahunnya. Untuk itulah nama dari theme baru ini adalah Tweenty Ten yang menandakan tahun 2010. Pada Theme ini telah support beberapa feature baru seperti Custom Header, Custom Background, dan Pengaturan Menu. Untuk itu kita dapat menciptakan desain blog yang aktraktif hanya dari sebuah theme default. Berikut gambaran tentang theme Tweenty Ten.

WPMU and WordPress

WordPress MU merupakan versi WordPress yang secara khusus digunakan untuk membangun beberapa blog dengan hanya satu instalasi WordPress. Kini fasilitas pembuatan multi-site ini secara langsung disertakan di dalam WordPress 3.0, walaupun secara default tidak dinyalakan. Untuk menggunakan fasilitas ini anda perlu menyalakannya dengan langkah berikut :

Definisikan constant ’WP_ALLOW_MULTISITE’ di dalam file config.php, sebagai berikut :
```
define (’WP_ALLOW_MULTISITE’, true);
```
Setiap pernyataan ini disertakan dalam config.php, maka pada menu tools akan ditambahkan sub menu network. Melalui halaman ini kita dapat melakukan instalasi terhadap feature multi-site. Anda cukup mengikuti instruksi yang telah disediakan dengan sangat jelas oleh WordPress.
Setelah proses installasi selesai anda dapat mengelola seluruh site di dalam menu baru "Super Admin" Berikut gambaran tentang menu ini :

Note : Walaupun penyertaan fasilitas multi-site membuat WordPress semakin powerfull, namun karena tidak adanya sistem uninstall dari fasilitas ini membuat kita tidak bisa membatalkan tindakan kita. Jadi berhati-hatilah dalam menggunakan fasilitas ini.

Pengaturan Menu

Feature baru yang disediakan oleh WordPress untuk mengatur susunan menu di dalam website. Namun ketersediaan feature ini sangat tergantung dari theme yang digunakan. Fasilitas pengaturan menu dapat diakses melalui Appearance > Menus. Jika anda ingin mencoba fasilitas ini anda dapat menggunakan theme default WordPress 3.0 yang telah mendukung fasilitas ini. Halaman pengaturan menu akan terlihat sebagai berikut :

Dari gambar terlihat ada 5 bagian dalam halaman pengaturan menu, berikut penjelasannya :

1. Bagian Pembuatan dan Pengaturan Menu

Bagian ini digunakan untuk membuat menu baru dan mengatur isi menu. Perlu dipahami bahwa menu disini bukan sebuah link namun koleksi link-link yang akan ditampilkan dalam halaman web. Pertama kita membuat semacam kontainer dari menu kita dengan menentukan nama dari kontainer menu tersebut. Kemudian kita mengisi kontainer tersebut dengan menu-menu yang kita inginkan. Menu yang ditambahkan dapat bersumber dari tiga hal, yaitu link, page dan category. Penambahan dilakukan melalui tiga bagian terakhir dari penjelasan ini. Setiap penambahan menu dilakukan akan ditambahakan box untuk mengatur setting menu tersebut.

2. Bagian Penentuan Lokasi Menu

Bagian ini sangat tergantung pada theme yang digunakan. Untuk theme default Twenty Teen disediakan satu lokasi penambahan menu, yaitu di bagian bawah image header.

Dari lokasi yang didefinisikan kita menentukan menu yang akan disertakan pada lokasi tersebut.

3. Penambahan Menu dengan Url

Bagian ini digunakan ketika kita ingin menambahkan menu dengan target link adalah sebuah url. Label disini adalah text yang akan ditampilkan dalam halaman web.

4. Penambahan Menu dengan Page

Bagian ini digunakan ketika kita ingin menambahkan menu dengan target link adalah page yang telah ada di dalam sistem blog.

5. Penambahan Menu dengan Category

Bagian ini digunakan ketika kita ingin menambahkan menu dengan target link adalah category yang telah ada di dalam sistem blog.

Custom Header

Seperti halnya fasilitas Pengaturan Menu, fasilitas ini juga tergantung dari desain theme yang digunakan. Fasilitas ini pada dasarnya mengatur penyertaan image pada bagian tertentu dari halaman web, biasanya bagian atas dari website. Halaman pengaturan Custom Header dan contoh tampilan Custom Header di halaman web dapat dilihat di bawah ini (kita menggunakan theme default sebagai contoh) :

Untuk menentukan gambar yang akan ditampilkan kita cukup memilih gambar yang telah disediakan oleh theme atau dengan mengupload file gambar milik sendiri.

Custom Background

Hampir seperti Custom Header, hanya saja pada fasilitas ini digunakan untuk mengatur background dari halaman web. Kita dapat mengatur background dengan warna maupun gambar. Jika disupport oleh theme yang digunakan halaman pengaturannya dapat diakses melalui Appearance > Background. Berikut gambaran untuk halaman pengaturan Custom Background.

New Template Files

Pada versi 3.0 ini, WordPress menyediakan file template baru yang akan memberikan keleluasaan dalam menyusun theme. Dengan file template baru ini, penyusunan tampilan web menjadi lebih mudah dan variatif. Kita dapat membedakan tampilan web berdasarkan parameter request yang lebih spesifik seperti nama author, slug, post type etc.

Berikut beberapa file template baru yang disediakan :

single-{post_type}.php: {post_type} dapat diganti dengan tipe post. Sebagai contoh jika tipe post adalah news maka file template menjadi single-news.php Untuk memahami tentang tipe post dapat dilihat pada bagian selanjutnya.
front-page.php: Digunakan untuk latest posts atau static page sesuai yang diatur pada bagian setting Front page displays di Administration > Settings > Reading
taxonomy.php: File template yang akan dipanggil untuk semua request taxonomy
taxonomy-{taxonomy}-{term}.php: {taxonomy} diganti dengan tipe taxonomy dan {term} diganti dengan nama term, misalkan jika taxonomy adalah tag dan term adalah web maka file template menjadi taxonomy-tag-web.php
taxonomy-{taxonomy}.php: {taxonomy} dapat diganti dengan nama taxonomy. Misalkan taxonomy adalah category maka file template menjadi taxonomy-category.php
author-{nicename}.php: {nicename} diganti dengan attribute nicename dari author. Misalkan jika nicename adalah iznyn maka file template menjadi author-iznyn.php
author-{id}.php: {id} diganti dengan id dari author. Misalkan jika id adalah 7 maka file template menjadi author-7.php

Custom Post Types

Fasilitas terakhir mungkin menjadi yang terhebat. Dengan fasilitas ini, dapat dikatakan bahwa WordPress semakin mendekati ke bentuk CMS (Content Management System ). Intinya fasilitas ini dapat menambahkan jenis content selain page dan post. Walaupun secara khusus disediakan bagi Theme Developer namun bagi anda pengguna biasa dapat menantikan berbagai theme yang menyajikan suatu manajemen content yang cukup luas, sehingga makin memberikan kemudahan kepada anda.

Kita disini tidak akan menjelaskan bagaimana cara membentuk Custom Post Type karena membutuhkan ruang yang tidak sedikit. Daripada itu kita akan memberikan beberapa link yang membahas hal ini secara rinci, sebagai berikut :

HTML 5 dan CSS 3.0 di Iznyndotcom

mxtniznyn — Mon, 14 Jun 2010 00:18:44 +0000

Salah satu bentuk revolusi dari versi terbaru iznyndotcom adalah penggunaan HTML 5 dan CSS 3.0. Dua standard teknologi web yang sampai saat artikel ini ditulis masih dalam bentuk draft dan terus dikembangkan oleh W3C dan sangat ditunggu kehadirannya oleh web designer diseluruh dunia.

Karena belum berbentuk rekomendasi, maka HTML 5 dan CSS 3.0 masih cukup minim penggunaannya dan dukungan dari browser juga masih rendah. Sebagai contoh untuk dapat memasukkan attribute CSS ke dalam HTML 5, kita sebelumnya masih harus memperjelas level blok dari element tersebut dengan menggunakan attribute CSS display.

Contoh lainnya adalah di dalam penggunaan CSS 3.0. Untuk dapat menggunakan attribute baru dalam CSS 3.0 kita masih harus menggunakan attribute tambahan yang dikembangkan oelh browser. Sehingga ketersediaan style akan sangat tergantung pada dukungan browser yang menampilkan halaman dengan attribute CSS 3.0.

Walapun dengan segala kekurangan diatas, namun kita tetap harus membuat sebuah persiapan karena suatu saat nanti pasti akan mengunakan kedua standard ini. Inilah alasan utama penggunaan HTML 5 dan CSS 3.0 dalam website ini. Di sisi lain, ada harapan bahwa dengan adanya penggunaan HTML 5 dan CSS 3.0 dapat memberikan kesempatan kepada kami untuk berpartisipasi dalam perkembangan kedua standard tersebut.

Penggunaan HTML 5

Dalam mengembangkan website ini kami mencoba untuk menerapkan hampir seluruh tag HTML baru seperti header, footer, article, hgroup, time, aside, nav. Selain berdasarkan standard yang dikembangkan oleh W3C, penerapan HTML 5 banyak terbantu oleh beberapa tutorial dari website seperti alistapart dan html5doctor.

Salah satu contoh penggunaan HTML 5 pada website ini adalah di dalam data post. Kami menyusun setiap post dengan struktur HTML sebagai berikut :


  
    Title Here
    
      Post date
    
  
  
    Content Here ....
  
  
    
      Category List
    
    
      Tag List
    
  
  
    Related Post

Artikel ini tidak akan membahas teknis dari penggunaan HTML 5 secara mendetail, namun disini kami akan menjelaskan sedikit tentang struktur HTML diatas. Satu hal yang dapat disimpulkan setelah menggunakan HTML 5 adalah bahwa adanya tag baru tersebut memberikan kita peluang yang lebih luas dalam mendeskripsikan content. Sebelumnya content hanya dapat dideskripisikan sebagai paragraph, title dan beberapa konteks lain melalui tag inline seperti emphasis, abbreative dsb.

Dengan HTML 5, kita dapat menambahkan arti dari suatu content sebagai header, footer ataupun memecah content menjadi beberapa bab. Namun semua manfaat ini tidak akan kita dapatkan apabila tidak memiliki pemahaman yang kuat terhadap fungsi dari setiap tag. Di sisi lain kurangnya pemahaman dari setiap fungsi tag dapat menyulitkan kita dalam membuat keputusan terhadap pembentukan konteks dari content.

Ada satu kenyataan lain berkaitan dengan penggunaan HTML 5 yaitu kembalinya fungsi tag div sebagai kontainer murni yang tidak memberikan arti apapun terhadap content yang dikandungnya. Penggunaan div lebih sebagai pengait di dalam CSS dan Javascript.

Microformat

Inilah salah satu yang sedikit membingungkan dalam pembentukan HTML 5. Microformat pada dasarnya digunakan untuk menambahkan informasi sematic ke sebuah halaman web menggunakan HTML classes. Ia muncul sebagai akibat kurang mampunya tag HTML dalam menyediakan fungsi tersebut. Dengan semakin banyaknya tag baru yang dapat mengartikan content dalam berbagai konteks, masih bergunakah Microformat di dalam HTML 5 ?

Memang benar beberapa microformat dapat digantikan dengan tag HTML 5, sebagai contoh Microformat datetime-design-pattern dapat diganti dengan element time. Namun demikian selama stadard HTML 5 belum diterapkan secara luas maka microformat masih sangat diperlukan. Cara yang paling bijaksana adalah mencampur keduanya sampai ada standard yang pasti dan pengunaan yang luas dari HTML 5.

Secara prinsip Penambahan Microformat dalam HTML 5 (seperti yang diterapkan pada website ini) adalah sesuatu yang legal karena penambahan micordata dilakukan melalui HTML class tanpa terpengaruh oleh jenis tag yang digunakan. Terlebih lagi jika microdata HTML 5 kurang dapat memenuhi keinginan kita, maka microformat masih tetap diperlukan.

Penggunaan CSS 3.0

Penggunaan CSS 3.0 pada website ini masih belum terlalu signifikan. Hanya beberapa attribute yang kami gunakan untuk memperkuat style dokumen. Attribute tersebut antara lain font-face, text-shadow dan border-radius.

Namun karena attribute ini masih belum disupport oleh semua browser maka efeknya tidak akan dirasakan pada beberapa browser. Saya merekomendasikan untuk menggunakan firefox untuk mendapatkan hasil maksimal dari website ini.

Penutup

Pada dasarnya artikel ini bukan menjelaskan teknis penggunaan HTML 5 maupun CSS 3 namun lebih untuk memperkenalkan penggunaan dua stadard ini di dalam struktur website.

Terakhir, karena masih bersifat percobaan, maka kami sangat mengharapkan kritik dan saran terhadap penggunaan HTML 5 dan CSS 3 ini demi kemajuan bersama.

Redesign Untuk Sebuah Revolusi

mxtniznyn — Mon, 14 Jun 2010 00:02:22 +0000

Kegilaan, mungkin adalah kata yang paling pantas jika melihat sejarah iznyndotcom. Bagaimana tidak, terhitung sejak lahirnya website ini pada Maret 2009 sudah mengalami dua kali perubahan desain. Artinya bahwa hanya dalam kurun waktu 1 tahun kami sudah menggunakan tiga versi yang berbeda.

Pada saat kemunculan pertama kali, kami masih menggunakan fasilitas dasar dari WordPress. Sedangkan theme sudah membuat sendiri dan bernama Peace In Darkness. Generasi pertama ini tidak bertahan lama karena pada bulan juli sudah dilakukan proses redesign.

Generasi kedua selesai pada Agustus 2009. Pada versi ini sedikit lebih baik dan mulai memperluas fasilitas wordpress untuk dapat menjangkau kebutuhan website. Bersamaan dengan itu, kami juga melahirkan theme baru bernama Red In Light. Terakhir, pada Maret 2010 kami memutuskan untuk melakukan redesign yang kedua kalinya dan melahirkan versi 3.0 yang digunakan saat ini.

Mengapa Kami Lakukan?

Redesign suatu website adalah sebuah pekerjaan yang sangat melelahkan serta membutuhkan biaya dan waktu yang tidak sedikit. Jadi sangat jarang dilakukan dalam jarak waktu yang pendek.

Tapi mengapa hal ini justru terjadi pada iznyndotcom?

Tentu saja kami tidak sembarangan dalam memutuskan hal sepenting ini. Dalam kasus iznyndotcom ini, memang harus dilakukan sebuah perbaikan karena tanpa adanya hal tersebut maka tidak ada yang namanya langkah maju. Dari desain website sebelumnya, kami merasakan ketidaknyamanan dalam mengembangkannya sehingga sulit untuk mengharapkan adanya kemajuan dari desain tersebut.

Secara khusus, perkembangan website ini dapat juga dikatakan sebagai gambaran atas perkembangan dari kemampuan web design yang kami miliki. Pada desain awal dari iznyndotcom dapat menggambarkan kegamangan kami dalam dunia web design. Disini kami masih belum mampu menciptakan sebuah desain website yang solid. Pada versi kedua, sejalan dengan bertambahnya kemampuan web design yang kami miliki, sebuah desain tampilan website yang cukup bagus sudah dapat diciptakan. Namun tidak untuk sistem website.

Kesempurnaan Desain Saat Ini

Tidak ada yang lebih menyenangkan selain dapat mencapai sebuah kesempurnaan. Dan inilah yang kami rasakan setelah berhasil menyelesaikan versi 3.0 dari website ini.

Kami menyusun desain terbaru ini dengan detail yang sangat luar biasa sehingga seluruh kekurangan yang ada didalam desain sebelumnya tidak ada lagi.

Inspirasi

Ada banyak hal yang menginspirasi design terbaru dari website ini. Deviantart merupakan salah satunya. Beberapa karya yang dipublikasikan melalui social network ini banyak memberikan inspirasi terhadap unsur "Look and Feel". Kemudian untuk sistem dibelakang website, terutama untuk penyajian artikel blog banyak terinspirasi oleh alistapart.

Selain itu, inspirasi juga kami dapatkan dari hasil pengamatan terhadap beberapa "website showcase" yang dilakukan oleh beberapa blog seperti Vandelay Design dan Designm.ag.

Warna

Pertimbangan warna untuk design website ini menjadi cukup luas karena kami tidak mempunyai patokan yang pasti. Biasanya pencarian komposisi warna dari suatu project website dimulai dari logo organisasi di belakang website. Namun karena ini adalah blog pribadi sedangkan secara khusus kami belum mempunyai warna yang pasti pada logo yang digunakan menjadikan penentuan komposisi warna sedikit sulit dilakukan.

Suasana hati kemudian menjadi kunci dalam pemilihan warna biru untuk diterapkan dalam design website. Keputusan ini diambil lebih karena suasana yang ditimbulkan warna biru itu sendiri, yaitu segar, sejuk, dan alamiah. Dari suasana ini diharapkan akan memberikan kenyamanan dan kesejukan dalam menikmati isi website.

Layout

Berbeda dengan desain sebelumnya yang menempatkan seluruh content ke sisi kiri, pada desain terbaru ini kami memilih untuk menempatkan seluruh content di tengah-tengah monitor. Sedangkan untuk ukuran layout kami memilih menggunakan ukuran tetap (fixed) yang tidak akan terpengaruh oleh perubahan ukuran monitor maupun font. Walupun demikian, layout tetap memberikan flexibilitas dalam menyesuaikan berbagai lingkungan.

Desain layout untuk website versi ini cukup bervariasi, beberapa ada yang hanya terdiri dari 1 column sedangkan yang lainnya menempatkan content website di dalam 2 column. Pendekatan ini dilakukan agar user dapat fokus pada satu topik pembahasan untuk setiap halamannya dan tidak terganggu oleh content yang tidak berhubungan dengan topik utama.

Typography

Sejak awal pengembangan website ini, ada keinginan kuat untuk menggunakan suatu font yang memiliki kesan unik dan kuat pada bagian title content. Setelah melakukan pencarian, kami menemukan Rockwell dapat memenuhi keinginan tersebut. Namun disini ada beberapa masalah dalam penggunaan font ini. Penggunaan Rockwell akan menjadi sia-sia karena tidak ada satupun sistem operasi yang secara default menyertakannya. Hal ini diperburuk oleh ketiadaan font sejenis pada font-font yang tergolong aman.

Untuk mengatasinya, kami menemukan attribute css font-face sebagai solusi terbaik untuk masalah ini. Namun karena Rockwell merupakan font commercial maka kita harus mempunyai lisensi terhadap pemakaian font tersebut. Dengan dana yang cukup ketat, membuatnya menjadi cukup mustahil.

Akhirnya kami memutuskan untuk mencoba alternative lain melalui font gratis. Setelah melakukan pencarian, kami menemukan dua font yang mampu menggantikan Rockwell, yaitu Chunk dan Nilland. Pada dasarnya Chunk merupakan font utama yang kami gunakan sebagai heading, namun karena font ini terlalu tebal untuk suatu sub heading maka perlu digunakan Nilland yang mempunyai struktur lebih tipis.

Body Text Typography

Ketika menentukan tipe font yang digunakan pada suatu body text, kami masih beranggapan bahwa font sans-serif masih tetap menjadi yang terbaik. Walaupun beberapa website, seperti colly.com telah membuktikan bahwa font serif dapat dengan cantik digunakan pada text body.

Arial kemudian menjadi pilihan utama untuk setiap text body di dalam website ini. Selain karena disertakan hampir pada seluruh instalasi sistem operasi, pemilihan font ini juga didasarkan pada kesederhanannya.

Hal Baru Dalam Versi Ini

Berbicara tentang redesign tentu saja akan ada sesuatu yang baru. Terlebih jika menilik pada kata "Revolusi" dalam judul dari artikel ini. Pada proses pengembangan versi terbaru dari website ini lebih menitikberatkan pada sistem di belakang website. Bahkan pada awal rencana kami tidak melakukan perubahan terhadap tampilan website.

Berikut beberapa hal yang kami tambahkan dalam versi terbaru dari iznyndotcom.

HTML 5 dan CSS 3

Kesempurnaan dalam versi terbaru iznyndotcom semakin lengkap dengan diterapkannya HTML 5 dan CSS 3. Hampir secara keseluruhan struktur website ini dibangun dengan menggunakan standard HTML 5. Namun berbeda dengan CSS 3, kami hanya menggunakan beberapa attribute untuk memperkuat unsur presentasi website. Anda dapat membaca cerita lebih lengkap tentang hal ini dalam HTML 5 dan CSS 3 di Iznyndotcom

Cara Baru Penyajian Blog

Sejak awal, blog adalah inti dari website ini karena menjadi media yang menampilkan ide dan pikiran kami. Namun pada versi terbaru ini, kami tidak terlalu menonjolkan isi dari blog pada bagian halaman depan dan memberikan menu khusus untuk menyajikan seluruh artikel blog.

Hal ini disebabkan karena sekarang iznyndotcom tidak hanya sebagai tempat menampilkan ide (blog) namun juga menampilkan seluruh hasil perkerjaan web design yang telah kami kerjakan. Di lain pihak kami juga ingin memberikan kemudahan bagi user dalam menjangkau seluruh isi dari website.

Commenter Notification

Ini adalah fasilitas yang benar-benar baru dalam website ini. Commenter notification disediakan agar seseorang yang pernah terlibat diskusi pada suatu post, mendapatkan perberitahuan terkait dengan perkembangan proses diskusi.

Sebuah Harapan Baru

Awal dari terbesitnya ide redesign adalah rasa ketidaknyamanan kami dalam mengelola website ini. Sehingga ada harapan bahwa design baru ini mampu memberikan kenyamanan baik bagi kami selaku pengelola website maupun seluruh pengunjung website.

Selain itu kami juga berharap bahwa versi ini dapat menjadi pintu gerbang kesuksesan dalam dunia freelance web design serta sebagai awal dari pekerjaan-pekerjaan besar selanjutnya.

Dan yang lebih penting adalah bagaimana melalui website ini kami mampu memberikan manfaat kepada semua pihak yang telah berinteraksi dengan website kami ini.

Terakhir Namun Bukan Akhir Segalanya

Walaupun kami menganggap versi terbaru dari website ini sebagai sebuah kesempurnaan, namun kami sadar bahwa ini hanya bersifat sementara. Karena tidak ada yang sempurna di dunia ini. Kesempurnaan hanya bersifat sementara. Seiring berjalannya waktu, kesempurnaan akan memudar dan dapat menjadi sebuah kehancuran bilamana tidak dilakukan usaha untuk mempertahankannya.

Selain tetap berusaha untuk mempertahankan kesempurnaan website ini, kami sangat berharap adanya saran dan kritik atas semua kekurangan dan kesalahan yang anda temui ketika mengunjungi website ini.

Tak lupa kami juga mengucapkan banyak terima kasih kepada semua pihak yang telah memberikan bantuannya sehingga pekerjaan ini dapat terselesaikan dengan baik. Secara khusus ucapan ini kami persembahkan kepada My best friend, rere yang telah membantu dalam penyusunan content website ini

Akhirnya kami hanya bisa berharap agar website ini dapat memberikan manfaat bagi kita semua. Dan selamat menikmati.

Membuat Menu Dropdown Menggunakan CSS – Part. 3

iznyn — Tue, 09 Mar 2010 01:31:42 +0000

Masih ingatkah anda dengan artikel saya sebelumnya yang menjelaskan pembuatan menu drop down dengan CSS ?. Pada akhir artikel saya sempat menjanjikan akan menjelaskan tentang masalah yang timbul dari drop down menu tersebut. Namun seiring berjalannya waktu, saya tampaknya sedikit melupakannya sampai akhirnya teringat kembali ketika ada pembaca yang menanyakannya. Dan melalui artikel ini saya akan membayar lunas dengan membahas masalah ini secara tuntas.

IE Compatibility Problem

Masalah terbesar dari kode CSS yang membentuk menu drop down tersebut adalah Compatibility. Walaupun sebenarnya masalah ini hanya timbul untuk browser Internet Explorer, namun menjadi cukup serius karena browser ini masih mempunyai cukup banyak penggemar. Anda mungkin akan mencatat bahwa jika menu drop down dilihat pada browser IE akan menghasilkan sesuatu yang berbeda. Why? berikut penjelasannya.

Karena masalah yang timbul pada IE 7 dan IE 6 cukup berbeda, maka kita akan memisahkannya. Kita mulai saja dari yang paling tua, yaitu Internet Explorer 6

Masalah di Internet Explorer 6

Masalah yang timbul pada browser ini akan menjadi jelas jika kita melihat sejarah dari IE 6. Sejak dirilis pada Agustus 2001, browser ini cukup mendapat tempat bagi para pengguna. Selain karena dia disertakan didalam OS Windows, juga karena dukungan terhadap CSS yang sangat bagus. Sedihnya seluruh kesuksesan yang didapatkannya diiringi oleh sebuah keangkuhan. Merasa telah memenangkan browser war, Microsoft memutuskan untuk menghentikan pengembangan IE 6 dan mengalihkan tim pada proyek lain. Seiring dengan tertidurnya IE 6, perkembangan teknologi CSS justru berkembang sangat cepat. Hasilnya pun bisa ditebak, browser ini menjadi cukup kekurangan untuk dukungan CSS yang terkini.

Ok kita tidak perlu berlama-lama dengan pelajaran sejarah, karena yang kita perlukan adalah kalimat terakhir. Sekarang kita menuju ke kode CSS kita. Untuk membentuk menu drop down, kita menggunakan child selector. Berikut salah satu kodenya :

#menu>ul>li {
  display: inline;
  float: left;
  line-height: 40px;
}

Child selector pada kode tersebut ditandai oleh karakter >. Selector jenis ini digunakan untuk menargetkan element html yang secara langsung menjadi anak atau turunan dari element diatasnya. Nah Internet Explorer tidak dapat memahami selector ini, jadi semua kode didalamnya akan diabaikan oleh browser ini.

Kemudian kita lihat kode CSS berikut :

#menu li:hover>ul {display: block;}

Kode CSS diatas merupakan kunci untuk menu drop down kita, dimana kode ini akan memunculkan menu level bawah ketika mouse berada pada menu level atasnya. Atau dengan kata lain kode tersebut berkata "Tampilkan element ul yang berada langsung dibawah element li ketika mouse berada diatas element li. Nah masalah dengan IE 6 disini adalah bahwa IE 6 tidak mendukung pseudo class :hover untuk element selain a atau yang mempunyai attribute href.

Nah sekarang anda sudah tahu masalah yang terjadi pada menu drop down di dalam IE 6. Saatnya anda untuk pergi ke tempat tidur beristirahat dan melupakan semua masalah ini.

Are you kidding?. Tidak saya disini benar-benar serius. Untuk masalah selector mungkin akan bisa diselesaikan, namun untuk masalah pseudo class kita benar-benar tidak bisa berbuat apapun. Yang bisa anda lakukan ketika harus memaksakan suatu menu drop down pada browser IE 6 adalah beralih ke Java Script, dan hal ini diluar jangkauan dari artikel ini. Atau anda dapat juga mempertimbangkan untuk membedakan style menu untuk browser ini dengan hanya menampilkan menu utama saja. OK kita tidak perlu berlama-lama dengan IE 6, karena sesungguhnya perjalanan kita masih cukup panjang.

Masalah di Internet Explorer 7

Berbeda dengan versi sebelumnya, Internet Explorer 7, telah banyak mengalami perbaikan dalam dukungan terhadap kode-kode CSS. Dan kabar gembira bagi kita, browser ini telah mendukung untuk kode CSS yang digunakan untuk membentuk menu drop down yang menjadi masalah di IE 6. Tetapi mungkin anda mencatat bahwa jika menu drop down dilihat pada IE 7 justru tidak terlihat dan hanya akan menampilkan halaman kosong saja. Mengapa bisa demikian? Berikut penjelasannya.

Penyebab utama mengapa kasus di atas dapat terjadi adalah float. Kita menggunakan float dalam membentuk menu drop down agar setiap item menu dapat bersebelahan secara horisontal, berikut kodenya :

#menu>ul>li {
  display: inline;
  float: left;
  line-height: 40px;
}

Pada dasarnya kita telah menjelaskan secara mendalam tentang efek negatif dari float dan bagaimana cara mengatasinya pada artikel styling form part 1. Namun tampaknya solusi tersebut tidak berlaku di dalam IE 7. Sebelumnya telah dijelaskan bahwa kita mengatasi masalah float dengan menggunakan tehnik clearfix. Di dalam class clearfix kita menggunakan pseudo-element :after yang digunakan untuk menambahkan suatu content setelah element class clearfix. Berikut kodenya :

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

Pada situs resmi dari clearfix telah dijelaskan bagaimana cara mengatasi hal tersebut, yaitu dengan menambahkan attribute css zoom.

Dengan perbaikan ini, kini menu utama dapat terlihat pada browser IE 7, namun demikian masih ada masalah untuk submenu-nya. Pada submenu terlihat letaknya terlalu tinggi dan setiap item menu ruangnya terlalu besar. Untuk memperbaikinya tambahkan kode css berikut:

Pada kode CSS yang pertama digunakan untuk memperkecil ruang pada setiap item submenu. Untuk membentuk ruang pada setiap item submenu, disini kita melakukannya dengan mengubah sifat dari tag a menjadi block kemudian menambahkan padding pada sisi atas dan bawah sebanyak 12px. Di dalam IE 7, browser ini secara misterius menambahkan sedikit ruang di kedua sisi tersebut. Ketika pertama kali mengetahui masalah ini, saya menduga bahwa hal ini disebabkan oleh float. Namun ternyata justru attribute line-height yang menjadi penyebab masalah ini.

Attribute line-height digunakan memperluas ketinggian content dan sekaligus menengahkan content secara vertikal pada menu utama. Satu hal yang penting dari attribute ini adalah bahwa dia akan diturunkan (inherited) ke element turunannya. Nah di dalam IE 7 perilaku attribute line-height menjadi aneh jika element mengandung bukan inline-element atau inline-element yang diganti dengan content bukan teks seperti image dan element form. Dan perilaku aneh ini menghasilkan ruang yang lebih lebar dari seharusnya.

Setelah mengadakan beberapa percobaan, ternyata solusi dari masalah ini cukup sederhana yaitu dengan menentukan ukuran ketinggian terhadap element, dalam hal ini saya menggunakan height: 1%. Attribute ini kemudian akan memicu element untuk menjadi "hasLayout". IE menerapkan mesin render berbeda yang menggunakan internal konsep yang dikenal sebagai "Layout". Konsep Layout ini digunakan oleh IE untuk mengatur ukuran dan posisi dari element. Ketika suatu element dikatakan untuk "have layout" akan bertanggung jawab terhadap ukuran dan posisi dari dirinya dan turunannya. Sedangkan jika tidak maka ukuran dan posisi akan ditentukan oleh element ancestor dengan layout yang terdekat. Untuk lebih jelasnya tentang masalah ini dapat dibaca dalam The Internet Explorer hasLayout Property.

Selanjutnya pada kode perbaikan yang kedua hanya digunakan untuk menurunkan posisi dari submenu agar tepat dibawah menu utama. Dengan adanya masalah ini dapat disimpulkan bahwa di dalam IE suatu element yang diposisikan secara relative akan ditempatkan pada batas teratas dari element ancestor yang diposisikan secara absolute. Hal ini berbeda dengan browser lainnya yang akan menempatkan pada batas terbawah dari element ancestor.

Masalah di Browser lain

Penulis telah melakukan test terhadap menu drop down ini pada beberapa browser selain Internet Explorer seperti Opera 9, Firefox 3.5, Safari 4, Google Chrome 4. Dan hasilnya terlihat sangat sempurna hampir tidak ada masalah apapun. Walaupun demikian penulis tidak menjamin secara penuh menu drop down ini tidak ada masalah pada browser dengan versi di bawah dari browser test tersebut.

Terakhir solusi terhadap masalah di Internet Explorer diatas sepenuhnya hanya diperuntukkan dalam perbaikan menu drop down yang kita buat sebelumnya. Yang lebih penting disini adalah bahwa anda mampu memahami secara mendalam beberapa masalah yang akan sering kali anda temui ketika menyusun kode CSS. Selamat mencoba….

Artist Of The Month {Februari}

iznyn — Sun, 21 Feb 2010 23:04:54 +0000

Bulan Februari ini mungkin merupakan anugrah bagi penggemar musik metal dan alternative. Karena beberapa artist terkemuka dari kedua genre tersebut berhasil merilis album baru. Sebut saja Dark Tranqullity, yang merupakan pioneers dari melodic death metal, kemudian Eluveitie, band yang secara unik menggabungkan musik-musik tradisional skandinavia. Kemudian dari kubu alternative, ada Story Of The Years, Lost Prophets dan Alesana.

Berikut daftar lengkapnya :

Dark Tranqullity – We Are The Void

Label : Century Media

Genre(s) : Melodic Death Metal

Track :

Shadow in Our Blood 03:46
Dream Oblivion 03:48
The Fatalist 04:32
In My Absence 04:47
The Grandest Accusation 04:55
At the Point of Ignition 03:52
Her Silent Language 03:33
Arkhangelsk 03:56
I Am the Void 04:00
Surface the Infinite 03:50
Iridium 06:43

Buy from Amazon

Eluveitie – Everything Remains (As It Never Was)

Label : Nuclear Blast

Genre(s) : Celtic/Pagan Metal

Track :

Otherworld 01:57
Everything Remains As It Never Was 04:25
Thousandfold 03:20
Nil 03:43
The Essence of Ashes 03:59
Isara 02:44
Kingdom Come Undone 03:22
Quoth the Raven 04:42
(Do)minion 05:07
Setlon 02:36
Sempiternal Embers 04:52
Lugdunon 04:01
The Liminal Passage 02:15

Buy from Amazon

Catamenia – Cavalcade

Label : Massacre

Genre(s) : Black Metal

Track :

Blood Trails 04:59
Cavalcade 04:59
The Path That Lies Behind Me 04:20
Silence 04:29
Quantity of Sadness 04:29
Post Mortem 04:27
The Vulture’s Feast 05:15
A Callous Mind 04:06
Reincarnation 05:23
Angry Again (Megadeth cover) 03:36
Farewell (Sentenced cover)(Bonus Track)

Buy from Amazon

Alesana – The Emptiness

Label : Fearless

Genre(s) : Post Hardcore

Track :

Curse of the Virgin Canvas 4:49
The Artist 3:46
A Lunatic’s Lament 4:05
The Murderer 4:33
Hymn for the Shameless 5:38
The Thespian 4:42
Heavy Hangs the Albatross 3:51
The Lover 3:25
In Her Tomb By the Sounding Sea 3:41
To Be Scared By an Owl 4:11
Annabel 7:19

Buy from Amazon

Lost Prophets – The Betrayed

Label : Sony Music

Genre(s) : Alternative Rock

Track :

If It Wasn’t for Hate, We’d Be Dead by Now 2:19
Dstryr/Dstryr 4:29
It’s Not the End of the World, But I Can See It from Here 4:20
Where We Belong 4:37
Next Stop, Atro City 3:02
For He’s a Jolly Good Felon 4:43
A Better Nothing 4:47
Streets of Nowhere 3:26
Dirty Little Heart 5:44
Darkest Blue 3:51
The Light That Shines Twice as Bright… 5:52

Buy from Amazon

Story Of The Years – The Constant

Label : Epitaph

Genre(s) : Post-hardcore

Track :

The Children Sing 4:07
The Ghost of You and I 3:55
I’m Alive 4:15
To the Burial 3:48
The Dream Is Over 3:52
Remember a Time 4:05
Holding on to You 3:43
Won Threw Ate 3:44
Ten Years Down 3:53
Time Goes On 4:06
Eye for an Eye 2:14

Buy from Amazon

Styling Form Part 2

iznyn — Tue, 09 Feb 2010 19:43:47 +0000

Pada artikel sebelumnya, Styling Form Part 1, kita telah belajar membentuk form agar label berada diatas element form. Nah untuk tutorial bagian kedua ini kita akan membuat agar label dan element form saling bersebelahan. Berikut hasil akhir dari form kita nantinya,

Sebelum kita menjamah pada CSS, kita harus terlebih dahulu sedikit merubah struktur Html, yaitu dengan merubah posisi teks required dari setelah label ke setelah input. Sebagai berikut :

    
      Name
      
	  (required)

Struktur HTML yang lebih lengkap dapat dilihat pada perubahan struktur HTML.

Menyusun Kode CSS

Di dalam desain form yang kedua ini, kita akan membuat setiap rangkaian element form, yang terdiri dari label, field dan teks required sejajar dalam satu baris. Karena dari ketiga element tersebut bersifat inline, maka kita tidak perlu melakukan apapun. Selanjutnya kita akan terlebih dahulu menyusun style dasar dari form, sepert huruf, warna dan jarak antar element. Untuk mempersingkat tutorial ini, kita gunakan kode CSS dari tutorial styling form bagian I dan merubahnya sesuai dengan kebutuhan. Hasilnya dapat dilihat pada hasil kode CSS tutotial I.

Dari hasil kode CSS diatas terlihat bahwa teks required tidak ikut berubah. Hal ini dikarenakan kita merubah letaknya di dalam struktur HTML. Untuk memperbaikinya kita cukup merubah selector yang menargetkan element ini dari label em menjadi em. Selain itu tampak bahwa label dan element form tidak lagi sejajar, untuk mensejajarkannya kembali dilakukan dengan mengembalikan sifat asli dari element label menjadi inline. Untuk melakukannya hapus kode css display: block didalam selector label. Hasil dapat dilihat pada perbaikan teks required. Dari hasil yang didapatkan terlihat cukup bagus, namun belum sesuai dengan hasil akhir yang kita inginkan.

Memperbaiki Layout Form

Sampai titik ini, terlihat bahwa form masih kurang rapi dan berbeda dari hasil akhir yang diinginkan. Pada hasil akhir, terlihat bahwa label dan element form akan sejajar secara vertikal dan label mempunyai lebar yang sama. Kita tidak dapat menyelesaikannya dengan menambahkan nilai width, karena sifat inline dari tag label. Lebar dari suatu element inline ditentukan berdasarkan lebar dari teks yang ada di dalamnya. Walaupun kita dapat mempengaruhi lebar dengan attribute padding dan margin, namun tetap akan menghasilkan lebar yang berbeda.

Untuk dapat memberikan lebar pada element label kita harus merubah sifat dari element ini menjadi block, namun hal ini membuat label tidak lagi sejajar dengan element form. Satu-satunya cara yang tersisa adalah menggunakan float. Property CSS float digunakan untuk memaksakan suatu element untuk mengisi ruang kosong yang ada di atasnya. Element float mempunyai sifat yang unik, ketika masih ada ruang kosong diatasnya dia mirip seperti element inline, namun kita juga dapat memberikan dimension properties (width dan height). Inilah yang kita butuhkan disini.

Namun pertanyaannya adalah element apa yang perlu di-float ?. Cara termudah adalah dengan melakukannya pada element yang paling kiri dan kemudian kita berikan nilai left. Dalam struktur kita berarti adalah label, berikut kodenya,

label {
  float: left;
  font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif;
  color: #003399;
}

Hasilnya dapat dilihat pada hasil floating element label.

Terlihat masih tetap kurang rapi, untuk merapikannya kita berikan nilai width dan mengatur perataan dari element label, sebagai berikut,

label {
  float: left;
  width: 80px;
  text-align: right;
  margin-right: 10px;
  font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif;
  color: #003399;
}

Hasilnya dapat dilihat pada perbaikan layout form.

Untuk sentuhan akhir kita tambahkan property vertical align pada element teks required (), sehingga teks akan selalu berada di bagian teratas.

em { font-size: 10px; color: #6699cc; font-weight: normal; vertical-align: top; }

Semuanya terlihat sangat sempurna, namun hal ini dicapai ketika kita melihatnya di Firefox, bagaimana dengan IE ? Beruntungnya semua terlihat sama dan tidak ada yang ganjal dengan tampilan form. Berikut seluruh kode CSS yang membentuk form bagian kedua.

ol { padding-left: 0; margin-bottom: 20px; } li { list-style: none; } label { float: left; width: 80px; text-align: right; margin-right: 10px; font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif; color: #003399; } input { margin-bottom: 16px; width: 180px; } input, textarea { border: 1px solid #6699cc; color: #003366; } textarea { width: 240px; height: 80px; } em { font-size: 10px; color: #6699cc; font-weight: normal; vertical-align: top; } .submit input { width: auto; padding: 4px 20px; font: bold 12px "Trebuchet MS", Calibri, Arial, sans-serif; } .submit input:hover { cursor: pointer; background-color: #ccccff; }

Hasil akhir dapat dilihat pada hasil akhir form.

Styling Form Part 1

iznyn — Fri, 22 Jan 2010 01:52:38 +0000

Form pada modern web seperti saat ini merupakan sebuah element yang cukup penting dalam menghubungkan user dengan sistem di dalam web tersebut. Fungsi utama dari suatu form adalah memungkinkan suatu user untuk memasukkan data ke dalam sistem web, dalam rangka untuk memenuhi suatu proses tertentu. Sebagai contoh adalah User Registration Form, pada form jenis ini, user memasukkan data pribadi untuk mandapatkan suatu hak khusus terhadap akses data di dalam web yang bersangkutan.

Penyusunan form tidak akan terlepas dari teknologi server-side, seperti PHP, ASP, Perl, dsb. Kita harus membuat fungsi-fungsi pemrosesan data yang dimasukkan melalui form dengan menggunakan teknologi ini. Namun demikian kita juga jangan sampai melupakan teknologi client-side, seperti CSS dan Javascript, untuk memberikan kenyamanan kepada user ketika memasukkan data melalui form. Dan pada artikel ini kita akan bercerita tentang bagaimana menyusun suatu form yang baik dan benar.

Menyusun Struktur HTML Untuk Form

Tentu saja, langkah pertama untuk menyusun Form adalah membentuk struktur HTML. Namun sebelum kita melangkah lebih jauh lagi, satu hal yang perlu diingat adalah bahwa masa kejayaan "Table" telah lewat dan kita tidak akan secara bodoh menggunakannya dalam tutorial ini.

Dari semua tag html yang tersedia, saya lebih suka menggunakan tag ordered list dalam menyusun form. Dengan menggunakan tag ini, maka dalam kondisi tanpa CSS, form akan tetap akan terstruktur dengan baik dan tetap mudah diikuti. Kemudian mengingat suatu form mempunyai urutan pengisian yang jelas dari atas ke bawah maka pemilihan tag ordered list akan menjadi semakin sempurna.

Berikut kode HTML dari form yang akan kita susun,

Name (required)

Email (required)

Message (required)

Hasil dari kode HTML diatas dapat dilihat pada struktur html untuk form.

Menyusun Kode CSS

Sekarang kita masuk pada inti dari tutorial ini, yaitu menyusun kode CSS. Pada tutorial ini kita akan membentuk dua style form pada struktur html di atas. Berikut hasil akhir dari form kita.

Menyusun Style Form 1

Untuk membentuk tampilan form pada gambar 1 cukup mudah dilakukan. Pertama kita harus menghilangkan style-list dari tag list, sebagai berikut :

ol { padding-left: 0; } li { list-style: none; }

Selanjutnya kita merubah attribute block pada tag label dan menambahkan sedikit ruang dibawah tag input. Berikut code CSS-nya :

label { display: block; } input { margin-bottom: 16px; }

Anda dapat melihat hasil kode CSS diatas pada hasil untuk pembentukan layout form.

Selanjutnya kita mempercantik element form dengan merubah warna border dan sedikit memperbesar ukurannya, sebagai berikut :

input { margin-bottom: 16px; width: 180px; } input, textarea { border: 1px solid #6699cc; color: #003366; } textarea { width: 240px; height: 80px; }

Berikutnya kita mengatur style dari tombol Send Message.

.submit input { width: auto; padding: 4px 20px; } .submit input:hover { cursor: pointer; background-color: #ccccff; }

Untuk sementara bentuk form dapat dilihat pada hasil mempercantik form.

Terakhir kita tinggal mengatur style dari font. Berikut hasil dari kode CSS yang menyusun style form kita.

ol { padding-left: 0; margin-bottom: 20px; } li { list-style: none; } label { display: block; font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif; color: #003399; } input { margin-bottom: 16px; width: 180px; } input, textarea { border: 1px solid #6699cc; color: #003366; } textarea { width: 240px; height: 80px; } label em { font-size: 10px; color: #6699cc; font-weight: normal; } .submit input { width: auto; padding: 4px 20px; font: bold 12px "Trebuchet MS", Calibri, Arial, sans-serif; } .submit input:hover { cursor: pointer; background-color: #ccccff; }

Hasil akhir dari style form bagian 1 dapat dilihat pada hasil akhir form

Berikutnya kita akan menjelaskan cara menyusun style form untuk bagian ke 2. Pada bagian ini akan menjadi sedikit lebih rumit dari bagian sebelumnya dan kita akan menjelaskannya pada artikel saya selanjutnya. Enjoyed

Membuat Post list di dalam WordPress Tanpa The Loop()

iznyn — Tue, 12 Jan 2010 22:25:05 +0000

WordPress saat ini telah menjadi salah satu mesin blog yang paling banyak digunakan. Kemudahan serta flexibilitas dari wordpress mempermudah kita di dalam membuat suatu blog atau bahkan suatu web yang lebih rumit. Salah satu fasilitas yang dimiliki oleh WordPress yang dapat mempermudah dalam penyusunan blog adalah the loop(). The loop merupakan serangkaian php function yang disediakan untuk mempermudah dalam menampilkan setiap post di dalam suatu halaman.

Namun disini kita tidak akan menjelaskan bagaimana menggunakan fasilitas ini. Kita disini akan mencoba untuk mencapai hasil yang sama dengan menggunakan cara yang berbeda. Meskipun kita akan tetap menjelaskan bagaimana The Loop berkerja.

Proses Pengambilan Data Post Di Dalam WordPress

Sebelum kita menggali lebih dalam tentang cara kerja The Loop, kita akan melihat bagaimana WordPress bekerja menangani setiap request. Setiap request yang diterima oleh WordPress akan diuraikan untuk mendapatkan variable-variable request. Proses penguraian dilakukan dengan menyamakan URI Request dengan suatu rangkaian rewrite_rule. Dengan variable request yang didapatkan kemudian akan digunakan oleh WordPress untuk mengambil data post di dalam database. Jadi pada setiap request yang diterima, WordPress akan selalu berusaha untuk mendapatkan data posts.

Pada dasarnya WordPress akan menangani fungsi-fungsi tersebut dengan menggunakan beberapa class. Beruntungnya objek dari class tersebut oleh WordPress disimpan dalam suatu global variable. Sehingga kita dapat mempelajari proses wordpress dengan memeriksa global variable tersebut, antara lain :

$wp_rewrite

Membawa object WP_Rewrite yang digunakan oleh WordPress untuk membentuk rewrite_rule

$wp_query

Membawa object WP_Query yang digunakan oleh WordPress untuk mendapatkan data post berdasarkan variable request yang di dapatkan

$wp

Di dalam class yang di bawa oleh variable ini akan menguraikan URI Request berdasarkan rewrite_rule dan menyuplai variable request yang di dapatkan ke dalam class WP_Query

Kita dapat memeriksa variable tersebut dengan menggunakan fungsi php print_r() dan disarangkan di dalam tag pre. Sebagai contoh masukkan kode berikut ke dalam file header.php di dalam folder theme anda.

Seharusnya anda sekarang telah mendapatkan ide tentang bagaimana wordpress menangani setiap request. Selanjutnya akan dijelaskan tentang bagaimana The Loop bekerja

Cara Kerja The Loop

Pada dasarnya fungsi-fungsi dalam The Loop hanya memanipulasi object wp_query. Kita menggunakan The Loop untuk mendapatkan data posts sebagai berikut :

//Html code here

Dari kode diatas, pertama kita mempunyai function have_post(). Fungsi ini berfungsi untuk memeriksa apakah suatu request menghasilkan data post atau tidak. Apabila terdapat data posts yang dihasilkan maka fungsi ini juga akan melakukan proses iteration dengan menambahkan nilai counter ke dalam attribute class.

Kemudian kita mempunyai fungsi the_post(). Fungsi ini akan mendapatkan data post tunggal berdasarkan nilai counter yang disuplai oleh fungsi have_post(). Dari data post yang didapatkan, kemudian akan menyuplai beberapa nilai penting ke dalam global variable, sebagai contoh adalah $id, sehingga kemudian dapat digunakan oleh fungsi-fungsi templete.

Membangun Post List Tanpa The Loop

Sekarang kita masuk pada inti dari artikel ini. Untuk dapat menampilkan data post tanpa menggunakan The Loop, maka kita dapat menggunakan class WP_Query. Pada dasarnya dari setiap request yang didapatkan, WordPress akan membuat object baru dari class WP_Query dan disimpan dalam global variable $wp_query yang kemudian menggunakannya untuk mendapatkan data post.

Tanpa The Loop, kita dapat menggunakan data dalam object $wp_query untuk mendapatkan data post, sebagai contoh :

posts; if (!empty($posts)) : foreach($posts as $post) : ?>
post_title; ?>

post_content; ?>

Salah satu keuntungan dengan menggunakan class WP_Query adalah kita dapat secara bebas menentukan data post yang ingin di dapatkan tanpa harus tergantung pada request halaman. Sebagai contoh adalah mendapatkan 5 data post terbaru, sebagai berikut :

5); $post = $posts->query($q); if (!empty($post)) : foreach($post as $value) : ?>
post_title; ?>

post_content; ?>

Sebagai catatan penting adalah bahwa ketika kita menampilkan data post tanpa menggunakan The Loop, maka kita sama sekali tidak dapat menggunakan fungsi-fungsi templete seperti the_ID(), the_title(), the_content().

Terakhir, tujuan dibuatnya artikel ini bukanlah memberikan suatu rekomendasi, namun lebih ingin menjelaskan bagaimana proses pengambilan data post di dalam WordPress. Saya tetap merekomendasikan untuk menggunakan The Loop untuk kondisi-kondisi biasa. Baru kemudian jika The Loop dirasa kurang dapat memenuhi kebutuhan pengambilan data post, kita dapat menggunakan tehnik-tehnik yang telah dijelaskan diatas.

WordPress Memenangkan CMS Award

iznyn — Thu, 26 Nov 2009 23:16:00 +0000

Ini merupakan kabar gembira bagi para penggemar WordPress, dengan terpilihnya WordPress sebagai the Overall Best Open Source CMS Award pada the 2009 Open Source CMS Awards yang diselenggarakan Packt Publishing. Bukan sebuah kontes yang kecil, karena di dalamnya terlibat lebih dari 12,000 nominasi dan lebih dari 23,000 partisipan ikut dalam pemilihan diseluruh category yang disediakan. Dengan penghargaan yang diraih ini telah menunjukkan bahwa WordPress sekarang tidak lagi dipandang hanya sebagai software blog namun sebagai suatu CMS

Disamping memenangkan penghargaan di dalam categori the 2009 Open Source CMS Awards, WordPress juga meraih sukses dengan menduduki peringkat kedua di dalam categori the Best Open Source PHP CMS dibawah Drupal dan diatas Joomla. Hal ini cukup mengejutkan karena sebelumnya, pada acara yang sama, WordPress bahkan tidak masuk di dalam 5 besar, dan sekarang berada di peringkat kedua diatas joomla yang notabene benar-benar suatu CMS murni.

Semua raihan ini tidak terlepas dari peran komunitas WordPress secara keseluruhan. Terutama bagi para pengembang plugin yang telah berhasil memperkuat fungsi dasar WordPress sehingga mampu menjadikannya lebih fleksible dalam memenuhi berbagai kebutuhan pengembangan web. Pada kenyataannya, menurut penulis semua ini memang pantas untuk diraih oleh WordPress. Berdasarkan pengalaman dari penulis selama menggunakannya, sistem ini memang cukup fleksible karena kita secara bebas diberikan kesempatan untuk memperluas fungsi-fungsinya di hampir seluruh bagian fungsi dasarnya.

Akhirnya dengan semua raihan ini, akan memberikan kebanggaan tidak hanya bagi tim pengembang WordPress itu sendiri namun bagi komunitas WordPress secara keseluruhan. Congratulations !!!!

Berikut daftar lengkap dari peraih penghargaan tersebut :

The Overall Best Open Source CMS Award

WordPress

MODx

SilverStripe

The inaugural Hall of Fame Award

Drupal

Joomla

The Most Promising Open Source CMS

ImpressCMS

Pixie

Pligg

The Best Open Source PHP CMS

Drupal

WordPress

Joomla

The Best Other Open Source CMS

Plone

dotCMS

mojoPortal

Membuat Menu Dropdown Menggunakan CSS – Part. 2

iznyn — Wed, 04 Nov 2009 22:25:16 +0000

Mengatur style untuk Sub Menu

Setelah pada bagian pertama kita mengatur style untuk menu utama, maka kali ini kita akan mengatur style untuk sub menu.

Sesuai dengan desain yang telah kita buat sebelumnya, sub menu hanya akan nampak ketika mouse berada diatas daerah menu utama. Kita dapat melakukannya dengan menyembunyikan sub menu pada kondisi normal dan baru akan memunculkannya ketika mouse berada diatas menu utama. Namun untuk keperluan desain, maka pengaturan tersebut akan diberikan pada bagian paling akhir karena kita membutuhkan memunculkan bagian sub menu untuk mengatur tampilannya.

Pertama kita atur style untuk element kontainer dari setiap sub menu, termasuk background color, padding dan width, berikut ini :

#menu>ul>li ul { background-color: #99ccff; width: 140px; padding: 10px 10px 20px 10px; }

Berikutnya adalah memposisikan sub menu relatif terhadap menu induknya.

#menu>ul>li ul {position: absolute; left:23px;}

Secara default apabila kita memposisikan suatu elemen secara absolute, maka elemen tersebut akan diposisikan relatif terhadap elemen terdekatnya yang telah keluar dari aliran normal dokumen. Untuk kasus diatas, kita harus membuat elemen kontainer dari menu utama agar keluar dari aliran normal dokumen, dalam hal ini menggunakan relative positioning. Untuk lebih jelas tentang masalah ini dapat dilihat pada artikel saya, Absolute Positioning dan Relative Positioning.

Kode CSS tersebut hanya berlaku untuk sub menu yang langsung berada dibawah menu utama, sedangkan untuk sub menu dari suatu sub menu tidak akan terpenuhi. Hal ini disebabkan oleh posisi dari sub menu tersebut yang berbeda, untuk sub menu dari menu utama akan diposisikan dibawah dari menu utama, sedangkan untuk sub menu dari sub menu akan diposisikan di samping sub menu induknya. Agar dapat menyelesaikan masalah ini dengan memposisikan ulang sub menu dari sub menu, sebagai berikut :

#menu>ul>li ul ul { left: 140px; top: 0; }

Selanjutnya kita akan mengatur style untuk link sub menu. Link akan diatur agar ketika mouse berada diatasnya, warna background berubah. Perlu dicatat juga bahwa link ini akan mempunyai luasan yang cukup lebar sedangkan dengan perilaku default dari elemen anchor, yaitu sebagai inline element, hal ini tidak mungkin dapat terpenuhi. Suatu inline element, seperti a, em, strong dan code tidak akan terpengaruh oleh attribute CSS yang berusaha untuk memperluas elemen tersebut secara vertikal, seperti padding-top, padding-bottom, margin-top dan margin-bottom. Kebalikan dari inline-level element adalah block-level element. Pada suatu block-level element, seperti p, ul dan pre kita dapat memperluas elemen tersebut baik secara vertikal maupun horisontal. Untuk lebih memahami tentang masalah dapat dilihat pada Wikipedia – HTML Element

Dengan menggunakan CSS kita dapat merubah sifat dasar suatu elemen HTML, baik dari Block ke Inline maupun sebaliknya dengan menggunakan attribute display. Kembali ke link yang akan kita susun, setelah merubah elemen anchor dari level inline ke block, kita dapat memperluas elemen link dengan menggunakan attribute padding, sebagai berikut :

#menu>ul>li ul a { display: block; padding: 12px 0 12px 4px; line-height: 16px; border-bottom: 1px solid #6699cc; } #menu>ul>li ul a:hover { background-color: #6699cc; }

Disini kita juga memberikan attibute line-height untuk mengurangi efek dari attribute yang sama, yang kita deklerasikan sebelumnya. Selain itu kita juga memberikan border di bagian bawah dari setiap sub-menu untuk memisahkan setiap menu.

Pekerjaan hampir selesai, yang tersisa adalah mengatur perilaku dari sub-menu. Seperti telah dijelaskan sebelumnya bahwa sub-menu hanya akan nampak ketika mouse ada diatas menu induknya. Untuk menyelesaikannya, pertama kita sembunyikan terlebih dahulu ketika dalam kondisi normal.

#menu>ul>li ul { display: none; }

Berikutnya kita tampilkan sub-menu ketika mouse ada diatas menu induknya.

#menu li:hover>ul { display: block; }

Nah, semua perkejaan kini telah selesai. Untuk dapat melihat hasil akhir dari menu drop-down dapat dilihat disini.

Apabila ingin mendapatkan semua file yang diperlukan dalam tutorial ini dapat diunduh disini.

Walaupun menu drop-down telah selesai disusun, namun tutorial ini tidak berhenti disini. Pada bagian selanjutnya akan dijelaskan tentang masalah-masalah yang timbul dari menu drop-down ini dan bagaimana menyelesaikannya.