DÉVELOPPEMENT WEB

AVANCÉE

EXPRESS
Chapitre 3 : Développement du backend
Enseignant :
Mohamed Amine Ben Rhouma
2023/2024
PRÉSENTATION
● Express est le framework NodeJS le plus populaire.

● Pour l’installer dans le dossier racine du projet, il suffit de taper :

npm install express

● Vous pouvez vérifier le bon déroulement de l’installation dans le dossier

node_modules.

● Ce module permet d'accéder au serveur Node en utilisant des URL au

format REST.
● Ce format permet de masquer l'implementation de l'action en adoptant une syntaxe orientée
données.
AVANTAGES
Ce qui a fait la popularité d’Express, c’est qu’il permet de :
● Fixer les propriétés classiques d’un serveur

● Faciliter la gestion des routes

● Intégrer des moteurs de rendu des vues

● S’appuyer sur des middlewares qui peuvent s’insérer dans le flux de gestion

des requêtes
 4

RAPPEL DE L’ARCHITECTURE
 5
PREMIÈRE EXÉCUTION
● Créons un nouveau fichier, appelé app.js et testons Express.
● Le code ci-dessous permet de lancer le serveur node sur le port 3000.
● Pour éviter de redémarrer notre application à chaque modification, il est
préférable d’installer le module nodemon via NPM.
METHODS HTTP
❖ A partir de la variable app, on peut accéder à divers méthodes dont les requête HTTP
standards que notre API va réceptionner à partir de notre application front-end.

méthode POST : création des données (create)

méthode GET : accès aux données (read)

méthode PUT/PATCH: modification des données (update)

méthode DELETE : suppression des données (delete)

 7
MIDDLEWARES
❖ Il est possible également de passer par des middlewares pour associer des contrôleurs
aux
routes. C’est même recommandé d’utiliser ces middlewares.

● La méthode use() insère un middleware dans le flux de traitement de la requête

● Syntaxe : app.use([path,] callback)

path précise le chemin auquel s’applique le middleware

callback peut être une « fonction middleware » : function(req, res, next)

req : l’objet requête HTTP, de type Request

res : l’objet réponse HTTP, de type Response
next : fonction callback pour chaîner les middlewares
PRINCIPALES MÉTHODES DE RESPONSE
● res.end() : Termine le processus de la réponse
● res.json() : Envoie une réponse en JSON

res.redirect() : Redirige une request

res.render() : Renvoie une vue

● res.send() : Envoie une réponse qui peut être de différent type

● res.sendFile() : Envoie un fichier
● res.status() : Envoie le code de la réponse

▸
RETOUR À NOTRE API
les middlewares sont exécutés de manière séquentielle.
▸

Ainsi, nous créons un dossier routes (endpoints), où on spécifie les routes

▸
que notre API va gérer, et un dossier controllers, où on implémente les
méthodes associées à ces routes.
MIDDLEWARE CORS
Un middleware peut également être utilisé pour régler le problème du
▸
CORS (Cross-Origin Resource Sharing)

Ce middleware consiste à ajouter des en-têtes HTTP afin de permettre à un client

▸
d'accéder à des ressources d'un serveur situé sur une autre origine que le client.
BODY-PARSER
Pour traiter une requête POST avecExpress, nous avons besoin
▸
d’ajouter un autre middleware, le body-parser, à partir d’Express.
body-parser permet d’extrairele corps (body) contenuedans une
▸ requête et l’exposer dans req.body.
Plus la peine d’installer body-parser, puisqu’il est inclus dans Express
depuis quelques années maintenant.
 BODY-PARSER
Le module body-parser parse les données envoyées qu’il soient à
▸
partir d’un formulaire HTML.

La propriété extended, qui est par défaut égal à false permet de lire
▸
les nested objets à partir d’un formulaire.

ou dans notre cas, à partir d’un JSON

▸
MongoDB
C’est une base de données orientée documents.
Contrairement à une base de données relationnelle, une BDOD garde un ensemble de
collections (tables) composées d’un ensemble de documents (lignes).

Un document n’est rien d’autre qu’un objet JSON. En réalité cet objet JSON sera stocké en
tant qu’objet BSON (Binaire).

{
_id: 5abe492a8cbadb22dc80ab54 "nom":
"iPhone X",

"prix": 1159

}
MongoDB: Schéma
Contrairement à une base de données relationnelle le
schéma n’est pas fixé à l’avance.
Une même collection peut contenir différents documents (objets) de structure
différentes.
{
_id: 5abe492a8cbadb22dc80ab54 "nom":
"iPhone X",
"prix": 1159

}
{
_id: 4afe3fe83611502135847759
"nom": "iPhone X", "description": "Dernier
iPhone"
}
MongoDB vs DB relationnelle
Une des plus grandes différences est que dans MongoDB il n’y a pas de clés
étrangères ou de jointures.

