IN this tutorial you learn how blade templating works in laravel 5.2 from scratch . This tutorial is best for beginners as well as for developers . Compared to most other backend languages, PHP actually functions relatively well as a templating language. But it has its shortcomings, and it’s also just ugly to be be using <?php inline all over the place, so you can expect most modern frameworks to offer a templating language.

Unlike many other Symfony-based frameworks, Laravel doesn’t use Twig by default—although there’s a Twig Bridge package that makes it easy to use Twig if you like it.

Instead, Laravel provides a custom templating engine called Blade, which is inspired by .NET’s Razor engine. It’s functionally very similar to Twig, but the syntax is closer to Razor and the learning curve for PHP developers tends to be lower than for Twig.

Take a look at a common display pattern in PHP, Twig, and Blade below

PHP vs. Twig vs. Blade
<?php /* PHP */ ?> <?php if (empty($users)): ?>     No users. <?php else: ?>     <?php foreach ($users as $user): ?>         • <?= $user->first_name ?> <?= $user->last_name ?><br>     <?php endforeach; ?> <?php endif; ?>
{# Twig #} {% for user in users %}     • {{ user.first_name }} {{ user.last_name }}<br> {% else %}     No users. {% endfor %}
{{-- Blade --}} @forelse ($users as $user) • {{ $user->first_name }} {{ $user->last_name }}<br> @empty No users. @endforelse

As you can see, Blade’s syntax tends to be somewhere between PHP and Twig—it’s more powerful, like Twig, and has convenience helpers like forelse, but its syntax is closer to PHP than Twig.

Additionally, since all Blade syntax is compiled into normal PHP code and then cached, it’s fast and it allows you to use native PHP in your Blade files if you want. The common recommendation, however, is to keep any PHP tags out of your Blade files.

Control structures

Most of the control structures in Blade will be very familiar. Many directly echo the name and structure of the same tag in PHP.

There are a few convenience helpers, but in general, the control structures primarily just look cleaner than they would in PHP.

Conditionals

@if

Blade’s @if ($condition) compiles to <?php if ($condition): ?>. @else, @elseif, and @endif also compile to the exact same syntax in PHP. Take a look below for an example.

@if, @else, @elseif, and @endif
@if (count($talks) === 1) There is one talk at this time period. @elseif (count($talks) === 0) There are no talks at this time period. @else There are {{ count($talks) }} talks at this time period. @endif

Just like with the native PHP conditionals, you can mix and match these how you want. They don’t have any special logic; there’s literally a parser looking for something with the shape of @if ($condition) and replacing it with the appropriate PHP code.

@unless and @endunless

@unless, on the other hand, is a new syntax that doesn’t have a direct cognate in PHP. It’s the exactly the same as @if, but the inverse. @unless ($condition) is the same as <?php if (! $condition). See it in use in below code snippet

@unless and @endunless
@unless ($user->hasPaid()) You can complete your payment by switching to the payment tab. @endunless

Loops

@for, @foreach, and @while

@for, @foreach, and @while work the same in Blade as they do in PHP.

@for and @endfor
@for ($i = 0; $i < $talk->slotsCount(); $i++) The number is {{ $i }} @endfor
Example 4-6. @foreach and @endforeach
@foreach ($talks as $talk) • {{ $talk->title }} ({{ $talk->length }} minutes) @endforeach
@while
@while ($item = array_pop($items)) {{ $item->orSomething() }}<br> @endwhile

@forelse

We’ve already looked at it in the introduction, but @forelse is a @foreach that also allows you to program in a fallback if the object you’re iterating over is empty.

@forelse
@forelse ($talks as $talk) • {{ $talk->title }} ({{ $talk->length }} minutes) @empty No talks this day. @endforelse

Or

If you’re ever unsure whether a variable is set, you’re probably used to checking isset() on it before echoing it, and echoing something else if it’s not set. Blade has a convenience helper, or, that does it for you and lets you set a default fallback: {{ $title or "Default" }} will echo the value of $title if it’s set, or “Default” if not.

Template inheritance

Just like Twig, Blade provides a structure for inheritance that allows views to extend, modify, and include other views.

Here’s how inheritance is structured with Blade.

Defining sections with @section/@show and @yield

Let’s start with a top-level Blade layout, like in code snippet below . This is the definition of the generic page wrapper that we’ll later place page-specific content into.

Example 4-9. Blade layout
<!-- resources/views/layouts/master.blade.php --> <html> <head> <title>My Site | @yield('title', 'Home Page')</title> </head> <body> <div class="container"> @yield('content') </div> @section('footerScripts') <script src="app.js"> @show </body> </html>

This looks a bit like a normal HTML page, but you can see we’ve yielded in two places (title and content), and we’ve defined a section in a third (footerScripts).

We have three Blade directives here that each look a little different: yield(content) alone, yield(title, \'Home Page\) with a defined default, and @section … @show with actual content in it.

All three function essentially the same. All three are defining that there’s a section with a given name (which is the first parameter). All three are defining that the section can be extended later. And all three are telling what to do if the section isn’t extended, either by providing a string fallback (Home Page), no fallback (which will just not show anything if it’s not extended), or an entire block fallback (in this case, <script src="app.js">).

What’s different? Well, clearly, yield(content) has no default content. But additionally, the default content in yield(title) only will be shown if it’s never extended. If it is extended, its child sections will not have programmatic access to the default value. @section … @show, on the otherhand, is both defining a default and doing so in a way that its default contents will be available to its children, through @parent.

Once you have a parent layout like this, you can extend it like below.

Extending a Blade Layout
<!-- resources/views/dashboard.blade.php --> @extends('layouts.master') @section('title', 'Dashboard') @section('content') Welcome to your application dashboard! @endsection @section('footerScripts') @parent <script src="dashboard.js"> @endsection

This child view will actually allow us to cover a few new concepts in Blade inheritance.

Tags: