Auth:: Manajemen Halaman Dashboard | PART ||

 Pengantar

    Saat anda login anda sudah dapat melihat halaman dashboard pertama anda dengan 1 menu dashboard di bagian navbar. pada artikel kali ini kita akan menambahkan menu di navbar dan melakukan settingan pada halaman dashboard.

Manajamenen Halaman Dashboard

Menambah Menu Navbar

    Kali ini kita akan menambahkan menu di navbar. adapun menu yang kita tambahkan adalah => Dashboard, Database( Data User, Data Riwayat) dan Data. Database akan kita buat dalam bentuk dropdown. 

    Menu navbar ini bisa kita tambahkan dengan cara:

• Silahkan buka folder resources=>views=> layouts=>navigations. Perhatikan sintak lamanya:

<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">

    <!-- Primary Navigation Menu -->

    .....

            <div class="flex">

                <!-- Logo -->

                <div class="shrink-0 flex items-center">

                    <a href="{{ route('dashboard') }}">

                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800" />

                    </a>

                </div>

                <!-- Navigation Links -->

                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">

                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">

                        {{ __('Dashboard') }}

                    </x-nav-link>

                </div>

            </div>

           ....

</nav>

Tambahkan/Sempurnakan sintak berikut:

<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <div class="flex justify-between h-16">

            <div class="flex">

                <div class="shrink-0 flex items-center">

                    <a href="{{ route('dashboard') }}">

                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800" />

                    </a>

                </div>

                <div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex">

                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">

                        {{ __('Dashboard') }}

                    </x-nav-link>

                    <div class="hidden sm:flex sm:items-center">

                        <x-dropdown align="left" width="48">

                            <x-slot name="trigger">

                                <button

                                    class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none transition duration-150 ease-in-out">

                                    <div>{{ __('Database') }}</div>

                                    <div class="ms-1">

                                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"

                                            viewBox="0 0 20 20">

                                            <path fill-rule="evenodd"

                                                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"

                                                clip-rule="evenodd" />

                                        </svg>

                                    </div>

                                </button>

                            </x-slot>

                            <x-slot name="content">

                                <x-dropdown-link :href="route('database.users')">

                                    {{ __('Data User') }}

                                </x-dropdown-link>

                                <x-dropdown-link :href="route('database.riwayat')">

                                    {{ __('Data Riwayat') }}

                                </x-dropdown-link>

                            </x-slot>

                        </x-dropdown>

                    </div>

                    <x-nav-link :href="route('data')" :active="request()->routeIs('data')">

                        {{ __('Data') }}

                    </x-nav-link>

                </div>

            </div>

            <div class="hidden sm:flex sm:items-center sm:ms-6">

                <x-dropdown align="right" width="48">

                    <x-slot name="trigger">

                        <button

                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">

                            <div>{{ Auth::user()->name }}</div>

                            <div class="ms-1">

                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"

                                    viewBox="0 0 20 20">

                                    <path fill-rule="evenodd"

                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"

                                        clip-rule="evenodd" />

                                </svg>

                            </div>

                        </button>

                    </x-slot>

                    <x-slot name="content">

                        <x-dropdown-link :href="route('profile.edit')">

                            {{ __('Profile') }}

                        </x-dropdown-link>

                        <form method="POST" action="{{ route('logout') }}">

                            @csrf

                            <x-dropdown-link :href="route('logout')"

                                onclick="event.preventDefault();

                                            this.closest('form').submit();">

                                {{ __('Log Out') }}

                            </x-dropdown-link>

                        </form>

                    </x-slot>

                </x-dropdown>

            </div>

            <!-- Hamburger -->

            <div class="-me-2 flex items-center sm:hidden">

                <button @click="open = ! open"

                    class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">

                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">

                        <path :class="{ 'hidden': open, 'inline-flex': !open }" class="inline-flex"

                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"

                            d="M4 6h16M4 12h16M4 18h16" />

                        <path :class="{ 'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round"

                            stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

                    </svg>

                </button>

            </div>

        </div>

    </div>

    <div :class="{ 'block': open, 'hidden': !open }" class="hidden sm:hidden">

        <div class="pt-2 pb-3 space-y-1">

            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">

                {{ __('Dashboard') }}

            </x-responsive-nav-link>

            <div class="pt-2 pb-1 border-t border-gray-200">

                <div class="px-4 font-medium text-xs text-gray-400 uppercase tracking-wider">

                    {{ __('Database') }}

                </div>

                <div class="mt-1 space-y-1">

                    <x-responsive-nav-link :href="route('database.users')">

                        {{ __('Data User') }}

                    </x-responsive-nav-link>

                    <x-responsive-nav-link :href="route('database.riwayat')">

                        {{ __('Data Riwayat') }}

                    </x-responsive-nav-link>

                </div>

            </div>

            <x-responsive-nav-link :href="route('data')" :active="request()->routeIs('data')">

                {{ __('Data') }}

            </x-responsive-nav-link>

        </div>

        <div class="pt-4 pb-1 border-t border-gray-200">

            <div class="px-4">

                <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>

                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>

            </div>

            <div class="mt-3 space-y-1">

                <x-responsive-nav-link :href="route('profile.edit')">

                    {{ __('Profile') }}

                </x-responsive-nav-link>

                <form method="POST" action="{{ route('logout') }}">

                    @csrf

                    <x-responsive-nav-link :href="route('logout')"

                        onclick="event.preventDefault();

                                    this.closest('form').submit();">

                        {{ __('Log Out') }}

                    </x-responsive-nav-link>

                </form>

            </div>

        </div>

    </div>

</nav>

    Tunggu dulu, ini akan eror jika di jalankan karena kita belum melakukan konfigurasi pada route. ole mari buka web.php dan tambahkan sintak ini route.

Setting Route

    Buka Routes=>web.php silahkan tambahkan route berikut

Route::middleware('auth')->group(function () {

    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');

    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');

    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');

    // Route Tambahan

    Route::get('/database/users', function () {

        return view('database.users');

    })->name('database.users');

    Route::get('/database/riwayat', function () {

        return view('database.riwayat');

    })->name('database.riwayat');

    Route::get('/data', function () {

        return view('data');

    })->name('data');

});

Berikut hasilnya:

    Desain Halaman Dashboard

    Agar tampilan lebih menarik, silahkan buka dashboard.blade.php. anda dapat mengatur dan desain halamannya. ini salah satu contoh desainnya.

<x-app-layout>

    <x-slot name="header">

        <h2 class="font-semibold text-xl text-gray-800 leading-tight">

            {{ __('Dashboard') }}

        </h2>

    </x-slot>

    <div class="py-12">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">

                <div class="p-6 text-gray-900">

                    <h2 class="text-2xl font-bold mb-4">Selamat Datang di Dashboard</h2>

                    <p class="text-gray-700">Ini adalah halaman dashboard aplikasi Anda. Di sini

                </div>

            </div>

        </div>

    </div>

</x-app-layout>

Sekarang buat halaman data-user, data riwayat dan data. pastikan setiap di klik menu maka halaman akan tampil.