Tutorial PHP Gratis : Ide Membuat Advanced Paging dengan PHP

Dapatkan Script SMS Gateway PHP + MySQL

Seperti: software pengirim SMS massal, SMS survei, SMS polling, SMS quick count, SMS dakwah, Web2SMS dan masih banyak lagi... semuanya berbasis PHP & MySQL
[Info Lengkap...]

Ide Membuat Advanced Paging dengan PHP

April 30th, 2009 | by rosihanari |

Cetak Artikel Ini

Ingin beriklan di atas?

Paging merupakan teknik menampilkan data dengan cara membaginya ke beberapa halaman. Teknik ini diberikan untuk mengurangi scrolling window apabila data yang disajikan terlalu banyak, sehingga akan menimbulkan kejemuan orang yang melihat dan juga akan menghasilkan page load time yang besar karena ukuran filenya besar (apabila data disajikan dalam satu halaman saja).

Untuk keperluan navigasi data biasanya disajikan dengan link berupa nomor halaman atau kadang berbentuk Previous dan Next.

Pada tutorial ini akan dipaparkan bagaimana ide membuat advance paging ini dilakukan. Advance paging adalah paging yang navigasinya berbentuk

1 2 3 4 … 20 Next >>

Contoh tampilan di atas diasumsikan terdapat 20 halaman paging dan halaman yang sedang aktif adalah halaman 1. Bila yang aktif halaman 10, maka tampilan navigasinya adalah:

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

Sedangkan bila yang aktif adalah halaman terakhir (20) maka tampilan navigasinya adalah

<< Prev 1 .. 17 18 19 20

Dalam contoh ini kasus advance paging ini akan diterapkan pada data guestbook atau buku tamu. Istilah ‘advance paging’ ini adalah istilah saya saja sih

Mau tau bagaimana ide dan cara membuatnya? simak baik-baik artikel ini. Artikel ini merupakan request dari mas Sadeli (salah satu member saya)

Pertama kita siapkan terlebih dahulu tabel untuk menyimpan datanya:

CREATE TABLE guestbook (
  id int(11) AUTO_INCREMENT,
  nama varchar(20),
  email varchar(20),
  tanggal date,
  komentar text,
  PRIMARY KEY  (id)
)

Selanjutnya kita buat skenario dari paging ini. Misalkan kita akan membuat paging dengan jumlah data yang ditampilkan per halaman adalah sejumlah 5 buah. Sehingga kita perlu membuat variabel untuk menyimpan jumlah data yang akan ditampilkan per halaman.

show.php

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

Kita lanjutkan skenarionya. Untuk script paging ini, bila dibuka pertama kali dengan URL http://namaserver/show.php maka otomatis menuju ke halaman 1. Untuk menuju ke halaman 2, maka URL nya http://namaserver/show.php?page=2. Sedangkan untuk menuju ke halaman 3, URL nya http://namaserver/show.php?page=3, dan seterusnya.

Dari skenario di atas tampak bahwa bila parameter ?page=... belum diberikan pada URL maka secara otomatis menuju ke nomor halaman 1. Sedangkan bila terdapat parameter ?page=… maka nomor halamannya menyesuaikan nilai pada parameter ?page tersebut. Untuk mewujudkan hal ini, maka kita tambahkan perintah

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

Selanjutnya, dalam teknik paging perlu adanya pengaturan posisi awal data atau lebih dikenal dengan istilah offset. Offset digunakan untuk mengatur posisi awal data yang akan ditampilkan perhalaman. Perlu Anda tahu, bahwa data dalam database memiliki urutan seperti halnya array. Data pada baris pertama hasil query SQL disebut data pada posisi ke-0, data pada baris kedua disebut data pada posisi ke-1, dst.

Trus.. apa kaitannya offset dengan paging? Sabar… perhatikan dulu contoh berikut ini

Sebagai contoh, misalkan terdapat 15 data dalam tabel guestbook dimana kita ingin menyajikan pada setiap halaman adalah 5 data. Dengan demikian total terdapat 3 halaman dalam pagingnya. Untuk halaman pertama, pastilah data yang ditampilkan adalah data ke – 0, 1, 2, 3 dan 4. Sedangkan halaman kedua, data yang ditampilkan adalah 5, 6, 7, 8, dan 9. Serta halaman ketiga, data ke 10, 11, 12, 13, 14.

Nah… perhatikan bahwa untuk halaman 1, data awal yang ditampilkan adalah data pada urutan ke-0, halaman 2 data awalnya adalah data pada urutan ke-5 dan halaman 3 data pada urutan ke 10.

Lantas apa gunanya offset tersebut? Offset nantinya akan digunakan pada query SQL untuk memunculkan data pada setiap halaman. Query SQL yang digunakan adalah

SELECT * FROM guestbook LIMIT offset, jumlahData;

Sehingga untuk memunculkan data guestbook pada halaman pertama, maka perintahnya

SELECT * FROM guestbook LIMIT 0, 5;

Untuk memunculkan data pada halaman kedua, perintahnya:

SELECT * FROM guestbook LIMIT 5, 5;

dan untuk memunculkan data pada halaman ketiga, perintahnya:

SELECT * FROM guestbook LIMIT 10, 5;

dan seterusnya.

OK.. deh.. dah paham, trus yang jadi masalah adalah bagaimana menentukan offset pada setiap halamannya? Bila kita lihat patternnya, maka hubungan antara offset, jumlah data yang ingin ditampilkan per halaman dan nomor halamannya adalah:

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

Lho kok bisa? he.. 3x kita cek saja. Untuk halaman 1, maka nilai offset = (1 – 1) * 5 = 0. Untuk halaman 2, nilai $offset = (2 – 1) * 5 = 5 dan halaman ketiga $offset = (3 – 1) * 5 = 10. Bener kan?

OK.. deh, dah paham tentang offset, so.. kita bisa tambahkan scriptnya untuk mencari offset dan query SQL nya.

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
 
// jumlah data yang akan ditampilkan per halaman
 
$dataPerPage = 5;
 
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
 
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1;
 
// perhitungan offset
 
$offset = ($noPage - 1) * $dataPerPage;
 
// query SQL untuk menampilkan data perhalaman sesuai offset
 
$query = "SELECT * FROM guestbook LIMIT $offset, $dataPerPage";
 
$result = mysql_query($query) or die('Error');
 
// menampilkan data 
 
echo "<table border='1'>";
echo "<tr><td>Nama</td><td>Email</td><td>Tanggal</td><td>Komentar</td></tr>";
while($data = mysql_fetch_array($result))
{
   echo "<tr><td>".$data['nama']."</td><td>".$data['email']."</td><td>".$data['tanggal']."</td><td>".$data['komentar']."</td></tr>";
}
 
echo "</table>";
 
.
.
 
?>

Nah… masalah berikutnya adalah bagaimana menentukan total jumlah halamannya? Hal ini penting karena nantinya akan ditampilkan sebagai link navigasi pagingnya. Untuk menghitung total jumlah halaman, kita cari patternnya terlebih dahulu. Misalkan terdapat 15 data, dan kita ingin menyajikan data sejumlah 5 per halaman, maka total ada berapa halaman yang dibutuhkan? OK.. benar ada 3. Trus… kalo ada 31 data dan kita ingin menyajikan data sejumlah 5 per halaman, total ada berapa halaman? OK.. benar ada 7 (untuk halaman ke-7 hanya tampil 1 buah data). Sehingga dari pattern tersebut formula untuk menghitung jumlah halaman adalah

jumlah halaman = ceil(jumlah data / data per halaman);

ceil() adalah function yang digunakan untuk membulatkan ke atas suatu bilangan. Misal ceil(3.2) = 4, ceil(3.7) = 4.

Trus… yang jadi masalah adalah bagaimana mendapatkan jumlah datanya? Nah… untuk mendapatkan jumlah data keseluruhan yang ada kita gunakan query SQL.

SELECT COUNT(*) FROM guestbook;

OK… I know, dan sekarang kita bisa tambahkan proses menghitung jumlah data dan jumlah halaman pada scriptnya.

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
 
// jumlah data yang akan ditampilkan per halaman
 
$dataPerPage = 5;
 
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
 
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1;
 
// perhitungan offset
 
$offset = ($noPage - 1) * $dataPerPage;
 
// query SQL untuk menampilkan data perhalaman sesuai offset
 
$query = "SELECT * FROM guestbook LIMIT $offset, $dataPerPage";
 
$result = mysql_query($query);
 
// menampilkan data 
 
