Blade Templates

- Template Inheritance
- Blade and JavaScript Frameworks

Blade is a simple templating engine provided with Laravel. A blade template file contains extension - ".blade.php" and is stored in the resources/views/ directory.

Displaying data in Template

You may display data passed to your Blade views by wrapping the variable in two curly braces: {{...}}.
For example, given the following route:

Route::get('greeting', function () {
  return view('welcome', ['name'=>'Laravel']);
});

In the "welcome.blade.php" view you may display the contents of the 'name' variable like so:

Hello {{$name}}

If you're unsure whether a variable is set, you can use the "or" statement, which lets you set a default value:

- will echo the value of $title if it's set, or "Default" if not.

You may also echo the results of any PHP function. In fact, you can put any PHP code you wish inside of a Blade template.
- Example:
1. Add this code in a resources/views/test_tmp.blade.php file.

<?php
function php_fun(){
  return 'custom function';
}
$php_vr ='simple string';
?>
<!doctype html>
<html lang="{{app()->getLocale()}}">
<head>
<meta charset="utf-8">
<title>{{$title}}</title>
</head>
<body>
<h1>{{$title}}</h1>
Variable from php: {{$php_vr}}<br>
Function from php: {{php_fun()}}<br>
The current UNIX timestamp is 
</body>
</html>

2. Add this code in the routes/web.php file:

Route::get('/test_blade', function(){
  return view('test_tmp', ['title'=>'Laravel Blade Example']);
});

3. Visit the following URL to see the output of the view.

//localhost:8000/test_blade

- It will display a page as shown in the following image.
Laravel Test Blade

Laravel framework automatically apply the PHP htmlspecialchars() function to data in: {{ }}.
If you want the HTML elements from that data to not be transformed, use: {!! $variable !!}

You can also use the Blade @php directive to execute a block of plain PHP code within your template:

@php
$php_v =210;
echo $php_v;
@endphp

Adding Comments

Blade also allows you to define comments in your views. Unlike HTML comments, Blade comments are not included in the resulted HTML code:

Template Inheritance

The primary benefits of using Blade are template inheritance and sections.
We can define a master template that can be inherited and extended by other individual pages.

Example of a "master" page layout

1. Create a "layouts" folder in the "resources/views/" directory; then copy the following code and save it in a "resources/views/layouts/app.blade.php" file.

<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
 This is the 'app' master sidebar.
@show

<div class="container">
 @yield('content')
</div>
</body>
</html>

Here, in the "app" master template:

@yield('title') - is used to display the value of the title.
@section('sidebar') - is used to define a section named sidebar.
@show - to display the contents of a section.
@yield('content') - to display the contents of a section('content').

2. Now, we create another view that extends the "app" master template. Copy and save the following code in the resources/views/child.blade.php

@extends('layouts.app')
@section('title', 'Page Title')

@section('sidebar')
 @parent
 <p>This is appended from 'child' to the 'app' master sidebar.</p>
@endsection

@section('content')
 <h2>{{$name}}</h2>
 <p>This is child page body content.</p>
@endsection

The description of each element:

@extends('layouts.app') - extends the "app" layout, stored in the "layouts/" folder.
@section('title', 'Page Title') - sets the value of the title section.
@section('sidebar') - defines a sidebar section in this child page.
@parent - displays the content of the sidebar section, defined in the 'app' master layout.
@endsection - ends the section.
@section('content') - creates content for the @yield('content') defined in 'app' template.

3. Now, set up the route to view this template. Add the following code in the routes/web.php file:

Route::get('/blade', function(){
  return view('child', ['name'=>'Mar Plo']);
});

4. Visit the following URL to see the output of the view.

//localhost:8000/blade

- The output will appear as shown in the following image.
laravel Blade Template Inheritance

Blade and JavaScript Frameworks

Since many JavaScript frameworks also use "curly" braces "{}" that must be included in page content, you may use the "@" symbol to inform the Blade to ignore that statement. The blade engine will remove the "@" symbol.
In the following example the '@' symbol will be removed, and the {{ js_variable }} will remain untouched by the Blade engine:

// Parsed as Blade
{{ $blade_variable }}

// @ removed, and echoed to the view directly
@{{ js_variable }}

The @verbatim Directive

If you are displaying JavaScript variables in a large portion of your template, you may wrap the HTML in the @verbatim directive so that you do not have to prefix each Blade {{...}} statement with an @ symbol:

{{ $blade_variable }}

@verbatim
<div class="container">
 Used by JS, {{ js_variable }}<br>
 {{ js_var2 }}
</div>
@endverbatim

- Documentation: Laravel - Blade Templates

<<-Laravel Views -- Blade Templates - Control ..->>

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which meta tag provides a short description of the page?

<meta name="description" content="70-160 characters that describes the content of the page" />

Which CSS property is used to stop the wrapping effect of the "float"?

clear text-align position

#some_id {
  clear: both;
}

Click on the method which gets an array with all the elements in the document that have a specified tag name.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicate the PHP function which returns the number of elements in array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4

Blade Templates - Part 1

Laravel Course