Halo teman-teman semuanya, di artikel sebelumnya kita semua telah belajar bagaimana cara installasi dan konfigurasi Laravel Fortify di dalam project Laravel baru. Pada tutorial kali ini kita semua akan belajar bagaimana cara membuat proses Register menggunakan Laravel Fortify. Jadi harus teman-teman tahu, bahwasanya kita nanti hanya akan membuat sebuah view saja, karena untuk controller atau actions sudah otomatis dibuatkan oleh Laravel Fortify. Kita hanya perlu fokus di dalam template view saja.
Langkah 1 - Membuat Layout App
Pertama, hal yang harus kita lakukan adalah membuat layouts, dimana layout ini akan digunakan extend dari semua template Auth kita. Silahkan buat folder baru dengan nama layouts di dalam folder resources/views kemudian di dalam folder layouts dilahkan buat file baru dengan nama app.blade.php dan silahkan masukkan kode berikut ini :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
<title>{{ $title ?? config('app.name') }}</title>
<style>
body {
background: lightgray;
font-family: 'Quicksand', sans-serif
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
@yield('content')
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Di atas kita menggunakan CSS Bootstrap secara CDN atau online, jadi pastikan teman-teman semuanya harus terhubung menggunakan internet saat menjalankan project ini, akan tetapi jika ingin bisa dijalankan secara offline, silahkan bisa mengunduh file-file CSS dari Bootstrap.
Di atas kita menggunakan sintaks blade untuk menampilkan content dengan @yield('content') dimana sintaks tersebut akan otomatis mencari sebuah blade section dengan nama content.
Langkah 2 - Membuat View Register
Setelah kita berhasil membuat template untuk layouts, sekarang kita lanjutkan untuk membuat view untuk halaman register. Silahkan buat sebuah folder baru dengan nama auth di dalam folder resources/views kemudian di dalam folder auth silahkan buat file baru dengan nama register.blade.php dan silahkan masukkan kode berikut ini :
@extends('layouts.app', ['title' => 'Register - SantriKoding.com'])
@section('content')
<div class="col-md-8">
<div class="card border-0 shadow rounded">
<div class="card-body">
<h4 class="font-weight-bold">REGISTER</h4>
<hr>
<form action="{{ route('register') }}" method="POST">
@csrf
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold text-uppercase">Full Name</label>
<input type="text" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" placeholder="Masukkan Nama Lengkap">
@error('name')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold text-uppercase">Email address</label>
<input type="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" placeholder="Masukkan Alamat Email">
@error('email')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold text-uppercase">Password</label>
<input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Masukkan Password">
@error('password')
<div class="alert alert-danger mt-2">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold text-uppercase">Konfirmasi Password</label>
<input type="password" name="password_confirmation" class="form-control" placeholder="Masukkan Konfirmasi Password">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">REGISTER</button>
</form>
</div>
</div>
<div class="login mt-3 text-center">
<p>Sudah punya akun ? Login <a href="/login">Disini</a></p>
</div>
</div>
@endsection
Di atas kita buat view ini menggunakan extends dari layouts app yang sudah kita buat sebelumnya, dan kita juga definisikan untuk titlenya, kurang lebih seperti ini :
@extends('layouts.app', ['title' => 'Register - SantriKoding.com'])
Dan untuk semua view register yang kita buat akan kita letakkan di dalam blade section, dimana ini akan otomatis di render oleh @yield di dalam file layouts app.
@section('content')
//kode view register ditulis disini
@endsection
Dan untuk action dari form register yang kita buat, akan kita arahkan ke sebuah route yang bernama register :
<form action="{{ route('register') }}" method="POST">
Jika teman-teman cek di dalam file routes/web.php maka teman-teman tidak akan menemukan route tersebut, lantas kenapa bisa seperti itu ? Ya, route tersebut sebenarnya ada, akan tetapi di letakkan di dalam folder vendor/laravel/fortify/routes/routes.php. Dan kita tidak disarankan untuk mengubah apapun yang ada di dalam folder tersebut, karena jika kita melakukan update composer, maka semua kode yang dirubah akan hilang kembali.
langkah 3 - Uji Coba Fitur Register
Sekarang kita bisa mencoba menjalankan di dalam http://localhost:8000/register jika berhasil maka kurang lebih tampilannya seperti berikut ini :
Kemudian silahkan klik REGISTER tanpa mengisi apapun di dalam form, maka akan menampilkan sebuah validaasi, kurang lebih seperti berikut ini :
Dan sekarang jika kita mengisi semua form dan klik REGISTER, maka akan menampilkan error, sebenarnya kita sudah berhasil melakukan proses registrasi, error tersebut muncul, karena kita beelum membuat sebuah view dengan nama home.
Langkah 4 - Membuat View Home
Sekarang kita lanjutkan untuk membuat view home, di dalam home kita akan menampilkan nama user yang berhasil register dan membuat tombol untuk proses logout. Silahkan buat folder baru dengan nama home.blade.php di dalam folder resources/views dan masukkan kode berikut ini :
@extends('layouts.app')
@section('content')
<div class="col-md-8">
<div class="card border-0 shadow rounded">
<div class="card-body">
Selamat Datang <strong>{{ auth()->user()->name }}</strong>
<hr>
<a href="{{ route('logout') }}" style="cursor: pointer" onclick="event.preventDefault();
document.getElementById('logout-form').submit();" class="btn btn-md btn-primary">LOGOUT</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</div>
</div>
@endsection
Di atas kita buat view home ini extends dari file layouts app.
@extends('layouts.app')
Kemudian untuk tampilan home sendiri kita letakkan di dalam blade section.
@section('content')
//kode menampilkan home disini
@endsection
Dan untuk menampilkan data user yang berhasil melakukan register, kita menggunakan sintaks blade seperti berikut ini :
Selamat Datang <strong>{{ auth()->user()->name }}</strong>
Dan untuk membuat proses logout kita membuat sebuah button yang mengarah kesebuah form dengan action logout. Kurang lebih seperti berikut ini :
<a href="{{ route('logout') }}" style="cursor: pointer" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="btn btn-md btn-primary">LOGOUT</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
Sekarang jika kira refresh halaman home, maka kurang lebih hasilnya seperti berikut ini :
Gimana mudah bukan ? membuat proses register di Laravel menggunakan Laravel Fortify. Di artikel selanjutnya kita semua akan belajar bagaimana cara membuat fitur login. Terima Kasih