Saya yakin beberapa diantara reader blog ini sudah mengenal pagination system, Karena hal in adalah hal yang sangat mudah ditemui di berbagai website, misalnya online shop, atau mungkin blog saya ini :p dan bahkan saat kalian mencari informasi di google pun kalian akan menemi pagination kayak ss dibawah ini deh.
Udah jelas kan apa itu pagination?, Bayangin deh, kalo kamu punya website gede yang udah record beribu2 bahkan berjuta2 data client di databasemu, dan kamu ingin menampilkanya apakah mau ditampilkan di 1 page?? wkwkwk kan gak mungkin hehehe, maka dair itu pagination sangat membantu dalam hal ini :D, karena hana sebagai latihan saya hanya akan membuat dummy content di database ya untuk tutotial blog ini heheh :D.
Kira - kira seperti ini isi record di database saya untuk contoh.
Saya akan membuatnya dalam 1 file php saja untuk menyimpan file config dll, buatlah file index.php.
1. index.php
paste code dibawah ini untuk membangun koneksi ke database, jika udah punya dan hanya ingin mebuat paginationya silahkan skip saja step ini.
<?php
class db {
function __construct() {
$this->mysqli = new mysqli('myhost','myuser','mypass','mydb');
if(mysqli_connect_error()) {
die("Tidak bisa konek ke database karena " . mysqli_connect_error());
}
}
}
Jangan lupa untuk replace myhost, myuser, mypass, mydb dengan detail database anda.
paste code html dibawah ini, code html dibawah ini yang nantinya akan saya gunakan untuk menampilkan datanya.
<html>
<head>
<title>Latihan Pagination</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</head>
<body>
<style>
body {
background: url(http://il8.picdn.net/shutterstock/videos/8543482/thumb/1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.panel-default {
opacity: 0.9;
margin-top:30px;
}
.form-group.last { margin-bottom:0px; }
</style>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='panel panel-default'>
<div class='panel-heading'>
<span class='glyphicon glyphicon-option-vertical'></span> Tampilkan Data
</div>
<div class='panel-body' style='word-wrap: break-word;'>
<!-- WHILE LOOPS AKAN DITULIS DISINI -->
<div class='form-group'>
<div class='col-md-12'>
<hr>
<p style='text-align:center;'>Copyright © <?php echo date("Y"); ?> rizalfakhri</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tampilan sudah jadi, saya akan membuat panel lagi dibawah panel bootstrap tersebut Sehingga codenya akan jadi seperti dibawah ini
<?php
class db {
function __construct() {
$this->mysqli = new mysqli('myhost','myuser','mypass','mydb');
if(mysqli_connect_error()) {
die("Tidak bisa konek ke database karena " . mysqli_connect_error());
}
}
}
?>
<html>
<head>
<title>Latihan Pagination</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</head>
<body>
<style>
body {
background: url(http://il8.picdn.net/shutterstock/videos/8543482/thumb/1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.panel-default {
opacity: 0.9;
margin-top:30px;
}
.form-group.last { margin-bottom:0px; }
</style>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='panel panel-default'>
<div class='panel-heading'>
<span class='glyphicon glyphicon-option-vertical'></span> Tampilkan Data
</div>
<div class='panel-body' style='word-wrap: break-word;'>
<!-- WHILE LOOPS AKAN DITULIS DISINI -->
<div class='form-group'>
<div class='col-md-12'>
<hr>
<p style='text-align:center;'>Copyright © <?php echo date("Y"); ?> rizalfakhri</p>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
SOME CONTENT
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Pada section SOME CONTENT akan saya isi sebagai paginationya agar terlihat rapi, Selanjutnya saya akan membuat PHP code untuk mengambil data yang saya simpan di database, Saya akan menambah code dibawah ini dibawah code <!-- WHILE LOOPS AKAN DITULIS DISINI --> Codenya seperti dibawah ini.
<?php
$db = new db();
if($data = $db->mysqli->query("SELECT * FROM data")) {
if($data->num_rows > 0 ) {
while($hasil = mysqli_fetch_array($data)) {
echo "
<div class='col-xs-4'>
<div class='panel panel-default'>
<div class='panel-heading'> " . $hasil['judul'] . "</div>
<div class='panel-body'>
<p>" . $hasil['isi'] . "</p><br /><br />
<p>" . $hasil['isi2'] . "</p>
</div>
</div>
</div>
";
}
}
}
?>
Sehingga bila file index.php dijalankan akan menampilkan seperti screenshoot dibawah ini.
Oke sudah bekerja, Selanjutnya saya akan menulis code untuk membatasi fetch record dari database, tujuanya adalah untuk membatasi akan ada berapa record yang ditampilkan dalam 1 page, Dalam contoh kali ini, saya akan menggunakan 6 untuk limit per pagenya, tambah code dibawah ini setelah code $db = new db();
$limit = 6;
Kita sudah selesai membuat / menulis batas dari penampilan record per page.
JIka sudah, saya akan membuat if else statement untuk mengetahui kita ada di page berapa dan membatasi SQL query untuk mengambil data, Kita akan menggunakan $_GET kali ini, Jadi tambahkan code dibawah ini setelah variable $limit tadi ya.
if(isset($_GET['page']) && $_GET['page'] > 1 ) {
$pages = $_GET['page'] * $limit - $limit;
} elseif($_GET['page'] < 2 or "") {
$pages = 0;
} else {
$pages = 0;
}
Tujuan ditulisnya code diatas adalah untuk mengetahui value dari $_GET['page'] yang nantinya akan kita olah,
jika value dari $_GET['page'] lebih dari 1 yang berarti 2 dan seterusnya, maka value dari $_GET['page'] akan di kali (X) limit lalu dikurangi (-) limt lagi, limit kita dapat dari variable $limit.
Jika $_GET['page'] adalah kurang dari 2 yang berarti 0 atau 1 atau bahkan kosong tidak ada valuenya maka akan kita anggap 0 saja.
Sehingga hasil dari penghitungan matematika tersebut akan kita gunakan untuk mengirim query ke database, lalu di querynya kita akan menambahkan LIMIT sehingga querynya akan jadi seperti ini.
if($data = $db->mysqli->query("SELECT * FROM data LIMIT $pages,$limit")) {
if($data->num_rows > 0 ) {
while($hasil = mysqli_fetch_array($data)) {.....
Hasilnya adalah seperti screenshoot dibawah ini.
page 1
page 2
page 3
dan page 4
Oke system paggingnya sudah selesai, Saatnya membuat button agar memudahkan user untuk menuju ke page berapa, Saya akan menggunakan for loops disini.
Pertama, kita harus mengetahui ada berapa record yang ada di database yang ingin kita tampilkan, codenya adalah seperti dibawah ini.
$db = new db();
$count = $db->mysqli->query("SELECT * FROM data");
$count = $count->num_rows;
Setekah kita mengetahui jumlah record di database tersebut, Kita akan membagi hasil dari $count dibagi $limit yang berarti dalam contoh kali in adalah 20 : 6 yang hasilnya adalah 3.3333333333333 atau 3,3
Disini saya akan membulatkanya dengan function ceil() sehinggahasinya adalah 4 dan code yang harus ditulis adalah.
$count = ceil($count / $limit);
karakter "/" didalam function ceil bukan atau tapi bagi yaitu operator PHP.
sehingga jika kita echo hasilnya adalah 4 setelah 3,3 dibulatkan jadi 4 .
selanjutnya saya akan membuat for loops seperti dibawah ini.
for($n =1; $n <= $count; $n++) {
echo "<li><a href='?page=" . $n . "' > " . $n . "</a></li>";
}
Sampai sini kita sudah selesai gan :D sehingga code akhirnya seperti dibawah ini gan :D
<?php
class db {
function __construct() {
$this->mysqli = new mysqli('myhost','myuser','mypass','mydb');
if(mysqli_connect_error()) {
die("Tidak bisa konek ke database karena " . mysqli_connect_error());
}
}
}
?>
<html>
<head>
<title>Latihan Pagination</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</head>
<body>
<style>
body {
background: url(http://il8.picdn.net/shutterstock/videos/8543482/thumb/1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.panel-default {
opacity: 0.9;
margin-top:30px;
}
.form-group.last { margin-bottom:0px; }
</style>
<div class='container'>
<div class='row'>
<div class='col-md-12'>
<div class='panel panel-default'>
<div class='panel-heading'>
<span class='glyphicon glyphicon-option-vertical'></span> Tampilkan Data
</div>
<div class='panel-body' style='word-wrap: break-word;'>
<!-- WHILE LOOPS AKAN DITULIS DISINI -->
<?php
$db = new db();
$limit = 6;
if(isset($_GET['page']) && $_GET['page'] > 1 ) {
$pages = $_GET['page'] * $limit - $limit;
} elseif($_GET['page'] < 2 or "") {
$pages = 0;
} else {
$pages = 0;
}
if($data = $db->mysqli->query("SELECT * FROM data LIMIT $pages,$limit")) {
if($data->num_rows > 0 ) {
while($hasil = mysqli_fetch_array($data)) {
echo "
<div class='col-xs-4'>
<div class='panel panel-default'>
<div class='panel-heading'> " . $hasil['judul'] . "</div>
<div class='panel-body'>
<p>" . $hasil['isi'] . "</p><br /><br />
<p>" . $hasil['isi2'] . "</p>
</div>
</div>
</div>
";
}
}
}
?>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<center>
<ul class="pagination">
<?php
$db = new db();
$count = $db->mysqli->query("SELECT * FROM data");
$count = $count->num_rows;
$count = ceil($count / $limit);
for($n =1; $n <= $count; $n++) {
echo "<li><a href='?page=" . $n ."' > " . $n ."</a></li>";
}
?>
</ul>
</center>
<div class='form-group'>
<div class='col-md-12'>
<hr>
<p style='text-align:center;'>Copyright © <?php echo date("Y"); ?> rizalfakhri</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Inti dari pagination hanya membatasi limit query yang akan diambil dari database, lalu membuat button pagination systemnya untuk memudahkan berpindah page :), Oiya jangan lupa untuk mengamankan data yang didapat dari $_GET karena sangat rentan terhadap sql injection :)