Tutorial Laravel 9 dan Svelte #4 : Menampilkan Data di Svelte Kit

• Langkah 1 - Install Axios
• Langkah 2 - Menampilkan Data di Svelte KIT
• Langkah 3 - Uji Coba Menampilkan Data

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar menambahkan CSS Bootstrap dan Layouting di dalam Svelte KIT. Dan pada artikel kali ini kita semua akan belajar bagaimana cara menampilkan data di dalam Svelte, dimana data tersebut kita dapatkan dari Rest API yang dibuat di dalam Laravel.

Langkah 1 - Install Axios

Pertama, kita akan melakukan installasi library yang bernama Axios. Library ini akan kita gunakan untuk melakukan HTTP request ke server / backend dengan lebih mudah.

Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Svelte-nya.

npm install axios@0.27.2

Silahkan tunggu proses installasinya sampai selesai.

Langkah 2 - Menampilkan Data di Svelte KIT

Sekarang kita akan belajar bagaimana cara menampilkan data di dalam Svelte. Silahkan buat folder baru dengan nama posts di dalam folder src/routes. Dan di dalam folder posts silahkan buat file baru dengan nama index.svelte, kemudian masukkan kode berikut ini di dalamnya.

<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();
    });

</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">
                        </td>
                    </tr>
                {/each}
            </tbody>
        </table>
    </div>
</div>

Dari penambahan kode di atas, pertama kita import hook onMount dari Svelte. Hook tersebut yang akan dijalankan ketika component pertama kali di mount / dipasang / diakses. Ini akan kita manfaatkan untuk melakukan fetch data ke Rest API nantinya.

//import hook onMount
import { onMount } from 'svelte';

Setelah itu, kita import library Axios. Karena kita akan gunakan untuk melakukan HTTP request ke dalam server.

//import axios
import axios from 'axios';

Kemudian kita define sebuah variable baru dengan nama posts dan kita berikan default value aarray kosong. Variable ini yang nanti akan kita gunakan untuk menampung data yang di dapatkan dari Rest API.

//define variable
let posts = [];

Dan kita membuat sebuah method baru dengan nama fetchDataPosts. Di dalam method tersebut kita melakukan fetch ke dalam endpoint http://localhost:8000/api/posts menggunakan Axios dengan method GET.

//fetch data from Rest API
await axios.get('http://localhost:8000/api/posts')

Jika data berhasil di dapatkan, maka kita akan masukkan response data ke dalam variable posts yang sudah kita define sebelumnya.

//assign response data to variable posts
posts = response.data.data.data

Dan agar method fetchDataPosts bisa dijalankan pertama kali saat halaman diakses, maka kita perlu memanggilnya di dalam hook onMount.

//run hook "onMount"
onMount(async () => {

    //call method "fetchDataPosts"
    fetchDataPosts();
});

Kemudian di dalam template HTML, kita tinggal melakukan perulangan data yang ada di dalam variable posts menggunakan #each.

{#each posts as post}

	//...
	
{/each}

Langkah 3 - Uji Coba Menampilkan Data

Sekarang silahkan akses URL http://localhost:3000/posts atau klik menu POSTS yang ada di navbar dan jika berhasil, maka kita akan mendapatkan hasil seperti berikut ini.

Jika teman-teman belum menampilkan data apapun, bisa jadi di dalam database memang belum ada data-nya.

Sampai disini pembahasan bagaimana cara menampilkan data di dalam Svelte dari Rest API, di artikel selanjutnya kita akan belajar bagaimana cara membuat proses insert data post di dalam Svelte menggunakan Rest API.

Terima Kasih

• Membangun Aplikasi Kasir (Point of Sales) dengan Laravel, Inertia.js dan Vue.js : https://bit.ly/laravel-inertia-vue
• Membangun Website Toko Online Dengan Laravel, Nuxt.js (SSR + PWA) dan Payment Gateway : https://bit.ly/ebook-laravel-nuxt-js-payment-gateway