Halo teman-teman semuanya, di artikel sebelumnya kita semua telah belajar menampilkan data di Vue Js dari RESTful API menggunakan Composition API, sekarang kita akan belajar bersama-sama untuk membuat proses input data ke dalam database menggunakan Vue Js dan Composition API.
Langkah 1 - Input Data Post
Sekarang, kita akan melakukan perubahan kode yang ada di dalam view/component post create. SIlahkan buka file src/views/post/Create.vue kemudian ubah semua kode-nya menjadi seperti berikut ini :
<template>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h4>TAMBAH POST</h4>
<hr>
<form @submit.prevent="store">
<div class="form-group">
<label for="title" class="font-weight-bold">TITLE</label>
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Judul Post">
<!-- validation -->
<div v-if="validation.title" class="mt-2 alert alert-danger">
{{ validation.title[0] }}
</div>
</div>
<div class="form-group">
<label for="content" class="font-weight-bold">CONTENT</label>
<textarea class="form-control" rows="4" v-model="post.content" placeholder="Masukkan Konten Post"></textarea>
<!-- validation -->
<div v-if="validation.content" class="mt-2 alert alert-danger">
{{ validation.content[0] }}
</div>
</div>
<button type="submit" class="btn btn-primary">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:8000/api/post', {
title: title,
content: content
}).then(() => {
//redirect ke post index
router.push({
name: 'post.index'
})
}).catch(error => {
//assign state validation with error
validation.value = error.response.data
})
}
//return
return {
post,
validation,
router,
store
}
}
}
</script>
<style>
body{
background: lightgray;
}
</style>
Di atas, pertama kita import Reactivity API dari Vue.
import { reactive, ref } from 'vue'
Kemudian, kita import juga Vue Router.
import { useRouter } from 'vue-router'
Dan kita import juga axios.
import axios from 'axios'
Kemudian, di dalam setup kita define sebuah state dengan nama post, dimana state ini kita set menggunakan reactive.
//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 validation
const validation = ref([])
State di atas, akan di assign sebuah response error validation dari RESTful API Laravel.
Dan, untuk menggunakan Vue Router di dalam Composition API, kita menggunakan kode seperti berikut ini :
//vue router
const router = useRouter()
Setelah itu, kita buat sebuah method dengan nama store, method ini akan di panggil jika form di submit.
<form @submit.prevent="store">
Jika form di dalam template di submit, maka akan memanggil method store.
//method store
function store() {
let title = post.title
let content = post.content
axios.post('http://localhost:8000/api/post', {
title: title,
content: content
}).then(() => {
//redirect ke post index
router.push({
name: 'post.index'
})
}).catch(error => {
//assign state validation with error
validation.value = error.response.data
})
}
Di atas, kita melakukan send data ke dalam API Laravel dengan data title dan content. Kemudian jika data berhasil disimpan, kita akan di arahkan / redirect ke route dengan nama post.index.
//redirect ke post index
router.push({
name: 'post.index'
})
Jika data gagal disimpan/belum di isi, maka response error akan di assign ke state validation.
//assign state validation with error
validation.value = error.response.data
Kemudian, di dalam template, untuk memanggil state post kita gunakan directive v-model, kurang lebih seperti berikut ini :
<input type="text" class="form-control" v-model="post.title" placeholder="Masukkan Judul Post">
Dan untuk menampilkan validation, kita menggunakan kode seperti berikut ini :
<div v-if="validation.title" class="mt-2 alert alert-danger">
{{ validation.title[0] }}
</div>
Di atas, kita cek terlebih dahulu, apakah state validation memiliki key title, jika iya artinya ada error validation tentang title dari server. Kemudian untuk menampilkan pesan errornya kita menggunakan kode seperti berikut ini :
{{ validation.title[0] }}
Di atas, karena message terdapat di array ke 0, maka kita memanggilnya jadi seperti itu.
Langkah 2 - Uji COba Input Data
Sekarang, kita akan uji coba untuk memasukkan data ke database menggunakan Vue Js, silahkan buka di http://localhost:8080/create jika berhasil tampilannya seperti berikut ini :
Silahkan klik SIMPAN tanpa mengisi data apapun, maka kita akan mendapatkan error validation yang di dapatkan dari Laravel, Kurang lebih seperti berikut ini :
Sekarang, silahkan isi data title dan content jika berhasil, maka kita akan di arahkan ke halaman index post lagi.
Di atas, kita telah berhasil melakukan input data ke dalam database menggunakan Vue Js dan RESTful API, di artikel selanjutnya kita semua akan belajar untuk menampilkan data yang akan di edit dan kemudian mengupdate-nya.
Terima Kasih.
EBOOK - Membangun Website Sekolah Degan Laravel dan Vue Js : https://santrikoding.com/ebook/laravel-vue
EBOOK - Membangun Toko Online dengan Laravel dan Livewire : https://santrikoding.com/ebook/toko-online-laravel-livewire