Blade Template Engine Laravel 13 — Bikin View Pertamamu

Setelah kamu memahami routing di episode sebelumnya, saatnya belajar cara Laravel menampilkan halaman HTML yang dinamis. Itulah peran Blade — template engine Laravel yang powerful namun tetap mudah dipahami pemula. Di artikel ini, kita akan explore Blade dari nol: mulai dari sintaks dasar, layout inheritance yang bikin kode jauh lebih rapi, hingga cara mengirim data dari route/controller ke view. Kamu akan membuat halaman Home pertama kalimu dengan struktur yang profesional dan mudah dirawat.

Blade adalah template engine resmi Laravel — alat untuk membuat HTML dinamis dengan syntax yang jauh lebih elegan daripada echo PHP biasa. Kalau di episode #3 kita belajar routing Laravel, sekarang kita fokus ke bagian yang langsung "ketemu" user: tampilan halaman web.

Mari kita mulai dari konsep dasar dan langsung praktik membuat view pertama kamu.

Apa Itu Blade Template Engine?

Blade adalah sistem template yang disediakan Laravel. Fungsinya: mengubah kode plain PHP menjadi syntax yang lebih ringkas dan mudah dibaca. Alih-alih menulis <?php echo $nama; ?>, di Blade kamu hanya tulis {{ $nama }}.

Selain itu, Blade punya fitur yang bikin struktur halaman web jauh lebih terorganisir — terutama fitur layout inheritance. Bayangkan: kalau kamu punya puluhan halaman, dan semuanya pakai navbar dan footer yang sama. Tanpa Blade, kamu harus copy-paste navbar di setiap file. Dengan Blade, kamu cukup bikin satu layout master, dan semua halaman mewarisinya. Itu yang disebut DRY: Don't Repeat Yourself.

Lokasi File View di Laravel

Semua file Blade disimpan di folder resources/views. File view punya ekstensi .blade.php — ini tanda bagi Laravel bahwa file itu harus diproses oleh Blade engine sebelum dikirim ke browser.

Struktur folder biasanya begini:

resources/
  views/
    layouts/
      app.blade.php        (layout utama)
    home.blade.php         (halaman home)
    about.blade.php        (halaman about)

Sintaks Dasar Blade

Mari kita pelajari syntax Blade yang paling sering dipakai:

1. Output Variabel

<!-- Menampilkan isi variabel -->
{{ $nama }}

<!-- Dengan default value jika variabel kosong -->
{{ $nama ?? 'Pengunjung' }}

2. Kondisi (if/else)

@if($user)
  <p>Halo, {{ $user->name }}!</p>
@else
  <p>Silakan login dulu.</p>
@endif

3. Loop (foreach)

@foreach($posts as $post)
  <article>
    <h3>{{ $post['title'] }}</h3>
    <p>{{ $post['excerpt'] }}</p>
  </article>
@endforeach

4. Escape Output (anti-XSS)

<!-- Otomatis escape HTML, aman dari XSS -->
{{ $user_input }}

<!-- Kalau benar-benar perlu raw HTML, pakai triple brace -->
{{{ $html_content }}}

Syntax Blade dimulai dengan @, jadi mudah dikenali di tengah HTML biasa. Laravel akan mengubah semua syntax Blade menjadi PHP biasa sebelum dikirim ke browser.

Layout & Template Inheritance — Fitur Paling Powerful Blade

Ini adalah fitur yang membedakan Blade dari template engine biasa. Konsepnya: bikin satu file layout master yang berisi struktur HTML umum (navbar, footer, sidebar), terus halaman lain "mewarisi" layout itu.

Langkah 1: Bikin Layout Master

Buat file 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>
</head>
<body>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>

    <main>
        @yield('content')
    </main>

    <footer>
        <p>&copy; 2024 DuaMasa Tech</p>
    </footer>
</body>
</html>

