Belajar Laravel Blade Template untuk Pemula: Layout, Component, dan Menampilkan Data

Laravel Blade adalah template engine bawaan Laravel yang digunakan untuk membangun tampilan halaman web secara dinamis. Dengan Blade, developer dapat menggabungkan HTML dengan data dari aplikasi, menampilkan daftar informasi, membuat percabangan, mengulang data, serta menggunakan layout dan component agar tampilan lebih konsisten.

Ketika membangun aplikasi web, kamu biasanya memiliki beberapa halaman dengan elemen yang sama, seperti navbar, footer, menu navigasi, dan struktur konten. Jika seluruh HTML ditulis ulang pada setiap halaman, kode akan menjadi panjang dan sulit dipelihara. Blade membantu mengatasi masalah tersebut melalui fitur layout, section, include, dan component.

Dalam tutorial ini, kamu akan mempelajari cara menggunakan Laravel Blade dari dasar hingga membangun halaman daftar artikel sederhana. Pembahasan mencakup struktur file Blade, menampilkan data dari controller, directive, perulangan, layout, component, formulir, hingga praktik keamanan dasar.

Tutorial ini melanjutkan pembahasan routing dan controller. Karena itu, kamu akan melihat bagaimana ketiga komponen tersebut bekerja bersama dalam aplikasi Laravel.

Daftar Isi

1. Apa Itu Laravel Blade?
2. Fungsi Blade dalam Arsitektur MVC
3. Mengenal Struktur File Blade
4. Cara Menampilkan Data di Blade
5. Mengenal Directive Blade
6. Menampilkan Daftar Data dengan Perulangan
7. Menggunakan Percabangan
8. Memahami Layout dan Template Inheritance
9. Menggunakan Blade Component
10. Menggunakan Include untuk Memisahkan Tampilan
11. Mengirim Data dari Controller ke Blade
12. Membuat Formulir dengan Blade
13. Menampilkan Pesan dan Error Validasi
14. Praktik Membuat Halaman Artikel
15. Kesalahan Umum Saat Menggunakan Blade
16. Tips Menulis Template Blade yang Baik
17. FAQ Laravel Blade
18. Kesimpulan

1. Apa Itu Laravel Blade?

Blade adalah template engine yang disediakan Laravel untuk membantu developer membuat tampilan HTML dinamis.

File Blade menggunakan ekstensi .blade.php dan biasanya disimpan di direktori resources/views.

Dengan Blade, kamu dapat menampilkan variabel PHP, menjalankan perulangan, membuat kondisi, menggunakan layout, serta memanggil component langsung dari template.

Sebagai contoh, kamu memiliki data nama pengguna yang dikirim dari controller. Di dalam file Blade, data tersebut dapat ditampilkan seperti berikut:

<h1>Halo, {{ $nama }}</h1>

Jika nilai variabel $nama adalah Dina, halaman akan menampilkan sapaan sesuai nilai tersebut.

Blade juga mendukung HTML biasa. Artinya, kamu tidak perlu mempelajari sintaks template yang sepenuhnya berbeda dari HTML.

Salah satu keunggulan Blade adalah kode template dikompilasi menjadi PHP dan hasil kompilasinya dapat disimpan dalam cache. Dengan begitu, Blade memberikan sintaks yang lebih nyaman tanpa menambahkan overhead template engine yang berarti.

Dokumentasi resmi tersedia di Laravel Blade Templates.

Mengapa perlu mempelajari Blade?

Blade sangat berguna ketika kamu mulai membangun halaman seperti:

• Dashboard admin.
• Daftar artikel atau berita.
• Halaman detail produk.
• Profil pengguna.
• Formulir pendaftaran.
• Halaman pengaturan aplikasi.

Blade juga membantu menjaga konsistensi antarmuka. Ketika navbar perlu diperbarui, misalnya, kamu dapat mengubah satu layout atau component tanpa mengedit seluruh halaman secara manual.

2. Fungsi Blade dalam Arsitektur MVC

Laravel menggunakan pendekatan MVC, yaitu Model, View, dan Controller. Ketiga komponen tersebut memiliki tanggung jawab yang berbeda.

• Model: merepresentasikan dan mengelola data aplikasi.
• View: menampilkan informasi kepada pengguna.
• Controller: menangani permintaan dan menyiapkan data untuk respons.

Blade digunakan untuk membuat view.

