Halo, selamat datang di Sandi Dharma Blog. Kali ini kita akan belajar Membangun live search menggunakan Alpine.js. Alpine.js merupakan sebuah framework javascript ringan yang dapat digunakan Kepada 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 Sinema yang datanya kita ambil dari The Movie Database (TMDB). Jadi sebelum kita mulai, silahkan persiapkan terlebih dahulu akun Engkau ya Kepada mendapatkan API key dari TMDB. Selain itu kita akan menggunakan sedikit Sokongan dari tailwindcss Kepada styling halaman.
Kita hanya akan menggunakan satu buah halaman html Kepada Membangun live search ini, silahkan persiapkan project Engkau dan buat satu buah file index.html dengan isinya sebagai berikut.
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 Sinema...title>
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 Sinema...
h1>
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>
div>
main>
script
defer
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
>script>
body>
html>
Dapat Engkau lihat pada kode di atas, kita menyertakan file cdn dari tailwindcss yang akan kita gunakan Kepada styling dan juga file cdn Alpine.js.
Membangun Fungsi Pencarian
Kepada memisahkan proses pencarian, kita akan Membangun sebuah fungsi asynchronous javascript yang akan digunakan Kepada melakukan proses pencarian dan mengembalikan hasil pencarian yang dilakukan. Engkau dapat memisahkan fungsi ini pada file javascript tersendiri atau langsung dibuat di dalam halaman index.html.
async function search(query) {
// Kalau Bukan Terdapat query langsung return array Hampa
if (!query) {
return [];
}
// menyusun query params
// Misalnya hasil: query=xxx&api_key=xxx&language=xxx&page=xxx
let params = new URLSearchParams({
query: query,
api_key: "isi dengan api key Engkau",
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 Punya TMDB dengan menyertakan beberapa query search parameter Merukapan sebagai berikut:
- query -> kata kunci pencarian yang nanti akan diambil dari input form pencarian
- api_key -> API key yang Engkau dapat dari website TMDB Kepada authentikasi
- language -> bahasa yang akan digunakan dalam hasil pencarian
- page -> halaman yang akan ditampilkan dari hasil pencarian (biasanya hasil pencarian Mempunyai beberapa halaman dengan 20 item data pada tiap halaman.
Live Search Alpine.js
Setelah selesai Membangun fungsi pencarian, kita akan implementasikan fungsi tersebut pada halaman kita menggunakan Alpine.js.
Kembali Konsentrasi 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 Sinema...h1>
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 Terdapat 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>
div>
Pada div paling luar kita tambahkan atribut x-data yang berisi data movies yang digunakan Kepada menampung Sekalian data movie yang kita dapat dari hasil pencarian, dan keywords yang digunakan Kepada 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 Mekanis memperbarui data keywords pada x-data ketika kita melakukan input ke form pencarian.
Elemen div dengan atribut x-show=”movies.length == 0″ digunakan Kepada menampilkan pesan Begitu Bukan Terdapat data movie. Kalau x-show bernilai true maka elemen akan ditampilkan, begitupun sebaliknya.
Elemen div dengan atribut x-show=”movies.length > 0″ digunakan Kepada menampilkan hasil pencarian movie. Elemen ini hanya akan tampil Kalau data movies pada x-data Bukan Hampa.
Kepada menampilkan hasil pencarian, kita menggunakan template dan ditambahkan dengan atribut x-for yang akan melakukan looping pada data movies. Di dalam template inilah kita Membangun item movie Kepada ditampilkan mulai dari title, overview, dan backdrop.
Alur Kerja Pencarian
Secara sederhana, proses pencarian dapat kita simpulkan sebagai berikut:
- Data movies dan keywords di inisialisasi pada atribut x-data
- Karena data movies Tetap Hampa, maka pesan “Belum Terdapat hasil…” akan ditampilkan
- Ketika terjadi input pada form pencarian, data keywords pada atribut x-data akan diperbarui
- Perubahan keywords akan men-trigger kode pada x-effect
- Di dalam x-effect kita memanggil fungsi search dengan keywords sebagai argumen
- Kembalian dari fungsi search akan disimpan dalam data movies
- Kalau data movies Bukan Hampa, maka hasil pencarian akan ditampilkan dengan Metode looping pada template.
Selesai
Akhirnya selesai juga live search movie yang kita buat menggunakan Alpine.js dan TMDB API.
Dari aplikasi ini Tetap banyak yang Dapat Engkau explore Tengah Kepada mengetahui fitur-fitur Alpine.js lainnya. Tetap semangat dan jangan berhenti belajar ya…