Hasil dari tutorial ini adalah membuat kotak komentar menjadi warna strip. Bahasa gampangnya, punya warna berbeda di nomor ganjil dan genapnya. Selain itu, saya juga membahas bagaimana membuat komentar dari sang author atau sang empunya blog berbeda sendiri dari warna-warna lain seperti di blog ini.

Comments.php

Daftar-daftar komentar dan form komentar biasanya berada di file comments.php di theme wordpress yang sedang digunakan. Saya harapkan jangan berbuat hal yang macam-macam jika anda tidak tahu apa yang sedang anda lakukan. Seperti komentar di bagian bawah file comments.php, if you delete this the sky will fall on your head. Hehehe…

Buka comments.php di editor kesayangan anda. Jangan tanya saya editornya. Yang terpenting adalah, anda bisa mengubahnya. Mau pakai software apa saja, itu tergantung kesukaan.

Setelah membukanya, carilah kode di bawah ini

Kode diatas bermaksud mencoba membaca semua komentar yang ada dengan menggunakan teknik iterasi (perulangan). Jadi proses yang berada di dalam kode tersebut, dieksekusi secara terus menerus sampai dengan komentar untuk post yang bersangkutan habis.

Membuat warna strip

Untuk membuat warna strip di blok komentar, anda membutuhkan sebuah variabel penunjuk status. Kita bisa membuat variabel sendiri bernama katakanlah, j. Jadi, ubah kode foreach di atas menjadi seperti ini kira-kira.

Artinya, kita mulai membuat sebuah variabel bernama j dan langsung memberikannya sebuah nilai 0.

Lalu tambahkan kode ini persis di bawah baris foreach:

Artinya, jika nilai j habis dibagi dengan angka 2 (artinya nilai adalah genap) maka kita membuat sebuah variabel $class yang berisi “comment-1″. Selain itu (artinya nilai adalah ganjil) maka variabel $class kita isi dengan “comment-2″. Setelah itu, nilai $j ditambahkan satu.

Dengan kode di atas, maka kita membuat 2 buah blok komentar dengan masing-masingnya punya keunikan tersendiri dari nama class.

Kemudian ubah blok komentar anda dengan melakukan penambahan class seperti di bawah ini:

<div class="comments <?php echo $class ?>” id=”comment-<?php comment_ID();?>”>

Situasi blok komentar mungkin bisa saja berbeda, tapi yang jelas, biasanya ada di semua theme wordpress. Diperhatikan saja pola-nya. Pada prinsipnya, hanya untuk menambahkan sebuah class unik di setiap blok ganjil dan genap.

Dan sudah, halas, bas, finish. Itu saja. Gampang? oh iyaaa…

Membuat style sendiri untuk admin blog

Tidak jauh berbeda dengan bagian atas, untuk bagian ini hanya perlu membutuhkan kondisi saja. Konsepnya, anda cuma butuh mencocokkan email yang anda gunakan untuk verifikasi sebagai admin.

Langkah pertama, buat dulu sebuah variabel tepat di bawah variabel $j yang sudah kita tulis di bagian atas. Lengkapnya jadi begini.

Kemudian, tinggal menaruh kondisi tepat di bawah kondisi nilai genap dan ganjil yang sudah kita buat di atas. Lengkapnya jadi begini:

Nah, langkah terakhir tinggal bagaimana kita menaruh variabel $author_class di bagian blok komentar. Tinggal edit saja bagian atas menjadi seperti ini:

Lengkapnya, jadi seperti ini:

Bagian CSS

Memanipulasi theme wordpress sudah, sekarang saatnya kita memberikan sebuah penyelesaian akhir atas manipulasi yang telah kita buat. Yang perlu diingat, akan ada 3 buat class baru yang harus kita definisikan di file style.css yang ada di theme aktif. Yaitu, class comment-1, comment-2, dan byauthor.

Buka file style.css, dan tempatkan kursor di bagian paling akhir. Tulis seperti ini:

Artinya, kita membuat blok komentar yang bernilai genap dengan background berwarna agak orange, dan blok komentar yang ganjil dengan background berwarna abu-abu terang. Sedangkan untuk si author, memberi warna abu-abu terang yang lebih gelap sedikit dari blok ganjil, serta menambahkan border di atas dan di bawah.

Ternyata memang mudah, kan? :P

Bukan sekali dua kali, setelah selesai proses design, dan setelah puas, lalu beristirahat sebentar. Setelah beberapa menit kembali di depan macbook kesayangan, ternyata hati sudah berubah. Design yang tadi sudah dibuat, seakan-akan jadi design yang paling jelek sedunia. Halah. Ganti lagi lah jadinya. Hehehe.

