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/
Anda bisa mendownload source codenya disini
dan untuk passwordnya disini
Tunggu tutorial menarik lainnya, karena itu tetap kunjungi terus blog ini
0 komentar:
Post a Comment