Saat kita mempunyai list data yang banyak, menampilkan list secara keseluruhan dalam satu waktu tentu akan merusak kenyamanan user interface dari aplikasi yang kita buat. Saat ini mungkin kebanyakan dari anda masih menggunakan pagination sebagai alternatif jitu untuk mensiasati hal tersebut.  Pada ...

Membuat Auto Load More Data dengan Jquery dan PHP

Saat kita mempunyai list data yang banyak, menampilkan list secara keseluruhan dalam satu waktu tentu akan merusak kenyamanan user interface dari aplikasi yang kita buat. Saat ini mungkin kebanyakan dari anda masih menggunakan pagination sebagai alternatif jitu untuk mensiasati hal tersebut. 

Pada kesempatan kali ini saya akan berbagai  alternatif lain dimana list data yang kita miliki akan secara otomatis di load ketika kita scroll muse ke bawah tanpa harus ada fungsi click. Tertarik? Mari kita belajar membuatnya...

1. Langkah pertama yang harus dilakukan adalah membuat database, buat database autoload dan silahkan jalankan query di bawah ini:

-- Dumping structure for table autoload.berita
CREATE TABLE IF NOT EXISTS `berita` (
  `id_berita` int(3) NOT NULL AUTO_INCREMENT,
  `judul_berita` varchar(100) NOT NULL,
  `isi` text NOT NULL,
  PRIMARY KEY (`id_berita`)
) ENGINE=MyISAM AUTO_INCREMENT=34 DEFAULT CHARSET=latin1 ROW_FORMAT=DYNAMIC;

2. Setelah databse siap, kita buat konfigurasinya sebagai berikut:

<?php
$db_username 	= 'root';
$db_password 	= '';
$db_name 	= 'autoload';
$db_host 	= 'localhost';
$items_per_group = 5;
$mysqli = new mysqli($db_host, $db_username, $db_password,$db_name);
?>

3. Buat halaman index.php yang akan kita jadikan view list data dari database.
Sebelum kita menambahkan kode jquery, kita harus mengetahui jumlah record data yang akan ditampilkan, kemudian membagi jumlah per groupnya, berapa data yang ingin kita tampilkan dalam satu kali load.

<?php
include("config.php");
$results = $mysqli->query("SELECT COUNT(*) as t_records FROM berita");
$total_records = $results->fetch_object();
$total_groups = ceil($total_records->t_records/$items_per_group);
$results->close(); 
?>

Setelah itu baru kita masukkan kode jquery berikut, dimana fungsi click() kita ubah menjadi fungsi scroll().

<script type="text/javascript">
$(document).ready(function() {
	var track_load = 0; //jumlah record data yang akan di load per mouse scroll
	var loading  = false; //to prevents multipal ajax loads
	var total_groups = <?php echo $total_groups; ?>; //jumlah record data
	
	$('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;});
	
	$(window).scroll(function() { //detect page scroll
		
		if($(window).scrollTop() + $(window).height() == $(document).height())  //fungsi saat user scroll mouse kebawah
		{
			
			if(track_load <= total_groups && loading==false) //jika masih ada data yang harus di load
			{
				loading = true; //ajax loader
				$('.animation_image').show(); //menampilkan loader image
				
				//load data dari server menggunakan HTTP POST request
				$.post('autoload_process.php',{'group_no': track_load}, function(data){
									
					$("#results").append(data); //menambahkan data ke id result

					//menyembunyikan loader image
					$('.animation_image').hide();
					
					track_load++; 
					loading = false; 
				//error handling
				}).fail(function(xhr, ajaxOptions, thrownError) { 
					
					alert(thrownError); //alert HTTP error
					$('.animation_image').hide();
					loading = false;
				
				});
				
			}
		}
	});
});
</script>

Kemudian kita tambahkan kode html, Kode HTML berikut harus ditempatkan dalam tag body halaman, hasilnya akan muncul dalam elemen result, dan animasi loading akan muncul hanya ketika pengguna men scroll mouse ke bawah.

<body>
<ol id="results">
</ol>
<div class="animation_image" style="display:none" align="center"><img src="ajax-loader.gif"></div>
</body>

4. Buat autoload_process.php 

Buat file PHP dengan kode di bawah ini, ketika jumlah group akan diteruskan ke "autoload_process.php" menggunakan jQuery post method (), kita perlu titik awal, dan jumlah record untuk ditampilkan per group. MySQL LIMIT dapat digunakan untuk membatasi hasil query, gunakan dua parameter untuk menentukan pada posisi berapa banyak data yang sudah di load, dan berapa banyak data yang akan di load per satu kali mouse scroll.

<?php
include("config.php"); //include config file

if($_POST)
{
	//sanitize post value
	$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
	
	//throw HTTP error if group number is not valid
	if(!is_numeric($group_number)){
		header('HTTP/1.1 500 Invalid number!');
		exit();
	}
	
	//get current starting point of records
	$position = ($group_number * $items_per_group);
	
	//Limit our results within a specified range. 
	$results = $mysqli->query("SELECT * FROM berita ORDER BY id_berita ASC LIMIT $position, $items_per_group");
	
	if ($results) { 
		//output results from database
		
		while($obj = $results->fetch_object())
		{
			echo '<li id="item_'.$obj->id_berita.'"><strong>'.$obj->judul_berita.'</strong></span> &mdash; <span class="page_message">'.$obj->isi.'</span></li>';
		}
	
	}
	unset($obj);
	$mysqli->close();
}
?>

Semoga bermanfaat...


About Author

Dimas Agung Noviyanto


Comment & Discussions

  • Boy Kurniawan
    Terima kasig ms dimas.. Tutorial nya

  • Please LOGIN before if you want to give the comment.