Tutorial PHP Lanjutan Part 31 : Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX

Tutorial PHP Lanjutan Part 31 : Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih mempelajari Cara Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX.

Pasti dari kamu akan membutuh fitur ini karena dengan adanya fitur pencarian ini dapat membantumu dalam mencari data dalam jumlah yang sangat banyak, sebenarnya ada libary atau plugin datatables yang bisa kamu gunakan sebagai alternativenya namun dengan belajar atau membuatnya secara manual dapat membuat pengalaman belajarmu jadi jauh lebih bertambah.

Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX

Pada tutorial kali ini kita akan belajar membuat fitur pencarian menggunakan Multiple tag bawaan bootstrap karena dengan menggunakan itu kita dapat mencari data sesuai dengan tag yang kita input minimal 1 tag yang harus kamu input lalu kita menggunakan AJAX agar kita tidak perlu mereload halaman ketika mencari datanya.

Mari kita mulai tutorialnya!

Membuat Database Siswa

Karena kita akan mencari data maka kita harus membuat dulu database untuk menyimpan datanya. Ditutorial ini saya menggunakan database MYSQLi terbaru yang sudah MariaDB.

Buat database dengan nama “belajarwithib” atau terserah kamu lalu buat lah table “siswa” dengan jumlah field nya 4 dan tiru atau sesuaikan lah seperti dibawah

Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX

Atau kamu bisa mencopy SQL dibawah ini



