Skip to main content
Laravel Basics Tutorial
CHAPTER 06 Beginner

Blade Templating Engine

Updated: May 14, 2026
25 min read

# CHAPTER 6

Blade Templating Engine

1. Introduction

In core PHP, mixing HTML and PHP logic results in messy files full of <?php echo htmlspecialchars($var); ?> tags. It is ugly, hard to read, and error-prone. Laravel solves this with Blade, a beautifully simple yet powerful templating engine. Blade allows you to write clean HTML while providing intuitive shortcuts for echoing data, writing loops, and structuring layouts. In this chapter, we will master Blade syntax.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Understand how Blade compiles into standard PHP.
  • Echo variables securely using Blade syntax.
  • Write if statements and foreach loops in Blade.
  • Use Layouts and Sections to DRY up your HTML.

3. Beginner-Friendly Explanation

Imagine building a 50-page website. Every single page needs the exact same Navigation Bar and Footer. In old HTML, you copy-paste that code 50 times. If you want to change a link in the Footer, you have to edit 50 files! Blade Layouts act like a master picture frame. You build the frame (Nav and Footer) once. Then, for each page, you just swap out the picture inside the frame. Furthermore, instead of writing clunky PHP tags to display a user's name, Blade gives you magic double curly braces {{ }} that do the work for you.

4. Basic Blade Syntax (Echoing Data)

All Blade files must end in .blade.php and live in the resources/views/ directory.

When a Controller passes data to a View, Blade makes it trivial to display. *Controller:* return view('profile', ['name' => 'Alice']);

In profile.blade.php:

html
12345 
<!-- Core PHP way (Ugly): -->
<h1>Hello, <?php echo htmlspecialchars($name); ?></h1>

<!-- Blade way (Beautiful): -->
<h1>Hello, {{ $name }}</h1>

*Security Note:* The {{ }} syntax automatically runs htmlspecialchars() behind the scenes, meaning your site is instantly protected against XSS attacks. If you *want* to render raw HTML from a database (dangerous), you use {!! $name !!}.

5. Blade Directives (Logic)

Blade provides "Directives" (commands that start with @) to replace PHP logic tags.

If Statements:

html
1234567 
@if ($role == &#039;admin')
    <button>Delete Entire Website</button>
@elseif ($role == &#039;editor')
    <button>Edit Post</button>
@else
    <p>Welcome, regular user.</p>
@endif

Foreach Loops (For looping through database arrays):

html
12345 
<ul>
    @foreach ($users as $user)
        <li>{{ $user->name }} - {{ $user->email }}</li>
    @endforeach
</ul>

6. Master Layouts (The Picture Frame)

To avoid copy-pasting your <head>, Nav, and Footer, you create a "Master Layout."

Step 1: Create resources/views/layouts/app.blade.php

html
1234567891011121314 
<!DOCTYPE html>
<html>
<head><title>My App</title></head>
<body>
    <nav>Home | About | Contact</nav>
    
    <div class="content">
        <!-- @yield is the empty space in the picture frame -->
        @yield(&#039;content') 
    </div>

    <footer>Copyright 2024</footer>
</body>
</html>

Step 2: Create a page that uses the frame (resources/views/home.blade.php)

html
12345678 
<!-- Tell Blade to use the app layout -->
@extends(&#039;layouts.app')

<!-- Fill the empty &#039;content' space with this specific picture -->
@section(&#039;content')
    <h1>Welcome to the Homepage</h1>
    <p>This paragraph will magically appear between the Nav and Footer!</p>
@endsection

7. Including Partial Views

Sometimes you have a complex piece of UI (like a pricing card) that you want to reuse across multiple pages. You can isolate it in its own file (views/partials/card.blade.php) and "include" it wherever you want.
html
1234 
<div class="gallery">
    <!-- This drops the code from card.blade.php right here -->
    @include(&#039;partials.card', ['title' => 'Premium Plan'])
</div>

8. Backend Workflow: Compilation

It is important to know that a web browser has no idea what @foreach or {{ }} means. Browsers only read HTML. When a user requests a page, Laravel reads your .blade.php file, translates all the @ directives into raw PHP code, saves it in a hidden cache folder, and sends standard HTML to the browser. It happens in milliseconds.

9. Best Practices

  • Never Write Database Queries in Blade: A common beginner mistake is realizing that you *can* write raw PHP in Blade using the @php directive. Just because you can, doesn't mean you should. Never use @php to query the database. Data fetching belongs in the Controller/Model.

10. Common Mistakes

  • Forgetting the .blade.php Extension: If you name your file home.php instead of home.blade.php, Laravel will not parse the Blade syntax. Users will literally see {{ $name }} printed on their screen.

11. Exercises

  1. 1. Explain how the @extends and @yield directives work together to create a Master Layout system.

12. Coding Challenges

  • Challenge: Write a Blade file that takes an array called $products. Use an @if statement to check if the array is empty. If it is, display "No products found." If it is not empty, use an @foreach loop to display each product's name.

13. MCQs with Answers

Question 1

What is the primary security benefit of using the double curly brace {{ $variable }} syntax in a Blade file?

Question 2

In a Master Layout file, which Blade directive creates a "placeholder" or empty space where child views can inject their specific HTML content?

14. Interview Questions

  • Q: Explain the purpose of a templating engine like Blade in the context of MVC architecture. Why is it superior to writing raw PHP tags inside HTML files?
  • Q: Describe how you would architect a Blade layout system for a 50-page website to adhere to the DRY (Don't Repeat Yourself) principle.

15. FAQs

Q: Can I use standard PHP tags <?php ?> inside a Blade file? A: Yes, standard PHP will still execute perfectly inside a Blade file. However, mixing Blade syntax and raw PHP syntax makes the file messy. It is best to stick entirely to Blade directives.

16. Summary

In Chapter 6, we brought beauty to the View layer. Blade is a powerful engine that allows us to write dynamic, data-driven HTML without the clunky syntax of raw PHP. By mastering {{ }} for safe echoing, @foreach for looping over data, and the @extends/@yield layout system for DRY architecture, we can rapidly construct complex, professional user interfaces.

17. Next Chapter Recommendation

Our views look great, but they are read-only. We need to allow users to send data back to the server. Proceed to Chapter 7: Forms and Request Handling.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Working with Controllers
Next Chapter Forms and Request Handling

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1