Tutorial Membuat Advanced Paging dengan PHP

"Om Swastiastu"

Jika kalian mulai menampilkan puluhan bahkan ratusan data dalam database, maka kalian akan membutuhkan space yang banyak untuk menampung data tersebut. Tentunya hal tersebut menjadi tidak efisien karena membutuhkan banyak tempat. Dengan adanya paging, maka hal tersebut dapat dipecahkan. Paging merupakan teknik untuk menampilkan data dengan cara membaginya ke beberapa halaman. Teknik ini digunakan untuk mengurangi scroll pada window apabila data yang ditampilkan sangat banyak, sehingga mengakibatkan lamanya page load time karena ukuran filenya besar.


Paging biasanya disajikan dengan urutan angka yang bisa di link ke halaman tertentu dan kadang ada link Next dan Previous-nya juga. Pada tutorial kali ini saya akan menjelaskan bagaimana cara membuat advance paging. Advance paging adalah paging yang bentuknya seperti ini

1 2 3 4 … 20 Next >>

Contoh tampilan di atas saya asumsikan terdapat 20 halaman dan halaman yang sedang aktif adalah halaman 1. Bila yang aktif adalah halaman 10, maka tampilan navigasinya adalah seperti berikut

<< Prev 1 ... 7 8 9 10 11 12 13 … 20 Next >>

Sedangkan bila yang aktif adalah halaman terakhir atau halaman 20 maka tampilan navigasinya adalah seperti ini

<< Prev 1 .. 17 18 19 20

Dalam contoh ini kasus advance paging ini akan diterapkan pada data barang. Untuk membuat tabel barang perhatikan sintaks SQL berikut ini:

CREATE TABLE barang (
  idBarang int(11) auto_increment,
  nama varchar(20),
  stok int(11),
  tanggal date,
  harga int(11),
  PRIMARY KEY (idBarang)
)

Sekarang kita asumsikan bahwa data barang ini akan ditampilkan sebanyak 5 data tiap halaman. Sehingga kita perlu membuat variabel untuk menyimpan jumlah data yang akan ditampilkan per halaman. Disini saya asumsikan nama variabelnya adalah $limit, karena limit sendiri artinya membatasi. Jadi kita membatasi jumlah data yang ditampilkan hanya 5 saja.

file show.php

<?php
// koneksi ke mysql
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db(data);
// jumlah data yang akan ditampilkan per halaman
$limit = 5;
?>

Kita lanjutkan asumsi yang saya buat diatas dimana bila file show.php diatas dibuka tanpa parameter page (http://localhost/barang/show.php), maka yang pertama kali tampil adalah data halaman 1. Jika ingin menampilkan data di halaman 2, maka harus terdapat parameter dalam URL nya seperti ini  http://localhost/barang/show.php?page=2. Sedangkan untuk menuju ke halaman 3, URL nya http://localhost/barang/show.php?page=3, dan seterusnya.

Dari asumsi di atas terlihat bahwa bila parameter ?page=... tidak diberikan pada URL maka secara otomatis file akan meng-load halaman 1. Sedangkan bila terdapat parameter ?page=… maka nomor halamannya menyesuaikan nilai pada parameter ?page tersebut.

Setelah kita mengasumsikan, maka sekarang saya akan edit file show.php menjadi

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
// jumlah data yang akan ditampilkan per halaman
$limit = 5;
// apabila ada parameter, gunakan parameter tersebut,
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page'])){
    $page = $_GET['page'];
}
else{
    $page = 1;
}
?>

Sekarang kita asumsikan ada 20 data pada tabel barang dimana kita hanya menampilkan 5 data per halaman. Maka terdapat 4 paging yang ada. Data-data dalam database juga bentuknya mirip seperti array, dimana jika kita ingin menampilkan 5 data awal, maka data yang ditampilkan adalah data ke 0, 1, 2, 3, 4. Jika kita ingin menampilkan halaman kedua, data yang ditampilkan adalah 5, 6, 7, 8, dan 9. Halaman ketiga, data ke 10, 11, 12, 13, 14 dan data yang terakhir adalah 15, 16, 17, 18, 19. Dalam sintaks SQL, bentuknya seperti ini:

