Tutorial Laravel #8: Sistem Template Laravel
Sistem template dalam Laravel dikenal dengan nama Blade. Blade adalah template engine yang sederhana namun kuat yang disertakan dengan Laravel. Dengan Blade, Anda bisa menulis kode PHP murni dalam tampilan (view) Laravel, namun dengan sintaks yang lebih ringkas dan mudah dibaca. Keunggulan utamanya adalah ia mengubah semua tampilan Blade menjadi kode PHP biasa yang sudah di-cache sampai dimodifikasi, sehingga tidak ada overhead performa saat aplikasi berjalan.
Keuntungan Menggunakan Blade
- Sintaks yang Elegan: Blade menyederhanakan sintaks untuk tugas-tugas umum seperti menampilkan data, perulangan, dan percabangan.
- Inheritansi Template: Anda dapat membuat tata letak (layout) master dan menggunakannya kembali di halaman lain. Ini sangat efektif untuk menjaga konsistensi desain, seperti header, footer, dan navigasi yang sama di seluruh situs.
- Performa Cepat: Karena Blade dikompilasi menjadi PHP biasa, tidak ada penurunan performa. Kode yang sudah dikompilasi disimpan sementara (cache) untuk penggunaan berikutnya.
- Lebih Terstruktur: Memisahkan logika aplikasi (controller) dari tampilan (view) membuat kode lebih rapi dan mudah diatur.
Menggunakan Sistem Template Blade
Mari kita lihat bagaimana cara kerja Blade dengan contoh sederhana.
1. Membuat Layout Master
Pertama, buatlah file layout utama yang akan menjadi kerangka dasar untuk semua halaman Anda. Buat file baru di resources/views/layouts/app.blade.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title') - Aplikasi Saya</title>
</head>
<body>
<header>
<nav>
<a href="/">Beranda</a>
<a href="/tentang">Tentang Kami</a>
</nav>
</header>
<div class="container">
@yield('content')
</div>
<footer>
<p>© 2025 Aplikasi Saya. Semua Hak Cipta Dilindungi.</p>
</footer>
</body>
</html>
Dalam kode di atas, kita menggunakan dua direktif utama dari Blade:
@yield('title'): Ini adalah placeholder untuk judul halaman. Halaman turunan akan mengisi area ini.@yield('content'): Ini adalah placeholder utama tempat konten spesifik setiap halaman akan ditempatkan.
2. Membuat Halaman Anak (Child Page)
Sekarang, buat halaman yang akan mewarisi layout master tersebut. Buat file baru di resources/views/beranda.blade.php.
@extends('layouts.app')
@section('title', 'Beranda')
@section('content')
<h1>Selamat Datang di Beranda!</h1>
<p>Ini adalah halaman beranda kami. Kami sangat senang Anda berkunjung.</p>
@endsection
@extends('layouts.app'): Ini memberitahu Blade bahwa halaman ini akan menggunakanapp.blade.phpsebagai layout utamanya.@section('title', 'Beranda'): Ini akan mengisiplaceholder@yield('title')dengan teks “Beranda”.@section('content')…@endsection: Ini akan mengisiplaceholder@yield('content')dengan konten di antara kedua direktif ini.
3. Menampilkan Data dari Controller
Blade juga memudahkan Anda untuk menampilkan data yang dikirim dari controller.
- Pertama, buatlah route di file
routes/web.php.
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
$nama = 'Budi';
return view('beranda', ['nama' => $nama]);
});
- Kemudian, di halaman
beranda.blade.php, Anda bisa menampilkan data tersebut dengan sintaks{{ $variabel }}.
@extends('layouts.app')
@section('title', 'Beranda')
@section('content')
<h1>Selamat Datang, {{ $nama }}!</h1>
<p>Ini adalah halaman beranda kami. Kami sangat senang Anda berkunjung.</p>
@endsection
Ketika halaman ini diakses, {{ $nama }} akan diganti dengan nilai dari variabel $nama yang dikirim dari controller. Sintaks {{ }} secara otomatis akan melindungi dari serangan XSS (Cross-Site Scripting) dengan melakukan escaping pada data.
Sintaks Blade Lain yang Berguna
- Struktur Kontrol (Perulangan, Kondisional): Blade memiliki direktif yang intuitif untuk kontrol alur.
- Kondisional:
HTML
@if (count($pengguna) > 0) <p>Ada beberapa pengguna.</p> @else <p>Tidak ada pengguna.</p> @endif - Perulangan (
@foreach):HTML@foreach ($pengguna as $user) <p>Nama Pengguna: {{ $user->name }}</p> @endforeach
- Kondisional:
- Mengatur CSS dan JavaScript: Anda bisa menggunakan
asset()helper untuk menyertakan file CSS dan JS.HTML<link rel="stylesheet" href="{{ asset('css/style.css') }}">
Sistem template Blade adalah salah satu fitur inti Laravel yang membuatnya begitu populer. Dengan kemudahan dan kekuatannya, Anda dapat membangun tampilan yang kompleks dan terstruktur dengan rapi tanpa mengorbankan performa. Menguasai Blade adalah langkah penting untuk menjadi pengembang Laravel yang mahir.
