Halo teman-teman semuanya, di artikel sebelumnya kita telah banyak belajar, seperti menampilkan data, melakukan insert data, melakukan proses edit beserta update. Dan sekarang kita akan belajar bagaimana cara melakukan proses delete data di dalam Svelte menggunakan Rest API.
Langakah 1 - Menambahkan Method Delete Post
Disini kita akan menambahkan sebuah button DELETE dan method untuk melakukan proses delete data post. Dan kita akan menambahkannya di dalam halaman posts index.
Silahkan buka file src/routes/posts/index.svelte, kemudian ubah semua kode-nya menjadi seperti berikut ini.
<script>
//import hook onMount
import { onMount } from 'svelte';
//import axios
import axios from 'axios';
//define variable
let posts = [];
//method "fetchDataPosts"
const fetchDataPosts = async () => {
//fetch data from Rest API
await axios.get('http://localhost:8000/api/posts')
.then(response => {
//assign response data to variable posts
posts = response.data.data.data
})
}
//run hook "onMount"
onMount(async () => {
//call method "fetchDataPosts"
fetchDataPosts();
});
//method "deletePost"
const deletePost = async (id) => {
await axios.delete(`http://localhost:8000/api/posts/${id}`)
.then(() => {
//call method "fetchDataPosts"
fetchDataPosts();
})
};
</script>
<div class="card border-0 rounded-3 shadow-sm">
<div class="card-body">
<a sveltekit:prefetch href="/posts/create" class="btn btn-success btn-md shadow-sm rounded-3 border-0 mb-3">TAMBAH</a>
<table class="table table-striped table-bordered mb-0">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Title</th>
<th scope="col">Content</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{#each posts as post}
<tr>
<td class="text-center">
<!-- svelte-ignore a11y-missing-attribute -->
<img src={`http://localhost:8000/storage/posts/${post.image}`} width="150" class="rounded-3"/>
</td>
<td>{ post.title }</td>
<td>{ post.content }</td>
<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>
<button on:click={() => deletePost(post.id)} class="btn btn-sm btn-danger border-0 shadow-sm mb-3">DELETE</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</div>
Dari penambahan kode di atas, pertama kita tambahkan button DELETE.
<button on:click={() => deletePost(post.id)} class="btn btn-sm btn-danger border-0 shadow-sm mb-3">DELETE</button>
Di dalam button di atas, kita berikan event on:click yang mengarah ke dalam method yang bernama deletePost dan di dalamnya kita berikan parameter ID dari data post.
Dan di dalam JavaScript, kita menambahkan method deletePost.
//method "deletePost"
const deletePost = async (id) => {
//...
}
Di dalamnya kita melakukan HTTP request ke dalam server / backend untuk proses delete data. Disini kita mengirimkan ke dalam endpoint http://localhost:8000/api/posts/:id menggunakan Axios dengan method DELETE.
await axios.delete(`http://localhost:8000/api/posts/${id}`)
Jika data berhasil di delete, selanjutnya kita panggil method fetchDataPosts, tujuannya agar data posts kembali diperbarui dengan data yang terbaru.
//call method "fetchDataPosts"
fetchDataPosts();
Langkah 2 - Uji Coba Delete Post
Silahkan buka halaman posts index, maka kita akan mendapatkan button DELETE. Kurang lebih seperti berikut ini.
Silahkan klik salah satu data yang teman-teman miliki, jika berhasil maka data akan berhasil dihapus tanpa perlu melakukan reload halaman.
Kurang lebih seperti itu cara melakukan proses hapus data di dalam Svelte dengan API yang dibuat di dalam Laravel. Jika teman-teman mangalami kendala saat praktek atau mengikutinya, maka silahkan bisa berrtanya pada kolom komentar atau di group telegram santrikoding.
SOURCE CODE : https://github.com/SantriKoding-com/Svelte-SPA-CRUD
Terima Kasih.