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