Pagination adalah sebuah teknik untuk membagi data yang ditampilkan ke dalam beberapa bagian halaman. Teknik ini biasanya digunakan untuk penyajian data yang banyak dari database. Jika kita tidak menggunakan pagination tentu akan mempersulit pengguna aplikasi karena data langsung ditampilkan dalam jumlah yang banyak. Hal ini selain membuat aplikasi kita akan loading lama, juga akan berpengaruh pada pengalaman pengguna (user experience).
Pagination yang akan kita buat menggunakan Bootstrap, Bootstrap sendiri hanya berfungsi untuk membuat tampilan halaman paging dan navigasinya menjadi lebih baik. Untuk mempelajari materi ini sebaiknya pelajari dulu cara membuat pagination dengan HTML dan PHP, serta membuat pagination dengan Bootstrap pada link berikut ini :
- https://agussuratna.net/2021/09/13/membuat-paging-dengan-html-php-dan-mysql/
- https://agussuratna.net/2022/01/24/tutorial-bootstrap-pagination-bootstrap/.
Langkah 1
Pada tahap pertama kita buat dulu databasenya, disini kita menggunakan MySql, pada tutorial kali ini akan membuat database tentang ‘perpustakaan‘.
- Membuat Database perpustakaan
create database penjualan;
- Membuat Tabel tbl_buku
create table tbl_buku ( idbuku varchar(20) not null primary key, judul varchar(100) not null, pengarang varchar(50) not null, penerbit varchar(50) not null );
- Insert contoh data ke Tabel tbl_buku
INSERT INTO tbl_buku(idbuku,judul,pengarang,penerbit) VALUES ('MAT001','Matematika 1','Ahmad Rozak','RPL Production'), ('MAT002','Matematika 2','Ahmad Rozak','RPL Production'), ('MAT003','Matematika 3','Ahmad Rozak','RPL Production'), ('MAT004','Matematika 4','Ahmad Rozak','RPL Production'), ('MAT005','Matematika 5','Ahmad Rozak','RPL Production'), ('MAT006','Matematika 6','Ahmad Rozak','RPL Production'), ('MAT007','Matematika 7','Ahmad Rozak','RPL Production'), ('MAT008','Matematika 8','Ahmad Rozak','RPL Production'), ('MAT009','Matematika 9','Ahmad Rozak','RPL Production'), ('MAT010','Matematika 10','Ahmad Rozak','RPL Production'), ('FIS001','Fisika 1','Asep Hadi','RPL Production'), ('FIS002','Fisika 2','Asep Hadi','RPL Production'), ('FIS003','Fisika 3','Asep Hadi','RPL Production'), ('FIS004','Fisika 4','Asep Hadi','RPL Production'), ('FIS005','Fisika 5','Asep Hadi','RPL Production'), ('FIS006','Fisika 6','Asep Hadi','RPL Production'), ('FIS007','Fisika 7','Asep Hadi','RPL Production'), ('FIS008','Fisika 8','Asep Hadi','RPL Production'), ('FIS009','Fisika 9','Asep Hadi','RPL Production'), ('FIS010','Fisika 10','Asep Hadi','RPL Production'), ('KIM001','Kimia 1','Rose Rihana','RPL Production'), ('KIM002','Kimia 2','Rose Rihana','RPL Production'), ('KIM003','Kimia 3','Rose Rihana','RPL Production'), ('KIM004','Kimia 4','Rose Rihana','RPL Production'), ('KIM005','Kimia 5','Rose Rihana','RPL Production'), ('KIM006','Kimia 6','Rose Rihana','RPL Production'), ('KIM007','Kimia 7','Rose Rihana','RPL Production'), ('KIM008','Kimia 8','Rose Rihana','RPL Production'), ('KIM009','Kimia 9','Rose Rihana','RPL Production'), ('KIM010','Kimia 10','Rose Rihana','RPL Production') ;
Langkah 2
Tahap kedua kita membuat file untuk menghubungkan/koneksi, antara file PHP yang akan kita buat dengan database di MySql. Kita buat dulu folder project di dalam htdocs misal dengan nama folder perpustakaan, selanjutnya kita buat file dengan nama koneksi.php dalam folder perpustakaan tersebut dengan sintak seperti berikut :
<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "perpustakaan";
$sambung=mysqli_connect($host,$user,$password,$dbname);
?>
Untuk menghubungkan dari php ke database menggunakan fungsi mysqli_connect dengan membawa parameter host, user, password yang digunakan di database dan database apa yang akan dikoneksikan. Disini kita akan koneksikan dengan database perpustakaan yang telah kita buat sebelumnya.
Langkah 3
Kita akan membuat tampilan paginationnya menggunakan bootstrap, kita bisa pelajari pada dokumentasi di situs resmi bootstrap pagination. Maka kita buatkan folder assets di dalam folder perpustakaan tadi, copy folder css dan js yang ada pada file bootstrap ke folder assets.
Untuk cara instalasi Bootstrap bisa dibaca pada link berikut ini : https://agussuratna.net/2021/02/06/pengertian-dan-cara-menggunakan-bootstrap/
Sekarang kita masuk pada pembahasan utama, dimana kita membuat pagination di PHP yang mengadopsi komponen pagination bootstrap.
Buatlah sebuah file php dengan nama buku.php (kita bisa menggunakan nama sesuai kebutuhan). Isi dari file tersebut adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Data Buku Perpustakaan</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<div class="container">
<br>
<h3><center>Data Buku Perpustakaan</center></h3>
<h4><center>Menggunakan Pagination di PHP dengan Bootstrap</center></h4>
<!--awal table-->
<table class="table table-striped table-hover table-bordered">
<br>
<!--awal header table-->
<tr>
<td>No</td>
<td>ID Buku</td>
<td>Judul</td>
<td>Pengarang</td>
<td>Penerbit</td>
</tr>
<!--akhir header table-->
<?php
//koneksi ke database melalui koneksi.php
include "koneksi.php";
//menentukan banyak nya data yang akan ditampilkan dalam 1 halaman
$batas = 5;
$halaman = @$_GET['halaman'];
if(empty($halaman)){
$posisi = 0;
$halaman = 1;
}
else{
$posisi = ($halaman-1) * $batas;
}
$no = $posisi+1;
//mengambil data dari tabel buku
$ambildata = mysqli_query($sambung, "select * from tbl_buku order by idbuku desc limit $posisi,$batas");
while ($tampildata = mysqli_fetch_array($ambildata)) {
?>
<!--awal menampilkan data dari tabel buku ke halaman web-->
<tr>
<td> <?php echo $no++;?> </td>
<td> <?php echo $tampildata["idbuku"]; ?> </td>
<td> <?php echo $tampildata["judul"];?> </td>
<td> <?php echo $tampildata["pengarang"];?> </td>
<td> <?php echo $tampildata["penerbit"];?> </td>
</tr>
<!--akhir menampilkan data dari tabel buku ke halaman web-->
<?php
}
?>
</table>
<!--akhir table-->
<hr>
<!--awal menentukan banyaknya halaman pagination-->
<?php
$query2 = mysqli_query($sambung, "select * from tbl_buku");
$jumlahdata = mysqli_num_rows($query2);
$jumlahhalaman = ceil($jumlahdata/$batas);
?>
<!--akhir menentukan banyaknya halaman pagination-->
<!--awal navigasi pagination-->
<nav>
<ul class="pagination justify-content-center">
<?php
for($i=1;$i<=$jumlahhalaman;$i++) {
if ($i != $halaman) {
echo "<li class='page-item'><a class='page-link' href='buku.php?halaman=$i'>$i</a></li>";
}
else {
echo "<li class='page-item active'><a class='page-link' href='#'>$i</a></li>";
}
}
?>
</ul>
</nav>
<!--akhir navigasi pagination-->
</div>
</body>
</html>
Penjelasan :
Beberapa point penting pada sintak di atas yaitu : halaman paging yang dibuat dibagi masing-masing 5 data dalam 1 halaman. Kita bisa mengganti sesuai kebutuhan pada variabel $batas.
Ketika ada nilai dari variabel $halaman dengan method GET, yang artinya bahwa halaman paging diklik, maka query sql-nya untuk posisi dan batas akan mengikuti berdasarkan perhitungan rumus $posisi = ($halaman-1) * $batas; data akan ditampilkan pada posisi selanjutnya dengan batas yang sama.
Pada contoh di atas mempunyai 30 data pada tabel tbl_buku sehingga ketika dibagi per halamannya 5 data maka akan mempunyai 6 halaman tampilan data.
Berikut merupakan hasil dari pagination pada sintak di atas :
Pada halaman pertama menampilkan 5 data buku, nantinya ketika halaman kedua dklik maka data buku yang ke-6 sampai ke-10 yang akan ditampilkan. Selanjutnya ketika mengklik pada halaman ke-3 maka akan tampil data dari 11 sampai 15. Seterusnya hingga halaman ke 6 akan menampilkan data dengan batas 5 data per halaman. Apabila data buku di database kita tambahkan maka jumlah halaman paging akan semakin bertambah sesuai dengan jumlah data yang ada.
Demikian tutorial cara membuat pagination dengan PHP dan Bootstrap untuk menampilkan data dari database MySql, jika ada pertanyaan bisa dituliskan pada kolom komentar.
Semoga bermanfaat.
Be the first to comment