- 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 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 !!}
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
- @yield('title') - is used to display the value of the title.
- @section('sidebar') - is used to define a section named sidebar.
- @show - to display the contents of a section.
- @yield('content') - to display the contents of a section('content').
@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:
- @extends('layouts.app') - extends the "app" layout, stored in the "layouts/" folder.
- @section('title', 'Page Title') - sets the value of the title section.
- @section('sidebar') - defines a sidebar section in this child page.
- @parent - displays the content of the sidebar section, defined in the 'app' master layout.
- @endsection - ends the section.
- @section('content') - creates content for the @yield('content') defined in 'app' template.
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.
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