Membuat pagination ala Facebook dengan PHP, MySQL dan jQuery

7 November 2016

Membuat pagination ala Facebook dengan PHP, MySQL dan jQuery

Pagination digunakan ketika halaman yang akan ditampilkan sebuah website memuat banyak infomasi dan tidak memungkinkan untuk ditampilkan pada satu halaman saja. Kita bisa melihat banyak situs atau website yang membagi postingannya ke dalam beberapa halaman, tidak terkecuali situs media sosial Facebook, akan tetapi bentuk paging pada situs media sosial agak berbeda dengan situs lainnya. Facebook membagi postingannya dengan style memanjang ke bawah, dimana saat link "Berita Lainnya" di-klik akan tampil postingan sebelumnya dan terlihat dalam satu halaman. Langsung saja kita akan memulai membuat fitur ini.

Pembuatan Databases

Buatlah sebuah database yang berisi satu buah tabel dengan nama status. Untuk informasi saya menggunakan XAMPP versi 1.8 berikut screenshoot tabel saya:

Pembuatan File PHP dan jQuery

Selanjutnya buatlah dua file yang ditempatkan dalam satu folder projek, file tersebut adalah index.php, tampil_post.php, dan db.php untuk koneksi ke MySQL, untuk file jquery.1.4.2.min.js bisa di download di situs jquery, adapun skrip-skripnya sebagai berikut.

index.php

<?php include_once 'db.php'; ?>
<html>
<head>
<title>Paging ala Facebook</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  //jika showmore post diklik
  $('.load_more').live("click",function() {
  //buat variabel id_terakhir dari id milik load_more
  var id_terakhir = $(this).attr("id");
  //Jika id_terakhir tidak sama dengan end
  if(id_terakhir!='end'){//lakukan request ajax
    $.ajax({
      type: "POST",
      url: "tampil_post.php", //proses ke file php
      data: "idakhir="+ id_terakhir, 
      beforeSend:  function() {
        $('a.load_more').append('<img src="facebook_style_loader.gif" />');
      },
      success: function(html){
        $(".facebook_style").remove(); //hilangkan div dengan class name facebook style
        $("ol#updates").append(html); //memberikan respon ke ol#updates
      }
    });
  }
  return false;
  });
});
</script>
</head>
<body>
<div id='container'>
 <ol class="row" id="updates">
<?php
//tampilkan status dengan limit 5
$query ="SELECT * FROM status ORDER BY id_status LIMIT 5";
$result = mysql_query($query);
while($row=mysql_fetch_array($result)){
  $id_status=$row['id_status'];
  $status=$row['status'];
?>
    <li> <?php echo $status; ?> </li>
<?php } ?>
  </ol>
  
<div class="facebook_style" id="facebook_style">
<a id="<?php echo $id_status; ?>" href="#" class="load_more" >Show Older Posts <img src="arrow1.png" /></a>
</div>
</div>
</body>
</html>

tampil_post.php

<?php
include_once 'db.php';

if(isset($_POST['idakhir']))
{
$idakhir=$_POST['idakhir'];
//tampilkan 5 status berikutnya
$query="SELECT * FROM status WHERE id_status > '$idakhir' ORDER BY id_status LIMIT 5";
$result = mysql_query($query);

while($row=mysql_fetch_array($result))
{ 
$id_status=$row['id_status'];
$status=$row['status'];
?>
<li> <?php echo $status; ?> </li>
<?php
}
?>
<?php
	
if(mysql_num_rows($result)==5){ //statement if else ini akan memutuskan apakah data masih bisa ditampilkan lagi atau tidak
   ?>
<div class="facebook_style" id="facebook_style"> <a id="<?php echo $status; ?>" href="#" class="load_more" >Show Older Posts <img src="arrow1.png" /></a> </div>
<?php
 }else {
  echo '<div  id="facebook_style">
  <a  id="end" href="#" class="load_more" >No More Posts</a>
  </div>';
    
 }
}
?>

Jangan lupa untuk membuat file style.css untuk mengatur tata letak dan mempercantik tampilan paging. Berikut isi dari style.css

/* CSS Document */
body {
  font-family:Arial, 'Helvetica', sans-serif;
  color:#000;
  font-size:15px;
}
a {
  color:#2276BB;
  text-decoration:none;
}
* {
  margin:0px;
  padding:0px
}
ol.row {
  list-style:none
}
ol.row li {
  position:relative;
  border-bottom:1px solid #EEEEEE;
  padding:8px;
}
ol.row li:hover {
  background-color:#F7F7F7;
}
ol.row li:first-child {
}
#container {
  margin-left:60px;
  width:580px
}

img {
  border : none ;
}
#facebook_style  {
  border:1px solid #D8DFEA;
  padding:10px 15px;
  background-color:#EDEFF4;
}
#facebook_style a {
  color:#3B5998;
  cursor:pointer;
  text-decoration:none;
  font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
  font-size:11px;
  text-align:left;
}

Dan terakhir sertakan gambar dan animasi berikut untuk membuat loading berjalan dengan animasi

Gambar 1