Tentu, ini artikelnya:
Pernahkah Anda menggunakan fitur pencarian di situs web seperti Google, Facebook, atau toko online? Saat Anda mengetikkan sesuatu, hasil pencarian muncul secara instan di bawah kolom input tanpa perlu memuat ulang seluruh halaman. Ini adalah contoh klasik penggunaan Ajax (Asynchronous JavaScript and XML) yang dipadukan dengan server-side scripting seperti PHP.
Artikel ini akan memandu Anda langkah demi langkah dalam membuat sistem pencarian data real-time menggunakan PHP untuk pemrosesan di server dan Ajax/jQuery untuk antarmuka pengguna yang interaktif.
Konsep Dasar
- HTML (Frontend): Kita akan memiliki sebuah kolom input teks tempat pengguna mengetikkan kata kunci pencarian, dan sebuah area kosong untuk menampilkan hasil.
- jQuery/Ajax (Frontend Logic): Saat pengguna mengetik, jQuery akan “mendengarkan” perubahan di kolom input. Setiap kali ada perubahan (atau setelah jeda singkat), ia akan mengirimkan permintaan Ajax ke server (PHP) yang berisi kata kunci pencarian.
- PHP (Backend Logic): File PHP di server akan menerima kata kunci pencarian, melakukan query ke database (atau sumber data lainnya), dan mengembalikan hasil pencarian dalam format yang mudah diproses (misalnya JSON atau HTML).
- jQuery (Frontend Display): Setelah menerima respons dari PHP, jQuery akan mengambil data tersebut dan menyisipkannya ke dalam area hasil pencarian di halaman web tanpa me-reload.
Persiapan Awal
Sebelum memulai, pastikan Anda memiliki lingkungan pengembangan PHP (misalnya XAMPP atau WAMP) dan sebuah database (misalnya MySQL). Untuk artikel ini, kita akan menggunakan database MySQL.
- File
koneksi.php: Membuat file koneksi ke database.PHP<?php $host = "localhost"; // Sesuaikan jika berbeda $user = "root"; // Username database Anda $pass = ""; // Password database Anda $db = "nama_database_anda"; // Nama database Anda $koneksi = new mysqli($host, $user, $pass, $db); if ($koneksi->connect_error) { die("Koneksi database gagal: " . $koneksi->connect_error); } ?>Penting: Ganti
nama_database_andadengan nama database yang sebenarnya. - Struktur Tabel Database (Contoh:
produk): Buat tabel di database Anda.SQLCREATE TABLE produk ( id INT AUTO_INCREMENT PRIMARY KEY, nama_produk VARCHAR(255) NOT NULL, deskripsi TEXT, harga DECIMAL(10, 2) ); INSERT INTO produk (nama_produk, deskripsi, harga) VALUES ('Laptop Gaming ROG', 'Laptop canggih untuk gamer berat.', 20000000.00), ('Mouse Wireless Logitech', 'Mouse nyaman untuk bekerja dan bermain.', 250000.00), ('Keyboard Mekanikal Razer', 'Keyboard RGB dengan switch responsif.', 1200000.00), ('Monitor Samsung Curve', 'Layar lengkung 27 inci untuk pengalaman imersif.', 3500000.00), ('Webcam Full HD', 'Webcam berkualitas tinggi untuk video conference.', 400000.00); - Integrasi jQuery: Pastikan Anda menyertakan jQuery di HTML Anda.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1. Struktur HTML (index.php)
Buat file index.php yang akan menjadi halaman utama Anda.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pencarian Real-time PHP & Ajax</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#search-input { width: 300px; padding: 10px; font-size: 16px; }
#search-results { margin-top: 20px; border: 1px solid #ddd; padding: 10px; min-height: 100px; }
.result-item { padding: 10px 0; border-bottom: 1px solid #eee; }
.result-item:last-child { border-bottom: none; }
.result-item h3 { margin: 0 0 5px 0; color: #337ab7; }
.result-item p { margin: 0; font-size: 14px; color: #555; }
.result-item span { font-weight: bold; color: #e44d26; }
</style>
</head>
<body>
<h1>Pencarian Produk</h1>
<input type="text" id="search-input" placeholder="Cari produk...">
<div id="search-results">
<p>Mulai ketik untuk mencari produk...</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// Kode jQuery akan ditambahkan di sini
</script>
</body>
</html>
2. Skrip PHP untuk Pencarian (search.php)
Buat file search.php. File ini akan menerima kata kunci dari Ajax, mencari data di database, dan mengembalikan hasilnya.
PHP
<?php
include 'koneksi.php'; // Sertakan file koneksi database
header('Content-Type: application/json'); // Mengirimkan header JSON
$searchTerm = '';
if (isset($_GET['term'])) {
$searchTerm = $koneksi->real_escape_string($_GET['term']);
}
$results = [];
if (!empty($searchTerm)) {
// Query SQL untuk mencari produk
$sql = "SELECT nama_produk, deskripsi, harga FROM produk
WHERE nama_produk LIKE '%$searchTerm%'
OR deskripsi LIKE '%$searchTerm%'";
$result = $koneksi->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$results[] = $row;
}
}
}
echo json_encode($results); // Mengembalikan hasil dalam format JSON
$koneksi->close();
?>
Penjelasan search.php:
include 'koneksi.php';: Memanggil file koneksi database.header('Content-Type: application/json');: Memberi tahu browser bahwa respons dari file ini adalah data JSON. Sangat penting!$searchTerm = $koneksi->real_escape_string($_GET['term']);: Mengambil kata kunci pencarian dari parameter GET (term) dan membersihkannya untuk mencegah serangan SQL Injection.SELECT ... WHERE nama_produk LIKE '%$searchTerm%' OR deskripsi LIKE '%$searchTerm%': Query SQL ini akan mencari produk yang nama atau deskripsinya mengandung kata kunci pencarian.$results[] = $row;: Setiap baris hasil dari query ditambahkan ke array$results.echo json_encode($results);: Mengubah array$resultsmenjadi format JSON dan mengirimkannya sebagai respons ke permintaan Ajax.
3. Logika Ajax/jQuery (di dalam <script> di index.php)
Tambahkan kode jQuery ini ke dalam tag <script> di index.php.
JavaScript
$(document).ready(function() {
let typingTimer; // Timer untuk menunda pencarian
const doneTypingInterval = 500; // Jeda waktu (milidetik) setelah berhenti mengetik
const searchInput = $('#search-input');
const searchResults = $('#search-results');
// Ketika input pencarian berubah (pengguna mengetik)
searchInput.on('keyup', function() {
clearTimeout(typingTimer); // Bersihkan timer sebelumnya
// Atur timer baru
typingTimer = setTimeout(performSearch, doneTypingInterval);
});
// Ketika pengguna menekan tombol pada input
searchInput.on('keydown', function () {
clearTimeout(typingTimer); // Reset timer jika pengguna masih mengetik
});
function performSearch() {
const searchTerm = searchInput.val(); // Ambil nilai dari input
// Jika kolom pencarian kosong, kosongkan hasil dan tampilkan pesan awal
if (searchTerm.trim() === '') {
searchResults.html('<p>Mulai ketik untuk mencari produk...</p>');
return;
}
// Tampilkan indikator loading (opsional)
searchResults.html('<p>Mencari...</p>');
// Lakukan permintaan Ajax
$.ajax({
url: 'search.php', // Target file PHP
type: 'GET', // Metode GET
data: { term: searchTerm }, // Data yang dikirim: { 'term': 'nilai_input' }
dataType: 'json', // Harapkan respons dalam format JSON
success: function(data) {
let html = '';
if (data.length > 0) {
// Loop melalui setiap hasil yang diterima
$.each(data, function(index, item) {
html += `
<div class="result-item">
<h3>${item.nama_produk}</h3>
<p>${item.deskripsi}</p>
<span>Harga: Rp${parseFloat(item.harga).toLocaleString('id-ID')}</span>
</div>
`;
});
} else {
html = '<p>Tidak ada produk ditemukan.</p>';
}
searchResults.html(html); // Tampilkan hasil di div
},
error: function(jqXHR,
