Blade directives in Laravel

Introduction

Blade directives help you write clean and simple templates in Laravel. They make your HTML and PHP code easier to read and manage.

When you want to show content only if a condition is true.

When you need to loop over a list of items to display them.

When you want to include another template inside your current one.

When you want to write PHP code inside your HTML easily.

When you want to display data safely to avoid security issues.

Syntax

Laravel

@directiveName(parameters)
    <!-- content -->
@enddirectiveName

Blade directives start with an @ symbol followed by the directive name.

Some directives like @if, @foreach have matching @endif, @endforeach to close them.

Examples

Shows a message only if the user is an admin.

Laravel

@if($user->isAdmin)
    <p>Welcome, admin!</p>
@endif

Loops through each item in the list and displays it in a list item.

Laravel

@foreach($items as $item)
    <li>{{ $item }}</li>
@endforeach

Includes the content of the 'header' template here.

Laravel

@include('header')

Adds a hidden security token field to forms to protect against attacks.

Laravel

@csrf

Sample Program

This example shows how to use Blade directives to display user info, conditionally show admin message, loop through tasks, and add a CSRF token in a form.

Laravel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blade Directives Example</title>
</head>
<body>
    @php
        $user = (object) ['name' => 'Alice', 'isAdmin' => true];
        $tasks = ['Write report', 'Attend meeting', 'Review code'];
    @endphp

    <h1>Hello, {{ $user->name }}!</h1>

    @if($user->isAdmin)
        <p>You have admin access.</p>
    @else
        <p>You are a regular user.</p>
    @endif

    <h2>Your Tasks:</h2>
    <ul>
        @foreach($tasks as $task)
            <li>{{ $task }}</li>
        @endforeach
    </ul>

    <form method="POST" action="/submit">
        @csrf
        <button type="submit">Submit</button>
    </form>
</body>
</html>

Important Notes

Always close directives like @if with @endif to avoid errors.

Use {{ }} to safely display variables and avoid security risks.

Blade compiles templates into plain PHP, so it runs fast.

Summary

Blade directives make templates easy to write and read.

Use directives for conditions, loops, includes, and security tokens.

Remember to close your directives properly.

Practice

1. Which Blade directive is used to display a variable safely escaped in a Laravel view?

easy

A. @foreach($variable as $item)

B. @php $variable @endphp

C. {{ $variable }}

D. @if($variable)

Solution

1. Step 1: Understand Blade variable display

   Blade uses double curly braces {{ }} to safely display variables with HTML escaping.

2. Step 2: Identify correct directive for safe output

   The {{ $variable }} syntax outputs the variable safely, preventing XSS attacks.

3. Final Answer:

   {{ $variable }} -> Option C

4. Quick Check:

   Safe variable display = {{ $variable }} [OK]

Hint: Use double curly braces {{ }} for safe variable output [OK]

Common Mistakes:

• Using @php for output instead of {{ }}
• Confusing @if with variable display
• Using @foreach for single variable output

2. Which of the following is the correct syntax to start a Blade loop over an array $items?

easy

A. @loop($items as $item)

B. @for($items as $item)

C. @while($items as $item)

D. @foreach($items as $item)

Solution

1. Step 1: Recall Blade loop directives

   Blade uses @foreach to loop over arrays or collections.

2. Step 2: Match correct syntax

   The correct syntax is @foreach($items as $item), which loops through each item.

3. Final Answer:

   @foreach($items as $item) -> Option D

4. Quick Check:

   Loop over array = @foreach [OK]

Hint: Use @foreach for looping arrays in Blade [OK]

Common Mistakes:

• Using @loop which does not exist
• Using @for incorrectly for arrays
• Using @while for array loops

3. What will be the output of this Blade snippet if $count = 3?

@if($count > 5)
  Large
@elseif($count > 1)
  Medium
@else
  Small
@endif

medium

A. Large

B. Medium

C. Small

D. No output

Solution

1. Step 1: Evaluate the condition $count > 5

   Since $count = 3, 3 > 5 is false, so skip the first block.

2. Step 2: Evaluate the @elseif($count > 1) condition

   3 > 1 is true, so Blade outputs "Medium" and skips the @else.

3. Final Answer:

   Medium -> Option B

4. Quick Check:

   3 > 1 but not > 5 = Medium [OK]

Hint: Check conditions top to bottom; first true block runs [OK]

Common Mistakes:

• Choosing Large because 3 is close to 5
• Ignoring @elseif and picking @else
• Thinking all blocks output

4. Identify the error in this Blade snippet:

@foreach($users as $user)
  
{{ $user->name }}
@endforeach
@endfor

medium

A. Incorrect closing directive @endfor instead of @endforeach

B. Missing closing @endforeach directive

C. Incorrect variable name $user instead of $users

D. Missing opening @for directive

Solution

1. Step 1: Check loop opening and closing directives

   The loop starts with @foreach but incorrectly ends with @endfor.

2. Step 2: Match correct closing directive

   Blade requires @endforeach to close a @foreach loop, so @endfor is invalid here.

3. Final Answer:

   Incorrect closing directive @endfor instead of @endforeach -> Option A

4. Quick Check:

   Match @foreach with @endforeach [OK]

Hint: Close @foreach with @endforeach, not @endfor [OK]

Common Mistakes:

• Using @endfor to close @foreach
• Confusing $user and $users variables
• Missing closing directive entirely

5. You want to include a Blade template named header.blade.php inside your main view. Which directive correctly includes it and passes a variable $title with value 'Welcome'?

hard

A. @include('header', ['title' => 'Welcome'])

B. @include('header', $title = 'Welcome')

C. @include('header', ['title' => Welcome])

D. @include('header', title = 'Welcome')

Solution

1. Step 1: Recall correct syntax for @include with data

   Blade's @include accepts the view name and an associative array of data.

2. Step 2: Check array syntax for passing variables

   The correct way is @include('header', ['title' => 'Welcome']) with quotes around string values.

3. Final Answer:

   @include('header', ['title' => 'Welcome']) -> Option A

4. Quick Check:

   Pass variables as array in @include [OK]

Hint: Pass variables as array in @include(['key' => value]) [OK]

Common Mistakes:

• Passing variable without array brackets
• Missing quotes around string values
• Using assignment syntax inside @include