Menu Atas

Wednesday, April 13, 2011

Halaman paging dengan jQuery dan PHP

Untuk menampilkan data yang panjang kita membutuhkan teknik paging agar data yang tampil lebih rapi dan menghemat layout web.
Kali ini kita akan mencoba membuat paging data yang di ambil berdasarakn database pegawai. Data yang di tampilkan dibatasi 5 data dalam satu halaman, ok langsung saja cekibrot :)

Alurnya seperti ini, data ditampilkan sebanyak 5 kemudian di bawahnya ada button halaman ex: 1,2,3....
Jika button halaman di klik maka data akan diload sesuai dengan button halaman yang di pilih. (maap klo agak ga jelas, he...)


Untuk querydatabase nya silahkan jalankan perintah berikut 


CREATE TABLE `tb_pegawai` (
  `id_peg` int(2) NOT NULL auto_increment,
  `nama` varchar(50) collate latin1_general_ci NOT NULL,
  `jabatan` varchar(20) collate latin1_general_ci NOT NULL,
  `golongan` varchar(20) collate latin1_general_ci NOT NULL,
  PRIMARY KEY  (`id_peg`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=13 ;

INSERT INTO `tb_pegawai` VALUES (1, 'Budi', 'direktur', 'II');
INSERT INTO `tb_pegawai` VALUES (2, 'Santi', 'staf', 'III');
INSERT INTO `tb_pegawai` VALUES (3, 'Rani', 'manager', 'III');
INSERT INTO `tb_pegawai` VALUES (4, 'Dina', 'sales', 'I');
INSERT INTO `tb_pegawai` VALUES (5, 'Andi', 'marketing', 'II');
INSERT INTO `tb_pegawai` VALUES (6, 'Mulis', 'manager', 'III');
INSERT INTO `tb_pegawai` VALUES (7, 'Yanti', 'sales', 'I');
INSERT INTO `tb_pegawai` VALUES (8, 'Sulaiman', 'direktur', 'III');
INSERT INTO `tb_pegawai` VALUES (9, 'Sami', 'sales', 'II');
INSERT INTO `tb_pegawai` VALUES (10, 'Sandi', 'sales', 'I');
INSERT INTO `tb_pegawai` VALUES (11, 'Jaya', 'marketing', 'III');
INSERT INTO `tb_pegawai` VALUES (12, 'Mastur', 'sales', 'II');


Buat file dengan nama koneksi.php


<?php
$server = "localhost";
$username = "nama_user";
$password = "";
$database = "nama_database";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>

Buat file dengan nama index.php
Tulis file Html nya seperti ini

<?php
include "koneksi.php";
$limit = 5;
$query = mysql_query("SELECT * FROM tb_pegawai");
$count = mysql_num_rows($query);
$pages = ceil($count/$limit);
?>
<h1>Contoh Paging dengan Jquery</h1>
<div class="loading"><img src="ajax-loader.gif" border="0" /></div>
<div id="tampil_data"></div>
<div id="paging_button">
 <?php
  echo "<ul>";
  for($i=1; $i<=$pages; $i++){
   echo '<li id="'.$i.'">'.$i.'</li>';
  }
  echo "</ul>";
 ?>
</div>

Pada bagian tag div class loading digunakan untuk menampilkan animasi "loading", pada tag div id "tampil_data" untuk menampilkan data-data nama pegawai, dan tag div id "paging_button" digunakan untuk menampilkan tombol2 halaman.

Sekarang pada index.php tadi kita tambah kan javascript untuk pertukaran data, script nya seperti ini

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  tampil_data(1); 
  pilih_pages();
  $("#1").css({'background-color' : '#006699'}); //agar paging button bagian pertama berubah warna, karena page 1 yang pertama di jalankan
 });
 //untuk memunculkan animasi loading
 //sebulumnya properti class loading sudah di set display:none
 function show_loader(){
  $(".loading").fadeIn(200);
 }
 //menghilangkan animasi loading
 function hide_loader(){
  $(".loading").fadeOut(200);
 }
 //menampilkan data
 function tampil_data(pages){
  show_loader();
  $("#tampil_data").load("tampil_data.php?page=" + pages, hide_loader);
 }
 function pilih_pages(){
  $("#paging_button li").click(function(){
   var pages = this.id;
   tampil_data(pages);
   $("#paging_button li").css({'background-color' : ''});
   $(this).css({'background-color' : '#006699'}); //ganti warna paging button yang di click
   return false;
  });
 }
