ID (Indonesia) Translation

Selamat datang, para ahli PHP masa depan! Saya sangat gembira menjadi panduan Anda dalam perjalanan menarik ke dunia fungsi pencarian berbasis AJAX menggunakan PHP. Sebagai seseorang yang telah mengajar pemrograman selama bertahun-tahun, saya sabar untuk membagikan pengetahuan ini kepada Anda. Jadi, mari kita roll up our sleeves dan langsung masuk ke dalam!

PHP - AJAX Search

Apa Itu Pencarian AJAX?

Sebelum kita mulai mengoding, mari kita pahami apa itu pencarian AJAX. Bayangkan Anda berada di perpustakaan besar, mencari buku. Daripada berlari ke setiap rak, bagaimana kalau Anda bisa mengetikkan nama buku dan secara instan melihat hasil muncul? Itu tepat apa yang pencarian AJAX lakukan untuk situs web!

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

Langkah 1: Menyiapkan Proyek Kita

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

index.html (halaman utama kita dengan kotak pencarian)
search.php (skrip PHP kita yang akan menghandle pencarian)
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="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Pencarian AJAX</title>
</head>
<body>
    <h1>Pencarian AJAX</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 telah membuat kotak pencarian sederhana dan div untuk menampilkan hasil kita. Kita juga menyertakan jQuery untuk membuat permintaan AJAX lebih mudah, dan menghubungkan file script.js kita.

Langkah 2: Membuat Skrip Pencarian PHP

Sekarang, mari kita buat file search.php. Ini akan menjadi bagian backend dari fungsi pencarian kita:

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

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

// Filter array buah berdasarkan kata kunci
$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:

Kita membuat array buah sederhana untuk mensimulasikan database.
Kita ambil kata kunci dari permintaan GET (dikirim oleh permintaan AJAX kita).
Kita gunakan array_filter untuk mencari buah yang cocok dengan kata kunci kita.
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 untuk membuat magik AJAX terjadi!

$(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:

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

Dan begitu Anda mendapatnya! Sebuah sistem pencarian AJAX yang sepenuhnya berfungsi hanya dalam tiga file.

Menggabungkan Semua

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

Ketika Anda mengetik di kotak pencarian, JavaScript mendeteksi 'keyup' event.
Jika Anda telah mengetik lebih dari satu karakter, ia mengirim permintaan AJAX ke search.php.
search.php mengambil kata kunci Anda, mencari buah yang cocok, dan mengembalikannya sebagai JSON.
JavaScript menerima JSON ini, memformatnya sebagai HTML, dan menampilkan nya di halaman.

Semua ini terjadi secara instan, tanpa perlu reload halaman. Sangat keren, kan?

Kesimpulan

Selamat! Anda baru saja membuat sistem pencarian AJAX pertama Anda. Ini hanya permulaan - Anda dapat mengembangkan ini untuk mencari database nyata, menambah penfilteran yang lebih kompleks, atau bahkan mengimplementasikan fungsi 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 tutorial 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 kode, terus belajar, dan sebelum Anda tahu, Anda akan menciptakan aplikasi web yang menakjubkan. Sampaijumpa lagi, selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

PHP - Pengenalan AJAX

Tutorial Selanjutnya:

PHP - Analis XML AJAX