Des directives blade pour faciliter votre templating Laravel

Des directives blade pour faciliter votre templating Laravel

Tech web
Cloche d'abonnement aux notifications | |
  • Recevoir les notifications

Pour ce tutoriel, j’ai utilisé la version 5.5 de Laravel ; il se peut qu’il y ait des différences si vous utilisez d’autres versions.

Le moteur de templating de Laravel, à savoir Blade, est très performant bien qu’il lui manque encore quelques fonctionnalités fortes sympathiques. Blade permet l’ajout de directives; des petits raccourcis en sommes qui vous permettent de ne pas répéter à chaque fois le code, mais d’utiliser des petits helpers dans vos views. Appstrack propose une petite librairie de directives plutôt utiles, alors pourquoi s’en priver si celles-ci peuvent nous faire économiser du code ? ?

Après avoir fait le tour des directives fournies par Appstract, nous nous attaquerons à la création de nos propres directives.

Installer les directives d'Appstract

 Rendez-vous à la racine de votre projet Laravel, ouvrez la console à cet emplacement puis tapez :

composer require appstract/laravel-blade-directives

Et voilà ! Les directives Blade d’Appstract sont opérationnelles ?
A noter : Si vous utilisez une ancienne version de Laravel, il se peut que vous deviez y ajouter la ligne suivante dans le fichier « config/app.php » :

'providers' => [
    ...
    Appstract\BladeDirectives\BladeDirectivesServiceProvider::class
    ...
];

 

@dd

La fonction Laravel dd() permet de « dumper » une variable afin de savoir ce qui s’y cache et de mettre fin à toutes autres exécutions. Cette fonction est donc très pratique pour le débuggage ? Si nous voulons l’utiliser dans une view, nous devons bien entendu l’intégrer dans des balises PHP.

<?php dd($var); ?>

 Avec la directive @dd, plus besoin d’ouvrir les balises PHP !

@dd($var);

 

@repeat

 Vous en avez marre d’utiliser des for en PHP ? Pourquoi ne pas tester le @repeat ?

@repeat($nbDeTours)
     Itération : {{ $iteration }}<br/>
@endrepeat

Pour afficher le numéro d’itération, il suffit d’utiliser la variable $iteration dans le @repeat.
Dans la variable $var, on peut bien évidemment y mettre le nombre d’itérations voulues. Si nous voulons effectuer 3 tours, nous pouvons écrire le code suivant :

@repeat(3)
      {{ $iteration }} tour <br/>
@endrepeat

 

@istrue

@istrue permet de vérifier si notre variable existe et si elle contient bien « true » (ou « 1 »). Dans l’exemple qui suit, nous initialisons une variable à true, puis à l’aide de la directive @istrue, nous allons afficher un petit texte si la variable $var contient bien true .

<?php $var=true; ?>
@istrue($var)
       <p>Petit texte</p>
@endistrue

 Essayez d’initialiser la variable avec un false, le petit texte n'apparaîtra pas !

 

@isfalse

 Fonctionne exactement comme @istrue mais dans le sens contraire.

 

@typeof

 Si vous avez besoin de faire un teste sur un type de variable, cette directive est faite pour vous. Dans mon exemple, je vais effectuer un test sur la variable $var. Si elle est de type string, je vais afficher un petit texte.

<?php $var="bla bla"; ?>
@typeof($var, 'string')
    Je suis une variable de type string
@endtypeof

 

@fa

Cette directive permet d’afficher des icônes de la fameuse librairie Font Awesome. La liste des icônes disponibles se trouvent ici : http://fontawesome.io/icons/.
Pour charger la librairie d’icônes, vous pouvez utiliser un CDN et appeler la feuille de styles avec un <link>.

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

 Après avoir choisi l’icône qui vous convient le mieux, il suffit d’y placer son nom (précédé par « fa fa ») dans les parenthèses de la directive @fa.

@fa('fa fa-search')

 

@style

 La directive @style remplacera tout simplement la balise <style>. Voici un petit exemple :

@style
    p { background: red }
@endstyle

 Plus intéressant, cette directive permet aussi d’appeler une feuille de style externe.

@style('/cheminDeNotreFeuilleCss/style.css')

 

@script

 A la place d’ouvrir une balise <script> dans votre view, vous pouvez utiliser la directive @script.

@script
    alert('Bonjour')
@endscript

 Cette directive permet aussi d’utiliser un script se trouvant ailleurs que dans notre view.

@script('/cheminDuScript/script.js

 

Si vous voulez consulter la liste complète des directives d’Appstract, je vous invite à consulter le github de la librairie https://github.com/appstract/laravel-blade-directives. Appstract ajoute à Blade des petites directives fortes sympathiques ! On ne peut qu’espérer que Laravel en adopte quelques-unes officiellement ?

 

Créer une directive personnalisée

On a vu comment utiliser les directives du plugin Appstract, mais vous pouvez aussi en créer des personnalisées ! Et ce n’est franchement pas difficile.
Pour cela, ouvrez le fichier «app/Providers/AppServicesProvider.php » et ajoutez-y la ligne suivante après le namespace :

use Illuminate\Support\Facades\Blade;

Pour l’exemple, nous allons ajouter une directive permettant d’insérer une balise <p>
Dans le fichier AppServicesProvider.php , ajoutons-y le code suivant dans la fonction boot() :

Blade::directive('p', function () {
    return "<p>";
});

Le 'p' pourra donc être appelé dans une view avec un simple « @p ». La fonction retourne une simple balise HTML <p>. Il ne nous reste plus qu’à la fermer. Créons la directive @endp permettant de fermer ce paragraphe (avec </p>).

Blade::directive('endp', function () {
    return "</p>";
});

Retournons dans notre view et testons la directive :

@p
   Je suis un paragraphe
@endp

Notre directive personnalisée, bien que pas très utile, fonctionne ! 

 

Essayons maintenant de lui rajouter un argument. On veut non-seulement que notre directive @p affiche une balise <p>, mais on aimerait aussi que l'on puisse lui assigner une classe.

Dans le fichier AppServicesProvider.php, modifions notre directive comme ceci :

Blade::directive('p', function ($class) {
     if (! empty($class)) {
           return '<p class="'.$class.'">';
      }
      return "<p>";
});

Notre directive prend en compte un argument sous la forme de la variable $class. Si celle-ci est déclarée, nous allons l'utiliser pour assigner une classe à notre balise <p>. Si ce n'est pas le cas, nous allons simplement ouvrir une balise <p> standard, sans classe.

Pour nous éviter des problèmes, nous aurions aussi pu contrôler que la classe passée en argument est belle et bien un string, en utilisant la fonction gettype() de PHP. Nous pourrions aussi parser la variable afin de vérifier qu'il n'y a pas de caractères spéciaux, mais pour l'exemple restons aux bases.

Dans notre view, ajoutons la directive @p en lui spécifiant une classe, "principale" dans notre exemple.

@p(principale)
    bonjour
@endp

Et voici le résultat que l'on obtient :

<p class="principale">
     bonjour
</p>

Bien que notre directive ne soit toujours pas très utile, elle fonctionne.

 

Il ne vous reste plus qu’à imaginer des directives qui vous faciliteraient la vie et de les créer :)
 

Sources :

Catégories :
Tech web

Tags :
PHP Laravel CSS HTML

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !