0
Membuat Pagination Dengan Bootstrap Dan PHPby sky studio scapeon.Membuat Pagination Dengan Bootstrap Dan PHPDengan kemunculan Bootsrap sangat memudahkan kita dalam desain. Boostrap memang menyediakan banyak plugin javascript maupun css. Kalau dulu saya pernah membuat Popover Dan Tooltip, kemudian saya juga pernah membahas bagaimana Membuat Pesan Error Dengan Menggunakan Boostrap. Mereka adalah plugin-plugin keren bootstrap yang tidak perlu—kita membuat susah payah dengan mainan css maupun javascript. Karena semua akan […]

Dengan kemunculan Bootsrap sangat memudahkan kita dalam desain. Boostrap memang menyediakan banyak plugin javascript maupun css. Kalau dulu saya pernah membuat Popover Dan Tooltip, kemudian saya juga pernah membahas bagaimana Membuat Pesan Error Dengan Menggunakan Boostrap. Mereka adalah plugin-plugin keren bootstrap yang tidak perlu—kita membuat susah payah dengan mainan css maupun javascript. Karena semua akan lebih mudah dengan bootstrap.

Dan untuk tutorial kali ini, mumpung saya lagi rajin karena tinggal nunggu sidang skripsi saya akan membahas mengenai cara membuat pagination dengan bootstrap. Apa sih itu pagination? Pagination yaitu sebuah fitur wajib bagi anda yang mempunyai record banyak mungkin sampe ribuan. Nah, dengan adanya fitur tersebut anda tidak perlu menampilkan secara keseluruhan itu record, takutnya juga akan membuat lama load dan juga boros layar. Nah, record tersebut akan dipecah-pecah menjadi bagian. Misal anda punya seratus record dan anda akan memecahnay menjadi sepuluh bagian, yang mana satu bagian dalam satu layar akan akan tampil sepuluh record saja. Dari pada mondar mandir ngomongin nggak jelas, mending kita tengok gambar di bawah ini :

1Nah, itu gambar dari pagination. Untuk membuatnya ikuti cara-cara berikut ini :

1. Buatlah database dengan nama terserah anda dan buatlah satu tabel dengan nama terserah anda juga. Tapi disini saya akan membuat database sisfo dan tabel siswa. Saya harap anda sudah dapat membuat database dan tablenya

22. Kemudian buat file koneksi. Saya harap anda juga sudah dapat membuatnya

<?php
// definisikan koneksi ke database
$server = "localhost";
$username = "root";
$password = "";
$database = "x";

// Koneksi dan memilih database di server
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");

?>

3. Jika semua sudah maka berikutnya anda sudah siapkan file Bootstrap nya. Saya menggunakan versi yang ketiga. Dan saya harap anda sudah mengerti sistem Bootstrap. Kalau belum anda dapat klik tautan Cara Membuat Website Dengan Bootstrap. Untuk donwload bootstrap gak perlu repot-repot karena saya juga menyertakan di file keseluruhan yang nantinya dapat anda download di akhir tulisan.

4. Kemudian buatlan satu file dengan nama index.php. dan berikut scriptnya :

<html>
<head>
<title>.:: Pagination ::.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media
queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php
//koneksi
include ("koneksi.php");
?>
<table class="table table-striped">
<tr class="judul">
        <th>No</th>
        <th>NIS</th>
        <th>Nama Siswa</th>
        <th>Kelas</th>
        <th>JK</th>
        <th>Tanggal Lahir</th>
        <th>Alamat</th>
        <th>Telp</th>
</tr>
<?php
//paging
$per_hal = 5;
$jumlah_record = mysql_query ("SELECT COUNT(*) FROM siswa");
$jum = mysql_result($jumlah_record, 0);
$halaman = ceil($jum/$per_hal);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$start = ($page - 1) * $per_hal;
$query = mysql_query("SELECT * FROM siswa ORDER BY nis DESC LIMIT $start, $per_hal");
$no = 1;
while ($row = mysql_fetch_array ($query))
{
echo"
<tr class='konten'>
    <td>$no</td>
    <td>$row[0]</td>
    <td>$row[1]</td>
    <td>$row[2]</td>
    <td>$row[3]</td>
    <td>$row[4]</td>
    <td>$row[5]</td>
    <td>$row[6]</td>
</tr>
";
$no++;
}
?>
</table>
<ul class="pagination">
    <li><a href="index.php?page=<?php echo $page -1 ?>"> &laquo; </a></li>
</ul>
<?php
for($x=1;$x<=$halaman;$x++)
{
    ?>
    <ul class="pagination">
        <li><a href="index.php?page=<?php echo $x ?>"><?php echo $x ?></a></li>
    </ul>
    <?php
}
?>
<ul class="pagination">
    <li><a href="index.php?page=<?php echo $page +1 ?>"> &raquo; </a></li>
</ul>
<!---Loading Bootstrap js--->
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Oke, sekian dari saya semoga membantu. Trims…

Download File

Download PDF

Related Posts

 

Leave a Reply