Avatar Komentar dengan Gravatar pada CMS Lokomedia


Akan lebih keren jika halaman komentar pada  lokomedia disisipi dengan gambar avatar. Gravatar (Global Recognized Avatar) adalah pilihan tepat untuk ditampilkan pada halaman komentar CMS lokomedia, Seperti avatar yang sering ditampilkan pada website dan blog pada umumnya. Untuk mendapatkan avatar tersebut hanya butuh email valid dari pengirim komentar. Sehingga jika email pengirim komentar valid dan sudah terintegrasi dengan gravatar maka akan ditampilkan gambar avatar si pengirim komentar.

Kalau kita perhatikan form komentar pada lokomedia terdiri dari 4 inputan, nama, website, komentar, dan captcha. Lha terus gimana cara kita tahu alamat email pengirim komentar ? 😦 . Tenang saja..! Supaya tidak banyak modifikasi kita gunakan saja kolom website menjadi kolom isian email pengirim komentar. Yang tentunya kolom isian ini tidak ada fungsi validasi email (untuk validasi email kita akan bahas lain waktu) dan tidak diwajibkan bagi pengirim untuk mengisinya. Karena hanya kolom nama, komentar dan captcha yang diberi validasi recuired. Kita abaikan dulu itu semua. Intinya sekarang kita cuma akan belajar bagaimana menampilkan avatar dari gravatar ke website kita.

Gravatar menampilkan avatar dengan cara mengenkripsi email, apakah ada gambar yang sesuai dengan enkripsi email tersebut. Apabila tidak ada gambar yang sesuai maka gravatar akan menampilkan gambar default yang biasanya hanya kotak biru dengan huruf G terbalik ke atas. Begitulah logika kode untuk menampilkan gravatar ini.

$grav_url = ‘http://www.gravatar.com/avatar/’ . md5( strtolower( trim( $s[url] ) ) ) . ‘?d=’ . urlencode( $default ) . ‘&s=’ . $size;

Supaya lebih jelas sebaiknya lihat langsung ke gravatar saja, disitu djelaskan bagaimana mengenkripsi, mendapatkan image, menentukan ukuran dan membuat image default. Dari kode di atas enkripsi hash dilakukan terhadap email yang ada di database komentar kolom url. $default adalah variabel gambar default yang kita tentukan. Jadi sebenarnya gravatar memperbolehkan kita membuat avatar devault sesuai keinginan kita (dengan memberikan nilai $default = url_gambar_kita_sendiri. Sedangkan $size adalah ukuran gambar yang diinginkan.

Berikut kode halaman komentar yang sudah saya buat untuk lokomedia templates eljquery. Halaman ini dibuat dengan menggunakan table tanpa mengubah css sedikitpun. Setidaknya ini menjadi dasar untuk belajar teknik yang jauh lebih rumit lagi. Buka file kiri.php, dan cari modul detail berita. Replace kode komentar berita dengan kode berikut :

// Komentar berita
$sql = mysql_query(“SELECT * FROM komentar WHERE id_berita=’$_GET[id]’ AND aktif=’Y’ LIMIT $posisi,$batas”);
$jml = mysql_num_rows($sql);
$size = 60;
// Apabila sudah ada komentar, tampilkan
if ($jml > 0){
echo “<table celspacing=’6px’ width=’100%’>”;
while ($s = mysql_fetch_array($sql)){
$tanggal = tgl_indo($s[tgl]);
$grav_url = ‘http://www.gravatar.com/avatar/&#8217; . md5( strtolower( trim( $s[url] ) ) ) . ‘?d=’ . urlencode( $default ) . ‘&s=’ . $size;;
echo”<tr><td style=’padding:5px;’ width=’180px’ valign=’top’><img src=’$grav_url’ alt=” /><br><b>$s[nama_komentar]</b><br>$tanggal – $s[jam_komentar] WIB</td>
<td bgcolor=’#F4F3EF’ style=’padding:5px;’ valign=’top’>$s[isi_komentar]</td>
</tr>”;
}
echo “</table>”;

$jmldata     = mysql_num_rows(mysql_query(“SELECT * FROM komentar WHERE id_berita=’$_GET[id]’ AND aktif=’Y'”));
$jmlhalaman  = $p->jumlahHalaman($jmldata, $batas);
$linkHalaman = $p->navHalaman($_GET[‘halkomentar’], $jmlhalaman);
echo “$linkHalaman”;
}

Jangan lupa untuk mengubah form komentar, yang semula adalah website dirubah dengan email. Untuk database tidak perlu kita otak-atik, karena kita hanya mengalihfungsikan website menjadi email tanpa validasi.

Advertisements

One thought on “Avatar Komentar dengan Gravatar pada CMS Lokomedia

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.