OUJOOD.COM
Introduction : Qu’est-ce que le Contenu Dynamique ?
Le contenu dynamique, c’est quand une page change selon le moment ou les informations disponibles. Par exemple, une page peut montrer l’heure exacte ou une liste qui grandit quand vous ajoutez des éléments. Avec ExpressJS, on peut utiliser des moteurs de templates comme EJS ou Pug pour générer des pages dynamiques en mélangeant données et modèles HTML.
Première Partie : Servir du Contenu Dynamique avec EJS (Épisode 6)
Cette partie reflète exactement le contenu de la vidéo de l’épisode 6 « Pages HTML dynamiques avec EJS ». On y installe EJS, on configure app.js, on crée views/index.ejs et views/about.ejs, on ajoute la navigation, puis un partial réutilisable partials/header.ejs.
1) Introduction
Jusqu’ici, on a envoyé des réponses avec res.send() — pratique pour de petits tests, mais pas pour de vraies pages. Avec EJS, on génère des pages HTML dynamiques facilement.
2) Installation d’Express et d’EJS
- Se placer dans le dossier du projet
- Installer :
npm install express ejs
npm install express ejs
3) Configuration d’EJS dans app.js
On ouvre app.js (créé dans les épisodes précédents) et on déclare EJS comme moteur de vues. (Si vous utilisez ESM avec import, pensez à définir "type": "module" dans votre package.json.)
import express from "express";
const app = express();
const PORT = 3000;
// Définir EJS comme moteur de vues
app.set("view engine", "ejs");
app.listen(PORT, () => {
console.log(`Serveur démarré sur http://localhost:${PORT}`);
});
Explication : app.set("view engine","ejs") dit à Express d’utiliser EJS pour le rendu des pages.
4) Créer le dossier views et le fichier index.ejs
Express cherche les fichiers EJS dans un dossier views à la racine — créez-le manuellement, puis ajoutez index.ejs.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Bienvenue</title> </head> <body> <h1>Bienvenue sur <%= siteName %></h1> <p>Bonjour <%= user %> !</p> </body> </html>
Explication : <%= ... %> insère une valeur dynamique échappée.
5) Arborescence du projet (étape atteinte)
mon-projet/
app.js
package.json
node_modules/
views/
index.ejs
6) Première page dynamique avec EJS
On ajoute une route / qui rend index.ejs avec des données.
app.get("/", (req, res) => {
res.render("index", { siteName: "Mon Super Site", user: "Carabde" });
});
Explication : res.render("index", { ... }) cherche views/index.ejs et remplace les variables siteName & user.
7) Ajouter une deuxième page : about.ejs
Créez views/about.ejs puis la route /about.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>À propos</title> </head> <body> <h1>À propos de <%= siteName %></h1> <p>Ce site a été créé par <%= author %>.</p> </body> </html>
app.get("/about", (req, res) => {
res.render("about", { siteName: "Mon Super Site", author: "Carabde" });
});
8) Navigation entre les pages
Ajoutez des liens dans les vues pour naviguer.
<a href="/">Accueil</a> | <a href="/about">À propos</a>
Placez ces liens en haut de index.ejs et about.ejs.
9) Bonus : réutiliser du code avec un partial
Créez views/partials/header.ejs pour factoriser l’en-tête & la nav, puis incluez-le dans vos pages.
<header> <a href="/">Accueil</a> | <a href="/about">À propos</a> <hr> </header>
<%- include("partials/header") %>
Tester
- Démarrer :
node app.js - Aller sur http://localhost:3000 puis sur /about
Note : si vous préférez require() au lieu de import, vous pouvez écrire const express = require('express') et retirer "type":"module" de package.json. Le scénario vidéo emploie import, d’où ce choix ici.
Deuxième Partie : Servir du Contenu Dynamique avec Pug
Nous allons maintenant refaire le même exemple mais avec le moteur de templates Pug. C’est la version que tu avais déjà rédigée dans ton article original.
Étape 1 : Préparer Votre Environnement
Avant de coder, préparons tout ce qu’il faut. Si vous avez suivi les tutoriels précédents, vous avez déjà Node.js et ExpressJS. Voici les étapes :
- Vérifiez Node.js : Ouvrez un terminal et tapez
node -v. Si une version apparaît (ex. : v16.13.0), c’est bon. Sinon, téléchargez Node.js sur nodejs.org. - Créez un dossier projet : Créez un dossier nommé le par exemple : "contenu-dynamique" sur votre ordinateur.
- Initialisez le projet : Dans le terminal, allez dans ce dossier avec
cd chemin/vers/contenu-dynamique, puis tapeznpm init -y. Cela crée un fichierpackage.json. - Installez ExpressJS et Pug : Tapez
npm install express pug. Pug nous aidera à rendre le contenu dynamique facilement.
Étape 2 : Créer une Application avec Contenu Dynamique
Construisons une application qui affiche l’heure actuelle et une liste de messages que vous pouvez personnaliser via une requête.
Exemple de Code : Application Principale
Créez un fichier nommé app.js dans votre dossier "contenu-dynamique" et ajoutez ce code :
var express = require('express');
var app = express();
// Configurer Pug comme moteur de template
app.set('view engine', 'pug');
app.set('views', './views');
// Liste de messages en mémoire
var messages = ['Bienvenue !'];
// Route pour la page principale
app.get('/', function(req, res) {
var heureActuelle = new Date().toLocaleTimeString(); // Heure actuelle
var nouveauMessage = req.query.message; // Message depuis l’URL
if (nouveauMessage) {
messages.push(nouveauMessage); // Ajouter le message
}
res.render('index', { heure: heureActuelle, messages: messages });
});
app.listen(3000, function() {
console.log('Serveur démarré sur http://localhost:3000');
});
Créer le Template Pug
Créez un dossier nommé views dans "contenu-dynamique". À l’intérieur, ajoutez un fichier index.pug avec ce contenu :
html
head
title Contenu Dynamique
body
h1 Heure actuelle : #{heure}
h3 Mes messages
ul
each message in messages
li= message
p Ajoutez un message via l’URL : <a href="/?message=Nouveau">Exemple</a>
Explication Détaillée du Code
Voici chaque partie expliquée très simplement pour les débutants :
- app.set('view engine', 'pug'); : On choisit Pug pour créer des pages dynamiques.
- app.set('views', './views'); : On dit à Express où trouver les fichiers Pug.
- var messages = ['Bienvenue !']; : Une liste qui stocke les messages (en mémoire pour cet exemple).
- app.get('/', ...); : Route pour la page principale.
new Date().toLocaleTimeString();: Récupère l’heure actuelle (ex. : "14:30:45").req.query.message: Récupère un paramètre "message" depuis l’URL (ex. : ?message=Nouveau).messages.push(nouveauMessage);: Ajoute le nouveau message à la liste s’il existe.res.render('index', { heure: heureActuelle, messages: messages });: Envoie la page Pug avec l’heure et les messages.
- Pug - index.pug :
#{heure}: Affiche l’heure dynamique.each message in messages: Boucle sur la liste pour afficher chaque message.<a href="/?message=Nouveau">: Lien pour ajouter un message via l’URL.
Étape 3 : Tester l’Application
Démarrez le serveur avec node app.js dans le terminal, puis testez :
- http://localhost:3000 : Vous verrez l’heure actuelle et le message "Bienvenue !".
- http://localhost:3000/?message=Salut : L’heure se met à jour, et "Salut" s’ajoute à la liste.
- Rafraîchissez la page : L’heure change à chaque fois, et la liste reste visible.
Essayez d’ajouter d’autres messages via l’URL (ex. : ?message=Test) pour voir la liste grandir !
Conclusion
Félicitations ! Vous savez maintenant servir du contenu dynamique avec ExpressJS et Pug. Vous avez créé une page qui affiche l’heure en temps réel et une liste qui change selon les utilisateurs. Pour aller plus loin, explorez notre prochain tutoriel sur Gérer les Téléchargements de Fichiers avec ExpressJS ou consultez la documentation Pug.