Let’s Learn Laravel Blade: Conditional Statements (Part 2)

In our last post, we learned about Laravel Blade and its capablities. That post only scratched the surface, blade can do so much more! In this post, we’ll dive into conditional statements and rendering. Every good templating engine has simple ways to conditionally show blocks of markup. Blade makes this very easy. If you’re used to doing regular PHP conditionals, this will all seem very familiar to you.

Let’s dive in and see how easy it really is.

Template Conditionals vs Controller Conditionals

You may be asking, why can’t we do our conditional logic to the data before it’s returned? There are cases where you should, and other’s where you shouldn’t. It’s important to know that template conditionals should only apply to the outputted HTML. If you need to do conditional logic to the data itself, do it in the controller. You can do it in the template since PHP can be ran directly inside of blade, but it’s best to keep templates as decoupled as possible.

An example of a controller conditional is a variable that decides if it shows certain content or not.

public function getMaxWidth() {
    $maxWidth =  get_field('max_width');
    return strlen($maxWidth) && $maxWidth > 0 ? true : false;
    // This function checks for multiple conditions, so it's best to do it in
    // a controller and not over-complicate the blade file
}

This is a simple example, but it contains multiple conditionals and the PHP function strlen to check if it should return true. This kind of logic can be done in the blade file, but you never know how much logic will be required to determine a conditional. So when should we use conditionals in blade files?

The answer is simple: we generally only want to use conditionals for the logic that displays markup. Some of this can be determined by PHP logic, but most of the heavy lifting is done in controllers. Let’s see what a blade conditional might look like.

<div class="button-container">
    @if($state.active)
        <button class="success">Go</button>
    @else
        <button class="muted disabled">Go</button>
    @endif
</div>

As you can see, the if statements are almost like a regular PHP conditional, but you always have to end it with @endif, even if you don’t use an @else. This snippet renders certain button markup depending on the state of the $active variable. We can assume this variable logic was determined in a controller function. The only real difference is the button’s classes.

Imagine that there are more complex groups of HTML elements. You can render entire blocks of HTML and put them each in a conditional. There’s no real limit!

Inline Conditionals

If statements don’t only have to render blocks of markup, they can also be used to determine all kinds of data, including attributes, id’s, classes, and so on. Let’s take our last example and make it a bit more efficient. Same logic, less code. Also note that we’re not using the @if @else @endif blocks. Blade Expects these statements on their own line. For inline conditionals, we use a typical ternary operator.

<div class="button-container">
    <button class="{{ $state.active ? 'active' :  'muted disabled' }}">Go</button>
</div>

There’s no “right” way to do conditionals in this case. This one is more concise, but might look a bit more unreadable for some. The type of conditional you use ultimately depends on how much data you’re displaying and what fits the scenario.

Else Ifs

We used if and else, but what about logic for many possible outcomes? That’s as easy as you’d think. Just use the @elseif block.

<div class="button-container">
    @if($state.active)
        <button class="success">Go</button>
    @elseif($state.loading)
        <p> Please wait while our app loads... </p>
        <button class="loading">Go</button>
    @else
        <button class="muted disabled">Go</button>
    @endif
</div>

Now You Know

As far as the basics go, that’s all you need to know about blade conditionals. Any other things you learn build off of these principals. What should we learn next? I think it’s time to learn about layouts! In any project, there will be certain blocks of code that are repeated across many pages. Blade helps you DRY things up and gives you great options for reusing your code. Hope to see you there!

Leave a Comment