CREATE TABLE `siswa` (
  `id_siswa` int(11) NOT NULL,
  `siswa_nama` varchar(70) NOT NULL,
  `siswa_kelas` varchar(70) NOT NULL,
  `siswa_alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Setelah itu kamu dapat mengisi data sebanyak yang kamu inginkan kalau saya sih ada 10 data, jika kamu ingin lebih cepat silahkan copy SQL dibawah ini



INSERT INTO `siswa` (`id_siswa`, `siswa_nama`, `siswa_kelas`, `siswa_alamat`) VALUES (NULL, 'Bambang', 'RPL', 'Medan'), (NULL, 'Samsul', 'TKJ', 'Palembang'), (NULL, 'Siti', 'AK', 'Jakarta'), (NULL, 'Tukinem', 'MP', 'Medan'), (NULL, 'Oreki', 'RPL', 'Jakarta'), (NULL, 'Yoshida', 'TKJ', 'Bali'), (NULL, 'Kurumi', 'AK', 'Palembang'), (NULL, 'Sagiri', 'RPL', 'Bali'), (NULL, 'Tohka', 'MP', 'Medan'), (NULL, 'Sayu', 'RPL', 'Jakarta')

Okey saya rasa kita sudah berhasil membuat databasenya , sekarang kita lanjut.

Membuat Tampilan Awal

Kita harus membuat tampilan utamanya terlebih dahulu, ya desain tampilannya sederhana saja dulu nanti baru kamu modifikasi sesuka hati.

Buatlah file dengan nama index.php, lalu ketikan seperti code dibawah.

Index.php



<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX</title>  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" />
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
  
  <style>
  .bootstrap-tagsinput {
   width: 100%;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX</h2>
   <h3 align="center"><a href="https://www.belajarwithib.my.id/">belajarwithib</a></h3><br />
   <div class="form-group">
    <div class="row">
     <div class="col-md-10">
      <input type="text" id="tags" class="form-control" data-role="tagsinput" />
     </div>
     <div class="col-md-2">
      <button type="button" name="search" class="btn btn-warning" id="search">Search</button>
     </div>
    </div>
   </div>
   <br />
   <div class="table-responsive">
    <div align="right">
     <p><b>Jumlah data = <span id="total_records"></span></b></p>
    </div>
    <table class="table table-bordered">
     <thead>
      <tr>
       <th>Nama Siswa</th>
       <th>Kelas</th>
       <th>Alamat</th>
      </tr>
     </thead>
     <tbody>
     </tbody>
    </table>
   </div>
  </div>
  <div style="clear:both"></div>
  <br />
  <br />
 </body>
</html>


<script>
$(document).ready(function(){
 
 // Menjalankan Function
 load_data();

 // Membuat Function
 function load_data(keyword){
  $.ajax({
   url:"aksi.php",
   method:"POST",
   data:{
   	keyword:keyword
   },
   dataType:"json",
   success:function(data){
    $('#total_records').text(data.length);
    var html = '';
    if(data.length > 0){
     for(var count = 0; count < data.length; count++){
      html += '<tr>';
      html += '<td>'+data[count].siswa_nama+'</td>';
      html += '<td>'+data[count].siswa_kelas+'</td>';
      html += '<td>'+data[count].siswa_alamat+'</td>';
     }
    }else{
     html = '<tr><td colspan="3">Tidak ada data yang ditemukan!</td></tr>';
    }
    $('tbody').html(html);
   }
  })
 }

 // Jika tombol search diclick maka menjalankan 
 $('#search').click(function(){
  var keyword = $('#tags').val();
  load_data(keyword);
 });

});
</script>

Penjelasan Singkat

Code dibawah berfungsi apa bila ada param atau button cari dijalan, maka code dibawah lah yang bertugas mengambil data yang sesuai dengan keyword yang dimasukan oleh user lalu menampilkannya kedalam html namun jika tombol button tidak diclick ia akan dijalankan otomatis.



 // Membuat Function
 function load_data(keyword){
  $.ajax({
   url:"aksi.php",
   method:"POST",
   data:{
   	keyword:keyword
   },
   dataType:"json",
   success:function(data){
    $('#total_records').text(data.length);
    var html = '';
    if(data.length > 0){
     for(var count = 0; count < data.length; count++){
      html += '<tr>';
      html += '<td>'+data[count].siswa_nama+'</td>';
      html += '<td>'+data[count].siswa_kelas+'</td>';
      html += '<td>'+data[count].siswa_alamat+'</td>';
     }
    }else{
     html = '<tr><td colspan="3">Tidak ada data yang ditemukan!</td></tr>';
    }
    $('tbody').html(html);
   }
  })
 }

Pada documentasi bootstrap kita tidak menemukan untuk membuat tag input jadi kita menggunakan hasil buatan orang saja untuk lebih jelasnya cek disini dan code dibawah untuk memanggil pluginnya.



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>

Mengelolah Data Yang Dikirim Oleh Ajax

Ajax akan mengirim datanya dan file aksi.php yang bertugas memberikan datanya kepada AJAX.

Sekarang buatlah file aksi.php, lalu ketikan code seperti dibawah

aksi.php


<?php
// Koneksi ke database
$connect = mysqli_connect("localhost","root","","belajarwithib");
$output = '';
$query = '';

// Jika variabel keyword memiliki isi
if(isset($_POST["keyword"])){

  // Jika keyword tidak kosong
  $search = str_replace(",", "|", $_POST["keyword"]);
  $query = "
      SELECT * FROM siswa 
      WHERE siswa_nama REGEXP '".$search."' 
      OR siswa_kelas REGEXP '".$search."' 
      OR siswa_alamat REGEXP '".$search."'
  ";

}else{

  // Jika Keyword kosong
  $query = "SELECT * FROM siswa ORDER BY id_siswa";

}

// Mengambil datanya
$get_data = mysqli_query($connect,$query);
// Mengubah datanya kedalam bentuk array
while($row = mysqli_fetch_array($get_data)){
 $data[] = $row;
}

// Mengubah array ke JSON
echo json_encode($data);

?>

Penjelasan Singkat

Disini kita memiliki 2 kondisi, yang pertama jika halaman diload harus menampilkan data apa dan yang kedua jika ada nilai dari variable keyword harus menampilkan data apa.

Kita menggunakan REGEXP untuk mencari data yang sesuai, fungsinya hampir sama dengan LIKE tapi memiliki perbedaan juga.

RegExp dalam MySQL akan bersifat case insensitif untuk tipe data CHAR, VARCHAR atau TEXT, dan bersifat case sensitif untuk tipe data tabel BINARY, VARBINARY, atau BLOB.

Untuk pemakaian database sederhana, memakai query LIKE untuk metode pencarian sudah mencukupi. Namun MySQL juga menyediakan Regular Expression (REGEXP) untuk pencarian tingkat lanjut.



// Jika variabel keyword memiliki isi
if(isset($_POST["keyword"])){

  // Jika keyword tidak kosong
  $search = str_replace(",", "|", $_POST["keyword"]);
  $query = "
      SELECT * FROM siswa 
      WHERE siswa_nama REGEXP '".$search."' 
      OR siswa_kelas REGEXP '".$search."' 
      OR siswa_alamat REGEXP '".$search."'
  ";

}else{

  // Jika Keyword kosong
  $query = "SELECT * FROM siswa ORDER BY id_siswa";

}

Lalu ketika sudah tahu harus berbuat apa, apapun datanya harus kita ubah dulu ke bentuk array setelah kita ubah lagi dari bentuk array ke bentuk JSON. Nanti kita akan menampilkan datanya mengunakan javascript.



// Mengambil datanya
$get_data = mysqli_query($connect,$query);
// Mengubah datanya kedalam bentuk array
while($row = mysqli_fetch_array($get_data)){
 $data[] = $row;
}

// Mengubah array ke JSON
echo json_encode($data);

Hasil dari tutorial kali ini akan seperti dibawah :

File Untuk Kebutuhan Belajar

Source Code Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX

Okey…Fitur ini dapat kamu kembangkan jadi jauh lebih bagus lagi.

Semoga Bermanfaat!

BelajarwithIB

Banner

Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX

Tutorial PHP Lanjutan Part 31 : Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX

Membuat Fitur Search Data Menggunakan Multiple Tag Di PHP Dan AJAX

Membuat Database Siswa

Membuat Tampilan Awal

Penjelasan Singkat

Mengelolah Data Yang Dikirim Oleh Ajax

Penjelasan Singkat

File Untuk Kebutuhan Belajar

Posting Komentar

Aplikasi inventaris barang berbasis web - Free source code

Membuat Auto Search Suggestion/Autocomplete Dengan PHP

Source Code Aplikasi Rental Mobil Berbasis Web Menggunakan Codeigniter Dan MYSQLi

Perbedaan Var, Const Dan Let Pada Javascript

Aplikasi E-Voting Pemilihan Digital Berbasis WEB Menggunakan PHP dan MySQL