beginner Step 4 of 15

Blade Templating

Laravel Framework

Blade Templating

Blade is Laravel's powerful and intuitive templating engine that compiles templates into plain PHP for zero-overhead rendering. Blade provides convenient shortcuts for common PHP control structures, template inheritance, and component-based layouts. Unlike raw PHP templates, Blade automatically escapes output to prevent XSS attacks. Blade templates use the .blade.php extension and live in the resources/views directory.

Blade Syntax

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title', 'My App')</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <nav>
        @auth
            <span>Welcome, {{ auth()->user()->name }}</span>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button>Logout</button>
            </form>
        @else
            <a href="{{ route('login') }}">Login</a>
        @endauth
    </nav>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @yield('content')
</body>
</html>

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

@section('title', 'All Posts')

@section('content')
    <h1>Posts</h1>

    @forelse($posts as $post)
        <article>
            <h2><a href="{{ route('posts.show', $post) }}">{{ $post->title }}</a></h2>
            <p>By {{ $post->user->name }} on {{ $post->created_at->format('M d, Y') }}</p>
            <p>{{ $post->excerpt }}</p>
        </article>
    @empty
        <p>No posts found.</p>
    @endforelse

    {{ $posts->links() }}  <!-- Pagination links -->
@endsection

Blade Components

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

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

<!-- Usage -->
<x-alert type="success" message="Post created!" />
<x-alert type="error" :message="$errorMessage" />

Pro tip: Blade's double curly braces {{ $var }} automatically escape HTML to prevent XSS. Use {!! $html !!} only for trusted content that should be rendered as raw HTML. Use @csrf in every form to include the CSRF token automatically.

Key Takeaways

Blade uses {{ }} for escaped output, @if/@foreach/@forelse for control structures.
Template inheritance with @extends, @section, and @yield creates reusable layouts.
Blade components (<x-component />) provide reusable UI building blocks with props.
{{ }} automatically escapes output; use {!! !!} only for trusted HTML content.
Always include @csrf in forms to prevent cross-site request forgery attacks.

arrow_back Eloquent ORM Next: Migrations and Seeders arrow_forward