Tutorial Laravel Fortify #5 : Membuat Fitur Login


Tutorial Laravel Fortify #5 : Membuat Fitur Login

Halo teman-teman semuanya, di artikel sebelumnya kita semua sudah belajar bagaimana cara membuat fitur register menggunakan Laravel Fortify. Pada artikel kali ini kita semua akan coba belajar mengimplementasikan fitur login menggunakan Laravel Fortify.

Seperti langkah-langkah sebelumnya, disini kita hanya akan fokus untuk membuat tampilan untuk form login, karena untuk controller atau actions sudah otomatis dibaut oleh Laravel Fortify.

Langkah 1 - Membuat View Login

Sekarang, silahkan buat file baru dengan nama login.blade.php di dalam folder resources/views/auth kemudian silahkan masukkan kode berikut ini di dalam file tersebut :

@extends('layouts.app', ['title' => 'Login - SantriKoding.com'])

@section('content')

<div class="col-md-4">
    <div class="card border-0 shadow rounded">
        <div class="card-body">
            @if (session('status'))
            <div class="alert alert-success" role="alert">
                {{ session('status') }}
            </div>
            @endif
            <h4 class="font-weight-bold">LOGIN</h4>
            <hr>
            <form action="{{ route('login') }}" method="POST">
                @csrf
                <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 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>
                <button type="submit" class="btn btn-primary">LOGIN</button>
                <hr>

                <a href="/forgot-password">Lupa Password ?</a>

            </form>
        </div>
    </div>
    <div class="register mt-3 text-center">
        <p>Belum punya akun ? Daftar <a href="/register">Disini</a></p>
    </div>
</div>

@endsection

Di atas, kita buat agar view login ini menggunakan extends dari layouts app. Kurang lebih seperti ini :

@extends('layouts.app', ['title' => 'Login - SantriKoding.com'])

Dan untuk view login kita letakkan di dalam blade section, dimana ini akan dirender oleh file layouts app, menggunakan @yeild :

@section('content')

	//kode view login disini
	
@endsection

Kemudian untuk form action dari login, kita arahkan ke sebuah route yang bernama login menggunakan method POST

<form action="{{ route('login') }}" method="POST">

Untuk melihat route tersebut di definisikan, maka teman-teman bisa cek di dalam folder vendor/laravel/fortify/routes/routes.php. Dan kita tidak diperbolehkan meng-edit file tersebut.

Langkah 2 - Uji Coba Fitur Login

Sekarang kita bisa mencoba menjalankan proses login di http://localhost:8000/login jika berhasil, maka kurang lebih tampilannya seperti berikut ini :


Sekarang kita bisa mencoba klik LOGIN tanpa memasukkan data apapun di dalam form, maka akan menampilkan sebuah error validasi, kurang lebih seperti berikut ini :


Kemudian, jika kita mencoba memasukkan data user yang belum ada di dalam database, maka akan menampilkan sebuah error, bawah data belum di temukan di dalam database, kurang lebih seperti berikut ini :


Sekarang silahkan lakukan uji coba dengan data user yang sudah ada di dalam database, jika berhasil maka akan menampilkan halaman home, kurang lebih seperti berikut ini :


Di artikel selanjutnya, kita semua akan belajar bagaimana cara membuat fitur forgot password dengan cara mengirimkan link reset password via email. Terima Kasih


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami