Pada kesempatan kali ini saya akan membahas bagaimana caranya membuat live search dengan PHP dan Ajax jQuery. Biasanya saya akan menggunakan PHP PDO setiap kali berhubungan ke basis data, tetapi pada tutorial kali ini saya menggunakan mysqli procedural.
Daftar isi:
- Struktur berkas
- Membuat basis data dan tabel
- Koneksi ke basis data
- Skrip berkas index.php
- Skrip berkas search.php
Baca juga:
Struktur berkas
Buatlah direktori baru bernama tutorial-ajax di dalam direktori htdocs
jika Anda menggunakan Xampp. Kemudian buat berkas baru dibawah ini kecuali bootsrap.min.css
dan jQuery-3.3.1.min.js
:
Catatan: Sebenarnya Anda tidak perlu mengunduh berkas
bootsrap.min.css
danjQuery-3.3.1.min.js
, karena tutorial ini menggunakan cdn dan perlu jaringan internet. Baca juga: Membuat dan Menjalankan File PHP
Membuat basis data dan tabel
Saatnya Anda beralhi ke PHPMyAdmin untuk membuat basis data, tabel, dan data, ikuti langkah berikut:
Membuat basis data live_search_ajax
Jalankan skrip SQL berikut ini pada menu SQL di PHPMyAdmin Anda, kemudian jalankan.
CREATE DATABASE live_search_ajax;
Menambahkan tabel users
Silakan masuk ke basis data yang telah di buat kemudian jalankan SQL berikut ini:
CREATE TABLE users (
id int AUTO_INCREMENT PRIMARY KEY,
name varchar(50),
username varchar(50),
password varchar(50)
);
Catatan: Saya menggunakan
id
sebagai primary key (digunakan untuk mengindentifikasi suatu baris pada tabel) dan auto increment(akan membuat nilai angkah secara otomatis).
Menambahkan data users
Silakan untuk menambahkan data users agar Anda tidak perlu lagi menambahkan data secara manual.
INSERT INTO users(name, username, password) VALUES
('Febri Hidayan', 'febrihidayan', 'password'),
('Ramadhan Sumbawa', 'ramadhan23', 'password'),
('Sulaiman Apriadi', 'apriadisulai', 'password');
Koneksi ke basis data
Membuat koneksi ke basis data dengan mysqli prosedural, Anda dapat menggunakan mysqli OOP dan PHP PDO. Silakan masukan skrip dibawah ini pada berkas connect.php
:
<?php
$conn = mysqli_connect('localhost', 'root', '', 'live_search_ajax');
Baca juga:
Skrip berkas index.php
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Membuat Live Search PHP Ajax - Sekolah Program</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<input type="text" id="search" class="form-control mt-3 mb-5" placeholder="serach name...">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>username</th>
<th>password</th>
</tr>
</thead>
<tbody id="tampil">
<?php
require_once 'connect.php';
$no = 1;
$query = mysqli_query($conn, "SELECT * FROM users");
while ($row = mysqli_fetch_object($query)) {
?>
<tr>
<td><?= $no++; ?></td>
<td><?= $row->name; ?></td>
<td><?= $row->username; ?></td>
<td><?= $row->password; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<a href="https://sekolahprogram.com" class="btn btn-success mt-3 btn-block" target="_blank" rel="noopener noreferrer">By Sekolah Program</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#search').on('keyup', function() {
$.ajax({
type: 'POST',
url: 'search.php',
data: {
search: $(this).val()
},
cache: false,
success: function(data) {
$('#tampil').html(data);
}
});
});
});
</script>
</body>
</html>
Penjelasan singkat:
- Atribut
id="search"
- terdapat pada kolom pencarian dan digunanya untuk menandai ke jQuery berdasarkan$('#search')
. - Atribut
id="tampil"
- akan menganti elemen yang ada didalamnya setelah proses pencarian berjalan. - $('#search').on('keyup') - akan berjalan setelah Anda mengetikan sesuatu pada kolom pencarian lalu melepaskannya.
-
$.ajax
- akan mengirim permintaan ke berkassearch.php
untuk mengambil data berdasarkan permintaan pencarian dan memberikan respon balik berupa data. -
$('#tampil').html(data)
- akan mengubah elemen pada atributid="tampil"
dengan elemen HTML yang ada pada berkassearch.php
.
Skrip berkas search.php
Silakan tambahkan skrip dibawah ini pada berkas search.php
dan Anda bisa mencobanya sekarang. Apakah Anda berhasil membuat live search atau tidak.
<?php
if (isset($_POST['search'])) {
require_once 'connect.php';
$no = 1;
$search = $_POST['search'];
$query = mysqli_query($conn, "SELECT * FROM users WHERE name LIKE '%" . $search . "%'");
while ($row = mysqli_fetch_object($query)) {
?>
<tr>
<td><?= $no++; ?></td>
<td><?= $row->name; ?></td>
<td><?= $row->username; ?></td>
<td><?= $row->password; ?></td>
</tr>
<?php }
} ?>
Jika sudah selesai Anda boleh mengunduh semua berkas yang ada Membuat Live Search PHP Ajax.