Ionut Cornea

Posted on Feb 10

Laravel Blade Template Engine: A Beginner's Guide

#laravel #php #webdev

[Laravel beginner series | Part 4]

👋 Hi again, folks! This is the fourth article from the Laravel beginner series! Let's get straight to it!

Laravel is one of the most popular PHP frameworks for web development, and one of its standout features is the Blade template engine. Blade makes it easy to create reusable, dynamic views while keeping your code clean and efficient.

In this article, you'll learn:

What Blade is and why it's useful
How Blade works in Laravel
Common Blade directives
A real-life example to understand Blade in action

Let's get started!

What is Blade in Laravel?

Blade is Laravel’s built-in template engine that allows developers to write dynamic HTML with embedded PHP in a more readable and maintainable way. Unlike traditional PHP templates, Blade provides template inheritance and reusable components, making development much more efficient.

Why Use Blade?

Cleaner Syntax: Blade’s directives make writing dynamic views easier than using raw PHP.
Template Inheritance: Allows you to define a base layout and extend it in child templates.
Reusable Components: Blade makes it easy to create reusable UI components.
Security Features: Blade automatically escapes output to prevent XSS attacks.

Setting Up Blade in Laravel

Blade templates are stored in the resources/views/ directory. By default, Laravel uses .blade.php extensions for Blade files.

For example, you can create a layout file:

// resources/views/layouts/main.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>My Laravel App</h1>
    </header>
    <main>
        @yield('content')
    </main>
    <footer>
        <p>&copy; 2025 My Laravel App</p>
    </footer>
</body>
</html>

Then, a child view can extend this layout:

// resources/views/home.blade.php
@extends('layouts.main')

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

@section('content')
    <h2>Welcome to my Laravel app!</h2>
@endsection

Rendering a Blade View in a Controller

To display the home.blade.php file, define a route and return the view:

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('home');
});

Common Blade Directives

Blade provides several directives that make working with templates easier.

1. Echoing Data

Use {{ }} to display variables safely:

<p>Hello, {{ $name }}</p>

If you need raw (unescaped) output, use {!! !!}:

{!! $htmlContent !!}  // Use with caution to prevent XSS

2. Blade Conditionals

Use @if, @elseif, and @else for conditional rendering:

@if($age >= 18)
    <p>You are an adult.</p>
@else
    <p>You are a minor.</p>
@endif

3. Blade Loops

Blade supports @foreach, @for, @while, and @foreach:

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

4. Including Other Views

You can include another Blade file using @include:

@include('partials.header')

Real-Life Example: Building a Product Listing Page

Let's say you're building an e-commerce website. You need to display a list of products dynamically using Blade.

Step 1: Create a Blade View for Products

// resources/views/products.blade.php
@extends('layouts.main')

@section('title', 'Products')

@section('content')
    <h2>Our Products</h2>
    <ul>
        @foreach($products as $product)
            <li>{{ $product['name'] }} - ${{ $product['price'] }}</li>
        @endforeach
    </ul>
@endsection

Step 2: Pass Data from the Controller

Define a route and pass a list of products:

use Illuminate\Support\Facades\Route;

Route::get('/products', function () {
    $products = [
        ['name' => 'Laptop', 'price' => 1200],
        ['name' => 'Phone', 'price' => 800],
        ['name' => 'Headphones', 'price' => 150]
    ];
    return view('products', compact('products'));
});

Step 3: Test Your Blade Template

Visit http://yourapp.test/products (or your local Laravel URL), and you’ll see a dynamic list of products rendered using Blade!

Conclusion

Blade is an essential tool for Laravel developers that makes working with views simple and powerful. With its features like template inheritance, reusable components, and built-in directives, Blade helps developers create clean and maintainable code.

Start experimenting with Blade in your Laravel projects and see how it improves your workflow!

🔥 Ready to Learn More?

Check out Laravel's official Blade documentation.

Also, here you have the Laravel community from Reddit.

Explore more advanced Blade features like components and slots.

Try building a complete Laravel project using Blade templates!

DEV Community