Free Ebook Tutorial from Rosihan Ari's Blog

Ebook Javascript | Ebook PHP | Ebook AJAX | Ebook CSS | Ebook FPDF | Ebook Wordpress | Ebook Java SE




Mempercantik Navigasi Paging dengan Twitter Bootstrap


January 21st, 2014 | by rosihanari |


Jual kaos

Beberapa waktu yang lalu, saya pernah memaparkan tentang bagaimana membuat script PHP untuk keperluan paging. Jika diperhatikan, link navigasi perhalaman yang dihasilkan dari script tersebut masih sangat sederhana sekali. Perhatikan gambar berikut ini

 photo twitter-bootstrap01_zpsa29c4847.jpg

Nah.. dalam artikel ini kita akan sedikit memoles tampilan navigasinya tersebut supaya lebih cantik menggunakan Twitter Bootstrap. Apa itu Twitter Bootstrap? Twitter Bootstrap adalah framework CSS yang dikembangkan oleh Twitter. Dengan framework CSS yang siap ini kita tidak perlu pusing-pusing memikirkan atau membuat style CSS nya. Adapun hasil akhir dari tampilan navigasinya nanti adalah seperti ini

 photo twitter-bootstrap02_zpsde13f801.jpg

Mau tau cara membuatnya? OK mudah kok ternyata.

Untuk implementasi dalam pembahasan ini, saya terapkan pada studi kasus data mahasiswa yang dalam hal ini menggunakan struktur tabel database sbb:

CREATE TABLE `mhs` (
`NIM` varchar(10),
`NAMAMHS` varchar(20),
PRIMARY KEY (`NIM`)
);

Selanjutnya, misalkan kita sudah memiliki script paging untuk menampilkan data mahasiswa di atas sebagaimana yang telah dijelaskan di artikel sebelumnya sbb:

paging.php

<?php
// koneksi ke database
mysql_connect('namahost', 'namauser', 'pass');
mysql_select_db('namadb');
?>

<html>
  <head>
     <title>Contoh Paging</title>
  </head>

  <body style="margin-left: 15px;">
  <h1>Data Mahasiswa</h1>

  <?php
  // jum data per halaman
  $dataPerPage = 5;
  if(isset($_GET['page']))
  {
     $noPage = $_GET['page'];
  }
  else $noPage = 1;

  $offset = ($noPage - 1) * $dataPerPage;

  $query = "SELECT * FROM mhs ORDER BY nim LIMIT $offset, $dataPerPage";
  $result = mysql_query($query) or die('Error');

  echo "<table border='1'>";
  echo "<tr><th>NIM</th><th>NAMA MAHASISWA</th></tr>";
  while($data = mysql_fetch_array($result))
  {
     echo "<tr><td>".$data['NIM']."</td><td>".$data['NAMAMHS']."</td></tr>";
  }
  echo "</table><br>";

  $query = "SELECT COUNT(*) AS jumData FROM mhs";
  $hasil = mysql_query($query);
  $data = mysql_fetch_array($hasil);

  $jumData = $data['jumData'];
  $jumPage = ceil($jumData/$dataPerPage);

  // memunculkan navigasi paging
  if ($noPage > 1) echo " <a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'><< Prev</a> ";
  for($page = 1; $page <= $jumPage; $page++)
  {
    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 " ".$page." ";
      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)."'>Next >></a> ";
  ?>
  </body>
</html>

Tampilan dari script paging.php di atas adalah sbb:

 photo twitter-bootstrap03_zpsfcbcb3b7.jpg

Nah sekarang kita sedikit memodifikasi script di atas dengan Twitter Bootstrap. Pertama download terlebih dahulu file Twitter Bootstrapnya di http://getbootstrap.com

Langkah berikutnya, adalah mengekstrak file bootstrapnya. Hasil ekstraksi berupa 3 buah folder: css, js, dan fonts. Pindahkan ketiga folder tersebut ke direktori yang sama dengan file paging.php di atas.

Kemudian, saatnya kita mulai mengutak-atik paging.phpnya. Pertama tambahkan tag <!DOCTYPE html> sebelum tag <html> nya. Tag <!DOCTYPE html> menunjukkan bahwa dokumen HTML yang kita buat memenuhi standard HTML5.

Langkah selanjutnya, kita sisipkan tag untuk mengakses CSS dari bootstrapnya ke dalam bagian <head>...</head>. Tag yang disisipkan adalah sbb:

<link href="css/bootstrap.min.css" rel="stylesheet">

Setelah itu, kita fokus pada bagian script yang untuk menampilkan navigasinya. Oya, di bootstrap sudah ada class
khusus untuk navigasi. Class navigasi ini nanti diberikan pada suatu obyek berupa list (bisa berupa ordered list atau <ol> atau unordered list <ul>). Oleh karena itu di script paging.php tersebut perlu kita tambahkan tag

