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

Need a 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

Need a 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 --}}

Need a 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

Need a hint?

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