Laravel Livewire Authentication #1 : Installasi dan

Persiapan

Fika Ridaul Maulayya 

I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I
share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
31 Agustus 2020
 
Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan
belajar bagaimana cara membuat Authentication di Laravel dan Livewire,
Authentication disini akan meliputi beberapa fitur, diantaranya adalah :

 Register
 Login
 Dashboard
 Logout

Dan nanti kita juga akan belajar mengimplementasikan SPA atau Single Page

Application di dalam project Authentication dengan Turbolinks. Di artikel

pertama ini kita akan belajar terlebih dahulu untuk installasi project Laravel
dan menjalankan migration.

Langkah 1 - Installasi Composer

Pertama sebelum kita membuat project Laravel baru, pastikan teman-teman

sudah menginstall Composer, karena untuk proses membuat project Laravel
nanti akan menggunakan Composer. Untuk installasi Composer teman-teman
bisa lihat dari situs resminya https://getcomposer.org/ dan silahkan di install
sesuai dengan sistem operasi masing-masing.
Untuk memastikan apakah komputer kita sudha terinstall dengan Composer,
teman-teman bisa menjalankan perintah di bawah ini di dalam CMD atau
terminal.
composer

Jika berhasil maka kuranng lebih tampilannya seperti berikut ini :

Langkah 2 - Installasi Project Laravel

Setelah kita berhasil menginstall Composer, selanjutnya kita sudah bisa

membuat project laravel baru. Silahkan masuk ke folder dimana teman-teman
akan menyimpan projectnya, jika menggunakan XAMPP umumnya berada di
dalam folder htdocs. Dan kemudian silahkan jalankan perintah di bawah ini :
composer create-project --prefer-dist laravel/laravel livewire-auth
Perintah di atas akan membuat project Laravel baru dengan nama livewire-
auth. Silahkan tunggu proses installasinya sampai selesai dan pastikan teman-
teman terhubung dengan internet, karena semua dependensi akan di unduh
secara online.

Jika proses installasi sudah selesai, sekarang kita bisa menjalankan project
Laravelnya. Silahkan jalankan perintah di bawah ini :
cd livewire-auth

Perintah di atas digunakan untuk masuk ke dalam directory / folder project.

Setelah berhasil masuk ke dalam directory, kemudian jalankan perintah di
bawah ini :
php artisan serve

Jika berhasil maka project kita akan di jalankan menggunakan port 8000 di

dalam localhost, http://localhost:8000 jika berhasil kurang lebih tampilannya
seperti berikut ini :
Langkah 3 - Konfigurasi Koneksi Database

Slanjutnya kita akan mengkonfigurasi koneksi database, silahkan buka

file .env kemudian cari kode beikut ini :
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Kemudian silahkan ubah menjadi seperti berikut ini :

DB_DATABASE=db_livewire_auth
DB_USERNAME=root
DB_PASSWORD=

Di atas kita buat untuk nama database yang akan kita gunakan
adalah db_livewire_auth dan untuk password silahkan disesuaikan dengan
konfigurasi dari MySQL masing-masing. Jika menggunakan XAMPP secara
default adalah kosong atau tidak perlu diisi.
CATATAN : Jika kita melakukan perubahan di dalam file .env maka kita harus
melakukan restart server laravel untuk memastikan perubahan yang
dilakukan.

Silahkan tekan CTRL + C pada server Laravel dan jalankan kembali servernya

dengan perintah berikut ini :
php artisan server

Langkah 4 - Membuat Database

Setelah kita berhasil mengatur koneksi database, sekarang kita lanjutkan

untuk membuat databasenya, silahkan
buka http://localhost/phpmyadmin kemudian buat database baru dengan
nama db_livewire_auth. Kurang lebih seperti berikut ini :
Langkah 5 - Menjalankan Migration

Secara default ketika kita menginstall Laravel, maka kita sudah di sediakan
migration untuk table users dan Model User, jadi kita tidak perlu susah payah
membuatnya dari awal. Sekarang kita akan menjalankan migration untuk
men-generate migration tersebut menjadi sebuah table di dalam database.

Silahkan jalankan perntah di bawah ini :

php artisan migrate

Jika berhasil maka teman-teman akan mendapatkan beberapa table di dalam

database dan kususnya adalah table users.

Laravel Livewire Authentication #2 : Installasi Livewire

Fika Ridaul Maulayya 
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I
share everything i know with Articles, Screencasts and E-Books at SantriKoding.com
31 Agustus 2020
 

Halo teman-teman semuanya, pada kesempatan kali ini kita akan belajar
bagaimana cara installasi Livewire di dalam project laravel kita. Livewire
merupakan Full-Stack Framework untuk Laravel, dengan Livewire kita bisa
membuat website modern tanpa harus menggunakan JavaScript dan kita bisa
fokus dengan kode Back-End.

Livewire memungkinkan kita membuat Two-way Data Binding atau rective blade

layaknya aplikasi yang dikembangkan menggunakan JavaScript Framework
seperti Vue Js dan React Js. Dan enaknya kita tidak perlu susah payah
memahami JavaScript. Langsung saja kita mulai.

Langkah 1 - Installasi Livewire

Silahkan masuk ke folder project kemudian jalankan perintah di bawah ini :

composer require livewire/livewire:^1.3.3
Silahkan tunggu proses installasi Livewire sampai selesai, pastikan teman-
teman terhubung dengan internet, karena package ini akan diunduh secara
online.

Langkah 2 - Membuat Layout Project

Setelah proses installasi Livewire selesai, sekarang kita lanjutkan untuk

memanggil Livewire di dalam layout project kita. Silahkan buat sebuah 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 masukkan
kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Livewire Authentication</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.14.0/css/all.min.css">
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link href="https://fonts.googleapis.com/css2?
family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
@livewireStyles
@livewireScripts
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{ mix('js/app.js') }}"></script>
<style>
body {
font-family: 'Quicksand', sans-serif;
background: #e0ebf3
}
</style>
</head>
<body>
@yield('content')

<script>
@if(session()->has('success'))
 toastr.success('{{ session('success') }}')
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}')
@endif
</script>
</body>
</html>

Di atas kita menambahkan beberapa plugin untuk kebutuhan project kita

nanti, diantaranya adalah :

 Bootstrap - digunakan untuk membuat tampilan responsive dan cepat.

 Font Awesome - digunakan untuk membuat icon pada project.
 Toastr - digunakan untuk membuat alert dengan elegan.

Di atas untuk installasi Livewire di dalam project, teman-teman bisa

perhatikan pada sintaks :
@livewireStyles
@livewireScripts

Kemudian untuk kode berikut ini. digunakan untuk menampilkan content dari
project kita.
@yield('content')

Dan untuk alert nanti kita menggunakan Toastr dengan kode seperti berikut

ini :
@if(session()->has('success'))
toastr.success('{{ session('success') }}')
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}')
@endif

Laravel Livewire Authentication #3 : Installasi

Turbolinks
Fika Ridaul Maulayya 
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share
everything i know with Articles, Screencasts and E-Books at SantriKoding.com
31 Agustus 2020

 
Halo teman-teman semuanya, pada kesempatan kali ini kita akan belajar
untuk menginstall Turbolinks di dalam project laravel Livewire
kita. Turbolinks di gunakan untuk membuat project kita menjadi SPA (Single
Page Application) atau berpindah-pindah halaman tanpa harus melakukan
sebuah reload page. Dan untuk Installasi dan konfigurasi di dalam Livewire ini
sangat mudah dan simple sekali, langsung saja kita mulai.
Langkah 1 - Installasi Node Js

Pastikan teman-teman sudah menginstall Node Js terlebih dahulu, karena

kita nanti akan menggunakan NPM atau Node Package Manager dri Node
Js untuk mengunduh dependensi Turbolinks dari repository.

Untuk installasi Node Js, silahkan bisa mengunjungi situs resminya

di https://nodejs.org/en/download/ dan silahkan disesuaikan dengan sistem
operasinya masing-masing.

Untuk mengetahui apakah komputer kita sudah terinstall Node Js dan NPM, kita

bisa mencoba menjalankan perintah di bawah ini di dalam CMD atau terminal.
node -v
npm -v

Jika perintah di atas keluar versi dari Node Js dan NPM, maka kita sudah
berhasil menginstall Node Jd di dalam komputer kita.

Langkah 2 - Installasi Turbolinks

Silahkan masuk ke dalam folder project kita dan jalankan perintah di bawah
ini :
npm install
npm install turbolinks

Silahkan di tunggu proses installasinya sampai selesai, dan pastikan harus

terhubung dengan internet, karena semua dependensi akan diunduh secara
online.

Langkah 3 - Konfigurasi Turbolinks

Setelah proses installasi Turbolinks selesai, sekarang kita lanjutkan untuk
konfigurasi Turbolinks di dalam project kita. Silahkan buka
file resources/js/app.js kemudian tambahkan kode berikut ini :
var Turbolinks = require("turbolinks")
Turbolinks.start()

Setelah itu kita akan lakukan compiling file app.js menggunakan Laravel MIX,

silahkan jalankan perintah di bawah ini :

npm run dev

Silahkan di tunggu proses bundling atau coompiling dari semua file JavaScript
di dalam project Laravel kita. Kemudian untuk menggunkan kita bisa panggil
file app.js di dalam layouts project kita.

Jika kita perhatikan di dalam file resources/layouts/app.blade.php kita sudah

menambahkan file app.js, kurang lebih sintaksnya seperti berikut ini :
<script src="{{ mix('js/app.js') }}"></script>

Artinya sekarang project kita sudah terintegrasi dengan Turbolinks dan kita

bisa membuat project kita menjadi SPA atau Single Page Application.

Laravel Livewire Authentication #4 : Proses Register

Fika Ridaul Maulayya 
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share
everything i know with Articles, Screencasts and E-Books at SantriKoding.com
31 Agustus 2020

 
Halo teman-teman semuanya, sekarang kita akan belajar membuat proses
register dengan Laravel dan Livewire. Jika di Laravel untuk membuat logic
application ada di dalam controller, maka di Livewire kita tidak akan
menggunakan controller lagi melainkan component. Keuntungan
menggunakan component salah satunya adalah reusable, yaitu bisa
digunakan berulang kali tanpa harus menuliskannya lagi.

Langkah 1 - Membuat Component Register

Silahkan masuk di dalam folder project kemudian jalankan perintah di bawah

ini untuk membuat component Register.
php artisan make:livewire auth.register

Di atas kita akan membuat sebuah component baru dengan

nama register 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/Register.php
resources/views/livewire/auth/register.blade.php

Langkah 2 - Membuat Route Register

Sekarang kita lanjutkan untuk membuat route untuk component register,

silahkan buka file routes/web.php kemudian tambahkan kode berikut ini :
Route::group(['middleware' => 'guest'], function(){

//register
Route::livewire('/register', 'auth.register')
->layout('layouts.app')->name('auth.register');

});
Di atas untuk route register kita taruh di dalam middleware guest dan jika kita
perhatikan lagi untuk route register akan menggunakan layouts yang
bernama app.blade.php yang berada di dalam folder resources/layouts.
->layout('layouts.app')

Langkah 3 - Membuat Fungsi Register

Pertama kita akan membuat fungsi register di dalam class Register, silahkan
buka file app/Http/Livewire/Auth/Register.php kemudian ubah kodenya menjadi
seperti berikut ini :
<?php

namespace App\Http\Livewire\Auth;

use App\User;
use Livewire\Component;

class Register extends Component

{
public $name;
public $email;
public $password;
public $password_confirmation;

/**
* store
*
* @return void
*/
public function store()
{
$this->validate([
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required|confirmed'
]);

$user = User::create([
'name' => $this->name,
'email' => $this->email,
'password' => bcrypt($this->password)
]);

if($user) {
 session()->flash('success', 'Register Berhasil!.');
return redirect()->route('auth.login');
}
}

/**
* render
*
* @return void
*/
public function render()
{
return view('livewire.auth.register');
}
}

Pertama kita import Model User terlebih dahulu, karena kita akan menggunakan

model ini untuk memasukkan data user ke dalam database.
use App\User;

Di atas kita juga membuat beberapa public properti untuk kebutuhan data

register, yaitu :
public $name;
public $email;
public $password;
public $password_confirmation;

Kemudian kita membuat function store, fungsi ini akan digunakan untuk

menyimpan data yang di inputkan dari form ke database. Dan di
dalam function store kita juga membuat sebuah validasi, kurang lebih seperti
berikut ini :
$this->validate([
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required|confirmed'
]);
Jika validasi di atas terpenuhi maka akan melakukan penambahan data user
menggunakan sintaks eperti berikut ini :
$user = User::create([
'name' => $this->name,
'email' => $this->email,
'password' => bcrypt($this->password)
]);

