Node.

js
[Link] est un framework serveur open source.
[Link] vous permet d'exécuter JavaScript sur le serveur.

Amadou Lamine NDIAYE

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 Qu'est-ce que [Link] ?
• [Link] est un environnement de serveur open source
• C’est un runtime Javascript écrit en C++.
• [Link] permet d’interpréter et d’exécuter du code JavaScript sur le serveur
• [Link] est gratuit(open-source) avec une communauté de développeurs active
• [Link] fonctionne sur differentes plates-formes (Windows, Linux, Unix, Mac OS X, etc.)
• Il fournit par défaut un ensemble de bibliothèques pour interagir avec le système
d’exploitation et concevoir des serveurs Web

Exemple
var http = require('http’);
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/plain'});
[Link]('Hello World!');
}).listen(8080);

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 Qu'est-ce que [Link] ?

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 Qu'est-ce que [Link] ?
NodeJS en ligne de commande
Lancer node sans spécifier de fichier en argument le démarre une boucle REPL (Read-Eval-
Print-Loop).
$ node
> let i = 0
undefined
> i++
0
> i
1

NodeJS avec des scripts

NodeJS peut également être utilisé à travers des scripts. Pour le lancer, il suffit simplement
d'exécuter node en spécifiant le fichier à exécuter en argument.
node [Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 Pourquoi [Link]?
[Link] utilise la programmation asynchrone !
Une tache courante pour un serveur Web peut être d'ouvrir un fichier sur le serveur et de
renvoyer le contenu au client.
Voici comment PHP ou ASP gère une demande de fichier :
1. Envoie la tache au système de fichiers de l'ordinateur.
2. Attend pendant que le système de fichiers s'ouvre et lit le fichier.
3. Renvoie le contenu au client.
4. Prêt à traiter la prochaine demande.
Voici comment [Link] gère une demande de fichier :
1. Envoie la tache au système de fichiers de l'ordinateur.
2. Prêt à traiter la prochaine demande.
3. Lorsque le systeme de fichiers a ouvert et lu le fichier, le serveur
renvoie le contenu au client.
dernière modification 22/11/2023 © ISEP-2024 alndiaye 5
 Pourquoi [Link]?
[Link] utilise la programmation asynchrone !
[Link] élimine l'attente et continue simplement avec la requête suivante.
Une boucle d’événements, appelée aussi EVENT LOOP NodeJS, permettant d’exécuter
plusieurs opérations simultanées de façon asynchrone et non bloquante en tirant profit des
multiples fils d’exécution (multithreading) des noyaux des processeurs modernes
[Link] exécute une programmation asynchrone a un seul thread, non bloquante, qui est
très économe en mémoire.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 Que peut faire [Link]?
• [Link] peut générer du contenu de page dynamique
• [Link] peut créer, ouvrir, lire, écrire, supprimer et fermer des fichiers sur le serveur
• [Link] peut collecter des données de formulaire
• [Link] peut ajouter, supprimer, modifier des données dans votre base de données

• Ainsi [Link] peut être utilisé pour:

• Des applications Web
• Outils de ligne de commande
• Applications de bureau
• Applications IoT (Node-RED)

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 Qui utilise [Link]?
• Paypal – De nombreux sites au sein de Paypal ont également commencé la
transition vers [Link].
• LinkedIn - LinkedIn utilise [Link] pour alimenter ses serveurs mobiles, qui
alimentent les produits iPhone, Android et Web mobile.
• Mozilla a implémenté [Link] pour prendre en charge les API de navigateur
qui compte un demi-milliard d'installations.
• Ebay héberge son service d'API HTTP à l'aide de [Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 Démarrer avec [Link]
Pour créer une application utilisant [Link], vous devez commencer par installer [Link] sur
votre système en suivant les étapes suivantes:
• Télécharger le programme d’installation
• Installer [Link] et npm
• Vérifier la version de [Link] et npm

Télécharger [Link]
Téléchargez le programme d'installation Windows depuis le site officiel de NodeJs . Assurez-
vous d'avoir téléchargé la dernière version de NodeJs. Il inclut le gestionnaire de paquets NPM.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 9

 Démarrer avec [Link]
Installer [Link] et NPM.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 Démarrer avec [Link]
Vérifier la version de [Link] et NPM.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 Démarrer avec [Link]
Commencer
Une fois que vous avez télécharge et installe [Link] sur votre ordinateur, essayons d'afficher
"Hello World" dans un navigateur Web.
Exemple
/* [Link] */
var http = require('http’);
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link]('Hello World!');
}).listen(8080);

Démarrez votre interface de ligne de commande, écrivez node [Link] et appuyer sur Entrée

Maintenant, votre ordinateur fonctionne comme un serveur !

Démarrez votre navigateur et saisissez l'adresse : [Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 [Link] Modules
Qu'est-ce qu'un module dans [Link]?
Un module en [Link] est une encapsulation logique de code en une seule unité.
Les modules sont considérés comme des bibliothèques JavaScript.
Un ensemble de fonctions que vous souhaitez inclure dans votre application.
[Link] dispose d'un ensemble de modules intégrés que vous pouvez utiliser sans installation
supplémentaire. Les modules sont des fonctionnalités réutilisables.

Nous avons 3 types de modules en [Link] à savoir:

• Les modules natifs ou modules intégrés(http – os – fs – url – path – …)
• Les modules personnalisés
• Les modules npm
dernière modification 22/11/2023 © ISEP-2024 alndiaye 1
 [Link] Modules
Modules intégrés(1)
[Link] possede un ensemble de modules intégrés que vous pouvez utiliser sans aucune autre
installation. Consultez la référence des modules intégrés pour une liste complète.

Inclure les modules

Pour inclure un module, utilisez la fonction require () avec le nom du module. Ci-dessous un
exemple avec le module http qui permet de créer un serveur:

Exemple
Const http = require('http');
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link]('Hello World!');
}).listen(8080);

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 [Link] Modules
Créez vos propres modules – les modules personnalisés(2)
Vous pouvez créer vos propres modules, et les inclure facilement dans vos applications.
L'exemple suivant crée un module qui retourne une date:

Exemple
Créer un module qui retourne la date et l'heure:
[Link] = function () {
return Date();
};

Utilisez le mot - clé exports pour rendre les propriétés et les méthodes disponibles en dehors du
fichier du module. Enregistrez le code ci-dessus dans un fichier appelé « [Link] »

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 [Link] Modules
Inclure votre propre module
Maintenant, vous pouvez inclure et utiliser le module dans l'un de vos fichiers [Link].
Exemple
var http = require('http');
var dt = require('./myfirstmodule');
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link]("The date and time are currently: " + [Link]());
[Link]();
}).listen(8080);

Notez que nous utilisons ./pour localiser le module, cela signifie que le module est situé dans le
même dossier que le fichier [Link]. Enregistrez le code ci-dessus dans un fichier appelé «
demo_module.js », et lancer le dossier:

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 [Link] Modules NPM: Node Package Manager
Qu'est-ce que NPM?
NPM est un gestionnaire de paquets pour les paquets [Link] ou modules si vous le souhaitez.
[Link] accueille des milliers de paquets gratuits à télécharger et à utiliser.
Le programme de NPM est installé sur votre ordinateur lorsque vous installez [Link]
NPM est déjà prêt à fonctionner sur votre ordinateur!
C’est un outil en ligne de commande qui vous permet de facilement installer des packages écrits
en Javascript et compatibles avec NodeJS

Qu'est-ce qu'un paquet?

Un paquet dans [Link] contient tous les fichiers dont vous avez besoin pour un module.
Les modules sont les bibliothèques JavaScript que vous pouvez inclure dans votre projet.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 NPM: Node Package Manager
$ npm install <package-name>[--save] [-g] [--save-dev]
$ npm install <pkg-1> <pkg-2> <pkg-3>
$ npm uninstall <package-name>
$ npm update <package-name>
$ npm search <package-name>………………………………………etc

Télécharger un paquet
Le téléchargement d'un paquet est très facile.
Ouvrez l'interface de ligne de commande et dire NPM télécharger le paquet que vous voulez.
Je veux télécharger un paquet appelé « majuscules »:
npm install upper-case
Maintenant que vous avez téléchargé et installé votre premier paquet!
NPM crée un dossier nommé « node_modules », où le paquet sera placé. Tous les paquets que
vous installez à l'avenir seront placés dans ce dossier.
Mon projet a maintenant une structure de dossiers comme celui-ci:
C:\Users\My Name\node_modules\upper-case

dernière modification 22/11/2023 © ISEP-2024 alndiaye 1

 NPM: Node Package Manager
Les fichiers [Link] et [Link]
{
"name": "nodeapp",
"version": "1.0.0",
"description": "this is a basic node app",
"main": "[Link]",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"upper-case": "^2.0.2",
"express": "^4.17.2"
},
"devDependencies": {
"nodemon": "^3.1.9"
}
}
dernière modification 22/11/2023 © ISEP-2024 alndiaye 1
 NPM: Node Package Manager
Les fichiers [Link] et [Link]
Le [Link] de votre projet est l'emplacement central pour configurer et décrire comment
interagir avec et exécuter votre application. Il est utilisé par la CLI npm pour identifier votre projet
et comprendre comment gérer les dépendances du projet.

C'est le fichier [Link] qui permet à npm de démarrer votre projet, d'exécuter des scripts,
d'installer des dépendances, de publier dans le registre NPM et de nombreuses autres tâches
utiles.

Quand vous installez un package à l'aide de npm, soudainement un nouveau fichier appelé
[Link] apparaît dans le répertoire de votre projet.

