March 04, 2026

Laravel Blade - Perwira Learning Center

Latar Belakang

Sebagai lanjutan dari pembahasan mengenai middleware di Laravel, tahap berikutnya adalah mempelajari Blade sebagai template engine yang digunakan untuk menampilkan tampilan pada aplikasi Laravel. Dalam pengembangan aplikasi web, tampilan atau antarmuka pengguna menjadi bagian penting karena berfungsi untuk menyajikan data yang telah diproses oleh sistem kepada pengguna.

Artikel ini dibuat dengan tujuan untuk mendokumentasikan hasil pembelajaran saya mengenai penggunaan Blade dalam Laravel. Dengan memahami cara kerja Blade, saya dapat mengelola tampilan aplikasi secara lebih terstruktur serta mempermudah proses integrasi antara data dari controller dengan halaman yang ditampilkan kepada pengguna.

Alat dan Bahan

Alat dan Bahan yang digunakan yaitu sebagai berikut:

A. Perangkat Lunak

  • Web browser (Google Chrome) 
  • Code editor (Visual Studio Code)
  • Terminal
  • Web server    
  • Composer 
  • PHP
  • Laravel

B. Perangkat Keras

  • Laptop

Pengenalan Laravel Blade

Apa Itu Template Engine?

Sebelum mengenal Blade, kita perlu paham dulu apa itu template engine. Sederhananya, template engine adalah alat yang memungkinkan kita menulis kode HTML dengan tambahan sintaks khusus untuk menyisipkan data dinamis, melakukan perulangan, percabangan, dan lain-lain. Hasilnya akan dikonversi menjadi HTML murni yang bisa dipahami browser.

Mengapa Laravel Memilih Blade?

Laravel sebenarnya bisa menggunakan PHP biasa untuk tampilan. Tapi coba bayangkan jika kita harus menulis:

php

<?php echo $nama; ?>

Dibandingkan dengan Blade yang cukup menulis:


php

{{ $nama }}

Jelas lebih bersih dan mudah dibaca, bukan? Blade memberikan kita cara menulis tampilan yang lebih elegan tanpa kehilangan kekuatan PHP.


Yang menarik, Blade tidak memperlambat aplikasi kita. Semua kode Blade akan dikompilasi menjadi PHP biasa dan disimpan dalam bentuk cache. Jadi saat dijalankan, yang diproses adalah PHP murni yang sudah optimal.


Struktur Folder View di Laravel

Semua file view di Laravel disimpan dalam folder resources/views. Saat kita membuat project Laravel baru, di dalam folder ini sudah ada file welcome.blade.php. Ekstensi .blade.php memberitahu Laravel bahwa file tersebut menggunakan template engine Blade.

Mari kita buat file view sederhana. Buat file baru bernama home.blade.php di folder resources/views:

php

<!DOCTYPE html>

<html>

<head>

    <title>Halaman Home</title>

</head>

<body>

    <h1>Selamat Datang di Aplikasi Saya</h1>

</body>

</html>

Untuk menampilkan view ini, kita bisa memanggilnya dari controller:


php

<?php

// app/Http/Controllers/HomeController.php

namespace App\Http\Controllers;


use Illuminate\Http\Request;


class HomeController extends Controller

{

    public function index()

    {

        return view('home');

    }

}

Atau langsung dari route jika kita ingin cepat:


php

Route::get('/', function () {

    return view('home');

});

Sintaks Dasar Blade

Sekarang kita masuk ke bagian yang paling penting: sintaks Blade. Mari kita pelajari satu per satu.

Menampilkan Data

Untuk menampilkan data yang dikirim dari controller, kita gunakan kurung kurawal ganda:

php

// Dari controller

return view('home', ['nama' => 'Budi']);

// Di view home.blade.php

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

Blade secara otomatis akan meng-escape output untuk mencegah serangan XSS. Jika kita benar-benar ingin menampilkan HTML mentah, gunakan {!! !!}.

Percabangan dengan @if

php

@if($nilai >= 75)

    <p>Selamat, kamu lulus!</p>

