Laravel - Vue d'ensemble : Un guide pour les débutants

Salut là, futurs développeurs Laravel ! Aujourd'hui, on va plonger dans une des parties les plus passionnantes de Laravel - les Vues. Ne vous inquiétez pas si vous n'avez jamais codé auparavant ; je vais vous guider étape par étape. À la fin de ce tutoriel, vous serez capable de créer des pages web magnifiques comme un pro !

Laravel - Views

Qu'est-ce que les Vues ?

Les Vues dans Laravel sont comme la jolie face de votre application. Elles sont responsables de ce que vos utilisateurs voient réellement lorsqu'ils visitent votre site web. Pensez aux vues comme aux templates HTML qui présentent vos données de manière conviviale.

Créer Votre Première Vue

Commençons par un exemple simple. Imaginez que nous voulons créer une page d'accueil pour notre site web. Voici comment nous ferions :

Navigatez vers le répertoire resources/views dans votre projet Laravel.
Créez un nouveau fichier appelé welcome.blade.php.
Ajoutez le code suivant :

<!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur Mon Site</title>
</head>
<body>
<h1>Salut, le monde !</h1>
<p>Bienvenue sur mon incroyable site Laravel.</p>
</body>
</html>

Il s'agit d'une structure HTML de base avec un message d'accueil chaleureux. L'extension .blade.php indique à Laravel d'utiliser son moteur de template, Blade, que nous explorerons plus en détail plus tard.

Afficher la Vue

Maintenant que nous avons notre vue, affichons-la lorsque quelqu'un visite notre site web. Dans votre fichier routes/web.php, ajoutez ce code :

Route::get('/', function () {
return view('welcome');
});

Cela indique à Laravel : "Lorsqu'un utilisateur visite la page d'accueil, montrez-lui la vue 'welcome'."

Passer des Données aux Vues

Les vues sont géniales, mais elles deviennent vraiment puissantes lorsque nous pouvons insérer des données dynamiquement. Voyons comment nous pouvons faire cela.

Passage de Données Simple

Imaginez que nous voulons personnaliser notre message d'accueil. Nous pouvons passer des données à notre vue comme ceci :

Route::get('/', function () {
$name = "Sarah";
return view('welcome', ['name' => $name]);
});

Maintenant, mettons à jour notre welcome.blade.php pour utiliser ces données :

<!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur Mon Site</title>
</head>
<body>
<h1>Salut, {{ $name }} !</h1>
<p>Bienvenue sur mon incroyable site Laravel.</p>
</body>
</html>

La syntaxe {{ $name }} est la manière de Blade d'écho les données. Lorsque vous visitez la page maintenant, vous verrez "Salut, Sarah !" au lieu de "Salut, le monde !".

Passage de Plusieurs Variables

Nous pouvons passer autant de variables que nous le souhaitons. Ajoutons-en quelques-unes :

Route::get('/', function () {
$data = [
'name' => "Sarah",
'age' => 28,
'hobbies' => ['lecture', 'codage', 'rando']
];
return view('welcome', $data);
});

Et mettons à jour notre vue :

<!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur Mon Site</title>
</head>
<body>
<h1>Salut, {{ $name }} !</h1>
<p>Bienvenue sur mon incroyable site Laravel.</p>
<p>Vous avez {{ $age }} ans.</p>
<p.Vos loisirs sont :</p>
<ul>
@foreach($hobbies as $hobby)
<li>{{ $hobby }}</li>
@endforeach
</ul>
</body>
</html>

Ici, nous avons introduit une directive Blade @foreach pour boucler sur le tableau des loisirs. Blade rend super simple le travail avec les données dans vos vues !

Partager des Données avec toutes les Vues

Parfois, vous pourriez vouloir partager certaines données avec toutes les vues de votre application. Par exemple, vous pourriez vouloir afficher le nom de l'utilisateur actuel dans la barre de navigation sur chaque page.

Utiliser les Composants de Vue

Laravel fournit une fonctionnalité appelée Composants de Vue pour cela. Voici comment vous pouvez l'utiliser :

Créez un nouveau fichier app/Providers/ViewServiceProvider.php (si il n'existe pas déjà).
Ajoutez le code suivant :

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\View;

class ViewServiceProvider extends ServiceProvider
{
public function boot()
{
View::composer('*', function ($view) {
$view->with('currentUser', 'John Doe');
});
}
}

Enregistrez ce fournisseur dans config/app.php :

'providers' => [
// Autres fournisseurs...
App\Providers\ViewServiceProvider::class,
],

Maintenant, $currentUser sera disponible dans toutes vos vues !

Conclusion

Les vues sont le cœur de l'interface utilisateur de votre application Laravel. Elles vous permettent de séparer votre logique de présentation de votre logique métier, rendant votre code plus propre et plus maintenable. Souvenez-vous, la pratique fait la perfection, donc n'ayez pas peur d'expérimenter avec différents layouts et techniques de passage de données !

Voici un tableau de référence rapide des méthodes que nous avons couvertes :

Méthode	Description
`view('nom')`	Retourne une vue
`view('nom', ['cle' => 'valeur'])`	Retourne une vue avec des données
`View::composer('*', function)`	Partage des données avec toutes les vues

Bonne programmation, et puissent vos vues toujours être à couper le souffle ! ?

Credits: Image by storyset

Tutoriel précédent:

Laravel - Réponse

Tutoriel suivant:

Laravel - Modèles Blade