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
// 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
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.
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 "
| Nama | Tanggal | Komentar | |
| ".$data['nama']." | ".$data['email']." | ".$data['tanggal']." | ".$data['komentar']." |
.
.
?>
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.
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 "
| Nama | Tanggal | Komentar | |
| ".$data['nama']." | ".$data['email']." | ".$data['tanggal']." | ".$data['komentar']." |
// 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 "<< Prev";
sehingga menjadi
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 "
| Nama | Tanggal | Komentar | |
| ".$data['nama']." | ".$data['email']." | ".$data['tanggal']." | ".$data['komentar']." |
// 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 "<< Prev";
.
.
?>
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 " ".$page." ";
else echo " ".$page." ";
$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 " ".$page." ";
else echo " ".$page." ";
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 "Next >>";
pada script, sehingga scriptnya menjadi
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 "
| Nama | Tanggal | Komentar | |
| ".$data['nama']." | ".$data['email']." | ".$data['tanggal']." | ".$data['komentar']." |
// 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 "<< Prev";
// 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 " ".$page." ";
else echo " ".$page." ";
$showPage = $page;
}
}
// menampilkan link next
if ($noPage < $jumPage) echo "Next >>";
?>
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
Tidak ada komentar:
Posting Komentar
silahkan komentar anda