@else

    <p>Maaf, kamu belum lulus. Coba lagi.</p>

@endif

Perulangan dengan @foreach

php

@foreach($siswa as $s)

    <p>{{ $s->nama }} - {{ $s->kelas }}</p>

@endforeach

Perulangan dengan @forelse

Ini directive yang keren karena bisa menangani kondisi data kosong:

php

@forelse($siswa as $s)

    <p>{{ $s->nama }}</p>

@empty

    <p>Tidak ada siswa.</p>

@endforelse

Blade Layout dan Template Inheritance

Salah satu fitur terkuat Blade adalah template inheritance. Bayangkan jika kita memiliki 10 halaman dengan navbar dan footer yang sama. Tanpa layout, kita harus menyalin kode navbar dan footer ke 10 file tersebut. Ribet dan sulit dipelihara!

Membuat Layout Utama

Buat file resources/views/layouts/app.blade.php:

php

<!DOCTYPE html>

<html>

<head>

    <title>Contoh - @yield('title')</title>

</head>

<body>

    <nav>

        <a href="/">Home</a>

        <a href="/about">Tentang</a>

        <a href="/contact">Kontak</a>

    </nav>

    

    <main>

        @yield('content')

    </main>

    

    <footer>

        &copy; 2024 Contoh

    </footer>

</body>

</html>

Menggunakan Layout di Halaman Lain

Sekarang buat halaman home yang menggunakan layout di atas:

php

{{-- resources/views/home.blade.php --}}

@extends('layouts.app')


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


@section('content')

    <h1>Selamat Datang di Home</h1>

    <p>Ini adalah halaman utama aplikasi saya.</p>

@endsection

Penjelasan:

  • @extends memberi tahu Blade bahwa halaman ini menggunakan layout tertentu
  • @section mendefinisikan konten untuk bagian tertentu
  • @yield di layout menandai tempat di mana konten akan disisipkan

Include untuk Komponen Kecil

Untuk bagian yang lebih kecil seperti navbar atau footer, kita bisa menggunakan @include:

php

{{-- Membuat file navbar terpisah --}}

{{-- resources/views/partials/navbar.blade.php --}}

<nav>

    <a href="/">Home</a>

    <a href="/about">Tentang</a>

</nav>

{{-- Menggunakannya di layout --}}

@include('partials.navbar')

Kontrol Logika di Blade

Blade menyediakan berbagai directive untuk kontrol logika yang membuat tampilan kita lebih dinamis:

@isset dan @empty

php

@isset($user)

    <p>User: {{ $user->name }}</p>

@endisset


@empty($cart)

    <p>Keranjang belanja kosong</p>

@endempty

Switch Statement

php

@switch($role)

    @case('admin')

        <p>Halo Admin</p>

        @break

    @case('user')

        <p>Halo User</p>

        @break

    @default

        <p>Halo Pengunjung</p>

@endswitch

Blade Component untuk Tampilan Reusable

Component adalah fitur yang membuat kode kita semakin modular. Cocok untuk elemen UI yang dipakai berulang seperti alert, card, button, dll.

Membuat Component

Kita bisa membuat component menggunakan Artisan:

bash

php artisan make:component Alert

Perintah ini akan membuat dua file:

app/View/Components/Alert.php (logika component)

resources/views/components/alert.blade.php (template component)

Menulis Component

Di file template component:

php

{{-- resources/views/components/alert.blade.php --}}

@props(['type' => 'info'])

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

    {{ $slot }}

</div>

Menggunakan Component

php

<x-alert type="success">

    Data berhasil disimpan!

</x-alert>

<x-alert type="error">

    Maaf, terjadi kesalahan.

</x-alert>

Manfaat component sangat besar. Jika suatu saat kita ingin mengubah tampilan alert, cukup ubah di satu tempat, semua halaman akan ter-update.

Penggunaan Form di Blade

Membuat form di Laravel perlu perhatian khusus terutama untuk keamanan dan validasi.

Form Sederhana

php

