Membuat Paging Dengan Style Bootstrap

Paging Dengan Style Bootstrap

Membuat Paging Dengan Style Bootstrap - Pada tutorial sebelum-sebelumnya saya sudah pernah membahas bagaimana Cara Membuat Paging Dengan PHP. Namun pada tutorial tersebut saya hanya lebih fokus kepada bagaimana konsep membuat paging. Di sana saya juga sudah memberikan contoh studi kasus cara mengimplementasikan konsep paging itu sendiri. 

Tetapi kemarin ada seorang teman yang sempat membaca dan mencoba tutorial yang saya buat, namun dia menginginkan tampilan paging-nya itu menggunakan style bootstrap, dan meminta saya untuk membuatkan tutorialnya. Sebenarnya untuk membuat paging dengan style bootstrap hanya cukup memodifikasi sedikit tutorial yang sudah saya berikan sebelumnya. 

Untuk yang ingin juga membuat paging dengan style bootstrap, anda bisa mengikuti tutorial berikut sampai akhir. Di tutorial ini saya tidak akan membahasnya dari awal lagi seperti membuat tabel member, menambahkan data dan sebagainya, maka dari itu saya menyarankan anda untuk membaca tutorial paging saya yang sebelumnya terlebih dahulu, karena tutorial berikut berhubungan dengan tutorial tersebut. Pada tutorial ini kita hanya cukup menambahkan css dari bootstrap, dan memodifikasi script berikut

$jumPage=ceil($jumlahData/$dataperPage);
 if($noPage > 1)
 {
  echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&laquo;</a>";
 }
  
 for($page = 1; $page <= $jumPage; $page++)
 {
  $showPage = 0;
  if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))
  {
   if (($showPage == 1) && ($page != 2)) {
     
    echo " ... ";
   }
   if (($showPage != ($jumPage - 1)) && ($page == $jumPage)) {
     
    echo " ... ";
   }
   if ($page == $noPage){
     
     echo " <b>".$page."</b>";
   }
   else {
    echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";;
   }
   $showPage=$page;
  }
 }
 
 
 if ($noPage < $jumPage) {
  echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>&raquo;</a>";
  }

Dimodifikasi menjadi berikut ini

<div class="pagination">
<ul>
<?php
 $jumPage=ceil($jumlahData / $dataperPage);
 if($noPage > 1)
 {
  echo '<li>';
  echo"<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&laquo;</a>";
  echo '</li>';
 }
 for($page = 1; $page <= $jumPage; $page++)
 {
  $showPage = 0;
  if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))
  {
   if (($showPage == 1) && ($page != 2)) {
    
    echo '<li class="disabled">';
    echo "<a href='#'>...</a>";
    echo '</li>';
   }
   if (($showPage != ($jumPage - 1)) && ($page == $jumPage)) {
    
    echo '<li class="disabled">';
    echo "<a href='#'>...</a>";
    echo '</li>';
   }
   if ($page == $noPage){
    
    echo '<li class="disabled">';
     echo " <a href='#'><b>".$page."</b></a> ";
    echo '</li>';
   }
   else {
    
    echo '<li>';
    echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
    echo '</li>';
   }
   $showPage=$page;
  }
 }


 if ($noPage < $jumPage) {
  
  echo '<li>';
  echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>&raquo;</a>";
  echo '</li>';
  }
?>
 </ul>
 </div>

Bagimana, sudah paham apa yang harus dimodifikasi dan ditambahkan? Sekarang mari kita implementasikan script di atas ke file index atau file paging-nya. Sesuai dengan tutorial sebelumnya, silahkan edit file index.php anda.

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<title>Log</title>
</head>

<body>
 <?php
   
  //Koneksikan ke database
  mysql_connect("localhost", "root", "");
  mysql_select_db("learn");
   
  //Tampilkan Jumlah data
  $query = mysql_query("SELECT COUNT(*) jumData from member");
  $data = mysql_fetch_array($query);
  $jumlahData = $data["jumData"];
   
  //Tentukan Jumlah Data Per Halaman
  $dataperPage = 3;
   
  //Buat kondisi saat request halaman
  if(isset($_GET['page']))
  {
    $noPage= $_GET['page'];
  }
 
  else
  {
    $noPage=1;
  }
   
  //Tentukan Awal dari data yang akan ditampilkan
  $offset = ($noPage-1)*$dataperPage;
   
  //Buat Tabel untuk menampilkan data
  ?>
  <table width="75%" border="1" cellspacing="0" cellpadding="3">
  <tr>
   <th colspan="4" bgcolor="#CCFF66" width="50%" height="40" align="center" style="font-family:Georgia, 'Times New Roman', Times, serif;">MEMBER</th>
  </tr>
  <tr>
   <th width="5%" height="20" bgcolor="#0066FF" align="center">No</th>
   <th width="25%" height="20" bgcolor="#0066FF" align="center">Nama</th>
   <th width="30%" height="20" bgcolor="#0066FF" align="center">Alamat</th>
   <th width="15%" height="20" bgcolor="#0066FF" align="center">Handphone</th>
  </tr>
             <?php
   //Tampilkan Data ke kolom tabel dengan perulangan
   $lihatmember = mysql_query("select * from member order by idmember DESC limit $offset, $dataperPage");
   while($member = mysql_fetch_array($lihatmember))
   {
   ?>
    <tr>
    <td><?php echo $offset=$offset+1; ?></td>
    <td><?php echo $member['namamember']; ?></td>
    <td><?php echo $member['alamatmember']; ?></td>
    <td><?php echo $member['nohape']; ?></td>
    </tr>
   <?php
   }
  ?>
 </table>
<div class="pagination">
<ul>
<?php
 $jumPage=ceil($jumlahData / $dataperPage);
 if($noPage > 1)
 {
  echo '<li>';
  echo"<a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'>&laquo;</a>";
  echo '</li>';
 }
 for($page = 1; $page <= $jumPage; $page++)
 {
  $showPage = 0;
  if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))
  {
   if (($showPage == 1) && ($page != 2)) {
    
    echo '<li class="disabled">';
    echo "<a href='#'>...</a>";
    echo '</li>';
   }
   if (($showPage != ($jumPage - 1)) && ($page == $jumPage)) {
    
    echo '<li class="disabled">';
    echo "<a href='#'>...</a>";
    echo '</li>';
   }
   if ($page == $noPage){
    
    echo '<li class="disabled">';
     echo " <a href='#'><b>".$page."</b></a> ";
    echo '</li>';
   }
   else {
    
    echo '<li>';
    echo " <a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a> ";
    echo '</li>';
   }
   $showPage=$page;
  }
 }


 if ($noPage < $jumPage) {
  
  echo '<li>';
  echo "<a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>&raquo;</a>";
  echo '</li>';
  }
?>
 </ul>
 </div>
 
</body>
</html>

Langkah terakhir, silahkan buat folder dengan nama "css" di dalam folder latihan paging anda, dan download css bootstrap berikut, kemudian anda paste di folder css tersebut.

Sekarang silahkan buka latihan paging anda yang sudah dimodifikasi dengan style bootstrap. Semoga Bermanfaat :)