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',
]);
});
/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: <script>alert("Subaru WRX STi");</script></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:
Laravel Series
Continue your Laravel Learning.
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.
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.
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.