Tutorial CRUD Laravel 7 & Vue JS #4 : Proses Memasukkan 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 #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.


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