Chapter 5: Blade Templating Engine di Laravel 12

Blade adalah templating engine yang powerful dan intuitif dari Laravel. Di chapter ini, kita akan membahas cara menggunakan Blade untuk membuat tampilan web yang lebih rapi, aman, dan efisien.

Apa itu Blade?

Blade adalah templating engine bawaan Laravel yang memungkinkan kamu untuk:

Menulis kode PHP yang lebih bersih dan ekspresif
Menggunakan fitur inheritance dan komponen
Mengamankan data dari XSS attacks secara otomatis
Mengorganisir tampilan dengan lebih terstruktur

Syntax Dasar Blade

Menampilkan Data

{{-- Cara basic menampilkan data --}}
<h1>{{ $title }}</h1>

{{-- Menampilkan data dengan default value --}}
<p>{{ $description ?? 'Tidak ada deskripsi' }}</p>

{{-- Menampilkan data tanpa escaping --}}
<div>{!! $htmlContent !!}</div>

Perbedaan {{ }} vs {!! !!}

{{ }} - Escape HTML entities (aman dari XSS)
{!! !!} - Tidak escape HTML (hati-hati! gunakan hanya untuk konten yang terpercaya)

{{-- Contoh perbedaan --}}
{{ "<strong>Halo</strong>" }}
// Output: &lt;strong&gt;Halo&lt;/strong&gt;

{!! "<strong>Halo</strong>" !!}
// Output: <strong>Halo</strong>

Direktif Blade

Kontrol Struktur

@if($user->isAdmin)
    <h1>Welcome, Admin!</h1>
@elseif($user->isModerator)
    <h1>Welcome, Moderator!</h1>
@else
    <h1>Welcome, User!</h1>
@endif

@foreach($posts as $post)
    <h2>{{ $post->title }}</h2>
@endforeach

@forelse($comments as $comment)
    <p>{{ $comment->content }}</p>
@empty
    <p>Tidak ada komentar</p>
@endforelse

Layout & Inheritance

{{-- layouts/app.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    @include('partials.header')
    
    @yield('content')
    
    @include('partials.footer')
</body>
</html>

{{-- pages/home.blade.php --}}
@extends('layouts.app')

@section('title', 'Homepage')

@section('content')
    <h1>Welcome to Homepage</h1>
@endsection

Components & Slots

{{-- components/alert.blade.php --}}
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

{{-- Penggunaan component --}}
<x-alert type="success">
    Data berhasil disimpan!
</x-alert>

Tips & Tricks

1. Blade Directives yang Sering Digunakan

@auth
    {{-- Konten untuk user yang sudah login --}}
@endauth

@guest
    {{-- Konten untuk user yang belum login --}}
@endguest

@csrf
{{-- Menghasilkan CSRF token field --}}

2. Custom Blade Directives

// AppServiceProvider.php
Blade::directive('rupiah', function ($expression) {
    return "<?php echo 'Rp ' . number_format($expression, 0, ',', '.'); ?>";
});

// Penggunaan
<p>Harga: @rupiah($price)</p>

3. Blade Components

{{-- Reusable form input component --}}
<x-input-field 
    type="text" 
    name="username" 
    label="Username"
    :value="old('username')"
/>

Best Practices

Gunakan Layout Inheritance
- Buat layout dasar yang bisa digunakan ulang
- Pisahkan komponen yang sering dipakai ke partial views
Manfaatkan Components
- Buat komponen untuk elemen UI yang sering digunakan
- Gunakan props untuk membuat komponen yang fleksibel
Jaga Keamanan
- Selalu gunakan {{ }} untuk menampilkan data user
- Gunakan {!! !!} hanya untuk konten yang terpercaya
Optimasi Performance
- Gunakan Blade directive @once untuk kode yang hanya perlu dijalankan sekali
- Cache view files dengan php artisan view:cache

Kesimpulan

Blade adalah templating engine yang powerful dan membuat development frontend di Laravel jadi lebih menyenangkan. Dengan fitur-fitur seperti layout inheritance, components, dan direktif yang ekspresif, kamu bisa membuat tampilan web yang kompleks dengan kode yang lebih rapi dan maintainable.

Langkah Selanjutnya

Pelajari Blade Components lebih dalam
Eksplorasi fitur Blade yang lebih advanced seperti stacks dan prepends
Coba buat custom Blade directives sesuai kebutuhan projectmu

Jangan lupa follow @code.santuy untuk update tutorial Laravel lainnya! 🚀

#Laravel #PHP #Blade #WebDevelopment #Frontend