Dans cette vidéo en français, le présentateur explique comment créer des vues HTML dynamiques avec le framework Express en utilisant le moteur de template EJS. Après un rappel sur le rôle d’Express (backend/API) et la possibilité d’utiliser des moteurs de template, il montre l’installation du module EJS via npm, la création d’un répertoire `views` et d’un fichier `index.ejs`. Il configure Express avec `app.set('views', ...)` et `app.set('view engine', 'ejs')`, puis remplace la route `send` par `res.render('index')`. Le tutoriel détaille l’insertion de données depuis le serveur vers la vue en passant un objet JavaScript, l’utilisation des balises EJS (`<%= %>` pour l’affichage, `<% %>` pour le code, `<%‑ include %>` pour les inclusions). Il montre comment créer un message de salutation conditionnel selon l’heure du serveur, comment itérer sur un tableau avec `forEach` pour afficher plusieurs lignes, et comment créer un fichier partiel `header.ejs` et l’inclure dans la page principale. Quelques ajustements de style inline sont présentés, avec une mention que la gestion des fichiers statiques sera abordée dans une prochaine séance. La vidéo se conclut par un rappel des différents tags EJS et un lien vers la documentation officielle.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo sur le framework Express. Aujourd'hui, nous allons voir comment créer les vues à travers des pages HTML dynamiques. Mais avant, j'aimerais vous rappeler que Express est principalement un framework qui sert à créer des applications backend et des API. Dans ce cas, on ne parle pas vraiment de vues qui, elles, font plutôt partie du frontend. Donc, la plupart des développeurs préfèrent monter une API avec Express, ensuite ils créent la partie front avec des frameworks comme React ou Angular. Ou encore avec du JavaScript natif en faisant appel à des instances AJAX ou l'API Fetch. Cependant, il est tout à fait possible de tout faire avec Express. C'est-à-dire, créer l'application backend qui alimente directement des pages HTML dynamiques que l'on appelle des vues. Ces vues seront créées à l'aide de ce que l'on appelle des moteurs de template. En l'occurrence Pug et EJS. Le moteur de template Pug dispose d'une syntaxe simple et concise utilisant l'écriture indentée alors que EJS utilise la syntaxe HTML, donc plus familière et conviviale. Aujourd'hui, nous allons utiliser le moteur de template EJS pour créer nos vues et on aura l'occasion d'explorer Pug dans une future vidéo. La première opération consiste à installer le module EJS. On constate que le fichier package.json a été mis à jour et la version 3.1.9 de JS a été installée. Maintenant on va lancer NodeMon puis on ouvre le fichier principal app.js. Il est conseillé de regrouper les vues dans un seul dossier que l'on va créer et qu'on appellera par exemple views. Dedans, on va créer un fichier, par exemple index.html, ou bien on va juste déplacer le fichier que nous avons créé la dernière fois, mais on va le renommer avec l'extension .ejs. On va changer le titre, on mettra page d'accueil. Et à la place de div, on mettra par exemple la balise h2. On va mettre par exemple bonjour à vous. Pour exécuter cette page au sein de notre application, on doit faire quelques petits réglages. La première chose à faire, c'est indiquer à l'application où se trouvent les vues. On mettra donc app.setViews et on spécifie le chemin vers le dossier views qu'on a créé. Et la deuxième opération consiste à indiquer à l'application le moteur de template utilisé, qui est dans ce cas EJS, avec en premier argument viewEngine Et le deuxième argument c'est ejs. Désormais l'application est consciente qu'il va utiliser le moteur de template ejs. On va modifier cette route, à la place de test on mettra index. Mais cette fois la méthode de réponse ne sera pas send ou sendFile mais plutôt render. Render est la méthode que l'on associe au moteur de template, c'est-à-dire qui permet d'afficher un document formaté en HTML. Il suffit de spécifier le chemin vers le fichier de vue. Dans ce cas, c'est index. Pas la peine de spécifier le dossier views parce qu'on l'a déjà fait ici. Alors exécutons. On constate que la page d'accueil a été bel et bien affichée. On peut faire quelques petits réglages sur la page EJS. Par exemple ici, un petit style CSS. On va plutôt utiliser un attribut de style local. Pour utiliser la feuille de style CSS externe, on verra ça dans la séance prochaine parce qu'on a besoin de savoir comment servir ce que l'on appelle les fichiers statiques. On change juste la couleur du titre H1, on mettra par exemple du rouge. Et on constate que ça marche. Maintenant, imaginez que je veux personnaliser le message Bonjour à vous, c'est-à-dire à la place je veux mettre mon nom par exemple. Pour faire ceci, on va aller sur app.js et on va ajouter un deuxième argument qui est un objet littéral JavaScript. Je vais l'appeler par exemple obj que je vais créer avant. Je mettrai par exemple nom et je mets mon nom. Dans ce cas-ci, je veux afficher le nom. Il suffit de se rendre dans le fichier index.ejs et je vais remplacer à vous par un tag spécial que l'on appelle le tag de pourcentage qui s'écrit de cette façon. On met pourcentage égal et encore pourcentage. Et entre les deux, on mettra le message souhaité. Dans ce cas, c'est l'objet obj.nom. N'oubliez pas, l'objet c'est ce qu'on a créé et le nom c'est la clé. Alors exécutons. On constate que le message a changé. Donc là, on parle vraiment d'une page web dynamique parce qu'on peut changer le contenu à travers le serveur. Maintenant, imaginez que je veux aussi personnaliser le message bonjour, c'est-à-dire on écrit soit bonjour ou bien bonsoir selon le moment de la journée. On va faire le test sur day.getHours qui permet de retourner l'heure. Lorsqu'on mettra le message salutations par exemple, on fait un test sur day.getHours. Si Si c'est inférieur à 17 heures, on va écrire bonjour, sinon c'est bonsoir. Là c'est le symbole point d'interrogation. Maintenant on va ajouter notre clé ici, par exemple salutations, et qu'on va donc mettre la variable slText que nous avons déjà créée. On a déjà passé l'objet, il suffit de récupérer la clé salutations sur le fichier ejs1. Donc à la place de bonjour, je peux ouvrir un autre marqueur, sinon je vais juste faire de la concaténation, c'est plus simple. Je mettrai ob.slt concaténé avec espace comme ceci. Exécutons. C'est plutôt salutations, c'est ça la vraie clé. On exécute, ça donne bonjour. Imaginez que j'ai changé la condition, par exemple j'ai mis 10 heures du matin. Maintenant il est presque 13 heures, alors on est censé avoir le message bonsoir. Voilà, ça marche. Maintenant imaginons qu'à la clé nom on va plutôt affecter une liste de valeurs. On mettra par exemple ici un tableau, on mettra juste des valeurs de test, par exemple a, b, c et d. C'est-à-dire on a 4 noms. Maintenant si j'exécute comme ça, j'aurai bonjour A, B, C, D, mais c'est pas ce que je veux afficher. Imaginez par exemple que je veux afficher bonjour A, retour à la ligne, bonjour B, bonjour C, etc. Donc on va se rendre dans le fichier index.ejs et autour de la balise h2, je vais ouvrir un autre tag de cette façon et je vais appliquer l'itérable forEach sur le tableau obj.noms. Comme vous le savez, forEach en JavaScript ça permet d'accéder à chaque élément du tableau et lui fait un traitement particulier. Dans ce cas, l'élément du tableau c'est l'argument x. Le traitement à faire, on va le placer entre des accolades. Maintenant on a ouvert l'accolade ici, mais la fermeture ça sera placé après la balise h2 pour dire que tout ce traitement sera répété autant de fois qu'il y a d'éléments dans le tableau. Maintenant, à la place de obnom, on va juste mettre x. Alors, exécutons. On obtient donc bonjour a, bonjour b, etc. C'est exactement l'effet souhaité. Une dernière chose, imaginez qu'on veut inclure un en-tête à notre page HTML. Alors, on va se rendre dans le dossier views. On va créer un autre fichier qui s'appelle par exemple header.ejs. On mettra juste une balise H1 et dedans on mettra par exemple en-tête ou bien header. On ajoutera un petit bout de code CSS, par exemple on mettra padding 10 pixels et border-bottom solid 1px avec la couleur noire, juste pour appliquer une bordure inférieure à notre titre. Maintenant pour inclure le header à la page EJS, on va encore faire appel au tag pourcentage mais cette fois-ci avec un tiret. Et dedans on va juste mettre include et on spécifie le nom de la page à inclure, toujours sans extension parce que c'est supposé être du EJS. Alors en exécutant, maintenant on obtient notre header. C'est une solution pratique parce que vous aurez probablement besoin de plusieurs pages. Il y a des éléments communs comme l'en-tête, le bas de page ou bien le menu de navigation. Alors au lieu de répéter ces objets à chaque fois sur chacune des pages, on va juste les inclure de cette façon. Alors en guise de rappel, nous avons vu le tag avec pourcentage égal, c'est un output, c'est-à-dire qui permet d'afficher quelque chose sur le navigateur. Le tag avec pourcentage simple, là ça permet de faire un traitement JavaScript ordinaire. Et le tag%-, ça permet d'inclure un fichier externe. Il y a d'autres tags bien entendu, mais vous trouverez tout ça sur le site officiel de EJS dont le lien est le suivant. Donc il y a la documentation qui est assez simple, qui vous permet de faire plein de choses. Dans cette section, vous avez la liste des tags que l'on peut appliquer. Alors j'espère que vous avez maintenant compris comment appliquer un rendu HTML. Merci pour votre attention et à la vidéo prochaine.
