Tutorial Laravel #6: View dan Blade Template Dasar

07/15/2025
ariq fadhil
3

1. Apa itu Blade?

Blade adalah template engine bawaan Laravel. Blade memungkinkan kamu menulis PHP di dalam HTML dengan sintaks yang jauh lebih bersih dan ringkas. File Blade berekstensi .blade.php dan disimpan di folder resources/views/.

Blade dikompilasi menjadi PHP biasa dan di-cache - jadi tidak ada overhead performa.

2. Membuat View Pertama

# Buat file view di resources/views/
# Bisa juga manual - buat file baru di folder views

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="id">
<head>
    <title>Halo Laravel</title>
</head>
<body>
    <h1>Selamat Datang di Laravel!</h1>
    <p>Ini adalah view Blade pertama saya.</p>
</body>
</html>

// Panggil view dari route atau controller
Route::get('/', function () {
    return view('welcome');  // otomatis cari resources/views/welcome.blade.php
});

3. Menampilkan Data

// Kirim data dari controller
return view('profil', ['nama' => 'Ariq', 'umur' => 25]);

<!-- resources/views/profil.blade.php -->
<p>Nama: {{ $nama }}</p>
<p>Umur: {{ $umur }} tahun</p>

<!-- {{ }} otomatis escape HTML - aman dari XSS -->
<!-- {!! !!} tampilkan HTML mentah - hati-hati! -->
<p>{!! $kontenHtml !!}</p>

4. Direktif Blade - Percabangan

<!-- @if, @elseif, @else, @endif -->
@if($umur >= 17)
    <p>Sudah dewasa</p>
@elseif($umur >= 13)
    <p>Remaja</p>
@else
    <p>Anak-anak</p>
@endif

<!-- @unless - kebalikan @if -->
@unless($sudahLogin)
    <a href="/login">Login</a>
@endunless

<!-- @isset dan @empty -->
@isset($user)
    <p>User ada: {{ $user->nama }}</p>
@endisset

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

5. Direktif Blade - Perulangan

<!-- @foreach -->
@foreach($artikels as $artikel)
    <li>{{ $artikel->judul }}</li>
@endforeach

<!-- @forelse - seperti foreach tapi ada fallback jika kosong -->
@forelse($artikels as $artikel)
    <li>{{ $artikel->judul }}</li>
@empty
    <p>Tidak ada artikel.</p>
@endforelse

<!-- @for -->
@for($i = 1; $i <= 5; $i++)
    <p>Nomor {{ $i }}</p>
@endfor

<!-- $loop variable - info tentang iterasi saat ini -->
@foreach($items as $item)
    @if($loop->first) <p>Ini item pertama</p> @endif
    <p>{{ $loop->index }} - {{ $item }}</p>
    @if($loop->last) <p>Ini item terakhir</p> @endif
@endforeach

6. Komentar Blade

<!-- Komentar HTML (masih tampil di source code) -->

{{-- Komentar Blade (tidak tampil sama sekali di output) -->
{{-- Ini tidak akan terlihat di browser inspect element --}}

7. Direktif Blade Lainnya

<!-- @php untuk blok PHP biasa -->
@php
    $harga = 50000;
    $diskon = 0.1;
    $total = $harga - ($harga * $diskon);
@endphp
<p>Total: {{ number_format($total) }}</p>

<!-- @auth dan @guest -->
@auth
    <p>Halo, {{ auth()->user()->nama }}!</p>
@endauth

@guest
    <a href="/login">Login</a>
@endguest

8. Ringkasan

File Blade berekstensi .blade.php dan disimpan di resources/views/
{{ $var }} untuk menampilkan data (auto-escape), {!! $var !!} untuk HTML mentah
Direktif @if, @foreach, @forelse untuk kontrol alur
@forelse sangat berguna karena punya fallback jika data kosong
$loop variable berisi info iterasi saat ini (index, first, last, dsb)

Tutorial berikutnya membahas layout, section, dan component Blade.