Belajar Laravel 13 #3: Sihir Tampilan Blade (View) & Komponen

Heru Iryanto
Heru Iryanto
Teacher, Content Creator and Full-Stack Developer
Web Programming Laravel PHP
7 August 2026
Belajar Laravel 13 #3: Sihir Tampilan Blade (View) & Komponen

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.

Sebagai latihan, coba buat route /about yang berisi tentang diri kamu / CV online kamu. Buat juga file about.blade.php nya di folder views. Isi about.blade.php boleh bebas.

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">
        <ul class="flex space-x-4">
            <li><a href="/beranda" class="hover:underline">Home</a></li>
            <li><a href="/about" class="hover:underline">About</a></li>
            <li><a href="/kontak" class="hover:underline">Kontak</a></li>
        </ul>
    </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>

@yield adalah syntax yang digunakan untuk membuat lubang kosong pada master layout dan nanti akan diisi oleh @section pada halaman anak.

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

@extends adalah syntax yang digunakan untuk mewarisi layout dari master layout.

@section adalah syntax yang digunakan untuk mengisi lubang kosong pada master layout.

Bisakah kita tidak menggunakan pewarisan layout dan komponen ini? Jawabanya tentu saja BISA. Namun saya sangat menyarankan untuk selalu menggunakan pewarisan layout dan komponen ini agar kodingan Anda rapi dan konsisten 100%. Meskipun terlihat agak ribet saat awal tapi ini sangat membantu saat Anda sudah terbiasa dan melakukan proyek yang lebih besar lagi.

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.

Sebagai latihan, coba kamu ubah route yang ada sekarang menjadi menggunakan return view() bukan lagi mengembalikan string langsung seperti contoh di materi route-route sebelumnya, seperti:

  • route /beranda menjadi return view('beranda');
  • route /about menjadi return view('about');
  • route /kontak menjadi return view('kontak');

Sesuaikan juga dengan contoh-contoh yang ada di materi ini. Jangan malas untuk mencoba dan bereksperimen ya!

Ingat, kuantitas menciptakan kualitas. Semakin banyak kamu latihan, semakin cepat kamu mahir!

Karena sekarang sudah menggunakan return view(), maka kamu bisa menambahkan style css atau javascript langsung di view yang kamu inginkan sesuai dengan materi sebelumnya.

Gunakan juga pewarisan layout (seperti @extends, @yield, @section) agar kodingan Anda rapi dan konsisten 100%.

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>

$slot adalah variabel yang akan diisi oleh teks atau kode yang ada di dalam tag komponen. Pada intinya $slot adalah variabel yang akan diisi oleh teks atau kode yang ada di dalam tag komponen.

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) 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).

Previous
Next

💎 Materi