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]Download Aplikasi[/to_like]

12 comments

    • Gede Lumbung Post authorReply

      masuk k gudang download aja bos, kalo link nya gak muncul
      biasanya link gak muncul padaha udah di like, itu gara2 koneksinya lemot

  1. hacker Reply

    ahhh kalo niatnyya mau nolong ya jangan di bikin susah downlodnya… kasian anak2 yang pada mau belajar apa susahnya bagi2 ilmu toh ilmu semuanya akan kembali pada ALLAH SWT.

    • Gede Lumbung Post authorReply

      ini udah bagi ilmu brow…
      apalah artinya cuma nyetor like doang ke blog ane..
      mungkin kalo di tempat lain ente disuruh nyetor duit dlu :p

  2. jack separow Reply

    mantab gan
    request gan maklum msih bner2 amatir,tutorial bkin 1file index yg berisi dari bbrp halaman 😀

  3. danny Reply

    mohon semua tutorial itu demonya dipasang bener2 dong mas,
    itu saja saran saya.

    • Gede Lumbung Post authorReply

      karena keterbatasan space hosting, gak semua bisa saya upload
      anda siap donasi hosting???
      saya dengan senang hati menerimanya,,

      mari sama-sama memberikan feedback

  4. Nauval Azhar Reply

    mantap om akhirnya nemu juga yang kaya gini …

    walaupun harus like dulu pas donlot kaga ada masalah …. 😀

  5. Andre Reply

    gan boleh minta engak source code untuk codeigniternya, saya kebingungan menerapkannya pada ci gan, thank, kalau boleh kirim ke email ane ya gan thank, mr_coba@yahoo.co.id

Leave a Reply

Your email address will not be published. Required fields are marked *