Laravel Livewire Authentication #6 : Halaman Dashboard

• Langkah 1 - Membuat Component Dashboard
• Langkah 2 - Membuat Route Dashboard
• Langkah 3 - Membuat View Dashboard

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