- 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:
{{ $title or 'Default' }}
- 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 1531744030
</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:
{{-- This comment will not be present in the rendered HTML --}}

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:
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:
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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Blade Templates - Part 1

Last accessed pages

  1. Get Duration of Audio /Video file before Upload (5808)
  2. Insert, Select and Update NULL value in MySQL (26455)
  3. Ajax-PHP Rating Stars Script (12967)
  4. Read Excel file data in PHP - PhpExcelReader (56584)
  5. Disable button and Enable it after specified time (6135)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (321)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (265)
  3. Register and show online users and visitors (253)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)
  5. Insert, Select and Update NULL value in MySQL (157)