Tutorial CRUD Laravel 7 & Vue JS #5 : Proses Edit & Update Data - Halo teman-teman semuanya, pada artikel kali ini kita semua akan membuat proses edit dan update data ke dalam database menggunakan Vue JS dan API yang sudah kita buat sebelumnya.
Di artikel sebelumnya kita sudah berhasil memasukkan data menggunakan API di Vue JS menggunakan bantuan Axios. Oke langsung saja kita mulai.
Langkah 1 - Proses Membuat Edit & Update
Silahkan teman-teman buka file resources/js/components/posts/Edit.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">EDIT POST</div>
<div class="card-body">
<form @submit.prevent="PostUpdate">
<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">UPDATE</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: []
}
},
created() {
let uri = `http://localhost:8000/api/posts/${this.$route.params.id}`;
this.axios.get(uri).then((response) => {
this.post = response.data.data;
});
},
methods: {
PostUpdate() {
let uri = `http://localhost:8000/api/posts/update/${this.$route.params.id}`;
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 untuk menampilkan data dari hasil response API
-
validation - kita gunakan untuk menampilkan response error dari server.
Untuk proses mendapatkan data dari API disini kita menggunakan created( ), di dalamnya kita menggail IP dengan parameter ID yang di dapatkan dari URL.
created() {
let uri = `http://localhost:8000/api/posts/${this.$route.params.id}`;
this.axios.get(uri).then((response) => {
this.post = response.data.data;
});
}
Kemudian, untuk proses update data ke server, teman-teman bisa lihat di dalam methods dan didalamnya kita membuat function PostUpdate :
PostUpdate() {
let uri = `http://localhost:8000/api/posts/update/${this.$route.params.id}`;
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 edit :
KESIMPULAN
Pada artikel kali ini kita semua sudah berhasil membuat form untuk menampilkan data edit dan proses update data ke dalam database menggunakan API di Vue JS
Di artikel selanjutnya kita akan mencoba menghapus data dari database menggunakan API yang sudah kita buat dengan Laravel.
Terima Kasih.