<form method="POST" action="/siswa">

    @csrf

    <div>

        <label>Nama:</label>

        <input type="text" name="nama" value="{{ old('nama') }}">

        @error('nama')

            <p style="color: red;">{{ $message }}</p>

        @enderror

    </div>

   

    <div>

        <label>Kelas:</label>

        <input type="text" name="kelas" value="{{ old('kelas') }}">

        @error('kelas')

            <p style="color: red;">{{ $message }}</p>

        @enderror

    </div>

   

    <button type="submit">Simpan</button>

</form>

Penjelasan:

  • @csrf menghasilkan token keamanan untuk mencegah serangan CSRF
  • old('nama') mempertahankan input jika terjadi error validasi
  • @error menampilkan pesan error untuk field tertentu

Pengenalan Tailwind CSS

Setelah kita paham Blade, saatnya mempercantik tampilan dengan Tailwind CSS. Tailwind berbeda dengan framework CSS seperti Bootstrap. Alih-alih menyediakan komponen siap pakai, Tailwind menyediakan kelas-kelas utility kecil yang bisa kita kombinasikan.

Contoh, jika di Bootstrap kita menulis:

html

<button class="btn btn-primary">Klik</button>

Di Tailwind kita menulis:

html

<button class="bg-blue-500 text-white px-4 py-2 rounded">Klik</button>

Kelas-kelas seperti bg-blue-500, text-white, px-4, dll adalah utility classes yang masing-masing melakukan satu tugas spesifik.

Integrasi Tailwind CSS dengan Laravel

Mari kita integrasikan Tailwind ke project Laravel kita.

Langkah 1: Install Tailwind via NPM

bash

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Langkah 2: Konfigurasi tailwind.config.js

javascript

/** @type {import('tailwindcss').Config} */

