Halo teman-teman semuanya, di artikel sebelumnya kita semua telah belajar bagaimana cara menampilkan data di dalam Nuxt Js dari Rest API, maka di artikel kali ini kita semua akan belajar bagaimana cara memasukkan data ke dalam database menggunakan Nuxt Js.
Langkah 1 - Membuat Page Create Post
Sekarang kita akan belajar bagaimana cara membuat page atau halaman baru di dalam Nuxt Js, yang mana halaman ini akan kita gunakan untuk menampilkan form input data post.
Silahkan buat folder baru dengan nama create di dalam folder pages/post dan di dalam folder create silahkan buat file baru dengan nama index.vue dan masukkan kode berikut ini :
<template>
<b-container fluid="md" class="mt-5 mb-5">
<b-row>
<b-col md="12">
<b-card class="shadow-md border-0 rounded-lg">
<h5>TAMBAH POST</h5>
<hr>
<b-form @submit="store">
<b-form-group label="Title Post">
<b-form-input type="text" v-model="post.title" :class="{ 'is-invalid': validation.title }"
placeholder="masukkan title post">
</b-form-input>
<div v-if="validation.title" class="mt-2">
<b-alert show variant="danger">{{ validation.title[0] }}</b-alert>
</div>
</b-form-group>
<b-form-group label="Content Post">
<b-form-textarea id="textarea" v-model="post.content" :class="{ 'is-invalid': validation.title }"
placeholder="masukkan content post" rows="5">
</b-form-textarea>
<div v-if="validation.content" class="mt-2">
<b-alert show variant="danger">{{ validation.content[0] }}</b-alert>
</div>
</b-form-group>
<b-button type="submit" variant="primary">SIMPAN</b-button>
</b-form>
</b-card>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
data() {
return {
//state post
post: {
title: '',
content: ''
},
//state validation
validation: []
}
},
methods: {
//method "store"
async store(e) {
e.preventDefault()
//send data ke Rest API
await this.$axios.post('/api/posts', {
//data yang dikirim ke server
title: this.post.title,
content: this.post.content
})
.then(() => {
//redirect ke route "post"
this.$router.push({
name: 'post'
})
})
.catch(error => {
//assign validation
this.validation = error.response.data
})
}
}
}
</script>
<style>
</style>
Dari penambahan kode di atas, pertama kita buat 2 state baru di dalam data function, yaitu post dan validation. Untuk state post kita buat sebagai array yang di dalamnya ada sebuah key lagi, yaitu title dan content.
State post akan kita gunakan untuk menampung data yang dikirim dari form, sedangkan untuk state validation akan kita gunakan untuk menyimpan data error validasi yang di dapatkan dari Rest API.
data() {
return {
//state post
post: {
title: '',
content: ''
},
//state validation
validation: []
}
},
Kemudian kita buat sebuah method yang bernama store dan method ini kita set agar menjadi asynchronus menggunakan async, yang mana di dalamnya akan melakukan send data title dan content yang di dapatkan dari form ke dalam server atau database. Dan method store akan dijalankan ketika user melakukan submit di dalam form.
//send data ke Rest API
await this.$axios.post('/api/posts', {
//data yang dikirim ke server
title: this.post.title,
content: this.post.content
})
Di atas kita melakukan send data ke dalam endpoint /api/posts dengan Axios dan untuk method-nya adalah POST. Dan untuk data yang dikirim adalah title dan content.
Jika proses send data berhasil, maka kita akan di arahkan ke dalam sebuah route yang bernama post atau di redirect ke halaman index post.
.then(() => {
//redirect ke route "post"
this.$router.push({
name: 'post'
})
})
Tapi, jika data disimpan atau validasi tidak terpenuhi, maka akan melakukan assign response error ke dalam state validation.
.catch(error => {
//assign validation
this.validation = error.response.data
})
Dan untuk menampilkan validasinya di dalam template kita bisa seperti berikut ini :
<div v-if="validation.title" class="mt-2">
<b-alert show variant="danger">{{ validation.title[0] }}</b-alert>
</div>
Langkah 2 - Uji Coba Input Data di Nuxt Js
Sekarang silahkan klik button TAMBAH atau bisa ke link http://localhost:3000/post/create dan jika berhasil, maka kurang lebih seperti berikut ini :
Sekarang silahkan klik button SIMPAN tanpa mengisi data apapun, maka kita akan mendapatkan error validasi yang di dapatkan dari Rest API. Kurang lebih seperti berikut ini :
Dan sekarang silahkan uji coba dengan memasukkan data title dan content dan jika berhasil maka kita akan di arahkan ke halaman post dengan menampilkan data yang barusan kita input.
Sampai disini pembahasan bagaimana cara memasukkan data di dalam Nuxt Js menggunakan Rest API Laravel. Di artikel selanjutnya kita semua akan belajar bagaimana cara membuat edit dan update data di dalam Nuxt Js.
Terima Kasih