Laravel — P9- Displaying Data in Blade Files

Discussing Blade Directives

We ended our previous article with a quick introduction into Blade. What we really wanted to achieve was introduce what Blade is, understand that there are Blade Directives, and figure out how to load our blade component once a specific route is hit.

Read the previous articles on Blade Introduction.

In this article, we go deeper. We’re going to look at the following concepts:

  • Displaying Data
  • Displaying Unescaped Data

Displaying Data

We looked at passing data in the previous article, but we’re going to review it once more. Let’s create a route and pass data to our view.

Route::get('/my-favorite-car', function() {
    return view('cars/car', [
        'car' => 'Subaru WRX STi',
    ]);
});
The route /my-favorite-car will return a view /cars/car with our favorite car, in this instance the Subaru WRX STi (RIP STi). We need to create a cars/car.blade.php file.

You might have noticed that we’re only adding /cars/car instead of /cars/car.blade.php. We can do either or, but by convention you would omit the .blade.php extension.

The data that we just passed was an array. It contains a key car that is accessible inside of our view. To call it, just append the $ in front of it and it works just like any other variable. You can use PHP’s echo statement, but blade has a built in directive: {{ }}. Place the variable between the two sets of curly braces to evaluate it.

Besides it looking much cleaner, {{ $car }}, you get the additional protection of htmlspecialchars.

<h1>My Favorite Car is: {{ $car }}</h1>

Displaying Unescaped Data

As mentioned above, using {{ }} applies htmlspecialchars before displaying it to the user. For example, let’s say that we pass the following data to our /my-favorite-car route.

Route::get('/my-favorite-car/with-htmlspecialchars', function() {
    return view('cars/car', [
        'car' => '<script>alert("Subaru WRX STi")</script>',
    ]);
});

If we check our page, it’ll display the following:

It displays the tag to the user but it doesn’t execute it. That’s because all of the tags have been transformed. For example, < is now &alt;. Even if you right-click and view page source, you’ll see the following:

<body class="p-6">
    <h1>My Favorite Car is: &lt;script&gt;alert(&quot;Subaru WRX STi&quot;);&lt;/script&gt;</h1>
</body>

It effectively stripped out all of the tags. If we wanted to actually pass the alert, we need to explicitly state that we don’t want to use it, with {!! !!}.

<h1>My Favorite Car is: {!! $car !!}</h1>

If we go to our page now, we get the following result:

 

We’ll go through displaying arrays in the next couple of articles when we look at loops. See you in the next one when we tackle if and switch statements.

Laravel Series

Continue your Laravel Learning.

Laravel — P8: Blade Introduction

Using the Blade Engine to Remove PHP

Laravel – P8: Blade Introduction

Blade is a templating engine that allows you to write some front-end friendly code. The last thing we want to see is PHP wrapped up inside of the views.

Laravel — P9- Displaying Data in Blade Files

Discussing Blade Directives

Laravel – P9: Displaying Data In Blade

What we really wanted to achieve was introduce what Blade is, understand that there are Blade Directives. These directives make our lives easier and not PHP.

Laravel — P10: Blade with If and Switch Directives

Create IF and SWITCH Statements With Blade

Laravel – P10: Blade With IF and SWITCH Directives

Displaying data is one thing, but Blade has directives such as PHP’s if and switch statements. Blade directives are just shortcuts for implementing PHP code.

Leave a Reply