INDONESIANWARE - Pada Artikel yang anda baca kali ini dengan judul Membuat Fitur Load More dengan jQuery Ajax PHP, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel PHP, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Membuat Fitur Load More dengan jQuery Ajax PHP
link : Membuat Fitur Load More dengan jQuery Ajax PHP
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/
Anda bisa mendownload source codenya disini
dan untuk passwordnya disini
Tunggu tutorial menarik lainnya, karena itu tetap kunjungi terus blog ini
Sekianlah artikel Membuat Fitur Load More dengan jQuery Ajax PHP kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Fitur Load More dengan jQuery Ajax PHP dengan alamat link https://ware-id.blogspot.com/2014/09/membuat-fitur-load-more-dengan-jquery.html
EmoticonEmoticon