Manajemen Query & Ekstraksi Data Efisien Di Svelte Kit Di Laravel 9 Dan Svelte — Part 4

Membangun aplikasi web di era modern memerlukan pondasi yang kokoh. Framework modern memberikan fleksibilitas luar biasa bagi developer untuk menghadirkan fitur kompleks secara cepat tanpa mengabaikan aspek keamanan dan keandalan sistem.

Tahapan Implementasi & Walkthrough Kode

Berikut adalah langkah demi langkah teknis yang dapat Anda ikuti langsung pada codebase Anda:

Tahap 1: Penulisan Kode & Konfigurasi

npm install axios@0.27.2

Tahap 2: Penulisan Kode & Konfigurasi

<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>

Tahap 3: Penulisan Kode & Konfigurasi

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

Tahap 4: Penulisan Kode & Konfigurasi

//import axios
import axios from 'axios';

Tahap 5: Penulisan Kode & Konfigurasi

//define variable
let posts = [];

Tahap 6: Penulisan Kode & Konfigurasi

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

Tahap 7: Penulisan Kode & Konfigurasi

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

Tahap 8: Penulisan Kode & Konfigurasi

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

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

Tahap 9: Penulisan Kode & Konfigurasi

{#each posts as post}

	//...
	
{/each}

Kesimpulan

Dengan mengikuti langkah-langkah terstruktur di atas, implementasi modul Anda akan jauh lebih rapi, aman dari bug umum, serta siap diskalakan ke lingkungan produksi.

Nantikan artikel tutorial praktis lainnya seputar fullstack development, microservices, dan otomasi AI di Blog Engineering SiHubung. Selamat mencoba!