Alpine.js adalah framework JavaScript minimalis yang sangat berguna untuk menambahkan interaktivitas sederhana pada halaman web.Digabungkan dengan Fetch API, Alpine.js menjadi alat yang kuat untuk mengambil dan menampilkan data dari backend.
Berikut adalah panduan langkah demi langkah untuk menggunakan Fetch API dengan Alpine.js.
- Mengapa Memilih Alpine.js?
Sebelum kita mulai, mari kita bahas beberapa alasan mengapa Alpine.js mungkin menjadi pilihan yang tepat:
- Ringan dan Cepat: Alpine.js memiliki footprint yang sangat kecil, membuatnya cepat untuk diunduh dan dijalankan.
- Kemudahan Penggunaan: Sintaks yang sederhana dan intuitif, mirip dengan Vue.js, membuatnya mudah dipelajari dan digunakan.
- Tanpa Build Tool: Tidak memerlukan setup yang rumit atau build tools, cukup tambahkan script ke halaman HTML Anda.
- Persiapan Proyek
Untuk memulai, kita perlu menyiapkan HTML dasar dan menyertakan Alpine.js. Buat file index.html dengan struktur berikut:
3. Penjelasan Kode
Mari kita bahas bagian-bagian penting dari kode di atas:
a. Menyertakan Alpine.js
Kita menyertakan Alpine.js dari CDN di dalam tag <head> dengan atribut defer untuk memastikan bahwa script dijalankan setelah HTML dimuat.
<script src=”https://cdn.jsdelivr.net/npm/alpinejs@3.10.2/dist/cdn.min.js” defer></script>
b. Membuat Komponen Alpine.js
Kita membuat sebuah div dengan atribut x-data yang menginisialisasi fungsi fetchData(). Atribut x-init digunakan untuk memanggil fungsi fetchUsers saat komponen diinisialisasi.
<div x-data=”fetchData()” x-init=”fetchUsers”>
c. Mengelola State dengan Alpine.js
Di dalam fungsi fetchData(), kita mengelola state yang dibutuhkan, seperti users dan loading. Fungsi fetchUsers menggunakan Fetch API untuk mengambil data dari endpoint https://jsonplaceholder.typicode.com/users.
function fetchData() {
return {
users: [],
loading: false,
async fetchUsers() {
this.loading = true;
try {
const response = await fetch(‘https://jsonplaceholder.typicode.com/users’);
this.users = await response.json();
} catch (error) {
console.error(‘Error fetching users:’, error);
} finally {
this.loading = false;
}
}
};
}
d. Menampilkan Data dengan Alpine.js
Template HTML menggunakan atribut Alpine.js seperti x-if untuk kondisi, x-for untuk iterasi, dan x-text untuk binding teks.
<template x-if=”loading”>
<p>Loading…</p>
</template>
<template x-if=”!loading && users.length > 0″>
<ul>
<li x-for=”user in users” :key=”user.id”>
<p x-text=”user.name”></p>
</li>
</ul>
</template>
<template x-if=”!loading && users.length === 0″>
<p>Tidak ada pengguna yang ditemukan.</p>
</template>
4. Menjalankan Proyek
Untuk melihat hasilnya, cukup buka file index.html di browser Anda. Anda akan melihat daftar pengguna yang diambil dari API, atau pesan “Loading…” sementara data sedang diambil.
Itulah panduan langkah demi langkah untuk menggunakan Fetch API dengan Alpine.js.
