Web Technologies

Blade Templating
 Today’s Lecture
• Blade Templating
– Blade
– Conditional Statements
– Loops
– Template Inheritance
 Blade
• Laravel 5.1 introduces the concept of using Blade.
• In Laravel, Blade is the templating engine that helps us to create
dynamic and flexible views.
• It allows us to integrate PHP code within HTML markup, making it
easy to display data, control the flow of our view, and build
powerful and interactive applications.
• It doesn’t restrict the developer from using plain PHP code in views.
• Blade template files use .blade.php file extension and stored in
resources/views directory.
– Default view for Laravel is welcome.blade.php
• Blade views may be returned from routes or controllers using global
view helper.
 Blade
Purpose
• Separate Presentation Logic: Blade separates the presentation logic
from the application logic, leading to cleaner and more
maintainable code.
• Dynamic Content Generation: We can dynamically generate
content based on data passed from the controller or model.
• Conditional Logic and Loops: Blade provides directives for
conditional statements and loops, allowing us to control the flow of
our view based on specific conditions.
• Component-Based Structure: We can organize our views into
reusable components for better code reuse and consistency.
 Blade
Passing and Displaying Data to Blade View
• We may display data that is passed to our Blade views by wrapping
variable in curly braces.
Route::get('/', function () {
return view('welcome', ['name' => 'Finn']);
});
• We may display the content of the name variable, like:
Hello, {{ $name }}
• Blade’s {{}} curly braces echo statements automatically sent through
PHP’s htmlspecialchars function to prevent XSS attacks.
– XSS - Cross-site scripting (also known as XSS) is a web security
vulnerability that allows an attacker to compromise the
interactions that users have with a vulnerable application.
 Conditional Statements
if Statements
• We may construct if statements using @if, @elseif, @else, and @endif directives
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
• For convenience, Blade also provides an @unless directive
@unless (Auth::check())
You are not signed in.
@endunless
• @isset and @empty directives may be used as convenient shortcuts for their respective PHP
functions
@isset($records)
// $records is defined and is not null...
@endisset
@empty($records)
// $records is "empty"...
@endempty
 Conditional Statements
Authentication Directives
• @auth and @guest directives may be used to quickly determine if current user
is authenticated or a guest:
@auth
// The user is authenticated...
@endauth
@guest
// The user is not authenticated...
@endguest
• If needed, we may specify the authentication guard that should be checked
when using @auth and @guest directives:
@auth('admin')
// The user is authenticated...
@endauth
@guest('admin')
// The user is not authenticated...
@endguest
 Conditional Statements
switch Statements
• We may construct switch statements using @switch, @case,
@break, @default and @endswitch directives
@switch($i)
@case(1)
First case...
@break
@case(2)
Second case...
@break
@default
Default case...
@endswitch
 Loops
• We may construct loop structures using @for, @endfor, @foreach,
@endforeach, @while and @endwhile directives
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile
 Loops
• We may also include @continue or @break condition within the
directive declaration
@foreach ($users as $user)
@continue($user->type == 1)
<li>{{ $user->name }}</li>
@break($user->number == 5)
@endforeach
 Template Inheritance
Layouts using Template Inheritance
• In Laravel, template inheritance is a powerful feature of the Blade
templating engine that allows us to share common layout elements
across multiple views.
• This makes our views more consistent, reduces code duplication,
and improves maintainability.
• Master page layout is available in the /resources/views directory.
 Template Inheritance
How Template Inheritance Works in Laravel
• Defining Layout: We define a base layout file that contains the
overall structure of our application's pages. This typically includes
HTML document structure, header, navigation bar, footer, and other
common elements.
• Extending Layout: Individual views inherit the layout by using the
@extends directive. This specifies the name of the layout file to be
inherited.
• Define Content Sections: The layout file defines sections for content
that will be replaced by the child views. These sections are typically
marked using @section directive.
• Yield Content Sections: Child views define their own content for
each section using @yield directive. This content replaces the
corresponding section in the layout.
 Template Inheritance
Defining Layout
<!-- resources/views/layouts/app.blade.php -->
<html><head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body></html>
• Above layout contains HTML tags, @section and @yield directives.
– HTML tags are <html>, <head>, <title>, <body>, and <div>.
– @section directive defines a section of content.
– @yield directive is used to display content of a given section.
 Template Inheritance
Extending Layout
<!-- resources/views/child.blade.php -->
@extends('layouts.app')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is body content.</p>
@endsection
• When defining a child view, use @extends Blade directive to specify
which layout the child view should "inherit".
• Views which extend a Blade layout may inject content into layout's
sections using @section directives.
 Summary of Today’s Lecture
• Blade Templating
– Blade
– Conditional Statements
– Loops
– Template Inheritance
 References
• Ch-1, Ch-2, Ch-3; Laravel Up and Running, A Framework for Building
Modern PHP Apps, 2nd Edition, Matt. Stauffer, Oreilly.
• https://laravel.com/docs/10.x/blade