[Link] est un fichier généré par npm. Il permet de verrouiller les dépendances des
packages, ainsi que leurs sous-dépendances.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 NPM: Node Package Manager
Les fichiers [Link] et [Link]
Le [Link] contient de nombreux attributs, mais nous ne nous intéressons
qu'à quelques-uns d'entre eux principaux:
nom : Il s'agit du nom du projet ou du package. C'est un attribut obligatoire
version : Il s’agit de la version du projet. La version doit être composée de 3 parties : MAJOR . MINOR . PATCH
description : Cet attribut fournit une brève description du projet.
dependencies : Ceci est un point important. Dans un projet, vous devrez utiliser de nombreux packages, qui ont déjà
été écrits ; il vous suffit de les exiger. Pour ce faire, vous devez installer le package via NPM .
La propriété dependencies aide NPM à comprendre quels packages installer.
main: champ indique le point d'entrée d'un projet.
scripts: champ définit les commandes de script que vous souhaitez exécuter à différents moments du cycle de vie de
votre projet.
devDependencies: champ répertorie tous les packages dont un projet n'a pas besoin en production, mais dont il a
besoin à des fins de développement et de test locaux.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 NPM: Node Package Manager
L'utilisation d'un paquet
Une fois que le paquet est installé, il est prêt à l'emploi.
Inclure le paquet «upper-case» de la même façon que vous inclure tout autre module:
var uc = require('upper-case’);
Créez un fichier [Link] qui convertira la sortie « Bonjour tout le monde! » en lettres majuscules:
Exemple
var http = require('http');
var uc = require('upper-case');
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link](uc("Hello World!"));
[Link]();
}).listen(8080);
Enregistrez le code ci-dessus dans un fichier appelé « demo_uppercase.js », et lancer le fichier:
Initier demo_uppercase:
C:\Users\Your Name>node demo_uppercase.js

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 NPM: Node Package Manager
Quelques paquets célèbres et utiles
• express
• axios
• body-parser
• lodash
• mongoose
• nodemailer
• passport
• multer
• dotenv
• nodemon, etc…

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 [Link] HTTP Module
Le module HTTP intégré
[Link] dispose d'un module intégré appelé HTTP, qui permet à [Link] de transférer des données
via le protocole de transfert hypertexte (HTTP).
Pour inclure le module HTTP, utilisez la méthode require():
var http = require('http’);

[Link] comme un serveur Web

Le module HTTP peut créer un serveur HTTP qui écoute les ports du serveur et donne une réponse
au client. Utilisez la méthode createServer()pour créer un serveur HTTP:
var http = require('http');
[Link](function (req, res) {
[Link]('Hello World!'); //write a response to the client
[Link](); //end the response
}).listen(8080); //the server object listens on port 8080
dernière modification 22/11/2023 © ISEP-2024 alndiaye 2
 [Link] HTTP Module
[Link] comme un serveur Web
Le module HTTP peut créer un serveur HTTP qui écoute les ports du serveur et donne une réponse
au client. Utilisez la méthode createServer()pour créer un serveur HTTP:
var http = require('http');
[Link](function (req, res) {
[Link]('Hello World!'); //write a response to the client
[Link](); //end the response
}).listen(8080); //the server object listens on port 8080

La fonction passée dans la méthode [Link]() , sera exécutée lorsque quelqu'un tente
d'accéder à l'ordinateur sur le port 8080.

Si vous avez suivi les mêmes étapes sur votre ordinateur, vous verrez le même résultat que
l'exemple: http: // localhost: 8080

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 [Link] HTTP Module
Ajouter un en-tête HTTP
Si la réponse du serveur HTTP est censé être affiché comme HTML, vous devez inclure un en-
tête HTTP avec le type de contenu correct:
Exemple
var http = require('http');
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link]('Hello World!’);
[Link]();
}).listen(8080);

Le premier argument de la méthode [Link]()est le code d'état, 200 signifie que tout est
correct, le second argument est un objet contenant les en- têtes de réponse.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 [Link] HTTP Module
Exemple de serveur basique
/*[Link]*/
const http = require("http");
const hostname = "[Link]";
const port = 3000;
const server = [Link](function (req, res) {
[Link] = 200;
[Link]("Content-Type", "text/plain");
[Link]("Hello World\n");
});

