Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!

Halo, selamat datang di Ruang Developer Blog. Kali ini kita akan belajar membuat live search menggunakan Alpine.js. Alpine.js merupakan sebuah framework javascript ringan yang dapat digunakan untuk berinteraksi dengan halaman website langsung melalui markup HTML, seperti apa yang tertulis pada halaman website resminya.

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.

Oke langsung saja kita mulai ya…

Menyiapkan Halaman

Pada tutorial ini, kita akan menggunakan studi kasus pencarian film yang datanya kita ambil dari The Movie Database (TMDB). Jadi sebelum kita mulai, silahkan persiapkan terlebih dahulu akun kamu ya untuk mendapatkan API key dari TMDB. Selain itu kita akan menggunakan sedikit bantuan dari tailwindcss untuk styling halaman.

Kita hanya akan menggunakan satu buah halaman html untuk membuat live search ini, silahkan persiapkan project kamu dan buat satu buah file index.html dengan isinya sebagai berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cari Film...</title>
    <!-- Tailwind play CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>

  <body>
    <main class="py-10">
      <div class="max-w-2xl mx-auto px-4">
        <h1 class="text-center text-4xl font-bold text-gray-600">
          Cari Film...
        </h1>
        <!-- Search form -->
        <div class="my-10">
          <input
            type="search"
            class="px-4 py-2 block w-full border-2 border-gray-600 rounded-lg text-gray-600"
            placeholder="Ketik kata kunci di sini..."
          />
        </div>
        <!-- End search form -->
      </div>
    </main>
    <!-- Alpine.js CDN -->
    <script
      defer
      src="https://unpkg.com/[email protected]/dist/cdn.min.js"
    ></script>
  </body>
</html>

Dapat kamu lihat pada kode di atas, kita menyertakan file cdn dari tailwindcss yang akan kita gunakan untuk styling dan juga file cdn Alpine.js.

Membuat Fungsi Pencarian

Untuk memisahkan proses pencarian, kita akan membuat sebuah fungsi asynchronous javascript yang akan digunakan untuk melakukan proses pencarian dan mengembalikan hasil pencarian yang dilakukan. Kamu dapat memisahkan fungsi ini pada file javascript tersendiri atau langsung dibuat di dalam halaman index.html.

async function search(query) {
  // jika tidak ada query langsung return array kosong
  if (!query) {
    return [];
  }

  // menyusun query params
  // contoh hasil: query=xxx&api_key=xxx&language=xxx&page=xxx
  let params = new URLSearchParams({
    query: query,
    api_key: "isi dengan api key kamu",
    language: "en-US",
    page: 1,
  });

  // network request ke api server tmdb
  let response = await fetch(
    `https://api.themoviedb.org/3/search/movie?${params.toString()}`
  );
  let json = await response.json();

  // return hasil pencarian
  return json.results;
}

