The Blade framework

https://laravel.com/docs/5.4/blade

Laravel has an elegant template engine called Blade that allows us to do a lot of things. The first is to simplify the syntax.

Table des matières

1. echo

The view

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Our blog</title>
</head>
<body>
  <p>Show article content #<?php echo $number; ?></p>
</body>
</html>

can be modified like

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Our blog</title>
</head>
<body>
  <p>Show article content #{{ $number }}</p>
</body>
</html>

The syntax is equivalent to a php echo statement.

Note: we can also use for the same result; the difference is that there is no sanitization with so should only be used when really needed.

2. foreach block

Consider

Route::get('welcome', function () {

  $tasks =  [
    'Task 1',
    'Task 2',
    'Task 3',
    'Task 4'
  ];

  return view('welcome', compact('tasks'));
});

The way of showing these tasks can be

<ul>
  <?php foreach ($tasks as $task) : ?>
    <li><?php echo $task; ?></li>
  ?php endforeach; ?>
</ul>

But, with Blade, we can use this syntax:

<ul>
    @foreach ($tasks as $task)
        <li>{{ $task }}</li>
    @endforeach
</ul>

2.1. Get loop information’s

https://mattstauffer.com/blog/the-new-loop-variable-in-laravel-5–3/

Blade comes with $loop and make easy to retrieve the number of iteration (i.e. the number of items) and the current item.

<ul>
    @foreach ($tasks as $task)
        <li>#{{ $loop->iteration . " ". $task }}</li>
    @endforeach
</ul>
<small>Number of tasks: {{ count($tasks) }}</small>

3. if

Another syntax: check if the key error is present in the session object and if so, output the error message.

@if(session()->has('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

4. isset

Example: loop any blog posts and display the title and the content

@isset($posts)
  @foreach($posts as $post)
    <h3>{{ $post->title }}</h3>
    <p>{{ $post->content }}</p>
  @endforeach
@endisset

5. Templating

The main idea: use a generic page for the display of a page on the site and, thanks to variables (see yield()), inject in the page variable content like a breadcrumb, header, footer, scripts and stylesheets, contents, ...

5.1. Content injection

Thanks the yield() function, we can easily use templates.

Consider these two views:

  1. master.blade.php
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>
  1. article.blade.php
@extends('master')

@section('title')
   Our blog posts
@endsection

@section('content')
  <p>You're viewing article #{{ $number }}</p>
@endsection

With the defined route here below, a URL like http://localhost:8000/article/2695 will call the view article.blade.php which extends master.blade.php.

Route::get('article/{n}', function($n) {
    return view('article')->withNumber($n);
})->where('n', '[0-9]+');

The master file will be loaded where two yield() are defined : title and content. And these sections are defined in article.blade.php so the resulting HTML will be the “concatenation” of the two files. This automatically handled by Blade.

6. Create own directives

With Blade, it’s also possible to create our own directive like, f.i., advertising won’t be visible for premium users :

<div class="annoying-ads">
  <h2>Annoying Ads</h2>
  @subscribed
    {{-- Annoying Ads - not allowed here --}}
  @unsubscribed
    @foreach ($annoyingAds as $ad)
      {{-- Sponsorships: more than a hundred annyoing companies --}}
      <div class="despicable">{!! $ad !!}</div>
    @endforeach
  @endsubscribed
</div>

Tutorial here : https://scotch.io/tutorials/all-about-writing-custom-blade-directives