Tutorial Laravel Passport dan Vue Js 3 #6 : Proses Register


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

Halo teman-teman semuanya, di artikel sebelumnya kita semua telah berhasil menginstall beberapa library dan melakukan konfigurasi juga. Di artikel kali ini, kita semua akan belajar membuat proses register di dalam Vue Js dengan memanfaatkan REST API yang sudah kita buat di dalam Laravel. Dan di dalam Vue Js kita akan menggunakan Composition API agar kode menjadi lebih terstruktur dan reusable.

Langkah 1 - Edit View Register

Sekarang, kita akan melakukan perubahan kode yang ada di dalam view/component registeer. SIlahkan buka file src/views/auth/Register.vue kemudian ubah semua kode-nya menjadi seperti berikut ini :

<template>

    <div class="container-fluid mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card border-0 rounded shadow">
                    <div class="card-body">
                        <h4>REGISTER</h4>
                        <hr>
                        <form @submit.prevent="register">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Full Name</label>
                                        <input type="text" v-model="user.name" class="form-control"
                                            placeholder="Full Name">
                                    </div>
                                    <div v-if="validation.name" class="mt-2 alert alert-danger">
                                        {{ validation.name[0] }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Email address</label>
                                        <input type="email" v-model="user.email" class="form-control"
                                            placeholder="Email Address">
                                    </div>
                                    <div v-if="validation.email" class="mt-2 alert alert-danger">
                                        {{ validation.email[0] }}
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Password</label>
                                        <input type="password" v-model="user.password" class="form-control"
                                            placeholder="Password">
                                    </div>
                                    <div v-if="validation.password" class="mt-2 alert alert-danger">
                                        {{ validation.password[0] }}
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Konfirmasi Password</label>
                                        <input type="password" v-model="user.password_confirmation" class="form-control"
                                            placeholder="Konfirmasi Password">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">REGISTER</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import { reactive, ref } from 'vue'
    import { useRouter } from 'vue-router'
    import axios from 'axios'

    export default {


        setup() {

            //inisialisasi vue router on Composition API
            const router = useRouter()

            //state user
            const user = reactive({
                name: '',
                email: '',
                password: '',
                password_confirmation: ''
            })

            //state validation
            const validation = ref([])

            //method register
            function register() {

                //define variable 
                let name = user.name
                let email = user.email
                let password = user.password
                let password_confirmation = user.password_confirmation

                //send server with axios
                axios.post('http://localhost:8000/api/register', {
                        name,
                        email,
                        password,
                        password_confirmation
                })
                .then(() => {

                    //redirect ke halaman login
                    return router.push({
                        name: 'login'
                    })

                }).catch(error => {
                    //set validation dari error response
                    validation.value = error.response.data
                })

            }

            return {
                user, // <-- state user
                validation, // <-- state validation 
                register // <-- method register
            }

        }

    }
</script>

Di atas, pertama kita import Reactivity API dari Vue, yaitu reactive dan ref, ini akan digunakan untuk membuat sebuah state/variable menjadi reaktif.

mport { reactive, ref } from 'vue'

Setelah itu, kita import hook useRouter dari Vue Router, ini digunakan agar kita dapat menggunakan Vue Router di dalam Composition API.

import { useRouter } from 'vue-router'

Kemudian, kita import Axios, ini akan digunakan untuk melakukan HTTP request ke server / REST API.

import axios from 'axios'

Untuk menginisialisasi Composition API di dalam component, kita menggunakan kode seperti berikut ini :

setup() {

	// ...
	
}

Dengan Composition API, maka semua kode akan di tulis di dalam method setup.

Di dalam Composition API, pertama kita melakukan inisialisasi Vue Router.

//inisialisasi vue router on Composition API
const router = useRouter()

Setelah itu, kita buat state user dengan jenis reactive. Ini agak kita gunakan untuk menyimpan input dari from.

//state user
const user = reactive({
   name: '',
   email: '',
   password: '',
   password_confirmation: ''
})

Kemudian, kita buat state lagi untuk validation dan kita gunakan jenis ref.

//state validation
const validation = ref([])

CATATAN:

Jika menggunakan reactivity API ref di dalam function setup, maka untuk set dan get data harus menggunakan single objek .value.

Tapi untuk menampilkan di template kita tidak perlu menggunakan single object .value.

Dan untuk proses register, kita menggunakan method register, di daman di dalamnya akan mengirimkan data yang di dapatkan dari state user dan dikirimkan ke server menggunakan Axios.

//method register
function register() {

	// ...
	
}

Untuk mengirim data ke server, kita memanggil endpoint API register, kurang lebih seperti berikut ini :

//send server with axios
axios.post('http://localhost:8000/api/register', {
     name,
     email,
     password,
     password_confirmation
})

Jika data berhasil di simpan di dalam server, maka kita akan di arahkan ke route yang bernama login.

//redirect ke halaman login
return router.push({
  name: 'login'
})

Jika data gagal disimpan di server, maka akan melakukan assign error response ke dalam state validation, kurang lebih seperti berikut ini :

//set validation dari error response
validation.value = error.response.data

Di atas, bisa kita perhatikan, jika ingin melakukan set dan get data di state yang memiliki jenis ref, maka kita perlu menambahkan single object .value.

Terakhir, agar kode di dalam Composition API bisa digunakan, kita perlu melakukan return semua state dan function/method yang ada.

return {
    user, 		// <-- state user
    validation, // <-- state validation 
    register 	// <-- method register
}

Dan di dalam template, untuk form action, kita arahkan ke dalam method register yang sudah kita buat di atas.

<form @submit.prevent="register">

Langkah 2 - Uji Coba Proses Register

Sekarang, kita akan lakukan uji coba untuk proses register, silahkan buka project Vue Js di http://localhost:8080/register jika berhasil kurang lebih tampilannya seperti berikut ini :

Silahkan klik REGISTER tanpa memasukkan data apapun, maka kita akan mendapatkan error validation yang dikirim melalui server / REST API.

Sekarang, silahkan isi formnya dan klik REGISTER, jika berhasil, maka kita akan di arahkan ke halaman login. Dan jika teman-teman cek di dalam database, maka data jugaa berhasil masuk.

Sampai disini pembahasan tentang bagaimana cara membuat proses register menggunakan Vue Js dan Laravel Passport. Di artikel selanjutnya kita akan belajar bagaimana cara membuat proses login di Vue Js.

Terima Kasih


EBOOK - Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway


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

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. 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