Artikel Teknologi

Panduan Gampang Buat Pagination PHP MySQLI Pake Bootstrap 4, Biar Tampilan Data Kece Badai

Hai Sob! Jadi, lu lagi cari-cari nih gimana cara bikin pagination pake PHP sama MySQLI, terus tambahin Bootstrap 4? Nah, tenang aja, gue bakal kasih tau kamu semua detailnya biar lu bisa bikin pagination yang kece abis buat website lu.

Ga yakin apa itu pagination? Yaudah, buat yang belum tau langsung aja simak di bawah nih ya.

A. Pendahuluan

Apasih pagination itu?

Pagination itu semacam kita bagi-bagi konten atau data di website kita supaya lebih rapi dan gampang dilihat sob. Jadi misalnya kita punya tabel yang isinya banyak banget, daripada kita tampilin semuanya jadi satu panjang banget, mending kita bagi per halaman ngebatesin.

Contohnya nih, kaya di toko online. Lu pasti tau dong? Nah, dengan pagination, kita bisa lihat produk tanpa harus ngescroll ke bawah terus menerus.

Buat ape sih pake Pagination?

Kalo ga pake pagination kan ribet wkwk. Maksudnya, kita ga perlu ke bawah banget buat lihat data yang kita cari. Ga cuma itu, kalo udah pake pagination, kan jadi kelihatan lebih rapi, dan user pun jadi lebih betah.

Kelebihan pakein Pagination dengan PHP, MySQLI, dan Boostrap 4

Pake PHP sama MySQLI itu udah oke banget buat bikin pagination. Alasannya?

  • PHP populer banget, banyak orang yang paham, jadi kalo ada yang nanya, gampang buat dapet informasi.
  • MySQLI (MySQL Improved) Oke nih buat database, supaya ga cuma pake MySQL tapi pake versi lebih baik.
  • Bootstrap 4, biar keren aja gitu, kaya anak muda zaman now. Website lu bakal punya penampilan yang apik, kesannya lebih profesional, dan responsive pula. Who doesn't want that, right?

Nah sekarang kita lanjut yuk ke persiapan apa aja yang harus kita siapin buat ngikutin tutorial ini sob:

B. Persiapan

Persyaratan Sistem

Sebelum kita masuk ke tutorialnya nih, pastikan lu punya hal-hal di bawah ini dulu:

  • PHP 7 ke atas
  • MySQL 5.0 ke atas
  • Bootstrap 4
  • Web server (misal XAMPP, WAMP, LAMP atau yang serupa lain)
  • Code editor jempolan yang lu bisa banget
  • Kopi dan WIFI, biar seru, toh?

Init-inilisa i Database dan Tabel

Jangan lupa kita perlu punya database dan tabel yang udah kita rancang. Jadi kita bikin database dulu dengan MySQL, trus bikin tabel dan isi dengan data placeholdernya yuk.

Boostrap 4

Bootstrap 4 itu keren banget, banyak fitur, udah responsive juga. Tinggal copas-copasin link trus kita bisa ngikutin tutorial ini dengan selancar boarding.

C. Langkah-langkah Membuat Pagination PHP MySQLI dengan Bootstrap 4

Habis persiapan udah kita selesaiin, yuk sekarang langsung aja ke langkah-langkah bikin pagination PHP MySQLI pake Bootstrap 4.

1. Koneksi PHP dengan MySQLI

Lu harus bikin koneksi dulu nih antara PHP sama MySQLI. Langsung aja bikin file yang bernama koneksi.php, trus isi file itu kayak gini nih:

<?php
  // Isi nama host, username, password sama nama database kamu
  $mysqli = new mysqli("host", "username", "password", "database");

  // Cek koneksinya
  if ($mysqli->connect_error) {
    die("Koneksi gagal sob :( ini alasannya : " . $mysqli->connect_error);
  } else {
    echo "Koneksi berhasil, semangaattt!";
  }
