Qu'est-ce qu'une vue Blade et où la créer ?

Après avoir défini une route et créé la méthode de contrôleur correspondante qui retourne une instruction view(...), la troisième et dernière étape de la création de notre page basique consiste à créer le fichier de vue Blade. Blade est le moteur de template simple mais puissant fourni avec Laravel. Il vous permet d'utiliser une syntaxe concise pour écrire du HTML, y injecter des données PHP, et structurer vos présentations de manière efficace grâce à des fonctionnalités comme l'héritage de templates et les sections.

Les fichiers de vue Blade ont l'extension .blade.php et sont stockés dans le répertoire resources/views/ de votre projet Laravel. Lorsque notre contrôleur (par exemple, PageController) retourne view('pages.mapremierepage', [...]), Laravel s'attend à trouver un fichier nommé mapremierepage.blade.php à l'intérieur d'un sous-dossier nommé pages dans resources/views/. La notation par points dans la fonction view() correspond à la structure des dossiers.

Donc, nous devons créer le dossier pages à l'intérieur de resources/views/ (s'il n'existe pas déjà), puis, à l'intérieur de resources/views/pages/, créer un nouveau fichier nommé mapremierepage.blade.php.

Ecrire le contenu HTML et utiliser les données du contrôleur

Ouvrez le fichier resources/views/pages/mapremierepage.blade.php que vous venez de créer. C'est ici que nous allons écrire le HTML de notre page et utiliser les variables que nous avons passées depuis la méthode afficherMaPremierePage de notre PageController. Rappelez-vous, nous avions passé un tableau comme ceci : ['title' => $pageTitle, 'message' => $welcomeMessage].

Voici un exemple de contenu pour notre vue Blade :

    
    

     

    
    


    

        
{{ $title }}
 

        
{{ $message }}
 

        
Ceci est une page basique générée avec le framework Laravel. Nous espérons que vous appréciez la simplicité !
    

Points clés de cette vue Blade :

• : Un exemple standard pour définir la langue de la page dynamiquement en fonction de la configuration de l'application.
• : Ici, nous utilisons la syntaxe Blade {{ ... }} pour afficher la valeur de la variable $title qui a été passée par le contrôleur. Blade échappe automatiquement cette sortie pour prévenir les attaques XSS (Cross-Site Scripting), ce qui est une mesure de sécurité importante. Si vous aviez besoin d'afficher du HTML non échappé (ce qui doit être fait avec une extrême prudence et uniquement avec du contenu de confiance), vous utiliseriez la syntaxe {!! $variable !!}.

• {{ $title }}

  et

  {{ $message }}

  : De même, nous affichons les variables $title et $message dans le corps de la page.
• Le reste est du HTML standard avec quelques styles CSS en ligne pour une présentation minimale. Dans un projet réel, vous utiliseriez des fichiers CSS externes et des layouts Blade pour une meilleure organisation.

Autres fonctionnalités de base de Blade (pour information)

Bien que notre page basique n'utilise que l'affichage de variables, Blade offre bien plus. Voici un aperçu rapide de quelques directives courantes que vous rencontrerez :

• Structures de contrôle :
  • @if (condition) ... @elseif (condition) ... @else ... @endif
  • @foreach ($collection as $item) ... @endforeach
  • @forelse ($collection as $item) ... @empty ... @endforelse (utile pour afficher un message si la collection est vide)
  • @while (condition) ... @endwhile
  • @for ($i = 0; $i < 10; $i++) ... @endfor
• Vérification de l'existence de variable :
  • @isset($variable) ... @endisset
  • @empty($variable) ... @endempty (vérifie si la variable est "empty" au sens PHP)
• Inclusion de sous-vues :
  • @include('partials.header') : pour inclure le contenu d'un autre fichier Blade (par exemple, resources/views/partials/header.blade.php).
• Layouts et sections (pour des templates plus complexes) :
  • Dans un layout maître (par exemple, app.blade.php) : @yield('content')
  • Dans une vue enfant : @extends('layouts.app') et @section('content') ... @endsection

Ces fonctionnalités permettent de créer des interfaces utilisateur dynamiques et bien structurées.

Prêt pour le test final

Avec la route définie, la méthode du contrôleur implémentée pour retourner la vue et passer des données, et le fichier de vue Blade créé pour afficher ces données et le contenu HTML, toutes les composantes nécessaires à notre page basique sont maintenant en place.

La création de la vue est l'étape où l'on définit concrètement ce que l'utilisateur verra dans son navigateur. C'est la couche de présentation qui prend les données préparées par la logique applicative (le contrôleur) et les transforme en une interface utilisateur.

La prochaine et dernière étape sera de tester notre page dans un navigateur pour s'assurer que tout fonctionne comme prévu. Si des erreurs surviennent, elles sont souvent liées à un nom de fichier de vue incorrect, un chemin erroné dans la fonction view(), ou une variable mal nommée entre le contrôleur et la vue.