PHP MySQL : Ajax Search

Kalian dapat membuat fungsionalitas pencarian basis data live sederhana menggunakan Ajax dan PHP, di mana hasil pencarian akan ditampilkan saat kalian mulai mengetik beberapa karakter di kotak input pencarian (contohnya seperti saat menginput kata pencarian di google).

Dalam tutorial ini kita akan membuat kotak pencarian live yang akan mencari tabel countries dan menunjukkan hasilnya secara tidak sinkron. Tapi, pertama-tama kita perlu membuat tabel ini terlebih dahulu.

Langkah 1 : Membuat Tabel Database

Jalankan query SQL berikut untuk membuat tabel countries di database MySQL kalian.

CREATE TABLE countries (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL
);

Setelah membuat tabel, kalian perlu mengisinya dengan beberapa data menggunakan pernyataan SQL INSERT. Atau, kalian dapat mengunduh tabel pra-populasi countries dengan mengklik tombol unduh dan mengimpornya ke dalam basis data MySQL kalian.

Silakan periksa tutorial tentang pernyataan SQL CREATE TABLE untuk informasi terperinci tentang sintaks untuk membuat tabel dalam sistem database MySQL.

Langkah 2 : Membuat Form Search

Sekarang, mari kita buat antarmuka (interface) web sederhana yang memungkinkan pengguna untuk tinggal mencari nama-nama negara yang tersedia di tabel countries kita, seperti autocomplete atau typeahead.

Buat file PHP bernama “search-form.php” dan letakkan kode berikut di dalamnya.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
    body{
        font-family: Arail, sans-serif;
    }
    /* Formatting search box */
    .search-box{
        width: 300px;
        position: relative;
        display: inline-block;
        font-size: 14px;
    }
    .search-box input[type="text"]{
        height: 32px;
        padding: 5px 10px;
        border: 1px solid #CCCCCC;
        font-size: 14px;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
    }
    .result p:hover{
        background: #f2f2f2;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.search-box input[type="text"]').on("keyup input", function(){
        /* Get input value on change */
        var inputVal = $(this).val();
        var resultDropdown = $(this).siblings(".result");
        if(inputVal.length){
            $.get("backend-search.php", {term: inputVal}).done(function(data){
                // Display the returned data in browser
                resultDropdown.html(data);
            });
        } else{
            resultDropdown.empty();
        }
    });
    
    // Set search input value on click of result item
    $(document).on("click", ".result p", function(){
        $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
        $(this).parent(".result").empty();
    });
});
</script>
</head>
<body>
    <div class="search-box">
        <input type="text" autocomplete="off" placeholder="Search country..." />
        <div class="result"></div>
    </div>
</body>
</html>

Setiap kali konten input search diubah atau keyup event terjadi pada input pencarian, kode jQuery (baris no-47 hingga 67) mengirim permintaan Ajax ke file “backend-search.php” yang mengambil catatan dari tabel negara terkait dengan istilah yang dicari. Catatan-catatan itu nantinya akan dimasukkan ke dalam <div> oleh jQuery dan ditampilkan di browser.

Langkah 3 : Memproses Search Query di Backend

Dan inilah kode sumber dari file “backend-search.php” kita yang mencari basis data berdasarkan string query yang dikirim oleh permintaan Ajax dan mengirimkan hasilnya kembali ke browser.

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "demo");
 
// Check connection
if($link === false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}
 
if(isset($_REQUEST["term"])){
    // Prepare a select statement
    $sql = "SELECT * FROM countries WHERE name LIKE ?";
    
    if($stmt = mysqli_prepare($link, $sql)){
        // Bind variables to the prepared statement as parameters
        mysqli_stmt_bind_param($stmt, "s", $param_term);
        
        // Set parameters
        $param_term = $_REQUEST["term"] . '%';
        
        // Attempt to execute the prepared statement
        if(mysqli_stmt_execute($stmt)){
            $result = mysqli_stmt_get_result($stmt);
            
            // Check number of rows in the result set
            if(mysqli_num_rows($result) > 0){
                // Fetch result rows as an associative array
                while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
                    echo "<p>" . $row["name"] . "</p>";
                }
            } else{
                echo "<p>No matches found</p>";
            }
        } else{
            echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
        }
    }
     
    // Close statement
    mysqli_stmt_close($stmt);
}
 
// close connection
mysqli_close($link);
?>

Pernyataan SQL SELECT digunakan dalam kombinasi dengan operator LIKE (baris no-16) untuk menemukan catatan yang cocok di tabel basis data countries. Kita telah menerapkan pernyataan yang sudah disiapkan agar kinerja pencarian lebih baik serta untuk mencegah serangan injeksi SQL.

Catatan: Selalu filter dan validasi input pengguna sebelum menggunakannya dalam pernyataan SQL. Kalian juga dapat menggunakan fungsi PHP mysqli_real_escape_string() untuk menghindari karakter khusus pada input pengguna dan membuat string SQL legal untuk memproteksi terhadap injeksi SQL.