Tutorial Vue JS & Restful API Lumen #7 : Input Data di Vue JS


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Tutorial Vue JS & Restful API Lumen #7 : Input Data di Vue JS - Halo teman-teman semuanya, pada artikel kali ini kita smeua akan belajar bagaimana cara memasukkan data atau input data ke dalam database menggunakan Vue JS dan Restful API yang sebelumnya sudah kita buat di Lumen.

Di artikel sebelumnya, kita sudah berhasil menampilkan data di Vue JS yang di ambil dari restful API dari Lumen. Sekarang kita akan mencoba memasukkan data menggunakan Vue JS.

Langkah 1 - Proses Memasukkan Data

Silahkan teman-teman buka file src/components/posts/Create.vue dan silahkan ubah kodenya menjadi seperti berikut ini :

<template>
    <div class="posts">
        <div class="container mt-5">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="card">
                        <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>
                                <button type="submit" class="btn btn-md btn-success mr-2">SIMPAN</button>
                                <button type="reset" class="btn btn-md btn-danger">RESET</button>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                post: {},
                validation: []
            }
        },
        methods: {
            PostStore() {
                axios.post('http://localhost:8000/posts', this.post)
                    .then((response) => {
                        this.$router.push({
                            name: 'posts'
                        });
                        console.log(response.data.data);
                    }).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 :

PostStore() {
  axios.post('http://localhost:8000/posts', this.post)
    .then((response) => {
        this.$router.push({
              name: 'posts'
        });
         console.log(response.data.data);
        }).catch(error => {
          this.validation = error.response.data.data;
         });
}

Langkah 2 - Mencoba Menjalankan Aplikasi

Sekarang, silahkan teman-teman jalankan project Vue JS dengan cara menjalankan perintah :

npm run serve

Jika berhasil, teman-teman akan melihat kurang lebih tampilannya seperti berikut ini :


Sampai disini pembahasan tentang bagaimana cara memasukkan data dari Restful API di Vue JS dari Lumen.

Jika ada pertanyaan silahkan teman-teman bisa bertanya melalui kolom komentar dibawah.

Terima Kasih


Fika Ridaul Maulayya
Software Engineer | Content Creator | Founder & Author di SantriKoding.com

Jika Anda menyukai konten kami, silakan pertimbangkan untuk membeli kopi untuk kami.
Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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

KOMENTAR