Halo teman-teman semuanya, di artikel kali ini kita akan belajar membuat proses register menggunakan Inertia.js. Konsepnya, kita akan membuat sebuah controller terlebih dahulu, kemudian kita lanjutkan membuat form registernya di dalam Inertia.js.
Langkah 1 - Membuat Controller Register
Silahkan jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project laravelnya.
php artisan make:controller Auth/RegisterController
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru dengan nama RegisterController.php yang berada di dalam folder app/Http/Controllers/Auth.
Silahkan buka file tersebut, kemudian ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers\Auth;
use App\Models\User;
use Inertia\Inertia;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class RegisterController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
return Inertia::render('Auth/Register');
}
/**
* store
*
* @param mixed $request
* @return void
*/
public function store(Request $request)
{
/**
* validate request
*/
$this->validate($request, [
'name' => 'required',
'email' => 'required|unique:users',
'password' => 'required|confirmed'
]);
/**
* create user
*/
User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);
//redirect
return redirect('/login')->with('status', 'Register Berhasil!');
}
}
Dari penambahan kode di atas, pertama kita import Model User dan Inertia ke dalam controller Register.
use App\Models\User;
use Inertia\Inertia;
Setelah itu, kita menambahkan 2 method baru, yaitu index dan store. Untuk method index akan kita gunakan untuk melakukan render view/form untuk proses register.
Dimana di dalamnya kita melakukan return menggunakan Inertia ke dalam view/component yang bernama Register, yang nantinya akan kita buat di dalam folder resources/js/Pages/Auth.
return Inertia::render('Auth/Register');
Sedangkan method store akan kita gunakan untuk memproses data yang dikirimkan untuk selanjutnya disimpan ke dalam database. Di dalam method ini, pertama kita membuat sebuah validasi terlebih dahulu, dimana validasi tersebut akan memerika data yang dikirimkan apakah sudah sesuai atau belum.
$this->validate($request, [
'name' => 'required',
'email' => 'required|unique:users',
'password' => 'required|confirmed'
]);
Jika data yang dikirimkan sudah sesuai, maka akan kita lakukan proses insert menggunakan Model User.
User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);
Setelah proses insert data berhasil, selanjutnya kita akan lakukan return ke dalam URL /login dengan menambahkan session flash yang berisi informasi data berhasil disimpan.
return redirect('/login')->with('status', 'Register Berhasil!');
Langkah 2 - Menambahkan Route Register
Setelah berhasil membuat controller Register, sekarang kita lanjutkan untuk menambahkan route-nya. Silahkan buka file routes/web.php, kemudian ubah semua kode-nya menjadi seperti berikut ini :
<?php
use Illuminate\Support\Facades\Route;
//route index register
Route::get('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'index']);
//route store register
Route::post('/register', [\App\Http\Controllers\Auth\RegisterController::class, 'store']);
Di atas, kita menambahkan 2 route untuk register. Yang pertama menggunakan method get dan difungsikan untuk menampilkan halaman view/form. Dan yang kedua menggunaka method post, yang digunakan untuk memproses data yang dikirimkan oleh view/form.
Untuk memeriksa apakah route kita berhasil ditambahkan, silahkan jalankan perintah berikut ini di dalam terminal/CMD :
php artisan route:list
Langkah 3 - Membuat Layout Frontend
Sekarang kita lanjutkan untuk menambahkan layout terlebih dahulu, layout digunakan sebagai induk template yang berisi navbar dan footer.
Silahkan buat folder baru dengan nama Layouts di dalam folder resources/js/ dan di dalam folder Layouts silahkan buat file baru dengan nama App.vue dan masukkan kode berikut ini :
<template>
<div>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container">
<Link class="navbar-brand" href="/">INERTIA.JS AUTH</Link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul v-if="auth.user" class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<Link class="nav-link" href="/admin/dashboard">DASHBOARD</Link>
</li>
<li class="nav-item">
<Link class="nav-link" href="/logout" method="POST">LOGOUT</Link>
</li>
</ul>
<ul v-else class="navbar-nav ms-auto mb-2 mb-md-0">
<li class="nav-item">
<Link class="nav-link" href="/login">LOGIN</Link>
</li>
<li class="nav-item">
<Link class="nav-link" href="/register">REGISTER</Link>
</li>
</ul>
</div>
</div>
</nav>
<main class="container mt-5">
<slot />
</main>
</div>
</template>
<script>
//import Link dari inertia
import { Link } from '@inertiajs/inertia-vue3';
export default {
//register Link di component
components: {
Link
},
props: {
auth: Object
}
}
</script>
<style scoped>
.mt-5 {
margin-top: 100px !important;
}
</style>
Dari penambahan kode di atas, pertama kita tambahkan <slot /> di dalam class container. Slot tersebut yang nantinya akan melakukan render view yang meng-extends layout ini.
<main class="container mt-5">
<slot />
</main>
Setelah itu, kita import Link dari Inertia.js, ini kita gunakan untuk melakukan navigasi ke halaman-halaman lain.
//import Link dari inertia
import { Link } from '@inertiajs/inertia-vue3';
Dan agar Link dapat digunakan di dalam template, maka kita perlu melakukan register di dalam components.
//register Link di component
components: {
Link
},
Kemudian kita get props dengan nama auth, dimana kita akan gunakan untuk kondisi menampilkan menu dashboard dan logout yang ada di navbar jika user sudah melakukan authentication.
Langkah 4 - Membuat Halaman Register
Sekarang kita lanjutkan membuat halaman register-nya. Silahkan buat folder baru dengan nama Auth di dalam folder resources/js/Pages dan di dalam folder Auth silahkan buat file baru dengan nama Register.vue. Kemudian masukkan kode berikut ini di dalamnya.
<template>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card border-0 rounded-3 shadow-sm">
<div class="card-body">
<h5>REGISTER</h5>
<hr>
<form @submit.prevent="storeRegister">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" v-model="form.name" placeholder="Full Name">
</div>
<div v-if="errors.name" class="alert alert-danger">
{{ errors.name }}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Email Address</label>
<input type="email" class="form-control" v-model="form.email" placeholder="Email Address">
</div>
<div v-if="errors.email" class="alert alert-danger">
{{ errors.email }}
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Password</label>
<input type="password" class="form-control" v-model="form.password" placeholder="Password">
</div>
<div v-if="errors.password" class="alert alert-danger">
{{ errors.password }}
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Password Confirmation</label>
<input type="password" class="form-control" v-model="form.password_confirmation" placeholder="Password Confirmation">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">REGISTER</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
//import layout App
import LayoutApp from '../../Layouts/App.vue';
//import reactivity API dari vue
import { reactive } from 'vue';
//import inertia adapter
import { Inertia } from '@inertiajs/inertia';
export default {
//set layout
layout: LayoutApp,
//get props
props: {
errors: Object
},
//define composition API
setup() {
//define state
const form = reactive({
name: '',
email: '',
password: '',
password_confirmation: ''
});
//method storeRegister
const storeRegister = () => {
//send data ke server
Inertia.post('/register', {
name: form.name,
email: form.email,
password: form.password,
password_confirmation: form.password_confirmation
});
}
return {
form,
storeRegister
}
}
}
</script>
<style>
</style>
Dari penambahan kode di atas, pertama kita import LayoutApp yang sudah pernah kita buat sebelumnya. Karena kita akan gunakan sebagai induk template dari halaman ini.
//import layout App
import LayoutApp from '../../Layouts/App.vue';
Kemudian, kita import hook reactive dari Reactivity API Vue.js. Ini akan kita gunakan untuk mendefiniskan sebuah state.
//import reactivity API dari vue
import { reactive } from 'vue';
Setelah itu, kita import Inertia dari Inertia.js. Ini akan kita gunakan untuk melakukan HTTP request ke dalam server.
//import inertia adapter
import { Inertia } from '@inertiajs/inertia';
Dan kita set halaman ini menggunakan layout yang sudah kita import di atas.
//set layout
layout: LayoutApp,
Setelah itu, kita get props yang bernama errors dengan jenis data Object. Props tersebut akan dikirimkanoleh Laravel ketika validasi dari request tidak sesuai.
//get props
props: {
errors: Object
},
Kemudian kita define composition API dengan method setup.
//define composition API
setup() {
//...
}
Di dalam composition API, pertama kita define sebuah state dengan nama form yang berisi beberapa object.
//define state
const form = reactive({
name: '',
email: '',
password: '',
password_confirmation: ''
});
Kemudian kita buat method baru dengan nama storeRegister. Method tersebut akan dijalankan ketika form di submit.
<form @submit.prevent="storeRegister">
//...
</form>
//method storeRegister
const storeRegister = () => {
//...
}
Di dalam method storeRegister, kita mengirimkan data dari state form ke dalam server menggunakan method POST ke endpoint /register.
//send data ke server
Inertia.post('/register', {
name: form.name,
email: form.email,
password: form.password,
password_confirmation: form.password_confirmation
});
Dan agar state form dan method storeRegister dapat digunakan di dalam template, maka kita perlu melakukan return terlebih dahulu.
return {
form,
storeRegister
}
Langkah 5 - Compile Asset
Ketika kita melakukan perubahan di dalam file folder resources/js maka kita perlu melakukan compile ulang agar kode assets-nya diperbarui.
Jalankan perintah berikut ini di dalam terminal/CMD :
npm run dev
Atau jika pengen otomatis melakukan compile saat kita melakukan perubahan di dalam file, kita bisa menjalankan perintah berikut ini di dalam terminal/CMD :
npm run watch
CATATAN : ketika menjalankan perintah npm run watch, jangan tutup terminal/CMD-nya.
Langkah 6 - Uji Coba Proses Register
Setelah proses compiling selesai, sekarang kita bisa buka project-nya di URL http://localhost:8000/register dan jika berhasil maka kita akan mendapatkan hasil seperti berikut ini :
Silahkan klik REGISTER tanpa mengisi data apapun. Dan jika berhasil, maka kita akan mendapatkan error rersponse validasi yang dikirimkan oleh laravel melalui props.
Dan sekarang, silahkan masukkan data sesuai dengan yang kita inginkan. Kemudian klik REGISTER, jika berhasil maka akan menampilkan kurang lebih seperti berikut ini :
Di atas, kita sebenarnya sudah berhasil melakukan proses register. Error 404 muncul karena kita belum membuat halaman /login. Jika kita lihat di dalam table users, maka data yang baru saja kita inputkan telah berhasil disimpan.
Sampai disini pembahasan bagaimana cara membuat proses register di dalam Inertia.js. Di artikel selanjutnya kita akan belajar bagaimana cara membuat proses login atau authentication menggunakan Inertia.js.
Terima Kasih