Load postingan blog dengan jQuery ajax event scroll down

 Author : hadinug, 31 March, 2014, Komentar


Kali ini penulis akan menuliskan bagaimana memuat isi postingan blog pada halaman web ketika kita menscroll kebawah window. Masih terinspirasi dari facebook dan beberapa sosial media lainnya, kali ini kita akan belajar bagaimana membuat postingan blog terload ketika scroll halaman web di turunkan ke bawah.


Pada tutorial kali ini penulis menggunakan jQuery ajax untuk menampilkan isi postingan ketika window scroll down. Nah bagaimana prosesnya?, mari kita mulai step by step.


Koneksi database.

Tutorial kali ini menggunakan library php mysqli untuk database. Lihat tutorial mysqli yang saya tulis sebelum nya disini. Di file koneksi kita definisikan jumlah item group yang akan di tampilkan. Dalam kasus ini adalah 5 buah list post.



$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); 


jQuery - event scroll down

Nah di halaman index.php kita tulis script jquery untuk event scroll down. Diawal postingan kita tampilkan sejumlah item group yang kita definisikan di file config dan jumlah track kita tambah satu. Nah jumlah track lebih besar dari jumlah group data postingan yang ada di database, makan permintaan akan sebuah data dari database akan diproses, ketika window di scroll ke bawah.


 <script type="text/javascript">
            $(document).ready(function() {
                var track_load = 0; //total record
                var loading = false; // untuk menahan multiple ajax load
                var total_groups = <?php echo $total_groups; ?>; //jumlah record

                $('#results').load("process.php", {'group_no': track_load}, function() {
                    track_load++;
                }) //load diawal

                $(window).scroll(function() { //mendeteksi halaman yang discroll

                    if ($(window).scrollTop() + $(window).height() == $(document).height())  //user mengscroll kebwah?
                    {

                        if (track_load <= total_groups && loading == false) //jika masih ada data yang bisa di load
                        {
                            loading = true; // ajax loading
                            $('.animation_image').show(); // menampilkan loading image

                            //menampilkan data dengan HTTP post 
                            $.post('process.php', {'group_no': track_load}, function(data) {

                                $("#results").append(data); //menambahkan data yang diperoleh ke elemen

                                //menyembunyikan gambar loading ketika data sudah di peroleh dan ditampilkan di elemen
                                $('.animation_image').hide();

                                track_load++; //tambah trackload +1
                                loading = false;

                            }).fail(function(xhr, ajaxOptions, thrownError) {

                                alert(thrownError); //alert with HTTP error
                                $('.animation_image').hide(); //hide loading image
                                loading = false;

                            })
                        }
                    }
                })
            })
 </script>


PHP Proses

Permintaan data ke database akan di proses pada file process.php, dimana pada halaman index yang berisi jQuery, mengirimkan jumlah group yang diminta jumlah group yang tersedia adalah (jumlah record / jumlah item pergroup)


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


if($_POST)
{	 
	$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
	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 id,name,message FROM paginate ORDER BY id ASC LIMIT $position, $items_per_group");
	
	if ($results) { 
		//output results from database
		
		while($obj = $results->fetch_object())
		{
			echo '<li id="item_'.$obj->id.'">'.$obj->id.' - <strong>'.$obj->name.'</strong></span> &mdash; <span class="page_message">'.$obj->message.'</span></li>';
		}
	
	}
	unset($obj);
	$mysqli->close();
} 

download file nya dan coba di localhost anda. Semoga bermanfaat, dan bantu share ya keteman-teman lainnya



 
Bagikan halaman ke sosial media
 
Tags :   jquery    php    scrolldown       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda