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