Blade Templating — Laravel

Blade adalah template engine Laravel — menulis HTML dengan fitur PHP yang lebih elegan. Menampilkan variabel: {{ $title }} {{ $user->name }} {{ $userInput }} {!

Blade adalah template engine Laravel — menulis HTML dengan fitur PHP yang lebih elegan.

Menampilkan variabel:

<h1>{{ $title }}</h1>
<p>{{ $user->name }}</p>

<!-- Escape HTML otomatis (aman dari XSS) -->
{{ $userInput }}

<!-- Tanpa escape (hati-hati!) -->
{!! $htmlContent !!}

Kondisional:

@if ($user->isAdmin())
    <span>Admin</span>
@elseif ($user->isEditor())
    <span>Editor</span>
@else
    <span>User</span>
@endif

Loop:

@foreach ($users as $user)
    <div>{{ $user->name }}</div>
@endforeach

@forelse ($posts as $post)
    <div>{{ $post->title }}</div>
@empty
    <p>Belum ada post.</p>
@endforelse

Layout & Inheritance:

<!-- layouts/app.blade.php -->
<html>
<body>
    @yield("content")
</body>
</html>

<!-- pages/home.blade.php -->
@extends("layouts.app")

@section("content")
    <h1>Home Page</h1>
@endsection

Blade Components — Reusable UI Building Blocks

@extends / @section cocok untuk layout global. Tapi untuk UI yang dipakai berulang (button, card, alert, modal), pakai Blade Components — lebih composable, reusable, dan punya props yang jelas.

Anonymous components (cepat, tanpa class):

# Buat file resources/views/components/alert.blade.php

{{-- resources/views/components/alert.blade.php --}}
<div class="alert alert-{{ $type ?? "info" }}">
    <strong>{{ $title }}</strong>
    <p>{{ $slot }}</p>
</div>

Pakai di view lain dengan tag <x-nama-komponen>:

<x-alert type="success" title="Berhasil!">
    Data berhasil disimpan.
</x-alert>

<x-alert type="error" title="Gagal">
    Email sudah terdaftar.
</x-alert>

Class-based components (untuk logic/preparation):

php artisan make:component Button

// app/View/Components/Button.php
namespace App\View\Components;

use Illuminate\View\Component;

class Button extends Component
{
    public function __construct(
        public string $type = "primary",
        public string $size = "md",
        public bool $disabled = false,
    ) {}

    public function classes(): string
    {
        return "btn btn-{$this->type} btn-{$this->size}"
            . ($this->disabled ? " opacity-50" : "");
    }

    public function render()
    {
        return view("components.button");
    }
}

{{-- resources/views/components/button.blade.php --}}
<button class="{{ $classes() }}" @disabled($disabled)>
    {{ $slot }}
</button>

{{-- Di view manapun --}}
<x-button type="primary" size="lg">Simpan</x-button>
<x-button type="danger" :disabled="true">Hapus</x-button>

Named slots untuk multi-area konten:

{{-- components/card.blade.php --}}
<div class="card">
    <header>{{ $header }}</header>
    <main>{{ $slot }}</main>
    <footer>{{ $footer }}</footer>
</div>

{{-- Pakai: --}}
<x-card>
    <x-slot:header>
        <h2>Profil User</h2>
    </x-slot>

    <p>Isi konten utama di sini.</p>

    <x-slot:footer>
        <button>Simpan</button>
    </x-slot>
</x-card>

Attribute bag $attributes untuk forward props ke element dalam component:

{{-- components/input.blade.php --}}
<input {{ $attributes->merge(["class" => "border rounded px-3 py-2"]) }}>

{{-- Pakai — class "w-full" digabung dengan default --}}
<x-input type="email" class="w-full" placeholder="[email protected]">

Kapan pakai apa:

@extends/@section Blade Components
Layout global (header/footer/sidebar) ✓ ideal OK tapi overkill
UI element (button, card, alert) ❌ clunky ✓ ideal
Complex dengan logic ❌ ✓ class-based
Simple wrapper ❌ ✓ anonymous

Rule of thumb: layout global pakai @extends. Semua UI yang reusable, pakai component. Laravel 11+ sangat push ke arah components.

Yang akan kamu pelajari