Outils Laravel

class: center, middle, inverse, title-slide

# Outils Laravel
## Moteur de templates : Blade
### F. Hémery
### 2018

---

# Un moteur de templates

* Un moteur de templates permet de séparer plus facilement le travail de composition (graphiste) du travail du programmeur qui traite les données à ajouter dans la composition.
* Laravel utilise [Blade<svg style="height:0.8em;top:.04em;position:relative;fill:steelblue;" viewBox="0 0 512 512"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"/></svg>](https://laravel.com/docs/master/blade) comme moteur de templates.
* Permet d'utiliser dans des pages différentes la même disposition (_layout_).
* Les templates sont stockés dans le répertoire `resources/views` et le nom de fichier se termine par `.blade.php`.

---
## Definir une disposition

* Un template est une page html avec des directives Blade. Soit le fichier `master.blade.php` suivant :

``` html
<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            Le menu principal.
        @show
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>
```

* `@section` permet de définir une section
* `@yield` designe un espace qui sera remplacé par une section.
* `@show` designe la fin d'une section et déclenche son affichage (ici la chaîne `Le menu principal.` ).

---
## Extension d'une disposition

* Soit le fichier `page.blade.php` suivant :

``` html
@extends('master')

@section('title', 'Titre de la page')

@section('sidebar')
    @parent

<p>Paragraphe ajouter en plus dans le menu principal.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection
```

* `@extends` indique que la disposition décrite dans le fichier a pour base la disposition indiquée (`master`).
* `@parent` designe un espace qui sera remplacé par la section indiquée (`sidebar`) en provenance de la disposition indiquée (`master`).
* `@endsection` indique la fin d'une section.

---
## Composant

Il est possible de définir des parties de page que l'on va pouvoir utiliser dans plusieurs pages de l'application. Par exemple dans le fichier .red[`alerte.blade.php`] :

``` html
<div class="alert alert-danger">
    {{ $slot }}
</div>
```

* Utilisation du composant :

``` html
@component('alerte')
    <strong>Attention!</strong> ça part en sucette
@endcomponent```

* Si on veut plusieurs parmètres, on nomme le `slot`

.pull-left[
``` html
<div class="alert alert-danger">
    <div class="alert-title">
      {{ $title }}
    </div>

{{ $slot }}
</div>
```
]

.pull-right[
``` html
@component('alerte')
    @slot('title')
        Interdit
    @endslot

Vous n'êtes pas autorisé.
@endcomponent
```
]

---
## Paramètres d'un template/composant

* Le passage de paramètres se fait à l'aide d'une tableau associatif à l'appel.
* Dans le template/composant on utilise le paramètre dans `{{$var}}`
* `$var` peut être une expression
* Pour afficher du code html on utilise la syntaxe `{!! $var !!}`

.pull-left[

* template

``` php
Route::get('salutation', function () {
    return view('welcome', 
        ['name' => 'Robert',
 'icon' => 
 '<i class="fas fa-trash-alt"></i>'] );
});
```

``` html
<h3> date : {{date('d-m-Y')}} 
  {!! $icon !!}</h3>
Bonjour, {{ $name }}.

```

]

.pull-right[

* composant

``` html
<div class="alert alert-danger">
    <div class="alert-title">
      {{ $title }}
    </div>

{{$name}}, {{ $slot }}
</div>
```

``` html
@component('alerte',['name' => 'Robert'] )
    @slot('title')
        Interdit
    @endslot

n'est pas autorisé.
@endcomponent
```
]

---
## Les structures de contrôle

* On retrouve toutes les structures de contrôle du langage PHP
  * `if(condition)` `$\mapsto$` `@if(condition) ... @elseif(condition) ... @else ... @endif`
  * `switch($var)` `$\mapsto$` `@switch($var)`
  * `for($i = 0; $i < 10; $i++)` `$\mapsto$` `@for($i = 0; $i < 10; $i++) ... @endfor`
  * `foreach($ens as $elt)` `$\mapsto$` `@foreach($ens as $elt) ... @endforeach`
  * `while(condition)` `$\mapsto$` `@while(condition) ... @endwhile`
* avec en plus
  * `@isset($var) ... @endisset`
  * `@empty($var) ... @endempty`
  * `@auth() ... @endauth` : bloc exécuté si il y a une personne authentifiée.
  * `@auth('admin') ... @endauth` : bloc exécuté si il y a une personne avec le rôle 'admin' authentifiée.
  * `@forelse($ens as $elt) ... @empty ... @endforelse` : bloc `for` exécuté si ensemble non vide bloc `empty` exécuté sinon.

---
## La variable de boucle

* Une variable `$loop` est définie dans une loop

``` html
@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif

@if ($loop->last)
        This is the last iteration.
    @endif

<p>This is user {{ $user->id }}</p>
@endforeach
```

---
## La variable de boucle

| Propriété | description |
|-----------|-------------|
| `$loop->index` | 	L'index dans la boucle (commence à 0). |
| `$loop->iteration` | nombre de tours de boucle (commence à  1). |
| `$loop->remaining` | nombre de tours de boucle restant. |
| `$loop->count` | Le nombre d'éléments dans l'ensemble parcouru par la boucle. |
| `$loop->first` | vrai si c'est la première itération. |
| `$loop->last` | vrai si c'est la dernière itération.. |
| `$loop->depth` | 	le niveau de la boucle courante (boucles imbriquées). |
| `$loop->parent` | variable de boucle de la boucle englobante. |

---
## Ajouter un commentaire

``` html
{{-- This comment will not be present in the rendered HTML --}}
```

---
## Les templates inclus

* Pour inclure un template dans un autre  template. Les variables du template sont visibles dans le template inclus.

``` html
<div>
    @include('shared.errors')

<form>
        
    </form>
</div>
```

* Inclure un template avec des variables spécifiques

``` html
@include('view.name', ['some' => 'data'])
```

* Inclure un template sous condition

``` html
@includeWhen($boolean, 'view.name', ['some' => 'data'])
```

---
## Ajouter des directives

* Ajoute la directive `@datetime` avec `$expression` une instance de la classe `DateTime`.
* Création d'une condition `env`

``` php
class AppServiceProvider extends ServiceProvider {
    public function boot() {
        Blade::directive('datetime', function ($expression) {
            return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
        });
        Blade::if('env', function ($environment) {
        return app()->environment($environment);
        });
    }
    public function register(){
        //
    }
```

``` html
@env('local')
    // The application is in the local environment...
@elseenv('testing')
    // The application is in the testing environment...
@else
    // The application is not in the local or testing environment...
@endenv
```