Membuat Pagination / Penomoran Halaman Menggunakan PHP – Hallo teman–teman semua selamat datang kembali di website resmi dari Kecoak Sakti Official yaitu BlogBelajarOfficial. Pada artikel kali ini kita akan belajar tentang bagaimana cara membuat pagination atau penomoran Halaman pada Pemrograman PHP. Sebelum membahas tentang bagaimana cara membuat Pagination. Pertama-tama kita akan menjelaskan terlebih dahulu tentang apa itu Pagination?
Pagination merupakan suatu teknik untuk menampilkan atau membagi beberapa data menjadi beberapa halaman. Pagination berfungsi agar data yang akan ditampilkan pada suatu halaman website tidak terlalu panjang dan tidak membebani halaman website ketika halaman tersebut di load.
Penggunaan Pagination ini sangat penting karena hal ini berkaitan dengan kenyamanan Pengguna. Contohnya disini kita memiliki 50 data. Ketika seluruh data tersebut kita tampilkan ke dalam sebuah halaman website kita, maka kita harus melakukan scroll sampai kebawah untuk melihat seluruh data yang kita miliki. Hal ini dapat membuat proses Load data pada Halaman Website kita akan menjadi lebih lama dan kurang efektif. Bayangkan jika kita memiliki sekitar ribuan data, Pasti akan sulit bukan untuk melihat seluruh data tersebut dalam satu halaman? Oleh sebab itu dengan menggunakan Teknik Pagination maka data tersebut dapat kita bagi menjadi beberapa data dalam satu halaman.
Cara Membuat Pagination Menggunakan Pemrograman PHP dan Database MYSQL
Pada materi kali ini kita akan membuat sebuah pagination dengan menggunakan PHP dan Data dari Database. Langkah pertama yang harus kita persiapkan adalah database dan tabel yang akan kita gunakan. Disini nama database kita adalah crud dengan nama tabel yaitu tb_barang.
Untuk lebih mudah silahkan copykan sintak SQL dibawah ini. Pada sintak SQL dibawah ini kebetulan kita sudah memiliki beberapa data didalamnya. Nantinya data ini akan ditampilkan pada Halaman Website kita.
-- phpMyAdmin SQL Dump
-- version 4.8.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Mar 07, 2022 at 02:02 PM
-- Server version: 10.1.34-MariaDB
-- PHP Version: 5.6.37
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: `crud`
--
-- --------------------------------------------------------
--
-- Table structure for table `tb_barang`
--
CREATE TABLE `tb_barang` (
`id_barang` varchar(10) NOT NULL,
`nama_barang` varchar(200) NOT NULL,
`stok` int(11) NOT NULL,
`harga` double NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tb_barang`
--
INSERT INTO `tb_barang` (`id_barang`, `nama_barang`, `stok`, `harga`) VALUES
('1001', 'Pena', 20, 30000),
('1002', 'Pensil', 10, 1000),
('1003', 'Buku', 20, 3500),
('1004', 'Barang 1', 5, 15000),
('1005', 'Barang 2', 10, 12000),
('1006', 'Barang 3', 15, 10000),
('1007', 'Barang 4', 5, 5000),
('1008', 'Barang 5', 10, 3000),
('1009', 'Barang 6', 15, 2000),
('1010', 'Barang 7', 5, 20000),
('1011', 'Barang 8', 10, 17000),
('1012', 'Barang 9', 15, 15000),
('1013', 'Barang 10', 5, 12000),
('1014', 'Barang 11', 10, 10000),
('1015', 'Barang 12', 15, 5000),
('1016', 'Barang 13', 5, 3000),
('1017', 'Barang 14', 10, 2000),
('1018', 'Barang 15', 15, 20000),
('1019', 'Barang 16', 5, 17000),
('1020', 'Barang 17', 10, 15000),
('1021', 'Barang 18', 15, 12000),
('1022', 'Barang 19', 5, 10000),
('1023', 'Barang 20', 10, 5000),
('1024', 'Barang 21', 15, 3000),
('1025', 'Barang 22', 5, 2000),
('1026', 'Barang 23', 10, 20000),
('1027', 'Barang 24', 15, 17000),
('1028', 'Barang 25', 5, 15000),
('1029', 'Barang 26', 10, 12000),
('1030', 'Barang 27', 15, 10000),
('1031', 'Barang 28', 5, 5000),
('1032', 'Barang 29', 10, 3000),
('1033', 'Barang 30', 15, 2000),
('1034', 'Barang 31', 5, 20000),
('1035', 'Barang 32', 10, 17000),
('1036', 'Barang 33', 15, 15000),
('1037', 'Barang 34', 5, 12000),
('1038', 'Barang 35', 10, 10000),
('1039', 'Barang 36', 15, 5000),
('1040', 'Barang 37', 5, 3000),
('1041', 'Barang 38', 10, 2000),
('1042', 'Barang 39', 15, 20000),
('1043', 'Barang 40', 5, 17000),
('1044', 'Barang 41', 10, 15000),
('1045', 'Barang 42', 15, 12000),
('1046', 'Barang 43', 5, 10000),
('1047', 'Barang 44', 10, 5000),
('1048', 'Barang 45', 15, 3000),
('1049', 'Barang 46', 5, 2000),
('1050', 'Barang 47', 10, 20000),
('1051', 'Barang 48', 15, 17000),
('1052', 'Barang 49', 5, 15000),
('1053', 'Barang 50', 10, 12000),
('1054', 'Barang 51', 15, 10000),
('1055', 'Barang 52', 5, 5000),
('1056', 'Barang 53', 10, 3000),
('1057', 'Barang 54', 15, 2000),
('1058', 'Barang 55', 5, 20000),
('1059', 'Barang 56', 10, 17000),
('1060', 'Barang 57', 15, 15000),
('1061', 'Barang 58', 5, 12000),
('1062', 'Barang 59', 10, 10000),
('1063', 'Barang 60', 15, 5000),
('1064', 'Barang 61', 5, 3000),
('1065', 'Barang 62', 10, 2000),
('1066', 'Barang 63', 15, 20000),
('1067', 'Barang 64', 5, 17000),
('1068', 'Barang 65', 10, 15000),
('1069', 'Barang 66', 15, 12000),
('1070', 'Barang 67', 5, 10000),
('1071', 'Barang 68', 10, 5000),
('1072', 'Barang 69', 15, 3000),
('1073', 'Barang 70', 5, 2000),
('1074', 'Barang 71', 10, 20000),
('1075', 'Barang 72', 15, 17000),
('1076', 'Barang 73', 5, 15000),
('1077', 'Barang 74', 10, 12000),
('1078', 'Barang 75', 15, 10000),
('1079', 'Barang 76', 5, 5000),
('1080', 'Barang 77', 10, 3000),
('1081', 'Barang 78', 15, 2000),
('1082', 'Barang 79', 5, 20000),
('1083', 'Barang 80', 10, 17000),
('1084', 'Barang 81', 15, 15000),
('1085', 'Barang 82', 5, 12000),
('1086', 'Barang 83', 10, 10000),
('1087', 'Barang 84', 15, 5000),
('1088', 'Barang 85', 5, 3000),
('1089', 'Barang 86', 10, 2000),
('1090', 'Barang 87', 15, 20000),
('1091', 'Barang 88', 5, 17000),
('1092', 'Barang 89', 10, 15000),
('1093', 'Barang 90', 15, 12000),
('1094', 'Barang 91', 5, 10000),
('1095', 'Barang 92', 10, 5000),
('1096', 'Barang 93', 15, 3000),
('1097', 'Barang 94', 5, 2000),
('1098', 'Barang 95', 10, 20000),
('1099', 'Barang 96', 15, 17000),
('1100', 'Barang 97', 5, 15000),
('1101', 'Barang 98', 10, 12000),
('1102', 'Barang 99', 15, 10000),
('1103', 'Barang 100', 5, 5000),
('1104', 'Barang 101', 10, 3000),
('1105', 'Barang 102', 15, 2000),
('1106', 'Barang 103', 5, 20000),
('1107', 'Barang 104', 10, 17000),
('1108', 'Barang 105', 15, 15000),
('1109', 'Barang 106', 5, 12000),
('1110', 'Barang 107', 10, 10000),
('1111', 'Barang 108', 15, 5000),
('1112', 'Barang 109', 5, 3000),
('1113', 'Barang 110', 10, 2000),
('1114', 'Barang 111', 15, 20000),
('1115', 'Barang 112', 5, 17000),
('1116', 'Barang 113', 10, 15000),
('1117', 'Barang 114', 15, 12000),
('1118', 'Barang 115', 5, 10000),
('1119', 'Barang 116', 10, 5000),
('1120', 'Barang 117', 15, 3000),
('1121', 'Barang 118', 5, 2000),
('1122', 'Barang 119', 10, 20000),
('1123', 'Barang 120', 15, 17000),
('1124', 'Barang 121', 5, 15000),
('1125', 'Barang 122', 10, 12000),
('1126', 'Barang 123', 15, 10000),
('1127', 'Barang 124', 5, 5000),
('1128', 'Barang 125', 10, 3000),
('1129', 'Barang 126', 15, 2000),
('1130', 'Barang 127', 5, 20000),
('1131', 'Barang 128', 10, 17000),
('1132', 'Barang 129', 15, 15000),
('BRG04', 'Data Editing', 5, 15000);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_barang`
--
ALTER TABLE `tb_barang`
ADD PRIMARY KEY (`id_barang`);
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 */;
Langkah selanjutnya buatlah sebuah file PHP baru dengan nama Koneksi.php yang berfungsi untuk membuat koneksi antara database dan project kita. Pada file ini juga berisikan Function atau Method yang kita gunakan dalam proses Pemanggilan data dari database.
<?php
function koneksiDB() {
$host = "localhost";
$username = "root";
$password = "";
$db = "crud";
$conn = mysqli_connect($host, $username, $password, $db);
if(!$conn) {
die("Koneksi Database Gagal : " .mysqli_connect_error());
} else {
return $conn;
}
}
function selectAllData() {
$query = "SELECT * FROM tb_barang";
$result = mysqli_query(koneksiDB(), $query);
return $result;
}
function selectPageData($awal, $batas) {
$query = "SELECT * FROM tb_barang limit $awal, $batas";
$result = mysqli_query(koneksiDB(), $query);
return $result;
}
?>
Berdasarkan sintak diatas dapat dilihat bahwa terdapat tiga buah Method atau Function yang kita gunakan. Function koneksiDB() digunakan untuk mengkoneksikan antara database yang kita gunakan dengan project Website kita. Hal yang perlu diperhatikan pada Function ini adalah empat variabel berikut.
$host = "localhost"; $username = "root"; $password = ""; $db = "crud";
Variabel diatas berisikan informasi detail dari database yang kita gunakan seperti nama database, host atau alamat dari database tersebut, username dan password untuk mengakses database kita. Sedangkan Function selectAllData() digunakan untuk menampilkan seluruh data yang ada pada database kita.
function selectAllData() {
$query = "SELECT * FROM tb_barang";
$result = mysqli_query(koneksiDB(), $query);
return $result;
}
Dari sintak diatas dapat kita lihat bahwa kita memanggil seluruh data dari tb_barang. Sintak ini berisikan Query SQL untuk mengakses seluruh data barang. Nantinya Method ini kita gunakan untuk melihat seberapa banyak data yang ada pada database kita untuk proses penentuan total Pembagian data pada Website kita. Selanjutnya Function selectPageData() digunakan untuk memanggil data berdasarkan jumlah yang kita inginkan.
function selectPageData($awal, $batas) {
$query = "SELECT * FROM tb_barang limit $awal, $batas";
$result = mysqli_query(koneksiDB(), $query);
return $result;
}
Dari Function diatas dapat kita lihat bahwa Function tersebut memiliki dua buah parameter yaitu $awal dan $batas. Parameter ini digunakan sebagai limit data yang akan ditampilkan (range data yang akan ditampilkan dari database). Disini kita menggunakan sintak Query SQL Limit untuk menampilkan range data yang kita inginkan.
Setelah selesai membuat seluruh Function atau Method yang kita gunakan pada file Koneksi.php. Selanjutnya kita buat sebuah file PHP baru dengan nama index.php. File ini berfungsi untuk menampilkan data barang yang kita inginkan kedalam sebuah tabel.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Halaman Utama</title>
<style type="text/css">
.page_link {
border: 1px solid black;
padding: 5px 10px;
margin-right: 5px;
font-weight: bold;
display: inline-block;
}
.page_link a {
text-decoration: none;
}
.selected_item {
background-color: #C5C5C5;
}
</style>
</head>
<body style="width: 700px; margin: auto; padding: 10px;">
<h2 style="text-align: center;">DATA PERSEDIAAN BARANG</h2>
<table border="1" style="border-collapse: collapse; margin-top: 10px; width: 100%;">
<tr style="text-align: center; font-weight: bold; background-color: #C8C6C6; height: 40px;">
<td>No</td>
<td>Nama Barang</td>
<td>Stok</td>
<td>Harga (Rp)</td>
</tr>
<?php
include 'Koneksi.php';
$nomor_urut = 0;
$dataALL = selectAllData();
$countData = mysqli_num_rows($dataALL);
$batas = 20;
$hal = isset($_GET['p'])?(int)$_GET['p'] : 1;
$hal_awal = ($hal>1) ? ($hal * $batas) - $batas : 0;
$totalHalaman = ceil($countData / $batas);
$prev = $hal - 1;
$next = $hal + 1;
$result = selectPageData($hal_awal, $batas);
if ($countData < 1) {
?>
<tr>
<td colspan="5" style="text-align: center; font-weight: bold; font-size: 12px; padding: 5px;">TIDAK ADA DATA</td>
</tr>
<?php
} else {
$nomor_urut = $hal_awal + 1;
while ($row = mysqli_fetch_assoc($result)) {?>
<tr style="text-align: center;">
<td><?php echo $nomor_urut++; ?></td>
<td><?php echo $row['nama_barang']; ?></td>
<td><?php echo $row['stok']; ?></td>
<td>Rp. <?php echo number_format($row['harga']); ?></td>
</tr>
<?php }
} ?>
</table>
<div style="margin-top: 5px; text-align: center;">
<p class="page_link">
<a <?php if ($hal > 1) echo "href='?p=$prev'" ?> >
« Previous
</a>
</p>
<?php for ($i = 1; $i <= $totalHalaman; $i++) {?>
<p class="page_link <?php if ($hal == $i) echo "selected_item" ?>">
<a href="?p=<?php echo $i ?>">
<?= $i ?>
</a>
</p>
<?php } ?>
<p class="page_link">
<a <?php if ($hal < $totalHalaman) echo "href='?p=$next'" ?> >
Next »
</a>
</p>
</div>
</body>
</html>
Dapat dilihat pada sintak index.php diatas bahwa teknik pagination digunakan untuk membagi data yang ada kedalam beberapa halaman. Dari sintak diatas dapat kita lihat bahwa setiap halaman akan menampilkan 20 data pada tabel. Adapun penjelasan dari tahapan Pagination dapat akan dijabarkan pada sintak dibawah ini
include 'Koneksi.php'; $nomor_urut = 0; $dataALL = selectAllData(); $countData = mysqli_num_rows($dataALL);
Sintak diatas digunakan untuk memanggil seluruh data barang menggunakan Function selectAllData() pada file Koneksi.php. Data barang tersebut disimpan kedalam variabel $dataALL. Selanjutnya kita hitung total data yang ada pada database kita dan simpan data tersebut kedalam variabel $countData. Pada kasus ini kita memiliki total data barang sebanyak 133 Data Barang. Tahapan selanjutnya kita bagi data barang tersebut sesuai keinginan kita. Pada kasus kali ini kita akan menampilkan 20 Data barang pada setiap halaman Website.
$batas = 20; $hal = isset($_GET['p'])?(int)$_GET['p'] : 1; $hal_awal = ($hal>1) ? ($hal * $batas) - $batas : 0; $totalHalaman = ceil($countData / $batas);
Dari sintak diatas digunakan untuk menangkap nomor halaman website dan melakukan limit terhadap data yang akan ditampilkan. Pada Kasus ini kita melakukan limit data barang sebanyak 20 Data barang setiap halamannya. Disini kita menggunakan variabel $batas untuk mendefinisikan banyaknya data yang tampil pada setiap halaman. Selanjutnya kita deklarasikan varibel $hal yang berfungsi untuk menangkap lokasi halaman saat ini. Disini kita menggunakan sintak Request Method GET untuk menangkap Informasi Halaman Saat ini.
Baca Juga : Mengenal Konsep Request Method Pada Form Menggunakan PHP
Selanjutnya kita tentukan batas awal setiap data yang ditampilkan pada setiap halaman. Batas data ini disimpan kedalam variabel $hal_awal. Lalu tentukan jumlah Page atau halaman yang didapatkan berdasarkan banyaknya total data dan batasan data yang diperoleh. Dari 133 data tersebut. Kita memperoleh Sekitar 7 Pembagian Halaman dalam menampilkan seluruh data kita.
$prev = $hal - 1; $next = $hal + 1; $result = selectPageData($hal_awal, $batas);
Selanjutnya kita deklarasikan variabel $prev dan $next untuk fungsi Increment dan Decrement dari halaman. Variabel ini digunakan untuk Tombol Next dan Previous nantinya. Misalnya kita klik Tombol Next maka kita akan diarahkan ke halaman selanjutnya dan Sebaliknya jika kita klik tombol Previous maka kita kembali ke halaman sebelumnya. Setelah itu kita Panggil Function selectPageData() untuk menampilkan data berdasarkan batasan Awal data dan Limit data yang ditampilkan pada setiap halaman kita.
<div style="margin-top: 5px; text-align: center;">
<!-- Fungsi Tombol Previous -->
<p class="page_link">
<a <?php if ($hal > 1) echo "href='?p=$prev'" ?> >
« Previous
</a>
</p>
<!-- Fungsi Tombol Halaman Data -->
<?php for ($i = 1; $i <= $totalHalaman; $i++) {?>
<p class="page_link <?php if ($hal == $i) echo "selected_item" ?>">
<a href="?p=<?php echo $i ?>">
<?= $i ?>
</a>
</p>
<?php } ?>
<!-- Fungsi Tombol Next -->
<p class="page_link">
<a <?php if ($hal < $totalHalaman) echo "href='?p=$next'" ?> >
Next »
</a>
</p>
</div>
Untuk proses pembuatan Tombol Halaman dari Paginationnya, kita menggunakan sintak diatas ini. Disini kita menggunakan Teknik dari Request Method untuk mengirim dan mengenali Halaman dari setiap Data. Pada sintak diatas terdapat 3 Bagian Utama yaitu Sintak untuk Fungsi Tombol Previous, Sintak Untuk Fungsi Tombol Halaman Data dan Sintak Untuk Fungsi Tombol Next.
Jika teman-teman sudah mengikuti semua langkah-langkah diatas. Selanjutnya kita coba jalankan project ini pada Web Browser kita dengan mengakses halaman localhost dan panggil folder project kita. Disini contoh nama file project kita adalah Pagination.
http://localhost/LatihanPHP/Pagination/
Sehingga Akan muncul tampilan berikut. Disini dapat kita lihat bahwa data yang tampil pada halaman ini adalah sebanyak 20 data Setiap Halamannya.
Kemudian kita coba untuk menekan setiap Tombol Pagination yang berada pada Bagian Bawah Tabel kita. Disini contohnya kita memilih Halaman Pagination Nomor 3. Maka akan muncul seperti gambar dibawah ini.
Sekian tutorial Cara Membuat Pagination atau Penomoran Halaman pada WEBSITE menggunakan Pemrograman PHP. Untuk Project lengkapnya dapat didownload pada link ((GITHUB)) kami ini.
