Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bersama-sama bagaimana membuat proses insert dan upload data di Preact dengan Rest API dan pada artikel kali ini kita semua akan belajar membuat proses edit dan update data di Preact menggunakan Rest API.
Langkah 1 - Edit dan Update Data di Preact
Sekerang, silahkan teman-teman buka file src/pages/posts/edit.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/pages/posts/edit.jsx
//import useState and useEffect
import { useState, useEffect } from "preact/hooks";
//import route
import { route } from "preact-router";
//import API
import api from "../../services/api";
export default function PostEdit({ id }) {
//define state
const [image, setImage] = useState("");
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
//state validation
const [errors, setErrors] = useState([]);
//method fetchDetailPost
const fetchDetailPost = async () => {
//fetch data
await api.get(`/api/posts/${id}`).then((response) => {
//assign to state
setTitle(response.data.data.title);
setContent(response.data.data.content);
});
};
//hook useEffect
useEffect(() => {
//call method "fetchDetailPost"
fetchDetailPost();
}, []);
//method handle file change
const handleFileChange = (e) => {
setImage(e.target.files[0]);
};
//method update post
const updatePost = async (e) => {
e.preventDefault();
//init FormData
const formData = new FormData();
//append data
formData.append("image", image);
formData.append("title", title);
formData.append("content", content);
formData.append("_method", "PUT");
//send data with API
await api
.post(`/api/posts/${id}`, formData)
.then(() => {
//redirect to posts index
route("/posts", true);
})
.catch((error) => {
//set errors response to state "errors"
setErrors(error.response.data);
});
};
return (
<div className="container mt-5">
<div className="row">
<div className="col-md-12">
<div className="card border-0 rounded shadow">
<div className="card-body">
<form onSubmit={updatePost}>
<div className="mb-3">
<label className="form-label fw-bold">Image</label>
<input
type="file"
onChange={handleFileChange}
className="form-control"
/>
{errors.image && (
<div className="alert alert-danger mt-2">
{errors.image[0]}
</div>
)}
</div>
<div className="mb-3">
<label className="form-label fw-bold">Title</label>
<input
type="text"
className="form-control"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title Post"
/>
{errors.title && (
<div className="alert alert-danger mt-2">
{errors.title[0]}
</div>
)}
</div>
<div className="mb-3">
<label className="form-label fw-bold">Content</label>
<textarea
className="form-control"
value={content}
onChange={(e) => setContent(e.target.value)}
rows="5"
placeholder="Content Post"
></textarea>
{errors.content && (
<div className="alert alert-danger mt-2">
{errors.content[0]}
</div>
)}
</div>
<button
type="submit"
className="btn btn-md btn-primary rounded-sm shadow border-0"
>
Update
</button>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
Dari perubahan kode di atas, pertama kita import hook useState dan useEffect dari Preact Hooks.
//import useState and useEffect
import { useState, useEffect } from "preact/hooks";
Kemudian kita import route dari Preact Router dan services API yang sudah kita buat sebelumnya.
//import route
import { route } from "preact-router";
//import API
import api from "../../services/api";
Di dalam function component PostEdit, kita memberikan props yang bernama id. Props tersebut akan berisi nilai ID yang diambil dari URL, yang mana nantinya akan kita gunakan sebagai acuan mengambil data post berdasarkan ID.
export default function PostEdit({ id }) {
//...
}
Setelah itu, kita buat beberapa state yang nanti digunakan untuk menampung data.
/define state
const [image, setImage] = useState("");
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
//state validation
const [errors, setErrors] = useState([]);
Kemudian kita membuat method baru dengan nama fetchDetailPost.
//method fetchDetailPost
const fetchDetailPost = async () => {
//...
}
Di dalam method di atas, kita melakukan fetching data ke dalam backend menggunakan Rest API dengan endpoint /api/posts/:id dan method yang digunakan adalah GET.
await api.get(`/api/posts/${id}`).then((response) => {
//...
}
Jika proses fetch data berhasil dilakukan, maka kita akan assign atau memasukkan response data yang di dapatkan dari Rest API ke dalam state title dan content.
//assign to state
setTitle(response.data.data.title);
setContent(response.data.data.content);
Agar method fetchDetailPost bisa dijalankan saat halaman diakses, maka kita perlu memanggilnya di dalam hook useEffect.
//hook useEffect
useEffect(() => {
//call method "fetchDetailPost"
fetchDetailPost();
}, []);
Setelah itu, kita buat method lagi dengan nama handleFileChange. Method ini akan digunakan untuk melakukan assign value gambar yang akan diupload ke dalam state image.
//method handle file change
const handleFileChange = (e) => {
setImage(e.target.files[0]);
};
Dan kita buat method lagi dengan nama updatePost. Method ini akan dijalankan saat form disubmit.
<form onSubmit={updatePost}>
//...
</form>
//method update post
const updatePost = async (e) => {
//...
}
Di dalam method tersebut, kita melakukan inisialisasi FormData dan melakukan append state-state ke dalam FormData tersebut.
//append data
formData.append("image", image);
formData.append("title", title);
formData.append("content", content);
formData.append("_method", "PUT");
DI atas, kita menambahkan _method dengan value PUT, yang menandakan kita sedang melakukan proses update data.
Setelah data berhasil dimasukkan di dalam FormData, maka kita tinggal mengirimkannya ke backend menggunakan Rest API dengan endpoint /api/posts/:id dan method yang digunakan adalah POST.
await api.post(`/api/posts/${id}`, formData)
Jika data berhasil diubah, maka kita akan lakukan redirect ke halaman post index menggunakan route.
route("/posts", true);
Jika proses update gagal dilakukan, maka kita akan assign response error validasi dari backend ke dalam state errors.
//set errors response to state "errors"
setErrors(error.response.data);
Langkah 2 - Uji Coba Edit dan Update di Preact
Silahkan teman-teman klik button EDIT disalah satu data yang dimiliki, jika berhasil maka akan menampilkan halaman edit seperti berikut ini.
Silahkan ubah isi di dalamnya dan klik button Update, jika berhasil maka kita akan diarahkan ke halaman post index dengan data yang telah diperbarui.
Kesimpulan
Pada artikel kali ini, kita telah belajar bagaimana cara membuat proses edit dan update data di Preact menggunakan Rest API.
Pada artikel berikutnya, kita semua akan belajar bagaimana cara membuat proses delete data di Preact menggunakan Rest API.
Terima Kasih