Tutorial Lengkap Membuat Paging Halaman Dengan PHP
Tutorial Lengkap Membuat Paging Halaman Dengan PHP
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:
>
Sedangkan bila yang aktif adalah halaman terakhir (20) maka tampilan navigasinya
adalah
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.
01.
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.
01.
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 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
1.if ($noPage > 1) echo "<< Prev";
sehingga menjadi
01.
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:
>
Sedangkan bila yang aktif adalah halaman terakhir (20) maka tampilan navigasinya
adalah
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.
01.
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.
01.
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 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
1.if ($noPage > 1) echo "<< Prev";
sehingga menjadi
01.