Layouts dan Sections

Chapter sebelumnya memperkenalkan mekanisme @extends/@section/@yield pada kasus minimal: satu section konten dan satu footer. Aplikasi nyata jarang sesederhana itu — satu halaman kerap memuat judul jendela, judul tampilan, sidebar, konten utama, footer, sampai script khusus. Chapter ini menyusun layout utama yang utuh di resources/views/layouts/app.blade.php, lalu membedah perbedaan @section/@show versus @section/@endsection, nuansa @parent, directive @hasSection, dan pratinjau @stack untuk script. Semua contoh dirender lewat HTTP sungguhan agar kita melihat HTML final yang dikirim ke browser.

Layout Utama untuk Seluruh Halaman #

Kita mulai dari berkas resources/views/layouts/app.blade.php — satu-satunya tempat kerangka HTML didefinisikan:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>@yield('title', 'TugasKu')</title>
    @stack('styles')
</head>
<body>
    <header>
        <strong>TugasKu</strong> &mdash; @yield('judul-halaman', 'Beranda')
    </header>

    <div class="layout">
        @hasSection('sidebar')
            <aside class="sidebar">
                @yield('sidebar')
            </aside>
        @endif

        <main>
            @yield('konten')
        </main>
    </div>

    <footer>
        @section('footer')
            &copy; 2026 TugasKu
        @show
    </footer>

    @stack('scripts')
</body>
</html>

Tiga pola section hidup berdampingan di berkas ini. @yield('title', 'TugasKu') adalah slot murni dengan default — anak boleh mengisinya, dan default dipakai bila anak diam. @yield('sidebar') sengaja tidak diberi default karena kehadirannya dijaga @hasSection. Adapun pasangan @section('footer') ... @show mendefinisikan konten default sekaligus menampilkannya langsung — anak boleh menimpa maupun menambahnya dengan @parent.

@section/@show untuk Layout, @section/@endsection untuk Anak #

Kedua pasangan directive ini sering tertukar karena namanya sama. Pembedaannya ada pada siapa yang menulis dan di mana:

Aturan praktisnya: @show milik layout, @endsection milik anak. Bila tertukar — layout menutup dengan @endsection — kontennya tidak pernah tampil karena section hanya didefinisikan tanpa di-@yield. Daftar lengkap directive section beserta perilakunya bisa dirujuk di dokumentasi Blade .

Halaman Anak dengan Beberapa Section #

Halaman resources/views/dashboard.blade.php mengisi empat section sekaligus plus satu @push:

@extends('layouts.app')

@section('title', 'Dashboard')

@section('judul-halaman', 'Ringkasan Pekan')

@section('sidebar')
    <h3>Filter</h3>
    <ul>
        <li>Status: semua</li>
        <li>Prioritas: tinggi</li>
    </ul>
@endsection

@section('konten')
    <h2>Statistik Pekan Ini</h2>
    <p>Selesai 4 tugas, tertunda 2 tugas.</p>
@endsection

@section('footer')
    @parent
    Diperbarui otomatis setiap pagi.
@endsection

@push('scripts')
    <script src="/js/dashboard.js"></script>
@endpush

Route cukup memanggil Route::view('/dashboard', 'dashboard'). Output yang Dihasilkan:

=== GET /dashboard → HTTP 200 ===
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    </head>
<body>
    <header>
        <strong>TugasKu</strong> &mdash; Ringkasan Pekan    </header>

    <div class="layout">
                    <aside class="sidebar">
                    <h3>Filter</h3>
    <ul>
        <li>Status: semua</li>
        <li>Prioritas: tinggi</li>
    </ul>
            </aside>

        <main>
                <h2>Statistik Pekan Ini</h2>
    <p>Selesai 4 tugas, tertunda 2 tugas.</p>
        </main>
    </div>

    <footer>
                        &copy; 2026 TugasKu
            Diperbarui otomatis setiap pagi.
    </footer>

        <script src="/js/dashboard.js"></script>
</body>
</html>

Perhatikan empat hasil sekaligus: <title> terisi Dashboard dari anak, header memakai Ringkasan Pekan, sidebar tampil berisi filter, dan footer berisi default layout ditambah baris milik anak. Script dari @push muncul tepat di posisi @stack('scripts') sebelum </body> — daftar lengkapnya di chapter Blade Stacks. Bagian head pun memantulkan pola yang sama: karena halaman ini tidak mengirim apa pun ke stack styles, baris @stack('styles') dirender kosong tanpa menyisakan elemen apa pun.

Sidebar Bersyarat dengan @hasSection #

Halaman resources/views/laporan.blade.php sengaja tidak mendefinisikan section sidebar — cocok untuk tampilan cetak yang butuh lebar penuh:

@extends('layouts.app')

@section('title', 'Laporan Bulanan')

@section('konten')
    <h2>Laporan Bulanan</h2>
    <p>Tabel laporan cetak tanpa sidebar.</p>
@endsection

Bagian penting dari hasil GET /laporan:

    <div class="layout">

        <main>
                <h2>Laporan Bulanan</h2>
    <p>Tabel laporan cetak tanpa sidebar.</p>
        </main>
    </div>

    <footer>
                    &copy; 2026 TugasKu
            </footer>

Elemen <aside> hilang sama sekali — bukan sekadar kosong. Inilah bedanya @hasSection dengan pemeriksaan isi: layout menanyakan “apakah anak mengisi section ini?” lalu memutuskan apakah kerangka sidebar perlu dirender. Kebalikannya, @sectionMissing('sidebar') bernilai true saat section belum diisi — berguna untuk menampilkan pesan atau konten cadangan.

Dua hal layak diperhatikan saat menata banyak section sekaligus. Pertama, nama section bebas kita pilih, tetapi konsistensi itu yang membuat layout mudah dirawat — title untuk judul jendela, judul-halaman untuk heading tampak, sidebar dan konten untuk wilayah utama, footer untuk kaki halaman. Kedua, section yang tidak diisi anak tidak meninggalkan jejak di HTML final, jadi layout boleh menyediakan banyak slot tanpa takut halaman sederhana menjadi penuh elemen kosong.

Nuansa @parent pada Bentuk Blok dan Inline #

Directive @parent hanya berlaku di dalam @section ... @endsection berbentuk blok. Bentuk satu baris @section('footer', 'teks') menimpa seluruh default layout — @parent tidak bisa disisipkan karena tidak ada tempat menuliskannya. Kita uji kedua bentuk pada section footer layout ini; hasil render bentuk blok:

    <footer>
                        &copy; 2026 TugasKu
        Diperbarui otomatis setiap pagi.
    </footer>

Sedangkan anak yang memakai bentuk inline menghasilkan footer berisi satu baris pengganti:

    <footer>
        Footer pengganti.    </footer>

Layout dengan banyak section sudah cukup untuk kerangka halaman. Bagian-bagian berulang yang lebih kecil — tombol, alert, kartu — lebih pas dibangun sebagai component dengan tag sendiri, materi chapter berikutnya.