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
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
Blade Templates - Part 1

Last accessed pages

  1. Contact page - CoursesWeb (48922)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (140495)
  3. Send E-mail with HTML tags and Attachment (5591)
  4. Editing, Changing XML - E4X (1812)
  5. CSS Rhombus Shape (7618)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (70)
  2. Read Excel file data in PHP - PhpExcelReader (11)
  3. ActionScript 3 Lessons (7)
  4. The Mastery of Love (7)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (6)