Tutorial PHP + jQuery : Membuat Fitur “Load More” Dengan PHP dan jQuery

Cuaca akhir-akhir ini memang agak berbeda dari yang biasanya. Saat siang hari cuacanya panas bukan main, ditambah ada mata kuliah yang gak nyantol sama sekali di otak, dijamin tambah gerah + bawaannya pengen nyemplung ke bak mandi. Malam harinya juga begitu, membuat saya yang terbiasa kerja malam menjadi tidak fokus ke pekerjaan. Nah…ngomong-ngomong masalah kerjaan, kemarin saya sempat menemui sebuah studi kasus yang tidak jauh-jauh dari dunia web. Saya diminta untuk membuat sebuah fitur “load more/load older content” seperti yang kita sering lihat di Facebook maupunTwitter. Dimana tampilan sebuah deretan content dibatasi dalam jumlah tertentu, dan ketika pengguna ingin melihat content yang terdahulu, mereka bisa meng-klik link load older content yang terdapat di bawah content terakhir tanpa refresh/berpindah halaman. Dulu saya pernah membuat yang seperti itu dengan javascript buatan sendiri. Ruwet deh pokoknya dan saya pun malas untuk melihatnya lagi :D. Akhirnya saya menggunakan jQuery, yang sangat membantu terutama fungsi .append() yang dimilikinya dan saya implementasikan dengan CodeIgniter. Kali ini saya akan membagikan sedikit tutorial sederhana cara pembuatannya tanpa CodeIgniter, yang intinya sama saja dengan yang memakai CodeIgniter.

1. Disini saya mengambil contoh sebuah content dari tabel berita. Buka text editor kesayangan rekan-rekan, buat sebuah file dengan nama index.php. Kita tampilkan dahulu beberapa cuplikan daftar berita yang terbaru, disini saya batasi sebanyak 5 berita. Pada setiap barisnya, saya berikan kode untuk menentukan id_berita terakhir. Sehingga bisa ditentukan id_berita selanjutnya  yang akan ditampilkan ketika link load more di-klik.

<div id="content">
	<?php
		include('koneksi.php');
		$query = 'SELECT * FROM berita ORDER BY id_berita DESC LIMIT 0,5';
		$hasil = mysql_query($query);
		while($r = mysql_fetch_array($hasil)) {
			$isi = strip_tags(substr($r['isi_berita'],0,300));
			echo '<div class="baris" kode="'.$r['id_berita'].'"><b>'.$r['judul'].'</b><br>
			<span class=date>'.$r[hari].', '.$r[tanggal].' - '.$r[jam].' WIB</span><br>
			<img src="berita/small_'.$r['gambar'].'" class="img">
			'.$isi.'.... <b>[Baca Selengkapnya]</b><br>
			</div>';
		}
	?>
</div>
<div style="display:none;"><center><img src="images/loading.gif" /></center></div>
<br/>
<div id="lihat"><center>Lihat Berita Terdahulu</center></div>
</div>

2. Sekarang kita definisikan fungsi-fungsi dari jQuery yang akan digunakan untuk memanggil berita yang lainnya via AJAX.

	<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#lihat").click(function (){
		    	$('#lihat').html('<center><img src="images/loading.gif" /></center>');
				$.ajax({
					url: "konten.php?urut=" + $(".baris:last").attr("kode"),
					success: function(html){
						if(html){
							$("#content").append(html);
							$('#lihat').html('<center>Lihat Berita Terdahulu</center>');
						}else{
							$('#lihat').replaceWith('<div id="lihat"><center>Tidak Ada Berita</center></div>');
						}
					}
				});
		    });
		});
	</script>

3. Disini saya pisahkan script PHP untuk mengambil daftar berita selanjutnya, dan dari file index.php cukup mengirimkan sebuah parameter GET yang berupa id_berita dari baris yang terakhir. Buat file baru dengan nama konten.php, dan ketikkan script PHP di bawah ini.

<?php
include('koneksi.php');
if($_GET['urut']){
	$query = 'SELECT * FROM berita WHERE id_berita < "'.$_GET['urut'].'" ORDER BY id_berita DESC LIMIT 0,5';
	$hasil = mysql_query($query);
		while($r = mysql_fetch_array($hasil)) {
			$isi = strip_tags(substr($r['isi_berita'],0,300));
			echo '<div class="baris" kode="'.$r['id_berita'].'"><b>'.$r['judul'].'</b><br>
			<span class=date>'.$r[hari].', '.$r[tanggal].' - '.$r[jam].' WIB</span><br>
			<img src="berita/small_'.$r['gambar'].'" class="img">
			'.$isi.'.... <b>[Baca Selengkapnya]</b><br>
			</div>';
		}
}
?>

4. Yang terakhir, tidak lengkap rasanya jika belum menambahkan CSS. Biar lebih sedap lah kalau dipandang :D.

	<style>
		body{
		margin:40px;
		font-family:Arial;
		font-size:12px;
		}
		#content{
		margin:0px auto;
		width:500px;
		padding:10px;
		border:1px dashed #666666;
		}
		.baris{
		padding:10px;
		border-bottom:1px dashed #666666;
		}
		.img{
		padding:2px;
		border:1px solid #666666;
		float:left;
		width:60px;
		margin:5px;
		}
		#lihat{
		margin:0px auto;
		padding:10px;
		border:1px dashed #666666;
		background-color:#FF9900;
		cursor:pointer;
		width:500px;
		}
		.date {
		font-size: 10px;
		line-height: 135%;
		font-style: italic;
		}
	</style>

Gampang kan cara pembuatannya…??? Di bawah ini sudah saya sediakan contoh hasil jadi + link untuk men-download source code akhirnya. Semoga bisa membantu rekan-rekan yang kebetulan sedang menemui studi kasus yang serupa.

Happy Blogging and Keep Coding

Cheerrrss….!!!!

[to_like][/to_like]