Halo apa kabarnya nih kalian? Semoga baik dan sehat selalu yah. Pada kesempatan kali ini mari kita lanjutkan pembahasan Laravel.
Sebelumnya kita masih melakukan setting standar atau global untuk proyek Laravel. Kali ini pembahasanya kita lanjut dengan mulai mencoba membuat proyek.
Kali ini abang menggunakan salah satu contoh proyek yang dibuat, yaitu sistem informasi penyewaan dengan kasusnya lapangan futsal. Jadi kalau ada model lain, silahkan saja. Tinggal kalian sesuaikan saja.
Proyek ini dipilih karena sangat fleksibel, kalian bisa ganti dengan yang lainnya seperti lapangan tenis atau lainnya yang masih mirip-mirip dengan contoh proyek yang kita bahas saat ini.
Sesuai judulnya, kita akan membuat Navbar yang rapih dan baik. Didalamnya juga akan kita bahas bagaimana setting layoutnya agar saat maintenance tidak ribet. Jadi tidak perlu berlama-lama lagi, so let’s check this out!
Setting Layout
Pertama yang perlu lakukan adalah setting layout. Setting ini tergantung konsep layout kalian seperti apa. Kalau ini contohnya adalah penyewaan, jadi semua contoh disini standar layoutnya adalah sistem informasi penyewaan.
Pertama saya buat folder Layouts di resource/views/ terus buat layout.blade.php seperti ini:
Selanjutnya setting layout-nya seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>@yield('title', 'Nama Apps Kalian')</title>
<!-- Bootstrap 5 CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Tailwind CSS -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
<!-- Optional: Bootstrap Icons CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Font CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<style>
.bg-custom-light {
background-color: #f8fafc;
}
</style>
<body class="bg-custom-light font-sans">
@include('partials.navbar')
<main class="container mt-4">
@yield('content')
</main>
@include('partials.footer')
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
@stack('scripts')
</body>
</html>Buat Navbar
Setelah sudah setting layout-nya, selanjutnya kita buatkan tampilan Navbar-nya dengan membuat navbar.blade.php.
Disini abang buat Navbar terpisah dari Layout agar mudah maintenance-nya, maka dari itu saya buat folder Partials di resource/views/ dan buat file dengan navbar.blade.php:
Berikut untuk tampilan navbar.blade-nya:
<style>
.hover-red-important:hover {
color: #dc2626 !important; /* red-600 */
}
.navbar-toggler {
width: 40px; /* Lebar tombol lebih kecil */
height: 40px; /* Tinggi tombol */
padding: 5px; /* Sedikit padding */
}
.navbar-toggler-icon {
background-size: 20px 20px; /* Ukuran icon hamburger jadi lebih kecil */
}
</style>
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
<img src="{{ asset('img/icon/icon.png') }}" alt="Diva Futsal Logo" style="max-height: 60px; height: auto; width: auto;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav align-items-center flex flex-col items-center w-full">
<li class="nav-item w-full text-center">
<a class="nav-link text-gray-700 hover-red-important" href="{{ url('/') }}">Home</a>
</li>
<li class="nav-item w-full text-center">
<a class="nav-link text-gray-700 hover-red-important" href="{{ route('about') }}">About</a>
</li>
<li class="nav-item w-full text-center">
<a class="nav-link text-gray-700 hover-red-important" href="{{ url('/schedule') }}">Schedule</a>
</li>
<li class="nav-item w-full text-center">
<a class="nav-link text-gray-700 hover-red-important" href="{{ url('/contact') }}">Contact</a>
</li>
<li class="nav-item w-full text-center">
<a class="nav-link text-gray-700 hover:text-primary" href="{{ url('/account') }}" title="Account">
<i class="bi bi-person-circle fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
Setelah buat navbarnya, kita harus buat dulu home.blade.php agar kita bisa lihat bentuk navbar.blade.php yang kita buat.
index.blade.php bisa kita buat seperti ini:
@extends('layouts.layout')
@section('title', 'Home - Nama Apps Kalian')
@section('content')
<style>
.title-red {
color: #dc2626; /* red-600 */
}
</style>
<!-- Banner Carousel -->
<div id="bannerCarousel" class="carousel slide rounded shadow-lg" data-bs-ride="carousel">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="{{ asset('img/banner/banner_1.png') }}" class="d-block w-100" alt="Banner 1" />
<div class="carousel-caption d-none d-md-block p-3"></div>
</div>
<div class="carousel-item">
<img src="{{ asset('img/banner/banner_2.png') }}" class="d-block w-100" alt="Banner 2" />
<div class="carousel-caption d-none d-md-block p-3"></div>
</div>
<div class="carousel-item">
<img src="{{ asset('img/banner/banner_3.png') }}" class="d-block w-100" alt="Banner 3" />
<div class="carousel-caption d-none d-md-block p-3"></div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#bannerCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#bannerCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
@endsectionKalian juga jangan lupa setting Routes agar bisa akses home.blade.php ini. Lokasinya di routes/web.php terus dalamnya ini:
<?php
use App\Http\Controllers\IndexController;
use Illuminate\Support\Facades\Route;
Route::get('/', [IndexController::class, 'index']);
Melihat sintaks diatas, abang menggunakan Controller agar lebih rapih dan terstruktur. Tapi kalau tidak pun tidak masalah. Tinggal ganti saja routenya untuk langsung return view nya home.blade.php.
Berikut ini bentuk Controllernya, bikinnya di app/http/controllers. Disini abang bikin namanya IndexController seperti di web.php atau routes yang kita buat sebelumnya.
Kalau kalian ganti ada sesuaikan juga tidak masalah untuk namanya. Berikut bentuk IndexControllernya:
<?php
namespace App\Http\Controllers;
class IndexController extends Controller
{
public function index()
{
return view('home');
}
}
Ini membuat saat akses (‘/’) maka routenya akan akses IndexController di index dan menampilkan home.blade.php.
Maka tampilannya navbar.blade.php seperti ini:
Kesimpulan
Dengan membuat navbar.blade.php, kita telah memisahkan bagian navigasi dari tampilan utama dan menjadikannya komponen yang dapat digunakan ulang di berbagai halaman.
Ini membantu menjaga kode tetap rapi, efisien, dan mudah dirawat. Menggunakan Blade @include atau @component memungkinkan kita menyusun layout secara modular, yang merupakan praktik terbaik dalam pengembangan aplikasi Laravel.
Selanjutnya, kamu bisa memperkaya navbar dengan fitur seperti autentikasi pengguna (misalnya menampilkan tombol Login/Logout), dropdown menu, atau responsif menggunakan Tailwind CSS atau framework CSS lainnya.