echo "<table border='1'>";
echo "<tr><td>Nama</td><td>Email</td><td>Tanggal</td><td>Komentar</td></tr>";
while($data = mysql_fetch_array($result))
{
   echo "<tr><td>".$data['nama']."</td><td>".$data['email']."</td><td>".$data['tanggal']."</td><td>".$data['komentar']."</td></tr>";
}
 
echo "</table>";
 
// mencari jumlah semua data dalam tabel guestbook
 
$query  = "SELECT COUNT(*) AS jumData FROM guestbook";
$hasil  = mysql_query($query);
$data  = mysql_fetch_array($hasil);
 
$jumData = $data['jumData'];
 
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
 
$jumPage = ceil($jumData/$dataPerPage);
.
.
 
?>

Nah… sekarang tinggal bagaimana cara memunculkan link berisi nomor halaman yang menuju ke setiap halamannya. Untuk memunculkan nomor halamannya, caranya mudah. Kita hanya menggunakan looping saja.

Tapi eit.. tunggu dulu pada desain advance paging di atas, sebelum memunculkan link nomor halaman, terdapat link << prev. Kapan link ini akan muncul? ya... tepat sekali yaitu ketika nomor halaman yang sedang aktif (sedang dibuka) setelah halaman pertama atau $noPage > 1. Trus.. menuju ke nomor halaman berapakah link tersebut? yap.. benar yaitu menuju ke nomor halaman sebelumnya ($noPage – 1).

Dengan demikian kita bisa tambahkan perintah berikut ini pada script

if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";

sehingga menjadi

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
 
// jumlah data yang akan ditampilkan per halaman
 
$dataPerPage = 5;
 
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
 
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1;
 
// perhitungan offset
 
$offset = ($noPage - 1) * $dataPerPage;
 
// query SQL untuk menampilkan data perhalaman sesuai offset
 
$query = "SELECT * FROM guestbook LIMIT $offset, $dataPerPage";
 
$result = mysql_query($query) or die('Error');
 
// menampilkan data 
 
echo "<table border='1'>";
echo "<tr><td>Nama</td><td>Email</td><td>Tanggal</td><td>Komentar</td></tr>";
while($data = mysql_fetch_array($result))
{
   echo "<tr><td>".$data['nama']."</td><td>".$data['email']."</td><td>".$data['tanggal']."</td><td>".$data['komentar']."</td></tr>";
}
 
echo "</table>";
 
// mencari jumlah semua data dalam tabel guestbook
 
$query   = "SELECT COUNT(*) AS jumData FROM guestbook";
$hasil  = mysql_query($query);
$data     = mysql_fetch_array($hasil);
 
$jumData = $data['jumData'];
 
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
 
$jumPage = ceil($jumData/$dataPerPage);
 
// menampilkan link previous
 
if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
.
.
 
?>

Berikutnya kita akan tampilkan link nomor-nomor halamannya menggunakan looping. Adapun perintah-perintahnya adalah seperti di bawah ini.

for($page = 1; $page <= $jumPage; $page++)
{
         if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
         {   
            if (($showPage == 1) && ($page != 2))  echo "..."; 
            if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
            if ($page == $noPage) echo " <b>".$page."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
            $showPage = $page;          
         }
}

Konsep loopingnya sederhana, yaitu menuliskan link nomor halaman mulai dari 1 s/d jumlah halamannya. Namun harap dicatat di sini bahwa karena tidak semua nomor halaman ditampilkan sesuai desain sebelumnya maka kita perlu berikan syarat.

Maksud dari syarat

if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))  
{
   .
   .
}

adalah hanya memunculkan link nomor halaman 1 dan juga halaman terakhir, sekaligus pula nomor-nomor halaman dalam rentang 3 halaman sebelum dan sesudah nomor halaman yang aktif. Contoh jika halaman yang aktif adalah halaman 7 dari 15 halaman, maka nanti diharapkan nomor halaman yang muncul adalah

1 4 5 6 7 8 9 10 15

Anda dapat mengubah rentang halaman sesuai yang diinginkan.

Perintah

if (($showPage == 1) && ($page != 2))  echo "...";

Digunakan untuk memunculkan tanda ‘…’ di antara halaman nomor 1 dengan halaman berikutnya yang tampil. Tapi perlu diingat bahwa tanda ini akan muncul bila nomor halaman yang muncul setelah 1 ialah bukan 2. Apabila setelah 1 ini muncul 2, maka tanda ini tidak muncul.

