Créer un système de panier d'achat avec PHP et MySQL. Le système de panier d'achat permettra aux visiteurs du site Web de rechercher des produits, d'ajouter des produits au panier et de passer des commandes.
Apprenez à utiliser Pug avec ExpressJS pour simplifier la génération de templates HTML. Tutoriel complet avec exemples de code et bonnes pratiques.
Apprenez comment utiliser Pug avec ExpressJS pour générer du HTML de manière optimisée et dynamique.
Pug (anciennement Jade) est un moteur de templates puissant utilisé avec ExpressJS pour générer des pages HTML dynamiquement. Il simplifie le code en supprimant les balises de fermeture et en utilisant une indentation propre.
Avant de passer à l'installation et quand tu crées un projet ExpressJS, comme la structure de base du projet n'est pas générée automatiquement par Express. Alors tous les dossiers nécessaires à l'organisation de ton projet, comme /views, /public, /routes, etc., doivent être créés manuellement.
Créer ces dossiers permet de mieux organiser ton projet. Chaque dossier aura un rôle spécifique, ce qui rendra ton code plus lisible et facile à maintenir, surtout à mesure que ton application devient plus complexe.
Voici les étapes détaillées pour créer les dossiers nécessaires à ton projet ExpressJS avec Pug ici nous allons utiliser du JavaScript:
La création d'un dossier manuellement est une opération simple, que ce soit sur un ordinateur (Windows, macOS, Linux) ou sur un smartphone (Android, iOS). Voici une brève explication pour chaque système :
On peut aussi créer des dossiers via un terminal.
La création de dossiers via un terminal est une méthode rapide et efficace, particulièrement appréciée des utilisateurs avancés. Voici une explication des commandes à utiliser selon votre système d'exploitation :
mkdir (make directory) :
mkdir nom_du_dossiermkdir mon_dossier (crée un dossier nommé "mon_dossier" dans le répertoire courant).-p : Permet de créer une arborescence de dossiers si nécessaire. Exemple : mkdir -p dossier1/sous_dossier1/sous_sous_dossier1 (crée tous les dossiers intermédiaires si ils n'existent pas).mkdir dossier1 dossier2 dossier3cd (change directory) : pour changer de répertoire.ls (list) : pour lister les fichiers et dossiers dans le répertoire courant.mkdir ou md (make directory) :
mkdir nom_du_dossier ou md nom_du_dossiermkdir mon_dossier (crée un dossier nommé "mon_dossier" dans le répertoire courant).mkdir -p : fonctionne de la même manière que sur linux ou macOS pour créer une arborescence de dossier.cd : pour changer de répertoire.dir : pour lister les fichiers et dossiers dans le répertoire courant./views : Ce dossier contiendra tous les fichiers Pug qui servent de templates pour générer du HTML. Par exemple, tu y mettras des fichiers comme index.pug, about.pug, ou des layouts comme layout.pug.
// Pour créer un dossier on utilise la commande mkdir
mkdir views
/public : Ce dossier est utilisé pour stocker tous les fichiers statiques (CSS, images, JavaScript). Express peut servir ce dossier via la fonction express.static().
mkdir public mkdir public/css mkdir public/images mkdir public/js
/routes : Ce dossier est facultatif mais recommandé pour une meilleure organisation. Il contient tous les fichiers qui définissent les routes de ton application Express.
mkdir routes
/controllers : Ce dossier est également facultatif et utile si tu souhaites séparer la logique de tes routes.
mkdir controllers
/models : Ce dossier est utilisé si tu travailles avec une base de données. Il contiendra les modèles qui interagissent avec ta base de données.
mkdir models
Une fois que tu as créé tous ces dossiers, voici à quoi pourrait ressembler la structure de ton projet :
/mon-projet │── /views → Contient les fichiers Pug (templates) │ ├── layout.pug → Template principal (layout global) │ ├── index.pug → Page d'accueil │ ├── about.pug → Page "À propos" │── /public → Contient les fichiers statiques (CSS, images, JS) │ ├── css/ │ │ ├── styles.css │ ├── images/ │ ├── js/ │── /routes → Contient les fichiers de routes Express │ ├── index.js │── /controllers → Contient la logique métier (facultatif) │── /models → Contient les modèles de base de données (facultatif) │── index.js → Fichier principal (serveur Express) │── package.json → Dépendances et scripts │── package-lock.json
/views/ : Contient les fichiers Pug pour générer du HTML côté serveur./public/ : Contient les fichiers statiques (CSS, images, JavaScript) que le serveur servira./routes/ : Contient les fichiers qui définissent les routes (facultatif, pour une organisation claire)./controllers/ : Gère la logique métier ou le traitement des données (facultatif)./models/ : Contient les modèles de données si ton application interagit avec une base de données (facultatif).Ces dossiers doivent être créés manuellement pour bien organiser ton projet ExpressJS. En séparant les différentes parties de l'application, tu rendras ton projet plus facile à maintenir et à faire évoluer au fil du temps. 🚀
Installez Pug via npm en exécutant le code suivant:
npm install --save pug
Avant de pouvoir utiliser Pug comme moteur de templates avec ExpressJS, il est nécessaire de configurer l'application Express pour qu'elle reconnaisse et utilise ce moteur de rendu. Cette configuration permet à Express de comprendre que les fichiers de vues sont au format Pug et de savoir où les trouver dans l'architecture du projet.
Ajoutez la configuration suivante à votre fichier index.js :
var express = require('express');
var app = express();
app.set('view engine', 'pug');
app.set('views', './views');
app.listen(3000);
var express = require('express'); → Cette ligne importe le module ExpressJS, qui est essentiel pour créer un serveur web en Node.js.var app = express(); → Ici, nous initialisons une nouvelle application Express.app.set('view engine', 'pug'); → Cette ligne définit Pug comme moteur de templates par défaut. Ainsi, chaque fois que nous utiliserons res.render(), Express saura qu'il doit rechercher un fichier .pug.app.set('views', './views'); → Cela indique à Express que les fichiers de templates Pug se trouvent dans le dossier views/, situé à la racine du projet.app.listen(3000); → Cette ligne démarre le serveur sur le port 3000. Cela signifie que l'application sera accessible via l'URL http://localhost:3000.✅ Grâce à cette configuration, votre serveur Express est maintenant prêt à interpréter des templates Pug et à les rendre dynamiquement en HTML. Dans la prochaine section, nous allons voir comment créer et afficher une première page en Pug. 🚀
Créez un fichier first_view.pug dans le dossier views/ :
doctype html html head title Hello Pug body p.greetings#people Hello World!
Pour afficher la paje ajoutez la route suivante :
ce code fait les choses suivantes :
Il définit une route GET pour /first_template.
Lorsque cette route est atteinte, il utilise le moteur de template Pug pour rendre le fichier first_view.pug.
Le code HTML généré à partir de first_view.pug est envoyé comme réponse au client (le navigateur).
Donc, lorsque un utilisateur entre l'url /first_template dans son navigateur, le serveur envoie le fichier html généré par first_view.pug.
app.get('/first_template', function(req, res) {
res.render('first_view');
});
app.get('/first_template', function(req, res) { ... }); :
res.render('first_view'); :
#{variable}.Exemple d'affichage dynamique :
Le code fait les choses suivantes :
Il définit une route GET pour /dynamic_view.
Lorsque cette route est atteinte, il rend le fichier dynamic.pug.
Il passe un objet de données au template Pug, contenant les variables name et url.
Dans le fichier dynamic.pug, vous pouvez utiliser ces variables pour afficher dynamiquement "ExpressJS" et "https://expressjs.com" dans le code HTML généré.
app.get('/dynamic_view', function(req, res) {
res.render('dynamic', { name: "ExpressJS", url: "https://expressjs.com" });
});
res.render('dynamic', { name: "ExpressJS", url: "https://expressjs.com" }); :
res.render('dynamic', ...) : Utilise le moteur de template configuré (Pug) pour rendre le fichier dynamic.pug.
{ name: "ExpressJS", url: "https://expressjs.com" } : Ceci est un objet JavaScript qui contient des données à passer au template Pug. Ces données peuvent être utilisées pour générer du contenu dynamique dans la vue.
name: "ExpressJS" : Définit une variable name avec la valeur "ExpressJS".
url: "https://expressjs.com" : Définit une variable url avec la valeur "https://expressjs.com".
Fichier dynamic.pug :
doctype html
html
head
title Dynamic View
body
h1 Hello, #{name}!
p Visit the website:
a(href=url) #{url}
Dans cet exemple de dynamic.pug, #{name} et #{url} sont remplacés par les valeurs passées depuis le code JavaScript.
Voici une explication ligne par ligne :
html: Ceci génère la balise <html>. Tout ce qui est indenté en dessous sera inclus dans la balise <html>.
head: Ceci génère la balise <head>.
title=name: Ceci génère la balise <title>.
=name : Ceci indique à Pug de remplacer =name par la valeur de la variable name qui a été passée depuis le code JavaScript (dans l'exemple précédent, name était "ExpressJS").
body: Ceci génère la balise <body>.
h1=name: Ceci génère la balise <h1>.
=name : Ceci indique à Pug de remplacer =name par la valeur de la variable name passée depuis le JavaScript.
a(href=url) URL: Ceci génère une balise <a> (lien).
href=url : Ceci définit l'attribut href du lien à la valeur de la variable url passée depuis le JavaScript (dans l'exemple précédent, url était "https://expressjs.com").
URL : Ceci est le texte affiché pour le lien.
Si les variables name et url sont passées avec les valeurs "Oujood" et "https://ww.oujood.com" respectivement, le code HTML généré sera :
<html>
<head>
<title>Oujood</title>
</head>
<body>
<h1>ExpressJS</h1>
<a href="https://ww.oujood.com">URL</a>
</body>
</html>
Ce fichier Pug est conçu pour afficher dynamiquement le titre et le contenu de la page en utilisant les données passées depuis le code JavaScript. Il est particulièrement utile pour créer des pages web qui affichent des informations variables en fonction des données fournies par le serveur.
Oui, si vous recherchez une syntaxe plus concise et lisible. Non, si vous préférez une structure plus proche du HTML.
Exécutez la commande : npm install --save pug puis configurez ExpressJS.
Oui, grâce à la directive include. Exemple :
include ./header.pug
📚 Pour aller plus loin, consultez la documentation officielle de Pug.