Membuat menu Navigasi:Tutorial Blog Laravel 9

Membuat menu Navigasi. Halo semua kembali lagi di tutorial lanjutan membuat blog dengan laravel 9. kali ini kita akan membuat menu navigasi di halaman admin agar kita lebih mudah dalam mengakses halaman halaman yang kita butuhkan nantinya.

Oh iya buat temen temen yang baru baca artikel ini, ini adalah artikel lanjuta dari seti tutorial membuat aplikasi blog sederhana menggunakan laravel 9. jika kalian tertarik silahkan ikuti dari awal sehingga bisa mengikuti alur pembuatan aplikasi ini.

Read More

Untuk menambahkan menu di halaman admin dashboadr sangatlah mudah silahkan kamu buka file app.blade.php yang ada di folder resources/views/layouts lalu ubah sebua kodenya menhadi seperti di bawah ini :

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">

    <!-- Scripts -->

    <link href="{{asset('assets/lib/bootstrap/css/bootstrap.min.css')}}" rel="stylesheet">

</head>

<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                        @if (Route::has('login'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        @endif

                        @if (Route::has('register'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                        @endif
                        @else
                        <li class="nav-item dropdown">

                            <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                {{ Auth::user()->name }}
                            </a>

                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                <a href="{{url('admin/dashboard')}}" class="dropdown-item">Dashboard</a>
                                <a href="{{url('admin/categories')}}" class="dropdown-item">Categories</a>
                                <a href="{{url('admin/posts')}}" class="dropdown-item">Posts</a>
                                <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                    {{ __('Logout') }}
                                </a>

                                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                    @csrf
                                </form>
                            </div>
                        </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
        </main>
    </div>
    <script src="{{asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
    <script src="{{asset('assets/lib/jquery/jquery-3.6.3.min.js')}}"></script>
</body>

</html>

Lalu save kemudian aktifkan apache dan mysql yang ada di xampp lalu jalankan juga server laravel dengan mengetik perintah php artisan serve. Kemudian buka browser ketik url http://localhost:8000/login kemudian login menggunakan akun kalian jika sudah maka di menu dropdown yang ada di sebelah kanan akan ada menu baru yaitu Dashboard, Categories, Post dan logout.

Membuat menu Navigasi

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *