Saya disini akan memberikan cara membuat pagnation/pagging/halaman data pada PHP dan Mysqli dengan tampilan Bootstrap. Web PHP ini lanjutan dari tanggal 18 Februari 2016. Langsung saja dibawah berikut tutorial dan software yang dibutuhkan sebagai berikut :
Software yang diperlukan :
- Browser
- Xampp (Usahakan Terupdate)
- Notepad ++ / Dreamweaver
Pertama kita buat databasenya terlebih dahulu di xampp dengan nama database latihan kemudian buat nama table anggota dengan beberapa field dibawah sebagai berikut :
Selanjutnya buat koneksinya terlebih dahulu. buat dengan nama koneksi.php
<?php
$koneksi=mysqli_connect("localhost","root","","latihan");
?>
Buat halaman data-anggota.php kemudian copykan script dibawah ini :
<?php include "koneksi.php" ?>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="aset/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="aset/fonts/glyphicons-halflings-regular.ttf" type="text/css">
<title>Latihan Sederhana</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12" style="margin-top:30px;">
<a href="index.php" class="btn btn-info">+ Tambah Data</a>
<br>
<br>
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'sukses') {
echo '<div class="alert alert-info col-md-12" role="alert"><button type="button" class="close" data-dismiss="alert">×</button><center>Data Anggota berhasil di edit</center></div>';
}
if (!empty($_GET['message']) && $_GET['message'] == 'hapus-sukses') {
echo '<div class="alert alert-info col-md-12" role="alert"><button type="button" class="close" data-dismiss="alert">×</button><center>Data Anggota berhasil di Hapus</center></div>';
}
?>
<table class="table table-bordered table-striped table-responsive">
<thead style="text-align:center;">
<tr class="info">
<td>NIM</td>
<td>NAMA</td>
<td>TANGGAL LAHIR</td>
<td>ALAMAT</td>
<td>EDIT</td>
<td>HAPUS</td>
</tr>
</thead>
<?php
$batas = 5; //Bisa diubah sesuai keinginan (Tampilan Record yang ingin ditampilkan)
$halaman = @$_GET['hal'];
if(empty($halaman)){
$posisi = 0;
$halaman = 1;
}
else{
$posisi = ($halaman-1) * $batas;
}
$namabulan = array("","Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
$query = mysqli_query($koneksi,"select * from anggota LIMIT $posisi,$batas ");
while ($data = mysqli_fetch_array($query)) {
list($thn,$bln,$tgl)=explode('-',$data['tgl_lahir']);
?>
<tbody style="text-align:center;">
<tr>
<td><?php echo $data['nim'];?></td>
<td><?php echo $data['nama'];?></td>
<td><?php echo $tgl.' '.$namabulan[(int)$bln].' '.$thn; ?></td>
<td><?php echo $data['alamat'];?></td>
<td><a href="edit.php?id=<?php echo $data['id']?>&nama=<?php echo $data['nama']?>" class="btn btn-info">Edit</a></td>
<td><a href="proses.php?id=<?php echo $data['id'];?>" class="btn btn-danger" onclick="return confirm('Apakah yakin Data Ingin Di Hapus?');">Hapus</a></td>
</tr>
<?php } ?>
<tr>
<td colspan="6"><?php
$query2 = mysqli_query($koneksi, "select * from anggota");
$jmldata = mysqli_num_rows($query2);
$jmlhalaman = ceil($jmldata/$batas);
echo "<ul class='pagination'>";
echo "<li><a href=''>HAL :</a></li>";
echo "</ul>";
for($i=1;$i<=$jmlhalaman;$i++)
if ($i != $halaman){
echo "<ul class='pagination'>";
echo "<li ><a href=\"data-anggota.php?hal=$i\">$i</a></li>"; //data-anggota.php (Harap diubah sesuaikan dengan halaman file yang ingin ditampilkan
echo "</ul>";
}
else{
echo "<ul class='pagination'>";
echo "<li class=\"active\"><a href=''>$i<span class=\"sr-only\">(current)</span></a></li>";
echo "</ul>";
}
echo "<p>Total anggota : <b>$jmldata</b> orang</p>";
?></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="aset/js/jquery.js"></script>
<script src="aset/js/bootstrap.min.js"></script>
</body>
</html>
Apabila males script dapat membuatnya dibawah. Apabila ada yang bingung dapat berkomentar dibawah :
Terima Kasih
Download
2 komentar
selamat siang min, kalau untuk pencarian ada atau tidak ya? terimakasih, mohon bantuannya
Ada tapi saya belom sempet posting nih. Mungkin besok saya posting pencarian berdasarkan. Jadi tinggal kombinasikan dengan Pagging tersebut.
Terima kasih atas masukan Mas Agung.
EmoticonEmoticon