11-07-2025 | Admin User Programming 20 x dilihat

Memahami Blade Templating

Apa Itu Blade Templating?

Blade adalah sistem templating bawaan Laravel untuk membuat tampilan (view) dinamis dengan HTML. Blade memungkinkan kamu menampilkan data dari database, membuat logika seperti pengulangan atau kondisi, dan mengatur tata letak (layout) dengan mudah, tanpa mencampur kode PHP langsung di HTML.

Hubungan dengan Aplikasi

Blade digunakan untuk membuat antarmuka pengguna yang menampilkan data dari model (misalnya, tabel posts) ke halaman web. Blade bekerja bersama controller atau route untuk mengirim data ke tampilan.

Tutorial Menggunakan Blade Templating

Berikut langkah-langkah membuat tampilan sederhana dengan Blade untuk menampilkan daftar postingan dari tabel posts (dengan kolom id, title, content).

Persiapan

Pastikan kamu sudah:

Menginstal Laravel dan mengatur koneksi database di file .env.
Membuat tabel posts dengan migration dan mengisi data (misalnya, via seeder atau factory).
Membuat model Post dengan php artisan make:model Post.

Langkah-Langkah

Buat File Blade
Buat file resources/views/posts.blade.php dengan konten berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Daftar Postingan</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-6">
    <h1 class="text-2xl font-bold mb-4">Daftar Postingan</h1>
    @if ($posts->isEmpty())
        <p>Tidak ada postingan tersedia.</p>
    @else
        <ul class="list-disc pl-6">
            @foreach ($posts as $post)
                <li>
                    <h2 class="text-xl font-semibold">{{ $post->title }}</h2>
                    <p>{{ $post->content }}</p>
                </li>
            @endforeach
        </ul>
    @endif
</body>
</html>

Penjelasan:

{{ $post->title }}: Menampilkan data dari variabel (aman dari serangan XSS).
@foreach: Mengulang data dalam array $posts.
@if/@else: Menampilkan pesan jika data kosong.
Tailwind CSS digunakan untuk gaya sederhana.

Buat Route untuk Menampilkan View
Buka file routes/web.php dan tambahkan kode berikut:

use App\Models\Post;

Route::get('/posts', function () {
    $posts = Post::all(); // Ambil semua data dari tabel posts
    return view('posts', ['posts' => $posts]); // Kirim data ke view
});

Jalankan Server
Jalankan server Laravel dengan:
```
php artisan serve
```
Buka http://localhost:8000/posts di browser. Kamu akan melihat daftar postingan dari tabel posts atau pesan "Tidak ada postingan tersedia" jika tabel kosong.

Fitur Utama Blade

Variabel: Gunakan {{ $variable }} untuk menampilkan data.
Pengulangan: @foreach ($items as $item) untuk mengulang data.
Kondisi: @if, @else, @elseif untuk logika kondisional.

Layout: Gunakan @extends dan @section untuk membuat templat dasar. Contoh:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

Gunakan di posts.blade.php:

@extends('layouts.app')
@section('title', 'Daftar Postingan')
@section('content')
    <!-- Konten posts.blade.php seperti di atas -->
@endsection

Mengapa Blade Penting?

Sederhana: Sintaks mudah dipahami, mirip HTML biasa.
Aman: Otomatis mencegah serangan XSS dengan escaping data.
Fleksibel: Mendukung logika kompleks tanpa mencampur PHP mentah.
Efisien: Menggunakan layout untuk kode yang reusable.

Contoh Hasil

Jika tabel posts berisi data:

[
    {"id": 1, "title": "Belajar Laravel", "content": "Laravel sangat mudah..."},
    {"id": 2, "title": "Blade Templating", "content": "Membuat tampilan dinamis..."}
]

Halaman akan menampilkan:

Belajar Laravel: Laravel sangat mudah...
Blade Templating: Membuat tampilan dinamis...

Langkah Selanjutnya

Pelajari direktif Blade lain seperti @include untuk menyisipkan file lain.
Gabungkan Blade dengan controller untuk logika yang lebih terorganisir.
Baca dokumentasi Blade untuk fitur seperti components atau directives.

Selamat! Kamu sudah menguasai dasar Blade Templating untuk membuat tampilan dinamis di Laravel!