Tanggal :27 November 2021
Fortify - Membuat Fungsi Register

Autentikasi Laravel Menggunakan Fortify : Membuat Fungsi Register

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

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.

Tampilan form register

Kita akan lanjutkan untuk membuat fungsi Login di artikel berikutnya.

Wassalamualaikum Warohmatullah Wabarokatuh.

Series Navigation<< Autentikasi Laravel Menggunakan Fortify : Apa Itu Laravel Fortify?Autentikasi Laravel Menggunakan Fortify : Membuat Fungsi Login >>

Halo semuanya, saya Amirul seoarang Web Developer, suka membuat konten pembelajaran berupa artikel, video tutorial maupun podcast, saya juga suka makan dan foto makanan.

One Ping

  1. Pingback: Autentikasi Laravel Menggunakan Fortify : Membuat Fungsi Login - Kawan Koding

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *