Blade Templates

Laravel

⏱ 22 min read📖 IntermediateNot completed

Blade is Laravel's powerful, fast templating engine. Blade files use the .blade.php extension and compile to plain PHP.

Basic Blade Syntax

Blade

{{-- This is a Blade comment (not visible in HTML) --}}

{{-- Output variable (XSS-safe, auto-escapes HTML) --}}
<h1>{{ $title }}</h1>

{{-- Output raw HTML (use carefully!) --}}
<div>{!! $htmlContent !!}</div>

{{-- PHP expression --}}
{{ date('Y') }}
{{ strtoupper($name) }}
{{ $user->name ?? 'Guest' }}

Control Structures

Blade

{{-- If / else --}}
@if($user->isAdmin())
    <span>Admin</span>
@elseif($user->isModerator())
    <span>Moderator</span>
@else
    <span>User</span>
@endif

{{-- Unless (opposite of if) --}}
@unless($user->isLoggedIn())
    <a href="/login">Please login</a>
@endunless

{{-- Loops --}}
@foreach($users as $user)
    <li>{{ $user->name }}</li>
@endforeach

@for($i = 0; $i < 5; $i++)
    <p>Item {{ $i }}</p>
@endfor

{{-- Empty check --}}
@forelse($posts as $post)
    <li>{{ $post->title }}</li>
@empty
    <p>No posts found.</p>
@endforelse

Layouts & Inheritance

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'My App')</title>
</head>
<body>
    <nav>...navigation...</nav>

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

    @stack('scripts')
</body>
</html>

resources/views/users/index.blade.php

@extends('layouts.app')

@section('title', 'User List')

@section('content')
    <h1>All Users</h1>
    @foreach($users as $user)
        <p>{{ $user->name }} — {{ $user->email }}</p>
    @endforeach
@endsection

@push('scripts')
    <script>console.log('Users page loaded')</script>
@endpush

Components

Blade Component

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

{{-- Using the component --}}
<x-alert type="success">
    User saved successfully!
</x-alert>

<x-alert type="error">
    Something went wrong.
</x-alert>

💡

Always use {{ }} not {!! !!} unless you fully trust the content. Double curly braces escape HTML and protect against XSS attacks automatically.

← Previous Lesson Next Lesson →

🧠

Test your knowledge!

Take a quiz to reinforce what you learned.

Take Quiz →