</script>

Dan ini script lengkap untuk index.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>Paging dengan Jquery</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
  tampil_data(1); 
  pilih_pages();
  $("#1").css({'background-color' : '#006699'}); //agar paging button bagian pertama berubah warna, karena page 1 yang pertama di jalankan
 });
 //untuk memunculkan animasi loading
 //sebulumnya properti class loading sudah di set display:none
 function show_loader(){
  $(".loading").fadeIn(200);
 }
 //menghilangkan animasi loading
 function hide_loader(){
  $(".loading").fadeOut(200);
 }
 //menampilkan data
 function tampil_data(pages){
  show_loader();
  $("#tampil_data").load("tampil_data.php?page=" + pages, hide_loader);
 }
 function pilih_pages(){
  $("#paging_button li").click(function(){
   var pages = this.id;
   tampil_data(pages);
   $("#paging_button li").css({'background-color' : ''});
   $(this).css({'background-color' : '#006699'}); //ganti warna paging button yang di click
   return false;
  });
 }
</script>

</head>

<body>
<?php
include "koneksi.php";
$limit = 5;
$query = mysql_query("SELECT * FROM tb_pegawai");
$count = mysql_num_rows($query);
$pages = ceil($count/$limit);
?>
<h1>Contoh Paging dengan Jquery</h1>
<div class="loading"><img src="ajax-loader.gif" border="0" /></div>
<div id="tampil_data"></div>
<div id="paging_button">
 <?php
  echo "<ul>";
  for($i=1; $i<=$pages; $i++){
   echo '<li id="'.$i.'">'.$i.'</li>';
  }
  echo "</ul>";
 ?>
</div>
</body>
</html>

Agar function tampil_data pada javascript berjalan baik, kita perlu membuat file tampil_data.php yang merespon permintaan dari function tampil_data.
tampil_data.php

<?php
sleep(1); //agar loading animasi kelihatan, di hapus juga ga apa2
include "koneksi.php";
$limit = 5;
$pages = $_GET["page"];
$start = ($pages-1)*5;
$query = mysql_query("SELECT * FROM tb_pegawai ORDER BY id_peg LIMIT $start, $limit");
$count = mysql_num_rows($query);

echo "<table><tr><th>No</th><th>Nama Pegawai</th><th>Golongan</th><th>Jabatan</th></tr>";
$no = $start;
while ($r = mysql_fetch_array($query)){
 $no ++;
 echo "<tr><td>$no</td><td>$r[nama]</td><td>$r[golongan]</td><td>$r[jabatan]</td></tr>";
}
echo "</table>";


?>

Agar tampilan dapat lebih rapi dan cantik silahkan atur css nya masing-masing, he....
Silahkan lihat demonya
Download source code lengkap disini

12 comments:

  1. terima kasih infonya Gan.. :D

    ReplyDelete
  2. wah wah wah mas, keren banget...
    ini dia yg ane cari-cari...
    dari lubuk hati terdalam ane ucapkan "i love you"
    .
    eh salah.... "makasih".. hehehehe

    ReplyDelete
  3. Bagus gan, manfaat...namun ane punya kendala nih dikit....gimna caranya menambahkan kolom untuk edit dan hapus yah....???

    ReplyDelete
  4. Kalo digabung java sama tampil data nya bisa ga gan ?

    ReplyDelete
  5. ijin nyedot gan ...

    terimakasih atas tutorialnya

    ReplyDelete
  6. sukses ane praketekin gan . Makasih ilmunya,gan :D

    ReplyDelete
  7. masih ada source kodenya gan?
    ane download sudah tidak aktif lagi link nya,
    boleh emailkan ke email saya chenn0915@gmail.com

    ReplyDelete