Halo teman-teman semuanya, pada artikel sebelumnya kita telah belajar bagaiamana cara melakukan proses insert data baru di dalam Svelte. Dan di artikel kali ini kita semua akan belajar bagaimana cara melakukan proses edit dan update data di dalam Svelte.
Langkah 1 - Mengaktifkan Link Edit
Disini, kita pertama-tama akan menambahkan sebuah button baru di dalam halaman posts index. Dimana ketika button tersebut diklik, maka akan menuju ke dalam form edit data.
Silahkan buka file src/routes/posts/index.svelte, kemudian cari kode berikut ini.
{#each posts as post}
<tr>
//...
<td class="text-center">
</td>
</tr>
{/each}
Dan ubahlah menjadi seperti berikut ini.
{#each posts as post}
<tr>
//....
<td class="text-center">
<a sveltekit:prefetch href={`/posts/edit/${post.id}`} class="btn btn-sm btn-primary border-0 shadow-sm mb-3">EDIT</a>
</td>
</tr>
{/each}
Di atas, kita menambahkan button EDIT dengan mangarahkan link / URL-nya ke dalam /posts/edit/:id. Sekarang, jika halaman posts index kita lihat, maka akan muncul button EDIT seperti berikut ini.
Langkah 2 - Membuat Halaman Edit Post
Setelah berhasil menambahkan link untuk proses edit data, sekarang kita akan lanjutkan membuat halaman page / view-nya di dalam Svelte.
Silahkan buat folder baru dengan nama edit di dalam folder src/routes/posts dan di dalam folder edit silahkan buat file baru dengan nama [id].svelte, kemudian masukkan kode berikut ini di dalamnya.
<script>
//import hook onMount
import { onMount } from 'svelte';
//page params
import { page } from '$app/stores';
//import Goto navigation
import { goto } from '$app/navigation';
//import axios
import axios from 'axios';
//define variable
let files = '' ;
let title = '';
let content = '';
let validation = {};
//method fetchDataPost
const fetchDataPost = async () => {
//fetch data from Rest API
await axios.get(`http://localhost:8000/api/posts/${$page.params.id}`)
.then(response => {
//assign response data to variable
title = response.data.data.title;
content = response.data.data.content;
});
}
//run hook "onMount"
onMount(async () => {
//call method "fetchDataPost"
fetchDataPost();
})
//method "updatePost"
const updatePost = ( async () => {
//define formData
const formData = new FormData();
//append data to "formData"
formData.append('image', files[0]);
formData.append('title', title);
formData.append('content', content);
formData.append('_method', 'PATCH');
//send data to server
await axios.post(`http://localhost:8000/api/posts/${$page.params.id}`, formData)
.then(() => {
//redirect
goto("/posts");
})
.catch((error) => {
//assign validation on variable
validation = error.response.data
})
});
</script>
<div class="card border-0 rounded-3 shadow-sm">
<div class="card-body">
<form on:submit|preventDefault={updatePost}>
<div class="form-group mb-3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="form-label fw-bold">Image</label>
<input type="file" accept="image/png, image/jpeg" bind:files class="form-control"/>
</div>
{#if validation.image}
<!-- svelte-ignore invalid-html-attribute -->
<div class="alert alert-danger">
{validation.image}
</div>
{/if}
<div class="form-group mb-3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="form-label fw-bold">TITLE</label>
<input class="form-control" bind:value={title} type="text" placeholder="Masukkan Title" />
</div>
{#if validation.title}
<!-- svelte-ignore invalid-html-attribute -->
<div class="alert alert-danger">
{validation.title}
</div>
{/if}
<div class="form-group mb-3">
<!-- svelte-ignore a11y-label-has-associated-control -->
<label class="form-label fw-bold">CONTENT</label>
<textarea class="form-control" rows={3} placeholder="Masukkan Content" bind:value={content} />
</div>
{#if validation.content}
<!-- svelte-ignore invalid-html-attribute -->
<div class="alert alert-danger">
{validation.content}
</div>
{/if}
<button class="btn btn-primary border-0 shadow-sm" type="submit">
UPDATE
</button>
</form>
</div>
</div>
Dari penambahan kode di atas, pertama kita import hook onMount dari Svelte.
//import hook onMount
import { onMount } from 'svelte';
Kemudian kita import page dari store. Ini akan kita manfaatkan untuk mendapatkan sebuah parameter di dalam URL browser.
//page params
import { page } from '$app/stores';
Setelah itu, kita import goto dari navigation. Ini akan kita manfaatkan untuk melakukan redirect setelah data berhasil diupdate.
//import Goto navigation
import { goto } from '$app/navigation';
Karena nanti akan melakukan HTTP request ke dalam server / backend. Maka kita perlu melakukan import Axios.
//import axios
import axios from 'axios';
Selanjutnya, kita melakukan define beberapa variable.
//define variable
let files = '';
let title = '';
let content = '';
let validation = {};
Kemudian kita buat method baru dengan nama fetchDataPost.
//method fetchDataPost
const fetchDataPost = async () => {
//...
}
Di dalamnya kita melakukan HTTP request ke dalam server / backend menggunakan Axiosn dengan endpoint http://localhost:8000/api/posts/:id dan untuk method-nya adalah GET.
//fetch data from Rest API
await axios.get(`http://localhost:8000/api/posts/${$page.params.id}`)
$page.params.id akan mengambil nilai id yang ada di dalam parameter URL. Dan jika data berhasil di dapatkan dari Rest API, maka kita akan assign atau masukkan ke dalam variable title dan content.
//assign response data to variable
title = response.data.data.title;
content = response.data.data.content;
Agar method fetchDataPost dapat dijalankan pertama kali saat halaman diakses, maka kita perlu memanggilnya di dalam hook onMount.
//run hook "onMount"
onMount(async () => {
//call method "fetchDataPost"
fetchDataPost();
})
Kemudian kita buat method lagi dengan nama updatePost. Method tersebut akan dijalankan ketika form disubmit.
<form on:submit|preventDefault={updatePost}>
//...
</form>
//method "updatePost"
const updatePost = ( async () => {
//...
}
Di dalam method updatePost, pertama kita deine FormData terlebih dahulu. Ini akan kita manfaatkan untuk menampung data dari form sebelum dikirimkan ke dalam server / backend melalui Rest API.
//define formData
const formData = new FormData();
Kemudian kita append beberapa data yang di dapatkan dari form yang disimpan di dalam variable yang sudah kita buat sebelumnya ke dalam formData.
//append data to "formData"
formData.append('image', files[0]);
formData.append('title', title);
formData.append('content', content);
formData.append('_method', 'PATCH');
Di atas, karena kita melakukan proses update data, maka kita tambahkan key _method dengan value PATCH di dalam append formData.
Setelah data berhasil disimpan di dalam formData, selanjutnya kita akan kirimkan ke dalam server / backend menggunakan Axios ke endpoint http://localhost:8000/api/posts/:id dengan method POST.
//send data to server
await axios.post(`http://localhost:8000/api/posts/${$page.params.id}`, formData)
Jika data berhasil diupdate, maka kita akan redirect ke dalam URL /posts menggunakan goto.
//redirect
goto("/posts");
Tapi, jika data gagal diupdate, maka kita akan assign error validasi ke dalam variable validation.
//assign validation on variable
validation = error.response.data
Langkah 3 - Uji Coba Edit dan Update Data
Silahkan klik button EDIT di salah satu data yang teman-teman miliki, jika berhasil maka akan menampilkan halaman form edit data, kurang lebih seperti berikut ini.
Dan silahkan disesuaikan data yang akan diupdate, kemudian klik button UPDATE. Jika berhasil maka kita akan diarahkan ke dalam halaman posts index dengan data yang telah diperbarui.
Sampai disini pembahasan bagaimana cara melakukan proses edit dan update data di dalam Svelte menggunakn Rest API. Di artikel selanjutnya kita akan belajar bagaimana cara melakukan proses hapus data di dalam Svelte menggunakan Rest API.
Terima Kasih