Malay

Tutorial PHP

Pengurus PHP

Perintah Kawalan PHP

Array PHP

Fungsi PHP

Superglobals PHP

Penguruskan Fail PHP

PHP Berorientasi Objek

Pembangunan Web PHP

PHP AJAX

PHP XML

Contoh Daftar Masuk PHP

PHP Lanjut

PHP - AJAX Search: A Panduan untuk Pemula

Hai sana, para ahli PHP masa depan! Saya sangat gembira untuk menjadi panduan Anda dalam perjalanan menarik ke dunia fungsionalitas pencarian berbasis AJAX menggunakan PHP. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun, saya tidak sabar untuk berbagi pengetahuan ini dengan Anda. Jadi, mari kita mulai dan masuk ke dalam!

PHP - AJAX Search

Apa Itu AJAX Search?

Sebelum kita mulai mengoding, mari kita pahami apa itu AJAX search. Bayangkan Anda berada di perpustakaan besar, mencari buku. Alih-alih berlari ke setiap rak, bagaimana kalau Anda dapat mengetikkan nama buku dan segera melihat hasil muncul? Itu tepatnya apa yang AJAX search lakukan untuk situs web!

AJAX singkatan dari Asynchronous JavaScript dan XML. Jangan khawatir jika itu terdengar sulit - pada akhir panduan ini, Anda akan menggunakan itu seperti seorang ahli!

Langkah 1: Menyiapkan Proyek Kita

Mari kita mulai dengan membuat file-file yang kita butuhkan untuk proyek ini. Kita akan memerlukan tiga file:

  1. index.html (halaman utama kita dengan kotak pencarian)
  2. search.php (skrip PHP kita yang akan menghandle pencarian)
  3. script.js (file JavaScript kita untuk membuat permintaan AJAX)

Membuat index.html

Pertama-tama, mari kita buat file HTML kita dengan kotak pencarian sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh AJAX Search</title>
</head>
<body>
<h1>AJAX Search</h1>
<input type="text" id="searchBox" placeholder="Cari...">
<div id="results"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Dalam file ini, kita membuat kotak pencarian sederhana dan div untuk menampilkan hasil kita. Kita juga menyertakan jQuery untuk membuat panggilan AJAX mudah, dan menghubungkan file script.js kita.

Langkah 2: Membuat Skrip Pencarian PHP

Sekarang, mari kita buat file search.php kita. Ini akan menjadi bagian belakang fungsionalitas pencarian kita:

<?php
// Simulasi database dengan array
$fruits = array("Apel", "Pisang", "Ceri", "Duku", "Elderberry", "Buah Naga", "Anggur");

// Ambil kata kunci pencarian dari permintaan AJAX
$searchTerm = $_GET['term'];

// Filter array buah berdasarkan kata kunci pencarian
$results = array_filter($fruits, function($fruit) use ($searchTerm) {
return stripos($fruit, $searchTerm) !== false;
});

// Kembalikan hasil sebagai JSON
echo json_encode(array_values($results));

mari kitauraikan ini:

  1. Kita buat array buah sederhana untuk mensimulasikan database.
  2. Kitaambil kata kunci pencarian dari permintaan GET (dikirimkan oleh panggilan AJAX).
  3. Kita gunakan array_filter untuk mencari buah yang cocok dengan kata kunci pencarian kita.
  4. Akhirnya, kita kembalikan hasilnya sebagai JSON, yang mudah digunakan oleh JavaScript.

Langkah 3: Membuat File JavaScript

Sekarang untuk bagian menarik - mari kita buat file script.js kita untuk membuat magik AJAX!

$(document).ready(function() {
$('#searchBox').on('keyup', function() {
var searchTerm = $(this).val();
if(searchTerm.length > 1) {
$.ajax({
url: 'search.php',
type: 'GET',
data: {term: searchTerm},
dataType: 'json',
success: function(data) {
var results = '';
$.each(data, function(index, value) {
results += '<p>' + value + '</p>';
});
$('#results').html(results);
}
});
} else {
$('#results').html('');
}
});
});

mari kitauraikan ini langkah demi langkah:

  1. Kita menunggu dokumen siap.
  2. Kita mendengarkan 'keyup' event di kotak pencarian kita.
  3. Jika kata kunci pencarian lebih panjang dari 1 karakter, kita membuat permintaan AJAX.
  4. Kita mengirim kata kunci pencarian ke skrip PHP kita.
  5. Ketika kita mendapat hasil kembali, kita formatnya sebagai HTML dan menampilkannya di halaman.

Dan itu saja! Anda memiliki sistem pencarian AJAX yang sepenuhnya berfungsi hanya dalam tiga file.

Menggabungkan Semua

Sekarang kita memiliki semua komponen, mari kita lihat bagaimana mereka bekerja bersama:

  1. Ketika Anda mengetik di kotak pencarian, JavaScript mendeteksi 'keyup' event.
  2. Jika Anda telah mengetik lebih dari satu karakter, ia mengirim permintaan AJAX ke search.php.
  3. search.php mengambil kata kunci pencarian Anda, mencari buah yang cocok, dan mengembalikan mereka sebagai JSON.
  4. JavaScript menerima JSON ini, formatnya sebagai HTML, dan menampilkannya di halaman.

Semua ini terjadi secara instan, tanpa perlu memuat ulang halaman. Sangat menarik, kan?

Kesimpulan

Selamat! Anda baru saja membangun sistem pencarian AJAX pertama Anda. Ini hanya awal - Anda dapat mengembangkan ini untuk mencari database nyata, menambah filtering yang lebih kompleks, atau bahkan mengimplementasikan fungsionalitas autocomplete.

Ingat, kunci untuk menjadi ahli pemrograman adalah latihan. Cobalah untuk memodifikasi kode ini, tambahkan fitur Anda sendiri, dan terutama, bersenang-senang dengan itu!

Berikut adalah tabel yang menguraikan metode yang kita gunakan dalam panduan ini:

Metode Deskripsi
$.ajax() Metode jQuery untuk melakukan permintaan AJAX
array_filter() Fungsi PHP untuk menyaring elemen array menggunakan fungsi callback
json_encode() Fungsi PHP untuk mengkonversi array PHP menjadi string JSON
$.each() Metode jQuery untuk mengiterasi array atau objek

Terus mengoding, terus belajar, dan sebelum Anda tahu, Anda akan menciptakan aplikasi web yang menakjubkan. Sampai jumpa lagi, coding saja!

Credits: Image by storyset

Tutorial Sebelumnya:
PHP - Panduan AJAX
Tutorial Seterusnya:
PHP - Penyongsang XML AJAX