Halo teman semuanya, pada artikel sebelum-sebelumnya kita telah belajar bagaimana cara melakukan konfigurasi Inertia.js baik secara server side maupun client side.
Sekarang kita akan lanjutkan belajar bagaimana cara membuat proses register di dalam React.js dan dengan bantuan Inertia.js.
Langkah 1 - Membuat Controller Register
Pertama, kita akan membuat controller register terlebih dahulu. Dimana di dalam controller ini kita akan menambahkan 2 method yang bergunakan untuk menampilkan halaman form register dan memproses data register.
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Laravel-nya.
php artisan make:controller Auth/RegisterController
Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 1 file controller baru yang berada di dalam folder app/Http/Controllers/Auth/RegisterController.php.
Silahkan buka file tersebut dan ubahlah kode-nya menjadi seperti berikut ini.
<?php
namespace App\Http\Controllers\Auth;
use App\Models\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class RegisterController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
return inertia('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.
use App\Models\User;
Kemudian di dalam class RegisterController kita membuat 2 method baru, yaitu :
-
function index
-
function store
Function Index
Method ini akan kita gunakan untuk menampilkan halaman form register di dalam React.js. Dan disini kita melakukan return ke dalam view React menggunakan Inertia.
return inertia('Auth/Register');
Function Store
Method ini akan kita gunakan untuk melakukan proses insert data user ke dalam database. Disini kita menerapkan validasi untuk memastikan apakah data yang dikirim sudah sesuai atau belum.
$this->validate($request, [
'name' => 'required',
'email' => 'required|unique:users',
'password' => 'required|confirmed'
]);
Dari penambahan validasi di atas, kurang lebih seperti berikut ini.
| KEY |
VALIDATION |
DESCRIPTION |
name |
required |
field wajib diisi. |
email |
required |
field wajib diisi. |
|
unique:users |
field bersifat unik dan tidak boleh ada yang sama di dalam table users. |
password |
required |
field wajib diisi. |
|
confirmed |
field wajib sama dengan isi password. |
Jika data yang dikirimkan sudah sesuai dengan validasi di atas, maka kita lanjutkan melakukan proses insert data ke dalam database menggunakan Model.
/**
* create user
*/
User::create([
'name' => $request->name,
'email' => $request->email,
'password' => bcrypt($request->password)
]);
kemudian kita redirect ke dalam URL /login dengan memberikan pesan Register Berhasil.
return redirect('/login')->with('status', 'Register Berhasil!');
Langkah 2 - Membuat Route Register
Setelah controller dan method berhasil dibuat, maka kita akan lanjutkan membuat 2 route untuk proses register.
Silahkan buka file routes/web.php, kemudian ubah 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']);
Untuk memastikan apakah route di atas berhaasil ditambahkan, silahkan jalankan perintah berikut ini di dalam terminal/CMD.
php artisan route:list
Langkah 3 - Membuat Layout Auth
Setelah controller dan route berhasil dibuat, maka kita akan lanjutkan membuat layout yang nanti digunakan sebagai induk template.
Silahkan buat folder baru dengan nama Layouts di dalam folder resources/js, kemudian di dalam folder Layouts tersebut buatlah file baru dengan nama Default.jsx, dan masukkan kode berikut ini di dalamnya.
//import React
import React from 'react';
//import Link, usePage
import { Link, usePage } from '@inertiajs/inertia-react';
function Layout({ children }) {
//destruct props "auth"
const { auth } = usePage().props;
return (
<>
<header>
<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div className="container">
<Link className="navbar-brand" href="/">LARAVEL + INERTIA.JS</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{ auth.user
? <ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<Link class="nav-link" href="/dashboard">DASHBOARD</Link>
</li>
<li class="nav-item">
<Link class="nav-link" href="/logout" method="POST">LOGOUT</Link>
</li>
</ul>
: <ul 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>
</header>
<main className="container" style={{ marginTop: '100px' }}>
{children}
</main>
</>
)
}
export default Layout
Dari penambahan kode di atas, pertama kita import React.
//import React
import React from 'react';
Kemudian kita import Link dan usePage dari Inertia React.
//import Link, usePage
import { Link, usePage } from '@inertiajs/inertia-react';
Link digunakan untuk melakukan navigasi secara SPA di dalam website, sedangkan untuk usePage digunakan untuk mengambil data props yang dikirimkan, baik melalui controller maupun middleware.
Di dalam function component Layout kita menambahkan parameter children. Parameter tersebut akan berisi view yang menggunakan layout ini.
function Layout({ children }) {
//...
}
Dan untuk me-render view-nya, kita menggunakan kode seperti berikut ini.
<main className="container" style={{ marginTop: '100px' }}>
{children}
</main>
Kemudian di dalam function component Layout kita juga melakukan destruct props yang bernama auth. Props tersebut diambil dari middleware Inertia dan akan berisi data user yang sedang login.
//destruct props "auth"
const { auth } = usePage().props;
Dan di dalam JSX kitaa membuat kondisi untuk menampilkan button, kurang lebih seperti berikut ini.
{ auth.user
? //tampilkan button "dashboard" dan "logout"
: //tampilkan button "register" dan "login"
}
Langkah 4 - Membuat Halaman Register
Silahkan teman-teman buat folder baru dengan nama Auth di dalam folder resources/js/Pages, kemudian di dalam folder Auth tersebut buatlah file baru dengan nama Register.jsx dan masukkan kode berikut ini di dalamnya.
//import React
import React, { useState } from 'react';
//import layout
import Layout from '../../Layouts/Default';
//import Head, usePage
import { Head, usePage } from '@inertiajs/inertia-react';
//import Inertia adapter
import { Inertia } from '@inertiajs/inertia';
function Register() {
//destruct props "errors"
const { errors } = usePage().props;
//define state
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [passwordConfirmation, setPasswordConfirmation] = useState('');
//method "storeRegister"
const storeRegister = async(e) => {
e.preventDefault();
Inertia.post('/register', {
//data
name: name,
email: email,
password: password,
password_confirmation: passwordConfirmation
});
}
return (
<>
<Head>
<title>Register Account</title>
</Head>
<Layout>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card border-0 rounded-3 shadow-sm">
<div class="card-body">
<h5>REGISTER</h5>
<hr />
<form onSubmit={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" onChange={(e) => setName(e.target.value)} placeholder="Full Name" />
</div>
{errors.name && (
<div className="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" onChange={(e) => setEmail(e.target.value)} placeholder="Email Address" />
</div>
{errors.email && (
<div className="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" onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
</div>
{errors.password && (
<div className="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" onChange={(e) => setPasswordConfirmation(e.target.value)} placeholder="Password Confirmation" />
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">REGISTER</button>
</form>
</div>
</div>
</div>
</div>
</Layout>
</>
)
}
export default Register
Dari penambahan kode di atas, pertama kita import React dan useState.
//import React
import React, { useState } from 'react';
Kemudian kita import Layout Default yang sudah kita buat sebelumnya.
//import layout
import Layout from '../../Layouts/Default';
Dan kita import Head dan usePage dari Inertia React.
//import Head, usePage
import { Head, usePage } from '@inertiajs/inertia-react';
Karena akan melakukan Http request ke backend, maka kit import juga adapter dari Inertia.
//import Inertia adapter
import { Inertia } from '@inertiajs/inertia';
Di dalam function component Register, pertama kita melakukan destruct props yang bernama errors.
Props tersebut akan berisi data error validasi yang dikirimkan oleh controller jika validasi tidak terpenuhi.
//destruct props "errors"
const { errors } = usePage().props;
Setelah itu, kita membuat beberapa state yang digunakan untuk menyimpan data yang diinputkan di dalam form.
//define state
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [passwordConfirmation, setPasswordConfirmation] = useState('');
Untuk melakukan assign state di atas, di dalam input kita berikan event onChange yang kita arahkan ke dalam set state / state handler dan berisi value dari input.
Contohnya seperti berikut ini.
<input type="text" class="form-control" onChange={(e) => setName(e.target.value)} placeholder="Full Name" />
Selanjutnya, kita membuat method baru dengan nama storeRegister. Method tersebut akan dijalankan apabila form disubmit.
<form onSubmit={storeRegister}>
//...
</form>
//method "storeRegister"
const storeRegister = async(e) => {
//...
}
Di dalam method storeRegister di atas, kita melakukan proses insert data register dengan cara melakukan Http request ke backend menggunakan Inertia dengan method POST.
Inertia.post('/register', {
//data
name: name,
email: email,
password: password,
password_confirmation: passwordConfirmation
});
Langkah 5 - Uji Coba Proses Register
INFORMASI PENTING : pastikan teman-teman sudah menjalankan perintah npm run dev. Dan jangan ditutup terminal/CMD-nya.
Sekarang silahkan teman-teman 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 kita bagaimana cara membuat proses register menggunakan Laravel, Inertia.js dan React.js. Dan pada artikel selanjutnya kita semua akan belajar bagaimana cara membuat proses login di dalam React.js.
Terima Kasih