19 octobre 2021 170.270K

Formation Laravel : Blade

Blade est le moteur de template utilisé par Laravel. Son but est de permettre d’utiliser du php sur notre vue mais d’une manière assez particulière. Pour créer un fichier qui utilise le moteur de template Blade il vous faut ajouter l’extension “.blade.php”. Comme nous l’avons vu dans la présentation de l’architecture de Laravel, les fichiers de vos vues se situent dans le dossier resources/views.

La première fonctionnalité la plus basique de Blade est l’affichage d’une simple variable comme nous l’avons vu dans le chapitre précédent. Exemple : Si je transmets à ma vue la variable $maVariable = ‘Hello World !’ Dans ma vue {{ $maVaribale }} affichera ‘Hello World’ .

Il existe une variante de ces accolades pour vous permettre de ne pas échapper les caractères html.

Petit exemple avec :

$mavariable = '<h1>Mon Titre</h1>';
{{ $maVariable }}  <!-- donnera : '<h1>Mon Titre</h1>' -->
{!! $maVariable !!}  <!-- donnera : 'Mon Titre' dans une balise HTML h1 -->

Très utile par exemple si l’on veut afficher le contenu d’un article de blog édité par un wysiwyg se trouvant dans notre Base de Données.

1. Les structures de contrôle

Blade vous permet de manipuler des données comme le ferait le php, il vous est donc possible d’utiliser les différentes structures de contrôle PHP existantes. À la différence que leur écriture diffèrent un tout petit peu.

Si vous souhaitez en savoir plus sur ses différentes structures de contrôles je vous invite à lire la documentation PHP officielle de celles-ci sur php.net.

Voici ci-dessous une liste non-exhaustive des structures de contrôle disponible avec Blade :

Pour mettre en place une condition : @if / @elseif / @else@switch@isset@empty#

@if@elseif@else

$animal = 'cheval';

@if ( $animal === 'chien' )
    <p>L'animal est un chien.</p>
@elseif ( $animal === 'chat' )
    <p>L'animal n'est pas un chien.</p>
@else
    <p>L'animal n'est ni un chat ni un chien.</p>
@endif

<!-- donnera : -->
<p>L'animal n'est ni un chat ni un chien.</p>

@switch

@switch($age)
    @case( $age < 18 )
        <p>La personne est mineure.</p>
        @break
    @case( $age > 18 )
        <p>La personne est majeure.</p>
        @break
    @default
        <p>valeur par défaut.</p>
@endswitch

@isset

$produit = 'costume';

@isset($produit)
    <p>Le produit existe</p>
@endisset

<!-- donnera : -->
<p>Le produit existe</p>

@empty

$produit = '';

@empty($produit)
    <p>Le produit n'existe pas.</p>
@endempty

<!-- donnera : -->
<p>Le produit n'existe pas.</p>

Pour réaliser une boucle : @for@foreach@forelse et @while#

Voici un exemple rapide pour chaque structure de boucle.

@while

$i = 1;

@while ($i < 3)
    <p>$i est égal à {{ $i ++ }}</p>
@endwhile

<!-- donnera : -->
<p>$i est égal à 1</p>
<p>$i est égal à 2</p>

@foreach

$letters = ['a', 'b', 'c'];

@foreach ( $letters as $letter )
<!-- mon code exemple : -->
<p>Lettre : {{ $letter }}</p>
@endforeach

<!-- donnera : -->
<p>Lettre : a</p>
<p>Lettre : b</p>
<p>Lettre : c</p>

@for

$numbers = [1, 2, 3];

@for ($i = 0; $i < count($numbers); $i++)
    <p>Nombre : {{ $numbers[$i] }}</p>
@endfor

<!-- donnera : -->
<p>Nombre : 1</p>
<p>Nombre : 2</p>
<p>Nombre : 3</p>

@forelse

le @forelse est un foreach qui vous permet de retourner ce que vous souhaitez si le tableau est vide. Ceka vous economisera l’ajout d’une condition if 😉

$animals = ['chien', 'chat', 'cheval'];

@forelse ($animals as $animal)
    <li>{{ $animal }}</li>
@empty
    <p>Aucun animal existant.</p>
@endforelse

<!-- donnera : -->
<li>chien</li>
<li>chat</li>
<li>cheval</li>

<!-- Si le tableau $animals est vide -->
$animals = [];

<!-- Cela donnera : -->
<p>Aucun animal existant.</p>

Dans vos boucles vous avez également accès à une variable $loop qui permet de récupérer certaines informations concernant l’itération en cours dans la boucle. Par exemple si vous voulez mettre une condition sur la première ou la dernière itération :

$days = ['lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi', 'dimanche'];

@foreach ($days as $day)
    @if ($loop->first)
        <p>C'est le premier jour de la semaine : {{ $day }}</p>
    @endif

    @if ($loop->last)
        <p>C'est le dernier jour de la semaine : {{ $day }}</p>
    @endif
@endforeach

Pour voir les diverses méthodes applicables à cette variable $loop je vous renvoie à la documentation officielle de Laravel

2. Créer un layout

Voyons maintenant une autre facette très intéressante de Blade : la création de layout et l’organisation de nos fichiers de vues.

Définir le template

Voici un exemple de template :

<!-- Voici le template situé dans resources/views/layout.blade.php -->

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>App Name - @yield('title')</title>
</head>
<body>

    @section('sidebar')
        Contenu de la section 'sidebar' du parent
    @show

    <div class="container">
        @yield('content')
    </div>

</body>
</html>

On remarque ici deux éléments de Blade : @section et @yield#

@section() permet de déterminer la section d’un contenu.

@yield() permet de définir une zone qui permettra à l’enfant du template d’y établir sa valeur. (yield signifie “céder” en anglais).

Voici comment étendre le template que nous venu de voir :

<!-- Voici l'enfant du parent situé dans resources/views/child.blade.php -->

@extends('layout')

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

@section('sidebar')
    <!-- Ajout de contenu avant le contenu du parent -->
    @parent <!-- Contenu de la section 'sidebar' du parent -->
    <!-- Ajout de contenu après le contenu du parent -->
@endsection

@section('content')
    <!-- Contenu de la section 'content' de l'enfant -->
@endsection

Nous venons de voir quelques fondamentaux à connaître sur Blade. Nous verrons par la suite des notions plus avancées.

Passons maintenant à la partie 2 de ce cours et intéressons-nous à l’interaction et la gestion de la Base de Données avec Laravel.

Besoin d'une formation personalisée ?

Avis

4,9
Rated 4.9 out of 5
Excellent93%
Splendide !7%
Sympa0%
Sans plus0%
Pas terrible0%

Pas de titre

Rated 5 out of 5
7 mars 2024

super

hajar

Pas de titre

Rated 5 out of 5
21 juin 2023

Merci énormément je suis sur exciter à cause de ce cours

Kassi Patrick

Pas de titre

Rated 5 out of 5
10 mai 2023

Excellente formation

abdo maroc

Pas de titre

Rated 5 out of 5
7 mai 2023

Merci

Ranaivoson (c'est malgache)

Pas de titre

Rated 5 out of 5
18 avril 2023

Merci

Anthea