Laravel Livewire Authentication #6 : Halaman Dashboard


Laravel Livewire Authentication #6 : Halaman 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


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

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