Nah, mumpung lagi doyan nulis, maka yang ada di kepala saya, akan saya tuliskan semua. Tak perduli sudah berapa komentar yang masuk, juga tak perduli berapa orang yang baca. Yang penting nulis aja dulu…

Export data ke Wordpress

Setelah mempelajari struktur database Wordpress, akhirnya saya memberanikan diri untuk pindah ke Wordpress. Kebetulan struktur datanya tidak banyak perbedaan dengan blog hasil buatan saya. Proses pemindahan data tidak memakan banyak waktu di kode PHP. Hanya banyak memakan waktu saat mencocokkan data dari Didats.net yang dulu ke Wordpress. Lebih tepatnya, faktor mempelajarinya itu yang butuh waktu.

Terminologi Blog Didats.net

Saya punya dua kategori utama untuk setiap post yang saya tulis. Yaitu Blog dan Sideblog. Penggunaan sideblog di sebelah kanan pada halaman depan tidak menggunakan plugin apa-apa. Hanya mengandalkan kategori Sideblog saja.

Bagaimana memisahkan antara sideblog dan post?

Saya biasanya menggunakan fungsi get_post yang ada di wordpress. Untuk menampilkan post terakhir, saya menuliskannya sebagai berikut:

Maksud dari perintah di atas adalah, “tampilkan 1 post terakhir dengan kategori id adalah 3″. Kategori ID nomor 3 sendiri adalah kategori Blog. Jadi, kategori blog adalah hal wajib ketika saya ingin menampilkannya sebagai sebuah post, bukan sebagai sideblog.

Previous Post

Untuk Previous post, saya menggunakan query_post. Tidak ada bedanya menggunakan query_posts atau get_posts. Parameter untuk menampilkan previous post adalah seperti di bawah ini:

Penjelasannya, query_post akan menghasilkan 5 buah post terakhir dengan kategori ID adalah Blog. Nah, saya menampilkan 5 post, tapi kenapa yang keluar cuma 4?

Perlu diketahui, 5 buah post terakhir, juga berarti post yang sudah saya tampilkan sebelumnya di bagian atas. Jadi, untuk tidak mengikutsertakan post terakhir, maka saya menggunakan variabel penunjuk $i.

Jadi, sebelum ada perulangan foreach, saya mendaftarkan sebuah variabel bernama i yang bernilai 0. Di dalam perulangan, saya langsung menambahkan variabel i tersebut dengan 1 (ditandai dengan $i++). Setelah adanya penambahan, saya langsung memberikan kondisi. Kondisinya, jika nilai variabel i adalah 1, maka perulangan pertama akan diabaikan, dan langsung memulai perulangan kedua.

Dan untuk menampilkan preview gambar di setiap post, saya menggunakan bahasa Regular Expression yang mengambil gambar pertama yang ada di post, dengan kode di bawah ini:

Dari kode di atas, saya mencoba untuk langsung berinteraksi dengan database menggunakan bahasa SQL. Dengan kode SQL “SELECT post_content FROM $wpdb->posts WHERE ID = $id“, maka saya akan mendapatkan isi konten dari post yang sedang diakses.

Isi kontent tersebut akhirnya saya proses untuk mencari tag image. Saya sendiri hanya mengambil tag image pertama yang ada di dalam isi konten. Lalu URL image saya masukkan ke dalam variabel $image_src.

Nah, dari situ kita bisa langsung menampilkan gambarnya dengan tag IMG, tapi terlebih dahulu kita cek, apakan gambar di temukan. Jika tidak, maka tidak perlu ditampilkan. Berikut perintahnya:

Nah, gampang kan? :p

Sideblog tanpa plugin

Untuk menampilkan sebuah sideblog tanpa menggunakan plugin, saya hanya menggunakan kode berikut ini:

Artinya, Tampilkan 8 post terakhir dari kategori ID 14. Kategori ID nomor 14 sendiri adalah Sideblog. Penggunaan sideblog tanpa plugin berarti mempermudah saya untuk mengkategorisasi setiap post yang mau saya publish.

Dan dengan banyak kostumisasi dari Wordpress, maka memungkinkan kita membuat apapun yang kita inginkan dari sebuah wordpress saja. Memang ada beberapa kelemahan, tapi saya pikir kelemahan itu bisa kita tutup dengan pengetahuan yang kita punya tentang wordpress.

Membuat form adalah hal biasa dalam sebuah pemograman web. Dan AJAX, sebagai metode yang baru-baru ini mencuat ke permukaan, menjadikan dunia web lebih beragam dan lebih dinamis. Perlu diingat, tutorial ini menggunakan bahasa pemrograman PHP.

AJAX, bukanlah sebuah bahasa sendiri. Dia hanya sebuah metode bagaimana mengirimkan data-data yang ada di sebuah form ke server tanpa melalui proses refresh. Prosesnya sendiri dikendalikan oleh browser lewat pintu belakang. Dan sebelum adanya JQuery, AJAX adalah hal yang cukup rumit diwujudkan. Ketika JQuery muncul, AJAX cuma seujung jari kelingking. Hehe… :D

HTML Form dengan CSS

Untuk mempersingkat waktu, saya tidak akan membahas HTML Form dan CSS. Karena fokus kita saat ini adalah di bagian Javascript, dan sedikit bagian server. Untuk itu, halaman HTML Form dan CSS bisa di download sendiri.

[Download HTML Form, CSS dan Loader image]

Sebagai preview HTML Form-nya yang akan kita bahas di tutorial ini, bisa dilihat di kode di bawah ini:

Langkah pertama, tambahkan JQuery line

Buka file index.html yang sudah anda download, dan tempatkan kursor anda di antara tag <head>, dan tambahkan baris yang sangat wajib jika ingin menggunakan JQuery seperti di bawah ini:

<script src="jquery.js" type="text/javascript"></script>

Langkah kedua, mulai berkreasi dengan JQuery

Setelah menambahkan baris wajib, sekarang kita butuh menambahkan baris ini. Ini juga hal yang wajib ketika menggunakan JQuery.

Bentuk umum JQuery sendiri adalah seperti ini: $(nama_objek).properti(); Nama objek, hampir sama ketika kita memperlakukan objek HTML di CSS.

$(document).ready(function() { ... }); adalah sebuah kode yang mengecek apakah sebuah halaman sudah siap untuk dikomandoi kode JQuery.

Langkah ketiga, Validasi Form

Sebelum mengirimkan dokumen, akan lebih baik jika kita memvalidasi masukan dari user terlebih dahulu. Hal ini untuk menghindari kesalahan ketika data akan diproses. Tapi tentu saja hal ini tidak akan berguna, ketika Javascript di browser user dimatikan. Dan saya sekarang ini tidak membahas tentang browser yang tanpa javascript.

Sebagai awalnya, kita akan memeriksa apakah tombol submit sudah di klik.

$("input[@name=cmdsubmit]") berarti, mencari sebuah tag input, yang mempunyai nama cmdsubmit. Ini tentunya bisa dimodifikasi menyesuaikan dengan form yang dibuat. Kata kunci click berarti menunggu sampai objek di klik. Penggunaan return false; dimaksudkan untuk tidak dulu mengirimkan data.

Validasi kosongnya inputbox

Penjelasan

Logika sederhananya, di form yang sudah saya sediakan terdapat 5 objek, yang terdiri dari 3 Input berupa teks, 1 Textarea, dan 1 tombol submit. Nah, untuk belajar memvalidasi awal, maka semua input berupa text wajib diisi.

Karena kita punya 3 input berupa teks, maka kita bisa menelusuri satu persatu objek tersebut dengan kata kunci each di JQuery seperti di bawah ini:

Karena objek yang bertipe teks ada 3, maka kita dimungkinkan mengakses 1 persatu objek dengan properti each. Setelah dapat mengakses objek masing-masing, kita sekaligus mengecek, apakah objek tersebut masih kosong dari isian user dengan baris kode di bawah ini:

Objek $(this) merujuk ke objek yang sedang di akses oleh JQuery. Properti val() berarti mengakses isi dari objek tersebut. Ketika kondisi di atas benar (yaitu, ketika isian objek teks kosong), maka kita bisa mengeluarkan peringatan dengan perintah alert. Dan perintah return false; berarti kita keluar dari peng-aksesan tiap objek teks. Ini demi meringankan beban kerja browser yang user pakai.

Sedangkan variabel i, adalah variabel penunjuk yang bisa memberitahukan kita, apakah semua form sudah di isi. Buktinya, di luar properti each, kita bisa mengecek, apakah variabel i sudah mengakses sebanyak 3 objek input teks.

Untuk sementara ini, segini dulu tutorialnya. Besok-besok di lanjut. Sudah malam ini. Mau tidooor…

Saya sendiri gag tau, apakah yang baca ngerti apa ngga. Tapi saya sudah berusaha untuk menggunakan bahasa manusia yang sebenar-benarnya. Kalau memang masih ada yang ngga ngerti, berarti itu salah saya. Ternyata saya belum bisa menjadi seorang manusia… :p

Lihat Demonya aja deh kalo gag ngerti.