Laravel 5 : le templating avec Blade
Elliott Chiaradia |16-03-2016
Afin de pouvoir structurer ses vues, Laravel 5 inclut directement un moteur de template. Celui-ci se nomme « Blade ». Contrairement à d’autres moteurs comme « Twig », qui lui est utilisé par Symfony 2, Blade n’a pas été conçu pour être séparé de Laravel. De ce fait, sa documentation se trouve directement dans celle de Laravel, alors que celle de Twig a un site dédié. Puisque la documentation concernant « Blade » n’est d’après moi pas la plus complète, j’ai décidé d’écrire un petit article traitant des bases et de quelques petites astuces intéressantes.
À noter que ce tutoriel a été réalisé à l’aide de la version 5.2 de Laravel, si vous utilisez une autre version, il est possible que des ajustements soient nécessaires afin d’arriver au même résultat.
Explications générales
La structure
Il est important que vos vues soient structurées. Pour cela, nous allons commencer par créer un layout. Comprenez qu’avec cette méthode de layout, nous allons économiser pas mal de code, car la structure de base (celle du layout) sera héritée sur chacune des pages. Les pages ne contiendront donc quasiment plus que du contenu. De cette manière, une simple petite modification du layout modifie toutes les pages de votre site web !
La convention que j’utilise consiste à créer un layout de base appelé « default.blade.php ». Celui-ci va contenir le squelette HTML (doctype, head, body, etc.) ainsi que les appels des scripts et des feuilles de styles utilisés sur toutes vos pages. À l’intérieur de ce layout, il y aura une partie destinée au contenu des différentes pages, mais aussi une partie contenant le titre, les feuilles de styles et les scripts dédiés à la page. Voici un petit schéma expliquant implicitement la structure proposée.
Les plus observateurs auront compris, dans le layout, il suffit d’inscrire un « @yield(‘nomDeLaSection’) » afin d’y afficher le contenu de la section. Pour ce qui est de la page, il faudra utilise un « @section(‘nomDeLaSection’) … @endsection » pour définir que le contenu de cette section doit bel est bien apparaître dans la section « nomDeLaSection » définit dans le layout. Mais il reste encore une chose à définir, à savoir l’appel du layout via la page. Pour ce faire il faut utiliser un « @extends(‘CheminDuLayout’) ».
Ce qui nous donne le code suivant pour le layout (default.blade.php) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title> @yield('title')</title>
<meta ...>
<!-- CSS + Font -->
<link href="..." type="text/css" rel="stylesheet" media="screen,projection"/>
...
<!-- Custom CSS -->
@yield('custom_css')
</head>
<body>
@yield('content')
<footer>
...
</footer>
<!-- Scripts-->
<script src="{{asset('js/jquery.js')}}"></script>
...
@yield('scripts')
</body>
</html>
Et pour la page1.blade.php :
@extends('default')
@section('title')
Titre de la page
@endsection
@section('content')
<div>
Contenu de la page
</div>
@endsection
(Dans cet exemple, la page1 n'utilise pas de feuille de styles ni de script spéciaux.)
En plus de ces sections, vous pouvez utiliser des includes. Ceux-ci sont utilisés si vous devez afficher du contenu similaire sur plusieurs pages. La première chose à faire est de rajouter un include dans votre page
@include('CheminDelInclude')
Puis, vous devez créer un nouveau fichier qui contiendra le contenu de l’include. Dans celui-ci, vous pouvez y mettre le contenu que vous désirez. Et voilà ! Dorénavant le contenu de ce fichier sera affiché dans les pages qui l’appellent en include.
Voici un petit exemple :
page1.blade.php
@extends('default')
@section('title')
Titre de la page
@endsection
@section('content')
<div>
Contenu de la page
@include('formulaire')
</div>
@endsection
formulaire.blade.php
<form>
...
</form>
Les conditions et les boucles
Nous sommes d’accord, c’est le contrôleur qui doit s’occuper au maximum de la logique. Cependant, dans la vue, il peut arriver que nous devions tester une condition avant d’afficher tel ou tel contenu, afin de répondre à ce besoin, Blade nous offre la possibilité d'utiliser des if.
@if(condition)
...
@else
...
@endif
Les boucles sont aussi très importantes dans nos vues. Imaginons que notre contrôleur envoie à notre vue les produits (products) et que nous aimerions pouvoir les lister par nom (name). En utilisant une boucle foreach, nous pouvons le faire très facilement. Voici un petit exemple :
@foreach($products as $product)
<li>{{$product->name}}</li>
@endforeach
N’oubliez surtout pas une chose, si votre logique devient trop conséquente au niveau de votre vue, c’est peut-être que vous avez mal traité vos données via votre contrôleur.
Afficher des datas
Pour envoyer des données depuis notre contrôleur jusqu'à notre vue, nous pouvons utiliser le compact au moment où on retourne notre view.
return view('nomDeLaVue', compact('nomDeLaData'));
Puis, dans notre vue, il suffit d'utiliser des doubles accolades et d'y mettre le nom de notre variable précédé par un "$".
{{ $nomDeLaVariable }}
Prenons un exemple, dans notre contrôleur nous récupérons l'administrateur (admin). Dans notre vue, nous voulons afficher son nom ainsi que son prénom.
{{ $admin->name }} {{ $admin->firstname }}
Astuces
Blade regorge de petites astuces fortes utiles, en voici quelques-unes.
Afficher correctement le contenu d'une variable
Afin d’afficher le contenu d’une variable, nous devons utiliser les doubles accolades.
{{…}}
Cependant, si votre variable contient de l’HTML et que vous voulez que celui-ci soit interprété correctement, vous devez utiliser une accolade suivie de doubles points d’exclamation.
{!! … !!}
slice
Quand on utilise une boucle foreach, il peut arriver que nous voulions nous limiter à quelques éléments. C’est pour cela que la fonction « slice » a été créée.
Exemple, nous ne voulons afficher que les trois premiers produits
@foreach($products->slice(0, 3) as $product)
<li>{{$product->name}}</li>
@endforeach
Décortiquons le code. Le 0 représente le premier élément, on peut donc choisir à partir duquel on va les afficher. Le 3 représente le nombre d’éléments que nous voulons obtenir. Avec un tel code, nous n’allons donc plus boucler dans la totalité des éléments mais seulement dans ceux que nous avons définis grâce au slice.
str_limit
Il arrive fréquemment qu’une de nos valeurs d’une variable à afficher soit trop longue. Pour la tronquer, nous pouvons utiliser la fonction « str_limit ».
Exemple, nous voulons que le seul la première lettre du prénom soit affichée et que celle-ci soit suivi par un « . » :
{{ str_limit($user->first_name, $limit = 1, $end = '.') }}
asset
Vous n’arrivez pas à charger vos scripts ni vos feuilles de styles ? Utilisez l’helper « asset », celui-ci pointe directement vers le dossier public. Il faut donc l’utiliser au maximum afin d’éviter les éventuelles erreurs dues au changement d’url.
Exemple, nous voulons appeler le script jquery.js se trouvant dans public/js :
<script src="{{asset('js/jquery.js')}}"></script>
route
Laravel propose une multitude d’helper, mais mis à part le « asset » il y en a en tout cas un autre à connaitre, à savoir « route ». Grâce à lui, vous pouvez générer les urls de vos liens de manière dynamique. Si un jour une de vos URL change, vos liens fonctionneront toujours si vous avez utilisez cet helper.
<a href="{{route('nomDeLaRoute')}}">
Les formats de date
Vous serez sans doute aussi confronté à la gestion des formats de date au niveau de vos vues, un article complet traite le sujet, je ne peux que vous inviter à y jeter un œil.
Conclusion
À travers cet article, nous avons parcouru quelques fonctionnalités qui prouvent que Blade n'a finalement pas grand-chose à envier à son célèbre grand-frère Twig. Cependant, il est tout de même dommage que sa documentation ne soit pas du même niveau que celle de Twig. Toutefois, Blade ne doit être en aucun cas un frein qu'en à l'utilisation de Laravel, car vous toujours la possibilité d'utiliser un autre moteur de template. Il existe même des plugins dédiés à cette tâche, TwigBridge par exemple, permet d'intégrer Twig à Laravel en quelques secondes.
Sources :
