Halo, selamat datang di Digimensia Blog. Kali ini kita akan belajar Membikin live search menggunakan Alpine.js. Alpine.js merupakan sebuah framework javascript ringan yang dapat digunakan Buat 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 Gambar hidup yang datanya kita ambil dari The Movie Database (TMDB). Jadi sebelum kita mulai, silahkan persiapkan terlebih dahulu akun Anda ya Buat mendapatkan API key dari TMDB. Selain itu kita akan menggunakan sedikit Donasi dari tailwindcss Buat styling halaman.
Kita hanya akan menggunakan satu buah halaman html Buat Membikin live search ini, silahkan persiapkan project Anda 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 Gambar hidup...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 Gambar hidup...
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 Anda lihat pada kode di atas, kita menyertakan file cdn dari tailwindcss yang akan kita gunakan Buat styling dan juga file cdn Alpine.js.
Membikin Fungsi Pencarian
Buat memisahkan proses pencarian, kita akan Membikin sebuah fungsi asynchronous javascript yang akan digunakan Buat melakukan proses pencarian dan mengembalikan hasil pencarian yang dilakukan. Anda dapat memisahkan fungsi ini pada file javascript tersendiri atau langsung dibuat di dalam halaman index.html.
async function search(query) {
// Kalau Tak Terdapat query langsung return array Hampa
if (!query) {
return [];
}
// menyusun query params
// sampel hasil: query=xxx&api_key=xxx&language=xxx&page=xxx
let params = new URLSearchParams({
query: query,
api_key: "isi dengan api key Anda",
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 Ialah sebagai berikut:
- query -> kata kunci pencarian yang nanti akan diambil dari input form pencarian
- api_key -> API key yang Anda dapat dari website TMDB Buat 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 Membikin fungsi pencarian, kita akan implementasikan fungsi tersebut pada halaman kita menggunakan Alpine.js.
Kembali Pusat perhatian 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 Gambar hidup...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 Buat menampung Seluruh data movie yang kita dapat dari hasil pencarian, dan keywords yang digunakan Buat 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 Buat menampilkan pesan Demi Tak Terdapat data movie. Kalau x-show bernilai true maka elemen akan ditampilkan, begitupun sebaliknya.
Elemen div dengan atribut x-show=”movies.length > 0″ digunakan Buat menampilkan hasil pencarian movie. Elemen ini hanya akan tampil Kalau data movies pada x-data Tak Hampa.
Buat menampilkan hasil pencarian, kita menggunakan template dan ditambahkan dengan atribut x-for yang akan melakukan looping pada data movies. Di dalam template inilah kita Membikin item movie Buat 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 Lagi 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 Tak Hampa, maka hasil pencarian akan ditampilkan dengan Langkah looping pada template.
Selesai
Akhirnya selesai juga live search movie yang kita buat menggunakan Alpine.js dan TMDB API.
Dari aplikasi ini Lagi banyak yang Pandai Anda explore lagi Buat mengetahui fitur-fitur Alpine.js lainnya. Tetap semangat dan jangan berhenti belajar ya…