Lihat @yield('title') dan @yield('content') — itu placeholder yang akan diisi oleh halaman child.

Langkah 2: Bikin Halaman Child yang Extend Layout

Buat file resources/views/home.blade.php:

@extends('layouts.app')

@section('title', 'Halaman Home')

@section('content')
    <h1>Selamat Datang!</h1>
    <p>Ini adalah halaman home pertama kamu dengan Blade.</p>
@endsection

Penjelasan:
@extends('layouts.app') — file ini mewarisi layout layouts/app.blade.php.
@section('title', 'Halaman Home') — mengisi placeholder @yield('title').
@section('content') ... @endsection — mengisi placeholder @yield('content').

Hasilnya akan terlihat seperti halaman full HTML dengan navbar, footer, dan isi content dari halaman home. Kalau kamu punya 20 halaman lain, semuanya tinggal extend layout yang sama — navbar dan footer otomatis ter-include.

Mengirim Data dari Route ke View

Hubungan antara route → controller → view adalah inti Laravel. Di episode #3 kita tahu cara handle route. Kini kita tahu tampilan view. Sekarang kita perlu menghubungkan keduanya.

Data dikirim dari route/controller ke view melalui parameter kedua dalam view():

<?php
// Dalam routes/web.php atau Controller

Route::get('/', function () {
    $posts = [
        ['id' => 1, 'title' => 'Belajar Laravel', 'excerpt' => 'Tutorial Laravel untuk pemula'],
        ['id' => 2, 'title' => 'Blade Template', 'excerpt' => 'Master Blade engine'],
    ];
    
    return view('blog', ['posts' => $posts]);
});

Terus di view, kamu tinggal iterate:

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

@section('title', 'Blog')

@section('content')
    @forelse($posts as $post)
        <article>
            <h2>{{ $post['title'] }}</h2>
            <p>{{ $post['excerpt'] }}</p>
        </article>
    @empty
        <p>Belum ada post.</p>
    @endforelse
@endsection

Note: @forelse adalah Blade syntax yang combine loop dengan "if empty" check — lebih ringkas daripada @foreach + @if(empty()).

Latihan: Bikin Halaman Home dengan Layout Lengkap

Ayo kita practice. Ikuti langkah ini:

Buat layout master di resources/views/layouts/app.blade.php dengan navbar, footer, dan content placeholder.
Buat halaman home di resources/views/home.blade.php yang extend layout, berisi greeting dinamis.
Buat route di routes/web.php yang return view home dengan data nama user.
Buka browser dan kunjungi halaman — pastikan navbar, isi home, dan footer ter-render semua.

Contoh hasil akhir:

<!-- Terminal: jalankan server -->
php artisan serve

<!-- Buka di browser: http://localhost:8000 -->
<!-- Kamu akan lihat: nav, "Selamat datang [nama]", footer -->

Kalau berhasil, congratulations! Kamu sudah bikin halaman web pertama dengan Laravel + Blade.

Tips & Tricks Blade Lanjutan

@include() — sisipkan partial view kecil (contoh: navbar jadi @include('partials.navbar')).
@component() — bikin reusable component dengan slot (lebih advanced).
blade @foreach dengan $loop — akses $loop->index, $loop->first, $loop->last untuk logic dalam loop.
Cache compiled views — Laravel otomatis cache hasil compile Blade ke folder storage/framework/views untuk performa.

Kesimpulan

Blade template engine adalah jantung dari tampilan (view) di Laravel. Dengan syntax yang ringkas — {{ }}, @if, @foreach — dan fitur powerful seperti layout inheritance, kamu bisa bikin struktur halaman yang rapi, mudah dirawat, dan DRY.

Sekarang kamu sudah tahu cara membuat view pertama dan mengirim data ke view. Episode berikutnya kita akan memperdalam konsep Controller dan pola MVC yang lebih lengkap — bagaimana controller mengelola logika, sebelum mengirim data ke view. Stay tuned!