Demikian pula untuk perintah

if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";

Perintah di atas digunakan untuk memunculkan tanda ‘…’ sebelum nomor halaman terakhir bila halaman sebelumnya yang muncul bukan ‘nomor halaman terakhir – 1′.

Sehingga dari kedua perintah di atas diharapkan akan menampilkan nomor halaman seperti di bawah ini

1 … 4 5 6 7 8 9 10 … 15 (bila yang aktif adalah halaman 7)
1 2 3 4 5 6… 15 (bila yang aktif adalah halaman 2)
1 … 10 11 12 13 14 15 (bila yang aktif adalah halaman 13)

Sedangkan perintah

if ($page == $noPage) echo " <b>".$page."</b> ";
    else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";

digunakan untuk menampilkan link nomor halaman. Namun link dari nomor halaman ini ditampilkan hanya pada nomor halaman yang sedang tidak aktif. Sedangkan pada nomor halaman yang sedang aktif nomor halaman hanya dicetak tebal saja untuk menunjukkan bahwa halaman yang sedang aktif adalah halaman tersebut.

Terakhir.. kita perlu link untuk memunculkan next >>. OK kapan link ini muncul? ya benar… yaitu ketika halaman yang sedang aktif bukanlah pada halaman terakhir atau sebelum halaman terakhir. Sehingga kita bisa tambahkan perintah

if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";

pada script, sehingga scriptnya menjadi

<?php
mysql_connect('namahost', 'dbuser', 'dbpassword');
mysql_select_db('dbname');
 
// jumlah data yang akan ditampilkan per halaman
 
$dataPerPage = 5;
 
// apabila $_GET['page'] sudah didefinisikan, gunakan nomor halaman tersebut, 
// sedangkan apabila belum, nomor halamannya 1.
 
if(isset($_GET['page']))
{
    $noPage = $_GET['page'];
} 
else $noPage = 1;
 
// perhitungan offset
 
$offset = ($noPage - 1) * $dataPerPage;
 
// query SQL untuk menampilkan data perhalaman sesuai offset
 
$query = "SELECT * FROM guestbook LIMIT $offset, $dataPerPage";
 
$result = mysql_query($query) or die('Error');
 
// menampilkan data 
 
echo "<table border='1'>";
echo "<tr><td>Nama</td><td>Email</td><td>Tanggal</td><td>Komentar</td></tr>";
while($data = mysql_fetch_array($result))
{
   echo "<tr><td>".$data['nama']."</td><td>".$data['email']."</td><td>".$data['tanggal']."</td><td>".$data['komentar']."</td></tr>";
}
 
echo "</table>";
 
// mencari jumlah semua data dalam tabel guestbook
 
$query   = "SELECT COUNT(*) AS jumData FROM guestbook";
$hasil  = mysql_query($query);
$data     = mysql_fetch_array($hasil);
 
$jumData = $data['jumData'];
 
// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data
 
$jumPage = ceil($jumData/$dataPerPage);
 
// menampilkan link previous
 
if ($noPage > 1) echo  "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&lt;&lt; Prev</a>";
 
// memunculkan nomor halaman dan linknya
 
for($page = 1; $page <= $jumPage; $page++)
{
         if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage)) 
         {   
            if (($showPage == 1) && ($page != 2))  echo "..."; 
            if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "...";
            if ($page == $noPage) echo " <b>".$page."</b> ";
            else echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
            $showPage = $page;          
         }
}
 
// menampilkan link next
 
if ($noPage < $jumPage) echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next &gt;&gt;</a>";
 
?>

Wah panjang juga ya artikelnya.. tapi gak papa deh, mudah-mudahan ada manfaatnya bagi Anda. Selamat mencoba dan berpaging ria Jika Anda ingin mendownload scriptnya, silakan download di bawah ini

[ Download Script ]

Jangan lupa terus stay tune di blog ini karena pasti akan ada artikel-artikel menarik yang lain daripada yang lain seputar programming.

Beberapa artikel terkait

Share this article on:

Kata kunci: paging - PHP - script -

Ada 95 komentar dalam artikel ini.

Rius says:

October 31, 2009 at 6:50 pm

bagus artikelnya
tp gimana mas buatnya biar berupa class
biar ga report buat paging tiap halaman

