Halo teman-teman semuanya, setelah sebelumnya kita sudah berhasil membuat fungsi register, sekarang kita lanjutkan untuk membuat fungsi login di dalam project Laravel Livewire kita. Langsung saja kita mulai.
Langkah 1 - Membuat Component Login
Silahkan jalankan perintah di bawah ini untuk membuat component Login.
php artisan make:livewire auth.login
Di atas kita akan membuat sebuah component baru dengan nama login yang berada di dalam folder auth. Jika perintah di atas berhasil maka kita akan dibuatkan 2 file, yaitu class dan view.
app/Http/Livewire/Auth/Login.php
resources/views/livewire/auth/login.blade.php
Langkah 2 - Membuat Route Login
Sekarang kita lanjutkan untuk membuat route untuk component login, silahkan buka file routes/web.php kemudian tambahkan kode berikut ini di dalam group middleware guest dan tepat di bawah route register :
//login
Route::livewire('/login', 'auth.login')
->layout('layouts.app')->name('auth.login');
Atau jika ditulis dengan lengkap seperti berikut ini :
Route::group(['middleware' => 'guest'], function(){
//register
Route::livewire('/register', 'auth.register')
->layout('layouts.app')->name('auth.register');
//login
Route::livewire('/login', 'auth.login')
->layout('layouts.app')->name('auth.login');
});
Langkah 3 - Membuat Fungsi Login
Sekarang kita lanjutkan untuk menambahkan function login di dalam class Login. Silahkan buka file app/Http/Livewire/Auth/Login.php kemudian ubah kodenya menjadi seperti berikut ini :
<?php
namespace App\Http\Livewire\Auth;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
class Login extends Component
{
public $email;
public $password;
/**
* login
*
* @return void
*/
public function login()
{
$this->validate([
'email' => 'required|email',
'password' => 'required'
]);
if(Auth::attempt(['email' => $this->email, 'password'=> $this->password])) {
return redirect()->route('admin.dashboard');
} else {
session()->flash('error', 'Alamat Email atau Password Anda salah!.');
return redirect()->route('auth.login');
}
}
/**
* render
*
* @return void
*/
public function render()
{
return view('livewire.auth.login');
}
}
Pertama kita import Facades Auth dari Laravel, ini akan kita gunakan untuk proses Authentication dengan memanggil method attempt.
use Illuminate\Support\Facades\Auth;
Kemudian kita buat 2 public properti, ini akan digunakan untuk menampung input dari form login.
public $email;
public $password;
Dan di dalam function login kita deklarasikan sebuah validation untuk username dan password.
$this->validate([
'email' => 'required|email',
'password' => 'required'
]);
Dan function yang akan digunakan untuk proses Authentication kita menggunakan sintaks berikut ini :
Auth::attempt(['email' => $this->email, 'password'=> $this->password])
Jika proses Authentication berhasil kita akan di arahkan kesebuah route yang bernama admin.dashboard, akan tetapi jika proses Authentication gagal maka akan di arahkan ke route yang bernama auth.login dengan membawa pesan error.
if(Auth::attempt(['email' => $this->email, 'password'=> $this->password])) {
return redirect()->route('admin.dashboard');
} else {
session()->flash('error', 'Alamat Email atau Password Anda salah!.');
return redirect()->route('auth.login');
}
Langkah 4 - Membuat View Login
Setelah kita berhasil menambahkan function login, sekarang kita lanjutkan untuk membuat view untuk halaman login. Silahkan buka file resources/views/livewire/auth/login.blade.php kemudian ubah kodenya menjadi seperti berikut ini :
<div>
<div class="container" style="margin-top: 120px">
<div class="row justify-content-center">
<div class="col-md-4">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h5 class="text-center"> <i class="fa fa-user-circle"></i> LOGIN</h5>
<hr>
<form wire:submit.prevent="login">
<div class="form-group">
<label class="font-weight-bold">ALAMAT EMAIL</label>
<input type="text" wire:model.lazy="email"
class="form-control @error('email') is-invalid @enderror"
placeholder="Alamat Email">
@error('email')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label class="font-weight-bold">PASSWORD</label>
<input type="password" wire:model.lazy="password"
class="form-control @error('password') is-invalid @enderror" placeholder="Password">
@error('password')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-primary btn-block">LOGIN</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Di atas untuk action dari form kita arahkan ke function login yang berada di dalam component Login menggunakan directive wire:submit.
<form wire:submit.prevent="login">
Sekarang kita bisa mencoba menjalankan projectnya di http://localhost:8000/login kurang lebih tampilannya seperti berikut ini :
Sekarang kita uji coba untuk Authentication dengan data yang tidak ada di database, maka kurang lebih tampilannya seperti berikut ini :
Dan sekarang kita coba untuk data yang ada di dalam database, maka kurang lebih kita akan mendapatkan tampilan seperti berikut ini :
Di atas kita sebenarnya sudah berhasil melakukan Authentication, error di atas muncul karena kita belum membuat route dengan nama admin.dashboard. Di artikel selanjutnya kita akan belajar untuk membuat halaman Dashboard.
EBOOK MEMBANGUN TOKO ONLINE DENGAN LARAVEL DAN LIVEWIRE : https://bit.ly/ebook-laravel-livewire