Les vues avec Blade et TailwindCSS

22 mars 2025

28:42

débutant

Les vues avec Blade et TailwindCSS

Bienvenue dans cette deuxième vidéo de notre série sur Laravel 12 !

Introduction

Dans cette vidéo, nous allons découvrir Blade, le puissant moteur de template de Laravel. Nous verrons comment créer des layouts réutilisables et des composants Blade pour éviter la duplication de code et améliorer la maintenabilité de nos vues.

📌 Au programme :

✅ Découverte du moteur de template Blade
✅ Création de layouts réutilisables
✅ Introduction aux composants Blade
✅ Stylisation avec Tailwind CSS

Rappel de la situation

Dans la vidéo précédente, nous avons créé deux vues PHP (welcome.php et projects.php) pour notre application. Maintenant, nous allons les améliorer en utilisant Blade et en évitant la duplication de code.

Transformation des vues en templates Blade

Pour utiliser Blade, nous devons d'abord renommer nos fichiers avec l'extension .blade.php :

views/
  ├── welcome.blade.php
  └── projects.blade.php

Avantages de Blade

Blade offre plusieurs avantages :

Syntaxe élégante et concise
Héritage de layouts
Composants réutilisables
Directives puissantes

Création d'un layout principal

Méthode 1 : Utilisation des sections Blade

Créons un dossier layouts dans le dossier views
Créons un fichier app.blade.php dans ce dossier

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 12</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/project">Projects</a></li>
        </ul>
    </nav>

    @yield('content')
</body>
</html>

Ensuite, modifions nos vues pour qu'elles étendent ce layout :

@extends('layouts.app')

@section('content')
    <h1>Hello World</h1>
@endsection

@extends('layouts.app')

@section('content')
    <h1>My Projects</h1>
@endsection

Méthode 2 : Utilisation des composants Blade

Créons un dossier components dans views et ajoutons un fichier layout.blade.php :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 12</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/project">Projects</a></li>
        </ul>
    </nav>

    {{ $slot }}
</body>
</html>

Puis utilisons ce composant dans nos vues :

<x-layout>
    <h1>Hello World</h1>
</x-layout>

<x-layout>
    <h1>My Projects</h1>
</x-layout>

Création d'un composant pour les liens

Créons un composant link-item.blade.php pour gérer nos liens de navigation :

@props(['active' => false])

<li>
    <a {{ $attributes->class([
        'hover:text-gray-600',
        'font-bold' => $active
    ]) }}>
        {{ $slot }}
    </a>
</li>

Et utilisons-le dans notre layout :

<nav>
    <ul>
        <x-link-item href="/" :active="Route::currentRouteName() === 'homepage'" class="underline">
            Home Page
        </x-link-item>
        <x-link-item href="/project" :active="Route::currentRouteName() === 'project'">
            Project
        </x-link-item>
    </ul>
</nav>

Nommer nos routes

Pour que notre système de liens actifs fonctionne, nous devons nommer nos routes dans routes/web.php :

Route::get('/', function () {
    return view('homepage');
})->name('homepage');

Route::get('/project', function () {
    return view('project');
})->name('project');

Stylisation avec Tailwind CSS

Laravel 12 intègre Tailwind CSS par défaut. Mettons à jour notre layout pour en profiter :

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel 12</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-white shadow-md p-6 max-w-4xl mx-auto mt-10">
    <nav class="mb-6">
        <ul class="flex space-x-4">
            <x-link-item href="/" :active="Route::currentRouteName() === 'homepage'" class="underline">
                Home Page
            </x-link-item>
            <x-link-item href="/project" :active="Route::currentRouteName() === 'project'">
                Project
            </x-link-item>
        </ul>
    </nav>

    <div class="p-4">
        {{ $slot }}
    </div>
</body>
</html>

Utilisation de la directive @class

La directive @class nous permet de gérer conditionnellement les classes CSS :

<a @class([
    'hover:text-gray-600',
    'font-bold' => $active
])>{{ $slot }}</a>

Fusion des attributs avec $attributes->merge() ou $attributes->class()

Pour combiner les attributs passés depuis le parent avec ceux définis dans le composant :

<a {{ $attributes->class([
    'hover:text-gray-600',
    'font-bold' => $active
]) }}>{{ $slot }}</a>

Conclusion

Dans cette vidéo, nous avons vu :

Comment transformer des vues PHP en templates Blade
Comment créer et utiliser des layouts pour éviter la duplication de code
Comment créer et utiliser des composants Blade réutilisables
Comment ajouter du style avec Tailwind CSS
Comment utiliser les directives Blade pour une gestion conditionnelle du style

Ces techniques vous permettront de créer des interfaces utilisateur plus maintenables et plus élégantes dans vos applications Laravel.

Prochaine vidéo

Dans la prochaine vidéo, nous verrons comment travailler avec les formulaires et les requêtes dans Laravel 12.

N'oubliez pas de liker la vidéo et de vous abonner pour ne pas manquer les prochains épisodes ! 👍

Vidéos de la playlist

Premiers pas et structure de Laravel 12

26:54

Les vues avec Blade et TailwindCSS

28:42

Passer des données aux vues

21:32

Besoin d'aide avec Laravel ?

Réservez une session de mentorat personnalisée pour accélérer votre apprentissage et résoudre vos problèmes techniques.

Réserver une session de mentorat