Home > Blog > Membuat Halaman Pencarian Hotel dengan Ajax

Membuat Halaman Pencarian Hotel dengan Ajax

04 Feb 2025 | dibaca 117 kali

Menyediakan layanan pencarian hotel yang praktis dan responsif adalah salah satu aspek penting dalam sebuah situs atau aplikasi pemesanan akomodasi. Menggunakan Asynchronous JavaScript and XML (Ajax), kita dapat membuat pengguna mencari hotel dan mendapatkan hasil seketika tanpa memuat ulang keseluruhan halaman. Teknik ini meningkatkan user experience, menghemat bandwidth, serta membuat aplikasi terasa lebih interaktif.

Manfaat Menggunakan Ajax dalam Pencarian Hotel

Catatan: Pada contoh ini, kita akan menggunakan PHP untuk proses server side dan MySQL sebagai basis data. Namun konsep yang sama dapat diterapkan untuk bahasa dan DBMS lain.

Struktur Database

Misalkan kita membuat sebuah tabel bernama hotels untuk menyimpan daftar hotel. Tabel ini akan memiliki beberapa kolom seperti id, hotel_name, city, price, dan rating sebagai contoh: 

CREATE TABLE hotels (
  id INT AUTO_INCREMENT PRIMARY KEY,
  hotel_name VARCHAR(100) NOT NULL,
  city VARCHAR(50) NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  rating DECIMAL(2, 1) NOT NULL
);

Selanjutnya, isikan beberapa data awal untuk keperluan uji coba: 

INSERT INTO hotels (hotel_name, city, price, rating) VALUES
('Grand Palace Hotel', 'Jakarta', 950000, 4.5),
('Sunset Beach Resort', 'Bali', 1200000, 4.7),
('Mountain View Lodge', 'Bandung', 700000, 4.2),
('Royal Inn', 'Surabaya', 500000, 3.8),
('City Light Hotel', 'Jakarta', 650000, 4.0);

Struktur Folder Proyek

Untuk mempermudah manajemen file, kita dapat menggunakan struktur folder sebagai berikut: 

hotel-search/
├── index.html          (File utama untuk tampilan pencarian)
├── searchHotel.php     (File server-side untuk memproses permintaan Ajax)
└── db_connection.php   (File opsional yang berisi detail koneksi database)

Menyiapkan Koneksi Database (db_connection.php)

Kita dapat memisahkan detail koneksi database dalam file db_connection.php untuk menjaga kerapian kode. Contoh minimalnya seperti berikut: 

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

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

Membuat Endpoint Pencarian (searchHotel.php)

File searchHotel.php akan menerima parameter query atau keyword yang dikirim melalui request Ajax. Kemudian, kita akan melakukan SELECT data hotel dari tabel hotels berdasarkan kata kunci tersebut. Selanjutnya, hasilnya dikemas dalam format JSON agar mudah diproses di sisi klien. 

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

// Mengambil file koneksi (opsional)
include 'db_connection.php';

// Pastikan koneksi berhasil dibuat
if (!$conn) {
    die(json_encode(["error" => "Koneksi database gagal."]));
}

// Mendapatkan keyword dari request GET
$keyword = isset($_GET['keyword']) ? $_GET['keyword'] : '';

// Query sederhana: mencari kecocokan di nama hotel atau kota
$sql = "SELECT * FROM hotels 
        WHERE hotel_name LIKE '%$keyword%' 
           OR city LIKE '%$keyword%' 
        ORDER BY rating DESC";

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

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

echo json_encode($data);
Peringatan Keamanan: Untuk mencegah SQL Injection, penggunaan prepared statement dengan bind parameter sangat disarankan pada implementasi riil, terutama di lingkungan produksi.

Membuat Antarmuka Pengguna (index.html)

Di sisi klien, kita akan menyiapkan sebuah halaman HTML dengan kolom pencarian untuk nama hotel atau kota. Setiap kali pengguna mengetik kata kunci, Ajax akan dikirim ke searchHotel.php untuk memuat data hotel terkait. Pada artikel ini kita memanfaatkan jQuery untuk menangani Ajax dengan mudah. 

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Pencarian Hotel 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;
    }
    .hotel-card {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
    .hotel-card h3 {
      margin: 0 0 5px 0;
    }
    .hotel-card p {
      margin: 5px 0;
    }
  </style>
</head>
<body>

  <h1>Halaman Pencarian Hotel</h1>
  <p>
    Masukkan nama hotel atau kota untuk mencari daftar hotel yang tersedia.
  </p>

  <div>
    <label for="search-input">Kata Kunci:</label>
    <input type="text" id="search-input" placeholder="Cari hotel atau kota..." />
  </div>

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

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

          if(response.length > 0) {
            // Loop melalui data hasil pencarian
            $.each(response, function(index, hotel) {
              let hotelHTML = `
                <div class="hotel-card">
                  <h3>${hotel.hotel_name}</h3>
                  <p>Lokasi: ${hotel.city}</p>
                  <p>Harga: Rp ${parseFloat(hotel.price).toLocaleString('id-ID')}</p>
                  <p>Rating: ${hotel.rating}</p>
                </div>
              `;
              $('#search-results').append(hotelHTML);
            });
          } else {
            $('#search-results').html('<p>Tidak ada hotel yang cocok dengan kata kunci.</p>');
          }
        },
        error: function() {
          $('#search-results').html('<p>Terjadi kesalahan saat memuat data.</p>');
        }
      });
    }

    // Event saat pengguna mengetik di kolom pencarian
    $('#search-input').on('keyup', function() {
      let keyword = $(this).val().trim();
      // Panggil fungsi Ajax hanya jika pengguna memasukkan minimal 1 karakter
      if (keyword.length > 0) {
        searchHotels(keyword);
      } else {
        // Kosongkan hasil jika tidak ada input
        $('#search-results').empty();
      }
    });
  });
  </script>

</body>
</html>

Teknik Debounce untuk Optimasi

Jika jumlah hotel di database Anda sangat besar, memicu Ajax terus-menerus untuk setiap ketukan tombol dapat membebani server. Salah satu solusi adalah menerapkan debounce. Dengan metode ini, permintaan Ajax hanya dikirim setelah pengguna berhenti mengetik selama kurun waktu tertentu. 

let debounceTimer;
$('#search-input').on('keyup', function() {
  let keyword = $(this).val().trim();
  
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(function() {
    if (keyword.length > 0) {
      searchHotels(keyword);
    } else {
      $('#search-results').empty();
    }
  }, 300); // Debounce selama 300ms
});

Dengan demikian, server tidak akan dibanjiri permintaan dan performa aplikasi menjadi lebih stabil.

Menyempurnakan Fitur Pencarian

Pengujian

Beberapa skenario pengujian perlu dilakukan untuk memastikan halaman pencarian hotel berfungsi optimal:

Keamanan Tambahan

Beberapa hal yang bisa dilakukan untuk meningkatkan keamanan dan kualitas kode:


Baca Juga :