🎯 Tujuan

Memahami konsep Blade Template dan cara membuat layout utama yang dapat digunakan ulang di beberapa halaman, dengan routing lewat Controller.

🧩 Materi & Langkah Praktik

1. Apa itu Blade Template?

  • Blade adalah template engine bawaan Laravel.
  • Kita bisa menggunakan @yield, @section, dan @extends untuk membuat layout utama dan mewarisinya ke halaman lain.
  • Tujuannya agar tampilan konsisten dan mudah dikelola.

2. Buat Layout Utama

📂 Struktur folder:

resources/
└── views/
    └── layouts/
        └── main.blade.php

📝 resources/views/layouts/main.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'CRUD Produk')</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <nav class="navbar navbar-dark bg-dark">
        <div class="container">
            <a href="/" class="navbar-brand">CRUD Produk</a>

            <ul class="navbar-nav flex-row ms-auto">
                <li class="nav-item me-3">
                    <a href="/" class="nav-link text-white">Home</a>
                </li>
                <li class="nav-item me-3">
                    <a href="/about" class="nav-link text-white">About</a>
                </li>
                <li class="nav-item me-3">
                    <a href="/contact" class="nav-link text-white">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container mt-4">
        @yield('content')
    </div>
</body>
</html>

3. Buat Controller

Jalankan perintah:

php artisan make:controller HomeController

📝 app/Http/Controllers/HomeController.php:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function home()
    {
        return view('home');
    }

    public function about()
    {
        return view('about');
    }

    public function contact()
    {
        $data = [
            'name' => 'John Doe',
            'email' => '[email protected]'
        ];
        return view('contact', $data);
    }
}

4. Buat Halaman View

📂 Struktur folder:

resources/
└── views/
    ├── layouts/
    │   └── main.blade.php
    ├── home.blade.php
    ├── about.blade.php
    └── contact.blade.php

📝 resources/views/home.blade.php:

@extends('layouts.main')

@section('title', 'Halaman Utama')

@section('content')
<div class="text-center">
    <h1>Selamat Datang di CRUD Produk</h1>
    <p class="lead">Latihan Laravel untuk Pemula</p>
</div>
@endsection

📝 resources/views/about.blade.php:

@extends('layouts.main')

@section('title', 'Tentang Aplikasi')

@section('content')
<div class="card">
    <div class="card-body">
        <h4>Tentang Aplikasi</h4>
        <p>Aplikasi ini dibuat untuk latihan CRUD menggunakan Laravel dan Bootstrap 5.</p>
    </div>
</div>
@endsection

📝 resources/views/contact.blade.php:

@extends('layouts.main')

@section('title', 'Kontak')

@section('content')
<div class="card">
    <div class="card-body">
        <h4>Kontak</h4>
        <p>Nama: {{ $name }}</p>
        <p>Email: {{ $email }}</p>
    </div>
</div>
@endsection

5. Atur Route

📝 routes/web.php:

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'home']);
Route::get('/about', [HomeController::class, 'about']);
Route::get('/contact', [HomeController::class, 'contact']);

✅ Struktur Akhir Project

project-laravel/
├── app/
│   └── Http/
│       └── Controllers/
│           └── HomeController.php
├── resources/
│   └── views/
│       ├── layouts/
│       │   └── main.blade.php
│       ├── home.blade.php
│       ├── about.blade.php
│       └── contact.blade.php
├── routes/
│   └── web.php
└── vendor/

📝 Tugas/Latihan

  1. Buat halaman baru bernama services.blade.php menggunakan layout yang sama.
  2. Tampilkan daftar layanan sederhana.
  3. Tambahkan method services() di HomeController.
  4. Buat route baru /services.