Créer des vues

1. Afficher du HTML

Les vues contiennent le code HTML du site. Créer une vue signifie donc créer un fichier contenant du HTML qui sera retourné par une route.

Afficher un texte aux visiteurs peut s’effectuer en retournant une chaîne de caractères dans la fonction de rappel d’une route ; de la même manière, l’affichage d’un code HTML peut être obtenu en retournant une vue vers un fichier contenant du HTML.

Les vues de Laravel doivent se trouver dans le dossier resources/views et avoir pour extension .php ou .blade.php.

Pour retourner une vue, il faut utiliser la fonction view qui prend en paramètre un nom de vue, c’est-à-dire le nom du fichier présent dans le dossier resources/views sans son extension.

Affichage d’une vue depuis le fichier routes/web.php

Route::get('accueil', function() { 
 
    return view('accueil'); 
 
}

Dans cet exemple, quand un visiteur navigue vers l’URI accueil, le fichier accueil.php présent dans resources/views/ est exécuté et retourné à l’utilisateur. Le fichier accueil.php est ici simplement un fichier contenant du code HTML.

Fichier resources/views/accueil.php

<html> 
 
<head> 
  <title>Bonjour Taxi</title> 
</head> 
 
<body> ...

Premiers pas avec Blade

Il existe de nombreux moteur de template (en français gabarit) pour les sites et applications web : Twig, Smarty, Handlebars, Plates, et bien d’autres. Comme précisé précédemment, Blade est le moteur de template fourni avec Laravel.

1. Pourquoi un moteur de template ?

La première partie de ce chapitre a montré comment retourner des vues à partir de fichiers. Retourner des fichiers statiques avec du code HTML est un premier pas, mais il semble intéressant d’essayer d’aller plus loin : afficher des variables, ajouter des conditions pour l’affichage ou gérer les inclusions de sous-parties récurrentes.

Bien qu’il soit possible d’utiliser du code PHP directement dans les vues (le PHP lui-même était historiquement utilisé en tant que moteur de template), il est préférable d’utiliser un moteur de template dédié. En effet, cela permet d’assurer directement la sécurité, la lisibilité et l’organisation du code sans avoir à se poser de question à chaque fois que du code est ajouté.

Ci-dessous, un premier exemple montre comment afficher un message de bienvenue personnalisé à l’utilisateur en PHP sans moteur de template.

Page d’accueil, sans utiliser Blade

<h1>Page d'accueil</h1> ...

Les variables

1. Afficher des données

Pour afficher des données dans une vue Blade, il faut les encadrer par des doubles accolades. Il est possible de passer un nombre, une chaîne de caractères ou même le résultat d’une fonction.

Différentes données affichées

<p>{{ $une_variable }}<p> 
 
<p>{{ 'une chaîne' }}</p> 
 
<p>{{ time() }} secondes depuis le 01/01/1970</p>

En coulisse, Blade remplace à l’exécution les doubles accolades par le code PHP nécessaire pour afficher une chaîne de caractères sans risque d’attaque XSS. Blade assure donc une partie de la sécurité de l’affichage de manière transparente.

Équivalent PHP de la syntaxe {{$var}}

Laravel remplace automatiquement ce code Blade :

{{ $var }}

par ce code PHP :

<?php echo e($variabletest); ?>

La fonction e est un helper de Laravel faisant appel à la fonction PHP htmlspecialchars que nous avons vue au début du chapitre.

2. Passer des variables aux vues

Généralement, il est préférable d’éviter de réaliser les traitements directement dans les vues, particulièrement dans le contexte du patron de conception...

Les directives

1. Définition

Blade fournit des raccourcis, appelés directives, vers les structures de contrôles et instructions disponibles en PHP. Comme vu précédemment, ces raccourcis permettent une meilleure lisibilité dans les vues aidant à lutter contre la complexification du code.

Les équipes en charge de développer une application Laravel pourront parfois être tentées de vouloir ajouter directement du code PHP dans un fichier Blade, déplaçant ainsi la logique applicative dans la vue. S’obliger à uniquement utiliser les directives prédéfinies assure de maintenir un code lisible et une architecture solide.

2. Boucles

a. L’affichage d’une liste

Il est fréquent d’avoir à effectuer une boucle dans une vue pour afficher des listes. C’est le cas par exemple sur un site de service à la personne http://aide-a-la-personne.io/, lorsque l’on souhaite afficher la liste des assistants disponibles à proximité.

Du côté de l’équipe qui réalise le site, il faudra récupérer une liste d’assistants à partir d’une position géographique, par exemple, et passer cette liste à la vue. La vue pourra ensuite boucler sur cette liste pour l’afficher dans un tableau avec une personne par ligne.

La directive pour faire une boucle est @foreach et est similaire à l’instruction PHP foreach. Comme pour la plupart des directives fournies par Blade, refermer la boucle se fait grâce au mot end : dans le cas de @foreach, l’équivalent est donc @endforeach.

Dans l’exemple suivant, on charge la liste des assistants (helpers) côté route et on les affiche à l’aide d’une boucle (@foreach) dans le fichier Blade. La fonction helpers_near imaginée pour cet exemple contient un tableau d’objets PHP représentant chacun des assistants.

Fichier routes/web.php

Route::get('helpers/{location}', function($location) { 
 
    $helpers = helpers_near($location); 
 
    return view('helpers', compact('helpers', 'location')); 
 
});

Fichier resources/views/helpers.blade.php

<h1>Assistants à proximité...

Organiser les vues

Un site web partage souvent des éléments en commun entre ses pages HTML :

Un en-tête, un logo représentant la marque ou le service.
Des balises meta (charset, viewport, etc.).
Un menu pour naviguer facilement entre les pages.
Un pied de page.
Une feuille de style sous la forme d’une référence à un fichier ou d’un code CSS directement intégré en texte.
Des scripts variés pour tracer les utilisateurs ou améliorer l’expérience utilisateur.
Etc.

Pour éviter une recopie fastidieuse de ces éléments dans chaque page, Blade propose deux options pour répondre à ce besoin :

1. Un système d’héritage pour les templates grâce à @extends et @section.

2. L’usage de composants, qui est mis en avant dans la documentation de Laravel depuis sa version 8.

Techniquement, les deux solutions sont équivalentes. Beaucoup de projets existants utilisent l’héritage car la documentation mettait en avant ce principe d’héritage jusqu’à la version 8 de Laravel. La tendance s’inversera probablement si les développeurs se basent sur la documentation officielle car ils utiliseront alors les composants pour leurs nouveaux projets. Dans tous les cas, nous allons voir par la suite comment implémenter ces deux solutions.

Notre premier template aura la responsabilité d’englober tous les autres afin d’éviter la répétition d’éléments comme le DOCTYPE, les balises HTML head, meta et body, et tout ce qui est commun aux différentes pages. Il sera étendu par tous les autres et il contiendra la structure commune à toutes les pages du site.

1. Création d’un template de base

a. Création en utilisant l’héritage

Par convention, le template est créé dans un sous-dossier layouts. On utilise la directive @yield pour indiquer à quel endroit doit apparaître le contenu des pages qui étendent la base. Un second paramètre peut être passé à la directive pour indiquer une valeur par défaut ; c’est ce que nous allons faire pour le titre de la page.

Fichier resources/views/layouts/app.blade.php

<!DOCTYPE html> 
<html lang="fr"> ...

Internationalisation

Un site web développé avec Laravel est par défaut en anglais. Il existe bien entendu d’autres cas de figure : le site peut être en français, ou même être prévu pour plusieurs langues. Le framework fournit différents outils pour internationaliser une application.

1. Fichiers de traduction

Les fichiers de traduction ne sont pas présents par défaut dans une application Laravel. La commande artisan ci-dessous publie dans le dossier lang/en/ un certain nombre de fichiers qui traduisent les éléments du framework tels que les messages d’erreurs utilisés lors de l’application de règles de validation dans les formulaires :

sail artisan lang:publish

Chaque fichier est composé de la même manière : c’est un fichier PHP dont l’unique instruction est return sur un tableau associatif de clés/valeurs.

Il est possible de rajouter autant de sous-dossiers dans lang que souhaité pour autant de langues dans le site. Pour ajouter la traduction française de l’authentification, par exemple, il faut créer un fichier auth.php dans le dossier lang/fr/ et y coller le contenu du fichier original en anglais en remplaçant le texte par des traductions françaises. Il est également possible d’ajouter ses propres clés personnalisées.

Exemple de fichier resources/lang/fr/auth.php

<?php 
 
return [ 
 
    'failed' => 'Ces identifiants ne correspondent pas à nos 
                 enregistrements', 
 
    'password' => 'Mot de passe incorrect.', 
 
    'throttle' => 'Trop...