My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Membuat Component Login

Setelah kita berhasil membuat register untuk customer, sekarang kita akan lanjutkan membuat fitur login untuk customer.

Langkah 1 - Membuat Component Login

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:livewire Auth/Login

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan 2 file baru, yaitu:

  1. Class Component: app/Livewire/Auth/Login.php
  2. View Component: resources/views/livewire/auth/login.blade.php

Langkah 2 - Membuat Route Login

Setelah component berhasil digenerate, maka langkah berikutnya adalah membuat route-nya, sehingga nanti component tersebut bisa diakses.

Silahkan buka file routes/web.php, kemudian ubah kode-nya menjadi seperti berikut ini.


        
php

        

            
        

     
<?php

namespace App\Livewire;

use Illuminate\Support\Facades\Route;

//route register
Route::get('/register', Auth\Register::class)->name('register');

//route login
Route::get('/login', Auth\Login::class)->name('login');

Dari perubahan kode di atas, kita menambahkan route baru untuk proses login.

Langkah 3 - Membuat Fungsi Login

Setelah kita berhasil membuat component dan route, maka sekarang kita lanjutkan membuat method login untuk customer.

Silahkan buka file app/Http/Livewire/Auth/Login.php kemudian masukkan kode berikut ini di dalamnya.


        
php

        

            
        

     
<?php

namespace App\Livewire\Auth;

use Livewire\Component;

class Login extends Component
{
    public $email;
    public $password;
        
    /**
     * rules
     *
     * @return void
     */
    protected function rules()
    {
        return [
            'email' => ['required', 'email'],
            'password' => ['required'],
        ];
    }

    /**
     * login
     *
     * @return void
     */
    public function login()
    {
        // validate the input
        $this->validate();

        // attempt to login
        if (auth()->guard('customer')->attempt([
            'email' => $this->email,
            'password' => $this->password,
        ])) {
            // session flash
            session()->flash('success', 'Login Berhasil');

            // redirect to the desired page
            return $this->redirect('/account/my-orders', navigate: true);
        }

        // flash error message if login fails
        session()->flash('error', 'Periksa email dan password Anda.');

        // redirect to the desired page
        return $this->redirect('/login', navigate: true);

        
    }

    public function render()
    {
        return view('livewire.auth.login');
    }
}

Dari perubahan kode di atas, kita menambahkan 2 public properti.


        
php

        

            
        

     
public $email;
public $password;

Kemudian kita membuat method baru dengan nama rules, method ini digunakan untuk mendefinisikan sebuah validasi.


        
csharp

        

            
        

     
protected function rules()
{
    return [
        'email' => ['required', 'email'],
        'password' => ['required'],
    ];
}

Setelah itu, kita buat method baru lagi dengan nama login. Method ini akan dijalankan saat form di view disubmit.


        
csharp

        

            
        

     
public function login()
{

	//...
	
}

Di dalam method di atas, pertama kita panggil validasinya.


        
scss

        

            
        

     
// validate the input
$this->validate();

Setelah itu, kita lakukan proses login dengan guard customer menggunakan attempt.


        
php

        

            
        

     
if (auth()->guard('customer')->attempt([
    'email'     => $this->email,
    'password'  => $this->password,
]))

Jika proses login berhasil, maka kita akan membuat session flash dengan status success dan kita redirect ke URL /account/my-orders.


        
kotlin

        

            
        

     
// session flash
session()->flash('success', 'Login Berhasil');

// redirect to the desired page
return $this->redirect('/account/my-orders', navigate: true);

Jika proses login gagal, maka kita juga akan membuat session flash dengan status error dan kita redirect kembali ke halaman login.


        
kotlin

        

            
        

     
// flash error message if login fails
session()->flash('error', 'Periksa email dan password Anda.');

// redirect to the desired page
return $this->redirect('/login', navigate: true);

Langkah 4 - Membuat Form Login

Setelah kita berhasil membuat method login di dalam class component, maka sekarang kita lanjutkan membuat sebuah view untuk menginputkan email dan password untuk proses login.

Silahkan buka file resources/views/livewire/auth/login.blade.php kemudian masukkan kode berikut ini di dalamnya.


        
javascript

        

            
        

     
<div class="container">

    <div class="row justify-content-center mt-0">
        <div class="col-md-6">
            <div class="bg-white rounded-bottom-custom shadow-sm p-3 sticky-top mb-5">
                <div class="d-flex justify-content-start">
                    <div>
                        <x-buttons.back />
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm rounded mt-80">
                <div class="card-body p-5">
                    <h5 class="text-muted text-center mb-4">Login to your Account</h5>
                    <form wire:submit.prevent="login">

                        <div class="input-group mb-3">
                            <input type="email" wire:model.blur="email" value="{{ old('email') }}" class="form-control rounded @error('email') is-invalid @enderror" placeholder="Email Address">
                        </div>
                        @error('email')
                        <div class="alert alert-danger mt-2 rounded border-0">
                            {{ $message }}
                        </div>
                        @enderror

                        <div class="input-group mb-3">
                            <input type="password" wire:model.blur="password" class="form-control rounded @error('password') is-invalid @enderror" placeholder="Password">
                        </div>

                        @error('password')
                        <div class="alert alert-danger mt-2 rounded border-0">
                            {{ $message }}
                        </div>
                        @enderror

                        <button class="btn btn-orange-2 w-100 rounded" type="submit">Sign In</button>
                    </form>
                </div>
            </div>

            <div class="mt-4">
                <div class="text-center">
                    <span>Don't have an account?</span>
                    <a href="/register" class="text-decoration-none fw-bold text-orange ms-2" wire:navigate>Sign Up</a>
                </div>
            </div>

        </div>
    </div>

</div>

Di atas, pada bagian form untuk action-nya kita arahkan ke method register menggunakan wire:submit.


        
bash

        

            
        

     
<form wire:submit.prevent="login">

	//...
	
</form>

Dan untuk menangkap input form, kita bisa menggunakan wire:model. Berikut ini contohnya


        
kotlin

        

            
        

     
<input type="email" wire:model.blur="email" value="{{ old('email') }}" class="form-control rounded @error('email') is-invalid @enderror" placeholder="Email Address">

Di atas, kita tambahkan .blur pada directive wire:model, karena kita membutuhkan sebuah validasi yang realtime / reactive.

Dan untuk menampilkan sebuah error validasi, sama seperti Laravel pada umumnya, yaitu kita bisa menggunakan directive dari blade @error.


        
kotlin

        

            
        

     
@error('email')
    <div class="alert alert-danger mt-2 rounded border-0">
        {{ $message }}
    </div>
@enderror

Langkah 6 - Uji Coba Proses Login

Silahkan teman-teman buka link berikut ini http://localhost:8000/login, jika berhasil maka hasilnya kurang lebih seperti berikut ini.

Silahkan klik Sign In tanpa mengisi data apapun, maka akan menampilkan error validasi seperti berikut ini.

Sekarang, silahkan masukkan email dan password yang tidak ada di dalam database, jika berhasil maka akan menampilkan login failed seperti berikut ini.

Dan sekarang silahkan masukkan email dan password yang digunakan register sebelumnya, jika berhasil maka kita akan mendapatkan hasil seperti berikut ini.

Di atas, muncul error 404 | NOT FOUND karena halaman /account/my-orders belum kita buat.

SELESAI & LANJUTKAN