Manipulation des vues et du moteur Blade

Manipulation des vues et du moteur Blade | Med Learning

Leçon 1

Créer une vue

Renvoyer tout le HTML d'une page depuis une route ou un contrôleur n'est pas pratique. Les vues placent le HTML dans des fichiers séparés : elles séparent la logique de l'application de la présentation (rôle V de MVC). Elles sont rangées dans resources/views et portent l'extension .blade.php, qui indique qu'elles utilisent le moteur de gabarits Blade.

resources/views/bienvenue.blade.php

blade

<!DOCTYPE html>
<html lang="fr">
<body>
    <h1>Bonjour, {{ $nom }}</h1>
</body>
</html>

php

Route::get('/bienvenue', function () {
    return view('bienvenue', ['nom' => 'Fatima']);
});

Le premier argument de view() est le nom de la vue : le chemin du fichier dans resources/views, sans l'extension .blade.php. Le second est un tableau de données : chaque clé devient une variable dans la vue. On peut aussi utiliser la façade View : View::make('bienvenue', ['nom' => 'Fatima']).

Les sous-dossiers

Les vues peuvent être rangées dans des sous-dossiers, désignés avec la notation point :

php

return view('admin.livres.index', $donnees);   // resources/views/admin/livres/index.blade.php

Un nom de dossier ne doit donc jamais contenir de point.

Première vue disponible et existence d'une vue

php

use Illuminate\Support\Facades\View;

return View::first(['themes.ramadan.accueil', 'accueil'], $donnees);  // la première qui existe

if (View::exists('emails.bienvenue')) {
    // ...
}

View::first est utile quand une vue peut être personnalisée : on cherche d'abord la version spéciale, sinon la version standard.

Leçon 2

Transmettre des données aux vues

php

// 1. un tableau associatif (le plus courant)
return view('catalogue.show', ['livre' => $livre, 'similaires' => $similaires]);

// 2. la méthode with(), chaînable
return view('catalogue.show')
    ->with('livre', $livre)
    ->with('similaires', $similaires);

// 3. compact() : crée le tableau à partir des noms de variables
return view('catalogue.show', compact('livre', 'similaires'));

Dans la vue, chaque clé est une variable : {{ $livre->titre }}. Ce que Blade compile correspond à <?php echo e($livre->titre); ?>.

Partager des données avec toutes les vues

Certaines données sont utiles partout (le nom de la boutique, le nombre d'articles du panier). View::share, appelée dans la méthode boot d'un fournisseur de services, les rend disponibles dans toutes les vues :

app/Providers/AppServiceProvider.php (extrait)

php

use Illuminate\Support\Facades\View;

public function boot(): void
{
    View::share('boutique', 'Kitab');
    View::share('telephone', '05 22 00 00 00');
}

Leçon 3

Les compositeurs de vues

Un compositeur de vue (view composer) est une fonction ou une classe appelée chaque fois qu'une vue est rendue. Il ajoute des données à cette vue. C'est la bonne solution quand plusieurs routes affichent une même vue qui a toujours besoin des mêmes données, par exemple le menu des catégories de la barre latérale.

app/Providers/AppServiceProvider.php (extrait)

php

use App\Models\Categorie;
use App\View\Composers\PanierComposer;
use Illuminate\Support\Facades\View;

public function boot(): void
{
    // compositeur sous forme de closure
    View::composer('partials.menu-categories', function ($view) {
        $view->with('categories', Categorie::orderBy('libelle')->get());
    });

    // compositeur sous forme de classe
    View::composer('layouts.app', PanierComposer::class);
}

Laravel ne fournit pas de dossier par défaut pour les compositeurs-classes : on peut créer app/View/Composers.

app/View/Composers/PanierComposer.php

php

<?php

namespace App\View\Composers;

use App\Services\PanierService;
use Illuminate\View\View;

class PanierComposer
{
    public function __construct(
        protected PanierService $panier,      // injecté par le conteneur de services
    ) {}

    public function compose(View $view): void
    {
        $view->with('nbArticles', $this->panier->nombreArticles());
    }
}

Les compositeurs sont résolus par le conteneur de services : on peut typer n'importe quelle dépendance dans leur constructeur.

Un compositeur pour plusieurs vues, ou pour toutes

php

View::composer(['catalogue.index', 'catalogue.show'], PanierComposer::class);
View::composer('admin.*', function ($view) { /* toutes les vues du dossier admin */ });
View::composer('*', function ($view) { /* toutes les vues */ });

Les créateurs de vues

Un créateur de vue (view creator) ressemble à un compositeur, mais il s'exécute dès que la vue est instanciée, au lieu d'attendre le moment où elle va être affichée. Les données qu'il ajoute peuvent donc être remplacées ensuite par le contrôleur.

php

use App\View\Creators\ProfilCreator;

View::creator('profil', ProfilCreator::class);

Leçon 4

Optimiser les vues

Leçon 5

Blade : afficher des données

Leçon 6

Blade : les directives de contrôle

Directive	Affiche le contenu si…
`@auth` … `@endauth`	un utilisateur est connecté
`@guest` … `@endguest`	personne n'est connecté
`@can('update', $livre)` … `@endcan`	l'utilisateur a l'autorisation (chapitre 12)
`@env('local')` … `@endenv`	l'application est dans cet environnement
`@production` … `@endproduction`	l'application est en production

Leçon 7

Blade : inclusions et mise en page par héritage

Directive	Rôle
`@yield('nom', 'défaut')`	dans le layout : affiche le contenu de la section `nom` (ou la valeur par défaut)
`@extends('layouts.app')`	dans la page : hérite du layout (première ligne de la vue)
`@section('nom')` … `@endsection`	remplit une zone avec un bloc
`@section('nom', 'texte')`	remplit une zone avec un texte court
`@parent`	dans une section : garde le contenu de la section du parent et ajoute le sien

Leçon 8

Blade : les composants

Élément	Rôle
`@props(['type' => 'info'])`	déclare les propriétés du composant et leurs valeurs par défaut
`{{ $slot }}`	le contenu placé entre les balises ouvrante et fermante
`$attributes`	les autres attributs passés au composant (`class`, `id`…) ; `merge` les fusionne avec ceux du composant
`:prop="$variable"`	passer une expression PHP (avec `:` devant) au lieu d'une chaîne : `<x-carte-livre :livre="$livre" />`

Leçon 9

Les vidéos du chapitre

Vidéo · À regarder

30 Days to Learn Laravel - Complete 8 Hour Course

Laracasts (Jeffrey Way) · YouTube

Regarde de 15:28 à 26:2410 min 56 s

Ouvrir sur YouTube à 15:28

Vidéo · À regarder

30 Days to Learn Laravel - Complete 8 Hour Course

Laracasts (Jeffrey Way) · YouTube

Regarde de 39:02 à 52:45

Travaux pratiques

TP fil rouge · Les vues du catalogue

Exercices

Exercice 9.1

Choisis la bonne réponse

1view('admin.livres.index') charge le fichier…
2{{ $avis->texte }} contenant <script> …
3Pour fournir les catégories à la barre latérale de toutes les pages du catalogue, on utilise…
4Dans une boucle, $loop->iteration vaut au premier tour…
5La directive qui gère une liste vide dans la même boucle est…
6Dans un layout, la zone remplie par les pages se déclare avec…
7Dans un composant, le contenu placé entre les balises est dans…
8<x-carte-livre :livre="$livre" /> : le : sert à…

0/8 répondues

Exercice 9.2

Traduire du PHP en Blade

Exercice 9.3

L'essentiel du chapitre

À retenir

Vues dans resources/views, extension .blade.php ; view('dossier.fichier', $donnees) ou View::make ; notation point pour les sous-dossiers (pas de point dans les noms de dossiers) ; View::first, View::exists.
Données : tableau, ->with(), compact() ; pour toutes les vues : View::share dans AppServiceProvider::boot().
Compositeurs : View::composer('vue', Classe::class ou closure) (méthode compose(View $view), dépendances injectées), plusieurs vues ou * ; créateurs : View::creator (dès l'instanciation). Production : view:cache / view:clear.
Blade : {{ }} échappe (anti-XSS), {!! !!} n'échappe pas (jamais pour une saisie utilisateur), {{-- --}}, @{{ }}, @json.
Directives : @if/@elseif/@else, @unless, @isset, @empty, @auth, @guest, @can, @switch ; @foreach, @forelse/@empty, @for, @while, @continue, @break, $loop (index, iteration, first, last, count) ; @class, @style, @checked, @selected, @disabled ; @php.
Héritage : layout avec @yield, page avec @extends + @section (+ @parent), @stack/@push ; @include (+ données), @includeIf, @includeWhen, @each.

Propriété	Valeur
`$loop->index`	l'indice, à partir de 0
`$loop->iteration`	le numéro, à partir de 1
`$loop->first` / `$loop->last`	`true` au premier / au dernier tour
`$loop->count`	le nombre total d'éléments
`$loop->remaining`	le nombre de tours restants
`$loop->even` / `$loop->odd`	tour pair / impair
`$loop->parent`	la variable `$loop` de la boucle englobante

Écriture	Résultat
`@vite(['resources/css/app.css', 'resources/js/app.js'])`	les balises `<link>` et `<script>` du CSS et du JS compilés par Vite (`npm run dev` ou `npm run build`)
`{{ asset('images/logo.svg') }}`	l'URL d'un fichier de `public/` : `http://kitab.test/images/logo.svg`
`{{ url('/livres') }}`	une URL absolue de l'application
`{{ route('livres.show', $livre) }}`	l'URL d'une route nommée

blade

{{-- Ce commentaire n'apparaît pas dans le HTML envoyé au navigateur --}}

<p>@{{ message }}</p>     {{-- le @ laisse {{ message }} intact pour Vue.js ou Alpine --}}

@verbatim
    <div>{{ texte }} et {{ autre }}</div>  {{-- tout le bloc est laissé intact --}}
@endverbatim

<script>
    const livres = @json($livres);   // convertit en JSON pour JavaScript
</script>

blade

@if ($livre->stock === 0)
    <span class="badge rupture">Épuisé</span>
@elseif ($livre->stock < 5)
    <span class="badge alerte">Plus que {{ $livre->stock }} exemplaires</span>
@else
    <span class="badge dispo">En stock</span>
@endif

@unless ($livre->disponible)       {{-- « si non » --}}
    <p>Ce livre n'est pas disponible.</p>
@endunless

@isset($promotion)                 {{-- la variable existe et n'est pas null --}}
    <p>Promotion : -{{ $promotion }} %</p>
@endisset

@empty($livres)                    {{-- la variable est vide --}}
    <p>Aucun livre.</p>
@endempty

blade

@include('partials.menu')
@include('partials.carte-livre', ['livre' => $livre, 'compact' => true])
@includeIf('partials.promo-ramadan')          {{-- seulement si la vue existe --}}
@includeWhen($livre->nouveaute, 'partials.badge-nouveau')
@each('partials.carte-livre', $livres, 'livre', 'partials.aucun-livre')   {{-- une vue par élément --}}

resources/views/layouts/app.blade.php

blade

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('titre', 'Kitab') · Librairie en ligne</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('styles')
</head>
<body>
    @include('partials.navigation')

    <main class="conteneur">
        @if (session('status'))
            <div class="alerte succes">{{ session('status') }}</div>
        @endif

        @yield('contenu')
    </main>

    <footer>© {{ date('Y') }} Kitab · Casablanca</footer>
    @stack('scripts')
</body>
</html>

resources/views/catalogue/index.blade.php

blade

@extends('layouts.app')

@section('titre', 'Catalogue')

@section('contenu')
    <h1>Notre catalogue</h1>
    <div class="grille">
        @foreach ($livres as $livre)
            @include('partials.carte-livre', ['livre' => $livre])
        @endforeach
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/filtres.js') }}"></script>
@endpush

blade

<x-alerte type="succes">Votre commande a été enregistrée.</x-alerte>
<x-alerte type="erreur" class="mb-4" id="erreur-paiement">Le paiement a été refusé.</x-alerte>
{{-- <div class="alerte alerte-erreur mb-4" id="erreur-paiement" role="alert">… --}}

resources/views/components/layout.blade.php

blade

@props(['titre' => 'Kitab'])

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>{{ $titre }} · Kitab</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <header>{{ $entete ?? '' }}</header>
    <main>{{ $slot }}</main>
</body>
</html>

resources/views/catalogue/show.blade.php

blade

<x-layout :titre="$livre->titre">
    <x-slot:entete>
        <a href="{{ route('livres.index') }}">← Retour au catalogue</a>
    </x-slot:entete>

    <h1>{{ $livre->titre }}</h1>
    <p>{{ $livre->resume }}</p>
</x-layout>

app/View/Components/Prix.php

php

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Prix extends Component
{
    public function __construct(
        public float $montant,
        public ?float $ancien = null,
    ) {}

    public function format(float $valeur): string
    {
        return number_format($valeur, 2, ',', ' ') . ' DH';
    }

    public function render(): View|Closure|string
    {
        return view('components.prix');
    }
}

php

<?php if (count($livres) > 0): ?>
  <ul>
  <?php foreach ($livres as $i => $livre): ?>
    <li class="<?= $i % 2 == 0 ? 'pair' : '' ?>">
      <?= $i + 1 ?>. <?= htmlspecialchars($livre->titre) ?>
      <?php if ($livre->stock == 0): ?><em>épuisé</em><?php endif; ?>
    </li>
  <?php endforeach; ?>
  </ul>
<?php else: ?>
  <p>Aucun livre.</p>
<?php endif; ?>

blade

@foreach ($livres as $livre)
    <li>{{ $livre->titre }}</li>
@endforeach

@forelse ($livres as $livre)          {{-- foreach + cas « liste vide » --}}
    <li>{{ $livre->titre }}</li>
@empty
    <li>Aucun livre ne correspond à votre recherche.</li>
@endforelse

@for ($i = 1; $i <= 5; $i++)
    <span>{{ $i <= $note ? '★' : '☆' }}</span>
@endfor

@while ($condition)
    ...
@endwhile

blade

<table>
    @foreach ($commandes as $commande)
        <tr @class(['ligne-paire' => $loop->even])>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $commande->numero }}</td>
        </tr>
    @endforeach
</table>

blade

<a href="{{ route('livres.index') }}" @class(['lien', 'actif' => request()->routeIs('livres.*')])>Catalogue</a>
<div @style(['background: #fdeeea' => $livre->nouveaute])>...</div>

<input type="checkbox" name="en_stock" @checked(old('en_stock', $filtre->en_stock))>
<option value="fr" @selected($langue === 'fr')>Français</option>
<button type="submit" @disabled($livre->stock === 0)>Ajouter au panier</button>

un layout avec des `@yield`, des pages avec `@section`	un composant layout avec `{{ $slot }}` et des slots nommés
syntaxe historique, présente dans beaucoup de projets et d'examens	syntaxe moderne, utilisée par les kits de démarrage
un seul layout parent par page	les composants s'imbriquent et se combinent librement

Manipulation des vues et du moteur Blade

Manipulation des vues et du moteur Blade

Créer une vue

Transmettre des données aux vues

Les compositeurs de vues

Optimiser les vues

Blade : afficher des données

Blade : les directives de contrôle

Blade : inclusions et mise en page par héritage

Blade : les composants

Les vidéos du chapitre

TP fil rouge · Les vues du catalogue

Exercices

Choisis la bonne réponse

Traduire du PHP en Blade

À retenir

Le layout et deux pages

Le composant de note