My Course — Membangun Website Food Store Dengan Laravel Filament, Livewire dan Payment Gateway

Membuat Component Bottom Menu

Setelah berhasil membuat layout, maka sekarang kita akan belajar membuat component Bottom Menu. Disini kita akan membuat component-nya menggunakan blade milik Laravel.

Langkah 1 - Membuat Component Bottom Menu

Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan berada di dalam project Laravel-nya.


        
go

        

            
        

     
php artisan make:component menus.bottom --view

Jika perintah di atas berhasil dijalankan, maka kita akan mendapatkan file baru yang berada di dalam folder resources/views/components/menus/bottom.blade.php.

Silahkan teman-teman buka file tersebut, kemudian ubah kode-nya menjadi seperti berikut ini.


        
xml

        

            
        

     
<div class="container fixed-bottom mb-5">
    <div class="row justify-content-center">
        <div class="col-12 col-md-6">
            <div class="text-center bg-white rounded-menu p-1 shadow-sm">
                <ul class="nav nav-justified w-100">
                    <li class="nav-item">
                        <a href="/" class="nav-link text-dark fw-bold" wire:navigate>
                            <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-house"
                                fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd"
                                    d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z">
                                </path>
                                <path fill-rule="evenodd"
                                    d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z">
                                </path>
                            </svg>
                            <span class="small d-block mt-1">Home</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="/account/my-orders" class="nav-link text-dark fw-bold" wire:navigate>
                            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor"
                                class="bi bi-bag" viewBox="0 0 16 16">
                                <path
                                    d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z" />
                            </svg><span class="small d-block mt-1">My Orders</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="/cart" class="nav-link text-dark fw-bold" wire:navigate>
                            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor"
                                class="bi bi-cart" viewBox="0 0 16 16">
                                <path
                                    d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z">
                                </path>
                            </svg>
                            <span class="small d-block mt-1">Carts</span>
                        </a>
                    </li>
                    <li class="nav-item dropup">
                        <a href="/login" class="nav-link text-dark fw-bold" wire:navigate>
                            <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor"
                                class="bi bi-person" viewBox="0 0 16 16">
                                <path
                                    d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" />
                            </svg>
                            <span class="small d-block mt-1">Account</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Di atas, kita hanya membuat sintaks HTML biasa untuk navigasi pada menu Bottom.

Langkah 2 - Render Bottom Menu di Layout

Sekarang kita akan belajar bagaimana memanggil component bottom menu di atas di dalam file layout yang sudah kita buat sebelumnya.

Silahkan buka file resources/views/components/layouts/app.blade.php, kemudian ubah semua kode-nya menjadi seperti berikut ini.


        
xml

        

            
        

     
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://raw.githubusercontent.com/SantriKoding-com/assets-food-store/refs/heads/main/images/logo.png" type="image/x-icon">
    <meta name="description" content="@yield('description')">
    <meta name="keywords" content="@yield('keywords')">
    <meta name="author" content="Food Store">
    <meta name="robots" content="index, follow">
    <meta name="googlebot" content="index, follow">
    <meta content="@yield('title')" property="og:title">
    <meta content="@yield('description')" property="og:description">
    <meta content="@yield('image')" property="og:image">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    @livewireStyles
    @vite(['resources/css/app.css'])
</head>
<body>

    <!-- render content -->
    {{ $slot }}
    <!-- end render content -->

    <!-- bottom menu -->
    <x-menus.bottom />
    <!-- end bottom menu -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    @livewireScripts
    <script>
        @if(session()->has('success'))
            toastr.success('{{ session('success') }}', 'BERHASIL!'); 
        @elseif(session()->has('info'))
            toastr.info('{{ session('info') }}', 'INFO!');
        @elseif(session()->has('warning'))
            toastr.warning('{{ session('warning') }}', 'PERINGATAN!');
        @elseif(session()->has('error'))
            toastr.error('{{ session('error') }}', 'GAGAL!'); 
        @endif
    </script>
</body>
</html>

Di atas, kita telah memanggil component bottom menu dengan sintaks seperti berikut ini.


        
xml

        

            
        

     
<x-menus.bottom />

Dan seperti itulah cara memanggil component berbasis blade di Laravel. Teman-teman juga bisa mempelajarinya lebih jauh pada link berikut ini.

Laravel Component : https://laravel.com/docs/11.x/blade#components

SELESAI & LANJUTKAN