/*formula*/
SELECT * FROM barang LIMIT $offset, $limit;

/*data halaman 1*/
SELECT * FROM barang LIMIT 0, 5;
/*data halaman 2*/
SELECT * FROM barang LIMIT 5, 5;
/*data halaman 3*/
SELECT * FROM barang LIMIT 10, 5;
/*data halaman 4*/
SELECT * FROM barang LIMIT 15, 5;

Nah, untuk menentukan nilai pada offset tersebut, caranya adalah sebagai berikut:

$offset = (no halaman – 1) * jumlah data per halaman;

Mari kita teliti lebih lanjut. Untuk halaman 1, maka nilai $offset = (1 – 1) * 5 = 0. Untuk halaman 2, nilai $offset = (2 – 1) * 5 = 5, halaman 3 $offset = (3 – 1) * 5 = 10 dan halaman 4 $offset = (4 – 1) * 5 = 15.

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
// jumlah data yang akan ditampilkan per halaman
$limit = 5;
// apabila ada parameter, gunakan parameter tersebut,
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page'])){
    $page = $_GET['page'];
}
else{
    $page = 1;
}
// perhitungan offset
$offset = ($page - 1) * $limit;
// query SQL untuk menampilkan data perhalaman sesuai offset
$query = "SELECT * FROM barang LIMIT $offset, $limit";
$result = mysql_query($query) or die('Error');

// menampilkan data
echo "<table border='1'>";
echo "<tr><td>Nama</td><td>Stok</td><td>Tanggal</td><td>Harga</td></tr>";
while($data = mysql_fetch_array($result)){
echo "<tr><td>".$data['nama']."</td><td>".$data['stok']."</td><td>".$data
['tanggal']."</td><td>".$data['harga']."</td></tr>";
}
echo "</table>";
?>

Tugas berikutnya adalah menentukan berapa jumlah paging. Jika terdapat 20 data dan data yang ditampilkan jumlahnya 5 tiap halaman, maka jumlah paging adalah 4. Jika data adalah 15, maka jumlah paging ada 3. Lalu jika data adalah 18, maka paging adalah 4. Mari kita bahas.

$jumlahPage = ceil($jumlah_data / $limit);

ceil() adalah fungsi PHP yang digunakan untuk membulatkan suatu bilangan ke atas. Jika ceil(3,2) maka hasilnya adalah 4. Sekarang dimana kita mencari jumlah data? Untuk menentukan jumlah data barang kita menggunakan query:

SELECT COUNT(*) FROM guestbook;

Sekarang kita tambahkan asumsi diatas ke file show.php

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
// jumlah data yang akan ditampilkan per halaman
$limit = 5;
// apabila ada parameter, gunakan parameter tersebut,
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page'])){
    $page = $_GET['page'];
}
else{
    $page = 1;
}
// perhitungan offset
$offset = ($page - 1) * $limit;
// query SQL untuk menampilkan data perhalaman sesuai offset
$query = "SELECT * FROM barang LIMIT $offset, $limit";
$result = mysql_query($query) or die('Error');

// menampilkan data
echo "<table border='1'>";
echo "<tr><td>Nama</td><td>Stok</td><td>Tanggal</td><td>Harga</td></tr>";
while($data = mysql_fetch_array($result)){
echo "<tr><td>".$data['nama']."</td><td>".$data['stok']."</td><td>".$data
['tanggal']."</td><td>".$data['harga']."</td></tr>";
}
echo "</table>";

// mencari jumlah semua data dalam tabel barang
$query  = "SELECT COUNT(*) AS jumData FROM barang";
$hasil  = mysql_query($query);
$data  = mysql_fetch_array($hasil);
$jumData = $data['jumData'];
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
$jumPage = ceil($jumData/$limit);?>

