Panduan praktis dan terstruktur mengenai panduan laravel 9 dan svelte: edit dan update data di svelte kit (part 6) berstandar enterprise. Pelajari konsep, implementasi kode modern, dan tips arsitektur enterprise siap produksi.
Selamat datang di seri tutorial engineering SiHubung! Pada artikel ini, kita akan membedah secara komprehensif implementasi Panduan Laravel 9 Dan Svelte: Edit Dan Update Data Di Svelte Kit (Part 6) Berstandar Enterprise dengan standar kode bersih (clean code), performa tinggi, dan arsitektur siap produksi.
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
{#each posts as post}
<tr>
//...
<td class="text-center">
</td>
</tr>
{/each}Tahap 2: Penulisan Kode & Konfigurasi
{#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}Tahap 3: Penulisan Kode & Konfigurasi
<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>Tahap 4: Penulisan Kode & Konfigurasi
//import hook onMount
import { onMount } from 'svelte';Tahap 5: Penulisan Kode & Konfigurasi
//page params
import { page } from '$app/stores';Tahap 6: Penulisan Kode & Konfigurasi
//import Goto navigation
import { goto } from '$app/navigation';Tahap 7: Penulisan Kode & Konfigurasi
//import axios
import axios from 'axios';Tahap 8: Penulisan Kode & Konfigurasi
//define variable
let files = '';
let title = '';
let content = '';
let validation = {};Tahap 9: Penulisan Kode & Konfigurasi
//method fetchDataPost
const fetchDataPost = async () => {
//...
}Tahap 10: Penulisan Kode & Konfigurasi
//fetch data from Rest API
await axios.get(`http://localhost:8000/api/posts/${$page.params.id}`)Tahap 11: Penulisan Kode & Konfigurasi
//assign response data to variable
title = response.data.data.title;
content = response.data.data.content;Tahap 12: Penulisan Kode & Konfigurasi
//run hook "onMount"
onMount(async () => {
//call method "fetchDataPost"
fetchDataPost();
})Tahap 13: Penulisan Kode & Konfigurasi
<form on:submit|preventDefault={updatePost}>
//...
</form>Tahap 14: Penulisan Kode & Konfigurasi
//method "updatePost"
const updatePost = ( async () => {
//...
}Tahap 15: Penulisan Kode & Konfigurasi
//define formData
const formData = new FormData();Tahap 16: Penulisan Kode & Konfigurasi
//append data to "formData"
formData.append('image', files[0]);
formData.append('title', title);
formData.append('content', content);
formData.append('_method', 'PATCH');Tahap 17: Penulisan Kode & Konfigurasi
//send data to server
await axios.post(`http://localhost:8000/api/posts/${$page.params.id}`, formData)Tahap 18: Penulisan Kode & Konfigurasi
//redirect
goto("/posts");Tahap 19: Penulisan Kode & Konfigurasi
//assign validation on variable
validation = error.response.data
💡 Tips Rekayasa Perangkat Lunak (SiHubung Engineering Best Practice)
Selalu gunakan pendekatan deklaratif, validasi input seawal mungkin di boundary layer, dan lakukan logging terstruktur untuk memudahkan observability ketika sistem dijalankan di lingkungan cloud produksi.
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!
