PHP - Membuat Paging Halaman dengan PHP dan MySQL

PHP - Membuat Paging Halaman dengan PHP dan MySQL

Ketika di suatu website memiliki banyak tulisan, maka sudah saatnya untuk dibangun sebuah sistem halaman/paging untuk menayangkannya, hal ini dilakukan agar pengguna bisa lebih nyaman ketika berinteraksi dengan website. Andaikan jika terdapat situs yang memiliki ratusan atau ribuan artikel, bahkan mungkin lebih dari itu, dan semua daftar judul artikelnya ditayangkan total tentu tidak nyaman dilihat. Untuk itu, perlu adanya sistem navigasi/paging, sehingga dapat membatasi jumlah judul tulisan untuk ditayangkan, entah 20, 50, atau 100 judul saja.

Pada tulisan ini saya akan menjelaskan cara untuk membuat paging dengan menggunakan PHP dan MySQL. Berikut ini studi kasus dalam membuat php paging.

Kita memiliki sejumlah data judul yang akan ditayangkan, dengan kondisi yaitu seperti pada gambar di bawah ini:

Buat file koneksi.php untuk membuat koneksi dengan server lokal, kodenya adalah di bawah ini:

<?php
    $host   = "localhost";
    $user   = "root";
    $pass   = "";
    $db     = "db_test";

    //membuat koneksi
    $konek  = mysql_connect($host,$user, $pass);

    //memilih database
    $p_db   = mysql_select_db($db);

    //cek koneksi
    if(!$konek){
        echo "koneksi gagal";
    }

    //cek database
    if(!$p_db){
        echo "database tidak ditemukan";
    }
?>

Selanjutnya Buat file index.php (atau nama lainnya) dengan kode di bawah ini:

<?php
    include("koneksi.php");

    //mengambil data
    $ambildata = mysql_query("SELECT * FROM post");

    //menghitung jumlah baris
    $jml_baris = mysql_num_rows($ambildata);

    //menayangkan jumlah baris
    echo $jml_baris;

?>

Pada kode di atas, dilaksanakan perintah mengambil seluruh data dari semua kolom pada tabel "post" kemudian ditampung didalam $ambildata, setelah itu, menghitung jumlah baris dari $ambildataselanjutnya menayangkan hasil hitungannya.

Sampai saat ini Anda telah berhasil dalam menayangkan jumlah baris dari data didalam tabel post. Masih didalam file index.php, coba tayangkan seluruh datanya, dengan menambahkan kode berikut ini:

//menayangkan semua judul
while($data = mysql_fetch_assoc($ambildata)){
    echo $data["Judul"]."<br/>";
}

Coba lagi untuk menayangkan data dengan batasan, misalkan hingga 4 judul, ubah kode diatas menjadi seperti dibawah ini:

//menayangkan semua judul
$data_limit = mysql_query("SELECT * FROM post limit 0, 4");
while(($data = mysql_fetch_assoc($data_limit))){
    echo $data["Judul"]."<br/>";
}
//koding berikutnya di sini...

Pada code di atas, berarti perintah Anda adalah menampilkan Judul mulai pada index ke 0 dengan batas hingga 4 buah Judul.  Selanjutnya buat kodingan untuk menggenerasikan jumlah halaman

//membuat navigasi
#menentukan batas jumlah data yang ditayangkan
$nilaibatas = 4;

#meng-cek nilai sisa pembagian
$sisa = $jml_baris % $nilaibatas;

#menghitung jumlah halaman yang bisa dibuat
$jml_hal = ($jml_baris - $sisa) / $nilaibatas;
if($sisa > 0){
    $jml_hal += 1;
}

for($b = 1; $b <= $jml_hal; $b++){
    echo "<a href='?hal=".$b."'>".$b."</a>";
}

Agar lebih memahami logika kode di atas, coba ganti nilai variabel $nilaibatas. Lihat baik-baik perbedaan url ketika Anda coba untuk meng-klik link yang telah dibuat otomatis tadi, Anda akan memanfaatkan value dari hal untuk menjalankan sistem paging. Cara untuk memanfaatkannya yaitu, buat pengkondisian jika variabel tadi muncul di url, ambil nilainya dengan kode berikut:

$awal = 0;
if(isset($_GET["hal"])){
    $hal = $_GET["hal"];
    $hal--;
    $hal *= 4;
    $awal = $hal;
}

pada kode di atas,$awal berfungsi untuk menampung nilai index baris awal dari daftar Judul yang akan ditampilkan. misalkan jika nilainya adalah 2, maka halaman akan menampilkan daftar judul dimulai pada index ke 2.

Selanjutnya, manfaatkan kode yang digunakan mengatur batas awal Judul untuk mengatur batasan kueri pemanggilan urutan baris Judul, saya menggunakan batasan jumlah Judul yang ditayangkan yaitu hingga 4 buah Judul, kodenya adalah seperti di bawah ini:

