Servir le Contenu Dynamique avec ExpressJS - Guide pour Débutants

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 et Pug, on mélange des données (comme l’heure) avec un modèle (template) pour créer ces pages vivantes.

É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 tapez npm init -y. Cela crée un fichier package.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 :

📋 Copier le 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 :

📋 Copier le code

html
    head
        title Contenu Dynamique
    body
        h1 Heure actuelle : #{heure}
        h2 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.