echo "<ul class='pagination'>";

dan

echo "</ul>";

yang mengapit bagian navigasi dalam script di atas

 photo twitter-bootstrap04_zpsccee756e.jpg

Kemudian, kita modifikasi juga bagian script yang menampilkan nomor-nomor halaman pagingnya, serta bagian yang untuk menampilkan Prev dan Next nya. Masing-masing bagian tersebut kita buat sebagai list <li>, sehingga menjadi sbb:

if ($noPage > 1) echo "<li><a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'><< Prev</a></li>";
for($page = 1; $page <= $jumPage; $page++)
{
    if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))
    {
       if (($showPage == 1) && ($page != 2)) echo "<li class='disabled'><a href='#'>...</a></li>";
       if (($showPage != ($jumPage - 1)) && ($page == $jumPage)) echo "<li class='disabled'><a href='#'>...</a></li>";
       if ($page == $noPage) echo "<li class='active'><a href='#'>".$page."</a></li>";
       else echo "<li><a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a></li>";
       $showPage = $page;
    }
}

if ($noPage < $jumPage) echo "<li><a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next >></a></li>";

Perhatikan pada potongan script di atas. Di situ ada class ‘disabled‘ yang berarti bahwa obyek tersebut tidak bisa diklik dalam navigasinya. Dalam hal ini class tersebut diberikan pada teks '...'. Perhatikan gambar berikut ini sebagai hasilnya, di mana teks '...' dalam navigasi tersebut tidak bisa diklik.

 photo twitter-bootstrap05_zps437d91bc.jpg

Selanjutnya, terdapat pula class ‘active‘. Class ini menunjukkan bahwa halaman tersebut sedang aktif atau sedang dibuka. Halaman yang sedang aktif akan memiliki warna yang berbeda dibandingkan yang lainnya. Perhatikan hasilnya dalam gambar berikut.

 photo twitter-bootstrap06_zps493d55ff.jpg

Sehingga setelah proses modifikasi ini, script paging.php secara utuh diperoleh sbb:

paging.php

<?php
mysql_connect('namahost', 'namauser', 'pass');
mysql_select_db('namadb');
?>
<!DOCTYPE html>
<html>
    <head>
       <title>Contoh Paging</title>
       <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>

    <body style="margin-left: 15px;">
    <h1>Data Mahasiswa</h1>
    <?php

         $dataPerPage = 5;
         if(isset($_GET['page']))
         {
            $noPage = $_GET['page'];
         }
         else $noPage = 1;

         $offset = ($noPage - 1) * $dataPerPage;

         $query = "SELECT * FROM mhs ORDER BY nim LIMIT $offset, $dataPerPage";
         $result = mysql_query($query) or die('Error');

         echo "<table border='1'>";
         echo "<tr><th>NIM</th><th>NAMA MAHASISWA</th></tr>";
         while($data = mysql_fetch_array($result))
         {
             echo "<tr><td>".$data['NIM']."</td><td>".$data['NAMAMHS']."</td></tr>";
         }
         echo "</table><br>";

        $query  = "SELECT COUNT(*) AS jumData FROM mhs";
        $hasil  = mysql_query($query);
        $data   = mysql_fetch_array($hasil);

        $jumData = $data['jumData'];
        $jumPage = ceil($jumData/$dataPerPage);

        // menampilkan navigasi paging
        echo "<ul class='pagination'>";
        if ($noPage > 1) echo  "<li><a href='".$_SERVER['PHP_SELF']."?page=".($noPage-1)."'><< Prev</a></li>";
        for($page = 1; $page <= $jumPage; $page++)
        {
            if ((($page >= $noPage - 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))
            {
              if (($showPage == 1) && ($page != 2))  echo "<li class='disabled'><a href='#'>...</a></li>";
              if (($showPage != ($jumPage - 1)) && ($page == $jumPage))  echo "<li class='disabled'><a href='#'>...</a></li>";
              if ($page == $noPage) echo "<li class='active'><a href='#'>".$page."</a></li>";
              else echo "<li><a href='".$_SERVER['PHP_SELF']."?page=".$page."'>".$page."</a></li>";
              $showPage = $page;
            }
        }

        if ($noPage < $jumPage) echo "<li><a href='".$_SERVER['PHP_SELF']."?page=".($noPage+1)."'>Next >></a></li>";

        echo "</ul>";

    ?>
    </body>
</html>

Dan… hasil akhir tampilannya setelah dimodif adalah sbb. Jreeng…

 photo twitter-bootstrap07_zps5a0881e1.jpg

Mudah bukan membuatnya? he 3x.. :-) Selamat mempraktikkan ya.


Kata kunci: bootstrap tutorial - css tutorial - paging tutorial - php tutorial -


 

Komentar Anda ...