Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar bagaimana cara menampilkan data di Svelte menggunakan Rest API dari Laravel. Sekarang kita akan lanjutkan belajar bagaimana cara melakukan proses insert data di Svelete menggunakan Rest API dan kita juga akan belajar melakukan proses upload gambar.
Langkah 1 - Membuat Halaman Create Post
Sekarang kita akan membuat halaman yang nanti kita gunakan untuk menampilkan form input data dan sekaligus membuat proses insert-nya ke dalam database melalui Rest API.
Silahkan buat folder baru dengan nama create di dalam folder src/routes/posts dan di dalam folder create silahkan buat file baru dengan nama index.svelte, kemudian masukkan kode berikut ini di dalamnya.
<script>
//import axios
import axios from 'axios';
//import Goto navigation
import { goto } from '$app/navigation';
//define variable
let files = '' ;
let title = '';
let content = '';
let validation = {};
//method "storePost"
const storePost = ( async () => {
//define formData
const formData = new FormData();
//append data to "formData"
formData.append('image', files[0]);
formData.append('title', title);
formData.append('content', content);
//send data to server
await axios.post('http://localhost:8000/api/posts', 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={storePost}>
<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">
SIMPAN
</button>
</form>
</div>
</div>
Dari penambahan kode di atas, pertama kita import Axios terlebih dahulu. Karena kita akan gunakan untuk melakukan HTTP request ke server melalui Rest API.
//import axios
import axios from 'axios';
Kemudian kita import goto dari navigation. Ini akan kita gunakan untuk melakukan redirect atau berpindah halaman setelah proses insert berhasil dilakukan.
//import Goto navigation
import { goto } from '$app/navigation';
Setelah itu, kita define beberapa variable yang nanti akan digunakan untuk menampung data yang diinputkan di dalam form.
//define variable
let files = '';
let title = '';
let content = '';
let validation = {};
Di bawahnya, kita membuat method baru dengan nama storePost. Method tersebut akan dijalankan ketika form disubmit.
<form on:submit|preventDefault={storePost}>
//...
</form>
//method "storePost"
const storePost = ( async () => {
//...
}
Di dalam method storePost, pertama kita deine FormData terlebih dahulu. Ini akan kita manfaatkan untuk menampung data dari form sebelum dikirimkan ke dalam server / backend melalui Rest API.
//define formData
const formData = new FormData();
Kemudian kita append beberapa data yang di dapatkan dari form yang disimpan di dalam variable yang sudah kita buat sebelumnya ke dalam formData.
//append data to "formData"
formData.append('image', files[0]);
formData.append('title', title);
formData.append('content', content);
Setelah data berhasil disimpan di dalam formData, selanjutnya kita akan kirimkan ke dalam server / backend menggunakan Axios ke endpoint http://localhost:8000/api/posts dengan method POST.
//send data to server
await axios.post('http://localhost:8000/api/posts', formData)
Jika proses insert data berhasil dilakukan, selanjutnya kita akan redirect ke dalam URL /posts menggunakan goto.
//redirect
goto("/posts");
Tapi, jika proses insert data gagal dilakukan, maka kita akan assign error response validasi ke dalam variable validation.
//assign validation on variable
validation = error.response.data
Dan untuk menampilkan validasi di dalam template / HMTL, kita bisa menggunakan {# if} ... {/if}. Kurang lebih seperti berikut ini.
{#if validation.title}
<!-- svelte-ignore invalid-html-attribute -->
<div class="alert alert-danger">
{validation.title}
</div>
{/if}
Dan untuk mendapatkan value yang ada di dalam input, kita bisa menggunakan bind:value={nama_variable}. Kurang lebih seperti ini contohnya.
<input class="form-control" bind:value={title} type="text" placeholder="Masukkan Title" />
Langkah 2 - Uji Coba Insert Data
Sekarang silahkan klik button TAMBAH yang ada pada halaman posts index, atau bisa ke URL berikut ini http://localhost:3000/posts/create, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini.
Silahkan klik button SIMPAN tanpa mengisi data apapun, maka kita akan mendapatkan validasi yang dikirimkan oleh controller, kurang lebih seperti berikut ini.
Dan sekarang, silahkan masukkan data gambar, title dan content, kemudian klik button SIMPAN. Jika berhasil maka kita akan di arahkan ke dalam halaman posts index dengan data yang baru saja kita inputkan.
Sampai disini pembahasan bagaimana cara melakukan proses insert data di dalam Svelte menggunakan Rest API yang dibuat di Laravel. Di artikel berikutnya kita akan belajar bagaimana cara melakukan proses edit dan update data ke dalam database menggunakan Svelte.
Terima Kasih