[Link](port, hostname, function () {

[Link]("Server running at [Link] + hostname + ":" + port + "/");
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 [Link] HTTP Module
Comprendre le code
Comme nous avons besoin de http pour créer un serveur http, nous utilisons require('http') et le
transmettons à une variable nommée http.
const http = require("http");

Nous devons également définir le nom d'hôte et le numéro de port, ici nous utilisons localhost, c'est-
à-dire [Link] et le numéro de port 3000 et attribuons cela aux variables hostname et port.
const hostname = "[Link]";
const port = 3000;

Ensuite, nous créons le serveur http en utilisant la méthode createServer.

const server = [Link](function (req, res) {
[Link] = 200;
[Link]("Content-Type", "text/plain");
[Link]("Hello World\n");
});
dernière modification 22/11/2023 © ISEP-2024 alndiaye 2
 [Link] HTTP Module
Comprendre le code
Cela a créé le serveur ainsi qu'une réponse ayant le statusCode: 200, un en-tête Content-Type
de texte brut et se terminant par la chaîne Hello World. Il s'agit de la réponse que le serveur
peut envoyer au navigateur. La fonction a deux paramètres req et res qui sont respectivement
la requête et la réponse au serveur.
Nous avons créé le serveur, il ne nous reste plus qu'à lui attribuer un nom d'hôte et un numéro
de port.
[Link](port, hostname, function () {
[Link]("Server running at [Link] + hostname + ":" + port + "/");
});
Exécutez maintenant le fichier [Link] dans le terminal à l'aide de la commande node server.
Ici, le serveur écoute localhost sur le port 3000 et affiche « Serveur exécuté sur
[Link] » dans l'invite de commande. Ouvrez un navigateur et saisissez l'URL
[Link] . Le navigateur affichera le message Hello World à l'écran.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 2

 [Link] HTTP Module
Lire la chaîne de requête
La fonction passée dans la [Link]() présente un argument req qui représente la
demande du client, comme un objet (objet [Link]).
Cet objet a une propriété appelée « url » qui détient la partie de l'URL qui vient après le nom
de domaine:

var http = require('http');

[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
[Link]([Link]);
[Link]();
}).listen(8080);

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 [Link] Module URL
Le module URL intégré
Le module URL divise une adresse Web en parties lisibles.
Pour inclure le module d'URL, utilisez la require() méthode:
var url = require('url');
Analysez une adresse avec la méthode [Link]() et elle renverra un objet URL avec chaque partie
de l'adresse comme propriétés : Par exemple :

Exemple
var url = require("url");
var adr = "[Link]
var q = [Link](adr, true);

[Link]([Link]); //'localhost:8080'
[Link]([Link]); //'/[Link]'
[Link]([Link]); //'?year=2017&month=february'

var qdata = [Link]; //{ year: 2017, month: 'february' }

[Link]([Link]); //'february'
dernière modification 22/11/2023 © ISEP-2024 alndiaye 3
 [Link] Module URL
Diviser la chaîne de requête
Il existe des modules intégrés pour diviser facilement la chaîne de requête en parties lisibles,
telles que le module URL.
Exemple
Diviser la chaîne de requête en parties lisibles:
var http = require('http');
var url = require('url');
[Link](function (req, res) {
[Link](200, {'Content-Type': 'text/html'});
var q = [Link]([Link], true).query;
var txt = [Link] + " " + [Link];
[Link](txt);
}).listen(8080);

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 [Link] Module système de fichiers
[Link] en tant que serveur de fichiers
Le module de système de fichiers [Link] vous permet de travailler avec le système de fichiers
sur votre ordinateur.
Pour inclure le module de système de fichiers, utilisez la méthode require():
var fs = require('fs’);
L'utilisation courante du module système de fichiers est:
• Lire les fichiers
• Créer des fichiers
• Mettre à jour de fichiers
• Supprimer des fichiers
• Renommer des fichiers

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 [Link] Module système de fichiers
Lire les fichiers
La méthode [Link]() est utilisée pour lire les fichiers sur votre ordinateur.
Supposons que nous avons le fichier HTML suivant ([Link] situé dans le même dossier que
[Link]):
<html>
<body>
<h1>My Header</h1>
<p>My paragraph.</p>
</body>
</html>
Créez un fichier [Link] qui lit le fichier HTML, et renvoie le contenu.
Exécutez le fichier ci-dessous et voyez le résultat.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 [Link] Module système de fichiers
Lire les fichiers
/*[Link]*/
const http = require('http');
var fs = require('fs');

const hostname = '[Link]';

const port = 3000;

const server = [Link](function (req, res) {

[Link]('[Link]', function (err, data) {
[Link](200, { 'Content-Type': 'text/html' });
[Link](data);
return [Link]();
});
});

[Link](port, hostname, function () {

[Link]('Server running at [Link] + hostname + ':' + port + '/');
});
dernière modification 22/11/2023 © ISEP-2024 alndiaye 3
 [Link] Module système de fichiers
Création de fichiers
Le module système de fichiers a des méthodes pour créer de nouveaux fichiers:
• [Link]()
• [Link]()
• [Link]()

La méthode [Link]() ajoute le contenu spécifié dans un fichier. Si le fichier n'existe pas, le
fichier sera créé: Créez un nouveau fichier à l'aide de la méthode appendFile() :

Exemple
var fs = require("fs");

[Link]("[Link]", "Hello content!", function (err) {

if (err) throw err;
[Link]("Saved!");
});
dernière modification 22/11/2023 © ISEP-2024 alndiaye 3
 [Link] Module système de fichiers
Création de fichiers
La méthode [Link]() prend un « flag » comme second argument, si le flag est « w » pour « writing
», le fichier spécifié est ouvert pour l'écriture. Si le fichier n'existe pas, un fichier vide est créé :
Créez un nouveau fichier vide en utilisant la méthode open() :

Exemple
var fs = require("fs");

[Link]("[Link]", "w", function (err, file) {

if (err) throw err;
[Link]("Saved!");
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 [Link] Module système de fichiers
Création de fichiers
La méthode [Link]() remplace le fichier et le contenu spécifiés s'ils existent. Si le fichier
n'existe pas, un nouveau fichier contenant le contenu spécifié sera créé :
Créez un nouveau fichier en utilisant la méthode writeFile() :

Exemple
var fs = require("fs");

[Link]("[Link]", "Hello content!", function (err) {

if (err) throw err;
[Link]("Saved!");
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 [Link] Module système de fichiers
Mise à jour des fichiers
Le module de système de fichiers a des méthodes pour la mise à jour des fichiers:
• [Link]()
• [Link]()
La méthode [Link]()ajoute le contenu spécifié à la fin du fichier spécifié:
Ajoutez « Ceci est mon texte » à la fin du fichier « [Link] » :

Exemple
var fs = require("fs");

[Link]("[Link]", " This is my text.", function (err) {

if (err) throw err;
[Link]("Updated!");
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 3

 [Link] Module système de fichiers
Mise à jour des fichiers
La méthode [Link]() remplace le fichier et le contenu spécifiés : Remplacez le contenu du
fichier « [Link] » :

Exemple
var fs = require("fs");

[Link]("[Link]", "This is my text", function (err) {

if (err) throw err;
[Link]("Replaced!");
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link] Module système de fichiers
Supprimer les fichiers
Pour supprimer un fichier avec le module de système de fichiers, utilisez la méthode [Link]().
La méthode [Link]() supprime le fichier spécifié:
Supprimer «[Link] » :

Exemple
var fs = require('fs');
[Link]('[Link]', function (err) {
if (err) throw err;
[Link]('File deleted!');
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link] Module système de fichiers
Renommer des fichiers
Pour renommer un fichier avec le module de système de fichiers, utilisez la méthode [Link]().
La méthode [Link]() renomme le fichier spécifié:

Exemple
Renommer "[Link]" à "[Link]":
var fs = require('fs’);
[Link]('[Link]', '[Link]', function (err) {
if (err) throw err;
[Link]('File Renamed!');
})

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link] Module système de fichiers
[Link] Serveur de fichiers
Maintenant, nous savons comment analyser la chaîne de requête, et dans le chapitre précédent,
nous avons appris comment faire [Link] se comporter comme un serveur de fichiers. Laissez-
nous combiner les deux, et servir le fichier demandé par le client.
Créez deux fichiers html et les enregistrer dans le même dossier que vos fichiers [Link].

[Link]
[Link]
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<body> <h1>Winter</h1>
<h1>Summer</h1> <p>I love the snow!</p>
<p>I love the sun!</p> </body>
</body> </html>
</html>

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link] Module système de fichiers
[Link] Serveur de fichiers
Créez un fichier [Link] qui ouvre le fichier demandé et renvoie le contenu au client. En cas de
problème, affichez une erreur 404 :
/**[Link]*/
var http = require("http");
var url = require("url");
var fs = require("fs");

http
.createServer(function (req, res) {
var q = [Link]([Link], true);
var filename = "." + [Link];
[Link](filename, function (err, data) {
if (err) {
[Link](404, { "Content-Type": "text/html" });
return [Link]("404 Not Found");
}
[Link](200, { "Content-Type": "text/html" });
[Link](data);
return [Link]();
});
})
.listen(8080);
dernière modification 22/11/2023 © ISEP-2024 alndiaye 4
 [Link] Events
Module événements

[Link] dispose d'un module intégré, appelé « Événements », où vous pouvez créer, déclencher et
écouter vos propres événements.
Pour inclure le module Events intégré, utilisez la méthode require(). De plus, toutes les propriétés
et méthodes d'événement sont une instance d'un objet EventEmitter. Pour pouvoir accéder à ces
propriétés et méthodes, créez un objet EventEmitter :

var events = require("events");

var eventEmitter = new [Link]();

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link] Events
L'objet EventEmitter
Vous pouvez affecter des gestionnaires d'événements à vos propres événements avec l'objet
EventEmitter. Dans l'exemple ci-dessous, nous avons créé une fonction qui sera exécutée lorsqu'un
événement « cri » est déclenché. Pour déclencher un événement, utilisez la méthode emit().

Exemple
var events = require("events");
var eventEmitter = new [Link]();

//Create an event handler:

var myEventHandler = function () {
[Link]("I hear a scream!");
};

//Assign the event handler to an event:

[Link]("scream", myEventHandler);

//Fire the 'scream' event:

[Link]("scream");

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link]
[Link] vs [Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link]
[Link] vs [Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 4

 [Link]
Présentation
[Link] est un framework web pour [Link] ayant pour rôle principal le routage et le traitement
d’informations. Ses caractéristiques principales sont:

• permet de fixer les propriétés classiques d’un serveur

• facilite la gestion des routes. Les routes peuvent être définies à l'aide de méthodes HTTP et de
modèles d'URL.
• s’appuie sur des fonctions middlewares qui peuvent s’insérer dans le flux de gestion des
requêtes. Ces fonctions peuvent effectuer diverses tâches telles que l'exécution du code, la
modification des objets demande et réponse, la fin du cycle demande-réponse et l'appel de la
fonction intergicielle suivante.
• prend en charge divers moteurs de modèles tels que Pug, EJS et Handlebars, qui vous
permettent de générer des balises HTML avec du simple JavaScript.

• propose une fonction intermédiaire intégrée, [Link], pour servir des fichiers statiques
tels que des images, des fichiers CSS et des fichiers JavaScript.
dernière modification
22/11/2023 © ISEP-2024 alndiaye 4
 [Link]
Installation
Le processus d’installation est disponible dans la documentation officielle de [Link]
[Link]
npm install express –save

Utilisation
const express = require('express');
const app = express();

const port = 3000;

[Link]('/', (req, res) => {

[Link]('Hello World!');
});

[Link](port, () => {
[Link](`Express server listening on port ${port}`);
});
dernière modification 22/11/2023 © ISEP-2024 alndiaye 5
 [Link]
Objets de requête et de réponse [Link]
Les objets Request et Response d'[Link] sont les paramètres de la fonction de rappel utilisée
dans les applications Express.

•L' objet de requête [Link] (req) représente la requête HTTP et possède des propriétés pour la
chaîne de requête, les paramètres, le corps, les en-têtes HTTP, etc.

•L' objet de réponse (res) spécifie la réponse HTTP envoyée par une application Express lorsqu'elle
reçoit une requête HTTP.
[Link]('hello world');
[Link](404).end();
[Link](404).send('product not found.');
[Link](json_object);
[Link](301, '[Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 5

 [Link]
Méthode HTTP(Hypertext Transfer Protocol)
Les méthodes HTTP (Hypertext Transfer Protocol) sont des verbes qui définissent l'action à
effectuer sur une ressource identifiée par une URL. Chaque méthode a un but spécifique et est
utilisée pour effectuer diverses opérations sur les serveurs web.

• GET : permet de demander des données à une ressource spécifiée. Elle est utilisée pour récupérer des données sur
le serveur.

• POST : permet de soumettre des données à traiter à une ressource spécifiée. Elle est généralement utilisée pour
créer de nouvelles ressources sur le serveur.

• PUT : permet de mettre à jour une ressource spécifiée avec les données fournies. Elle est utilisée pour mettre à jour
des ressources existantes ou en créer de nouvelles si elles n'existent pas.

• DELETE : permet de supprimer la ressource spécifiée. Elle est utilisée pour supprimer des ressources du serveur.

• PATCH : permet d'appliquer des modifications partielles à une ressource. Elle est utilisée pour mettre à jour une
partie des données d'une ressource.
dernière modification 22/11/2023 © ISEP-2024 alndiaye 5
 [Link]
Routage
Le format principal du routage sur un objet ExpressJS est le suivant :
[Link](PATH, (REQ, RES, NEXT))
Optionnel, il désigne le middleware à appeler
Paramètres d'entrée (request) et de sortie (response)
Chemin dans l'URL (si vide, la route s'applique à toute les requêtes
Méthode : get, post, put, delete et all

/**methode classique */
[Link]('/etudiants', function (req, res, next) { })
[Link]('/etudiants', function (req, res, next) { })
[Link]('/etudiants', function (req, res, next) { })

/**methode groupee ou enchainee */

[Link]('/etudiants')
.get(function (req, res, next) { })
.post(function (req, res, next) { })
.put(function (req, res, next) { })
dernière modification 22/11/2023 © ISEP-2024 alndiaye 5
 [Link]
Routage
Routage et route par défaut
Pour qu'un routage s'applique quel que soit le chemin, il suffit de déclarer une chaîne vide dans le
chemin comme dans l’exemple suivant:
[Link]('', function (req, res, next) { })

Routage et pages introuvables(404)

Pour qu'un routage s'applique si une page est introuvable(erreur 404 ou notFound), il faut rajouter
le code suivant à la fin de toutes les déclarations de routes:
[Link](function (req, res, next) {
[Link]('Content-Type', 'text/plain')
[Link](404).send('Page introuvable !')
})

dernière modification 22/11/2023 © ISEP-2024 alndiaye 5

 [Link]
Routage
Routage et paramètres
Pour qu'un routage soit dynamique, c’est dire contient des variables, on utilise un alias dans la
route par exemple :idEtudiant

Exemple
[Link]('/etudiants/:idEtudiant', function (req, res) {
const { method, url, query, params } = req;
[Link](method + ' - ' + url);
[Link](query); // objet
[Link](params); // objet
[Link]('Content-Type', 'text/plain');
[Link]("Vous récupérez l'étudiant ayant l'ID " + [Link]);
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 5

 [Link]
Routage
Ordre de déclaration des routes
L’ordre de déclaration des routes est important. Toujours mettre le chemin racine en dernier.
[Link]('/products', (req, res) => {
[Link]('products list');
});

[Link]('/', (req, res) => {

[Link]('hello world');
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 5

 [Link]
Middleware
Pour utiliser les middlewares ou bien créer les vôtres, il faut indiquer à [Link] leur nom et leurs
paramètres.
[Link]( (REQ, RES, NEXT) )

Fonction de traitement
Fonction suivante(middleware)
Le next est une fonction du routeur Express qui exécute le middleware succédant au middleware
actuel.

Exemple
/**[Link] */
[Link] = function (req, res, next) { [Link]("Hello") };

/**[Link] */
const maBibliotheque = require('./[Link]');
[Link]('/someUri', myFunction, [Link]);
dernière modification 22/11/2023 © ISEP-2024 alndiaye 5
 [Link]
TP1

Créer un serveur qui permet de faire le CRUD des étudiants:

• Avec un tableau d’étudiants
• Avec un fichier JSON contenant des étudiants

dernière modification 22/11/2023 © ISEP-2024 alndiaye 5

 [Link]
Base de données SQL: MySql
Présentation
Avec [Link], on peut communiquer avec une BD relationnelle comme par exemple PostgreSQL
ou MySQL. Nous allons utiliser MySQL pour cette partie du cours

Installation
/**installation du module mysql */
npm install mysql2

Utilisation
/**utilisation du module mysql */
const mysql = require('mysql2');

dernière modification 22/11/2023 © ISEP-2024 alndiaye 5

 [Link]
Base de données SQL: MySql
Connexion à la base de données et envoie de requête à la BD

const mysql = require('mysql2');

const myBDD = [Link]({
host: "localhost",
user: "yourusername",
password: "yourpassword",
database: "mydb"
});

[Link](function (err) {
if (err) throw err;
[Link]('Connected!');
let requeteSQL = ' à définir ';

[Link](requeteSQL, function (err, result) {

if (err) throw err;
[Link](result);
});
});
dernière modification 22/11/2023 © ISEP-2024 alndiaye 6
 [Link]
Base de données SQL: MySql
Exemple

• La requête SQL pourra être :

• Une création de BD
• Une création / modification / suppression de table (create, alter drop)
• Un ajout / modification / suppression de données dans la table (insert, update, delete)
• Une consultation des données (select)
• La requête SQL est conforme à la syntaxe MySQL.

Les exemples ci-dessous permettent de montrer quelques cas.

Ils permettent aussi de voir comment intégrer des variables dans les requêtes

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
Base de données SQL: MySql
Exemple – Création d’une base de données
/**[Link] */
var mysql = require('mysql2');

var con = [Link]({

host: "localhost", user: "yourusername",
password: "yourpassword"
});

[Link](function (err) {
if (err) throw err;
[Link]("Connected!");
[Link]("CREATE DATABASE mydb", function (err, result) {
if (err) throw err;
[Link]("Database created");
});
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
Base de données SQL: MySql
Exemple – Création d’une table
/**[Link] */
var mysql = require('mysql2');

var con = [Link]({

host: "localhost",
user: "yourusername",
password: "yourpassword",
database: "mydb"
});

[Link](function (err) {
if (err) throw err;
[Link]("Connected!");
var sql = "CREATE TABLE customers (name VARCHAR(255), address VARCHAR(255))";
[Link](sql, function (err, result) {
if (err) throw err;
[Link]("Table created");
});
});
dernière modification 22/11/2023 © ISEP-2024 alndiaye 6
 [Link]
Base de données SQL: MySql
Exemple – Insérer dans la table
/**[Link] */
var mysql = require('mysql2');
var con = [Link]({
host: "localhost",
user: "yourusername",
password: "yourpassword",
database: "mydb"
});

[Link](function (err) {
if (err) throw err;
[Link]("Connected!");
var sql = "INSERT INTO customers (name, address) VALUES ('CompanyInc', 'Highway 37')";
[Link](sql, function (err, result) {
if (err) throw err;
[Link]("1 record inserted");
});
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
Base de données SQL: MySql
Exemple – Sélection d’une table
/**[Link] */
var mysql = require('mysql2');
var con = [Link]({
host: "localhost",
user: "yourusername",
password: "yourpassword",
database: "mydb"
});

[Link](function (err) {
if (err) throw err;
[Link]("SELECT name, address FROM customers WHERE address LIKE 'S%'", function (err, result) {
if (err) throw err;
[Link](result);
});
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
API RESTful
Qu'est-ce qu'une API
API (Application Programming Interface) est un ensemble de règles permettant à deux applications
de communiquer entre elles.
Une API agit comme un intermédiaire entre différentes applications.

Exemple simple d'API :

Imaginez une API comme un serveur dans un restaurant :
• Le client (Frontend) : commande un plat.
• Le serveur (API) : prend la commande et la transmet à la cuisine.
• La cuisine (Backend / Base de données) : prépare le plat et l'envoie via le serveur.
• Le client reçoit son plat (les données demandées).

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
API RESTful
Architecture d’une API

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
API RESTful
Qu'est-ce qu'une API REST

Il existe différents types d'architectures d'API parmi lesquelles nous avons API REST, SOAP,
GraphQL, XML-RPC et JSON-RPC . Le type d'architecture d'API le plus populaire est l'API REST.

Une API RESTful suit des principes spécifiques pour garantir la flexibilité et la compatibilité des
applications jouant ainsi un rôle important pour assurer une communication fluide entre le client
et le serveur

Une API REST suit une architecture client-serveur basée sur HTTP.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
API RESTful
Principes clés d'une API REST

Stateless (Sans état) : Chaque requête contient toutes les informations nécessaires (pas de
session côté serveur).
Utilisation des Méthodes HTTP: GET, POST, PUT, DELETE
Utilisation des Ressources (URL claires et structurées)
Format JSON pour l'échange de données

dernière modification 22/11/2023 © ISEP-2024 alndiaye 6

 [Link]
API RESTful
Création d'une API REST avec [Link] et Express
/** [Link] */
const express = require('express');
const app = express();
[Link]([Link]()); // Permet de lire du JSON

let etudiants = [ { id: 1, nom: 'Alice' }, { id: 2, nom: 'Bob' }];

[Link]('/api/etudiants', (req, res) => {
[Link](etudiants);
});
[Link]('/api/etudiants', (req, res) => {
const nouvelEtudiant = { id: [Link] + 1, nom: [Link] };
[Link](nouvelEtudiant);
[Link](201).json(nouvelEtudiant);
});

[Link](3000, () => [Link]('Serveur démarré sur le port 3000'));

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 [Link]
API RESTful
Bonnes pratiques pour une API REST

Acceptez et répondez avec JSON

Utiliser des noms au lieu de verbes dans les chemins de point de terminaison
Nommez les collections avec des noms au pluriel
Utiliser l'imbrication logique sur les terminaux
Utiliser les codes d'état HTTP appropriés
Autoriser le filtrage, le tri et la pagination
Fournir une documentation API précise
Utiliser les méthodes HTTP et les routes API correctement
Gérer les erreurs de manière cohérente
Mettre en place une authentification et une autorisation
Sécuriser les entrées utilisateur pour éviter les injections SQL et XSS
Utiliser un cache pour optimiser les performances
dernière modification 22/11/2023 © ISEP-2024 alndiaye 7
 [Link]
TP2

Créer une API REST pour gérer une bibliothèque de livres:

• GET: Liste des livres
• POST: Ajouter un livre
• PUT: Modifier un livre
• DELETE: Supprimer un livre

NB: utiliser une base de données MySQL

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 [Link]
Moteur de templates EJS
Présentation
EJS est un moteur de templates permettant d’écrire du code HTML dans un fichier qui gère des
variables, des tests et des boucles. L’objectif est de générer un contenu dynamique côté serveur.

Pourquoi utiliser EJS ?

Séparation du code backend et frontend
Plus flexible que du HTML statique
Facile à utiliser avec [Link]

Installation
npm install ejs

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 [Link]
Moteur de template EJS
Utilisation
/** [Link] */
/**..... */
[Link]('view engine', 'ejs');
[Link]('/', (req, res) => {
[Link]('index', { title: 'Accueil' });
});
/**..... */

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 [Link]
Moteur de template EJS
Création et Rendu de Pages EJS
/** [Link] */
<!DOCTYPE html>
<html>
<head>
<title>Accueil</title>
</head>
<body>
<h1>Bienvenue, <%= name %> !</h1>
</body>
</html>

/** [Link] */
[Link]('/', (req, res) => {
[Link]('index', { name: 'Étudiant' });
});

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 [Link]
Moteur de template EJS
Affichage d'une variable
<p>Bonjour, <%= name %> !</p>

Exécuter du code JavaScript

<% if (loggedIn) { %>
<p>Bienvenue, utilisateur connecté !</p>
<% } else { %>
<p>Veuillez vous connecter.</p>
<% } %>

Boucles et conditions
<ul>
<% [Link](item => { %>
<li><%= item %></li>
<% }) %>
</ul>

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 [Link]
Moteur de template EJS
Inclure des Partiels (Templates Réutilisables)
/** [Link]*/
<header>
<h1>Mon Site</h1>
</header>

/** [Link]*/
<% include [Link] %>
<p>Contenu principal...</p>

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 [Link]
TP3

• Créer une page [Link] qui affiche un nom et un âge passés en paramètre.
• Ajouter une boucle pour afficher une liste de tâches dans [Link]
• Créer un fichier [Link] qui contient un header et un footer, puis l'inclure
dans plusieurs pages.

TP4

Créer une application express utilisant ejs pour gérer une collection d'étudiants
(CRUD) avec une base de données MySQL
NB: Implémenter une validation des données

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 EXPOSE N°1
Modèle ou Architecture MVC dans [Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 7

 EXPOSE N°2
Sécurisation des applications [Link]

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 EXPOSE N°3
Création d’une application [Link] permettant d’envoyer des e-mails à une liste de
personne

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 EXPOSE N°4
Création d’une application [Link] pour le chargement et le téléchargement de
fichier

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 EXPOSE N°5
Création et Déploiement d'une application [Link] sur un serveur distant

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 EXPOSE N°6
Création d'une application [Link] de chat en temps réel

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 EXPOSE N°7
Création d'une application [Link] utilisant l’orm SEQUELIZE

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 TP FINAL / 3-4 ETUDIANTS PAR GROUPE
Vous travaillez en tant qu’équipe de développement sur une application web permettant la gestion
de produits pour un commerçant. L’application doit permettre aux utilisateurs de gérer des
produits et les classer par catégorie et de passer une commande en fonction du niveau de stock.

1. Objectifs pédagogiques:

Appliquer l’architecture MVC avec [Link] et [Link].

Gérer une base de données relationnelle avec Sequelize et PostgreSQL/MySQL.
Générer des pages dynamiques avec EJS.
Implémenter l’authentification et la sécurisation des routes.
Gérer le chargement et le téléchargement de fichiers (images des produits).
Déployer l’application sur un serveur distant.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 TP FINAL / 3-4 ETUDIANTS PAR GROUPE
2. Fonctionnalités à implémenter

Gestion des utilisateurs

Gestion des catégories
Gestion des produits
Gestion des commandes
Envoi d’e-mails
Gestion des fichiers
Etc…
Sécurité de l’application
Déploiement de l’application

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 TP FINAL / 3-4 ETUDIANTS PAR GROUPE
3. Critères d’évaluation

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8

 TP FINAL / 3-4 ETUDIANTS PAR GROUPE
4. Consignes de rendu

Chaque groupe devra :

1.Déposer le projet sur GitHub avec un fichier [Link] expliquant l’installation et l’utilisation.
[Link] un lien de déploiement vers l’application en ligne.
[Link]éparer une courte présentation (10 minutes) expliquant leur architecture et démontrant les
fonctionnalités.

dernière modification 22/11/2023 © ISEP-2024 alndiaye 8