View dengan Blade Templating Engine di Laravel

Pernah merasa kebingungan saat ingin menampilkan tampilan halaman di Laravel? Atau mungkin Anda masih bingung apa itu Blade templating engine yang sering disebut dalam dokumentasi Laravel? Tenang, Anda tidak sendirian. Banyak pemula yang merasa sulit memahami bagaimana sistem view bekerja di Laravel, terutama ketika baru pertama kali berhadapan dengan struktur folder resources/views dan sintaks khas Blade seperti @if, @foreach, atau {{ }}.

Artikel ini hadir untuk membantu Anda memahami konsep View di Laravel dengan Blade Templating Engine secara lengkap dan mudah dipahami. Anda akan mempelajari bagaimana cara membuat tampilan di Laravel, menggunakan sintaks Blade dengan benar, hingga mengelola layout agar kode Anda tetap rapi dan efisien.

Setelah membaca artikel ini hingga selesai, Anda akan bisa:

• Memahami apa itu Blade Template Engine dan fungsinya.
• Membuat dan menampilkan view di Laravel.
• Menggunakan fitur Blade seperti inheritance, component, dan directive.
• Menghindari kesalahan umum yang sering dilakukan pemula.

Menampilkan View dari Controller

Buka file routes/web.php dan tambahkan:

Route::get('/home', function () {
    return view('home');
});

Route::get('/home', function () {
    return view('home');
});

Sekarang buka browser dan kunjungi http://localhost:8000/home
➡ Anda akan melihat halaman home tampil di browser.

3. Menyisipkan Data ke Dalam View

Anda dapat mengirim data dari controller ke view seperti ini:

Route::get('/profil', function () {
    $nama = "Sultan";
    return view('profil', ['nama' => $nama]);
});

Route::get('/profil', function () {
    $nama = "Sultan";
    return view('profil', ['nama' => $nama]);
});

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

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

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

Blade akan secara otomatis mengganti {{ $nama }} dengan isi variabel dari controller.

Menggunakan Blade Directive

Blade menyediakan directive (perintah khusus) untuk mempermudah logika di dalam tampilan.

Contoh:

{{-- Kondisi --}}
@if($umur >= 18)
    <p>Anda sudah dewasa.</p>
@else
    <p>Anda masih di bawah umur.</p>
@endif

{{-- Perulangan --}}
@foreach($hobi as $item)
    <li>{{ $item }}</li>
@endforeach

{{-- Kondisi --}}
@if($umur >= 18)
    <p>Anda sudah dewasa.</p>
@else
    <p>Anda masih di bawah umur.</p>
@endif

{{-- Perulangan --}}
@foreach($hobi as $item)
    <li>{{ $item }}</li>
@endforeach

Dengan sintaks ini, Anda tidak perlu menulis <?php ?> seperti di PHP biasa — kode jadi lebih bersih dan mudah dibaca.

5. Menggunakan Layout dan Template Inheritance

Fitur ini sangat berguna jika Anda ingin banyak halaman memiliki struktur yang sama (misalnya header, footer, dan sidebar).

Langkah-langkahnya:

1. Buat layout utama resources/views/layouts/main.blade.php

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

<footer>
    <p>© 2025 Laravel Tutorial</p>
</footer>

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

<footer>
    <p>© 2025 Laravel Tutorial</p>
</footer>

Gunakan layout tersebut di halaman turunan

resources/views/home.blade.php
html
Salin kode
@extends('layouts.main')

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

@section('content')
    <h3>Selamat datang di halaman utama!</h3>
@endsection

Membuat Komponen Reusable

Selain layout, Blade juga mendukung component — potongan kecil tampilan yang bisa digunakan ulang.

Contoh:

resources/views/components/alert.blade.php

resources/views/components/alert.blade.php

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

Gunakan di halaman lain:

<x-alert type="success" message="Data berhasil disimpan!" />

<x-alert type="success" message="Data berhasil disimpan!" />

Ini akan menghasilkan tampilan alert sesuai parameter yang Anda berikan.

Sekarang Anda sudah memahami dasar-dasar View dengan Blade Templating Engine di Laravel — mulai dari membuat view sederhana, menggunakan directive, hingga mengelola layout dan komponen.
Dengan menguasai Blade, Anda bisa menulis tampilan yang lebih efisien, bersih, dan mudah dipelihara.

Ingin melangkah lebih jauh?
Baca juga: [Cara Menghubungkan Controller dan View di Laravel Secara Efisien]