thanks
robert wijaya says:

November 6, 2009 at 12:05 am

terima kasih artikelnya sangat membantu saya yang awam ttg php
terus berkarya mas, biar indonesia semakin maju.
rosihanari says:

November 6, 2009 at 3:16 am

@robert wijaya: siap.. laksanakan mas Robert thanks untuk motivasinya.
robert wijaya says:

November 8, 2009 at 2:59 am

maaf mas, mau tanya..
saya kan coba2 bkn web yg pake ajax n ada pagingnya, saya pake source code yang ada di atas bwt paging nampilkan barang2. nah masalah muncul pas gabungin file paging itu ke index, pas aku klik nomer2 hal paging itu index nya ikut berubah, semuanya menuju ke halaman paging. jadi index nya ga tampil, kan aneh klo ada website pas kita ngeklik paging, halaman utamanya hilang n ke paging semuanya… sory ngrepoti mas. tlg y klo bisa dibantu… thanks b4…
rosihanari says:

November 8, 2009 at 10:03 am

@robert wijaya: kalau begitu jadikan script di atas sebagai bagian dari halaman index mas. ada tinggal include kan desain template dari halaman webnya ke dalam script tsb.
robert wijaya says:

November 8, 2009 at 4:40 pm

iy mas uda bisa, sory sy masi cupu bgt ttg php, ini saya lg bikin skripsi tp toko elektronik online, tp blajar php mulai dari nol, cari2 dr google terus di edit2.he5.. thanks bgt mas. semoga websitenya semakin maju.
rosihanari says:

November 9, 2009 at 4:58 am

@robert wijaya: OK deh mas… thanks do’anya.
ary says:

November 10, 2009 at 8:01 pm

kalo data basenya db2 gmana bos..
robert wijaya says:

November 11, 2009 at 4:14 pm

mas sory baru nyadar, klo pke include kan brarti ajaxnya ga jalan. sy pake ajax dari http://www.dhimasronggobramantyo.com/artikel/Belajar_Ajax,_pelajari_segala_sesuatu_tentang_Ajax_dari_mulai_dari_dasar_hingga_contoh_aplikasi_Ajax#bookmark sedangkan pagingnya sy pake pny mas.. tolong pencerahannya gimana cara gabunginnya supaya pas di next halaman utamanya masih tetep ada.. thanks
azwar says:

November 27, 2009 at 9:52 pm

asslmkm.. mas, caranya paging kalo dengan database Oracle bagaimana? setahuku tidak bisa pake limit kyk di mysql. saya sudah hampir putus asa nih nyari di google.. ga ngerti2..
oya, kalo ada sekalian dengan contoh scriptnya.

tolong ya mas.. trimakasih sebelumnya..

Tolong beri komentar donk!

Komentar Anda akan berguna untuk kemajuan blog ini.

Mohon maaf, komentar yang menggunakan email palsu atau komentar bernada negatif atau cemooh secara otomatis akan terhapus karena dianggap spam dan tidak akan tampil dalam daftar komentar.

Dimohon jangan pula memasukkan code program dalam bentuk apapun ke dalam komentar karena akan dianggap spam.

Rosihan Ari`s Blog

Ide Membuat Advanced Paging dengan PHP

Beberapa artikel terkait

Ada 95 komentar dalam artikel ini.

Tolong beri komentar donk!

Komentar Anda akan berguna untuk kemajuan blog ini.

Search in This Blog

My Profile

Main Menu

Ads

Artikel Random

Komentar Terakhir

Lowongan Programmer PHP

Free Tutorial dari Saya

Login Status

Polling

Categories

Free Ebook dari Saya

Ads on My Blog

Recent Posts

Archives

Statistik Blog

Rosihan Ari`s Blog

Ide Membuat Advanced Paging dengan PHP

Beberapa artikel terkait

Ada 95 komentar dalam artikel ini.

Tolong beri komentar donk!Komentar Anda akan berguna untuk kemajuan blog ini.

Search in This Blog

My Profile

Main Menu

Ads

Artikel Random

Komentar Terakhir

Lowongan Programmer PHP

Free Tutorial dari Saya

Login Status

Polling

Categories

Free Ebook dari Saya

Ads on My Blog

Recent Posts

Archives

Statistik Blog

Tolong beri komentar donk!

Komentar Anda akan berguna untuk kemajuan blog ini.