Laravel Blade Templates Guide

Blade templating engine reference: layouts, sections, components, slots, directives, conditionals, and loops.

1. Layouts & Inheritance

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', config('app.name'))</title>
    @stack('styles')
</head>
<body>
    @include('partials.nav')
    <main>@yield('content')</main>
    @include('partials.footer')
    @stack('scripts')
</body>
</html>

<!-- resources/views/articles/show.blade.php -->
@extends('layouts.app')

@section('title', $article->title)

@push('styles')
    <link rel="stylesheet" href="/css/article.css">
@endpush

@section('content')
    <article>
        <h1>{{$article->title}}</h1>
        {!! $article->content_html !!}  <!-- unescaped HTML -->
    </article>
@endsection

@push('scripts')
    <script src="/js/article.js"></script>
@endpush

2. Components

<!-- resources/views/components/alert.blade.php -->
@props(['type' => 'info', 'dismissible' => false])

<div class="alert alert-{{$type}}" role="alert">
    {{$slot}}
    @if($dismissible)
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    @endif
</div>

<!-- Usage -->
<x-alert type="success" :dismissible="true">
    Article published successfully!
</x-alert>

<!-- Component with named slots -->
<!-- resources/views/components/card.blade.php -->
<div class="card">
    <div class="card-header">{{$header}}</div>
    <div class="card-body">{{$slot}}</div>
    @isset($footer)
    <div class="card-footer">{{$footer}}</div>
    @endisset
</div>

<!-- Usage with named slots -->
<x-card>
    <x-slot:header>Article Details</x-slot:header>
    <p>Card body content here</p>
    <x-slot:footer>Published {{$article->published_at->diffForHumans()}}</x-slot:footer>
</x-card>

3. Conditionals & Loops

<!-- if/elseif/else/unless -->
@if($user->isAdmin())
    <a href="/admin">Admin Panel</a>
@elseif($user->isModerator())
    <a href="/moderate">Moderate</a>
@else
    <a href="/dashboard">Dashboard</a>
@endif

@unless($user->isBanned())
    <form action="/posts"></form>
@endunless

@isset($variable) ... @endisset
@empty($collection) <p>No items.</p> @endempty

<!-- auth/guest -->
@auth <span>Hello {{auth()->user()->name}}</span> @endauth
@guest <a href="/login">Login</a> @endguest

<!-- can/cannot (policies) -->
@can('update', $article)
    <a href="/articles/{{$article->id}}/edit">Edit</a>
@endcan

<!-- foreach with $loop -->
@foreach($articles as $article)
    <div class="article {{$loop->odd ? 'odd' : 'even'}}">
        <span>{{$loop->iteration}} / {{$loop->count}}</span>
        <h2>{{$article->title}}</h2>
    </div>
@empty
    <p>No articles found.</p>
@endforeach

@forelse($articles as $article)
    <p>{{$article->title}}</p>
@empty
    <p>No articles.</p>
@endforelse

4. Forms & CSRF

<form method="POST" action="/articles">
    @csrf                   <!-- generates hidden _token field -->
    @method('PUT')          <!-- spoofs HTTP method -->

    <div>
        <label>Title</label>
        <input type="text" name="title" value="{{old('title', $article->title)}}">
        @error('title')
            <span class="error">{{$message}}</span>
        @enderror
    </div>

    <!-- Loop over validation errors -->
    @if($errors->any())
        <ul>
            @foreach($errors->all() as $error)
                <li>{{$error}}</li>
            @endforeach
        </ul>
    @endif

    <button type="submit">Save</button>
</form>

5. Custom Directives

// app/Providers/AppServiceProvider.php
use Illuminate\Support\Facades\Blade;

public function boot(): void
{
    // Simple directive
    Blade::directive('money', function ($amount) {
        return "<?php echo number_format($amount, 2); ?>";
    });

    // Paired directive
    Blade::directive('cache', function ($key) {
        return "<?php if (! \\Illuminate\\Support\\Facades\\Cache::has($key)): ?>";
    });
    Blade::directive('endcache', function () {
        return "<?php endif; ?>";
    });

    // Alias component
    Blade::component('components.alert', 'alert');
}

<!-- Usage -->
@money($price)
@cache('article.' . $id) ... @endcache

6. Blade Directives Quick Reference

Directive	Purpose
@extends	Extend a layout
@section / @endsection	Define a section
@yield	Output a section
@include	Include a sub-view
@component / x-component	Render a component
@props	Declare component props
@stack / @push	Stacked sections
@csrf	CSRF token input
@method	HTTP method spoofing
@error	Show validation error
@env	Conditional by env
@php	Inline PHP code

Laravel Blade Templates Guide

1. Layouts & Inheritance

2. Components

3. Conditionals & Loops

4. Forms & CSRF

5. Custom Directives

6. Blade Directives Quick Reference

Alat terkait