//menayangkan semua judul
$data_limit = mysql_query("SELECT * FROM post limit ".$awal.", 4");
while(($data = mysql_fetch_assoc($data_limit))){
    echo $data["Judul"]."<br/>";
}

Berikut ini saya berikan kode lengkap untuk file index.php agar lebih mudah untuk menentukan alur perintahnya:

<?php
    include("koneksi.php");

    //mengambil data
    $ambildata = mysql_query("SELECT * FROM post");

    //menghitung jumlah baris
    $jml_baris = mysql_num_rows($ambildata);

$awal = 0;
if(isset($_GET["hal"])){
    $hal = $_GET["hal"];
    $hal--;
    $hal *= 4;
    $awal = $hal;
}

//menayangkan semua judul
$data_limit = mysql_query("SELECT * FROM post limit ".$awal.", 4");
while(($data = mysql_fetch_assoc($data_limit))){
    echo $data["Judul"]."<br/>";
}

//membuat navigasi
#menentukan batas jumlah data yang ditayangkan
$nilaibatas = 4;

#meng-cek nilai sisa pembagian
$sisa = $jml_baris % $nilaibatas;

#menghitung jumlah halaman yang bisa dibuat
$jml_hal = ($jml_baris - $sisa) / $nilaibatas;
if($sisa > 0){
    $jml_hal += 1;
}

for($b = 1; $b <= $jml_hal; $b++){
    echo "<a href='?hal=".$b."'>".$b."</a>";
}
    
?>

Sampai di sini seharusnya tidak ada masalah, namun jika Anda menemui kendala dalam implementasi tulisan saya ini atau mungkin ada pertanyaan lain, silahkan berikan komentar.

Pembaruan 

Saya menggunakan kode yang lebih ringkas dengan fungsi yang sama seperti sebelumnya, dan mengalihkan kode di koneksi.php ke index.php. Jadi file yang perlu Anda gunakan yaitu hanya index.php dengan isi kode di bawah ini:

<?php
//koneksi dan menentukan database
mysql_select_db("world", mysql_connect("localhost", "root", ""));

//index awal data yang ingin ditampilkan
$default_index = 0;

//batasan menampilkan data
$default_batas = 8;

//jika terdapat nilai batas di URL, gunakan untuk mengganti nilai default $default_batas
if(isset($_GET['batas']))
{
    $default_batas = $_GET['batas'];
}

//jika terdapat nilai halaman di URL, gunakan untuk mengganti nilai dafault dari $default_index
if(isset($_GET['halaman']))
{
    $default_index = ($_GET['halaman']-1) * $default_batas;
}

/*
 * ambil beberapa data kolom di tabel dengan data yang ditayangkan
 * mulai dari index ke ($default_index) dengan jumlah hingga
 * sebanyak ($default_batas)
*/
$ambil_data = mysql_query("SELECT Name, Region, Population, GNP FROM country limit ".$default_index.", ".$default_batas);

#menghitung total baris di tabel country
$total_baris = mysql_num_rows(
        //mengambil data di tabel country
        mysql_query("SELECT * FROM country")
    );

# MEMBUAT TOMBOL PAGING
$nomor_paging = 1;
$html_paging = "<ul class='pagination'>";
while($total_baris - $default_batas > 0)
{
    $html_paging .= "<li><a href='?halaman=".$nomor_paging."&batas=".$default_batas."'>".$nomor_paging."</a></li>";
    $nomor_paging++;
    $total_baris -= $default_batas;
}
if($total_baris > 0)
{
    $html_paging .= "<li><a href='?halaman=".$nomor_paging."&batas=".$default_batas."'>".$nomor_paging."</a></li>";
}
$html_paging .= "</ul>";

# MEMBUAT TABEL YANG MENAYANGKAN DATA
$output_html = "<table class='table table-bordered'>".
                    "<tr>".
                        "<th>Nomor</th>".
                        "<th>Name</th>".
                        "<th>Region</th>".
                        "<th>Population</th>".
                        "<th>GNP</th>".
                    "<tr/>";

//perulangan membuat list data
$nomor_baris = $default_index + 1;
while($data = mysql_fetch_assoc($ambil_data))
{
    $output_html .= "<tr>".
                        "<td>".$nomor_baris."</td>".
                        "<td>".$data["Name"]."</td>".
                        "<td>".$data["Region"]."</td>".
                        "<td>".$data["Population"]."</td>".
                        "<td>".$data["GNP"]."</td>".
                    "</tr>";
    $nomor_baris++;
}
$output_html .= "</table>";
?>
<html>
    <head>
        <!--styling instan dengan memanfaatkan framework bootstrap-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    </head>
    <body>
        <div class="container">
            <div class="form-group" style="float:left">
                <span>Tampilkan hingga :</span>
                <input value='<?php echo $default_batas?>'/>
                <span>baris</span>
            </div>
            <!--tayangkan tabel country-->
            <?php echo $output_html?>
            <?php echo $html_paging?>
        </div>
    </body>
</html>

Database world bisa Anda dapatkan di sini: world.sql