export default {

  content: [

    "./resources/**/*.blade.php",

    "./resources/**/*.js",

    "./resources/**/*.vue",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

Langkah 3: Tambahkan Tailwind ke CSS

Buat file resources/css/app.css:

css

@tailwind base;

@tailwind components;

@tailwind utilities;

Langkah 4: Compile Asset

Tambahkan script di package.json:

json

"scripts": {

    "dev": "vite",

    "build": "vite build"

}

Lalu jalankan:

bash

npm run dev

Menggunakan Tailwind di Blade

Sekarang kita bisa menggunakan kelas Tailwind di file Blade:

php

<div class="max-w-4xl mx-auto p-6">

    <h1 class="text-3xl font-bold text-gray-800 mb-4">

        Selamat Datang

    </h1>

   

    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">

        Klik Saya

    </button>

</div>

Contoh Tampilan Halaman Menggunakan Blade dan Tailwind

Mari kita praktikkan semua yang sudah dipelajari dengan membuat halaman daftar produk sederhana.

Layout Utama dengan Tailwind

php

{{-- resources/views/layouts/app.blade.php --}}

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Toko Online - @yield('title')</title>

    @vite('resources/css/app.css')

</head>

<body class="bg-gray-100">

    {{-- Navbar --}}

    <nav class="bg-white shadow-lg">

        <div class="max-w-6xl mx-auto px-4">

            <div class="flex justify-between items-center h-16">

                <div class="text-xl font-semibold text-gray-800">

                    Toko Online

                </div>

                <div class="space-x-4">

                    <a href="/" class="text-gray-600 hover:text-gray-900">Home</a>

                    <a href="/products" class="text-gray-600 hover:text-gray-900">Produk</a>

                    <a href="/cart" class="text-gray-600 hover:text-gray-900">Keranjang</a>

                </div>

            </div>

        </div>

    </nav>


    {{-- Konten Utama --}}

    <main class="max-w-6xl mx-auto px-4 py-8">

        @yield('content')

    </main>


    {{-- Footer --}}

    <footer class="bg-white shadow-lg mt-8">

        <div class="max-w-6xl mx-auto px-4 py-4 text-center text-gray-600">

            &copy; 2024 Toko Online. Hak Cipta Dilindungi.

        </div>

    </footer>

</body>

</html>

Halaman Daftar Produk

php

{{-- resources/views/products/index.blade.php --}}

@extends('layouts.app')


@section('title', 'Daftar Produk')


@section('content')

    <div class="flex justify-between items-center mb-6">

        <h1 class="text-2xl font-bold text-gray-800">Produk Terbaru</h1>

        <a href="/products/create" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">

            Tambah Produk

        </a>

    </div>


    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

        @forelse($products as $product)

            <div class="bg-white rounded-lg shadow-md overflow-hidden">

                {{-- Gambar Produk --}}

                <img src="{{ $product->image }}" alt="{{ $product->name }}" 

                     class="w-full h-48 object-cover">

                

                {{-- Detail Produk --}}

                <div class="p-4">

                    <h3 class="text-lg font-semibold text-gray-800 mb-2">

                        {{ $product->name }}

                    </h3>

                    

                    <p class="text-gray-600 text-sm mb-3">

                        {{ Str::limit($product->description, 100) }}

                    </p>

                    

                    <div class="flex justify-between items-center">

                        <span class="text-xl font-bold text-blue-600">

                            Rp {{ number_format($product->price, 0, ',', '.') }}

                        </span>

                        

                        <form action="/cart/add/{{ $product->id }}" method="POST">

                            @csrf

                            <button type="submit" 

                                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">

                                + Keranjang

                            </button>

                        </form>

                    </div>

                </div>

            </div>

        @empty

            <div class="col-span-3 text-center py-12">

                <p class="text-gray-500 text-lg">Belum ada produk tersedia.</p>

            </div>

        @endforelse

    </div>

@endsection

Component Card Produk

Kita juga bisa membuat component untuk card produk agar lebih reusable:

bash

php artisan make:component ProductCard

php

{{-- resources/views/components/product-card.blade.php --}}

@props(['product'])


<div class="bg-white rounded-lg shadow-md overflow-hidden">

    <img src="{{ $product->image }}" alt="{{ $product->name }}" 

         class="w-full h-48 object-cover">

    

    <div class="p-4">

        <h3 class="text-lg font-semibold text-gray-800 mb-2">

            {{ $product->name }}

        </h3>

        

        <p class="text-gray-600 text-sm mb-3">

            {{ Str::limit($product->description, 100) }}

        </p>

        

        <div class="flex justify-between items-center">

            <span class="text-xl font-bold text-blue-600">

                Rp {{ number_format($product->price, 0, ',', '.') }}

            </span>

            

            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">

                + Keranjang

            </button>

        </div>

    </div>

</div>

Sekarang halaman produk kita menjadi lebih bersih:


php

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">

    @forelse($products as $product)

        <x-product-card :product="$product" />

    @empty

        <div class="col-span-3 text-center py-12">

            <p class="text-gray-500 text-lg">Belum ada produk tersedia.</p>

        </div>

    @endforelse

</div>

Hasil Pembelajaran

Melalui pembelajaran ini, saya memahami bahwa Blade merupakan template engine bawaan Laravel yang digunakan untuk membuat tampilan dengan sintaks yang lebih sederhana dan terstruktur. Blade memungkinkan penggunaan struktur seperti perulangan, percabangan, serta pemanggilan data dari controller secara langsung di dalam file tampilan.

Saya juga mempelajari penggunaan fitur Blade seperti layout dan section yang memungkinkan pembuatan template utama yang dapat digunakan kembali pada berbagai halaman. Dengan cara ini, struktur tampilan menjadi lebih rapi dan mempermudah pengelolaan kode ketika aplikasi berkembang menjadi lebih besar.

Kesimpulan

Blade merupakan komponen penting dalam Laravel yang berfungsi untuk mengelola tampilan aplikasi secara terstruktur. Dengan menggunakan Blade, proses pembuatan antarmuka menjadi lebih mudah karena sintaks yang digunakan lebih sederhana dan terintegrasi dengan sistem Laravel.

Pemahaman mengenai Blade membantu dalam membangun tampilan aplikasi yang lebih rapi, konsisten, dan mudah dikelola, sehingga proses pengembangan aplikasi web dapat dilakukan secara lebih efisien.

Recommended Articles