Membuat Pencarian Data dengan jQuery Ajax dan PHP

ZIE php

kali ini saya akan membagikan cara Membuat Pencarian Data dengan jQuery Ajax dan PHP. dengan cara ini Ajax akan melakukan request data ke php lalu data tersebut akan ditampilkan ke website tanpa perlu reload halaman web.

1. Buat sebuah database dengan nama latihan lalu buat table dengan nama mhs.

 create table mhs
npm varchar(15) primary key,  
   nama varchar(30),  
   jurusan varchar(30),  
   alamat varchar(50)

2. Buat sebuah file dengan nama index.php dan masukan script dibawah ini.

 <?php include "koneksi.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" />  
 <title>[Tutorial_Koding]_pencarian_data_Jquery-Ajax-PHP</title>  
 <!-- menginclude file jquery.min.js -->  
 <script src="jquery.min.js"></script>  
 </head>  
 <body>  
 <script type="text/javascript">  
 $(document).ready(function() {  
  <!-- event textbox keyup  
  $("#txtcari").keyup(function() {  
   var strcari = $("#txtcari").val(); <!-- mendapatkan nilai dari textbox -->  
   if (strcari != "") <!-- jika value strcari tidak kosong-->  
   {  
   $("#hasil").html("<img src='loading.gif'/>") <!-- menampilkan animasi loading -->  
   <!-- request data ke cari.php lalu menampilkan ke <div id="hasil"></div> -->  
   $.ajax({  
    type:"post",  
    url:"cari.php",  
    data:"q="+ strcari,  
    success: function(data){  
    $("#hasil").html(data);  
    }  
   });  
   }  
  });  
   });  
 </script>  
 <div>Cari Data : <input type="text" name="textcari" id="txtcari" /></div>  
 <div id="hasil"></div>  
 </body>  
 </html>

3. Buat sebuah file dengan nama koneksi.php dan masukan script dibawah ini.

 <?php  
 $koneksi=mysql_connect("localhost","root","root"); // koneksi ke server  
 $db=mysql_select_db("latihan"); // memilih database yang akan digunakan  
 ?>

4. Buat sebuah file dengan nama cari.php dan masukan script dibawah ini.

 <?php  
 include "koneksi.php";  
 $q=$_POST['q'];  
 // query untuk melakukan pencarian  
 $query=mysql_query("select * from mhs where nama like '%".$q."%'");  
 // mendapatkan jumlah baris  
 $row=mysql_num_rows($query);  
 if ($row > 0) // jika baris lebih dari 0 / data ditemukan  
 {  
  while ($data=mysql_fetch_array($query)) // perulangna untuk menampilkan data  
  {  
  // menampilkan data dalam bentuk table  
  echo "<table width='500'>  
   <tr>  
    <td>NPM</td>  
     <td>Nama</td>  
     <td>Jurusan</td>  
     <td>Alamat</td>  
   </tr>  
   <tr>  
    <td>".$data['npm']."</td>  
     <td>".$data['nama']."</td>  
     <td>".$data['jurusan']."</td>  
     <td>".$data['alamat']."</td>  
   </tr>  
   </table>";  
  }  
 }  
 else // jika data tidak ditemukan  
 {  
  echo "<strong>Data tidak ditemukan</strong>";  
 }  
 ?>

5. Buka browser lalu masukan url http://localhost/nama_folder_tempat_menyimpan_file_php/

Sekian dari saya.
Terima Kasih atas kunjungannya semoga bermanfaat