Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara memasukkan data ke dalam database dengan Vue Js dan Restful API.
Jadi disini nanti kita akan membuat sebuah form yang mana jika form tersebut di simpan maka akan mengirimkan sebuah data ke server dengan menggunakan Restful API dan setelah itu data akan di masukkan ke dalam database. Dan kali ini kita juga akan belajar bagaimana caara membuat validation di Vue Js yang mudah di pelajari. Langsung saja.
Langkah 1 - Component Create Post
Silahkan teman-teman buka file src/components/posts/Create.vue kemudian ubah kodenya menjadi seperti berikut ini :
<template>
<div class="posts">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-12">
<div v-if="errors.length">
<div v-for="error in errors" :key="error.index" class="alert alert-danger mt-1" role="alert">
{{ error }}
</div>
</div>
<div class="card">
<div class="card-header">
TAMBAH POST
</div>
<div class="card-body">
<form @submit.prevent="PostStore">
<div class="form-group">
<label>TITLE</label>
<input type="text" class="form-control" v-model="post.title"
placeholder="Masukkan Title">
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea class="form-control" v-model="post.content" rows="5"
placeholder="Masukkan Konten"></textarea>
</div>
<button type="submit" class="btn btn-md btn-success mr-2">SIMPAN</button>
<button type="reset" class="btn btn-md btn-danger">RESET</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
post: {},
errors: []
}
},
methods: {
PostStore(e) {
if (this.post.title && this.post.content) {
axios.post('http://localhost:8080/api/post', this.post)
.then(() => {
this.$router.push({
name: 'posts'
});
}).catch(error => {
console.log(error.response);
});
}
this.errors = [];
if (!this.post.title) {
this.errors.push('Masukkan Title Post.');
}
if (!this.post.content) {
this.errors.push('Masukkan Konten Post.');
}
e.preventDefault();
}
}
}
</script>
Di atas di dalam data kita membuat 2 data array yaitu post dan error, untuk post array ini akan kita gunakan directive v-model di dalam inputan agar kita dapat mendapatkan value dari inputan tersebut. Dan untuk error array ini akan kita isi dengan list error nantinya.
data() {
return {
post: {},
errors: []
}
}
Di atas pada form action kita menggunakan directive @submit dan untuk methodnya kita arahkan ke PostStore, kemudian di dalam method PostStore kita membuat sebuah kondisi. Jika inputan title dan content ada isinya maka kita akan mengirimkan data tersebut menggunakan Axios dengan method POST ke dalam Restful API, setelah data berhasil dikirim ke server kita akan di arahkan ke router yang bernama posts.
if (this.post.title && this.post.content) {
axios.post('http://localhost:8080/api/post', this.post)
.then(() => {
this.$router.push({
name: 'posts'
});
}).catch(error => {
console.log(error.response);
});
}
Kemudian di dalam method PostStore kiita juga membuat kondisi jika title dan content tidak diisi maka kita akan push sebuah pesan ke dalam array error, kurang lebih seperti ini :
if (!this.post.title) {
this.errors.push('Masukkan Title Post.');
}
if (!this.post.content) {
this.errors.push('Masukkan Konten Post.');
}
Kemudian untuk menampilkan errornya teman-teman perhatikan pada template, kurang lebih seperti berikut ini :
<div v-if="errors.length">
<div v-for="error in errors" :key="error.index" class="alert alert-danger mt-1" role="alert">
{{ error }}
</div>
</div>
Jadi kita cek dulu apakah array error lenght ada isinya, jika ada maka akan kita lakukan perulangan untuk error tersebut dengan directive v-for.
Langkah 2 - Menjalankan Project Vue Js
Sekarang jika kita mencoba klik button tambah post maka kurang lebih tampilannya seperti berikut ini :
Sampai disini pembahasan tentang bagaimana cara memasukkan data ke dalam database menggunakan Restful API di Vue JS.
Source Code
CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API
Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter
Jika ada pertanyaan silahkan teman-teman bisa bertanya melalui kolom komentar dibawah.
Terima Kasih