Paging Navigasi Frontpage Lokomedia Menggunakan Ajax

Kemarin kita sudah membahas paging navigasi pada halaman home pada lokomedia tanpa menggunakan jquery.  Kali ini akan kita kembangkan lagi paging tersebut dengan menggunakan jquery. Kelebihan dari teknik ini adalah kita tidak perlu mengotak-atik file .htaccess yang kita miliki. Karena dalam setiap kita berpindah halaman, URL-nya tidak berubah sama sekali. Uniknya lagi kita bisa melihat dan menggunakan animasi loading yang menawan dalam setiap pindah halaman. Saya mendapatkan source code paging ini di sini. Namun saya juga sudah modifikasi agar bisa dipakai pada template lokomedia. Salah satunya mari kita coba terapkan script ini dalam template sandbox yang kita miliki.

Sebenarnya dari beberapa file yang ada hanya dua file yang perlu kita modifikasi, yakni  index.php dan data.php. Namun disini kita akan coba memilah-milah script tersebut untuk dimasukkan kedalam file-file yang sesuai  dengan template sandbox. Langkah pertama kita buat dahulu file frontpage.php dengan memodifikasi file data.php. File ini berfungsi untuk memanggil data dari database yang kita miliki. Letakkan file ini pada root website kita. Script modifikasinya seperti ini :

<?php
include("config/koneksi.php");
include("config/fungsi_indotgl.php");
$template = "http://localhost/lokomedia/templates/sandbox";
$batas = 3;
$jmldata = mysql_num_rows(mysql_query("SELECT * FROM berita"));
$halaman = $_REQUEST['halaman'];
$posisi = ($halaman-1)* $batas;
$sebelum = mysql_query("SELECT COUNT(komentar.id_komentar) AS jml, judul, judul_seo, jam, 
                                berita.id_berita, hari, tanggal, gambar, isi_berita    
                                FROM berita LEFT JOIN komentar 
                                ON berita.id_berita = komentar.id_berita
                                AND aktif = 'Y' 
                                GROUP BY berita.id_berita DESC LIMIT ".$posisi.",".$batas."");	
        while($t = mysql_fetch_array($sebelum)) { ?>
                <div id="post">
                <?php
                // Apabila ada gambar dalam berita, tampilkan
                if ($t['gambar']!='') {
                ?>
                    <a class="thumb" href="berita-<?php echo $t[id_berita] ?>-<?php echo $t[judul_seo] ?>.html">
                    <img src="<?php echo $template ?>/script/timthumb.php?src=foto_berita/<?php echo $t[gambar] ?>&amp;w=150&amp;h=105">
                    </a>
                <?php } ?>
                <div class="content">
                    <h3>
                    <a class="ease" href="berita-<?php echo $t[id_berita] . '-' .$t[judul_seo] ?>.html"><?php echo $t[judul] ?></a>
                    </h3>
                <?php
                    $tgl = tgl_indo($t['tanggal']);
                    echo '<div class="post-meta">';
                    echo $t[hari] .', ' . $tgl . ' - ' . $t[jam] .' WIB | ' . $t[jml] .' Komentar';
                    echo '</div>';
                    // Tampilkan hanya sebagian isi berita
                    $isi_berita = htmlentities(strip_tags($t['isi_berita'])); // membuat paragraf pada isi berita dan mengabaikan tag html
                    $isi = substr($isi_berita,0,180); // ambil sebanyak 180 karakter
                    $isi = substr($isi_berita,0,strrpos($isi," ")); // potong per spasi kalimat
                ?>
                    <p><?php echo $isi ?>... <a class="ease" href="berita-<?php echo $t[id_berita] . '-' .$t[judul_seo] ?>.html">Selengkapnya &rarr;</a></p>
                </div><!-- END #post .content -->
            </div><!-- END #post -->
			<?php
			}
?>


<script type="text/javascript">
$(document).ready(function(){	
	var Timer  = '';
	var selecter = 0;
	var Main =0;	
	bring(selecter);	
});

function bring ( selecter ){	
	$('div#post:eq(' + selecter + ')').stop().animate({
		opacity  : '1.0',		
	},300,function(){		
		if(selecter < 6){
			clearTimeout(Timer); 
		}
	});
	
	selecter++;
	var Func = function(){ bring(selecter); };
	Timer = setTimeout(Func, 20);
}

</script>

Lalu modifikasi lagi file content.php tepatnya pada module home menjadi seperti ini :

$batas = 3;
$jmldata = mysql_num_rows(mysql_query("SELECT * FROM berita"));
$halaman = $_REQUEST['halaman'];
$jmlhalaman = ceil($jmldata/$batas);
echo'<div id=content><div class="search-background">
			<label><img src="loader.gif" alt="loader" /></label>
		</div>	
		<div id="frontpage">
		&nbsp;
		</div>		
	<div class="light">
        <div class="pageNavi">';
		//Show page links
		for($i=1; $i<=$jmlhalaman; $i++)
		{
			echo '<a id="'.$i.'" href="#">'.$i.'</a>';
		}
		echo'</div></div></div>';

Setelah itu jangan lupa untuk memanggil jquery yang kita punya dan sisipkan javascript berikut pada file header.php.

<script type="text/javascript">
$(document).ready(function(){	
	function showLoader(){	
		$('.search-background').fadeIn(200);
	}	
	function hideLoader(){	
		$('.search-background').fadeOut(200);
	};	
	$(".pageNavi a").click(function(){		
		showLoader();
		$("#frontpage").load("frontpage.php?halaman=" + this.id, hideLoader);		
		return false;
	});	
	showLoader();
	$("#frontpage").load("frontpage.php?halaman=1", hideLoader);	
});
</script>

Sampai disini paging dengan jquery sudah dapat berjalan, tinggal meletakkan gambar loader.gif pada folder root agar ketika loading terdapat animasi. Dengan sedikit sentuhan css kita bisa membuat loader berada pada posisi yang kita inginkan.

.search-background {
	display: none;
	font-size: 13px;
	font-weight: bold;
	height:160px;
	position: absolute;
	padding-top:150px;
	padding-left:280px;
	opacity:0.5;filter: alpha(opacity=50) ;
	text-decoration: none;
	color:#FFFFFF;
	text-shadow: #fff 0px 0px 20px;
	}
	
search-background label{	

	border:solid #66FF00 1px;
}

Kira-kira sepert ini screen shoot-nya