Home > Blog > Cara Membuat Halaman Pencaharian dengan Ajax

Cara Membuat Halaman Pencaharian dengan Ajax

04 Feb 2025 | dibaca 70 kali

Pembuatan halaman pencarian yang interaktif dan responsif menjadi kebutuhan yang krusial dalam berbagai jenis aplikasi web. Dengan menggunakan teknik Asynchronous JavaScript and XML (Ajax), kita dapat menampilkan hasil pencarian secara dinamis tanpa perlu memuat ulang seluruh halaman. Hal ini meningkatkan user experience dan efisiensi penggunaan bandwidth.

Mengapa Menggunakan Ajax untuk Pencarian

Catatan: Contoh dalam artikel ini menggunakan PHP sebagai server side dan MySQL sebagai basis data. Anda tetap bisa menerapkan konsep serupa dengan bahasa pemrograman dan database lain.

Struktur Folder Proyek

Sebagai acuan, berikut adalah contoh struktur folder sederhana untuk meletakkan berkas-berkas yang dibutuhkan: 

ajax-search/
├── index.html        (File utama untuk tampilan pencarian)
├── search.php        (File server-side untuk memproses permintaan Ajax)
└── db_connection.php (File opsional untuk menghubungkan ke database, jika diperlukan)

Menyiapkan Basis Data

Untuk mempraktikkan contoh ini, asumsikan kita memiliki sebuah tabel di MySQL dengan nama products berisi data sederhana: 

CREATE TABLE products (
  id INT AUTO_INCREMENT PRIMARY KEY,
  product_name VARCHAR(100),
  product_desc TEXT
);

Isi tabel products dengan beberapa data contoh: 

INSERT INTO products (product_name, product_desc) VALUES
('Laptop XYZ', 'Laptop dengan prosesor terbaru dan RAM 8GB'),
('Kamera ABC', 'Kamera digital 24MP dengan lensa kit'),
('Smartphone DEF', 'Smartphone dengan memori internal 128GB'),
('Smart TV GHI', 'TV pintar dengan sistem operasi Android dan resolusi 4K');

Menyiapkan File PHP untuk Koneksi Database (Opsional)

Jika Anda memilih struktur dan best practice yang lebih rapi, pisahkan detail koneksi database di file db_connection.php. Berikut contoh singkat: 

<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db   = 'my_database';

$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}

Membuat Endpoint Pencarian (search.php)

File search.php ini akan bertanggung jawab menerima parameter query (kata kunci) dari request Ajax, kemudian mengeksekusi SELECT di tabel products berdasarkan kata kunci tersebut. Selanjutnya, hasil akan dikirim kembali ke sisi klien dalam format JSON. 

<?php
header('Content-Type: application/json');

// Jika Anda memisahkan koneksi, maka:
// include 'db_connection.php';
// Atau langsung definisikan di sini:
$host = 'localhost';
$user = 'root';
$pass = '';
$db   = 'my_database';

$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) {
    die(json_encode(["error" => "Koneksi ke database gagal."]));
}

// Mengambil query pencarian
$keyword = isset($_GET['keyword']) ? $_GET['keyword'] : '';

// Query sederhana dengan LIKE
$sql = "SELECT * FROM products 
        WHERE product_name LIKE '%$keyword%' 
        OR product_desc LIKE '%$keyword%' 
        ORDER BY id DESC";

$result = mysqli_query($conn, $sql);

$data = [];
if ($result && mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {
        $data[] = $row;
    }
}

// Mengembalikan response dalam format JSON
echo json_encode($data);

Penjelasan singkat:

Tips Keamanan: Ketika menggunakan LIKE, umumnya Anda perlu mempertimbangkan teknik prepared statements untuk mencegah injeksi SQL. Pada contoh di atas, kita menggunakan pendekatan sederhana untuk tujuan demo.

Membuat Halaman Antarmuka (index.html)

Selanjutnya, kita buat halaman antarmuka dengan input pencarian dan area hasil pencarian. Untuk menggunakan Ajax dengan mudah, kita akan memakai jQuery (bisa juga dengan vanilla JavaScript, atau fetch API). 

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Pencarian dengan Ajax</title>
  <!-- Memuat jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    #search-results {
      margin-top: 20px;
    }
    .product {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
    .product h3 {
      margin-top: 0;
      margin-bottom: 5px;
    }
  </style>
</head>
<body>

  <h1>Halaman Pencarian Produk</h1>
  <p>Ketik kata kunci produk, lalu hasil akan otomatis muncul.</p>

  <div>
    <label for="search-input">Cari Produk:</label>
    <input type="text" id="search-input" placeholder="misal: laptop, kamera, tv" />
  </div>

  <div id="search-results"></div>

  <script>
  $(document).ready(function() {
    // Fungsi untuk melakukan Ajax request
    function searchProducts(keyword) {
      $.ajax({
        url: 'search.php',
        type: 'GET',
        data: { keyword: keyword },
        dataType: 'json',
        success: function(response) {
          // Kosongkan elemen sebelum menampilkan data baru
          $('#search-results').empty();

          if(response.length > 0) {
            // Loop data hasil pencarian
            $.each(response, function(index, product) {
              let html = `
                <div class="product">
                  <h3>${product.product_name}</h3>
                  <p>${product.product_desc}</p>
                </div>
              `;
              $('#search-results').append(html);
            });
          } else {
            $('#search-results').html('<p>Tidak ada hasil ditemukan.</p>');
          }
        },
        error: function() {
          $('#search-results').html('<p>Terjadi kesalahan saat memuat data.</p>');
        }
      });
    }

    // Memantau input saat user mengetik (keyup event)
    $('#search-input').on('keyup', function() {
      let keyword = $(this).val().trim();
      // Hanya panggil Ajax jika keyword minimal 1 karakter
      if(keyword.length > 0) {
        searchProducts(keyword);
      } else {
        // Kosongkan jika tidak ada input
        $('#search-results').empty();
      }
    });
  });
  </script>

</body>
</html>

Penjelasan alur kerja:

Teknik Penundaan (Debouncing) Pencarian

Jika Anda memiliki tabel berukuran besar atau ingin mengurangi jumlah request yang dikirim, Anda bisa menambahkan teknik debounce supaya Ajax tidak terpanggil terlalu sering saat user mengetik dengan cepat.

Contoh menambahkan debounce sederhana: 

let debounceTimer;
$('#search-input').on('keyup', function() {
  let keyword = $(this).val().trim();

  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(function() {
    if(keyword.length > 0) {
      searchProducts(keyword);
    } else {
      $('#search-results').empty();
    }
  }, 300); // jeda 300 ms
});

Dengan pendekatan ini, Ajax hanya akan terpanggil ketika user selesai mengetik (atau berhenti sejenak) dalam 300 milidetik.

Membuat Tampilan Lebih Menarik

Penampilan hasil pencarian dapat dikembangkan lebih lanjut dengan styling CSS atau menggunakan framework seperti Bootstrap atau Tailwind CSS. Anda bisa menambahkan elemen gambar produk, harga, tombol untuk melihat detail, dan fitur lainnya.

Pengujian

Sebelum menganggap halaman pencarian sudah siap, lakukan beberapa pengujian berikut:

Menangani Kesalahan

Keamanan Tambahan

Beberapa hal yang dapat diterapkan untuk meningkatkan keamanan:


Baca Juga :