Ada lagi yang menarik dari WSI ini, dia menyediakan forum member yang konsepnya mirip-mirip media sosial. Bisa chating, sharing file dan kirim pesan ke sesama member dll. Sehingga membuat siswa tidak bosan untuk berkunjung. Namun ada beberapa kelemahan yang membuat website ini tidak SEO friendly. Dalam pengalamatannya website ini belum mengakomodasi permalink. Adapun untuk pengembangannya, cms ini tergolong agak rumit bagi pemula. Ditambah kustomasi dan dukungan pengembangan template yang masih belum populer membuat cms ini terlihat biasa-biasa saja. Padahal jika dikembangkan lebih jauh, cms ini akan menarik perhatian banyak kalangan yang ingin memngembangkan website sekolah. Walaupun demikian, salute tetap harus kita berikan kepada tim pengembang website ini. Salam sukses.., semoga cms indonesia semakin berkembang.

Kali ini saya ingin berbagi tentang bagaimana cara mempercantik navigasi paging pada lokomedia. Referensi tulisan ini saya dapatkan dari http://www.webdistortion.com/2008/10/27/26-pager-styles-from-around-the-web-css-images-and-html/. Disana terdapat banyak style paging yang digunakan oleh berbagai web terkenal seperti yahoo, digg, wordpress, facebook dll.

Style yang akan saya gunakan dalam tulisan saat ini adalah seperti digg.com, download css dan html filenya dari web referensi diatas. Ambil file css-nya dan copykan ke folder css template ubah dengan nama paging.css

/* Page Numbers */
.pages {
font: 83%/1.4 arial, helvetica, sans-serif;
padding: 1em;
margin: 1em 0;
clear: left;
font-size: 85%;
}

.pages a, .pages span {
color:#003366;
display: block;
float: left;
padding: 0.2em 0.5em;
margin-right: 0.1em;
border: 1px solid #fff;
background: #fff;
}

.pages span.current {
border: 1px solid #2E6AB1;
font-weight: bold;
background: #2E6AB1;
color: #fff;
}

.pages a {
border: 1px solid #9AAFE5;
text-decoration: none;
}

.pages a:hover {
border-color: #2E6AB1;
}

.pages a.nextprev {
font-weight: bold;
}

.pages span.nextprev {
color: #666;
}

.pages span.nextprev {
border: 1px solid #ddd;
color: #999;
}

.pages .nextprev-next {
float: right;
}

Panggil paging.css ini dengan menambahkan kode @import url(paging.css); pada style.css. Ini berfungsi agar file paging.css dapat bekerja. Yang tidak boleh ketinggalan adalah kita mengedit class_paging.php pada folder config. Untuk percobaan kita akan mengubah style paging pada halaman semua berita, yang pada design defaultnya ini terletak di class paging2.

Hilangkan semua karakter “|” pada class paging2.
Tambahkan class pada link first prev pada saat aktif

$link_halaman .= “<a href=halberita-1.html><< First</a>

menjadi

$link_halaman .= “<a href=halberita-1.html class=’nextprev’><< First</a>

tambahkan juga class untuk link prev-nya

Tambahkan class pada saat link first prev disable yaitu pada saat halaman 1 aktif

<< First

menjadi

<span class=’nextprev’><< First</span>

berikan juga class=nextprev untuk link prev-nya.

Tambahkan class untuk titik tiga apabila halaman aktifnya lebih dari 3

$angka = ($halaman_aktif > 3 ? ” … ” : ” “);

menjadi

$angka = ($halaman_aktif > 3 ? “<span class=’nextprev’>…</span>” : ” “);

Berikan juga class buat halaman aktif

 $angka .= ” <b>$halaman_aktif</b> | “;

menjadi

$angka .= ” <span class=’current’><b>$halaman_aktif</b></span>”;

Untuk membuat link angka ubah

 $angka .= ($halaman_aktif+2<$jmlhalaman ? ” … | <a href=halberita-$jmlhalaman.html>$jmlhalaman</a> | ” : ” “);

menjadi

$angka .= ($halaman_aktif+2<$jmlhalaman ? “<span class=’nextprev’>…</span><a href=halberita-$jmlhalaman.html>$jmlhalaman</a> ” : ” “);

Sekarang beralih ke navigasi next last, sama seperti first prev. Jika dalam keadaan aktif

$link_halaman .= ” <a href=halberita-$next.html>Next ></a> |

menjadi

$link_halaman .= ” <a href=halberita-$next.html class=’nextprev’>Next ></a>

Juga dengan navigasi Last. Terakhir adalah navigasi next last disable yaitu pada saat halaman yang aktif adalah halaman terakhir

$link_halaman .= ” Next > | Last >>”;

menjadi

$link_halaman .= ” <span class=’nextprev’>Next ></span> <span class=’nextprev’> Last >></span>”;

