- 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 1513263254
</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 can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Blade Templates - Part 1

Last accessed pages

  1. Read Excel file data in PHP - PhpExcelReader (49312)
  2. Counter Strike (1810)
  3. Insert, Select and Update NULL value in MySQL (18838)
  4. Flash Games - Free online Games (21260)
  5. AJAX with POST and PHP (9965)

Popular pages this month

  1. Qwop (4606)
  2. Drag Racer V3 (2232)
  3. Flash Games - Free online Games (1104)
  4. Bubbles3 (992)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (981)