Laravel Blade est le moteur de création de modèles par défaut du framework Laravel.
Il vous permet d'utiliser des variables, des boucles, des instructions conditionnelles et
d'autres fonctionnalités PHP directement dans votre code HTML. Pour créer des
fichiers Blade, définissez simplement des vues Blade en créant des fichiers avec
l' .[Link] extension dans le répertoire resources/views de votre projet Laravel,
puis structurez vos pages dynamiques préférées dans ces fichiers.
Pourquoi devriez-vous utiliser Blade ?
L'un des principaux avantages de Blade est son organisation de code modulaire.
Blade vous aide à organiser votre code en modules réutilisables que vous pouvez
facilement ajouter, supprimer ou mettre à jour sans affecter le reste de votre
application.
L'encapsulation du code est un autre avantage de Blade. Blade permet d'encapsuler
les fonctions, ce qui facilite la gestion des tests, du débogage et de la maintenance
du code. Cette approche est avantageuse pour les applications de plus grande taille,
car les applications non organisées peuvent rapidement devenir difficiles à gérer.
Le moteur de création de modèles de Blade est performant et constitue le framework
PHP le plus rapide que nous ayons testé . Le moteur compile toutes vos vues Blade
en code PHP simple, puis les met en cache jusqu'à ce que vous les modifiiez. Cette
approche favorise un rendu plus rapide et des performances globales améliorées.
Comment utiliser Laravel Blade
Dans ce tutoriel, nous créons une application Laravel pour découvrir les modèles
Blade en action. Apprenez à définir et à étendre les dispositions des lames, à
transmettre des données entre les vues de lames, à utiliser les différentes structures
de contrôle disponibles et à créer vos propres lames.
Prérequis
Pour suivre ce tutoriel, assurez-vous de disposer des éléments suivants :
• Connaissance préalable de PHP
• Composer est installé. Vérifiez que Composer est sur votre système en
exécutantcomposer -V
Consultez le code complet du didacticiel pour obtenir des conseils pendant que
vous travaillez.
Les composants Blade de Laravel sont des unités de code réutilisables et
autonomes qui sont essentielles à la construction de l'interface utilisateur d'une
application Web. Ils offrent la possibilité de créer des composants personnalisés,
flexibles et maintenables, favorisant une organisation efficace du code et sa
réutilisabilité.
En utilisant des composants blade, des éléments HTML répétitifs tels que des
formulaires, des boutons ou même des sections complexes peuvent être encapsulés
dans un seul composant. Ils peuvent également être utilisés sur plusieurs pages,
garantissant ainsi la cohérence et la facilité de maintenance. Cette fonctionnalité
simplifie considérablement le développement, ce qui se traduit par une base de code
plus modulaire et plus compréhensible.
Par exemple, au lieu de dupliquer le code d'une barre de navigation sur plusieurs
pages, un composant Blade pour la barre de navigation peut être créé et inclus sans
effort selon les besoins. Les services de développement Laravel utilisent les
composants Blade pour réduire la redondance et faciliter les mises à jour ou les
modifications de la barre de navigation dans l'ensemble de l'application.
Comment créer l'application Laravel
Pour créer un exemple d'application Laravel, exécutez :
composer create-project laravel/laravel my-app
Suivez les instructions sur votre terminal pour terminer la création de l'application.
Ensuite, allez dans le répertoire de l’application et servez-le avec cette commande :
cd my-app
php artisan serve
Cliquez sur le lien dans le terminal pour ouvrir la page d'accueil de Laravel sur votre
navigateur.
Comment définir la mise en page
Les mises en page vous permettent de configurer des sections de votre application
Web à partager sur plusieurs pages. Par exemple, si votre application possède une
barre de navigation et un pied de page cohérents sur plusieurs pages, il est plus
efficace de les créer une fois que de les recréer pour chaque page.
Avant de suivre les instructions étape par étape, jetez un œil à la démonstration
squelettique suivante.
Le code pour créer des sites Web sans mise en page est présenté ci-dessous. Il vous
oblige à réécrire votre code de barre de navigation et de pied de page pour chaque
page.
<!-- Page 1 -->
<nav>. . . </nav>
Content for page 1
<footer> . . . </footer>
<!-- Page 2 -->
<nav>. . . </nav>
Content for page 2
<footer> . . . </footer>
Au lieu de cela, vous pouvez facilement construire votre application en utilisant des
mises en page pour partager les mêmes composants dans un seul bloc de code :
<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>
Une fois que vous avez défini votre mise en page, vous pouvez l'utiliser sur n'importe
quelle page de votre choix :
<!-- Page 1 or Page n -->
<main-layout>
Content for page n
</main-layout>
Dans les anciennes versions de Laravel, vous deviez créer des mises en page à l'aide
de l'héritage de modèles . Cependant, lorsque l'entreprise a ajouté la
fonctionnalité de composant , il est devenu beaucoup plus facile de créer des mises
en page robustes.
Pour créer une nouvelle mise en page avec Laravel Blade, exécutez d'abord cette
commande pour créer le composant de la mise en page :
php artisan make:component Layout
Cette commande génère un nouveau fichier [Link] situé dans un
nouveau dossier appelé components dans le répertoire resources/views/ . Ouvrez
ce fichier et collez ce code :
<html>
<head>
<title>{{ $title ?? 'Example Website' }}</title>
<link rel="stylesheet" href="{{ asset('/css/[Link]') }}">
</head>
<body>
<nav>
<h3>Welcome to my website</h3>
<hr>
</nav>
{{ $slot }}
<footer>
<hr />
© 2023 [Link]
</footer>
</body>
</html>
Ce code crée un composant de mise en page doté d'une barre de navigation et d'un
pied de page simples. La slot fonction définit où transmettre le contenu principal
chaque fois que vous étendez votre composant de mise en page.
Comment étendre la mise en page
Vous pouvez facilement importer un composant dans une vue de lame à l'aide de
la <x-component-name>balise. Cette méthode s'applique également au composant de
présentation que vous avez créé précédemment.
Pour voir à quoi ressemble l'extension de la mise en page, ouvrez le
fichier resources/views/[Link] par défaut et remplacez le contenu du
fichier par ce code :
<x-layout>
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
<button class="btn">Get Started</button>
</div>
</x-layout>
Cette approche met à jour la page d'accueil pour utiliser le composant de mise en
page tout en transmettant un élément d'en-tête et un paragraphe avec un texte fictif
comme contenu. Rechargez le lien que vous avez ouvert précédemment pour
afficher les modifications.
Dans votre définition de mise en page, notez que le code a généré des données de
titre par défaut sur « Exemple de site Web » si le code ne transmet pas les données
de titre. Vous pouvez transmettre ces données sous forme d'emplacements nommés
dans vos vues via le <x-slot name="slotName" /> code — dans ce cas, <x-slot name="title"
/>. Mettez à jour le fichier [Link] avec le code ci-dessous et rechargez
la page :
<x-layout>
<x-slot name="title">
Home | Example Website
</x-slot>
<div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
<button class="btn">Get Started</button>
</div>
</x-layout>
Ensuite, ajoutez du style pour améliorer l'apparence de votre application. Créez un
nouveau fichier [Link] dans le répertoire /public/css , puis collez le code de
ce fichier .
Avec toutes ces mises à jour, vous devriez voir la sortie suivante lorsque vous
prévisualisez votre application sur [Link]
Utilisation de Composants dans Blade
Les composants permettent de créer des éléments réutilisables avec leurs propres
balises.
• Création et Utilisation d'un Composant : Créez un composant avec la
commande Artisan : php artisan make:component Alert
Ce composant crée un fichier dans resources/views/components/[Link].
Exemple de Composant :
<!-- resources/views/components/[Link] -->
<div class="alert alert-{{ $type }}">
{{ $slot }}
</div>
Appelez ce composant dans une vue, en passant des attributs personnalisés :
<x-alert type="success">
Opération réussie !
</x-alert>
Slots et Attributs Dynamiques dans les Composants
Slots nommés : les composants peuvent avoir plusieurs sections dynamiques
nommées, appelées "slots".
<!-- resources/views/components/[Link] -->
<div class="card">
<div class="card-header">
{{ $header }}
</div>
<div class="card-body">
{{ $slot }}
</div>
</div>
Utilisation du composant avec des slots nommés :
<x-card>
<x-slot name="header">
Titre de la carte
</x-slot>
Contenu principal de la carte
</x-card>
