Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara menampilkan data di dalam Preact dari Rest API.
MOHON DIBACA !
Pastikan teman-teman sudah menjalankan project Laravel-nya terlebih dahulu, agar Rest API bisa digunakan di dalam Preact.
Langkah 1 - Installasi Axios
Pertama, kita akan menginstall library yang nanti digunakan untuk melakukan Http Request ke backend dan dalam hal ini adalah Axios.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Preact-nya.
npm install axios@1.6.7
Langkah 2 - Konfigurasi Axios
Agar nanti kita menulis domain backend secara berulang-ulang di dalam component, maka kita perlu membuat service endpoint API-nya secara global.
Sekarang, silahkan teman-teman buat folder baru dengan nama services di dalam folder src, dan di dalam folder services tersebut silahkan buat file baru dengan nama api.js dan masukkan kode berikut ini di dalamnya.
src/services/api.js
//import axios
import axios from 'axios';
const Api = axios.create({
//set default endpoint API
baseURL: 'http://localhost:8000'
})
export default Api
Langkah 3 - Menampilkan Data dari Rest API di Preact
Selanjutnya, kita akan belajar bagaimana cara menampilkan data dari Rest API di dalam Preact. Disini kita akan mengubah kode yang berada di dalam view post index.
Silahkan teman-teman buka file src/pages/posts/index.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/pages/posts/index.jsx
//import useState dan useEffect
import { useState, useEffect } from "preact/hooks";
//import api
import api from "../../services/api";
//import Link
import { Link } from "preact-router/match";
export default function PostIndex() {
//init state
const [posts, setPosts] = useState([]);
//define method
const fetchDataPosts = async () => {
//fetch data from API with Axios
await api.get("/api/posts").then((response) => {
//assign response data to state "posts"
setPosts(response.data.data.data);
});
};
//run hook useEffect
useEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<Link
href="/posts/create"
className="btn btn-md btn-success rounded shadow border-0 mb-3"
>
ADD NEW POST
</Link>
<div className="card border-0 rounded shadow">
<div className="card-body">
<table className="table table-bordered">
<thead className="bg-dark text-white">
<tr>
<th scope="col">Image</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col" style={{ width: "15%" }}>
Actions
</th>
</tr>
</thead>
<tbody>
{posts.length > 0 ? (
posts.map((post, index) => (
<tr key={index}>
<td className="text-center">
<img
src={post.image}
alt={post.title}
width="200"
className="rounded"
/>
</td>
<td>{post.title}</td>
<td>{post.content}</td>
<td className="text-center">
<Link
href={`/posts/edit/${post.id}`}
className="btn btn-sm btn-primary rounded-sm shadow border-0 me-2"
>
EDIT
</Link>
<button className="btn btn-sm btn-danger rounded-sm shadow border-0">
DELETE
</button>
</td>
</tr>
))
) : (
<tr>
<td colSpan="4" className="text-center">
<div className="alert alert-danger mb-0">
Data Belum Tersedia!
</div>
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
}
Dari perubahan kode di atas, pertama kita import hook useState dan useEffect dari Preact Hooks.
//import useState dan useEffect
import { useState, useEffect } from "preact/hooks";
Kemudian kita import services API yang sudah kita buat sebelumnya.
//import api
import api from "../../services/api";
Karena akan ada sebuah navigasi di dalam halaman ini, maka kita import Link dari Preact Router.
//import Link
import { Link } from "preact-router/match";
Di dalam function component PostIndex kita membuat state baru, dimana state inilah yang nanti akan menampung data yang di dapatkan dari Rest API.
//init state
const [posts, setPosts] = useState([]);
Setelah itu, kita buat method baru dengan nama fetchDataPosts.
//define method
const fetchDataPosts = async () => {
//...
}
Di dalam method tersebut, kita melakukan fetch data ke backend melalui Rest API dengan endpoint /api/posts dan method yang digunakan adalah GET.
await api.get("/api/posts").then((response) => {
//...
}
Jika proses fetching berhasil dilakukan, kita akan assign atau memasukkan response data dari Rest API ke dalam state posts melalui state handler-nya, yaitu setPosts.
//assign response data to state "posts"
setPosts(response.data.data.data);
Agar method di atas dijalankan saat halaman diakses, maka kita perlu memanggilnya di dalam hook useEffect.
//run hook useEffect
useEffect(() => {
//call method "fetchDataPosts"
fetchDataPosts();
}, []);
Untuk menampilkan data di dalam template, kita membuat kondisi terlebih dahulu. Jika data posts lebih dari 0, maka kita akan tampilkan data-nya dan jika 0, maka kita akan tampilkan pesan data belum tersedia.
{posts.length > 0 ? (
// tampilkan data
) : (
// Data Belum Tersedia!
)
Di atas, untuk menampilkan data kita menggunakan method map.
posts.map((post, index) => (
//...
))
Langkah 4 - Uji Coba Menampilkan Data
Sekarang silahkan teman-teman klik kemu POSTS yang ada di dalam navbar, atau juga bisa langsung ke URL berikut ini http://localhost:5173/posts, jika berhasil maka akan menampilkan halaman seperti berikut ini.
Di atas, kita masih menampilkan pesan Data Belum Tersedia!, karena memang kita masih belum memiliki data apapun di dalam database.
Kesimpulan
Pada artikel ini kita telah banyak belajar, seperti menginstall dan konfigurasi Axios, menampilkan data dari Rest API di Preact dan melakukan uji coba.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara melakukan proses insert dan upload data di dalam Preact melalui Rest API.
Terima Kasih