Sekarang saatnya membuat tampilan pagingnya. Hal pertama yang kita buat adalah menampilkan link << Previous. Link tersebut hanya akan tampil jika halaman yang aktif bukan halaman 1. Kemudian setelah itu kita akan menampilkan urutan paging dengan menggunakan sintaks for, dimana dibatasi oleh variabel $jumPage, kemudian kita akan membuat link >> Next. Link tersebut tidak akan tampil apabila halaman yang aktif adalah halaman terakhir atau $page == $jumPage.

Sekarang jika terdapat 15 paging dan halaman yang aktif adalah 1, maka kira-kira tampilannya adalah

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 >> Next

Jika halaman yang aktif adalah 7 maka

<< Previous 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 >> Next

Lalu bagaimana caranya agar jika halaman yang aktif adalah halaman 7, tapi tampilan datanya adalah seperti ini

<< Prev 1 ... 4 5 6 7 8 9 10 … 15 Next >>

Berikut adalah kode PHP untuk menampilkan paging diatas

//menampilkan link << Previous
if ($page > 1){
echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($page-1)."'><< Prev</a>";
}
//menampilkan urutan paging
for($i = 1; $i <= $jumPage; $i++){
//mengurutkan agar yang tampil i+3 dan i-3
         if ((($i >= $page - 3) && ($i <= $page + 3)) || ($i == 1) || ($i == $jumPage))
         {
            if($i==$jumPage && $page <= $jumPage-5) echo "...";
            if ($i == $page) echo " <b>".$i."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$i."'>".$i."</a> ";
            if($i==1 && $page >= 6) echo "...";
         }
}
//menampilkan link Next >>
if ($page < $jumPage){
echo "<a href='".$_SERVER['PHP_SELF']."?page=".($page+1)."'>Next >></a>";
}

Jika sudah, gabungkan file diatas.

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
// jumlah data yang akan ditampilkan per halaman
$limit = 5;
// apabila ada parameter, gunakan parameter tersebut,
// sedangkan apabila belum, nomor halamannya 1.
if(isset($_GET['page'])){
    $page = $_GET['page'];
}
else{
    $page = 1;
}
// perhitungan offset
$offset = ($page - 1) * $limit;
// query SQL untuk menampilkan data perhalaman sesuai offset
$query = "SELECT * FROM barang LIMIT $offset, $limit";
$result = mysql_query($query) or die('Error');

// menampilkan data
echo "<table border='1'>";
echo "<tr><td>Nama</td><td>Stok</td><td>Tanggal</td><td>Harga</td></tr>";
while($data = mysql_fetch_array($result)){
echo "<tr><td>".$data['nama']."</td><td>".$data['stok']."</td><td>".$data
['tanggal']."</td><td>".$data['harga']."</td></tr>";
}
echo "</table>";
// mencari jumlah semua data dalam tabel barang
$query  = "SELECT COUNT(*) AS jumData FROM barang";
$hasil  = mysql_query($query);
$data  = mysql_fetch_array($hasil);
$jumData = $data['jumData'];
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
$jumPage = ceil($jumData/$limit);
//menampilkan link << Previous
if ($page > 1){
echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($page-1)."'><< Prev</a>";
}
//menampilkan urutan paging
for($i = 1; $i <= $jumPage; $i++){
//mengurutkan agar yang tampil i+3 dan i-3
         if ((($i >= $page - 3) && ($i <= $page + 3)) || ($i == 1) || ($i == $jumPage))
         {
            if($i==$jumPage && $page <= $jumPage-5) echo "...";
            if ($i == $page) echo " <b>".$i."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$i."'>".$i."</a> ";
            if($i==1 && $page >= 6) echo "...";
         }
}
//menampilkan link Next >>
if ($page < $jumPage){
echo "<a href='".$_SERVER['PHP_SELF']."?page=".($page+1)."'>Next >></a>";
}
?>

Semoga artikel ini berguna.

"Om Santhi, Santhi, Santhi, Om"