Membuat Pencarian(searching) dan Pagination dengan PHP - Mari Belajar Coding

18 November 2019

Membuat Pencarian(searching) dan Pagination dengan PHP

maribelajarcoding         
Membuat Pencarian dan Pagination PHP

Selamat datang kembali di blog Mari belajar coding. Tutorial kali ini kita akan belajar membuat sebuah form pencarian data dan pagination. Jika tutorial sebelumnya kita hanya membuat sebuah pagination untuk menampilkan data dalam beberapa halaman pada tabel, kali ini kita akan menambahkan kolom pencarian untuk mempermudah dalam mencari data berdasarkan kata kunci yang telah di inputkan. 
Membuat Pencarian dan Pagination PHP

Membuat Pencarian dan Pagination dengan PHP

Teman-teman bisa menggunakan database akademik yang pernah kita gunakan pada tutorial sebelumnya untuk membuat pagination dengan PHP dan Mysql atau buat baru seperti contoh dibawah ini.

CREATE DATABASE akademik;
USE akademik;

CREATE TABLE `siswa` (
`SiswaID` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
`Nama` varchar(100),
`Alamat` text,
`JenisKelamin` varchar(50)
);

Inputkan data kedalam tabel siswa sebagai contoh data yang akan kita tampilkan nantinya.

