Day 4 — Blade Template & Layout Master
Fase: 1 — Fundamental Laravel | Minggu: 1 | Hari: Kamis
🎯 Tujuan Hari Ini
Peserta mampu membuat Layout Master (template induk) menggunakan Blade dan menerapkan konsep template inheritance sehingga tidak perlu menulis ulang HTML header dan footer di setiap halaman.
📋 Task Wajib
1. Masalah Tanpa Layout Master
Perhatikan file day 3: setiap file view memiliki <!DOCTYPE html>, <head>, dan <body> sendiri-sendiri. Jika kita punya 10 halaman dan ingin mengubah navbar, kita harus mengubah 10 file. Ini tidak efisien!
Solusi: Layout Master dengan Blade
2. Buat File Layout Master
Buat folder dan file: resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Magang RPL') — Program Magang</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #f5f5f5; }
nav {
background: #1a1a2e;
padding: 15px 30px;
display: flex;
gap: 20px;
align-items: center;
}
nav a {
color: #eee;
text-decoration: none;
font-size: 15px;
}
nav a:hover { color: #e94560; }
nav .brand { font-weight: bold; font-size: 18px; color: white; margin-right: auto; }
.container { max-width: 960px; margin: 30px auto; padding: 0 20px; }
.container h1 { margin-bottom: 15px; color: #1a1a2e; }
footer {
text-align: center;
padding: 20px;
background: #1a1a2e;
color: #aaa;
margin-top: 60px;
font-size: 13px;
}
</style>
@stack('styles')
</head>
<body>
<nav>
<span class="brand">🚀 Magang RPL</span>
<a href="/">Home</a>
<a href="/tentang">Tentang</a>
<a href="/kontak">Kontak</a>
</nav>
<div class="container">
@yield('content')
</div>
<footer>
<p>© {{ date('Y') }} Program Magang SMK RPL — Laravel Training</p>
</footer>
@stack('scripts')
</body>
</html>3. Refactor Semua View Menggunakan Layout
resources/views/home.blade.php (ganti total):
@extends('layouts.app')
@section('title', 'Beranda')
@section('content')
<h1>{{ $judul }}</h1>
<p>{{ $deskripsi }}</p>
<p>Tahun aktif: <strong>{{ $tahun }}</strong></p>
<div style="margin-top: 30px; padding: 20px; background: white; border-radius: 8px;">
<h2>Selamat Datang!</h2>
<p>Platform ini merupakan panduan harian peserta magang program RPL.</p>
</div>
@endsectionresources/views/tentang.blade.php (ganti total):
@extends('layouts.app')
@section('title', 'Tentang Tim')
@section('content')
<h1>Tim Magang Kami</h1>
<p>Program ini diikuti oleh 4 peserta dengan peran yang berbeda.</p>
<table style="width:100%; margin-top:20px; border-collapse:collapse; background:white;">
<thead>
<tr style="background:#1a1a2e; color:white;">
<th style="padding:12px; text-align:left;">No</th>
<th style="padding:12px; text-align:left;">Nama</th>
<th style="padding:12px; text-align:left;">Role</th>
</tr>
</thead>
<tbody>
@foreach ($anggota as $index => $orang)
<tr style="border-bottom: 1px solid #ddd;">
<td style="padding:12px;">{{ $index + 1 }}</td>
<td style="padding:12px;">{{ $orang['nama'] }}</td>
<td style="padding:12px;">{{ $orang['role'] }}</td>
</tr>
@endforeach
</tbody>
</table>
@endsectionresources/views/kontak.blade.php (ganti total):
@extends('layouts.app')
@section('title', 'Kontak')
@section('content')
<h1>Hubungi Kami</h1>
<p>Punya pertanyaan? Hubungi mentor melalui:</p>
<ul style="margin-top:15px; line-height: 2;">
<li>📧 Email: magang@brin.go.id</li>
<li>📍 Lokasi: Gedung BRIN, Jakarta</li>
<li>🕘 Jam Kerja: Senin–Jumat, 08.00–17.00</li>
</ul>
@endsection4. Pahami Direktif Blade Penting
| Direktif | Fungsi |
|---|---|
@extends('layouts.app') | "Halaman ini menggunakan layout app" |
@section('title', 'Beranda') | Mengisi slot title di layout |
@section('content') ... @endsection | Mengisi blok konten utama |
@yield('content') | Di layout: "isi konten di sini" |
@stack('scripts') | Di layout: slot untuk tambahan JS |
@push('scripts') ... @endpush | Di view: tambahkan JS ke slot above |
@foreach ... @endforeach | Perulangan |
@if ... @else ... @endif | Kondisi |
| Echo variabel (aman, di-escape XSS) |
{!! $html !!} | Echo variabel tanpa escape (raw HTML, hati-hati!) |
📝 Laporan ke Mentor
📌 LAPORAN HARIAN — Day 4
Nama : [Nama Lengkap]
Role : [Role Kamu]
✅ Yang saya kerjakan hari ini:
- [ ] Membuat file layouts/app.blade.php sebagai template induk
- [ ] Refactor home.blade.php menggunakan @extends
- [ ] Refactor tentang.blade.php menggunakan @extends
- [ ] Refactor kontak.blade.php menggunakan @extends
- [ ] Semua halaman tampil benar dengan navbar dan footer yang seragam
📸 Screenshot Wajib:
1. Halaman /tentang dengan navbar seragam dari layout master
2. Halaman /kontak dengan footer yang sama
3. Isi file layouts/app.blade.php
🧠 Apa yang saya pelajari hari ini:
[Jelaskan dengan kata-katamu sendiri manfaat Layout Master]
❓ Kendala:
[Tulis jika ada]Catatan Mentor
Tantang peserta yang selesai lebih awal untuk menambahkan active class pada link navigasi sesuai halaman yang sedang dibuka menggunakan request()->is('tentang').
Catatan Mentor
@stack dan @push adalah fitur Blade yang sangat berguna untuk memasukkan CSS/JS spesifik dari child view tanpa mengotori layout master. Perkenalkan ini secara singkat.