-->
Home
code
php

Cara Membuat Pagination Menggunakan PHP dan MYSQL

Pagination


Membuat Pagination/paging Menggunakan PHP dan MYSQLI - Dikutip dari wikipedia, Pagination atau paging merupakan proses membagi dokumen menjadi halaman diskrit, baik halaman elktronik atau halaman cetak.

Kenapa harus membuat pagination?
Menurut saya, semakin banyaknya data yang diinput semakin panjang halaman yang dimuat, intinya membuat pagination ini untuk mempersimpel halaman, lebih rapih dan nyaman digunakan oleh pengguna. Banyak cara untuk membuat pagination, salah satunya cara yang saya gunakan di tulisan kali ini.

Berikut merupakan cara membuat pagination/paging menggunakan php mysqli:

1. Pembuatan Database
2. Pemuatan File Koneksi.php (membuat koneksi dengan database)
3. Pembuatan file/halaman index.php
4. Membuat pagination/paging didalam halaman index dengan query mysql

Pembuatan Database/Pemanggilan Database

Pada tutorial kali ini saya memiliki database dengan nama 'paging' dan tabel 'data_siswa' yang didalamnya terdapat 10 record data.



Pembuatan file koneksi.php

Setelah membuat database, lalu membuka text editor dan membuat file koneksi.php, source code pada file koneksi.php sebagai berikut... 
<?php
$koneksi = mysqli_connect("localhost", "root", "", "paging");
?>
"localhost"  : Server name
"root"          : Server username
""                : Password
"pagig"       : Database name 

Pembuatan file index.php/memanggil data dari database

Pada pembuatan file ini, pada halaman index menggunakan bantuan bootstrap untuk css, htmlnya, source code dari file index.php sebagai berikut.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container mt-lg-5"> 
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-header">Membuat Paging Menggunakan PHP & MYSQL Dengan Bootstap V4</div>
                    <div class="card-body">
                        <table class="table table-bordered text-center">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Kelas</th>
                                    <th>Jk</th>
                                </tr>
                            </thead>
                            <?php
                            include "koneksi.php";
                            $no = 1;
                            $halaman = (isset($_GET['halaman']))? (int) $_GET['halaman'] : 1;
                            $previous = $halaman - 1;
                            $next = $halaman + 1;
                            // Jumlah data yang akan di tampilkan pada halaman
                            $halamanTampil = 5;
                            $limit = ($halaman - 1) * $halamanTampil;

                            $sql_siswa = $koneksi->query("SELECT * FROM data_siswa LIMIT $limit, $halamanTampil");
                            while($data = $sql_siswa->fetch_assoc()){
                            ?>
                            <tbody>
                                <tr>
                                    <td><?= $no;?></td>
                                    <td><?= $data['nama'];?></td>
                                    <td><?= $data['kelas'];?></td>
                                    <td><?= $data['jk'];?></td>
                                </tr>
                            </tbody>
                            <?php $no++; }?>
                        </table>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
  </body>
</html>

Membuat Pagination Dalam File index.php

Code ini diletakan sehabis/sesudah code "</table>".

<ul class="pagination pagination-sm m-0 float-right ">
<?php
  // Jika halaman = 1, maka Linkprev disable
  if($halaman == 1){ 
  ?>        
  	<li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <?php
  }
  else{ 
  	$LinkPrev = ($halaman > 1)? $halaman - 1 : 1;
  ?>
  	<li class="page-item"><a class="page-link" href="index.php?halaman=<?= $LinkPrev; ?>">Previous</a></li>
  <?php
  }
  ?>

  <?php
    $SqlQuery = $koneksi->query("SELECT * FROM data_siswa");        

    //menghitung jumlah data yang ada di tabel database
    $JumlahData = mysqli_num_rows($SqlQuery);
    // Hitung jumlah halaman 
    $jumlahHalaman = ceil($JumlahData / $halamanTampil); 
    // Jumlah link nomer 
    $jumlahNumber = 1; 
    // Untuk awal link nomer
    $startNumber = ($halaman > $jumlahNumber)? $halaman - $jumlahNumber : 1; 
    // Untuk akhir link nomer
    $endNumber = ($halaman < ($jumlahHalaman - $jumlahNumber))? $halaman + $jumlahNumber : $jumlahHalaman; 
    for($i = $startNumber; $i <= $endNumber; $i++){
    $linkActive = ($halaman == $i)? ' class="active"' : '';
  ?>
  	<li class="page-item" <?= $linkActive; ?>><a class="page-link" href="index.php?halaman=<?= $i; ?>"><?= $i; ?></a></li>
  <?php
  }
  ?>

