Halo teman-teman semuanya, di artikel sebelumnya kita telah belajar bagaimana cara melakukan proses menampilkan data dari Rest API yang kita buat di Express.js di dalam Vue.js. Di artikel kali ini kita akan belajar bersama-sama bagaimana cara melakukan proses insert data ke dalam database di dalam Vue.js menggunakan Rest API yang kita buat di Express.js.
Langkah 1 - Membuat Form dan Proses Insert Data
Sekarang kita akan mengubah isi dari view / component yang sudah kita buat sebelumnya. Silahkan buka file src/views/posts/Create.vue, kemudian ubah semua kode-nya menjadi seperti berikut ini :
<template>
<div class="container mt-custom">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>TAMBAH POST</h4>
<hr>
<div v-if="validation.errors" class="mt-2 alert alert-danger">
<ul class="mt-0 mb-0">
<li v-for="(error, index) in validation.errors" :key="index">{{ `${error.param} : ${error.msg}` }}</li>
</ul>
</div>
<form @submit.prevent="store">
<div class="form-group">
<label for="title" class="font-weight-bold mb-2">TITLE</label>
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Judul Post">
</div>
<div class="form-group mt-3">
<label for="content" class="font-weight-bold mb-2">CONTENT</label>
<textarea class="form-control" rows="4" v-model="post.content" placeholder="Masukkan Konten Post"></textarea>
</div>
<button type="submit" class="btn btn-primary mt-3">SIMPAN</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
export default {
setup() {
//state posts
const post = reactive({
title: '',
content: ''
})
//state validation
const validation = ref([])
//vue router
const router = useRouter()
//method store
function store() {
let title = post.title
let content = post.content
axios.post('http://localhost:3000/api/posts/store', {
title: title,
content: content
}).then(() => {
//redirect ke post index
router.push({
name: 'posts.index'
})
}).catch(error => {
//assign state validation with error
validation.value = error.response.data
})
}
//return
return {
post,
validation,
router,
store
}
}
}
</script>
Dari perubahan kode di atas, pertama kita melakukan import 2 Reactivity API dari Vue.js, yaitu reactive dan ref. Keduanya digunakan untuk membuat sebuah state menjadi reaktif.
import { reactive, ref } from 'vue'
Setelah itu, kita import hook useRouter dari Vue Router. Ini bertujuan agar kita dapat menggunakan Vue Router di dalam method setup atau Composition API.
import { useRouter } from 'vue-router'
Dan karena kita akan berhubungan dengan HTTP request, maka kita akan melakukan import Axios.
import axios from 'axios'
Kemudian, di dalam method setup kita define sebuah state dengan nama post, dimana state ini kita set menggunakan reactive yang nanti ditujjukan untuk menampung data yang di input di dalam form.
//state posts
const post = reactive({
title: '',
content: ''
})
reactive merupakan salah satu jenis Reactivity API, reactive digunakan untuk mengambil sebuah objek dan mengembalikan secara reaktif ke object aslinya.
kemudian, kita buat state validation dengan jenis ref. State ini akan di assign sebuah response error validation dari Rest API yang di dapatkan dari backend Express.js
//state validation
const validation = ref([])
Dan, untuk menggunakan Vue Router di dalam Composition API, kita menggunakan kode seperti berikut ini :
//vue router
const router = useRouter()
Jika kita perhatikan, di dalam template untuk form action kita arahkan ke dalam method / function yang bernama store.
<form @submit.prevent="store">
//...
</form>
Di dalam function store, pertama kita membuat 2 variable baru yang digunakan untuk menerima input dari form. Dan datanya diambil dari state post.
let title = post.title
let content = post.content
Setelah itu, kita kirimkan data tersebut ke dalam sebuah endpoint Rest API. Disini kita menggunakan Axios dengan method POST dan endpoint-nya adalah http://localhost:3000/api/posts/store.
axios.post('http://localhost:3000/api/posts/store', {
title: title,
content: content
})
Jika proses insert data berhasil dilakukan ke database, maka kita akan arahkan / redirect ke dalam route yang bernama post.index.
//redirect ke post index
router.push({
name: 'posts.index'
})
Tapi, jika proses insert data gagal dilakukan, maka kita akan lakukan assign ke dalam state validation dengan data response yang di dapatkan dari Rest API.
//assign state validation with error
validation.value = error.response.data
Dan untuk menampilkan error tersebut di dalam template, kurang lebih seperti berikut ini :
<div v-if="validation.errors" class="mt-2 alert alert-danger">
<ul class="mt-0 mb-0">
<li v-for="(error, index) in validation.errors" :key="index">{{ `${error.param} : ${error.msg}` }}</li>
</ul>
</div>
Kemudian, jangan lupa untuk return semua function yang ada di dalam setup.
//return
return {
post,
validation,
router,
store
}
Langkah 2 - Uji Coba Proses Insert Data
Sekarang kita akan lakukan proses uji coba memasukkan atau insert data ke dalam database di dalam Vue.js. Silahkan klik button TAMBAH POST atau ke link berikut ini http://localhost:8080/posts/create, jika berhasil maka akan menampilkan hasil seperti berikut ini :
Silahkan klik button SIMPAN tanpa mengisi data apapun. Jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :
Sekarang, silahkan masukkan data apapun di dalam input form. Jika berhasil maka kita akan diarahkan ke halaman post index dengan data yang baru saja ditambahkan.
Sampai disini pembasan bagaimana cara melakukan proses insert data di Vue.js menggunakan Rest API yang dibuat di Express.js. Di artikel selanjutnya kita semua akan belajar bagaimana cara membuat proses edit dan update data di dalam Vue.js.
Terima Kasih