Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  |  | 

PHP Tips and Trick

Cara Mudah Membuat Pagination dengan PHP dan MySQL

img-responsive

Dalam tutorial kali ini, saya akan membahas bagaimana cara membuat pagination dengan PHP. Apa itu pagination? Pagination atau yang lebih dikenal dengan istilah “Paging” adalah salah satu cara untuk menampilkan data yang sangat banyak dengan cara membagi-baginya menjadi beberapa halaman. Bingung? saya kasih contoh kasus saja. Misalkan saya mempunyai 1000 data di database. Kalau kita tidak menggunakan yang namanya “Pagination”, berarti 1000 data tersebut akan kita tampilkan semuanya dalam 1 halaman website benar? dan saya jamin akan memakan waktu untuk men-load semua data tersebut. Disinilah “Pagination” akan benar-benar bermanfaat, karena kalau kita menggunakan pagination terhadap 1000 data tadi. Kita bisa membagi-baginya ke dalam beberapa halaman. Misalkan kita bagi per halamannya 100 data, berarti jumlah halamannya ada 10 halaman benar?. Otomatis waktu untuk men-load data pun akan berkurang, karena data yang diload hanya 100 data, tidak semuanya. Kurang lebih begitu mengenai pagination.

Masih kurang jelas juga dengan penjelasan saya diatas? Dibawah ini saya kasih gambar contoh pagination itu seperti apa.

 Contoh Pagination - Cara Mudah Membuat Pagination dengan PHP - My Notes Code

Ya, kurang lebih seperti gambar diatas penampakan dari yang namanya “Pagination”. Mungkin setelah melihat penampakanya, pasti tidak asing kan? hehe. Oke tidak usah banyak basa-basi lagi, langsung saja ikutin step by step nya berikut ini.


DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN
Berikut ini adalah hal-hal yang harus dipersiapkan :

  1. Download Bootstrap, klik link berikut : Download. Sebenarnya untuk membuat pagination tidak memerlukan bootstrap, tapi dalam tutorial ini kenapa saya gunakan bootstrap hanya untuk desain tampilan dari paginationnya.
    Bingung cara downloadnya? klik disini untuk melihat caranya.
  2. Buat sebuah folder baru dengan nama pagination, lalu simpan pada folder xampp/htdocs/.
  3. Buat sebuah folder dengan nama css, lalu simpan pada folder xampp/htdocs/pagination/.
  4. Esktrak file bootstrap.7z yang telah didownload tadi.
  5. Copy and paste folder fonts dari folder bootstrap yang telah diekstrak tadi ke folder xampp/htdocs/pagination/.
  6. Copy and paste file bootstrap.min.css dari folder bootstrap/css/ yang telah diekstrak tadi ke folder xampp/htdocs/pagination/css/.

STEP 2 – DATABASE

Pada step ini, kita akan membuat databasenya. ikuti langkah-langkah berikut ini :

  1. Buat sebuah database dengan nama mynotescode.
  2. Buat sebuah tabel dengan nama siswa. Struktur tabelnya sebagai berikut :
    Struktur Tabel - Cara Mudah Membuat Pagination dengan PHP

    CREATE TABLE IF NOT EXISTS `siswa` (
      `nis` varchar(11) NOT NULL,
      `nama` varchar(50) NOT NULL,
      `jenis_kelamin` varchar(10) NOT NULL,
      `telp` varchar(15) NOT NULL,
      `alamat` text NOT NULL,
      PRIMARY KEY (`nis`)
    )

STEP 3 – KONEKSI DATABASE

Pada step ini, kita akan membuat file koneksi.php yang berfungsi untuk menghubungkan dengan database MySQL. Silahkan buat file koneksi.php, lalu simpan di folder xampp/htdocs/pagination/. Berikut ini kodenya :

<?php
$host = 'localhost'; // Nama hostnya
$username = 'root'; // Username
$password = ''; // Password (Isi jika menggunakan password)
$database = 'mynotescode'; // Nama databasenya

// Koneksi ke MySQL dengan PDO
$pdo = new PDO('mysql:host='.$host.';dbname='.$database, $username, $password);
?>

