Setelah artikel sebelumnya yaitu Berkenalan Dengan Alpine JS dan Membuat Modal Dengan Alpine JS maka dalam artikel kali ini kita akan membahas studi kasus penggunaannya agar kita memahami keunggulan dari teknologi yang satu ini. Alpine JS sendiri merupakan sebuah lightweight framework Javascript yang dapat kita manfaatkan untuk membuat sebuah interaktif website tanpa harus menggunakan framework seperti React atau Vue. Ketika menggunakan Alpine JS kita dapat dengan mudah langsung menerapkan sifat Javascript kedalam file HTML tanpa perlu menuliskannya secara terpisah. Maka dari itu dalam artikel kali ini kita akan melakukan studi kasus yaitu Fetching Data Menggunakan Alpine JS. So let’s start the code!
Persiapan
Silahkan kamu buat file HTML dengan nama index.html, kemudian sisipkan kode berikut kedalam file HTML kamu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tutorial Fetching Data Menggunakan Alpine JS</title>
<!-- Import Alpine JS -->
<script defer src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js>"></script>
<!-- Fonts Google -->
<link rel="preconnect" href="<https://fonts.googleapis.com>" />
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin />
<link href="<https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap>" rel="stylesheet" />
<link href="<https://fonts.googleapis.com/css2?family=Inter&display=swap>" rel="stylesheet" />
<!-- Tailwind -->
<script src="<https://cdn.tailwindcss.com>"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css>" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
font-family: "Poppins", sans-serif;
}
</style>
</head>
<body>
<div class="container mx-auto h-96 p-3 w-full max-w-screen-md">
<h1 class="font-bold md:text-3xl mb-3">Fetching Data Menggunakan Alpine JS</h1>
</div>
</body>
</html>
Akan didapatkan hasil seperti ini:
Nothing special, mari kita lanjutkan lebih dalam.
Lets’ Code
Slicing Komponen Card
Setelah mempersiapkan project, kita akan membuat komponen card menggunakan Tailwind CSS, berikut kode yang akan kita gunakan:
<div>
<div class="grid grid-cols-4 gap-4">
<div>
<div class="card h-full w-64 bg-white border rounded-md p-2 flex flex-col justify-between">
<div class="card-image mb-3">
<img src="<https://placeholder.com/100x100>" alt="Product Image" class="w-full rounded-md h-32" />
</div>
<div class="card-title">
<h1 class="font-bold">Title</h1>
</div>
<div class="card-body my-3">
<p class="text-gray-500 my-3 text-xs">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, natus?</p>
</div>
<div class="card-footer">
<button class="rounded-md py-2 px-5 bg-sky-500 text-white text-xs">See More</button>
</div>
</div>
</div>
</div>
</div>
Akan didapatkan komponen seperti ini:
Fetching Data
Setelah membuat komponen card, mari kita melakukan proses pengambilan data atau fetching data menggunakan Alpine JS. Link URL endpoint API yang akan digunakan bisa kamu lihat disini, maka akan didapatkan:
<https://dummyjson.com/docs/products>
Kemudian kita akan melakukan fetching data dengan membuat fungsi bernama fetchProduct dan menggunakan kata kunci fetch yang disertai dengan proses chaining dengan method then:
<script>
function fetchProduct() {
fetch("<https://dummyjson.com/products>")
.then((res) => res.json())
.then((result) => {
const data = result.products;
console.log(data);
});
}
fetchProduct();
</script>
Apabila apabila dijalankan akan didapatkan hasil sebagai berikut:
Tapi sampai disini kita belum menampilkan data tersebut kedalam komponen card yang sudah dibuat sebelumnya. Langkah selanjutnya mari tampilkan data tersebut menjadi sebuah tampilan yang dimengerti pengguna.
Tampilkan Ke Pengguna
Untuk menampilkan data tersebut kita harus memindahkan proses logic sebelumnya kedalam container / pembungkus dari komponen card sebelumnya. Untuk lebih jelasnya perhatikan kode berikut:
<div
x-data="{ products: [] }"
x-init="fetch('<https://dummyjson.com/products>')
.then(response => response.json())
.then(data => { products = data.products })"
>
<!-- Komponen Card -->
</div>
Pada kode tersebut kita menggunakan dua directive yang disediakan oleh Alpine JS, yaitu:
x-data berfungsi untuk menampung data logic Javascript agar berjalan langsung pada tag HTML tersebut. Pada kode tersebut kita membuat satu variabel dengan nama products yang bertipe data array. Variabel ini bertujuan untuk menampung data hasil fetching pada fungsi tersebut.
x-init bertujuan untuk melakukan inisialisasi sebelum komponen tersebut di load. Pada kode tersebut kita menyisipkan fungsi fetch yang bertujuan untuk mengambil data dari endpoint API yang sudah kita siapkan sebelumnya. Kemudian sebelum halaman browser ditampilkan, Alpine JS akan melakukan proses fetching di belakang layar kemudian hasil dari fetching tersebut ditampung kedalam variabel products yang sudah dideklarasikan di awal.
Langkah terakhir kita akan melakukan proses perulangan dari data tersebut agar bisa ditampilkan menjadi sebuah halaman yang dapat dimengerti pengguna. Untuk mencapai hal tersebut kita akan menggunakan directive dari Alpine JS yaitu x-for.
<div class="grid grid-cols-4 gap-4">
<template x-for="product in products">
<div class="card bg-white border rounded-md p-2 flex flex-col justify-between">
<div class="card-image mb-3">
<img x-bind:src="product.thumbnail" x-bind:alt="product.description" class="w-full rounded-md h-32" />
</div>
<div class="card-title">
<h1 class="font-bold text-md" x-text="product.title"></h1>
</div>
<div class="card-body my-3">
<p class="text-gray-500 my-3 truncate text-sm" x-text="product.description"></p>
</div>
<div class="card-footer">
<button class="rounded-md py-2 px-5 bg-sky-500 text-white">See More</button>
</div>
</div>
</template>
</div>
Pada kode tersebut kita melakukan proses perulangan dari variabel products kemudian ditampung kembali dalam variabel product.
Apabila kamu perhatikan, kita menggunakan directive bernama x-bind untuk menampilkan gambar berdasarkan data yang disediakan oleh endpoint tersebut.
...
<img x-bind:src="product.thumbnail" x-bind:alt="product.description" class="w-full rounded-md h-32" />
...
Directive ini bertujuan agar kita dapat mencetak nilai dari Javascript langsung kedalam atribut HTML yang diinginkan. Kita juga menggunakan directive x-text untuk mencetak langsung data kedalam tampilan HTML. Apabila kita cek hasilnya akan didapatkan seperti ini:
Selamat! kamu telah berhasil melakukan proses fetching dengan menggunakan Alpine JS dan langsung menampilkannya kepada pengguna tanpa harus menggunakan framework besar seperti React atau Vue.
Kesimpulan
Cukup simple bukan? Ketika menggunakan framework ini, kita dapat dengan mudah membuat website yang dinamis hanya dengan memanfaatkan HTML sebagai file utama dan tentunya ini sangat mempercepat waktu development website kamu.
Oiya satu lagi, apabila kamu ingin mendalami dunia web development lebih jauh, yuk bergabung dalam kelas premium yang disediakan oleh BuildWithAngga. Di dalamnya kamu dapat belajar lebih banyak studi kasus dan dapat menambah portfolio kamu untuk menunjang karir yang akan datang. Mari bergabung dan sampai jumpa dikelas!