Pada fungsi di atas, kita melakukan network request ke API server milik TMDB dengan menyertakan beberapa query search parameter yaitu sebagai berikut:

  • query -> kata kunci pencarian yang nanti akan diambil dari input form pencarian
  • api_key -> API key yang kamu dapat dari website TMDB untuk authentikasi
  • language -> bahasa yang akan digunakan dalam hasil pencarian
  • page -> halaman yang akan ditampilkan dari hasil pencarian (biasanya hasil pencarian memiliki beberapa halaman dengan 20 item data pada tiap halaman.

Live Search Alpine.js

Setelah selesai membuat fungsi pencarian, kita akan implementasikan fungsi tersebut pada halaman kita menggunakan Alpine.js. Kembali fokus pada html kita, sekarang isi pada tag main kita ubah menjadi seperti berikut

<div
  x-data="{ movies:[], keywords:'' }"
  x-effect="movies = await search(keywords)"
  class="max-w-2xl mx-auto px-4"
>
  <h1 class="text-center text-4xl font-bold text-gray-600">Cari Film...</h1>
  <!-- Search form -->
  <div class="my-10">
    <input
      x-model="keywords"
      type="search"
      class="px-4 py-2 block w-full border-2 border-gray-600 rounded-lg text-gray-600"
      placeholder="Ketik kata kunci di sini..."
    />
  </div>
  <div>
    <div
      x-show="movies.length == 0"
      class="bg-gray-50 text-gray-500 text-center p-3 rounded-lg border"
    >
      Belum ada hasil...
    </div>
    <div x-show="movies.length > 0" class="grid grid-cols-1 gap-4">
      <template x-for="movie in movies">
        <div class="border rounded-lg shadow p-3 flex gap-4">
          <img
            x-show="movie.backdrop_path != null"
            class="rounded-lg"
            :src="'https://image.tmdb.org/t/p/w300' + movie.backdrop_path"
            :alt="movie.title"
          />
          <div>
            <p x-text="movie.title" class="text-lg font-bold mb-2"></p>
            <small x-text="movie.overview"></small>
          </div>
        </div>
      </template>
    </div>
  </div>
  <!-- End search form -->
</div>

Pada div paling luar kita tambahkan atribut x-data yang berisi data movies yang digunakan untuk menampung semua data movie yang kita dapat dari hasil pencarian, dan keywords yang digunakan untuk menyimpan query pencarian. Selain itu, kita juga menambahkan atribut x-effect yang di dalamnya kita megisi data movies dengan memanggil fungsi search yang sebelumnya telah kita buat. Kode dalam atribut x-effect akan dipanggil ketika terjadi perubahan data pada atribut x-data.

Atribut x-model kita tambahkan pada search input agar Alpine.js otomatis memperbarui data keywords pada x-data ketika kita melakukan input ke form pencarian.

Elemen div dengan atribut x-show=”movies.length == 0″ digunakan untuk menampilkan pesan saat tidak ada data movie. Jika x-show bernilai true maka elemen akan ditampilkan, begitupun sebaliknya.

Elemen div dengan atribut x-show=”movies.length > 0″ digunakan untuk menampilkan hasil pencarian movie. Elemen ini hanya akan tampil jika data movies pada x-data tidak kosong.

Untuk menampilkan hasil pencarian, kita menggunakan template dan ditambahkan dengan atribut x-for yang akan melakukan looping pada data movies. Di dalam template inilah kita membuat item movie untuk ditampilkan mulai dari title, overview, dan backdrop.

Alur Kerja Pencarian

Secara sederhana, proses pencarian dapat kita simpulkan sebagai berikut:

  1. Data movies dan keywords di inisialisasi pada atribut x-data
  2. Karena data movies masih kosong, maka pesan “Belum ada hasil…” akan ditampilkan
  3. Ketika terjadi input pada form pencarian, data keywords pada atribut x-data akan diperbarui
  4. Perubahan keywords akan men-trigger kode pada x-effect
  5. Di dalam x-effect kita memanggil fungsi search dengan keywords sebagai argumen
  6. Kembalian dari fungsi search akan disimpan dalam data movies
  7. Jika data movies tidak kosong, maka hasil pencarian akan ditampilkan dengan cara looping pada template.

Selesai

Akhirnya selesai juga live search movie yang kita buat menggunakan Alpine.js dan TMDB API.

Dari aplikasi ini masih banyak yang bisa kamu explore lagi untuk mengetahui fitur-fitur Alpine.js lainnya. Tetap semangat dan jangan berhenti belajar ya…

Source code

Bagikan:

Ingin Berdiskusi?

Yuk bergabung di Grup Telegram Ruang Developer atau mulai diskusi melalui GitHub. See You!

Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!
comments powered by Disqus

Berlangganan Gratis

Kamu akan menerima email update dari Ruang Developer

Beri Dukungan

Beri dukungan, dapatkan full source code project web untuk bahan referensi, tiru, dan modifikasi.
Lightbox