- 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.
function php_fun(){
  return 'custom function';
$php_vr ='simple string';
<!doctype html>
<html lang="{{app()->getLocale()}}">
<meta charset="utf-8">
Variable from php: {{$php_vr}}<br>
Function from php: {{php_fun()}}<br>
The current UNIX timestamp is 1561587414
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.
- 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_v =210;
echo $php_v;

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.
<title>App Name - @yield('title')</title>
 This is the 'app' master sidebar.

<div class="container">
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
@section('title', 'Page Title')

 <p>This is appended from 'child' to the 'app' master sidebar.</p>

 <p>This is child page body content.</p>
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.
- 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 }}

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

- Documentation: Laravel - Blade Templates

Daily Test with Code Example

Which tag is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Blade Templates - Part 1

Last accessed pages

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (21171)
  2. Simple Admin Login PHP Script (2889)
  3. PHP getElementById and getElementsByTagName (27746)
  4. Add Tag to Selected Text in textarea with JavaScript (1626)
  5. JSON syntax in JavaScript (4197)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (2497)
  2. Contact page - CoursesWeb (2392)
  3. Tabs effect with CSS (2391)
  4. Insert, Select and Update NULL value in MySQL (1117)
  5. PHP getElementById and getElementsByTagName (990)