Tutorial CRUD Laravel 7 & Vue JS #5 : Proses Edit & Update Data


Fika Ridaul Maulayya
I'm Fika Ridaul Maulayya, a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com

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.


Fika Ridaul Maulayya
I'm Fika Ridaul Maulayya, a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share everything i know with Article, Screencasts and E-Books at SantriKoding.com
KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami

KOMENTAR