Tutorial Laravel 9 dan Svelte #7 : Delete Data di Svelte Kit


Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Laravel 9 dan Svelte #7 : Delete Data di Svelte Kit

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.



Fika Ridaul Maulayya
Full-Stack Web Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami