- Langkah 1 - Membuat Controller Register
- Langkah 2 - Menambahkan Route Register
- Langkah 3 - Membuat Layout Frontend
- Langkah 4 - Membuat Halaman Register
- Langkah 5 - Uji Coba Proses Register
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
*/
$request->validate([
'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.
$request->validate([
'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 :
<script setup>
// Import Link
import { Link } from '@inertiajs/vue3';
//get props
defineProps({
auth: Object
});
</script>
<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>
<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
import { Link } from '@inertiajs/vue3';
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.
//get props
defineProps({
auth: Object
});
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.
<script setup>
//import layout App
import Layout from '../../Layouts/App.vue';
// get props "errors" dari controller
defineProps({
errors: Object
});
//import reactivity API dari vue
import { reactive } from 'vue';
//import inertia router
import { router } from '@inertiajs/vue3';
//define state
const form = reactive({
name: '',
email: '',
password: '',
password_confirmation: ''
});
//method storeRegister
const storeRegister = () => {
//send data ke server
router.post('/register', form);
};
</script>
<template>
<Layout>
<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>
</Layout>
</template>
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 Layout from '../../Layouts/App.vue';
Selanjutnya, untuk handle error validasi dari controller, kita melakukan definisi sebuah props dengan nama errors dan mempunyai jenis Object.
// get props "errors" dari controller
defineProps({
errors: Object
})
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 router dari Inertia.js. Ini akan kita gunakan untuk melakukan HTTP request ke dalam server.
//import inertia router
import { router } from '@inertiajs/vue3';
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
router.post('/register', form)
Langkah 5 - Uji Coba Proses Register
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
Artikel ini dibaca sebanyak 4.653 kali
SAWERIA
Memuat komentar...