INSERT INTO `siswa` VALUES ('1', 'Ardin', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('2', 'Vita', 'Semarang', 'Perempuan');
INSERT INTO `siswa` VALUES ('3', 'Wisnu', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('4', 'Angga', 'Rembang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('5', 'Dian', 'Wonosobo', 'Laki-laki');
INSERT INTO `siswa` VALUES ('6', 'Ali', 'Brebes', 'Laki-laki');
INSERT INTO `siswa` VALUES ('7', 'Nia', 'Pati', 'Perempuan');
INSERT INTO `siswa` VALUES ('8', 'Yudis', 'Salatiga', 'Laki-laki');
INSERT INTO `siswa` VALUES ('9', 'Iman', 'Surakarta', 'Laki-laki');
INSERT INTO `siswa` VALUES ('10', 'Yogi', 'Sleman', 'Laki-laki');
INSERT INTO `siswa` VALUES ('11', 'Rifki', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('12', 'Anisa', 'Wonosobo', 'Perempuan');
INSERT INTO `siswa` VALUES ('13', 'Rani', 'Rembang', 'Perempuan');
INSERT INTO `siswa` VALUES ('14', 'Rahmat', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('15', 'Ayu', 'Semarang', 'Perempuan');
INSERT INTO `siswa` VALUES ('16', 'Nabila', 'Sleman', 'Perempuan');
INSERT INTO `siswa` VALUES ('17', 'Heri', 'Pati', 'Laki-laki');
INSERT INTO `siswa` VALUES ('18', 'Nugroho', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('19', 'Farida', 'Salatiga', 'Perempuan');
INSERT INTO `siswa` VALUES ('20', 'Andri', 'Semarang', 'Laki-laki');
INSERT INTO `siswa` VALUES ('21', 'Andi', 'Surakarta', 'Laki-laki');
INSERT INTO `siswa` VALUES ('22', 'Handayani', 'Semarang', 'Perempuan');
INSERT INTO `siswa` VALUES ('23', 'Rendy', 'Semarang', 'Laki-laki');

Setelah selesai membuat database akademik dan input datanya, selanjutnya kita buat file koneksi.php untuk menghubungkan antara aplikasi dengan database.

<?php
 $host = "localhost"; 
 $username = "root"; 
 $password = ""; 
 $database = "akademik"; 
 $con = mysqli_connect($host, $username, $password, $database); 
?>

Buat form untuk pencarian data, disini kita buat dua jenis pencarian yaitu pencarian berdasarkan nama dan alamat. Untuk formnya sendiri kita gunakan method Get bukan Post.

<form class="form-inline" >
  <div class="form-group">
    <select class="form-control" id="Kolom" name="Kolom" required="">
      <?php
        $kolom=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
      ?>
      <option value="Nama" <?php if ($kolom=="Nama") echo "selected"; ?>>Nama</option>
      <option value="Alamat" <?php if ($kolom=="Alamat") echo "selected";?>>Alamat</option>
    </select>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" id="KataKunci" name="KataKunci" placeholder="Kata kunci.." required="" value="<?php if (isset($_GET['KataKunci']))  echo $_GET['KataKunci']; ?>">
  </div>
  <button type="submit" class="btn btn-primary">Cari</button>
  <a href="index.php" class="btn btn-danger">Reset</a>
</form>

Buat sebuah tampilan data di tabel seperti contoh dibawah ini, variabel page digunakan untuk menampung data request page dari url, variabel kolom cari dan kolom kata kunci juga di gunakan untuk menampung data yang di peroleh dari url. Untuk menampilkan data dalam beberapa halaman, kita gunakan query limit pada sql.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>No.</th>
      <th>Nama</th>
      <th>Alamat</th>
      <th>Jenis Kelamin</th>
    </tr>
  </thead>  
  <tbody>
    <?php
    include "koneksi.php";
    
    $page = (isset($_GET['page']))? (int) $_GET['page'] : 1;
   
    $kolomCari=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
    
    $kolomKataKunci=(isset($_GET['KataKunci']))? $_GET['KataKunci'] : "";

    // Jumlah data per halaman
    $limit = 5;

    $limitStart = ($page - 1) * $limit;
    
    //kondisi jika parameter pencarian kosong
    if($kolomCari=="" && $kolomKataKunci==""){
      $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa LIMIT ".$limitStart.",".$limit);
    }else{
      //kondisi jika parameter kolom pencarian diisi
      $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%' LIMIT ".$limitStart.",".$limit);
    }
    
    $no = $limitStart + 1;
    
    while($row = mysqli_fetch_array($SqlQuery)){ 
    ?>
      <tr>
        <td><?php echo $no++; ?></td>
        <td><?php echo $row['Nama']; ?></td>
        <td><?php echo $row['Alamat']; ?></td>
        <td><?php echo $row['JenisKelamin']; ?></td>
      </tr>
    <?php           
    }
    ?>
  </tbody>      
</table>

Terakhir kita buat paginationnya, untuk mempercantik tampilan tabel dan pagination gunakan framework bootstrap.

<div align="right">
  <ul class="pagination">
    <?php
      // Jika page = 1, maka LinkPrev disable
      if($page == 1){ 
    ?>        
      <!-- link Previous Page disable --> 
      <li class="disabled"><a href="#">Previous</a></li>
    <?php
      }
      else{ 
        $LinkPrev = ($page > 1)? $page - 1 : 1;  

        if($kolomCari=="" && $kolomKataKunci==""){
        ?>
          <li><a href="index.php?page=<?php echo $LinkPrev; ?>">Previous</a></li>
     <?php     
        }else{
      ?> 
        <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $LinkPrev;?>">Previous</a></li>
       <?php
         } 
      }
    ?>

    <?php
      //kondisi jika parameter pencarian kosong
      if($kolomCari=="" && $kolomKataKunci==""){
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa");
      }else{
        //kondisi jika parameter kolom pencarian diisi
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%'");
      }     
    
      //Hitung semua jumlah data yang berada pada tabel Sisawa
      $JumlahData = mysqli_num_rows($SqlQuery);
      
      // Hitung jumlah halaman yang tersedia
      $jumlahPage = ceil($JumlahData / $limit); 
      
      // Jumlah link number 
      $jumlahNumber = 1; 

      // Untuk awal link number
      $startNumber = ($page > $jumlahNumber)? $page - $jumlahNumber : 1; 
      
      // Untuk akhir link number
      $endNumber = ($page < ($jumlahPage - $jumlahNumber))? $page + $jumlahNumber : $jumlahPage; 
      
      for($i = $startNumber; $i <= $endNumber; $i++){
        $linkActive = ($page == $i)? ' class="active"' : '';

        if($kolomCari=="" && $kolomKataKunci==""){
    ?>
        <li<?php echo $linkActive; ?>><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>

    <?php
      }else{
        ?>
        <li<?php echo $linkActive; ?>><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
        <?php
      }
    }
    ?>
    
    <!-- link Next Page -->
    <?php       
     if($page == $jumlahPage){ 
    ?>
      <li class="disabled"><a href="#">Next</a></li>
    <?php
    }
    else{
      $linkNext = ($page < $jumlahPage)? $page + 1 : $jumlahPage;
     if($kolomCari=="" && $kolomKataKunci==""){
        ?>
          <li><a href="index.php?page=<?php echo $linkNext; ?>">Next</a></li>
     <?php     
        }else{
      ?> 
         <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $linkNext; ?>">Next</a></li>
    <?php
      }
    }
    ?>
  </ul>
</div>

Kode lengkapnya seperti ini, simpan dengan nama file index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Maribelajarcoding.com - Pagination dengan PHP dan Mysql</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- css bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">maribelajarcoding.com</a>
    </div>
  </div>
</nav>
  
<div class="container">
  <div align="center">
    <h3><b>Pencarian dan Pagination PHP</b></h3>
    <h4><b>maribelajarcoding.com</b></h4>
  </div>
  <!--Panel Form pencarian -->
  <div class="row">
    <div class="col-md-5">
      <div class="panel panel-default">
        <div class="panel-heading"><b>Pencarian</b></div>
        <div class="panel-body">
          <form class="form-inline" >
            <div class="form-group">
              <select class="form-control" id="Kolom" name="Kolom" required="">
                <?php
                  $kolom=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
                ?>
                <option value="Nama" <?php if ($kolom=="Nama") echo "selected"; ?>>Nama</option>
                <option value="Alamat" <?php if ($kolom=="Alamat") echo "selected";?>>Alamat</option>
              </select>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" id="KataKunci" name="KataKunci" placeholder="Kata kunci.." required="" value="<?php if (isset($_GET['KataKunci']))  echo $_GET['KataKunci']; ?>">
            </div>
            <button type="submit" class="btn btn-primary">Cari</button>
            <a href="index.php" class="btn btn-danger">Reset</a>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- Tabel data Siswa -->
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Alamat</th>
        <th>Jenis Kelamin</th>
      </tr>
    </thead>  
    <tbody>
      <?php
      include "koneksi.php";
     
      $page = (isset($_GET['page']))? (int) $_GET['page'] : 1;
      
      $kolomCari=(isset($_GET['Kolom']))? $_GET['Kolom'] : "";
     
      $kolomKataKunci=(isset($_GET['KataKunci']))? $_GET['KataKunci'] : "";

      // Jumlah data per halaman
      $limit = 5;

      $limitStart = ($page - 1) * $limit;
      
      //kondisi jika parameter pencarian kosong
      if($kolomCari=="" && $kolomKataKunci==""){
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa LIMIT ".$limitStart.",".$limit);
      }else{
        //kondisi jika parameter kolom pencarian diisi
        $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%' LIMIT ".$limitStart.",".$limit);
      }
      
      $no = $limitStart + 1;
      
      while($row = mysqli_fetch_array($SqlQuery)){ 
      ?>
        <tr>
          <td><?php echo $no++; ?></td>
          <td><?php echo $row['Nama']; ?></td>
          <td><?php echo $row['Alamat']; ?></td>
          <td><?php echo $row['JenisKelamin']; ?></td>
        </tr>
      <?php           
      }
      ?>
    </tbody>      
  </table>
  <div align="right">
    <ul class="pagination">
      <?php
        // Jika page = 1, maka LinkPrev disable
        if($page == 1){ 
      ?>        
        <!-- link Previous Page disable --> 
        <li class="disabled"><a href="#">Previous</a></li>
      <?php
        }
        else{ 
          $LinkPrev = ($page > 1)? $page - 1 : 1;  

          if($kolomCari=="" && $kolomKataKunci==""){
          ?>
            <li><a href="index.php?page=<?php echo $LinkPrev; ?>">Previous</a></li>
       <?php     
          }else{
        ?> 
          <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $LinkPrev;?>">Previous</a></li>
         <?php
           } 
        }
      ?>

      <?php
        //kondisi jika parameter pencarian kosong
        if($kolomCari=="" && $kolomKataKunci==""){
          $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa");
        }else{
          //kondisi jika parameter kolom pencarian diisi
          $SqlQuery = mysqli_query($con, "SELECT * FROM Siswa WHERE $kolomCari LIKE '%$kolomKataKunci%'");
        }     
      
        //Hitung semua jumlah data yang berada pada tabel Sisawa
        $JumlahData = mysqli_num_rows($SqlQuery);
        
        // Hitung jumlah halaman yang tersedia
        $jumlahPage = ceil($JumlahData / $limit); 
        
        // Jumlah link number 
        $jumlahNumber = 1; 

        // Untuk awal link number
        $startNumber = ($page > $jumlahNumber)? $page - $jumlahNumber : 1; 
        
        // Untuk akhir link number
        $endNumber = ($page < ($jumlahPage - $jumlahNumber))? $page + $jumlahNumber : $jumlahPage; 
        
        for($i = $startNumber; $i <= $endNumber; $i++){
          $linkActive = ($page == $i)? ' class="active"' : '';

          if($kolomCari=="" && $kolomKataKunci==""){
      ?>
          <li<?php echo $linkActive; ?>><a href="index.php?page=<?php echo $i; ?>"><?php echo $i; ?></a></li>

      <?php
        }else{
          ?>
          <li<?php echo $linkActive; ?>><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $i; ?>"><?php echo $i; ?></a></li>
          <?php
        }
      }
      ?>
      
      <!-- link Next Page -->
      <?php       
       if($page == $jumlahPage){ 
      ?>
        <li class="disabled"><a href="#">Next</a></li>
      <?php
      }
      else{
        $linkNext = ($page < $jumlahPage)? $page + 1 : $jumlahPage;
       if($kolomCari=="" && $kolomKataKunci==""){
          ?>
            <li><a href="index.php?page=<?php echo $linkNext; ?>">Next</a></li>
       <?php     
          }else{
        ?> 
           <li><a href="index.php?Kolom=<?php echo $kolomCari;?>&KataKunci=<?php echo $kolomKataKunci;?>&page=<?php echo $linkNext; ?>">Next</a></li>
      <?php
        }
      }
      ?>
    </ul>
  </div>
</div>

</body>
</html>

Sebenarnya kita dapat menggunakan sebuah plugin untuk membuat searching dan pagination otomatis tanpa perlu menulis kode sendiri seperti diatas dengan menggunakan plugin datatables.

 Baca juga 
Membuat Pagination dengan Plugin DataTables 
Membuat Pencarian Date Range di Datatables

 Tutotial untuk membuat kolom pencarian data dan pagination denga PHP Mysql telah selesai. Sekian, semoga bermanfaat.

 Source code:
searchingpagination.zip

Related Posts

Load comments