2. Blade templating

Posted on | Edited on

Laravel offers a custom templating engine called Blade.

Echoing Data

is functionally equivalent to <?= htmlentities($variable) ?>. If you want to echo without the escaping, use {!! and !!}.

Note: the difference between and {!! $variable !!}

Let’s say we have a route

1
2
3
4
Route::get('/', function () {
    $test = '<span>hello world</span>';
    return view('welcome',compact('test'));
});

And in your welcome blade view

1
2
{{ $test }}  // it will show <span>hello world</span>
{!! $test !!} // this will show hello world only, the <span> is treated as a part of html page
1
2
3
4
5
6
// Parsed as Blade; the value of $bladeVariable is echoed to the view 
{{ $bladeVariable }}

// @ is removed, and "{{ handlebarsVariable }}" echoed to the view 
// directly 
@{{ handlebarsVariable }}

Control Structures

Conditionals

@if

Syntax

1
2
3
4
5
6
7
@if(count($users) === 1)
	There is one user
@elseif(count($users) === 2)
	There are two users
@else
	There are {{count($users)}} users
@endif

@unless

Syntax: @unless condition is the same as <?php if(!$condition) ?>

1
2
3
@unless(count($users) > 0)
	No users
@endunless

Loops

@for

1
2
3
@for( $i = 0; $i < $users->slotsCount(); $i++ )
	{{ $i }}
@endfor

@foreach 

1
2
3
@foreach($users as $user)
  {{$user->name}}
@endforeach

@while

1
2
3
@while( $user = array_pop($users) )
	{{$user->name}}
@endwhile

@forelse

1
2
3
4
5
@forelse($users as $user)
	{{ $user->name }}
@empty
  	No users
@endforelse

$loop within @foreach and @forelse

Within a @foreach or @forelse loop, Laravel provides a $loop variable, it will return a stdClass object with the following properties:

index

The 0-based index of the current item in the loop; 0 would mean ‘first item’

iteration

The 1-based index of the current item in the loop; 1 would mean ‘first itme’

remaining

How many items remain in the loop, if the current item is the first of three, this will be 2

count

The count of items in loop

first

A boolean indicating whether this is the first item in the loop

last

A boolean indicating whether this is the last item in the loop

depth

How many levels deep this loop is: 1 for a loop, 2 for a loop within a loop

parent

Refers to the $loop variable for the parent loop item; if this loop is within another @foreach loop otherwise, null

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
@forelse( $users as $user)
	There are {{$loop->count}} users.
	<li> {{ $loop->iteration }}: {{ $user->name }}
		@if($user->hasChildren())
		<ul>
		@foreach($user->children() as $child)
			<li>{{ $loop->parent->iteration }}.
				{{ $loop->iteration }}:
				{{ $child->name }}
			</li>
		@endforeach
	</li>
@empty
	No users
@endforelse
</ul>

or

If you are not sure a variable is set or not, use or can set a default value.

1
{{$title or 'Default Title'}} // if $title is not set, 'Default title' will be echoed.

Template Inheritance

Blade provides a structure for template inheritance that allows views to extend, modify, and include other views

Defining Sections with @section/@show and @yield

Let’s start with the layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<! resources/views/layouts/master.blade.php -->
<html>
	<head>
		// the default content in @yield('title') will be shown
		// if it's never extended
		<title> My Site | @yield('title', 'Homepage')</title>
	</head>
	<body>
		<div>
			@yield('content')
		</div>
		@section('footerScripts')
			<script src="app.js"></script>
		@show
	</body>
</html>

We defined 3 Blade directives, all three are defining that the section can be extended later. And all three are defining what to do if the section isn’t extended.

Now we can extend the master layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// We define that the view is extending master.blade.php
@extend('layout.master') 
@section('title','Dashboard')@endsection
@section('content')
	Welcome to Dashboard
@endsection
// we can either include the content from the parent by using 
// the @parent and then add to it. Or we can simply overwrite
// anything defined in the parent for this section by without
// section
@section('footerScripts')
	@parent
	<script src="dashboard.js"></script>
@endsection

We can either include the content from the parent by using the @parent and then add something to it. Or, without @parent, we can simply overwrite anything defined in the parent for this section by without section.

Note: the difference between @show and @endsection:

Use @show when you’re defining the place for a section, in the parent template. Use @endsection when you’re defining the content for a template in a child template

@include

@include allows us to pull a view into another view.

1
2
3
4
5
<!-- resources/views/sign-up-button.blade.php --> 
<a class="button button--callout" data-page-name="{{ $pageName }}">
	<i class="exclamation-icon"></i> 
	{{ $text }} 
</a>
1
2
3
4
5
6
<!-- resources/views/home.blade.php --> 
<div class="content" data-page-name="{{ $pageName }}"> 
  <p>Here's why you should sign up for our app: <strong>It's Great.</strong></p> 
  <!-- pull the button and pass value to it -->
  @include('sign-up-button', ['text' => 'See just how great it is']) 
</div>

@each

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- resources/views/sidebar.blade.php --> 
<div class="sidebar">
	@each('partials.module', $modules, 'modules', 'partials.empty-module')
</div> 

<!-- resources/views/partials/module.blade.php --> 
<div class="sidebar-module">
	<h1>{{ $module->title }}</h1> 
</div> 

<!-- resources/views/partials/empty-module.blade.php --> 
<div class="sidebar-module">
	No modules :( 
</div>

Consider @each syntax. The first parameter is the name of the view partial. The sctiond is the array or collection to iterate over. The thrid is the variable name that each item will be passed to the view as. And the optional fourth parameter is the view to show if the array or collection is empty.