STEP 4 – VIEW & PAGINATION

Langkah terakhir, kita akan membuat file utama. Buat sebuah file dengan nama index.php, lalu simpan pada folder xampp/htdocs/pagination/. Berikut tampilan dan kodenya :

View - Cara Mudah Membuat Pagination dengan PHP

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pagination dengan PHP</title>

    <!-- Load File bootstrap.min.css yang ada difolder css -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
    .align-middle{
      vertical-align: middle !important;
    }
    </style>
  </head>
  <body>
    <!-- Membuat Menu Header / Navbar -->
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#" style="color: white;"><b>Pagination dengan PHP</b></a>
        </div>
        <p class="navbar-text navbar-right hidden-xs" style="color: white;padding-right: 10px;">
          FOLLOW US ON &nbsp;
          <a target="_blank" style="background: #3b5998; padding: 0 5px; border-radius: 4px; color: #f7f7f7; text-decoration: none;" href="https://www.facebook.com/mynotescode">Facebook</a> 
          <a target="_blank" style="background: #00aced; padding: 0 5px; border-radius: 4px; color: #ffffff; text-decoration: none;" href="https://twitter.com/mynotescode">Twitter</a> 
          <a target="_blank" style="background: #d34836; padding: 0 5px; border-radius: 4px; color: #ffffff; text-decoration: none;" href="https://plus.google.com/118319575543333993544">Google+</a>
          <a target="_blank" style="background: #fff; padding: 0 5px; border-radius: 4px; color: #d34836; text-decoration: none;" href="https://www.youtube.com/channel/UCO394itv-u7Tn4CgI3bMYIg">YouTube</a>
        </p>
      </div>
    </nav>
    
    <div style="padding: 0 15px;">
      <div class="table-responsive">
        <table class="table table-bordered">
          <tr>
            <th class="text-center">NO</th>
            <th>NIS</th>
            <th>NAMA</th>
            <th>JENIS KELAMIN</th>
            <th>TELP</th>
            <th>ALAMAT</th>
          </tr>
          <?php
          // Include / load file koneksi.php
          include "koneksi.php";
          
          // Cek apakah terdapat data page pada URL
          $page = (isset($_GET['page']))? $_GET['page'] : 1;
          
          $limit = 5; // Jumlah data per halamannya
          
          // Untuk menentukan dari data ke berapa yang akan ditampilkan pada tabel yang ada di database
          $limit_start = ($page - 1) * $limit;
          
          // Buat query untuk menampilkan data siswa sesuai limit yang ditentukan
          $sql = $pdo->prepare("SELECT * FROM siswa LIMIT ".$limit_start.",".$limit);
          $sql->execute(); // Eksekusi querynya
          
          $no = $limit_start + 1; // Untuk penomoran tabel
          while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
          ?>
            <tr>
              <td class="align-middle text-center"><?php echo $no; ?></td>
              <td class="align-middle"><?php echo $data['nis']; ?></td>
              <td class="align-middle"><?php echo $data['nama']; ?></td>
              <td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td>
              <td class="align-middle"><?php echo $data['telp']; ?></td>
              <td class="align-middle"><?php echo $data['alamat']; ?></td>
            </tr>
          <?php
            $no++; // Tambah 1 setiap kali looping
          }
          ?>
        </table>
      </div>
      
      <!--
      -- Buat Paginationnya
      -- Dengan bootstrap, kita jadi dimudahkan untuk membuat tombol-tombol pagination dengan design yang bagus tentunya
      -->
      <ul class="pagination">
        <!-- LINK FIRST AND PREV -->
        <?php
        if($page == 1){ // Jika page adalah page ke 1, maka disable link PREV
        ?>
          <li class="disabled"><a href="#">First</a></li>
          <li class="disabled"><a href="#">&laquo;</a></li>
        <?php
        }else{ // Jika page bukan page ke 1
          $link_prev = ($page > 1)? $page - 1 : 1;
        ?>
          <li><a href="index.php?page=1">First</a></li>
          <li><a href="index.php?page=<?php echo $link_prev; ?>">&laquo;</a></li>
        <?php
        }
        ?>
        
        <!-- LINK NUMBER -->
        <?php
        // Buat query untuk menghitung semua jumlah data
        $sql2 = $pdo->prepare("SELECT COUNT(*) AS jumlah FROM siswa");
        $sql2->execute(); // Eksekusi querynya
        $get_jumlah = $sql2->fetch();
        
        $jumlah_page = ceil($get_jumlah['jumlah'] / $limit); // Hitung jumlah halamannya
        $jumlah_number = 3; // Tentukan jumlah link number sebelum dan sesudah page yang aktif
        $start_number = ($page > $jumlah_number)? $page - $jumlah_number : 1; // Untuk awal link number
        $end_number = ($page < ($jumlah_page - $jumlah_number))? $page + $jumlah_number : $jumlah_page; // Untuk akhir link number
        
        for($i = $start_number; $i <= $end_number; $i++){
          $link_active = ($page == $i)? ' class="active"' : '';
        ?>
          <li<?php echo $link_active; ?>><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
        <?php
        }
        ?>
        
        <!-- LINK NEXT AND LAST -->
        <?php
        // Jika page sama dengan jumlah page, maka disable link NEXT nya
        // Artinya page tersebut adalah page terakhir 
        if($page == $jumlah_page){ // Jika page terakhir
        ?>
          <li class="disabled"><a href="#">&raquo;</a></li>
          <li class="disabled"><a href="#">Last</a></li>
        <?php
        }else{ // Jika Bukan page terakhir
          $link_next = ($page < $jumlah_page)? $page + 1 : $jumlah_page;
        ?>
          <li><a href="index.php?page=<?php echo $link_next; ?>">&raquo;</a></li>
          <li><a href="index.php?page=<?php echo $jumlah_page; ?>">Last</a></li>
        <?php
        }
        ?>
      </ul>
    </div>
  </body>
