🎯 Tujuan Pembelajaran

  • Memahami konsep templating pada Laravel.
  • Membuat layout utama dengan Bootstrap dan menggunakannya di beberapa halaman.

🧩 Materi Pokok

  • Blade syntax dasar: @yield, @section, @include.
  • Pembuatan layout utama (layouts/app.blade.php).
  • Include header, footer, dan Bootstrap CDN.

🧪 Langkah Praktik

1. Buat Folder Layout

Buat file: resources/views/layouts/app.blade.php

2. Isi File Layout dengan Bootstrap

<!DOCTYPE html>
<html lang="id">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>@yield('title')</title>
 <!-- Bootstrap CSS CDN -->
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <header class="bg-primary text-white p-3 mb-4">
 <div class="container d-flex justify-content-between align-items-center">
 <h2 class="mb-0">Manajemen Produk</h2>
 <nav>
 <a href="/" class="text-white {{ request()->is('/') ? 'fw-bold' : '' }}">Home</a> |
 <a href="/about" class="text-white {{ request()->is('about') ? 'fw-bold' : '' }}">About</a> |
 <a href="/contact" class="text-white {{ request()->is('contact') ? 'fw-bold' : '' }}">Contact</a>
 </nav>
 </div>
 </header>

 <main class="container mb-4">
 @yield('content')
 </main>

 <footer class="bg-light text-center p-3">
 <p>&copy; {{ date('Y') }} - Manajemen Produk</p>
 </footer>

 <!-- Bootstrap Bundle JS (Popper + JS) -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

3. Gunakan Layout di View

Contoh penggunaan di home.blade.php:

@extends('layouts.app')

@section('title', 'Home')

@section('content')
<div class="text-center">
 <h3>Selamat Datang di Aplikasi Manajemen Produk</h3>
 <p class="lead">Gunakan menu di atas untuk navigasi halaman.</p>
</div>
@endsection

4. Highlight Menu Aktif

Sudah otomatis menggunakan request()->is() untuk menandai menu aktif dengan font-weight bold (fw-bold).

📝 Tugas / Latihan

  • Terapkan layout Bootstrap ke semua halaman (home, about, contact).
  • Kustomisasi warna header/footer dan navigasi aktif sesuai selera.

💡 Catatan Tambahan

Dengan Bootstrap, layout lebih responsive dan siap pakai komponen modern tanpa perlu menulis CSS manual.