Belajar Laravel - Blade Templating

#Pendahuluan

Setelah controller siap memproses request, saatnya sisi tampilan: Blade — templating engine bawaan Laravel. Di episode ini kita akan membangun layout yang reusable, menampilkan data dengan aman, dan membuat komponen yang bisa dipakai ulang. Di sinilah aplikasi kalian mulai terlihat seperti aplikasi sungguhan.

Konsep penting yang membedakan Blade dari templating lain: Blade dikompilasi menjadi PHP murni dan di-cache di storage/framework/views. Artinya tidak ada overhead runtime yang mahal — hasil kompilasinya adalah kode PHP biasa yang cepat.

#Layout Reusable: @extends dan @section

Semua halaman aplikasi web berbagi kerangka yang sama (header, sidebar, footer). Blade menyelesaikannya dengan layout:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>@yield('title', 'Blog')</title>
</head>
<body>
    <header>Navigasi blog</header>
    <main>
        @yield('content')
    </main>
    <footer>Copyright 2026</footer>
</body>
</html>

Halaman anak mewarisi layout dan mengisi bagiannya:

resources/views/posts/index.blade.php

@extends('layouts.app')
 
@section('title', 'Daftar Post')
 
@section('content')
    <h1>Daftar Post</h1>
    @foreach ($posts as $post)
        <article>
            <h2><a href="{{ route('posts.show', $post) }}">{{ $post->title }}</a></h2>
            <p>{{ $post->excerpt }}</p>
        </article>
    @endforeach
@endsection

@extends('layouts.app') menyatakan layout yang dipakai, @section mengisi slot yang didefinisikan dengan @yield di layout. Controller cukup mengembalikan view ini:

Mengirim data ke view

return view('posts.index', ['posts' => $posts]);

#Sintaks Echo: `{{ }}` dan Triple Brace `{!! !!}`

Ini bagian yang paling penting untuk keamanan. Blade {{ $post->title }} otomatis memanggil htmlspecialchars — output di-escape sehingga skrip berbahaya yang dikirim user tidak akan dieksekusi browser:

Echo yang aman

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

Sementara itu, {!! !!} menampilkan output tanpa escape — ini sumber XSS jika dipakai sembarangan:

Raw echo - hati-hati

<div>{!! $post->body_html !!}</div>

Warning

Aturan emas: {{ }} untuk data dari user, {!! !!} hanya untuk konten yang memang sudah dirancang sebagai HTML (misalnya hasil markdown yang di-sanitize). Jangan pernah membungkus input user mentah dengan {!! !!} — itu membuka pintu XSS. Detail lengkap kita bahas di episode 16.

#Include dan Partials

Untuk bagian kecil yang dipakai di banyak tempat, gunakan @include:

Memakai partial

@include('partials.post-card', ['post' => $post])

Partial menerima variabel dari view induk secara otomatis. Untuk fragmen yang punya logika sendiri, komponen Blade adalah pilihan yang lebih baik.

#Komponen Blade (x-)

Komponen Blade adalah cara modern untuk membuat elemen reusable dengan data binding eksplisit:

Buat komponen

php artisan make:component PostCard

resources/views/components/post-card.blade.php

<article>
    <h2><a href="{{ $url }}">{{ $title }}</a></h2>
    <p>{{ $slot }}</p>
</article>

Memakai komponen

<x-post-card url="{{ route('posts.show', $post) }}" title="{{ $post->title }}">
    {{ $post->excerpt }}
</x-post-card>

Konten di antara tag komponen otomatis masuk ke $slot. Komponen bisa punya class PHP (untuk logika), atribut, dan slot bernama — pola ini menjadi fondasi pengembangan Blade di Laravel modern.

#Loop dan Kondisional

Blade menyediakan direktif yang mirip PHP namun lebih rapi:

Loop dan kondisional

@if ($posts->isEmpty())
    <p>Belum ada post.</p>
@elseif ($posts->count() === 1)
    <p>Satu post tersedia.</p>
@else
    @foreach ($posts as $post)
        <p>{{ $post->title }}</p>
    @endforeach
@endif

Juga ada @unless, @for, @forelse, @while, dan $loop — variabel bawaan berisi info iterasi seperti $loop->first, $loop->last, dan $loop->index.

Tip

Direktif @forelse adalah kombinasi rapi antara foreach dan "kosong": jika koleksi kosong, langsung render blok @empty — menghindari kode @if berlapis untuk daftar kosong.

#Perbandingan dengan Templating Lain

Aspek	Blade	PHP langsung	Twig	EJS (Node)
Auto-escape	Ya (`{{ }}`)	Tidak	Ya	Ya (`<%= %>`)
Komponen	Ya (`x-`)	Tidak	Ya (include)	Tidak
Kompilasi	PHP murni (cache)	Tanpa compile	PHP murni	JS murni
Kurva belajar	Landai	Landai	Sedang	Landai

Keunggulan Blade: sintaks yang ringkas namun tetap "PHP asli" — tidak ada lapisan abstraksi yang membingungkan, dan komponen x- modernnya sangat produktif.

#Penutup

Inti yang harus dibawa pulang:

Bangun layout reusable dengan @extends + @section + @yield, dan potongan kecil dengan @include.
Selalu pakai {{ }} untuk output; {!! !!} hanya untuk HTML yang memang aman.
Komponen x- (via make:component) adalah cara modern membuat UI reusable.
Manfaatkan direktif @if, @foreach, @forelse, dan variabel $loop.

Di episode 7 selanjutnya kita akan membahas Eloquent ORM — membuat model dengan make:model -m, $fillable/$guarded, query Model::all/find/create, Query Builder where/orderBy/paginate, dan perbandingan dengan raw SQL. Sampai jumpa di episode 7!