Cara Membuat Infinite Scroll Dengan jQuery dan PHP

Cara Membuat Infinite Scroll Dengan jQuery dan PHP - Infinite Scroll adalah halaman tak berujung tanpa batas, meskipun anda tetap menscroll halaman tidak akan ada ujungnya sampai menyetuh batas terakhir konten atau hal ini biasa di sebut dengan autopagerize. Sebenarnya bukan halamannya lah yang tidak memiliki batas melainkan ketika kita mencapai bawah atau titik tertentu javascript di jquery akan langsung meload konten baru dan meletakannya di bawah konten terakhir, hal ini akan terus di lakukan hingga tidak ada lagi konten yang dapat di load.

Sebagai contoh jika anda pernah menggunakan facebook ( ya pasti pernah lahhh bkakakak ) di beranda jika anda menscroll ke bawah halaman akan terus meload status baru terus menerus tanpa ada batasnya.

Lalu bagai manakah cara membuatnya ? langsung saja disini kita akan belajar Cara Membuat Infinite Scroll Dengan jQuery dan PHP

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

PHP

Kenapa pake PHP ? nah, sebenernya tanpa PHP pun kita bisa membuat infinite scroll tapi untuk memudahkan kalian nanti apabila ingin mengaplikasikannya langsung di website kalian jadi disini saya langsung menggunakan PHP. Yang namanya konten website nantinya kan harus dinamis jadi data yang di load nantinya akan berasal dari database jadi kita harus menggunakan PHP, tapi pada kali ini kita tidak akan menggunakan database tetapi hanya menggunakan PHP.

Buatlah sebuah folder baru di webserver anda ( karena disini kita menggunakan PHP jadi wajib mesti kudu harus ada webservernya ) buatlah folder dengan nama infinite_scroll kemudian buatlah sebuah file PHP baru dengan nama load_content.php dengan isi script seperti berikut :

<?php 
 $id = $_GET['id'];
 echo '<li>Content '.$id.'</li>';
?>

File ini yang nantinya akan di panggil oleh jQuery untuk konten selanjutnya apabila halaman di scroll.

CSS

Agar terlihat lebih menarik kita buat sebuah file CSS baru di dalam folder yang sama dengan nama style.css masukan script berikut :

<style>
html { font-size: 100%;  }
body { 
  font-size: 16px;
  background: #0172c6;
  color: #fff;
}

.wrapper {
  max-width: 65%;
  margin: auto;
}


h2 { 
  color: #fff;  
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  display: block;
  text-align: Center;
}

h1 { 
  color: #fff; 
  margin: 3rem 0 1rem 0; 
  padding: 0;
  font-size: 1.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  display: block;
  text-align: Center;
}
.items li{
 list-style: none;
 width: 100%;
 background: #fff;
 color: #0172c6;
 text-align: center;
 font-size: 40px;
 margin-bottom :10px;
}
</style>

jQuery

Anda dapat mengunduh jQuery langsung dari situs resminya di sini : Download

Kemudian letakan di folder yang sama dengan sebelumnya.

HTML

Sekarang untuk markupnya buatlah sebuah file PHP baru dalam folder yang sama dengan nama index.php dengan isi script :

<!DOCTYPE html>
<html>
 <head>
 <title>Infinite Loop | Jin Toples Programming</title>
 <link href="style.css" rel="stylesheet">     
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  var x=11;
  function lastAddedLiveFunc()
  {
   $('div#lastPostsLoader').html('<img src="loading.gif"/>');
   $.post("load_content.php?id="+x, function(data){
    if (data != "") {     
     $(".items").append(data);
    }
    $('div#lastPostsLoader').empty();
    x++;
   });
  };
  
  //lastAddedLiveFunc();
  $(window).scroll(function(){
  
   var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
   var  scrolltrigger = 0.95;
  
   if  ((wintop/(docheight-winheight)) > scrolltrigger) {   
    lastAddedLiveFunc();
   }
  });
 });
 </script>
</head>
 <body>
  <div class="wrapper">
   <h1>Jin Toples Programming</h1>
   <h2>Infinite Loop</h2>
<ul class="items">
   <li>Content 1</li>
   <li>Content 2</li>
   <li>Content 3</li>
   <li>Content 4</li>
   <li>Content 5</li>
   <li>Content 6</li>
   <li>Content 7</li>
   <li>Content 8</li>
   <li>Content 9</li>
   <li>Content 10</li>
</ul>
<div id="lastPostsLoader"></div>
</body>
</html>

Perhatikan pada fungsi javascript di atas :

function lastAddedLiveFunc()

Fungsi ini digunakan untuk meload konten baru dari file load_content.php dan meletakan isi konten di bagian bawah dalam class items dengan menggunakan fungsi append

Perhatikan pada baris kode java script ini :

$(window).scroll(function(){

Hal ini javascript berfungsi untuk mendeteksi apakah sebuah halaman sedang di scroll atau tidak, kemudian perhatikan pada baris - baris di bawahnya ia akan mengecek apakah halaman melebihi 0.95 / 95% atau tidak jika melebihi maka jalankan fungsi lastAddedLifeFunc.

var  scrolltrigger = 0.95;

Pada baris kode di ataslah anda dapat mengatur sampai sejauh mana halaman di scroll baru konten baru akan di load, silahkan anda coba membesar atau mengecilkannya.

Sekarang Infinite Scroll Dengan jQuery dan PHP anda sudah selesai anda dapat mencobanya dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Anda juga dapat mengunduh file jadinya di sini : DOWNLOAD