Node.js - 5.12 Créer les pages HTML du site
Jusqu'ici, le serveur renvoyait du contenu HTML factice. Cette leçon remplace ce contenu par de vraies pages, rangées dans un dossier views. Vous créez la boutique et la page d'ajout de produit, avec une barre de navigation commune.
Organiser les fichiers dans un dossier views
Créez un dossier views à la racine du projet. Il contient les pages que le serveur renvoie aux utilisateurs. Le nom du dossier est libre, mais la leçon garde views, qui est aussi la valeur par défaut d'Express.
Le dossier contient deux fichiers : shop.html pour la boutique, visitée à la racine du site, et un fichier pour l'ajout de produit. Cette organisation prépare le passage à une structure de type MVC, où les vues sont séparées du reste du code.
Écrire la page d'ajout de produit
Créez un squelette HTML5 dans Visual Studio Code en tapant html5 puis Entrée. Changez le titre de la page, puis ajoutez une barre de navigation avec deux liens : un vers la boutique et un vers l'ajout de produit.
Le corps de la page contient aussi un formulaire qui envoie les données au serveur. Il utilise la méthode POST et vise la route de publication. Il contient une saisie de texte pour le titre et un bouton de type submit.
- Méthode du formulaire : POST.
- Champ : une saisie de type texte nommée title.
- Bouton : de type submit, pour envoyer le formulaire.
Créer la page boutique
Dans shop.html, la section principale affiche un titre h1 intitulé Mes produits. La liste des produits sera ajoutée plus tard, une fois que le serveur saura gérer les données.
L'en-tête et la navigation restent identiques sur les deux pages. Pour l'instant, le style est absent. La leçon suivante servira ces pages au navigateur, avant de travailler sur le style.
En résumé
Les pages HTML du site sont rangées dans un dossier views. La page d'ajout de produit contient un formulaire POST et une navigation. La page boutique affiche le titre de la liste, qui sera rempli plus tard.
Points clés
- Le dossier views contient les pages renvoyées aux utilisateurs.
- Express utilise views comme dossier par défaut.
- Le formulaire d'ajout de produit utilise la méthode POST.
- L'en-tête et la navigation sont identiques sur les deux pages.
- Le style sera ajouté après la mise en place du service des pages.
Questions fréquentes
Pourquoi ranger les pages dans un dossier views ?
Cela sépare les pages présentées aux utilisateurs du reste du code. Express sait aussi chercher les vues dans ce dossier par défaut.
Pourquoi le formulaire utilise-t-il la méthode POST ?
Parce qu'il envoie des données au serveur pour créer un produit. La méthode POST est celle qui transporte ces données.
Faut-il écrire tout le HTML soi-même ?
La leçon le fait pas à pas. Le code terminé est aussi proposé dans la leçon suivante, pour ceux qui veulent passer cette étape.