Misalnya, aplikasi Yeestack memiliki fitur daftar artikel. Alurnya dapat digambarkan sebagai berikut:

1. Pengguna membuka URL /artikel.
2. Route memanggil ArtikelController.
3. Controller menyiapkan data artikel.
4. Controller mengirimkan data ke view Blade.
5. Blade menampilkan artikel dalam format HTML.
6. Laravel mengirimkan hasilnya ke browser.

Contoh pemanggilan view dari controller:

return view('artikel.index', [
    'judul' => 'Daftar Artikel',
]);

Di dalam view artikel.index, kamu dapat menampilkan variabel tersebut:

<h1>{{ $judul }}</h1>

Pemisahan ini membuat kode lebih terstruktur. Controller tidak perlu menyimpan seluruh markup HTML, sedangkan view tidak perlu menangani seluruh logika bisnis aplikasi.

Jika kamu ingin memahami konsep dasarnya lebih dahulu, baca artikel Memahami Konsep MVC dalam Pengembangan Web.

3. Mengenal Struktur File Blade

Sebelum menulis template, kenali struktur direktori yang digunakan Laravel.

Secara umum, file view disimpan di:

resources/
└── views/
    ├── layouts/
    │   └── app.blade.php
    ├── components/
    │   └── alert.blade.php
    └── artikel/
        ├── index.blade.php
        └── detail.blade.php

Struktur di atas merupakan contoh pengorganisasian yang dapat kamu gunakan. Kamu bebas menyesuaikannya dengan kebutuhan proyek.

A. Folder resources/views

Folder ini merupakan lokasi standar untuk template Blade.

File index.blade.php dapat digunakan untuk halaman daftar, sedangkan detail.blade.php dapat digunakan untuk halaman detail suatu data.

Nama direktori membantu mengelompokkan view berdasarkan fitur.

B. Folder layouts

Folder layouts dapat digunakan untuk menyimpan template utama aplikasi, seperti struktur HTML, navbar, footer, dan area konten.

Kamu dapat membuat satu layout yang digunakan oleh banyak halaman.

C. Folder components

Folder ini dapat digunakan untuk component Blade yang bisa dipakai ulang, seperti tombol, kartu artikel, badge kategori, dan notifikasi.

Component membantu mengurangi pengulangan markup.

D. Cara memanggil view

Jika file berada di resources/views/artikel/index.blade.php, panggil melalui:

return view('artikel.index');

Titik pada nama view menunjukkan pemisah direktori. Kamu tidak perlu menuliskan ekstensi .blade.php.

4. Cara Menampilkan Data di Blade

Sintaks dasar yang paling sering digunakan adalah {{ }}.

Misalnya, controller mengirimkan data berikut:

return view('profil', [
    'nama' => 'Dina',
    'pekerjaan' => 'Web Developer',
]);

Kemudian, di resources/views/profil.blade.php:

<h1>{{ $nama }}</h1>
<p>{{ $pekerjaan }}</p>

Blade akan menampilkan nilai dari variabel yang diterima.

Menampilkan data dengan aman

Blade melakukan escaping HTML secara default ketika menggunakan {{ }}. Ini membantu mencegah teks dari pengguna diperlakukan sebagai markup HTML aktif.

Contohnya, jika suatu nilai berisi tag HTML, Blade akan menampilkan tag tersebut sebagai teks, bukan langsung merendernya sebagai elemen HTML.

Hindari menggunakan {!! !!} untuk data pengguna yang belum dipercaya. Sintaks tersebut menampilkan konten tanpa escaping dan dapat membuka risiko Cross-Site Scripting (XSS).

Menggunakan ekspresi sederhana

Kamu juga dapat menggunakan operator PHP dalam ekspresi Blade:

<p>{{ $harga * 2 }}</p>

Meskipun ekspresi sederhana dapat digunakan, logika perhitungan yang kompleks sebaiknya ditempatkan pada bagian aplikasi yang lebih sesuai, misalnya controller, model, atau service.

Tujuan utama view adalah menyajikan data, bukan menjadi tempat seluruh proses bisnis.

5. Mengenal Directive Blade

Blade menyediakan directive, yaitu sintaks khusus yang diawali tanda @. Directive mempermudah penggunaan kondisi, perulangan, layout, dan fitur template lainnya.

Berikut beberapa directive yang penting untuk pemula.

A. @if

Digunakan untuk menampilkan konten berdasarkan kondisi.

