Belajar Framework Laravel 13 #3: Sihir Tampilan Blade & Komponen
Heru Iryanto
Teacher, Content Creator and Full-Stack Developer
Jika Anda sering menulis kodingan campuran antara PHP dan HTML seperti ini:
<h1>Selamat Datang, <?php echo $nama; ?>!</h1>
<?php if($umur > 17) { ?>
<p>Anda sudah dewasa.</p>
<?php } else { ?>
<p>Anda masih anak-anak.</p>
<?php } ?>
Segera hentikan kebiasaan kotor tersebut! Itu sangat jelek dan rentan kesalahan kurang tutup kurawal.
Laravel membawakan mesin cuci bahasa pemrograman bernama Blade Template Engine. File Blade berakhiran .blade.php dan mutlak harus diletakkan di dalam folder resources/views/.
1️⃣ Membersihkan Sintaks PHP
Mari ubah kodingan jelek di atas menjadi sintaks Blade murni. Untuk contoh sederhananya mari kita buat file latihan.blade.php di folder resources/views. Kita akan menulis kode seperti ini di dalamnya:
<!-- Cukup bungkus variabel PHP dengan KUMIS GANDA ganda {{ }} -->
<h1>Selamat Datang, {{ $nama }}!</h1>
<!-- Ganti tag <?php if ?> dengan arahan cantik @if -->
@if($umur > 17)
<p>Anda sudah dewasa.</p>
@else
<p>Anda masih anak-anak.</p>
@endif
Di web.php tambahkan route seperti ini:
Route::get('/profil/{nama}/{umur}', function ($nama, $umur) {
return view('latihan', compact('nama', 'umur'));
});
Dan lihat hasilnya di browser dengan mengetikkan:
http://localhost:8000/profil/Heru Iryanto/37
Compact adalah cara mudah untuk mengirim variabel ke view. Bisa juga ditulis seperti dibawah ini jika ingin cara yang panjang tanpa compact, nanti hasil di web nya akan tetap sama.
Route::get('/profil/{nama}/{umur}', function ($nama, $umur) {
return view('latihan', [
'nama' => $nama,
'umur' => $umur,
]);
});
Sangat indah! Mata Anda tidak lagi perih melihat tumpukan tanda tanya ? dan kurung sudut < >.
Catatan Keamanan: Kurung kumis ganda {{ }} di Laravel secara otomatis membersihkan script jahat (XSS Attack). Jika seseorang mencoba mendaftar dengan nama <script>alert('hack');</script>, Laravel akan menetralisirnya.
2️⃣ Pewarisan Layout (Layout Inheritance)
Ini adalah trik yang paling menghemat waktu hidup Anda. Dalam 1 website, bagian Header (Navbar) dan Footer pasti bentuknya 100% sama di semua halaman. Hanya bagian tengah badannya saja yang berubah.
Di PHP biasa, Anda mungkin repot memecahnya menjadi include 'header.php' di setiap file baru. Di Laravel, kita membalik posisinya menggunakan metode Master Layout.
Langkah 1: Buat Kerangka Utama (Master Layout)
Buat file resources/views/layout_utama.blade.php.
<!DOCTYPE html>
<html>
<head>
<title>Website Saya</title>
<!-- Asumsikan Anda sudah menaruh CDN/File Tailwind CSS di sini -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
<!-- NAVBAR (Tetap) -->
<nav class="bg-blue-600 text-white p-4 font-bold">MENU NAVBAR SAYA</nav>
<!-- INI ADALAH LUBANG KOSONG! -->
<!-- Nanti lubang ini akan diisi oleh anak-anaknya secara bergantian -->
<main class="container mx-auto mt-5">
@yield('lubang_konten')
</main>
<!-- FOOTER (Tetap) -->
<footer class="text-center p-4 mt-10">Hak Cipta © 2026</footer>
</body>
</html>
Langkah 2: Buat Halaman Anak (View Dinamis)
Buat file baru resources/views/beranda.blade.php.
File anak ini tidak butuh lagi mengetik <html> atau <body>! Ia hanya perlu mewarisi harta ayahnya.
<!-- "Hai Ayah (layout_utama), pinjam jubahmu ya!" -->
@extends('layout_utama')
<!-- "Mari isi lubang kosong tadi dengan konten milik saya!" -->
@section('lubang_konten')
<h1 class="text-3xl font-extrabold text-gray-800">
Ini adalah Halaman Beranda.
</h1>
<p class="text-gray-600 mt-2">
Konten ini dikirim langsung masuk ke dalam perut Master Layout.
</p>
@endsection
3️⃣ Menghubungkan Router ke View
Lalu bagaimana cara menampilkan file beranda.blade.php ke Browser?
Buka kembali file Satpam Anda (routes/web.php) di materi sebelumnya.
Tambahkan kode dibawah ini:
// Suruh Satpam merender (menampilkan) file "beranda" di dalam folder "views".
// Catatan: Tidak perlu mengetik akhiran ".blade.php".
Route::get('/beranda', function () {
return view('beranda');
});
Silakan ketikkan:
http://localhost:8000/beranda
pada url browser Anda dan lihat hasilnya. Selamat, Anda baru saja berhasil membuat halaman web utuh menggunakan Laravel dengan sintaks yang bersih dan indah.
4️⃣ Komponen Blade: Mengawinkan Laravel & Tailwind
Sebagai tambahan, fitur paling mutakhir dari Blade adalah kemampuannya membuat label HTML sendiri (Component).
Di pelajaran Tailwind, jika Anda membuat desain sebuah Tombol (Button), panjang kelasnya bisa memakan 1 baris layar penuh:
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow">
Daripada mengetik kodingan tombol itu berkali-kali di setiap halaman (yang melanggar hukum DRY), buatlah komponen!
Buat folder components yang ada di dalam folder resources/views/. Lalu buat file mungil tombol-merah.blade.php seperti ini resources/views/components/tombol-merah.blade.php:
<!-- Tangkap teks apapun dari luar, taruh di tempat $slot -->
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow">
{{ $slot }}
</button>
Sekarang, di file View mana pun di seluruh istana Laravel Anda, Anda bisa menggunakan tombol mematikan Tailwind tersebut HANYA dengan menyisipkan huruf <x- (x strip)! . Contoh tambahan kode di resources/views/beranda.blade.php
<!-- Kapanpun butuh tombol Tailwind sakti, cukup panggil tag x- ajaib ini! -->
<x-tombol-merah>Hapus Data</x-tombol-merah>
<x-tombol-merah>Batalkan Transaksi</x-tombol-merah>
🗽 Kesimpulan
@extends, @yield, @section, {{ }}, dan <x-komponen> adalah 5 mantra sihir yang menjadikan Blade sebagai Mesin Piring Emas terkuat di alam semesta PHP. Kombinasi Blade + Komponen Tailwind akan membuat tata letak aplikasi raksasa Anda sangat rapi dan konsisten 100%.
Setelah Tampilan (View/Piring) kita mengkilap, saatnya kita menjamah ranah paling sakral: Ruang Penyimpanan (Database). Lupakan phpMyAdmin, mari membangun struktur Data hanya menggunakan jemari dan ketikan kode pemrograman di Membunuh PHPMyAdmin (Migration & Seeder).