Kemudian kita membuat sebuah kondisi, jika data user berhasil di simpan ke
dalam database maka akan menampilkan pesan sukses dan di arahkan ke
dalam route yang bernama auth.login
if($user) {
session()->flash('success', 'Register Berhasil!.');
return redirect()->route('auth.login');
}

Langkah 4 - Membuat View Register

Setelah kita berhasil membuat fungsi untuk register, sekarang kita lanjutkan
untuk membuat halaman viewnya. Silahkan buka
file resources/views/livewire/auth/register.blade.php  dan ubah kodenya menjadi
seperti berikut ini :
<div>
<div class="container" style="margin-top: 120px">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h5 class="text-center"> <i class="fa fa-user-plus"></i>
REGISTER</h5>
<hr>
<form wire:submit.prevent="store">

<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">NAMA
LENGKAP</label>
 <input type="text" wire:model.lazy="name"
class="form-control @error('name') is-invalid @enderror"
placeholder="Nama lengkap">
@error('name')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
</div>
<div class="col-md-6">
<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>
</div>

<div class="row">
<div class="col-md-6">
<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>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="font-weight-bold">KONFIRMASI
PASSWORD</label>
<input type="password"
wire:model.lazy="password_confirmation"
class="form-control"
placeholder="Konfirmasi Password">
</div>
</div>
</div>
 <button type="submit" class="btn btn-primary btn-
block">REGISTER</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

Jika teman-teman perhatikan di atas untuk action dari form kita arahkan ke
dalam function store yang berada di dalam component register menggunakan
directive wire:submit.
<form wire:submit.prevent="store">

Sekarang teman-teman bisa mencoba menjalankan projectnya

di http://localhost:8000/register maka kurang lebih hasilnya seperti berikut ini :
Sekarang kita bisa mencoba menambahkan data user baru ke dalam
database, silahkan diisi untuk inputan nama, email, password dan konfirmasi
password. Jika berhasil maka kurang lebih tampilannya sperti berikut ini :

Di atas sebenarnya kita sudah berhasil membuat fungsi register, error di atas
muncul karena kita belum memiliki route yang bernama auth.login, di artikel
selanjutnya kita akan membuat component untuk login.

Laravel Livewire Authentication #5 : Proses Login

Fika Ridaul Maulayya 
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share
everything i know with Articles, Screencasts and E-Books at SantriKoding.com
31 Agustus 2020

 
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.

Laravel Livewire Authentication #6 : Halaman

Dashboard
Fika Ridaul Maulayya 
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share
everything i know with Articles, Screencasts and E-Books at SantriKoding.com
31 Agustus 2020

 
Halo teman-teman semuanya, setelah sebelumnya kita sudah berhasil
membuat proses Authentication dengan Laravel dan Livewire, sekarang kita
lanjutkan untuk membuat halaman Dashboard.

Langkah 1 - Membuat Component Dashboard

Silahkan jalankan perintah di bawah ini untuk membuat component

Dashboard.
php artisan make:livewire admin.dashboard

Di atas kita akan membuat sebuah component baru dengan

nama dashboard yang berada di dalam folder admin. Jika perintah di atas berhasil
maka kita akan dibuatkan 2 file, yaitu class dan view.
app/Http/Livewire/Admin/Dashboard.php
resources/views/livewire/admin/dashboard.blade.php

Langkah 2 - Membuat Route Dashboard

Sekarang kita lanjutkan untuk membuat route untuk Dashboard. Silahkan

buka file routes/web.php kemudian tambahkan route berikut ini :
Route::group(['middleware' => 'auth'], function(){

//dashboard
Route::livewire('/admin/dashboard', 'admin.dashboard')
->layout('layouts.app')->name('admin.dashboard');

});

Di atas untuk route dashboard kita taruh di dalam group middleware auth.

Langkah 3 - Membuat View Dashboard

