setelah kemarin kita sudah mencoba membuat pagination php mysql sekarang kita akan mencoba untuk membuat yang sedikit lebih elegan yaitu membuat paging dengan php dan mysql dan jquery. tapi seperti biasa sebelum kita mulai mencoba membuat simple pagination php mysql dan jquery izinkan terlebih dahulu saya untuk mengucapkan
Salam sobat semua
Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan kepada diri ini secara gratis sehingga diri ini masih di beri kesempatan untuk menulis dan berbagi dengan kalian dalam tulisan ini. tak lupa sholawat serta salamku tetap tercurah dan terpanjatkan hanya untuk baginda Sayyidina Muhammad ibni Abdillah S.A.W. beserta kepada keluarga dan para sahabatnya.
Bismillahir rohmanir rohiim
pada kesempatan kali ini kita akan mencoba membuat pagination dengan php dan mysql serta di tambah dengan jquery biar kinerja server lebih ringan karena ketika menampilkan data paging tidak usah lagi melalui reload halaman. kita akan mencoba membuat pagination ini se simple mungkin sehingga kawan-kawan bisa mengeksploarasi sendiri dalam menerapkannya ke sebuah applikasi atau ke sebuah kode milik kawan-kawan.
berhubung kemaren kita sudah buat dari php dan mysql jadi untuk kode server nya sebagian kita pakai yang kemarin atau kita bisa menulis atau mengetik dari awal, sedangkan bagi kalian yang tidak mengikuti tulisan sebelumnya silahkan di simak dan dibaca-baca pada tulisan disini. biar tertata rapi kita buat folder baru saja dan diberi nama yang lain misal folder barunya kita beri nama pagingjquery.
kemudian copy paste file jquery.js atau bisa didownload file jquery.js disini.
seperti kemaren pertama kita ambil atau ketik kode untuk mengkoneksikan mysql dengan php kita serta untuk mengkoneksikan file html atau php kita dengan jquery yang kurang lebihnya seperti berikut
<?php
echo "<script src=\"jquery.min.js\"></script>";
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dbname="pagingmysql";
$konek=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die ("Gagal menghubungkan ke mysql ".mysqli_connect_error());
?>
untuk paging php mysql dengan menggunakan jquery ini sedikit berbeda untuk alur logikanya. jika yang sebelumnya kita harus menghitung total data yang ada kemudian dibagi agar menjadi beberapa bagian, maka untuk kali ini kita tidak melakukan alur logika seperti itu tapi menggunakan alur logika yang menitik beratkan pada id primary key yang menggunakan double atau integer karena kita akan menggunakan operator aritmatika kurang dari atau lebih dari tergantung kita pada saat menampilkan datanya. jika menggunakan descending mysql maka kita menggunakan operator kurang dari jika menggunakan ascending maka kita menggunakan operator lebih dari. biar lebih jelas kita buat dulu kode yang menampilkan data dengan limit yang kita kehendaki dan untuk databasenya kita menggunakan database yang sudah ada seperti yang sudah kita tulis pada kode diatas. untuk kode menampilkan data limit yang akan ditampilkan kurang lebihnya seperti berikut
<?php
echo "<script src=\"jquery.min.js\"></script>";
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dbname="pagingmysql";
$konek=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die ("Gagal menghubungkan ke mysql ".mysqli_connect_error());
$dt=mysqli_query($konek,"select * from user order by idusr asc limit 2") or die("Error menampilkan data");
if(mysqli_num_rows($dt)>=1){
echo "<table border=\"1\" id=\"tbldt\">
<tr>
<td>Nama</td><td>No Tlp</td><td>Alamat</td>
</tr>";
while($tpl=mysqli_fetch_array($dt)){
$msgid=$tpl['idusr'];
echo"<tr>
<td>$tpl[nama]</td><td>$tpl[no_tlp]</td><td>$tpl[alamat]</td>
</tr>";
}
echo"</table>
<div id=\"divpaging\">
<a id=\"lihatpaging\" idusrne=\"$msgid\" href=\"javascript:void(0)\">Lihat lainnya</a>
</div>";
}else{
echo "Maaf data belum ada";
}
?>
maka jika kode diatas kita jalankan atau kita running maka akan menghasilkan output seperti berikut
untuk anchor atau link href pada lihat lain belum berfungsi karena kita belum memberi fungsi jquery pada fungsi anchor atau link href tersebut, jadi sekarang kita buat fungsi untuk anchor atau link hrefnya pada event click seperti yang sudah pernah kita coba pada tulisan disini yang didalamnya juga terdapat fungsi load ajax yang sudah pernah kita coba pada tulisan disini
<script>$(document).ready(function(){$(\"#lihatpaging\").click(function(){var last_msg_id = $(\"a#lihatpaging\").attr(\"idusrne\");if (last_msg_id!=\"end\") {$.ajax({type:\"POST\",url:\"pagingajax.php\",data:\"lastmsg=\" + last_msg_id,cache:\"false\",success: function(html){$(\"#tbldt\").append(html);}});}});});</script>
jika kita gabung dengan kode php yang kita buat diatas maka akan seperti berikut kurang lebihnya
<?php
echo "<script src=\"jquery.min.js\"></script>
<script>
$(document).ready(function(){
$(\"#lihatpaging\").click(function(){
var last_msg_id = $(\"a#lihatpaging\").attr(\"idusrne\");
if (last_msg_id!=\"end\") {
$.ajax({
type:\"POST\",
url:\"pagingajax.php\",
data:\"lastmsg=\" + last_msg_id,
cache:\"false\",
success: function(html){
$(\"#tbldt\").append(html);
}
});
}
});
});
</script>";
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dbname="pagingmysql";
$konek=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die ("Gagal menghubungkan ke mysql ".mysqli_connect_error());
$dt=mysqli_query($konek,"select * from user order by idusr asc limit 2") or die("Error menampilkan data");
if(mysqli_num_rows($dt)>=1){
echo "<table border=\"1\" id=\"tbldt\">
<tr>
<td>Nama</td><td>No Tlp</td><td>Alamat</td>
</tr>";
while($tpl=mysqli_fetch_array($dt)){
$msgid=$tpl['idusr'];
echo"<tr>
<td>$tpl[nama]</td><td>$tpl[no_tlp]</td><td>$tpl[alamat]</td>
</tr>";
}
echo"</table>
<div id=\"divpaging\">
<a id=\"lihatpaging\" idusrne=\"$msgid\" href=\"javascript:void(0)\">Lihat lainnya</a>
</div>";
}else{
echo "Maaf data belum ada";
}
?>
karena diatas masih belum selesai maka jika kita jalankan atau kita running kode diatas tidak akan terjadi atau tidak akan ada perubahan dalam output yang dihasilkan karena file load ajax phpnya belum kita buat, jadi sekarang kita buat file load ajax phpnya. karena di script atau kode diatas dibagian url kita isi pagingajax.php maka kita beri nama file load ajax phpnya dengan nama pagingajax.php dan untuk kodenya kurang lebih seperti berikut
<?php
$dbhost="localhost";
$dbuser="root";
$dbpass="";
$dbname="pagingmysql";
$lastmsg=$_POST['lastmsg'];
$konek=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname) or die ("Gagal menghubungkan ke mysql ".mysqli_connect_error());
$dt=mysqli_query($konek,"select * from user where idusr > $lastmsg order by idusr asc limit 2") or die("Error menampilkan data");
while($tpl=mysqli_fetch_array($dt)){
$msgid=$tpl['idusr'];
echo"<tr>
<td>$tpl[nama]</td><td>$tpl[no_tlp]</td><td>$tpl[alamat]</td>
</tr>";
}
if(mysqli_num_rows($dt)>=1){
echo"<script>
document.getElementById(\"lihatpaging\").setAttribute(\"idusrne\",\"$msgid\");
</script>";
}else{
echo"<script>
document.getElementById(\"lihatpaging\").setAttribute(\"idusrne\",\"end\");
</script>";
}
?>
dan sekarang kita jalankan kode yang diatas bukan kode yang pagingajax.php tapi kode yang diatasnya lagi. maka akan menghasilkan tampilan seperti berikut
memang seperti tidak berubah tapi ketika kita klik anchor atau link href Lihat lainnya maka akan tampil data yang lain atau data setelahnya dengan limit yang sudah ditentukan pada kode pagingajax.php seperti tampak berikut
jadi seperti itulah metode atau cara membuat paging dengan php mysql dan jquery sehingga meringankan beban server ketika request untuk menampilkan data untuk client. karena server kita tidak mereload lagi halaman paging kita.
saya rasa untuk cara membuat pagination dengan php mysql dan jquery yang sudah kita coba cukup sekian dulu, dan mudah-mudahan tulisan ini bisa memberi manfaat bagi kita semua terkhusus bagi saya pribadi. dan insya Allah kita lanjut di next tulisan.
bagi yang ingin download file kode diatas bisa download disini
salam sobat semua
#paging #pagination #jquery #ajax #php #mysql #free #share #download #sourcecode #source #code
tags:
membuat pagination php
simple pagination php
membuat pagination bootstrap
pagination php native
pagination ajax codeigniter
membuat paging next prev dengan php mysql
pagination php pdo
php pagination example with code download
membuat pagination php
simple pagination php
membuat pagination bootstrap
pagination php native
pagination ajax codeigniter
pagination php pdo
Comments
Post a Comment