</html>

Penjelasan tambahan dari skrip diatas :

include “koneksi.php”;
Kode tersebut berfungsi untuk me-load file koneksi.php.

$sql = $pdo->prepare(“SELECT * FROM siswa LIMIT “.$limit_start.”,”.$limit);
$sql->execute();
Untuk menampilkan semua data siswa sesuai limit yang kita telah tentukan ($limit_start, $limit).

$data = $sql->fetch()
Kode tersebut berfungsi untuk mengambil semua data hasil query dan menampung data-data tersebut di dalam sebuah array lalu menyimpannya ke dalam variabel $data. Kode tersebut saya simpan di dalam sebuah kode while(….) yang berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.

<tr>
  <td class="align-middle text-center"><?php echo $no; ?></td>
  <td class="align-middle"><?php echo $data['nis']; ?></td>
  <td class="align-middle"><?php echo $data['nama']; ?></td>
  <td class="align-middle"><?php echo $data['jenis_kelamin']; ?></td>
  <td class="align-middle"><?php echo $data['telp']; ?></td>
  <td class="align-middle"><?php echo $data['alamat']; ?></td>
</tr>

Pada kode diatas terdapat variabel $data digunakan untuk mengambil isi dari field-field yang ada pada tabel siswa di database mynotescode. Pada kode diatas juga ada kode yang berada pada tanda [‘……’], kode tersebut harus sama dengan nama field yang ada pada tabel siswa.

$jumlah_page = ceil($get_jumlah[‘jumlah’] / $limit);
Untuk menghitung jumlah halaman. Perhitungan ini diambil berdasarkan jumlah_semua_data dibagi dengan limit_per_halaman yang telah ditentukan.

$jumlah_number = 3;
Untuk menentukan jumlah link number sebelum dan sesudah page yang aktif. Bingung? lihat gambar dibawah ini :

Penjelasan - Cara Mudah Membuat Pagination dengan PHP

Pada gambar diatas, yang saya beri garis warna merah. itu lah yang saya maksud dengan “Link Number sebelum dan sesudah” page yang aktif.

Mungkin sekian penjelasan tambahannya, selebihnya sudah saya jelaskan per masing-masing kode.


