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: file HTML biasa dengan tempat kosong untuk data dan beberapa perintah singkat yang diawali @. File-nya berakhiran .blade.php dan tinggal di resources/views. Bayangin formulir surat dengan titik-titik isian: "Kepada: ........". Kertasnya sama untuk semua orang, isiannya yang berubah. Blade adalah kertasnya, data dari controller adalah isiannya, dan @foreach adalah baris tabel yang dicetak ulang untuk tiap buku.

🧪 Tebakan cepat: catatan dari admin berisi Buku baru datang Senin, dan di Blade ditulis {{ $note }}. Apa yang tampil di halaman: kata "baru" tercetak tebal, atau teks baru apa adanya? Tebak dulu, jawabannya ada di bagian "Menampilkan data: {{ }} dan {!! !!}".

Dari controller ke view

Controller menyerahkan data ke view dengan view():

public function index()
{
    return view('books.index', [
        'books' => [
            ['title' => 'Laskar Pelangi', 'stock' => 3],
            ['title' => 'Bumi Manusia', 'stock' => 0],
            ['title' => 'Cantik Itu Luka', 'stock' => 2],
        ],
        'note' => 'Buku <b>baru</b> datang Senin',
    ]);
}

'books.index' artinya file resources/views/books/index.blade.php. Titik berarti folder, dan akhiran .blade.php gak ditulis.
Array kedua adalah datanya. Tiap kunci jadi variabel di view: 'books' jadi $books, 'note' jadi $note.
Response-nya 200 OK dengan HTML. Di latihan, route-mu dipanggil dan halaman hasil render-nya dicetak di bawah GET /profile → 200.

Menampilkan data: {{ }} dan {!! !!}

Ini isi resources/views/books/index.blade.php:

@extends('layouts.app')

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

@section('content')
    <h1>Koleksi Perpustakaan</h1>
    <p>Catatan: {{ $note }}</p>
    <ul>
    @foreach ($books as $book)
        <li>
            {{ $book['title'] }}
            @if ($book['stock'] > 0)
                <b>Tersedia</b>
            @else
                <i>Dipinjam semua</i>
            @endif
        </li>
    @endforeach
    </ul>
@endsection

{{ $note }} mencetak isi variabel setelah karakter HTML-nya diamankan: < jadi <, > jadi >, & jadi &, tanda kutip jadi " dan '. Browser menampilkan teks Buku baru datang Senin apa adanya, gak ada yang tebal. Itu jawaban tebakannya.

{!! $note !!} mencetak isinya mentah-mentah, jadi "baru" tercetak tebal. Kalau isinya datang dari pengguna dan berisi <script>, script itu ikut jalan di browser semua pengunjung. Itu serangan XSS, dibahas di track Security. Aturannya: selalu {{ }}, kecuali HTML yang kamu tulis sendiri.

Di belakang layar, Blade mengubah template jadi PHP biasa dan menyimpannya di storage/framework/views. {{ $note }} jadi <?php echo e($note); ?>, dan e() adalah htmlspecialchars. {!! $note !!} jadi <?php echo $note; ?>. Komentar {{-- ... --}} dibuang dan gak pernah sampai ke browser.

Kondisi dan perulangan

Directive	Artinya	Ditutup dengan
`@if (...)`	cetak kalau syaratnya benar	`@endif`
`@elseif (...)`, `@else`	cabang lain dari `@if`
`@foreach ($books as $book)`	ulangi untuk tiap isi array	`@endforeach`
`@forelse ($books as $book)`	seperti `@foreach`, plus `@empty`	`@endforelse`

Dengan tiga buku tadi, daftar di halaman jadi:

Laskar Pelangi Tersedia
Bumi Manusia Dipinjam semua
Cantik Itu Luka Tersedia

Kalau $books kosong, @foreach gak mencetak apa pun dan <ul>-nya kosong. @forelse punya cabang @empty untuk kasus itu:

@forelse ($books as $book)
    <li>{{ $book['title'] }}</li>
@empty
    <li>Belum ada buku.</li>
@endforelse

Di dalam perulangan ada variabel $loop: $loop->iteration nomor urutnya mulai dari 1, $loop->first dan $loop->last bernilai true di putaran pertama dan terakhir.

Layout: @extends, @section, @yield

Bagian yang sama di semua halaman (head, header, footer) ditulis sekali di layout, resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'Perpustakaan')</title>
</head>
<body>
    <header>Perpustakaan</header>
    @yield('content')
</body>
</html>

@yield('content') adalah lubang yang diisi halaman anak. @yield('title', 'Perpustakaan') punya isi bawaan kalau anaknya gak mengisi.
Di halaman anak, @extends('layouts.app') memilih layout-nya, @section('content') ... @endsection mengisi lubang content, dan @section('title', 'Daftar Buku') mengisi title dalam satu baris.
Hasilnya satu halaman utuh dengan <title>Daftar Buku</title> dan header Perpustakaan di atas daftar buku.

Untuk potongan kecil yang dipakai berulang, seperti tombol atau kartu, Blade punya component: file resources/views/components/alert.blade.php dipakai dengan tag <x-alert>.

⚠️ Jebakan yang sering ketemu

{!! !!} untuk data dari pengguna. Pintu XSS. Pakai {{ }}.
Lupa penutup. @if tanpa @endif atau @foreach tanpa @endforeach membuat PHP hasil compile-nya rusak, dan halamannya error.
Menulis akhiran di nama view. view('profile.blade.php') gagal dengan View [profile.blade.php] not found. Tulis view('profile').
Lupa mengirim datanya. Variabel yang gak ada di array view() membuat error Undefined variable $note.

TL;DR: View Blade tinggal di resources/views dengan akhiran .blade.php, dan dipanggil dengan view('books.index', ['books' => $books]): titik berarti folder, tiap kunci jadi variabel. {{ $x }} mencetak dengan aman (diamankan dengan e()), {!! $x !!} mencetak mentah dan cuma untuk HTML milikmu sendiri. @if/@elseif/@else/@endif untuk kondisi, @foreach/@endforeach untuk perulangan, @forelse/@empty/@endforelse kalau datanya bisa kosong. Layout memakai @yield di file induk, dan anaknya @extends plus @section. Blade di-compile jadi PHP biasa di storage/framework/views.