Cara Membuat Pagination dengan Database MySQL pada PHP – Hai sobat ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang cara membuat pagination yang mengambil datanya dari database MySQL atau MariaDB dengan bahasa pemrogaman PHP. Jika kita menampilkan data dari database dengan jumlah baris yang sangat banyak dan kita tampilkan semua dalam 1 halaman maka tentunya itu akan membingungkan pengguna dalam mencari datanya dan yang paling penting itu akan memberatkan aplikasi dan database. Itu adalah contoh yang sangat buruk dan harus dihindari. Untuk membuat aplikasi dan database menjadi ringan tentunya kita menggunakan pagination dimana kita memberikan limit atau jumlah data yang ditampilkan tidak semuanya.
Dalam postingan ini kita akan membuat menggukan PHP dengan cara yang standar. Pagination saya buat ada tombol First/Halaman Pertama dan Last/Halaman Terakhir. Dan kita akan membuat pagination menggunakan bootstrap untuk mempercantik tampilannya seperti yang sudah saya bahas pada tutorial sebelumnya
Simple Pagination Pada Bootstrap 4
Membuat Database MySQL
1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.
2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go
1 2 3 4 5 6 7 8 9 10 11 |
CREATE TABLE `tbl_mahasiswa` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama_mahasiswa` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `jenis_kelamin` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `tgl_masuk` date NOT NULL, `jurusan` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `biodata` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `avatar` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 67 CHARACTER SET = latin1 COLLATE = latin1_swedish_ci ROW_FORMAT = Compact; |
3. Kemudian daripada sobat memasukkan datanya satu-persatu maka sobat bisa jalankan perintah query dibawah
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
INSERT INTO `tbl_mahasiswa` VALUES (1, 'Dewan Komputer', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (2, 'Sule', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (3, 'Maemunah', 'Yogyakarta', 'Perempuan', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (4, 'Siti', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (5, 'Andre', 'Purwokerto', 'Laki-laki', '2019-01-22', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (6, 'Nunung', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (7, 'Aziz', 'Cilacap', 'Laki-laki', '2019-03-14', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (8, 'Lucinta Luma', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (9, 'Luna Maya', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (10, 'Syahrini', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (11, 'Tegar', 'Purwokerto', 'Laki-laki', '2019-03-07', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (12, 'Tukul', 'Cilacap', 'Laki-laki', '2019-03-05', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (13, 'Nanang', 'Jakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (14, 'Bambang', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (15, 'Arwana', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (16, 'Alan', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (17, 'John', 'Semarang', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (18, 'Gundul', 'Purwokerto', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (19, 'Nella Kharisma', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (20, 'Via Vallen', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (21, 'Baim', 'Yogyakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (22, 'Lulu', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (44, 'Dery', 'Cilacap', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (45, 'Rafii Ahmad', 'Jakarta', 'Laki-laki', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (46, 'Ariel Noah', 'Yogyakarta', 'Laki-laki', '2019-01-01', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (47, 'Ariel Tatum', 'Semarang', 'Perempuan', '2019-01-01', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (48, 'Gisella', 'Purwokerto', 'Perempuan', '2019-01-22', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (49, 'Vanessa Angel', 'Cilacap', 'Perempuan', '2019-03-20', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (50, 'Nikita Mirzani', 'Cilacap', 'Perempuan', '2019-03-14', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (51, 'Ayu Dewi', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (52, 'Gading Martin', 'Yogyakarta', 'Laki-laki', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (53, 'Maya', 'Semarang', 'Perempuan', '2019-03-22', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (54, 'Agnes', 'Purwokerto', 'Perempuan', '2019-03-07', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (55, 'Amel Alvi', 'Cilacap', 'Perempuan', '2019-03-05', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (56, 'Dian Satro', 'Jakarta', 'Perempuan', '2019-03-19', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (57, 'Cinta', 'Yogyakarta', 'Perempuan', '2019-03-19', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (58, 'Rangga', 'Semarang', 'Laki-laki', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (59, 'Melinda', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (60, 'Meriam Belina', 'Semarang', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (61, 'Cinta Laura', 'Purwokerto', 'Perempuan', '2019-03-12', 'Sistem Informasi', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (62, 'Bunga', 'Cilacap', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (63, 'Citra', 'Jakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (64, 'Lestari', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (65, 'Titi Kamal', 'Yogyakarta', 'Perempuan', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); INSERT INTO `tbl_mahasiswa` VALUES (66, 'Dedy Corbuzier', 'Jakarta', 'Laki-laki', '2019-03-12', 'Teknik Informatika', 'biodata', 'dk.png'); |
Cara Membuat Pagination
Berikut adalah cara membuat simple pagination :
1. Pertama tentunya seperti tutorial saya sebelumnya yaitu saya memisahkan koneksi agar penulisannya hanya sekali dan bisa digunakan berkali-kali dan tentunya mempermudah untuk migrasi server. Pertama yaitu buat file koneksi.php dan isikan kode dibawah untuk mengkoneksikan dengan database
1 2 3 4 5 6 7 8 9 |
<?php define('HOST','localhost'); define('USER','root'); define('PASS',''); define('DB1', 'db_dewankomputer'); // Buat Koneksinya $db1 = new mysqli(HOST, USER, PASS, DB1); ?> |
2. Buat file index.php. Karena kita membuat pagination dengan tampilan yang telah disediakan oleh bootstrap jadi kita perlu librarti css bootstap yaitu dengan menambahkan kode dibawah pada tag <head>
1 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> |
3. Kemudian buat tabel untuk menampilkan data dari database pada index.php, isikan kode dibawah pada tag <body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<table class="table table-striped table-bordered"> <thead> <tr> <th>No</th> <th>Nama mahasiswa</th> <th>Alamat</th> <th>Jenis Kelamin</th> <th>Jurusan</th> <th>Foto</th> </tr> </thead> <tbody> <?php $page = (isset($_GET['page']))? $_GET['page'] : 1; $limit = 5; $limit_start = ($page - 1) * $limit; $no = $limit_start + 1; $query = "SELECT * FROM tbl_mahasiswa ORDER BY nama_mahasiswa ASC LIMIT $limit_start, $limit"; $dewan1 = $db1->prepare($query); $dewan1->execute(); $res1 = $dewan1->get_result(); while ($row = $res1->fetch_assoc()) { ?> <tr> <td><?php echo $no++; ?></td> <td><?php echo $row["nama_mahasiswa"]; ?></td> <td><?php echo $row["alamat"]; ?></td> <td><?php echo $row["jenis_kelamin"]; ?></td> <td><?php echo $row["jurusan"]; ?></td> <td><img src='<?php echo $row["avatar"]; ?>' height="30px"></td> </tr> <?php } ?> </tbody> </table> |
Penjelasan :
Pada contoh saya tampilkan 5 baris perhalaman yang bisa sobat lihat pada kode $limit = 5; Jika sobat ingin menngantinya cukup ganti angka 5 dengan jumlah yang sobat inginkan per halamannya
4. Kemudian untuk
membuat pagainationnya sobat tambahkan kode dibawah dan letakkan tepat dibawah kode </table>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php $query_jumlah = "SELECT count(*) AS jumlah FROM tbl_mahasiswa"; $dewan1 = $db1->prepare($query_jumlah); $dewan1->execute(); $res1 = $dewan1->get_result(); $row = $res1->fetch_assoc(); $total_records = $row['jumlah']; ?> <p>Total baris : <?php echo $total_records; ?></p> <nav class="mb-5"> <ul class="pagination justify-content-end"> <?php $jumlah_page = ceil($total_records / $limit); $jumlah_number = 1; //jumlah halaman ke kanan dan kiri dari halaman yang aktif $start_number = ($page > $jumlah_number)? $page - $jumlah_number : 1; $end_number = ($page < ($jumlah_page - $jumlah_number))? $page + $jumlah_number : $jumlah_page; if($page == 1){ echo '<li class="page-item disabled"><a class="page-link" href="#">First</a></li>'; echo '<li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">«</span></a></li>'; } else { $link_prev = ($page > 1)? $page - 1 : 1; echo '<li class="page-item"><a class="page-link" href="?page=1">First</a></li>'; echo '<li class="page-item"><a class="page-link" href="?page='.$link_prev.'" aria-label="Previous"><span aria-hidden="true">«</span></a></li>'; } for($i = $start_number; $i <= $end_number; $i++){ $link_active = ($page == $i)? ' active' : ''; echo '<li class="page-item '.$link_active.'"><a class="page-link" href="?page='.$i.'">'.$i.'</a></li>'; } if($page == $jumlah_page){ echo '<li class="page-item disabled"><a class="page-link" href="#"><span aria-hidden="true">»</span></a></li>'; echo '<li class="page-item disabled"><a class="page-link" href="#">Last</a></li>'; } else { $link_next = ($page < $jumlah_page)? $page + 1 : $jumlah_page; echo '<li class="page-item"><a class="page-link" href="?page='.$link_next.'" aria-label="Next"><span aria-hidden="true">»</span></a></li>'; echo '<li class="page-item"><a class="page-link" href="?page='.$jumlah_page.'">Last</a></li>'; } ?> </ul> </nav> |
Penjelasan :
Query paling atas berfungi untuk menghitung jumlah datanya dan pada <ul class=”pagination justify-content-end”> adalah kode untuk membuat paginationnya. Kode diatas jika sedang di halaman pertama maka tombol Sebelumnya dan First akan disabled begitu juga sebaliknya. pada kode $jumlah_number = 1; adalah jumlah halaman ke kanan dan kiri dari halaman yang aktif. Jika sobat sedang berada di halaman 5 berarti yang muncul adalah |4|5|6| namun jika sobat menggantinya menjadi $jumlah_number = 1; maka jadinya |3|4|5|6|7|.
5. Jika sobat jalankan maka akan menghasilkan tampilan seperti berikut
Contoh diatas hanyalah contoh standar yang biasa digunakan pada PHP. Namun ada lagi contoh yaitu membuat pagination menggunakan ajax tanpa loading dan itu akan saya bahas pada postingan saya selanjutnya. Sekian postingan saya tentang Cara Membuat Pagination dengan Database MySQL pada PHP. Jika ada kesalahan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan komentar pada kolom komentar dibawah. Kunjungi postingan saya lainnya untuk menambah ilmu dan wawasan sobat.
 Baca juga :
Cara Membuat Pagination Menggunakan Ajax Tanpa Loading pada PHP
Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :
tutorialnya bagus pak, cuma mau tanya 1 hal, saya kan mau nerapin ini web yang pakai dinamis url misal url webnya
https://xxxx.com/admin/?pg=daftar
nah yang href untuk next pagenya apakah perlu dirubah jd apa ya? soalnya saya biarin default sesuai tutor diatas tdk bs, kalau dirubah jd dir aslinya jd eror misal xxxx.com/admin/mod_daftar/daftar.php di bagian href
if($page == 1){
echo ‘First‘;
echo ‘«‘;
} else {
$link_prev = ($page > 1)? $page – 1 : 1;
echo ‘First‘;
echo ‘«‘;
}
for($i = $start_number; $i <= $end_number; $i++){
$link_active = ($page == $i)? ' active' : '';
echo '‘.$i.’‘;
}
if($page == $jumlah_page){
echo ‘»‘;
echo ‘Last‘;
} else {
$link_next = ($page < $jumlah_page)? $page + 1 : $jumlah_page;
echo '»‘;
echo ‘Last‘;
}
mohon bantuannya
urlnya harus dibikin kaya gini “admin/?pg=daftar&page=1”
atau lebih enak lagi pake ajax jadi ngga perlu main url dan ngga perlu loading
contohnya seperti dibawah
https://dewankomputer.com/2019/03/06/cara-membuat-pagination-menggunakan-ajax-tanpa-loading-pada-php/