?>

Setelah ini, jangan lupa tes apakah koneksimu berhasil.

2. Nampilin Data Pake PHP sama MySQLI

Setelah koneksi kita udah oke punya, sekarang kita ambil data dari MySQL supaya bisa kita bagi-bagiin pake pagination PHP. Tau deh istilahnya, wkwk. Begini caranya sob:

Buat file baru, index.php terus copas kode ini aja deh:

<?php
  include("koneksi.php"); // Ngambil koneksi yang udah kita bikin

  // Query MySQL
  $hasil = $mysqli->query("SELECT * FROM tbl_keren LIMIT 10");

  // Tampilkan data dari tabel sbg objek
  while ($row = $hasil->fetch_object()) {
    echo $row->kolom1 . " - " . $row->kolom2;
  }
?>

Sudah dapat data nya? Yo, lanjut nih.

3. Integrasi Bootstrap 4

Nah, sekarang kita integrasi sama Bootstrap 4 biar tampilannya lebih nge-pop. Pertama, kita pasang CSS sama JS nyah:

<!-- Boostrap 4 punya CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery sama Boostrap 4 punya JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Nah, terus kita ganti kode exe-nya di index.php biar enak diliat:

include("koneksi.php");

// Masukkan kode ambil data tadi
// Tambahkan kode Bootstrap HTML

echo '
<table class="table table-hover table-bordered">
  <thead>
    <tr>
      ...
    </tr>
  </thead>
  <tbody>
    ';
    // Nampilin data di sini
    while ($row = $hasil->fetch_object()) {
      echo '...';
    }
echo '
  </tbody>
</table>';

Yuk lanjut nih, pagination!

4. Proses Bikin Pagination

Kita bakal bikin pagination nih, jadi kita ngitung dulu total halamannya, terus navigasi di pagination.

Menghitung Jumlah Halaman

// Eksekusi jumlah baris data
$count = $hasil->num_rows;

// Ngatur jumlah max data per halaman
$perPage = 10;

// Kalkulasi total halaman
$totalPages = ceil($count / $perPage);

// Jangan lupa ngatur halaman aktif
$currentPage = isset($_GET["halaman"]) ? (int)$_GET["halaman"] : 1;
}

Membuat navigasi Pagination
Nah, kita increment nih yuk:

echo '
<nav>
  <ul class="pagination">
    ';
    for ($i = 1; $i <= $totalPages; $i++) {
      echo '<li class="page-item"><a class="page-link" href="index.php?halaman=' . $i . '">' . $i . '</a></li>';
    }
echo '
  </ul>
</nav>';

Selesai! Sob Pagination kamu udah jadi dan siap pake.

5. Style Pagination

Gak dosa kita tambahin dikit style biar enak dilihat kan ya? Langsung copas aja deh biar ga ribet:

<style>
  .pagination {
    justify-content: center;
  }
  .pagination li {
    margin-right: 5px;
  }
</style>

D. Tips dan Trik Pagination

Nah sekarang waktu yang dinantikan, yaitu tips dan trik.

Optimalkan kinerja Pagination

Buat paginate yang lebih efisien, kita bisa pake SELECT COUNT() buat ngitung jumlah record di tabel kita.

Menangani Kesalahan Pagination

Supaya nggak ngebug, kita cek parameter halaman, jangan sampai negatif atau lebih besar dari jumlah halaman.

Kesimpulan

Bener kan kalo pagination keren? Kan tampilannya jadi lebih rapi, user juga lebih betah. Di tutorial ini kan kita udah bahas semuanya, mulai dari ngatur koneksinya, terus querynya, sama stylingnya. Mudahan dengan tutorial ini pagination kamu makin jadiin website yang lebih keren lagi ya.

Jangan males untuk bereksperimen dengan tampilan dan kode kamu yah sob, supaya tambah jago juga. Tapi semangat terus dan happy coding! ;)

Comments

Artikel Terbaru