Laravel

Autentikasi Laravel Menggunakan Fortify : Membuat Fungsi Register

Muhammad Amirul Ihsan29 Oktober 20213 Comments01.9k

Artikel ini bagian ke 2 dari total 3 artikel di seri Autentikasi Laravel Menggunakan Fortify

Seri : Autentikasi Laravel Menggunakan Fortify

Autentikasi Laravel Menggunakan Fortify : Apa Itu Laravel Fortify?
Autentikasi Laravel Menggunakan Fortify : Membuat Fungsi Register
Autentikasi Laravel Menggunakan Fortify : Membuat Fungsi Login

Assalamualaikum Warohmatullah Wabarokatuh, setelah membahas apa itu fortify sekarang kita akan lanjutkan untuk membuat fungsi register, atau lebih tepatnya tampilan. Karena untuk fungsinya sendiri sebenarnya sudah tersedia di Fortify.

Untuk mengeceknya, bisa gunakan perintah php artisan route:list atau php artisan route:list --compact biar tampilannya seperti di bawah ini.

Membuat Fungsi Register Laravel Fortify — Daftar route setelah mendaftarkan Fortify

Pada gambar di atas kita memiliki beberapa route yang disediakan oleh Fortify, nah kita akan gunakan route register untuk membuat fungsi pendaftaran. Terdapat 2 route register, 1 dengan method GET dan 1 dengan method POST.

Kalau kita coba akses /register maka kita akan temukan halaman putih kosong yang bersih. Tugas kita memang membuat tampilannya ini, untuk fungsinya sudah teresedia di Fortify. Untuk register bisa cek pada file app/Actions/CreateNewUser.php.

Perhatikan pada bagian validasinya.

Validator::make($input, [
    'name' => ['required', 'string', 'max:255'],
    'email' => [
        'required',
        'string',
        'email',
        'max:255',
        Rule::unique(User::class),
    ],
    'password' => $this->passwordRules(),
])->validate();

Terdapat 3 kolom pada validasi, dan itu yang harus kita buat pada tampilan register. Tapi pada validasi password dia menggunakan $this->passwordRules() yang harus kita cari tau dulu isinya juga, dan isinya sebagai berikut.

protected function passwordRules()
{
    return ['required', 'string', new Password, 'confirmed'];
}

Terdapar rules confirmed yang artinya kita juga harus menambahkan 1 inputan lagi untuk password_confirmation. Jadi ada 4 inputan yang harus disediakan di tampilan register nantinya name, email, password, password_confirmation.

Oke, lalu bagaimana cara membuat tampilan registernya? Ya tentu seperti biasanya, tapi kan kita harus mendefinisikan fungsinya di controller. Nah untuk Fortify kita definisikan pada method boot() FortifyServiceProvider. Tambahkan kode ini di dalam method boot().

Fortify::registerView(function () {
    return view('auth.register');
});

Selanjutnya buat folder auth dan file view register.blade.php, karena biasanya yang jadi keluhan pada starter kit Laravel sekarang adalah UInya menggunakan TailwindCSS, maka pada seri artikel ini kita akan gunakan bootstrap ya. Seperti ini isi filenya.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Register</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <h1>Register</h1>
        <form action="{{ route('register') }}" method="POST">
            @csrf
            <div class="mb-3">
                <label for="email" class="form-label">Name</label>
                <input type="text" class="form-control @error('name') is-invalid @enderror" placeholder="your name" name="name" value="{{ old('name') }}">
                @error('name')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <input type="email" class="form-control @error('email') is-invalid @enderror" placeholder="name@example.com" name="email" value="{{ old('email') }}">
                @error('email')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Password</label>
                <input type="password" class="form-control @error('password') is-invalid @enderror" placeholder="password" name="password">
                @error('password')
                <div class="invalid-feedback">
                    {{ $message }}
                </div>
                @enderror
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">Password Confirmation</label>
                <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" placeholder="password confirmation" name="password_confirmation">
            </div>
            <div class="mb-3">
                <input type="submit" value="Register" class="btn btn-primary">
            </div>
        </form>
    </div>
</body>
</html>

Langsung copas aja ya, saya tau kalian suka yang copas copas :p, oh ya gak pake templates / layout ya, kalo mau bikin sendiri ;).

Ini tampilannya, sederhana dan sangat simpel, yang penting fungsinya & tau gimana caranya kan? kalo mau cakep keluarkan kemampuan kalian sendiri ya.