Tutorial CRUD Laravel 7 & Vue JS #4 : Proses Memasukkan Data - Halo teman-teman semuanya, di artikel kali ini kita semua akan belajar bagaimana cara memasukkan data menggunakan Vue JS dengan API yang sudah kita buat sebelumnya.
Di artikel sebelumnya kita sudah berhasil menampilkan data menggunakan API di Vue JS menggunakan bantuan Axios. Oke langsung saja kita mulai
Langkah 1 - Proses Memasukkan Data
Silahkan teman-teman buka file resources/js/components/posts/Create.vue dan silahkan masukkan kode berikut ini di dalamnya :
<template>
<div class="container mt-3">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card card-default">
<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 v-if="validation.title">
<div class="alert alert-danger mt-1" role="alert">
{{ validation.title[0] }}
</div>
</div>
</div>
<div class="form-group">
<label>KONTEN</label>
<textarea class="form-control" v-model="post.content" rows="5"
placeholder="Masukkan Konten"></textarea>
<div v-if="validation.content">
<div class="alert alert-danger mt-1" role="alert">
{{ validation.content[0] }}
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-md btn-success">SIMPAN</button>
<button type="reset" class="btn btn-md btn-danger">RESET</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
post: {},
validation: []
}
},
methods: {
PostStore() {
let uri = 'http://localhost:8000/api/posts/store';
this.axios.post(uri, this.post)
.then((response) => {
this.$router.push({
name: 'posts'
});
}).catch(error => {
this.validation = error.response.data.data;
});
}
}
}
</script>
Bisa teman-teman perhatikan dari kode di atas, disini kita membuat 2 data, yaitu
-
post - variabel ini akan kita gunakan di dalam form untuk membuat directive v-model.
-
validation - kita gunakan untuk menampilkan response error dari server.
Kemudian, untuk proses memasukkan data ke server, teman-teman bisa lihat di dalam methods dan didalamnya kita membuat function PostStore :
methods: {
PostStore() {
let uri = 'http://localhost:8000/api/posts/store';
this.axios.post(uri, this.post)
.then((response) => {
this.$router.push({
name: 'posts'
});
}).catch(error => {
this.validation = error.response.data.data; //response validation
});
}
}
Langkah 2 - Compile JavaScript
Terakhir, sebelum kita meilihat project kita, kita harus melakukan proses compile atau bundle file-file Vue JS kita ke dalam file app.js dengan bantuan Laravel MIX.
Silahkan teman-teman jalankan perintah di bawah ini untuk melakukan compile atau bundle :
npm run watch
Silahkan tunggu proses sampai selesai, ini akan memakan waktu lebih lama karena akan mengcompile semua file-file Vue dan JavaScript kita.
Langkah 3 - Mencoba Menjalankan Aplikasi
Oke, setelah proses compile selesai, silahkan sekarang teman-teman bisa jalankan laravel built in servernya dengan cara :
php artisan serve
Maka jika berhasil, kurang lebih tampilannya seperti berikut ini ketika teman-teman klik button tambah :
KESIMPULAN
Pada artikel kali ini kita semua sudah berhasil membuat form dan proses memasukkan data ke dalam database menggunakan API di Vue JS
Di artikel selanjutnya kita akan mencoba mengedit dan mengupdate data ke database menggunakan API dan kita akan menggunakan component yang sudah kita buat dengan Vue JS.
Terima Kasih.