Panduan Lengkap View Blade dalam Laravel untuk Pemula

Home > Blog > Laravel > Panduan Lengkap View Blade dalam Laravel untuk Pemula

Panduan Lengkap View Blade dalam Laravel untuk Pemula

Setelah memahami tentang controller dasar, langkah selanjutnya dalam proses belajar Laravel adalah mempelajari View Blade. Blade merupakan engine templating yang disediakan Laravel untuk mempermudah pembuatan tampilan (UI) secara dinamis dan terstruktur.

Penggunaan Blade sangat penting karena memudahkan developer memisahkan antara logika aplikasi dan tampilan, sekaligus mendukung berbagai fitur seperti inheritance, komponen, hingga looping yang sederhana.

Apa Itu View Blade?

View Blade adalah sistem templating bawaan Laravel yang memungkinkan developer menulis template HTML dengan sintaks tambahan untuk kebutuhan logika sederhana. Blade terletak dalam direktori:

resources/views/

Semua file Blade memiliki ekstensi:

.blade.php

Contoh penamaan file:

home.blade.php
about.blade.php
layout.blade.php

Dengan Blade, penulisan sintaks menjadi lebih ringkas serta mudah dipahami, dibandingkan mencampur PHP murni dengan HTML.

Cara Menghubungkan Controller dengan View Blade

Agar tampilan bisa ditampilkan, controller harus mengembalikan fungsi view().

Contoh Controller

public function home()
{
    return view('home');
}

Contoh Routing

File: routes/web.php

Route::get('/home', [HomeController::class, 'home']);

Contoh View

Buat file: resources/views/home.blade.php

<h1>Selamat Datang di Halaman Home</h1>

Ketika diakses melalui URL http://localhost:8000/home, tampilan akan muncul sesuai Blade.

Menampilkan Data pada View Blade

Controller dapat mengirim data ke Blade dalam bentuk array atau compact.

Contoh Mengirim Data dari Controller

public function profile()
{
    $name = 'Akbar';
    return view('profile', compact('name'));
}

Contoh Output di Blade

File: profile.blade.php

<p>Nama saya: {{ $name }}</p>

Sintaks {{ }} digunakan untuk echo output secara aman (XSS safe).

Sintaks Dasar Blade yang Paling Penting

Blade memiliki banyak sintaks ringkas yang memudahkan developer. Berikut beberapa yang paling sering digunakan:

1. Echo Output

{{ $variable }}

2. Blade If Condition

@if($age >= 18)
    <p>Dewasa</p>
@else
    <p>Anak-anak</p>
@endif

3. Blade Looping

@foreach($users as $user)
    <p>{{ $user->name }}</p>
@endforeach

4. Comment Blade

{{-- Ini komentar Blade --}}

Sintaks-sintaks ini lebih aman dan rapi dibandingkan menggabungkan HTML dengan PHP biasa.

Blade Template Inheritance (Layouting)

Salah satu fitur terbaik Blade adalah template inheritance, yang memungkinkan pembuatan layout utama untuk dipakai ulang di berbagai halaman.

1. Membuat Layout Utama

Buat file layout:

resources/views/layouts/main.blade.php

Isi contoh sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>Aplikasi Laravel</h1>
    </header>

    <div class="content">
        @yield('content')
    </div>

    <footer>
        <small>© 2026 Aplikasi Laravel</small>
    </footer>
</body>
</html>

2. Menggunakan Layout di Halaman Lain

Buat file:

resources/views/home.blade.php

Isi contoh:

@extends('layouts.main')

@section('title', 'Halaman Home')

@section('content')
    <h2>Selamat Datang di Home</h2>
    <p>Ini contoh penggunaan View Blade dan Layout.</p>
@endsection

Keuntungan besar dari pendekatan ini adalah konsistensi tampilan dan efisiensi dalam pengembangan UI.

Blade Components (Opsional untuk Modular UI)

Blade juga menyediakan komponen untuk membuat bagian tampilan yang dapat digunakan ulang, contohnya card, tombol, atau alert.

Contoh Komponen Blade

Buat file:

resources/views/components/alert.blade.php

Isi:

<div class="alert">
    {{ $slot }}
</div>

Untuk memanggilnya:

<x-alert>
    Ini adalah pesan alert!
</x-alert>

Keunggulan Menggunakan View Blade

Berikut beberapa keunggulan View Blade:

✔ Ringan & Cepat — Blade tidak mengurangi performa karena dikompilasi menjadi PHP biasa.

✔ Sintaks Singkat — Proses penulisan HTML + PHP jadi lebih rapi.

✔ Mendukung Template Inheritance — Membantu modularitas tampilan.

✔ Mudah Mengatur Data — Data dari controller mudah diterima dan ditampilkan.

✔ Mendukung Komponen Modern — Cocok untuk UI yang reusable.

Kesimpulan

View Blade adalah bagian penting dalam pengembangan aplikasi Laravel karena menyediakan cara yang efisien untuk membangun tampilan UI berbasis HTML. Dengan sintaks sederhana, inheritance, hingga komponen, Blade mempermudah developer dalam mengorganisir tampilan dan menjaga struktur kode tetap bersih.

Setelah menguasai View Blade, kamu siap melanjutkan ke tahapan berikutnya yaitu Blade Layout, untuk memperdalam konsep layouting dan modular UI.