Tutorial Dasar Ajax Cari Data dengan jQuery

Tutorial Dasar Ajax Cari Data dengan jQueryAJAX merupakan singkatan dari “Asynchronous Javascript and XML”. Secara umum, AJAX memungkinkan kita untuk berkomunikasi dengan kode program pada server melalui Javascript. Melalui AJAX, kita dapat memanggil kode pada server melalui URL tertentu, dan menerima data / pesan hasil eksekusi oleh server.  Server dapat mengembalikan data apapun, selama kode di sisi client mengetahui format yang diberikan.

Dalam membuat website dinamis, tentu kita tidak asing dengan yang namanya PHP dan MySQL. Dengan PHP dan MySQL kita dapat menampilkan data-data dari database kedalam format HTML yang dapat dibaca oleh pengguna di browser.

Namun, biasanya ketika client meminta data dari server, maka browser akan mereload halaman tersebut hingga dapat menimbulkan beberapa masalah seperti halaman tidak muncul karena loading internet yang lambat, server yang cepat down, dan tidak efisiennya penggunaan data internet.

Khususnya pada bagian pencarian data. Pada fitur pencarian data, tentunya akan sangat repot jika kita harus terus mereload halaman yang sama hanya untuk menampilkan data dari database. Nah, jalan yang dapat kita gunakan untuk mengatasi hal ini yaitu menggunakan Ajax.

Setiap user mengetikan huruf di kolom pencarian, maka browser akan mengirim permintaan ke server untuk memperoses data ke database dan mengembalikannya ke browser client.

Berikut step-step membuat Ajax dengan jQuery, PHP dan MySQL.

1. Langkah Persiapan

Pada contoh kali ini, saya akan membuat fitur pencarian buku dengan ajax.

  1. Database dengan tabel buku dan field seperti gambar dibawah ini.rancangan database buku ajax
  2. Server localhost yang aktif dengan folder project bernama ‘duniakomputer’.
  3. file jQuery ( untuk cara menghubungkan jQuery ke HTML, ikuti link ini ).
  4. File bootstrap untuk tampilan (optional).

2. Langkah Pembuatan File

Pada langkah ini kita akan membuat contoh file. Kamu bebas menyesuaikan langkah-langkah berikut sesuai dengan project yang sedang kamu buat.

  1. Di folder project htdocs kamu, buat file index.php ( atau dimana kamu ingin kotak pencarian muncul ).
  2. File koneksi.php untuk koneksi ke database. contoh isi dari file koneksi.php adalah :

    <?php

    $koneksi=mysqli_connect(‘localhost’,’root’,”,’perpustakaan_sif’);
    if(!$koneksi){
    echo “Gagal koneksi”;
    }
    ?>

  3. buat file “getData.php” (satu folder dengan index.php).
  4. Linkkan bootstrap dan jQuery kamu ke dalam file index.php

3. Langkah Pembuatan Sintaks jQuery

Jika file index.php kamu masih kosong, masukkan sintaks berikut ini :

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Ajax Dunia-komputer.com</title>
<script src=”jquery.js” charset=”utf-8″></script>
<link rel=”stylesheet” href=”bootstrap.min.css”>
<script src=”bootstrap.min.js” charset=”utf-8″></script>
</head>
<body>
<center>
<div class=”row” style=”margin-top:100px” >
</div>
<h2>Ajax Data Buku dunia-komputer.com</h2>
<div class=”col-md-4 col-md-offset-4″>
<br><br>
<input type=”search” name=”keyword” value=”” class=”form-control” id=”keyword” autocomplete=”off” oninput=”ambildata()” placeholder=”Cari Buku”><br>
</div>
<br>
<div class=”row”>
<div class=”col-md-8 col-md-offset-2″>
<table class=”table table-responsive table-striped table-hover tabel_pad” id=”tabel_cari” style=”display:none”>
<thead>
<th>No</th>
<th>ID Buku</th>
<th>Judul Buku</th>
<th>Pengarang</th>
<th>Tahun</th>
<th>Lokasi</th>
</thead>
<tbody id=’hasil’>
</tbody>
</table>

<script type=”text/javascript”>
function ambildata() {
var keyword=$(‘#keyword’).val();
if (keyword==””) {
$(‘#tabel_cari’).hide();
}else{
$.ajax({
url:’getData.php’,
type:’get’,
dataType:’html’,
data:’keyword=’+keyword,
success:function (respons) {
$(‘#hasil’).html(respons);
},

})
$(‘#tabel_cari’).show()
}
}

</script>
</div>
</div>
</center>
</body>
</html>

Berikut penjelasan kode diatas berdasarkan warna teks :

  • Kotak pencarian
  • Tabel untuk menampilkan hasil ajax.
  • Hasil dari ajax.
  • Cek jika kotak pencarian kosong, maka tabel disembunyikan.
  • Sintaks ajax yang hasilnya akan ditampilkan pada “#hasil” .

4. Langkah Proses Data ajax

Pada file getData.php, masukan sintaks berikut ini :

<?php
include ‘koneksi.php’;

if (isset($_GET[‘keyword’])) {
if ($_GET[‘keyword’]==”) {
echo “<script>$(‘#tabel_cari’).hide();</script>”;
}
$keyword=$_GET[‘keyword’];

$query=”SELECT left(id_buku,5) AS id_buku_awal,id_buku,judul_buku,
tahun,pengarang,lokasi,COUNT(id_buku) as total FROM buku
WHERE judul_buku LIKE ‘%$keyword%’ or keyword like ‘%$keyword%’
GROUP BY judul_buku “;

$eksekusi=mysqli_query($koneksi,$query);
if (mysqli_num_rows($eksekusi)==0) {
echo ‘<tr><td colspan=”7″><center><div class=”alert alert-danger” role=”alert”>Buku dengan keyword “‘.$keyword.'” tidak ditemukan</div></center></td></tr>’;
}
$no=1;
while($data=mysqli_fetch_assoc($eksekusi)) {
echo “<tr>
<td>”.$no.”</td><td>”.$data[‘id_buku_awal’].”</td>
<td>”.$data[‘judul_buku’].”</td>
<td>”.$data[‘pengarang’].”</td>
<td>”.$data[‘tahun’].”</td>
<td>”.$data[‘lokasi’].”</td>
<tr>”;
$no++;
}
}
?>

Berikut penjelasan kode diatas berdasarkan warna teks :

  • Sintaks query untuk mencari data dari database.
  • Menampilkan hasil dari query

Setelah kita menampilkan hasil dari query, maka hasil tersebut akan ditampilkan pada bagian index.html.

Berikut hasil dari kode-kode diatas :

hasil ajax

 

 

hasil jquey ajax

Demikian Tutorial Dasar Ajax Cari Data dengan jQuery, PHP dan MySQL. Semoga bermanfaat.

Terimakasih.

Tinggalkan Komentar

Your email address will not be published.