Sekian untuk catatan kali ini. Semoga catatan ini bisa bermanfaat. Apabila ada yang ingin ditanyakan, langsung tanyakan saja lewat form komentar dibawah ini. Jangan lupa LIKE & SHARE nya hehe. Terimakasih.


SOURCE CODE
Untuk mengunduh source code nya, klik link berikut ini : Download.
Bingung cara downloadnya? klik disini untuk melihat caranya.


SUMBER & REFERENSI
Dokumentasi Style Pagination  : http://getbootstrap.com/components/#pagination

Tutorial membuat pagination dengan PHP, Tutorial membuat pagging dengan PHP, Cara Mudah Membuat paging dengan PHP, Tutorial step by step membuat pagination dengan PHP, Tutorial step by step membuat paging dengan PHP

Pagination

(Total : 9,319 viewers, 60 viewers today)
cara-mudah-membuat-pagination-dengan-php-dan-mysql

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

21 Comments

  1. tyasmoro

    thanks gan untuk ilmu nya

    • Rizaldi Maulidia Achmad

      sama-sama om 😀

    • Rizaldi Maulidia Achmad

      Sama-sama om. Senang bisa membantu.
      Paling nanti malam saya cek nya om, soalnya sekarang lagi diluar

    • Rizaldi Maulidia Achmad

      kalau saya lihat dari tutrial web dinamis tersebut. disitu pada setiap link ditambahkan parameter “page” dengan value halaman yang dituju yang sudah ditentukan oleh switch case. silahkan om tambahkan juga parameter page tersebut pada setiap link paginationnya. apabila masih sulit mengatasi hal ini, silahkan kirim kan source code yang sudah dibuat lewat fans page fb kami, biar bisa saya cek

      • batamdev

        alhamdulillah sudah bisa jadinya seperti ini =index.php?page=data&halaman=3

  2. Fajarlord

    Thanks tutorial nya mas.
    Tpi ada prtanyaan nih, kenapa kalau datanya kosong, tombol next sama last masih bisa di klik.

    • Rizaldi Maulidia Achmad

      Sama-sama om.
      Oh nanti paling malam saya coba cek om. Nanti saya kabari.

      • Hafied Mustaman

        gan, saya udah coba cara yg diatas ternyata bisa muncul tombol paginationnya.
        tapi untuk data nya muncul cuma 2 page. untuk page selanjutnya kosong sampe terakhir.
        mohon bantuannya ya, gan
        terima kasih

        • Rizaldi Maulidia Achmad

          coba kirim file index.php nya ke saya lewat fans page fb kami om, saya mau cek

  3. Irsyadul

    Saya mau nanya gan, jika menggunakan PDO apakah tidak bisa mengakses modal ya?

    • Rizaldi Maulidia Achmad

      Di gabung sama pencarian yang tanpa refresh halaman?
      Kalau mau nunggu saya buatkan tutorial nya om. Tapi butuh waktu seminggu untuk buat tutor tersebut. Kalau di jelaskan disini lumayan panjang om hehe

      • Valen Rizky

        Oke, Mas. Saya tunggu tutorialnya, Terima Kasih

        • Rizaldi Maulidia Achmad

          Oke om. Saya usahakan minggu ini beres. Kalau tidak paling minggu depan. Nanti saya kabari kalau sudah di publish

          • Valen Rizky

            Terima Kasih, Mas. Keren tutorialnya

    • Rizaldi Maulidia Achmad

      sama-sama om 😀

  4. Putu Putra

    Keren tutorialnya, terima kasih.
    Tapi saya ada pertanyaan, itu pagenya kenapa jadi di sebelh kiri ya? Bagaimana agar berada di tengah?

    • Rizaldi Maulidia Achmad

      sama-sama om, senang bisa membantu 😀
      Kalau mau ditengah, sebelum tag ul paginaton nya tinggal tambahkan sebuah div lalu beri atribut class=”text-center”. text-center disitu sudah diatur oleh bootstrap (Untuk lebih detailnya klik link berikut : http://getbootstrap.com/css/#type-alignment). kurang lebih seperti ini :
      <div class="text-center">
      <ul class="pagination">
      ……
      </ul>
      </div>

NOTE ARCHIVES