Tutorial Laravel #7: Layout, Section, dan Component Blade

07/16/2025
ariq fadhil
4

1. Kenapa Butuh Layout?

Hampir semua halaman website punya bagian yang sama: header, navbar, footer, link CSS/JS. Kalau kamu copy-paste di setiap file view, saat ada perubahan kamu harus edit semua file. Layout Blade menyelesaikan ini dengan konsep template inheritance.

2. Membuat Layout Utama

<!-- 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', 'Laravel App')</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">
    @stack('styles')
</head>
<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">MyApp</a>
        </div>
    </nav>

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

    <footer class="bg-light p-3 text-center">
        <p>© 2025 MyApp</p>
    </footer>

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

3. Menggunakan Layout di View

<!-- resources/views/artikel/index.blade.php -->
@extends('layouts.app')

@section('title', 'Daftar Artikel')

@section('content')
    <h1>Semua Artikel</h1>

    @forelse($artikels as $artikel)
        <div class="card mb-3">
            <div class="card-body">
                <h5>{{ $artikel->judul }}</h5>
                <a href="{{ route('artikel.show', $artikel->id) }}">Baca</a>
            </div>
        </div>
    @empty
        <p>Belum ada artikel.</p>
    @endforelse
@endsection

@push('scripts')
    <script>console.log('halaman artikel loaded');</script>
@endpush

4. @yield, @section, @extends

@yield('nama') - placeholder di layout, diisi oleh view yang extends
@section('nama') ... @endsection - mengisi placeholder di layout
@extends('layouts.app') - mendeklarasikan layout yang dipakai
@stack('nama') - placeholder untuk konten yang di-push (JS, CSS tambahan)
@push('nama') ... @endpush - menambahkan konten ke stack

5. Blade Component

Component adalah cara modern untuk membuat UI yang reusable di Blade (diperkenalkan di Laravel 7+).

# Buat component
php artisan make:component Alert
# Membuat dua file:
# app/View/Components/Alert.php
# resources/views/components/alert.blade.php

<?php
// app/View/Components/Alert.php
namespace AppViewComponents;

use IlluminateViewComponent;

class Alert extends Component
{
    public function __construct(
        public string $type = 'info',
        public string $message = ''
    ) {}

    public function render()
    {
        return view('components.alert');
    }
}

<!-- resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}" role="alert">
    {{ $message }}
</div>

<!-- Pemakaian di view lain -->
<x-alert type="success" message="Data berhasil disimpan!" />
<x-alert type="danger" message="Terjadi kesalahan." />

6. Anonymous Component

Untuk component sederhana yang tidak butuh class PHP, cukup buat file Blade-nya saja:

<!-- resources/views/components/card.blade.php -->
<div class="card shadow-sm mb-3">
    <div class="card-header">{{ $title }}</div>
    <div class="card-body">{{ $slot }}</div>
</div>

<!-- Pemakaian -->
<x-card title="Info User">
    <p>Nama: {{ $user->nama }}</p>
    <p>Email: {{ $user->email }}</p>
</x-card>

7. Include Partial View

<!-- resources/views/partials/navbar.blade.php -->
<nav>...</nav>

<!-- Sisipkan partial di view lain -->
@include('partials.navbar')

<!-- Include dengan kirim data tambahan -->
@include('partials.alert', ['type' => 'success', 'pesan' => 'Berhasil!'])

<!-- Include jika file ada -->
@includeIf('partials.iklan')

8. Ringkasan

@extends + @section + @yield untuk template inheritance
@push + @stack untuk inject CSS/JS dari child view ke layout
Blade Component (<x-nama />) untuk UI yang reusable
@include untuk menyisipkan partial view

Tutorial berikutnya membahas cara mengirim data dari controller ke view.