Mastering Blade Directives for Loops and Conditionals

Previously in this course, we explored Implementing Blade Partials: A Guide to DRY Laravel Views to keep our templates clean and reusable. Now that we have the structural basics down, it's time to make our views truly dynamic.

In any real-world application, you rarely display static content. You need to show "active" tasks, hide buttons for unauthenticated users, or render a list of items from a database. Blade makes this easy by providing a clean, readable syntax for common PHP control structures.

Controlling View Logic with Blade Conditionals

At its core, a view is just a representation of state. Sometimes, you only want to show specific parts of that state if certain conditions are met. Instead of writing raw PHP like <?php if ($task->completed): ?>, Blade gives us the @if directive.

The syntax is expressive and mirrors standard PHP, but without the messy curly braces and closing tags.

BLADE
@if ($task->is_completed)
    <span class="badge">Finished</span>
@elseif ($task->is_urgent)
    <span class="badge badge-warning">Urgent</span>
@else
    <span class="badge badge-info">Pending</span>
@endif

Why use Blade directives?

1. Readability: Your templates stay clean and look more like HTML than code.
2. Safety: Blade automatically handles common PHP pitfalls and keeps your syntax consistent.
3. Integration: Directives are purpose-built to work with the data you pass from your controllers.

Rendering Lists with Loops

When building our Task Manager, the most common task you'll perform is iterating over an array or collection of items. Blade provides the @foreach directive for this exact purpose.

The @foreach Directive

If you have an array of tasks passed from your controller, you can loop through them like this:

BLADE
<ul>
    @foreach ($tasks as $task)
        <li>{{ $task->title }}</li>
    @endforeach
</ul>

The @forelse Directive

One of the most common "gotchas" in development is rendering an empty list. You might show an empty <ul> tag, which looks broken. Laravel provides the @forelse directive to handle this scenario gracefully in one block.

BLADE
<ul>
    @forelse ($tasks as $task)
        <li>{{ $task->title }}</li>
    @empty
        <p>No tasks found. Time to relax!</p>
    @endforelse
</ul>

The @forelse directive checks if the collection is empty. If it is, it automatically jumps to the @empty block. It’s cleaner and more robust than writing an @if check followed by a @foreach.

Hands-on Exercise: Building the Task List

Let’s apply this to our Task Manager. Open your resources/views/tasks/index.blade.php file. Assume your controller is passing a variable named $tasks to this view.

1. Replace your static list items with a @forelse loop.
2. Inside the loop, add an @if condition to style the task differently if it's marked as "urgent".
3. Use the @empty directive to display a friendly message when there are no tasks.

BLADE
<h1>My Tasks</h1>

@forelse ($tasks as $task)
    <div class="{{ $task->urgent ? 'border-red' : 'border-gray' }}">
        <h3>{{ $task->title }}</h3>
        @if ($task->completed)
            <p>Status: Done</p>
        @else
            <p>Status: In Progress</p>
        @endif
    </div>
@empty
    <p>You have no tasks! Enjoy your day.</p>
@endforelse

Common Pitfalls

• Forgetting the End Directive: Every Blade directive like @if or @foreach must be closed with an @endif or @endforeach. If you forget, you'll see a syntax error in your browser.
• Variable Scope: Remember that variables defined inside a loop are only available within that loop. Don't try to access $task outside of your @foreach block.
• Mixing Logic: While Blade is powerful, keep your complex business logic in your Controllers or Models, as discussed in Introduction to Blade: Mastering Laravel's Templating Engine. Keep your views focused on displaying data, not calculating it.

Recap

We’ve moved from static HTML to dynamic templates. By mastering these Blade directives:

• You use @if, @elseif, and @else to handle conditional UI states.
• You use @foreach to iterate over data collections.
• You use @forelse to elegantly handle empty states, ensuring your users never see a blank, confusing page.

These tools are the bread and butter of Laravel development. Once these become muscle memory, building complex interfaces becomes significantly faster.

Up next: We will combine everything we've learned to finalize the Task Manager: Building the User Interface.