Membuat Pencarian Data dengan jQuery Ajax dan PHP

Karena sudah sangat lama sekali saya tidak memposting tentang PHP, pada malam hari ini saya memutuskan untuk memposting tentang PHP, pada postingan malam hari ini saya akan share tentang cara membuat Pencarian Data dengan jQuery Ajax dan PHP. dengan cara ini Ajax akan melakukan request data ke php lalu data tersebut akan di tampilkan ke website tanpa perlu reload halaman web.

Langkah - langkah Membuat Pencarian Data dengan jQuery Ajax dan PHP

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

<!-- include file koneksi.php -->
<?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/