Skip to content

Chapter 5.1: Blade Templates in Laravel

Study time: 40 minutes

1. What is Blade? Your "Smart" Blueprint

Until now, we have worked with two extremes: a pure index.html and a pure JSON response from the API. But how do we create full-fledged web pages that dynamically display data from our backend?

Blade is Laravel's built-in templating engine. It allows us to write regular HTML, but with "superpowers":

  • Insert variables and execute PHP code with an elegant syntax.
  • Create reusable page "layouts" (headers, footers).
  • Use loops and conditions directly in the HTML code.
  • Automatically protect against XSS attacks.

💡 Space Analogy:

Imagine that HTML is a simple blueprint of a spaceship. Blade is an advanced CAD system. You don't just draw lines, you add "smart" objects. You say, "Here will be the crew list," and Blade automatically requests the data and fills it in. "Here will be the main screen," and Blade inserts the standard interface.

All Blade files have the .blade.php extension and are stored in the resources/views/ folder.

2. Basic Syntax: Displaying Data

The simplest thing Blade does is output data.

The {{ }} Syntax

These double curly braces are a command for Blade to "take a variable and safely output its contents."

Example:

  1. Route in routes/web.php: 

    <?php
Route::get('/mission-briefing', function () {
    $mission = 'Explore the Kepler-186 system';
    return view('briefing', ['mission_name' => $mission]);
});

    • view('briefing', ...) tells Laravel to find the resources/views/briefing.blade.php file.
    • ['mission_name' => $mission] is an array of data that we "pass" to our view.

  2. View in resources/views/briefing.blade.php: 

    <h1>Mission Control Briefing</h1>
<p>Current task: {{ $mission_name }}</p>

Result in the browser at /mission-briefing: 

<h1>Mission Control Briefing</h1>
<p>Current task: Explore the Kepler-186 system</p>

🛡️ Important to know: Blade automatically escapes all data within {{ }}. This means that if a variable contains HTML tags or a malicious script, they will be output as plain text, not executed. This is a built-in protection against XSS attacks.

To output unescaped HTML (do this with caution!), use the {!! $variable !!} syntax.

3. Directives: Adding Logic to HTML

Blade directives start with the @ symbol. They allow you to use loops, conditions, and much more.

Conditions (@if, @else): 

@if($planet->is_habitable)
    <p style="color: green;">The planet is habitable!</p>
@else
    <p style="color: red;">A spacesuit is required. The atmosphere is hostile.</p>
@endif

Loops (@foreach, @forelse):

@forelse is a very convenient directive that combines a loop and a check for emptiness. 

<h2>List of planets in the system:</h2>
<ul>
    @forelse($planets as $planet)
        <li>
            {{ $loop->iteration }}. {{ $planet->name }}
            <!-- $loop is a special variable available in the loop -->
        </li>
    @empty
        <li>No planets have been detected in this system.</li>
    @endforelse
</ul>

4. Layouts and Sections: Don't Repeat Yourself (DRY)

The most powerful feature of Blade is the creation of reusable layouts. You don't need to copy the site header and footer to every page.

Step 1: Create a master layout

Create a file resources/views/layouts/app.blade.php: 

<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mission Control - @yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>Galactic Fleet Command Center</h1>
    </header>

    <main>
        @yield('content') <!-- The unique content of the page will be here -->
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} Space Command. All rights reserved.</p>
    </footer>
</body>
</html>
- @yield('title') and @yield('content') are "slots" or "placeholders".

Step 2: Create a child view that uses the layout

Create a file resources/views/planets/index.blade.php: 

<?php
@extends('layouts.app') {{-- Inherit our master layout --}}

@section('title', 'List of Planets') {{-- Fill the 'title' section --}}

@section('content') {{-- Fill the main 'content' section --}}
    <h2>Registered Planets</h2>
    <p>This is a list of all worlds known to us.</p>
    {{-- Your @forelse loop for displaying planets can be here --}}
@endsection

Now, when Laravel renders planets.index, it will first take layouts.app, and then insert the content from the @section sections into it.

Quiz to Reinforce

1. What extension do Blade template files have?

2. How do you safely output the `$name` variable in Blade?

3. Which directive is used to inherit a master layout?

4. What does the `@yield('content')` directive do?

5. Which directive is ideal for looping through an array that might be empty?

🚀 Chapter Summary:

You have learned the basics of Blade — a powerful tool for creating dynamic web pages. You can now:

  • Output data with automatic XSS protection.
  • Use directives to add logic (@if, @forelse).
  • Create reusable layouts using @extends and @yield.

We have prepared the "blueprints" for our ship's control panels. In the next chapter, we will create specific "panels" (views) for our API and display real data on them.