@if ($nilai >= 75)
    <p>Nilai memenuhi batas kelulusan.</p>
@else
    <p>Nilai belum memenuhi batas kelulusan.</p>
@endif

Blade akan menampilkan bagian yang sesuai dengan nilai kondisi.

B. @elseif

Jika memiliki beberapa kondisi, gunakan @elseif.

@if ($role === 'admin')
    <p>Dashboard Admin</p>
@elseif ($role === 'editor')
    <p>Dashboard Editor</p>
@else
    <p>Dashboard Pengguna</p>
@endif

Contoh ini menunjukkan pemilihan tampilan berdasarkan nilai role. Namun, menyembunyikan bagian tampilan bukan pengganti pemeriksaan otorisasi di server. Akses ke fitur yang dilindungi tetap harus diperiksa pada route, controller, middleware, atau policy yang sesuai.

C. @unless

Directive @unless digunakan untuk menampilkan konten ketika suatu kondisi tidak terpenuhi.

@unless ($artikelTersedia)
    <p>Belum ada artikel.</p>
@endunless

Untuk kondisi yang lebih kompleks, @if terkadang lebih mudah dibaca. Pilih bentuk yang membuat maksud kode jelas.

D. @isset

Digunakan untuk memeriksa apakah sebuah variabel telah tersedia dan bukan null.

@isset($nama)
    <p>Nama: {{ $nama }}</p>
@endisset

Directive ini berguna ketika suatu variabel bersifat opsional.

E. @empty

Digunakan untuk memeriksa apakah suatu variabel kosong.

@empty($artikels)
    <p>Belum ada artikel yang dapat ditampilkan.</p>
@endempty

Directive ini dapat membantu menampilkan pesan ketika daftar data kosong.

6. Menampilkan Daftar Data dengan Perulangan

Dalam aplikasi nyata, data biasanya ditampilkan dalam bentuk daftar, tabel, atau kartu. Blade menyediakan directive @foreach untuk mengulang elemen dari array atau koleksi.

Misalnya, controller mengirimkan data artikel:

$artikels = [
    ['judul' => 'Belajar PHP', 'kategori' => 'PHP'],
    ['judul' => 'Belajar Laravel', 'kategori' => 'Laravel'],
    ['judul' => 'Belajar MySQL', 'kategori' => 'Database'],
];

return view('artikel.index', compact('artikels'));

Di dalam Blade, kamu dapat menampilkannya seperti berikut:

<ul>
    @foreach ($artikels as $artikel)
        <li>
            {{ $artikel['judul'] }}
            — {{ $artikel['kategori'] }}
        </li>
    @endforeach
</ul>

Blade akan mengulang elemen sesuai jumlah data di dalam array.

Menggunakan @forelse

Jika daftar data mungkin kosong, @forelse bisa menjadi pilihan yang lebih ringkas.

<ul>
    @forelse ($artikels as $artikel)
        <li>{{ $artikel['judul'] }}</li>
    @empty
        <li>Belum ada artikel.</li>
    @endforelse
</ul>

Dengan cara ini, kamu tidak perlu menulis kondisi terpisah untuk memeriksa apakah daftar memiliki isi.

Menggunakan perulangan pada tabel

Data juga dapat ditampilkan dalam tabel HTML:

