Cara Membuat Pagination di PHP dengan Bootstrap

Ditulis Oleh:

Cara membuat pagination di PHP dengan Bootstrap – Pagination adalah sebuah teknik untuk membagi data yang ditampilkan kedalam 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).

Baca juga : Combobox bertingkat di PHP

Pagination yang akan kita buat menggunakan Bootstrap, Kalian bisa belajar penggunaan pagination bootstrap. Bootstrap sendiri hanya berfungsi untuk membuat tampilan halaman paging dan navigasinya menjadi lebih baik. Langsung saja ikuti langkah-langkah berikut ini untuk membuat halaman paging di PHP dengan Bootstrap.

Buat Database

Pada tahap pertama kita buat dulu databasenya, disini kita menggunakan database mysql. Untuk membuat database kalian bisa baca cara membuat database mysql. Pada tutoria kali ini saya akan membuat database tentang ‘penjualan

Membuat Database Penjualan

create database penjualan;

Membuat Tabel Barang

create table barang (
id_barang int not null auto_increment primary key,
nama_barang varchar(20) not null,
harga int,
stok int
);

Insert Contoh Data ke Tabel Barang

INSERT INTO barang(nama_barang,harga,stok)
VALUES ('Sepatu',250000,10),
       ('Tas',175000,20),
       ('Topi',45000,30),
       ('Kaos',88000,10),
       ('Celana',96000,40),
       ('Meja',350000,20),
       ('Kursi',250000,20),
       ('Lemari',45000,50),
       ('Kaos Kaki',23000,10),
       ('Buku',17000,30),
       ('Kaca Mata',85000,10),
       ('Jam Tangan',175000,20),
       ('Jaket',45000,50),
       ('Kerudung',88000,30),
       ('Gelang',50500,40),
       ('Kalung',90000,5),
       ('Sendal',23500,20),
       ('Kemeja',125000,23),
       ('Gelas',11500,12),
       ('Piring',12800,24),
       ('Handuk',35000,10),
       ('Sabun',1000,90),
       ('Gunting',5000,8),
       ('Sapu',10000,15),
       ('Ember',30000,10);

Buat Koneksi Database

Tahap kedua kita membuat file untuk menghubungkan, antara file PHP yang akan kita buat dengan database di mysql.

<?php

$host="localhost";
$user="root";
$password="";
$db="penjualan";

$kon = mysqli_connect($host,$user,$password,$db);
if (!$kon){
	  die("Koneksi gagal:".mysqli_connect_error());
}
?>

Untuk menghubungkan dari php ke database menggunakan fungsi mysqli_connect dengan membawa parameter host,user,password yang digunakan didatabase dan database apa yang akan dikoneksikan. Disini kita akan koneksikan dengan database penjualan yang telah kita buat sebelumnya.

Mungkin anda berminat : Pencarian data dengan PHP

Pagination Bootstrap

Kita akan membuat tampilan paginationnya menggunakan bootstrap. Kalian bisa pelajari pada dokumentasi di situs resmi bootstrap pagination.

Sintak untuk membuat pagination dibootstrap adalah seperti berikut:

 <ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul> 

Tampilan komponen paging di bootstrap akan seperti gambar ini:

pagibation bootstrap

Buat kalian yang ingin belajar cara menggunakan bootstrap bisa dipelajari dulu, saya sudah membahas secara lengkap pada postingan tersebut.

Membuat Pagination di PHP

Sekarang kita masuk pada pembahasan utama, dimana kita membuat pagination di PHP yang mengadopsi komponen pagination bootstrap.

Buatlah sebuah file php dengan nama index.php (kalian bisa menggunakan nama sesuai kebutuhan kalian). Isi dari file tersebut adalah sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <!-- Load file CSS Bootstrap offline -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <br>
    <h4>Pagination di PHP dengan Bootstrap</h4>

    <table class="table table-bordered table-hover">
        <br>
        <thead>
        <tr>
            <th>No</th>
            <th>Barang</th>
            <th>Harga</th>
            <th>Stok</th>
        </tr>
        </thead>
        <?php

        include "koneksi.php";
        $batas   = 5;
        $halaman = @$_GET['halaman'];
            if(empty($halaman)){
                $posisi  = 0;
                $halaman = 1;
            }
            else{
                $posisi  = ($halaman-1) * $batas;
            }

        $no = $posisi+1;
        $sql="select * from barang order by id_barang desc limit $posisi,$batas";
        $hasil=mysqli_query($kon,$sql);
        while ($data = mysqli_fetch_array($hasil)) {
            ?>
            <tbody>
            <tr>
                <td><?php echo $no;?></td>
                <td><?php echo $data["nama_barang"]; ?></td>
                <td><?php echo $data["harga"];   ?></td>
                <td><?php echo $data["stok"];   ?></td>

            </tr>
            </tbody>
            <?php
            $no++;
        }
        ?>
    </table>
    <hr>
    <?php

    $query2     = mysqli_query($kon, "select * from barang");
    $jmldata    = mysqli_num_rows($query2);
    $jmlhalaman = ceil($jmldata/$batas);
    ?>
    <div class="text-center">
        <ul class="pagination">
            <?php
            for($i=1;$i<=$jmlhalaman;$i++) {
                if ($i != $halaman) {
                    echo "<li class='page-item'><a class='page-link' href='index.php?halaman=$i'>$i</a></li>";
                } else {
                    echo "<li class='page-item active'><a class='page-link' href='#'>$i</a></li>";
                }
            }
            ?>
        </ul>
    </div>
</div>
</body>
</html>

Penjelasan:

Saya akan sedikit menjelaskan beberapa point penting pada program diatas. dimana halaman paging yang saya buat di bagi masing-masing 5 data dalam satu halaman. Kalian bisa mengganti sesuai kebutuhan pada variabel $batas.

Ketika ada nilai dari variabel halaman dengan method GET, yang artinya bahwa halaman paging di klik, maka query sql nyauntuk posisi dan batas akan mengikuti berdasarkan perhitungan rumus $posisi = ($halaman-1) * $batas; data akan ditampilkan pada posisi selanjutnya dengan batas yang sama.

Artikel lainnya : Membuat form pendaftaraan di PHP

Pada contoh diatas saya mempunyai 25 data pada tabel barang sehingga ketika dibagi per halamannya 5 data maka akan mempunyai 5 halaman tampilan data.

Agar lebih jelasnya langsung saja kita uji coba programnya. Berikut saya screenshot beberapa contoh membuat pagination di php

contoh pagination php

Pada halaman pertama menampilkan 5 data barang, nantinya ketika halaman kedua dklik maka data barang yang ke 6 sampai ke 10 yang akan ditampilkan

Selanjutnya ketika saya mengklik pada halaman ke 3 maka akan tampil data dari 11 sampai 15

Seterusnya hingga halaman ke 5 akan menampilkan data dengan batas 5 data per halaman. Apabila data barang didatabase kita tambahkan maka jumlah halaman paging akan semakin bertambah sesuai dengan jumlah data yang ada.