Blade directives in Laravel - Mini Project: Build & Apply

Using Blade Directives in Laravel Views

📖 Scenario: You are building a simple Laravel web page that shows a list of users and highlights those who are active. You will use Blade directives to control the display logic in the view.

🎯 Goal: Create a Blade template that uses directives to loop through a list of users, check if each user is active, and display their name with a special message if active.

📋 What You'll Learn

Create a PHP array called $users with user data

Create a variable $highlightActive to control highlighting

Use the @foreach directive to loop through users

Use the @if directive to check if a user is active

Use the @else directive for inactive users

Close directives properly with @endforeach and @endif

💡 Why This Matters

🌍 Real World

Blade directives are used in Laravel to create dynamic views that change based on data and conditions, making web pages interactive and user-friendly.

💼 Career

Understanding Blade directives is essential for Laravel developers to build maintainable and efficient web applications with clean and readable templates.

1

Create the users data array

Create a PHP array called $users with these exact entries: ['name' => 'Alice', 'active' => true], ['name' => 'Bob', 'active' => false], and ['name' => 'Charlie', 'active' => true].

Laravel

<?php
// Create the $users array with the specified entries
// Your code here

Hint

Use a PHP array with associative arrays for each user.

2

Add a variable to control highlighting

Create a boolean variable called $highlightActive and set it to true.

Laravel

 'Alice', 'active' => true],
    ['name' => 'Bob', 'active' => false],
    ['name' => 'Charlie', 'active' => true]
];
// Create $highlightActive and set it to true
// Your code here

Hint

Just create a simple boolean variable.

3

Use Blade directives to loop and check active status

Write a Blade template snippet that uses @foreach ($users as $user) to loop through users, and inside it use @if ($user['active']) to check if the user is active. Display the user's name inside a <li> tag. Use @else to show "Inactive user" for inactive users. Close the directives with @endif and @endforeach.

Laravel

 'Alice', 'active' => true],
    ['name' => 'Bob', 'active' => false],
    ['name' => 'Charlie', 'active' => true]
];

$highlightActive = true;


    {{-- Loop through users and check active status --}}
    {{-- Your code here --}}

Hint

Use Blade directives exactly as shown to loop and conditionally display content.

4

Add conditional class using Blade and the highlight variable

Modify the <li> tag inside the @if ($user['active']) block to add a class highlight only if $highlightActive is true. Use the Blade directive @if ($highlightActive) inside the tag to conditionally add the class. Close the directive properly.

Laravel

 'Alice', 'active' => true],
    ['name' => 'Bob', 'active' => false],
    ['name' => 'Charlie', 'active' => true]
];

$highlightActive = true;


    @foreach ($users as $user)
        @if ($user['active'])
            {{ $user['name'] }}
        @else
            Inactive user
        @endif
    @endforeach

Hint

Use the Blade @if directive inside the tag to add the class conditionally.

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