<table>
    <thead>
        <tr>
            <th>Judul</th>
            <th>Kategori</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($artikels as $artikel)
            <tr>
                <td>{{ $artikel['judul'] }}</td>
                <td>{{ $artikel['kategori'] }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="2">Belum ada artikel.</td>
            </tr>
        @endforelse
    </tbody>
</table>

Untuk aplikasi yang menampilkan banyak data, pertimbangkan menggunakan pagination agar halaman tidak perlu memuat seluruh data sekaligus.

7. Memahami Layout dan Template Inheritance

Salah satu fitur penting Blade adalah layout. Layout memungkinkan beberapa halaman menggunakan struktur HTML yang sama.

Tanpa layout, kamu mungkin harus menulis ulang bagian <head>, navbar, footer, dan struktur halaman pada setiap file view. Hal ini menyebabkan duplikasi kode.

Blade mendukung beberapa pendekatan layout, termasuk template inheritance dan component. Dalam bagian ini, kita akan mempelajari template inheritance terlebih dahulu.

Langkah 1: Buat layout utama

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', 'Yeestack')
    </title>
</head>
<body>
    <header>
        <h1>Yeestack</h1>

        <nav>
            <a href="/">Beranda</a>
            <a href="/artikel">Artikel</a>
        </nav>
    </header>

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

    <footer>
        <p>&copy; Yeestack</p>
    </footer>
</body>
</html>

Pada contoh tersebut, @yield('title') menyediakan tempat untuk judul halaman, sedangkan @yield('content') menjadi tempat konten utama.

Nilai kedua pada @yield dapat digunakan sebagai nilai default apabila section tidak didefinisikan.

Langkah 2: Buat halaman yang menggunakan layout

Buat file resources/views/artikel/index.blade.php.

@extends('layouts.app')

@section('title', 'Daftar Artikel')

@section('content')
    <h2>Daftar Artikel</h2>
    <p>Temukan tutorial pemrograman di Yeestack.</p>
@endsection

Directive @extends menyatakan layout yang digunakan oleh halaman tersebut.

Ketika view dirender, konten dari section title dan content akan ditempatkan pada bagian layout yang sesuai.

Apa manfaat layout?

Jika navbar atau footer perlu diperbarui, kamu cukup mengubah file layout. Halaman lain yang menggunakan layout tersebut akan mengikuti perubahan tanpa perlu menyalin ulang seluruh struktur HTML.

Pendekatan ini membantu menjaga konsistensi tampilan dan mengurangi duplikasi.

8. Menggunakan Blade Component

Selain layout, Blade menyediakan component untuk membangun bagian antarmuka yang dapat digunakan kembali.

Component cocok untuk elemen seperti kartu artikel, tombol, alert, badge, dan elemen UI lain yang memiliki struktur konsisten.

Ada dua pendekatan umum: anonymous component dan class-based component. Untuk pemula, anonymous component sering lebih mudah dipahami karena hanya membutuhkan satu file Blade.

Langkah 1: Buat component kartu artikel

Buat file:

resources/views/components/kartu-artikel.blade.php

Isi dengan kode berikut:

@props(['judul', 'kategori'])

<article class="kartu-artikel">
    <span>{{ $kategori }}</span>
    <h3>{{ $judul }}</h3>
</article>

Directive @props menentukan data yang diterima component. Pada contoh ini, component menerima judul dan kategori.

Langkah 2: Gunakan component

Di halaman artikel/index.blade.php, kamu dapat menulis:

<x-kartu-artikel
    judul="Belajar Laravel"
    kategori="Laravel"
/>

Blade akan merender markup dari component dengan nilai yang diberikan.

Mengirim nilai dinamis

Jika data berasal dari variabel PHP, gunakan tanda titik dua sebelum atribut:

<x-kartu-artikel
    :judul="$artikel['judul']"
    :kategori="$artikel['kategori']"
/>

Tanda titik dua menunjukkan bahwa nilai atribut merupakan ekspresi PHP, bukan teks literal.

Mengapa component berguna?

Bayangkan kamu memiliki banyak kartu artikel dengan struktur HTML yang sama. Tanpa component, markup tersebut perlu ditulis berulang kali.

Dengan component, kamu cukup mengirimkan data yang berbeda. Jika struktur kartu perlu diperbarui, perubahan dapat dilakukan pada satu file component.

Untuk component yang memiliki logika lebih kompleks, Laravel juga mendukung class-based component melalui perintah:

php artisan make:component KartuArtikel

Perintah tersebut membuat class component dan view yang terkait. Gunakan pendekatan ini ketika kebutuhan component memang memerlukan class tersendiri.

9. Menggunakan Include untuk Memisahkan Tampilan

Blade juga menyediakan directive @include untuk memasukkan view lain ke dalam view saat ini.

Fitur ini berguna untuk memisahkan potongan tampilan, seperti navbar, footer, atau notifikasi.

Misalnya, buat file:

resources/views/shared/navbar.blade.php

<nav>
    <a href="/">Beranda</a>
    <a href="/artikel">Artikel</a>
    <a href="/tentang">Tentang</a>
</nav>

Kemudian panggil dari layout:

<body>
    @include('shared.navbar')

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

Laravel akan menyisipkan isi view navbar ke dalam layout.

Mengirim data ke include

Kamu juga dapat mengirimkan data tambahan:

@include('shared.pesan', [
    'pesan' => 'Selamat datang di Yeestack',
])

Variabel pesan dapat digunakan oleh view yang disertakan.

Kapan menggunakan include dan component?

@include cocok untuk menyisipkan potongan view yang sederhana. Component lebih sesuai ketika elemen antarmuka memiliki data, atribut, slot, atau perilaku yang ingin distandardisasi.

Keduanya dapat digunakan bersama dalam satu aplikasi. Pilih pendekatan berdasarkan kebutuhan dan kompleksitas elemen yang dibuat.

10. Mengirim Data dari Controller ke Blade

Agar halaman dinamis, data perlu dikirim dari controller ke view.

Sebagai contoh, buat controller menggunakan Artisan:

php artisan make:controller ArtikelController

Kemudian, tambahkan metode index():

<?php

namespace App\Http\Controllers;

class ArtikelController extends Controller
{
    public function index()
    {
        $artikels = [
            [
                'judul' => 'Belajar PHP dari Nol',
                'kategori' => 'PHP',
            ],
            [
                'judul' => 'Memahami Konsep MVC',
                'kategori' => 'Web Development',
            ],
            [
                'judul' => 'Belajar Laravel Blade',
                'kategori' => 'Laravel',
            ],
        ];

        return view('artikel.index', [
            'artikels' => $artikels,
        ]);
    }
}

Data tersebut dikirim ke view dengan nama variabel artikels.

Selanjutnya, hubungkan route dengan controller di routes/web.php:

use App\Http\Controllers\ArtikelController;
use Illuminate\Support\Facades\Route;

Route::get('/artikel', [ArtikelController::class, 'index'])
    ->name('artikel.index');

Pastikan view resources/views/artikel/index.blade.php tersedia dan menggunakan variabel yang benar.

Contoh ini menggunakan array statis agar mudah dipahami. Dalam aplikasi sebenarnya, data dapat berasal dari model Eloquent yang mengambil informasi dari database.

11. Membuat Formulir dengan Blade

Blade juga dapat digunakan untuk membuat formulir HTML, misalnya formulir penambahan artikel.

Contoh sederhana:

<form action="{{ route('artikel.store') }}" method="POST">
    @csrf

    <label for="judul">Judul Artikel</label>

    <input
        type="text"
        id="judul"
        name="judul"
        value="{{ old('judul') }}"
    >

    <button type="submit">Simpan Artikel</button>
</form>

Pada contoh tersebut, route('artikel.store') mengarah ke named route untuk menyimpan artikel. Pastikan route tersebut sudah didefinisikan pada aplikasi sebelum formulir digunakan.

Directive @csrf menghasilkan token CSRF yang diperlukan untuk melindungi formulir pada route web yang menggunakan middleware CSRF.

Sementara itu, old('judul') membantu mengisi kembali nilai sebelumnya ketika validasi gagal dan Laravel mengembalikan input lama ke session.

Menggunakan PUT atau DELETE pada formulir

Formulir HTML secara langsung mendukung metode GET dan POST. Untuk menggunakan metode lain pada route web Laravel, kamu dapat memanfaatkan method spoofing.

Contoh:

<form action="{{ route('artikel.update', $artikel->id) }}" method="POST">
    @csrf
    @method('PUT')

    <input
        type="text"
        name="judul"
        value="{{ old('judul', $artikel->judul) }}"
    >

    <button type="submit">Perbarui Artikel</button>
</form>

Contoh ini mengasumsikan route update dan variabel $artikel telah tersedia. Untuk operasi sebenarnya, pastikan pengguna memiliki izin mengubah artikel tersebut dan data divalidasi sebelum disimpan.

12. Menampilkan Pesan dan Error Validasi

Formulir sering membutuhkan pesan sukses atau informasi kesalahan. Blade menyediakan directive untuk menampilkan informasi tersebut.

Menampilkan pesan sukses

Misalnya, controller mengarahkan pengguna kembali ke halaman dengan flash message:

return redirect()
    ->route('artikel.index')
    ->with('success', 'Artikel berhasil disimpan.');

Di dalam Blade:

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

Pesan tersebut dapat ditampilkan setelah tindakan berhasil dilakukan.

Menampilkan error validasi

Laravel menyediakan variabel $errors pada view untuk menampilkan pesan validasi ketika tersedia.

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

Kode tersebut menampilkan daftar pesan kesalahan yang dikembalikan oleh proses validasi.

Kamu juga dapat menampilkan error untuk satu kolom:

@error('judul')
    <p class="error">{{ $message }}</p>
@enderror

Cara ini membantu pengguna memahami bagian formulir yang perlu diperbaiki.

13. Praktik Membuat Halaman Artikel

Sekarang kita akan menggabungkan routing, controller, dan Blade dalam sebuah latihan sederhana.

Targetnya adalah membuat halaman daftar artikel dengan layout utama, component kartu, dan data yang dikirim dari controller.

Langkah 1: Siapkan controller

Pastikan ArtikelController memiliki metode index() yang mengirimkan array artikel seperti contoh sebelumnya.

Langkah 2: Daftarkan route

Di routes/web.php:

use App\Http\Controllers\ArtikelController;
use Illuminate\Support\Facades\Route;

Route::get('/artikel', [ArtikelController::class, 'index'])
    ->name('artikel.index');

Langkah 3: Buat layout

Buat resources/views/layouts/app.blade.php dengan struktur HTML, judul halaman, navbar, area konten, dan footer.

Gunakan @yield('title') serta @yield('content') agar halaman lain dapat memasukkan konten masing-masing.

Langkah 4: Buat component kartu

Buat resources/views/components/kartu-artikel.blade.php dengan properti judul dan kategori.

Langkah 5: Buat halaman daftar artikel

Buat resources/views/artikel/index.blade.php:

@extends('layouts.app')

@section('title', 'Daftar Artikel')

@section('content')
    <h2>Artikel Terbaru</h2>

    <div class="daftar-artikel">
        @forelse ($artikels as $artikel)
            <x-kartu-artikel
                :judul="$artikel['judul']"
                :kategori="$artikel['kategori']"
            />
        @empty
            <p>Belum ada artikel yang tersedia.</p>
        @endforelse
    </div>
@endsection

Pada tahap ini, halaman menggunakan tiga konsep Blade sekaligus: layout, perulangan, dan component.

Langkah 6: Jalankan aplikasi

Jika server belum aktif, jalankan:

php artisan serve

Buka URL /artikel pada alamat localhost yang ditampilkan di terminal.

Jika seluruh file dan route telah dikonfigurasi dengan benar, halaman akan menampilkan judul, kategori, dan kartu artikel berdasarkan data yang dikirim dari controller.

Langkah 7: Kembangkan dengan database

Setelah latihan berhasil, kamu dapat mengganti array statis dengan data dari database melalui model Eloquent.

Misalnya, model Artikel dapat mengambil data dari tabel artikel. Controller kemudian mengirimkan hasil query ke view.

Dengan begitu, kamu mulai memahami alur lengkap aplikasi Laravel dari permintaan pengguna hingga data yang ditampilkan pada halaman.

14. Kesalahan Umum Saat Menggunakan Blade

Berikut beberapa masalah yang sering dialami pemula.

A. View tidak ditemukan

Jika Laravel tidak dapat menemukan view, periksa lokasi file dan nama yang digunakan dalam helper view().

Sebagai contoh, view('artikel.index') mengacu pada resources/views/artikel/index.blade.php.

B. Variabel tidak tersedia

Jika Blade menampilkan error karena variabel tidak ditemukan, periksa apakah controller mengirimkan data dengan nama yang sesuai.

Misalnya, view menggunakan $artikels, tetapi controller mengirimkan $artikel. Perbedaan tersebut perlu diperbaiki.

C. Directive tidak ditutup

Directive seperti @if, @foreach, @forelse, dan @section perlu ditutup dengan directive yang sesuai.

Contohnya, @if harus memiliki penutup @endif, sedangkan @foreach ditutup dengan @endforeach.

D. Salah menggunakan sintaks component

Pastikan nama file component dan tag yang digunakan sesuai.

File resources/views/components/kartu-artikel.blade.php dapat dipanggil menggunakan <x-kartu-artikel />.

E. Konten HTML ditampilkan sebagai teks

Jika menggunakan {{ $konten }}, Blade melakukan escaping HTML. Ini merupakan perilaku yang diharapkan untuk teks biasa.

Jika aplikasi memang perlu menampilkan konten HTML yang berasal dari editor, jangan langsung mengubahnya menjadi output mentah tanpa sanitasi yang tepat. Konten HTML yang tidak tepercaya dapat membawa risiko keamanan.

F. Layout tidak menampilkan konten

Periksa apakah nama section di halaman sama dengan nama yang digunakan pada layout.

Misalnya, @section('content') harus sesuai dengan @yield('content').

15. Tips Menulis Template Blade yang Baik

Agar kode lebih mudah dikembangkan, terapkan beberapa kebiasaan berikut.

1. Pisahkan logika dan tampilan. Hindari menempatkan query database atau logika bisnis yang kompleks langsung di dalam view.

2. Gunakan layout untuk struktur yang berulang. Navbar, footer, dan kerangka HTML sebaiknya tidak ditulis ulang pada setiap halaman.

3. Gunakan component untuk elemen UI yang berulang. Kartu artikel, tombol, dan notifikasi adalah contoh elemen yang cocok dijadikan component.

4. Pilih nama variabel yang jelas. Nama seperti $artikels, $kategori, dan $judul lebih mudah dipahami jika digunakan secara konsisten.

5. Gunakan escaping secara default. Pilih {{ }} untuk teks biasa. Hindari output HTML mentah kecuali memang diperlukan dan kontennya telah diproses dengan aman.

6. Jangan mengabaikan validasi. Data formulir harus divalidasi sebelum disimpan atau diproses lebih lanjut.

7. Pelajari dokumentasi sesuai versi Laravel. Fitur Blade dapat berkembang, sehingga penting untuk mengikuti dokumentasi versi proyek.

8. Uji halaman dengan data kosong. Pastikan tampilan tetap masuk akal ketika belum ada data, misalnya dengan @forelse atau kondisi yang sesuai.

16. FAQ Laravel Blade

Apa itu Blade pada Laravel?

Blade adalah template engine bawaan Laravel yang digunakan untuk membuat tampilan dinamis dengan menggabungkan HTML, data PHP, directive, layout, dan component.

Di mana file Blade disimpan?

Secara default, file Blade disimpan di direktori resources/views dan menggunakan ekstensi .blade.php.

Apa perbedaan Blade dan PHP biasa?

Blade menyediakan sintaks template seperti {{ }}, @if, @foreach, dan @extends sehingga kode tampilan lebih mudah dibaca. Blade tetap dikompilasi menjadi PHP.

Apa fungsi @extends dan @yield?

@extends digunakan untuk menentukan layout yang diwarisi oleh sebuah view. @yield menyediakan tempat di layout untuk menampilkan section dari halaman yang menggunakan layout tersebut.

Apa perbedaan layout dan component?

Layout biasanya digunakan untuk kerangka halaman secara keseluruhan. Component digunakan untuk bagian antarmuka yang dapat digunakan kembali, seperti kartu, tombol, dan alert.

Apa fungsi @include?

@include menyisipkan view lain ke dalam view saat ini. Fitur ini cocok untuk memisahkan potongan tampilan seperti navbar atau footer.

Apakah Blade bisa digunakan tanpa controller?

Bisa. Route dapat langsung mengembalikan view menggunakan return view('nama-view'). Namun, controller lebih sesuai ketika halaman membutuhkan logika atau data yang lebih kompleks.

Apakah Blade aman dari XSS?

Blade melakukan escaping HTML secara default melalui {{ }}, yang membantu mengurangi risiko XSS pada teks yang ditampilkan. Namun, keamanan aplikasi tetap bergantung pada cara data diproses dan ditampilkan. Output HTML mentah harus ditangani secara hati-hati.

17. Kesimpulan

Laravel Blade mempermudah pembuatan tampilan aplikasi web yang dinamis, terstruktur, dan mudah dipelihara. Dengan Blade, kamu dapat menampilkan data, membuat kondisi, mengulang daftar, menggunakan layout, serta membangun component yang dapat digunakan kembali.

Mulailah dengan memahami sintaks {{ }}, directive seperti @if dan @foreach, serta cara mengirim data dari controller ke view. Setelah itu, pelajari layout menggunakan @extends dan @yield, kemudian lanjutkan ke component dan include.

Sebagai latihan, bangun halaman daftar artikel sederhana dengan data dari controller. Setelah berhasil, kembangkan halaman tersebut menggunakan database, Eloquent ORM, dan formulir CRUD.

Blade merupakan salah satu fondasi penting dalam pengembangan Laravel. Ketika kamu memahami cara kerja template, proses membangun dashboard, halaman artikel, dan antarmuka aplikasi akan menjadi lebih terorganisasi.

Untuk mengikuti jalur belajar secara lengkap, lanjutkan dari Roadmap Belajar Laravel dari Nol sampai Mahir, kemudian pelajari database dan operasi CRUD sebelum membangun fitur aplikasi yang lebih kompleks.