Sekarang kita lanjutkan untuk membuat halaman untuk dashboardnya.
Silahkan buka file resources/views/livewire/admin/dashboard.blade.php  kemudian
ubah kodenya menjadi seperti berikut ini :
<div>
<div class="container-fluid" style="margin-top: 50px">
<div class="row">
<div class="col-md-3">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h5> <i class="fa fa-list-ul"></i> MAIN MENU</h5>
<hr>
<ul class="list-group">
<li class="list-group-item"><i class="fas fa-tachometer-
alt"></i> DASHBOARD</li>
<li class="list-group-item"><i class="fas fa-tags"></i>
TAGS</li>
<li class="list-group-item"><i class="fas fa-folder"></i>
CATEGORIES</li>
<li class="list-group-item"><i class="fas fa-book"></i>
POSTS</li>
<li class="list-group-item active">LOGOUT <i class="fas
fa-sign-out-alt"></i></a>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card border-0 rounded shadow">
<div class="card-body">
<h5> <i class="fa fa-tachometer-alt"></i> DASHBOARD</h5>
<hr>
Selamat Datang <strong>{{ auth()->user()->name }}</strong>
</div>
</div>
</div>
</div>
</div>
</div>

Sekarang kita bisa mencoba membuat dashboard

di http://localhost:8000/admin/dashboard maka kurang lebih tampilannya
seperti berikut ini :
Di artikel selanjutnya kita akan belajar membuat proses Logout dari project
kita.

Laravel Livewire Authentication #7 : Proses Logout

Fika Ridaul Maulayya 
I'm a Full-Stack Web Developer, Content Creator and CO-Founder Santri Koding. I share
everything i know with Articles, Screencasts and E-Books at SantriKoding.com
31 Agustus 2020

 
Halo teman-teman semuanya, sebelumnya kita sudah berhasil membuat
proses Authentication dan halaman Dashboard, maka sekarang kita lanjutkan
untuk membuat proses Logout.

Disini kita akan membuat component dan component tersebut kita panggil di
view pada halaman dashboard. Langsung saja kita mulai.

Langkah 1 - Membuat Component Logout

Silahkan jalankan perintah di bawah ini untuk membuat component Logout.

php artisan make:livewire admin.logout

Di atas kita akan membuat sebuah component baru dengan nama logout yang

berada di dalam folder admin. Jika perintah di atas berhasil maka kita akan
dibuatkan 2 file, yaitu class dan view.
app/Http/Livewire/Admin/Logout.php
resources/views/livewire/admin/logout.blade.php

Langkah 2 - Membuat Fungsi Logout

Sekarang kita akan menambahkan fungsi untuk proses logout di dalam

component Logout. Silahkan buka
file app/Http/Livewire/Admin/Logout.php kemudian ubah kodenya menjadi seperti
berikut ini :
<?php

namespace App\Http\Livewire\Admin;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;

class Logout extends Component

{
/**
 * logout
*
* @return void
*/
public function logout()
{
Auth::logout();
return redirect()->route('auth.login');
}

public function render()

{
return view('livewire.admin.logout');
}
}

Pertama kita import Facades Auth terlebih dahulu dari Laravel, ini akan kita
gunakan untuk proses Logout.
use Illuminate\Support\Facades\Auth;

Kemudian kita buat function logout, dimana di dalamnya kita

memanggil Auth::logout yang merupakan salah satu method yang ada di
dalam Facades Auth.

Auth::logout();

Setelah itu akan di arahkan ke route yang bernama auth.login

return redirect()->route('auth.login');

Langkah 3 - Membuat View Logout

Sekarang kita lanjutkan untuk membuat viuew untuk proses Logout, silahkan
buka file resources/views/livewire/admin/logout.blade.php  kemudian ubah kodenya
menjadi seperti berikut ini :
<div>
<a wire:click="logout" class="list-group-item active" style="cursor:
pointer">LOGOUT <i class="fas fa-sign-out-alt"></i></a>
</div>

Di atas kita menggunakan directive wire:click yang mengarah ke function

logout yang ada di dalam component. Kemudian selanjutnya kita akan panggil
component logout ini di dalam dashboard.

Langkah 4 - Render Component Logout di Dashboard

Silahkan buka file resources/views/livewire/admin/dashboard.blade.php  kemudian

cari kode berikut ini :
<li class="list-group-item active">LOGOUT <i class="fas fa-sign-out-alt"></i></a>

Kemudian ubahlah menjadi seperti berikut ini :

<livewire:admin.logout/>

Kode di atas kita gunakan untuk memanggil component logout di dalam view
dashboard. Sekarang kita bisa mencoba menjalankan proses Logout di dalma
project kita.