Laravel Course

- 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 
</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 attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr =[1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Blade Templates - Part 1

Last accessed pages

  1. Get and Modify content of an Iframe (32494)
  2. The Mastery of Love (7690)
  3. Download HTM resources (90)
  4. HTML5 Quick Tutorial (5041)
  5. Styling HTML table with CSS (412)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (715)
  2. CSS cursor property - Custom Cursors (94)
  3. Read Excel file data in PHP - PhpExcelReader (71)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (67)
  5. PHP Unzipper - Extract Zip, Rar Archives (53)