Membuat Fitur Load More dengan jQuery Ajax PHP

Setelah beberapa hari yang lalu saya memposting tentang Membuat Pencarian Data dengan jQuery Ajax dan PHP, pada pagi hari ini saya akan memposting masih tentang Membuat Fitur Load More dengan jQuery Ajax PHP.

Mungkin anda pernah melihat pada website sebuah berita atau yang lainnya, dimana pada bagian komentar ada fitur load more, lalu ketika diklik load more maka akan muncul komentar yang selanjutnya sampai komentar itu sudah terload semua.

Langkah - langkah Membuat Fitur Load More dengan jQuery Ajax PHP.

1. Buat sebuah database dengan nama latihan lalu buat table dengan nama komentar

create table komentar (
    id int(11) primary key auto_increment,
    nama varchar(30),
    tanggal datetime,
    isi text
)

2. Buat sebuah file dengan nama koneksi.php

<?php
$server="localhost";
$user="root";
$password="root";
$database="komentar";
$conn=mysql_connect($server,$user,$password) or die ("gagal koneksi ke database"); // untuk koneksi keserver
$db=mysql_select_db($database); // untuk memilih database
?>

3. Buat sebuah file dengan nama index.php

<?php include "koneksi.php";?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>[Tutorial_Koding]_Load_More_Comment</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function()
 {
  $("#lihat").click(function() // event ketika <div id="lihat"> di klik
  {
   $("#lihat").html('<img src="loading.gif"/>'); // memunculkan loading.gif
   // melakukan request ke load_komentar.php untuk mendapatkan data pada table komentar
   $.ajax({
    type:"post",
    url:"load_komentar.php",
    data:"urut="+$(".baris:last").attr('id'),
    success: function(html)
    {
     if (html)
     {
      $("#content").append(html); // menambahkan komentar yang di request dari load_komentar.php ke <div id="content">
      $("#lihat").html('<a href="#">Tampilkan Komentar</a>'); 
     }
     else 
     {
      $("#lihat").replaceWith('<div id="lihat">Tidak ada komentar lagi</div>');
     }
    }
   });
  });
 });
</script>
</head>

<body>
<div id="content">
 <?php
 $query=mysql_query("select * from komentar order by id desc limit 0,2");
 while ($data=mysql_fetch_array($query))
 {
 ?>
    <div class="baris" id="<?=$data['id'];?>">
     <b><?=$data['nama'];?></b>-<small><?=$data['tanggal'];?></small><br />
  <p><?=$data['isi'];?></p>
    </div>
    <hr />
    <?php 
 }
 ?>
</div>
<div id="lihat"><a href="#">Tampilkan Komentar</a></div>
</body>
</html>

4. Buat file dengan nama load_komentar.php

<?php
include "koneksi.php"; // include koneksi.php

if ($_POST['urut'])
{
 // query untuk menampilkan data komentar
 $query=mysql_query("select * from komentar where id < '".$_POST['urut']."' order by id desc limit 0,2");
 while ($data=mysql_fetch_array($query)) // perulangan untuk menampilkan data komentar
 {
 ?>
    <div class="baris" id="<?=$data['id'];?>">
     <b><?=$data['nama'];?></b>-<small><?=$data['tanggal'];?></small><br />
  <p><?=$data['isi'];?></p>
    </div>
    <hr />
    <?php 
 }
}
else 
{
echo "tidak dapat"; 
}
?>

5. Buka buka web browser dan masukan url localhost/nama_folder/