<!-- link Next Page -->
  <?php       
  if($halaman == $jumlahHalaman){ 
  ?>
  	<li class="page-item"><a class="page-link" href="#">Next</a></li>
  <?php
  }
  else{
  	$linkNext = ($halaman < $jumlahHalaman)? $halaman + 1 : $jumlahHalaman;
  ?>
  	<li class="page-item"><a class="page-link" href="index.php?halaman=<?= $linkNext; ?>">Next</a></li>
  <?php
  }
  ?>
</ul>
@Maribelajarcoding


Full Source Code

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container mt-lg-5"> 
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-header">Membuat Paging Menggunakan PHP & MYSQL Dengan Bootstap V4</div>
                    <div class="card-body">
                        <table class="table table-bordered text-center">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Kelas</th>
                                    <th>Jk</th>
                                </tr>
                            </thead>
                            <?php
                            include "koneksi.php";
                            $no = 1;
                            $halaman = (isset($_GET['halaman']))? (int) $_GET['halaman'] : 1;
                            $previous = $halaman - 1;
                            $next = $halaman + 1;
                            // Jumlah data yang akan di tampilkan pada halaman
                            $halamanTampil = 5;
                            $limit = ($halaman - 1) * $halamanTampil;

                            $sql_siswa = $koneksi->query("SELECT * FROM data_siswa LIMIT $limit, $halamanTampil");
                            while($data = $sql_siswa->fetch_assoc()){
                            ?>
                            <tbody>
                                <tr>
                                    <td><?= $no;?></td>
                                    <td><?= $data['nama'];?></td>
                                    <td><?= $data['kelas'];?></td>
                                    <td><?= $data['jk'];?></td>
                                </tr>
                            </tbody>
                            <?php $no++; }?>
                        </table>
                        <ul class="pagination pagination-sm m-0 float-right ">
                        <?php
                            // Jika halaman = 1, maka Linkprev disable
                            if($halaman == 1){ 
                            ?>        
                                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                            <?php
                            }
                            else{ 
                                $LinkPrev = ($halaman > 1)? $halaman - 1 : 1;
                            ?>
                                <li class="page-item"><a class="page-link" href="index.php?halaman=<?= $LinkPrev; ?>">Previous</a></li>
                            <?php
                                }
                            ?>

                            <?php
                            $SqlQuery = $koneksi->query("SELECT * FROM data_siswa");        
                            
                            //menghitung jumlah data yang ada di tabel database
                            $JumlahData = mysqli_num_rows($SqlQuery);
                            // Hitung jumlah halaman 
                            $jumlahHalaman = ceil($JumlahData / $halamanTampil); 
                            // Jumlah link nomer 
                            $jumlahNumber = 1; 
                            // Untuk awal link nomer
                            $startNumber = ($halaman > $jumlahNumber)? $halaman - $jumlahNumber : 1; 
                            // Untuk akhir link nomer
                            $endNumber = ($halaman < ($jumlahHalaman - $jumlahNumber))? $halaman + $jumlahNumber : $jumlahHalaman; 
                            for($i = $startNumber; $i <= $endNumber; $i++){
                                $linkActive = ($halaman == $i)? ' class="active"' : '';
                            ?>
                                <li class="page-item" <?= $linkActive; ?>><a class="page-link" href="index.php?halaman=<?= $i; ?>"><?= $i; ?></a></li>
                            <?php
                                }
                            ?>
                            
                            <!-- link Next Page -->
                            <?php       
                            if($halaman == $jumlahHalaman){ 
                            ?>
                                <li class="page-item"><a class="page-link" href="#">Next</a></li>
                            <?php
                            }
                            else{
                                $linkNext = ($halaman < $jumlahHalaman)? $halaman + 1 : $jumlahHalaman;
                            ?>
                                <li class="page-item"><a class="page-link" href="index.php?halaman=<?= $linkNext; ?>">Next</a></li>
                            <?php
                            }
                            ?>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
  </body>
</html>

Sekian dari tulisan ini, Jika kalian ingin mendownload file lengkapnya bisa di download dsini : 

Post a Comment