Laravel – Les vues statiques

Temps de lecture : 21 minutes environ.

Nous avons vu dans les articles précédents comment créer un modèle (pour les requêtes en base de données), un contrôleur (pour le traitement de ces données), il faut maintenant afficher les données pour l’utilisateur. Cet affichage est effectué par les vues.

Ces vues, créées sous forme de fichiers PHP stockés dans resources/views seront écrites avec une syntaxe utilisant le moteur de vues « Blade », intégré à Laravel.

Une vue standard, pour une page statique, par exemple, sera appelée par le contrôleur au moyen de la ligne en surbrillance ci-dessous

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class indexController extends Controller
{
public function home(){
return view('index'); // La fonction home ne fera, dans un premier temps, que retourner la vue de la page d'accueil
}
}

Dans cet exemple, le contrôleur ne fait qu’afficher la vue sans lui passer de données.

‘index’ étant passé dans le return, Laravel cherchera un fichier ‘index.blade.php’ ou ‘index.php’ dans resources/views.

Ce fichier se présentera comme ceci

@extends('layouts.layout') <!-- Nous précisons le fichier contenant la mise en page de cette vue -->

@section('content') <!-- Nous ouvrons une section appelée 'content' destinée à s'intégrer dans la section du même nom dans le layout -->
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Page d'accueil</div>

<div class="card-body">
Ceci est un exemple utilisant bootstrap. Cependant, le code entre @section et @endsection est libre, il s'agit de html.
</div>
</div>
</div>
</div>
</div>
@endsection <!-- Nous fermons la section -->

Le fichier exemple ci-dessus « étend » le fichier resources/views/layouts/layout.blade.php.

Dans ce fichier de « mise en page », nous allons définir quels sont les éléments communs à toutes nos pages (en général le <head>, le <footer>, mais aussi une partie type <header> par exemple.

Voici le fichier par défaut que nous pourrions utiliser

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<!-- Include CSS files -->
<link href="{{ asset('css/styles.css') }}" rel="stylesheet">
<!-- Include JS files -->
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
@yield('content') <!-- Ici, nous créons un emplacement pour une section appelée 'content' -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /container-fluid -->
</body>
</html>

Ce fichier, bien que fonctionnel, posera quelques problèmes à l’usage.

En effet, il nous manque, par exemple, une injection du titre de façon dynamique.

De plus, nous aurons parfois besoin d’éclater encore plus ce fichier afin de créer plusieurs mises en page qui utiliseront la même structure générale mais différeront dans la partie principale.

Il est donc courant de créer des fichiers « partiels » contenant le début, la fin de fichier, mais également parfois les barres de navigation ou barres latérales.

Le titre de la page

2 étapes sont indispensables afin de rendre le titre de la page dynamique. Nous devrons ajouter une ligne dans notre vue, et modifier une ligne dans le « layout »

La vue :

@extends('layouts.layout') <!-- Nous précisons le fichier contenant la mise en page de cette vue -->

@section('title', 'Accueil')

@section('content') <!-- Nous ouvrons une section appelée 'content' destinée à s'intégrer dans la section du même nom dans le layout -->
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Page d'accueil</div>

<div class="card-body">
Ceci est un exemple utilisant bootstrap. Cependant, le code entre @section et @endsection est libre, il s'agit de html.
</div>
</div>
</div>
</div>
</div>
@endsection <!-- Nous fermons la section -->

Nous ajoutons la ligne 3 ci-dessus afin de préciser au « layout » que nous attribuons le titre « Accueil » à cette vue.

Le « layout » doit donc être mis à jour comme ci-dessous

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@yield('title')</title>
<!-- Include CSS files -->
<link href="{{ asset('css/styles.css') }}" rel="stylesheet">
<!-- Include JS files -->
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
@yield('content') <!-- Ici, nous créons un emplacement pour une section appelée 'content' -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /container-fluid -->
</body>
</html>

La ligne 5 ce ce fichier va permettre d’afficher « Accueil » dans la balise title de notre page.

Les fichiers « Partiels »

Lorsque notre mise en page devient complexe et que certaines parties de nos fichiers sont redondantes, principalement entre les différents fichiers « layouts », il peut être intéressant de créer des fichiers « partiels » contenant le code qui est en redondance, afin de faciliter sa maintenance ultérieurs. En effet, pourquoi modifier plusieurs fichiers layout si la modification d’un seul est possible.

Nous pourrons, par exemple, séparer le début de notre layout, jusqu’à la balise <body>

Pour ce faire, nous allons créer un nouveau dossier qui peut prendre le nom que vous voulez (toto, brouette, partials…).

Nous allons prendre « partials », qui portera bien son nom.

Créons donc le dossier resources/views/partials

Une fois ce dossier créé, nous allons créer un fichier common-header.blade.php (ce nom n’est pas obligatoire).

Dans ce fichier, nous allons insérer ce code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@yield('title')</title>
<!-- Include CSS files -->
<link href="{{ asset('css/styles.css') }}" rel="stylesheet">
<!-- Include JS files -->
</head>
<body>

Maintenant que ce fichier est créé, allons modifier notre layout qui deviendra

@include('partials.common-header')

<div class="container-fluid">
<div class="container">
<div class="row">
@yield('content') <!-- Ici, nous créons un emplacement pour une section appelée 'content' -->
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /container-fluid -->
</body>
</html>

Nous avons retiré le contenu qui est dans le fichier resources/views/partials/common-header.blade.php et utilisé la fonction include pour l’intégrer à notre layout.

Le prochain article parlera des vues dynamiques.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Laravel – Les vues statiques
Article publié le

Catégories : MVC Laravel Tutoriel

Mots-clés : Tutoriel Framework Laravel MVC Views

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn