Membuat Live Search PHP Ajax

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

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:

bootsrap.min.css (download)
jQuery-3.3.1.min.js (download)
connect.php
index.php
search.php

Catatan: Sebenarnya Anda tidak perlu mengunduh berkas bootsrap.min.css dan jQuery-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');

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 berkas search.php untuk mengambil data berdasarkan permintaan pencarian dan memberikan respon balik berupa data.
$('#tampil').html(data) - akan mengubah elemen pada atribut id="tampil" dengan elemen HTML yang ada pada berkas search.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.