Cependant, il est possible à un document JSON d’inclure un autre document JSON

mais il ne peut pas le référencer.

Évidemment, il est toujours possible de référencer un autre document à travers son

_id, mais il faudra le faire manuellement.

MongoDB est ce qu’on appelle une base de données

NoSQL.
MongoDB
Une fois mongoDB installé, il faudra le lancer depuis le terminal:

$ mongod

Le serveur sera donc lancé et écoutera sur le port 27017.

Afin d'interagir avec le serveur, il est possible d’utiliser le client mongo depuis le
terminal:

$ mongo
Commandes shell MongoDB
> show dbs

Affiche toutes les bases de données.

> use NomBD

Passer de la BD courante à la BD NomBD.

> show collections

Affiche les collections de la BD courante.

INTÉGRER MONGOOSE
● Après avoir installer le module Mongoose, notre application Express peut désormais se connecter à
notre base de données MongoDb à travers la méthode connect().

● Cette méthode prend en argument l’adresse de la BD, ainsi qu’un objet d’arguments
useNewUrlParser et useUnified Topology.

● connect() retourne une promesse (promise). En cas donc de connexion réussie à la

BD, l’application est lancé sur le port 3000.
 1
4
ROUTES
Un router :

est créé par la méthode Router() de l’objet express

▸

est un middleware dédié à la gestion des routes

▸

se comporte comme une "mini application" (dispose d’une méthode use())

▸

gère les routes pour les différentes requêtes HTTP (GET, POST, ...) →
▸
méthodes get(), post(), etc.
ROUTES
A partir de notre application Angular, nous avons besoin de cinq routes afin
▸
d’écrire et de récupérer les informations nécessaires.
Pour cela, nous utiliserons Router() à partir d’Express.
CONTROLLERS
A présent, il faudra implémenter tous les méthodes associées aux routes.
▸

Chaque méthode est une méthode asynchrone qui prend 3 arguments : req (la
▸
requête réceptionnée), res (le résultat qui va être retourné) et next (qui passera le
relais au prochain middleware)
CONTROLLERS
L’une des bonnes pratiques avec Express et NodeJS, c’est de séparer la gestion des
▸
routes de leur logique de traitement.

Il est donc conseillé de définir un contrôleur pour chaque route dans un dossier
▸
controllers.

Le contrôleur définit et exporte les fonctions de traitement.

▸

Ensuite, le routeur importe le contrôleur pour en utiliser les fonctions.

▸
VALIDATOR
Afin de valider les données reçues par le serveur, nous pouvons utiliser
▸
le module express-validator ou joi, installé via npm.

Nous utilisons ce module de validation pour la gestion de

▸
l’authentification.
 GESTION DES ERREURS
Pour gérer les erreurs qui peuvent être déclenché par express- validator ou mongoose,
▸
nous utilisons un middleware qui permet de retourner le code et la nature des erreurs
déclenchées.
BCRYPTJS
Quand un utilisateur s’inscrit, ilest primordialde crypter son mot de passe avant
▸
de le stocker dans la base de données.

Pour cela, nous utiliserons le module bcryptjs, après l’avoir installé via NPM : npm install -g
▸
bcryptjs

Depuis bcryptjs, la méthode hash se charge de coder le mot de passe et retourne une
▸
promesse avec le résultat.
JWT
Un API rest stateless. On peut donc pas utiliser les sessions et donc
▸
sauvegarder les états des applications clientes.

Comme alternative, les API utilisent alors les JSON Web Token (JWT) pour vérifier si
▸
un utilisateur est authentifié ou pas.

Ces JWT sont générés via le module jsonwebtoken que nous devons évidemment
▸
installer via NPM.
ACL
Nous souhaitons interdire les opérations d'écriture (POST, PUT, DELETE) aux utilisateurs
▸
non authentifiés.
Ainsi, nousajoutons un middleware qui vérifie chaque token envoyé avec
▸
ces requêtes.
EJS
EJS : EJS ou Embedded Javascript Templating est un moteur de création de modèles
▸
utilisé par Node.js.
Le moteur de modèles permet de créer un modèle HTML avec un minimum de code.
En outre, il peut injecter des données dans un modèle HTML côté client et produire
le HTML final. EJS est un langage de création de modèles simple utilisé pour générer
un balisage HTML avec du JavaScript simple. Il est également utile d'intégrer du
JavaScript dans une page HTML.
EJS
▸Le comportement par défaut d'EJS est qu'il recherche dans le dossier « vues » les modèles à restituer. Créons donc

un dossier « vues » dans notre dossier de projet de nœud principal et créons un fichier nommé « home.ejs » qui

doit être servi sur certaines requêtes souhaitées dans notre projet de nœud