Kode lengkapnya :

<?php
// class paging untuk halaman berita (menampilkan semua berita)
class Paging2{
// Fungsi untuk mencek halaman dan posisi data
function cariPosisi($batas){
if(empty($_GET['halberita'])){
$posisi=0;
$_GET['halberita']=1;
}
else{
$posisi = ($_GET['halberita']-1) * $batas;
}
return $posisi;
}

// Fungsi untuk menghitung total halaman
function jumlahHalaman($jmldata, $batas){
$jmlhalaman = ceil($jmldata/$batas);
return $jmlhalaman;
}

// Fungsi untuk link halaman 1,2,3
function navHalaman($halaman_aktif, $jmlhalaman){
$link_halaman = “”;

// Link ke halaman pertama (first) dan sebelumnya (prev)
if($halaman_aktif > 1){
$prev = $halaman_aktif-1;
$link_halaman .= “<a href=halberita-1.html class=’nextprev’><< First</a>
<a href=halberita-$prev.html class=’nextprev’>< Prev</a>”;
}
else{
$link_halaman .= “<span class=’nextprev’><< First</span><span class=’nextprev’>< Prev </span> “;
}

// Link halaman 1,2,3, …
$angka = ($halaman_aktif > 3 ? “<span class=’nextprev’>…</span>” : ” “);
for ($i=$halaman_aktif-2; $i<$halaman_aktif; $i++){
if ($i < 1)
continue;
$angka .= “<a href=halberita-$i.html>$i</a>  “;
}
$angka .= ” <span class=’current’><b>$halaman_aktif</b></span>”;

for($i=$halaman_aktif+1; $i<($halaman_aktif+3); $i++){
if($i > $jmlhalaman)
break;
$angka .= “<a href=halberita-$i.html>$i</a>  “;
}
$angka .= ($halaman_aktif+2<$jmlhalaman ? “<span class=’nextprev’>…</span><a href=halberita-$jmlhalaman.html>$jmlhalaman</a> ” : ” “);

$link_halaman .= “$angka”;

// Link ke halaman berikutnya (Next) dan terakhir (Last)
if($halaman_aktif < $jmlhalaman){
$next = $halaman_aktif+1;
$link_halaman .= ” <a href=halberita-$next.html class=’nextprev’>Next ></a>
<a href=halberita-$jmlhalaman.html class=’nextprev’>Last >></a> “;
}
else{
$link_halaman .= ” <span class=’nextprev’>Next ></span> <span class=’nextprev’> Last >></span>”;
}
return $link_halaman;
}
}

?>

Jangan lupa juga memberi properti div pada link halaman dalam file kiri.php tepatnya di module semua berita.

 echo “Hal: $linkHalaman <br /><br />”;

jadi

echo “<div class=’pages’> $linkHalaman </div><br />”;

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/’ . 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.

Langkah 1 :

Buat tabel untuk menyimpan database menu di MYSQL

CREATE TABLE `menu` (
`id` tinyint(3) unsigned NOT NULL auto_increment,
`parent_id` tinyint(3) unsigned NOT NULL default ’0′,
`title` varchar(100) collate latin1_general_ci NOT NULL,
`url` varchar(100) collate latin1_general_ci NOT NULL default ”,
PRIMARY KEY  (`id`)
)

Langkah 2 :

Masukkan source code berikut ke dalam template lokomedia mereplace source code menu sebelumnya

<ul>
<?php
$main=mysql_query(“SELECT * FROM menu WHERE parent_id=0″);

while($r=mysql_fetch_array($main)){
echo “<li><a href=’$r[url]‘><span>$r[title]</span></a>”;
$sub=mysql_query(“SELECT * FROM menu WHERE parent_id=$r[id]“);
$jml=mysql_num_rows($sub);
// apabila sub menu ditemukan
if ($jml > 0){
echo “<div><ul>”;
while($w=mysql_fetch_array($sub)){
echo “<li><a href=’$w[url]‘><span>» $w[title]</span></a>”;
$sub2=mysql_query(“SELECT * FROM menu WHERE parent_id=$w[id]“);
$jml2=mysql_num_rows($sub2);
// apabila submenu 2 ditemukan
if ($jml > 0){
echo “<div><ul>”;
while($x=mysql_fetch_array($sub2)){
echo “<li><a href=’$x[url]‘><span>» $x[title]</span></a></li>”;
}
echo “</ul></div>
</li>”;
}
else {
echo”</li>”;
}
}
echo “</ul></div>
</li>”;
}
else{
echo “</li>”;
}
}
?>
</ul>

Untuk modul manajemen menu pada administrator bisa di download disini. Jangan lupa untuk menambahkan kode di content.php pada folder admin web untuk menampilkan modul menu. Sekarang silakan dicoba menu drop downnya. Semoga bisa jadi solusi.