Blade adalah template engine bawaan Laravel yang membuat penulisan tampilan HTML jadi bersih dan powerful. Dengan Blade, Anda bisa membuat layout yang dipakai ulang, komponen, dan menampilkan data dengan sintaks ringkas. Artikel ini membahas dasar-dasarnya.
Menampilkan Data
Gunakan kurung kurawal ganda untuk menampilkan variabel. Blade otomatis meng-escape output demi keamanan (mencegah XSS):
<h1>{{ $judul }}</h1>
<p>Halo, {{ $user->name }}</p>Percabangan dan Perulangan
@if ($posts->count())
@foreach ($posts as $post)
<h3>{{ $post->title }}</h3>
@endforeach
@else
<p>Belum ada artikel.</p>
@endifBlade juga punya @forelse yang menggabungkan loop dan kondisi kosong:
@forelse ($posts as $post)
<li>{{ $post->title }}</li>
@empty
<li>Data kosong</li>
@endforelseMembuat Layout dengan @extends
Buat layout induk, mis. resources/views/layouts/app.blade.php:
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
@yield('content')
</body>
</html>Lalu halaman anak tinggal mengisi bagian yang ditentukan:
@extends('layouts.app')
@section('title', 'Beranda')
@section('content')
<h1>Selamat Datang</h1>
@endsectionMenyertakan Bagian dengan @include
Untuk potongan yang berulang seperti navbar atau footer:
@include('partials.navbar')Blade Component (Reusable)
Untuk elemen yang dipakai berkali-kali dengan data berbeda, buat component:
php artisan make:component AlertGunakan di view:
<x-alert type="success" message="Data tersimpan!" />Menampilkan HTML Tanpa Escape
Jika Anda perlu menampilkan HTML mentah (mis. konten artikel dari editor), gunakan sintaks tak-escape — hanya untuk sumber yang tepercaya:
{!! $post->content !!}Kesimpulan
Blade membuat tampilan Laravel rapi dan mudah dirawat: {{ }} untuk data, @extends/@section untuk layout, @include dan component untuk bagian reusable. Kuasai ini dan struktur front-end aplikasi Anda akan jauh lebih bersih. Untuk mempercepat loading tampilan, lihat panduan optimasi performa Laravel kami.
