Laravel Livewire Authentication #6 : Halaman Dashboard


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

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.


EBOOK MEMBANGUN TOKO ONLINE DENGAN LARAVEL DAN LIVEWIRE : https://bit.ly/ebook-laravel-livewire


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

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

KOMENTAR