Hai kembali lagi di blog saya kodekreasi.com . Pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang cara membuat pagination dengan php native. sebelum memulai tutorial kali ini terlebih dahulu kita harus mengenal terlebih dahulu apa itu pagination ?
Pagination atau juga sering dikenal dengan pagging merupakan sistem penomoran halaman dimana sering digunakan pada website dengan data yang akan ditampilkan begitu banyak sehingga akan memberatkan website saat load data dari database serta membuat user harus mensecroll data yang begitu banyak . Untuk mengatasi masalah tersebut maka digunakanlan pagination sehingga data akan dipisahkan kedalam halaman-halaman yang berbeda. Contoh penggunaan pagination ini dapat kalian temui pada kolom pencarian google dimana ketika kalian melakukan pencarian pada kolom pencarian google dengan hasil yang pencarian yang banyak maka google akan memisahkan hasil pencarian kalian kedalam halaman-halaman yang berbeda yang biasanya halaman-halaman tersebut akan dibedakan dengan nomor yang berada pada bagian bawah pencarian seperti pada gambar berikut ini :
Setelah kalian mengerti apa itu pagination serta penggunaanya sekarang kita mulai saja tutorial pagination php pada kali ini. Sedikit penjelasan pada tutorial ini kita akan membuat sebuah halaman website blog yang akan menampilkan data postingan dari database dimana data yang akan ditampilkan pada halaman tersebut akan kita atur menggunakan pagination serta kita juga akan membuat sebuah selector untuk mengatur jumlah data yang akan ditampilkan per halamanya. Langsung saja tidak usah berlama-lama langsung saja kita buat pagination php .
Cara Membuat Pagination PHP dan MySQL
- Untuk cara yang pertama terlebih dahulu kalian sipkan database yang akan kita gunakan pada tutorial kali ini dengan cara buka phpmyadmin kemudian create database baru. Setelah itu copykan SQL berikut pada database yang telah kalian buat :
-- phpMyAdmin SQL Dump -- version 4.9.0.1 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Generation Time: Feb 01, 2020 at 03:19 PM -- Server version: 10.4.6-MariaDB -- PHP Version: 7.1.32 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `test` -- -- -------------------------------------------------------- -- -- Table structure for table `blog` -- CREATE TABLE `blog` ( `id` int(11) NOT NULL, `judul` varchar(255) DEFAULT NULL, `isi` text DEFAULT NULL, `waktu` datetime DEFAULT NULL, `tag` varchar(100) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `blog` -- INSERT INTO `blog` (`id`, `judul`, `isi`, `waktu`, `tag`) VALUES (1, 'judul 1', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (2, 'judul 2', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (3, 'judul 3', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (4, 'judul 4', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (5, 'judul 5', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (6, 'judul 6', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (7, 'judul 7', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (8, 'judul 8', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (9, 'judul 9', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (10, 'judul 10', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'), (11, 'judul 11', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus neque. Nunc blandit tristique risus, sed semper urna eleifend quis. Vestibulum sed elementum lectus, vel interdum ipsum. Morbi ligula nisi, consequat sit amet varius vitae, egestas et augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam placerat massa sed finibus viverra. Morbi bibendum volutpat pharetra. ', '2020-01-01 10:07:55', 'tes'); -- -- Indexes for dumped tables -- -- -- Indexes for table `blog` -- ALTER TABLE `blog` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `blog` -- ALTER TABLE `blog` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
2. Langkah kedua yaitu membuat file baru didalam folder htdocs kalian. Setelah itu copykan script program berikut pada file yang telah kalian buat:
<?php
$host = 'localhost'; //127.0.0.1
$user = 'root'; //user acess database
$pass = ''; // password database
$db = 'test'; //nama database
$link = mysqli_connect($host, $user, $pass, $db) or die(mysqli_error($link));
//melakukan koneksi kedatabase menggunakan mysqli
$perPage = isset($_GET["per_page"]) ? (int)$_GET["per_page"] : 2;
// mengatur jumlah data yang akan ditampilkan perhalaman
$page = isset($_GET["halaman"]) ? (int)$_GET["halaman"] : 1;
$start = ($page > 1) ? ($page * $perPage) - $perPage : 0;
//menentukan halaman yang sedang diakses
$articles = "SELECT * FROM blog LIMIT $start, $perPage";
//query pagination
$result2 = mysqli_query($link, $articles);
$result = mysqli_query($link, "SELECT * FROM blog");
$total = mysqli_num_rows($result);
//mengetahui total rows pada database
$pages = ceil($total/$perPage);
//mengetahui jumlah halaman
?>
<!--- Selector halaman --->
<div class="pull-left">
<div class="col-md-2 text-right">
<form action="?" class="form-inline" method="get">
<input type="hidden" id="page" name="pagenext" value="">
<select class="form-control" name="per_page" id="per_page" onchange="this.form.submit()">
<option disabled>- Item per page -</option>
<option value="2" <?php echo ($perPage == 2 ? "selected" : "") ?>>2</option>
<option value="5" <?php echo ($perPage == 5 ? "selected" : "") ?>>5</option>
<option value="10" <?php echo ($perPage == 10 ? "selected" : "") ?>>10</option>
</select>
</form>
</div>
</div>
<!--- end selector halaman ----->
<!--- menampilkan data postingan ---->
<?php while($row = mysqli_fetch_assoc($result2)) {?>
<p> <?php echo $row["id"] ?></p>
<p> <?php echo $row["judul"] ?></p>
<p> <?php echo $row["isi"] ?></p>
<?php } ?>
<!--- end menampilkan data postingan ---->
<!---- menampilkan pagination ---->
<div class="">
<?php for($i=1; $i<=$pages; $i++){ ?>
<a href="?halaman=<? echo $i?>"> <? echo $i?></a>
<?php } ?>
</div>
<!---- end menampilkan data pagination ----->
Penjelasan scribt diatas :
$host = 'localhost'; //127.0.0.1 $user = 'root'; //user acess database $pass = ''; // password database $db = 'test'; //nama database $link = mysqli_connect($host, $user, $pass, $db) or die(mysqli_error($link));
Potongan scribt diatas digunakan untuk melakukan koneksi ke database yang telah kalian buat tadi. Kalian dapat memisahkan scribt ini ke file berbeda untuk mengefisientkan penulisan scribt jika nantinya digunakan oleh banyak file yang berbeda. Untuk melakukan koneksi ke database sendiri disini kita menggunakan mysqli.
$perPage = isset($_GET["per_page"]) ? (int)$_GET["per_page"] : 2;
Potongan scribt diatas digunakan untuk menyimpan jumlah data yang akan ditampilkan per halamanya ke dalam sebuah variabel berdasarkan selector yang dipilih user.
$page = isset($_GET["halaman"]) ? (int)$_GET["halaman"] : 1; $start = ($page > 1) ? ($page * $perPage) - $perPage : 0;
Potongan scribt diatas digunakan untuk menentukan data halaman yang akan ditampilkan ke dalam sebuah variabel.
$articles = "SELECT * FROM blog LIMIT $start, $perPage"; $result2 = mysqli_query($link, $articles);
Potongan scribt diatas merupakan sebuah query yang digunakan untuk menampilkan semua data dengan membatasi data yang ditampilkan perhalamanya.
$result = mysqli_query($link, "SELECT * FROM blog"); $total = mysqli_num_rows($result);
Potongan scribt diatas digunakan untuk mengetatuhi total row atau kolom data pada database .
$pages = ceil($total/$perPage);
Scribt diatas digunakan untuk membulatkan hasil dari pembagian total row di database dengan data yang akan ditampilkan per halamanya yang kemudian akan diketahui jumlah halamanya.
<div class="">
<?php for($i=1; $i<=$pages; $i++){ ?>
<a href="?halaman=<? echo $i?>"> <? echo $i?></a>
<?php } ?>
</div>
Scribt diatas digunakan untuk menampilkan penomoran halaman seperti pada gambar berikut ini :
Berikut adalah hasil keseluruhan dari scribt yang telah kita buat tadi :
Baca juga artikel saya yang lain tentang Membuat REST API Login dan Register Dengan MySQLi
2 thoughts on “Cara Membuat Pagination PHP dan MySQL”