Logo - laConsole

Créer framework PHP : Vues

Les vues constituent l'ensemble des templates HTML d'un site (layout, pages et partials).

Icône de calendrier
Avancé
10 chapitres

Qu’est-ce qu’une vue ?

Les vues (en anglais « views ») constituent le « V » de MVC.

Le rôle des vues est de rassembler au sein de templates les éléments structurels de nos pages web. Autrement dit, l’ensemble du code HTML du site web.

Très souvent, les vues intègrent des petites portions de code PHP telles que l’affichage de variables, des boucles, des conditions, etc., venant dynamiser les templates.

Ces templates se divisent en 3 familles principales : le layout, les pages et les partials.

3 types de vues

1. Layout

Le layout va contenir le squelette commun à l’ensemble des pages web. Il contient les balises de premier niveau (<html>, <head> et <body>).

C’est au sein du layout que vont venir se greffer les pages web.

layout.php
copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Plugo</title>
	</head>
	<body>
		<main>
			<?php require $templatePath ?>
		</main>
	</body>
</html>

Les variables $templatePath et $data proviennent de la méthode renderView() du contrôleur parent.

2. Pages

Les pages vont constituer le contenu propre à chaque page web. Elles représentent entre autres les templates référencés par la variable $templatePath.

home.php
copié ! 
<h1>Plugo, un micro framework PHP</h1>

Un template de page contient uniquement le code propre à la page en question. Il a bien évidemment accès au tableau $data.

3. Partials

Les « partials » ou « template_parts » vont contenir les éléments d’interface communs à plusieurs pages web (navbar, footer…). Ils vont généralement être situés dans un layout pour factoriser leur contenu sur plusieurs pages. Par convention, on a l’habitude de les préfixer d’un caractère _ (underscore).

_header.php
copié ! 
<header>
	<nav>...</nav>
</header>
_footer.php
copié ! 
<footer>...</footer>

Mettons à jour le layout pour y inclure ces 2 partials :

layout.php
copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Plugo</title>
	</head>
	<body>
		<?php include '_header.php'; ?>
		<main>
			<?php require $templatePath ?>
		</main>
		<?php include '_footer.php'; ?>
	</body>
</html>

Si nous accédons à nouveau à l’URL plugo.local/index.php?path=/ ou localhost/nom-projet/public/index.php?path=/, nous pouvons enfin voir apparaître à l’écran notre première page !

Vous avez probablement remarqué que notre layout possède le title générique « Plugo » et aucune méta-description… ce qui n’est pas idéal en terme de SEO !

Je vous invite à découvrir comment implémenter un système de métadonnées simple pour optimiser le référencement web des sites générés avec notre framework.