Sujet 5

Révisions

2.2 Client / serveur

Où seront normalement effectuées ces opérations ou déclarations?

SELECT * FROM users WHERE id=123
:
Serveur
document.addEventListener
:
Client
p {
color: red;
}
:
Client
$f=file_get_contents('fichier.txt');
:
Serveur
<img alt="photo" src="photo.jpg" />
:
Client

Révisions

2.3 GET/POST

Quelle méthode utiliser ?

Formulaire permettant de payer en ligne
:
POST
Clique sur un bouton pour afficher les 10 commentaire suivants
:
GET
Effectuer une recherche dans un moteur de recherche
:
GET
Ajouter un commentaire dans un forum
:
POST
Effacer un commentaire dans un forum
:
POST

Révisions

2.4 Frontend

Vous faites du développement « frontend ».
Sur quel logiciel s’exécute votre code généralement ?

Navigateur
Regexp: .*(Navigateur|navigatuer|Chrome|Firefox).*/i

Révisions

2.5 Notation raccourcie objet

On a déjà le code suivant:

let prix=123;
let parfum='Chocolat';
let nom='Tom';

Réécrivez ce code en raccourcissant si possible:

let commande={ prix: prix, parfum: parfum, client: nom };

let commande={prix,parfum,client:nom};
Regexp: (let +commande *= *|)\{ *prix *, *parfum *, *client *: *nom *,? *\} *(;|)
let commande={prix,parfum,client};
Regexp: (let +commande *= *|)\{ *prix *, *parfum *, *client *,? *\} *(;|) :
Vous êtes sur la bonne voie.
Indice: Quand peut-on raccourcir ?

Révisions

2.6 Rendre la main

...
<body>
    <script>
        console.log('A');
        document.addEventListener('click',()=>console.log('C'));
        console.log('B');
    </script>
</body>
...

Où est-ce que le navigateur passe son temps entre console.log('B') et console.log('C') ?

boucle d'évènements
Regexp: .*(boucle +(de?|) *('|) *[ée]v[èée]nn?ement(s|)|bouc.*[ée]v[èée].*|even.*loop.*)/i :
Oui, dans la boucle d'événements.
boucle
Regexp: .*boucle.*/i :
Oui, il y a bien « boucle ». Il manque quelque-chose.

Révisions

2.7 Changements successifs

Que verra l'utilisateur ?

<script>
    document.body.style.backgroundColor='red';
    document.body.style.backgroundColor='green';
    document.body.style.backgroundColor='blue';
</script>

Une page bleue
:
En effet, après que ce <script> soit fini, le navigateur finit de traiter la page HTML, puis il va dans la boucle d'événements puis dans la partie affichage.
Ce n'est qu'alors que la page est affichée.
Une page rouge
Une page verte
Successivement un changement de couleur:
d'abord rouge, puis vert, puis bleu

Révisions

2.8 Défilement

On veut animer une image pour qu'elle défile progressivement de gauche à droite.
Est-ce que ce code marche ?

...
<script>
   let image=document.querySelector('img');
   for(let i=0;i<500;i++){
      image.style.left=i+'px';
   }
</script>
...

Non
:
En effet. Comme pour la question précédente. L'affichage ne se fera qu'après la fin du script. Quand le navigateur sera retourné dans la boucle d'événements, puis dans la partie affichage.
L'utilisateur ne verra donc que l'image à droite.
Oui

Révisions

2.9 addEventListener

...
<script>
   document.addEventListener('click',()=>{console.log('bonjour')});
</script>
...

L'utilisateur clique 10 fois sur la page. Combien de fois est-ce que addEventListener est appelé ?

1
:
En effet, addEventListener ne fait qu'enregistrer la fonction anonyme sur le document. Ceci se fait une seule fois, quand <script> est exécuté au chargement de la page.
Plus tard, chaque fois que l'utilisateur clique, le navigateur appelle la fonction anonyme.

Révisions

2.10 attendre

La fonction attendre renvoie une promesse qui est toujours tenue après une durée de 1000ms

<script>
    console.log('A');
    let p1=attendre();
    let p2=attendre();
    let p3=attendre();
    console.log('B');    
</script>

Combien de temps s'écoule entre console.log('A') et console.log('B') ?

Moins de 10 ms
Autour de 3000 ms
Autour de 1000 ms
Autant qu'il faut, mais pas plus.
:
Hum. Oui, mais précisez un peu. ;-)

Révisions

2.11 attendre

La fonction attendre() renvoie une promesse qui est toujours tenue après une durée de 1000ms

<script>
    console.log('A');
    attendre().then(()=>console.log('ok1'));
    attendre().then(()=>console.log('ok2'));
    attendre().then(()=>console.log('ok3'));
    console.log('B');    
</script>

Combien de temps s'écoule entre console.log('A') et console.log('ok3') ?

autour de 1000 ms
:
En effet, les 3 fonctions attendre sont appelées au chargement de la page, presque au même moment.
Moins de 10ms
autour de 2000 ms
autour de 3000 ms

3. Node.js

3.1 ¤ Node.js

Node.js est un environnement permettant d’exécuter du JS en-dehors du navigateur.

Il peut-être utilisé coté serveur, mais il peut aussi être utilisé dans d'autres contextes, comme la plupart des langages de programmation.

Node.js n’étant pas dans le navigateur, on ne peut pas accéder au DOM.
Par contre, on peut accéder aux fonctionnalités du système, qui ne sont pas disponibles dans le navigateur (pour des raisons de sécurité).
On peut lire et écrire des fichiers, on peut créer des serveurs, on peut créer des processus, on peut accéder à une base de données, etc.

Node.js

3.2 Node.js : questions

Quelles affirmations sont vraies ?

A partir de Node.js, on peut lire un fichier
Dans le navigateur, on peut se connecter sur une base de données MySQL
En Node.js, on peut écrire:
document.body.style.backgroundColor='red';
En Node.js je peux créer un processus pour exécuter un programme comme « ls » qui affiche le contenu d'un répertoire.
Node JS s’exécute dans le navigateur

Node.js

3.3 ¤ Essayons Node.js !

Ouvrez un terminal.

Tapez:

$ node

Vous êtes dans une console, similaire à celle du navigateur!

Essayez des instructions, comme « 1+1 » ou « console.log('Bonjour') »

Node.js

3.4 hello.js

Créez un fichier hello.js

Dans ce fichier écrivez :

console.log('Hello world');

Dans le terminal, executez-le:

$ node hello.js

Node.js

3.5 ¤ Modules JS

Pour pouvoir utiliser des fonctionnalités fournies par différentes librairies, il faut d'abord aller les chercher.
Vous l'avez vu dans d'autres langages: « import » dans python et Java, « include » ou « require » en PHP. «include » en C.

Node.js propose deux manières de le faire:

import: Ce sont les « modules JS ». On peut utiliser cette syntaxe à la fois en Node.js et sur le navigateur. C'est la manière plus récente de faire.
require: C'est une fonctionnalité « Common JS ». C'est encore, pour l'instant, une manière très utilisée de faire.

[Dans ce cours (écrit en 2023), on a choisi d'utiliser « import », parce-que c'est l'approche qui parait avoir le plus d'avenir.]

Exemple d'import:

import * as fs from 'node:fs/promises';

Ceci veut dire :
« importer tout le contenu de la librairie « node:fs/promises » dans un objet qu'on veut appeler « fs » »

node:fs/promises : on veut la version « promises » de la librairie fs qui fait partie de Node.js.
fs veut dire « filesystem ». C'est la librairie permettant de manipuler des fichiers.
Certaines librairies, comme fs, existent en plusieurs versions (synchrone, callback, promesses). Dans ce cours, on utilisera les promesses.

Maintenant, on a l'objet « fs », qui contient plein de foncions. Celle qui nous intéresse est « readFile »:

import * as fs from 'node:fs/promises';

const pass=await fs.readFile('/etc/passwd','utf8');

Remarquez que readFile retourne une promesse. On utilise « await »

Pour pouvoir utiliser import, il faut être dans un « module ». Au lieu d'utiliser des fichiers « .js » (exemple.js) on va utiliser des fichier « .mjs » (exemple.mjs).

Node.js

3.6 import

import * as fs from 'node:fs/promises';

import
:
aller chercher
*
:
on veut tout le contenu
fs (le premier)
:
le nom qu'on a choisit de donner à l'objet qui contiendra tout le contenu
from
:
à partir de
node:
:
Il s'agit d'une librairie intégré à Node.js
fs (le 2e)
:
le nom de la librairie
/promises
:
On veut une version particulière de la librairie

Node.js

3.7 ¤ Node.js asynchrone

Dans Node.js on va utiliser une approche « asynchrone », comme dans le navigateur.
C'est à dire, qu'on ne doit pas bloquer l’exécution du JS.
Toutes les opérations qui prennent du temps (lire un fichier, faire une requête à une base de données, attendre une connexion réseau...), doivent se faire en deux temps:

On lance l'opération en fournissant une fonction qui sera appelée plus tard, quand l'opération sera finie (on appelle cette fonction un « callback »)
Quand l'opération est finie, Node.js appelle notre fonction

Souvent, on peut utiliser des promesses.
Dans ce cas, on peut utiliser async/await pour éviter d'utiliser un callback:

console.log('avant');
const pass=await fs.readFile('/etc/passwd','utf8');
console.log('après');
...

Sans « await », on aurait du écrire:

console.log('avant');
fs.readFile('/etc/passwd','utf8').then(pass=>{ 
   console.log('après');
   ...
});

(Remarque: il est possible en Node.js de faire du code qui n'est pas asynchrone, en utilisant des versions bloquantes de fonctions comme readFile. Cette approche est moins utilisée et elle est incompatible avec les logiciels qu'on verra ici: Express, Vue.js ...)

4. NPM : node package manager

4.1 ¤ NPM : node package manager

Dans l'exemple précédent on a utilisé la librairie 'fs', qui est intégrée à Node.js

En général, on veut aussi utiliser d'autres librairies.
npm est à la fois une commande permettant de gérer des paquets et un répertoire en ligne de paquets qu'on peut installer.
Ce répertoire « npm » fournit plus d'un million de paquets.
Chacun peut y publier ses propres paquets.

NPM : node package manager

4.2 ¤ La commande « npm »

Généralement, pour utiliser npm, vous devez mettre votre logiciel dans un répertoire à lui.
La commande npm s’utilise alors dans ce répertoire.

Elle utilise un fichier « package.json » qui décrit votre logiciel et ses dépendances.
Les dépendances sont les paquets ("librairies") dont votre logiciel a besoin pour fonctionner.

npm fournit de nombreuses sous-commandes. En voici deux:

npm init
npm install nom-paquet

npm init permet de créer le fichier package.json

npm install permet d'installer un paquet. Elle va télécharger le paquet à partir du répertoire npm sur le web et va l'écrire dans un sous-répertoire de votre logiciel appelé « node_modules ». npm install va aussi chercher les dépendances du paquet, et les dépendances des dépendances, etc. Tous ces paquets sont mis dans node_modules. node_modules grossit vite et s'est fait une réputation.
npm install va aussi ajouter dans package.json le nom du paquet installé. Ceci permet de savoir quelle est la liste des dépendances de votre logiciel.
Un fichier package-lock.json est aussi mis à jour. Ce fichier est géré automatiquement, vous n'avez pas à vous en préoccuper. Il enregistre les version précises de chaque paquet utilisé.

NPM : node package manager

4.3 npm

Quelles affirmations sont vraies ?

Les paquets téléchargés par npm peuvent être très nombreux et volumineux
« npm init » crée un fichier appelé package.json
« npm init » télécharge des paquets
:
Non, c'est « npm install » qui télécharge les paquets
les paquets téléchargés par npm sont mis dans un répertoire appelé « packages »
:
Non, ils sont mis dans « node_modules »
Quand vous installez un paquet, un seul paquet est téléchargé
:
Non, en général le paquet a des dépendances. Elles sont téléchargées aussi.
Vous n'avez pas besoin de modifier à la main le fichier package-lock.json
Pour utiliser npm, on doit mettre son logiciel dans un répertoire qui lui est propre.

NPM : node package manager

4.4 Création app

On va créer un petit serveur web avec une librairie appelée « express ».

Créez un répertoire « monserveur » et rentrez dedans.

Quelle commande faut-il taper pour créer package.json ?

npm init
Regexp: npm +init

NPM : node package manager

4.5 package.json

Tapez « npm init » et répondez aux questions (vous pouvez appuyer sur entrée sur toutes).

Regardez le fichier package.json crée.

Quels champs voyez vous dedans ?

author
scripts
dependencies
files
config
version

NPM : node package manager

4.6 Autres fichiers

A part package.json, combien d'autres fichiers ou répertoires voyez vous dans le répertoire de votre logiciel ?
(tapez un nombre)

NPM : node package manager

4.7 Ajouter express

Pour créer notre serveur, on veut utiliser un paquet appelé « express ».

Quelle commande faut-il taper ?

npm install express
Regexp: npm +i(nstall|) +express
npm init
Regexp: npm +init.* :
Non. « npm init » sert à initialiser (démarrer) un nouveau projet.
Ici, votre projet est déjà crée. On veut ajouter un la possibilité d'utiliser le paquet « express »
npm install
Regexp: npm +i(nstall|).* :
Vous êtes sur la bonne voie. Ca commence bien par « npm install »

NPM : node package manager

4.8 Nouveau répertoire

Tapez « npm install express ».

Laissez la commande le temps de s’exécuter.
npm télécharge le paquet express et ses dépendances.

Un nouveau répertoire est crée. Comment s'appelle-t-il ?

node_modules

NPM : node package manager

4.9 Contenu de node_modules

Allez dans node_modules.
Chaque répertoire est un paquet désarchivé.
Il s'agit de « express » et de toutes ses dépendances.

Quels répertoires voyez vous ?

express
etag
apache
mime
methods
babel

NPM : node package manager

4.10 Répertoire express

Allez dans le répertoire « express ».

Vous devriez trouver un fichier « package.json ».
En effet, chacun des paquets est un logiciel npm comme le votre. Il a son propre fichier « package.json »
Lisez le fichier package.json d'express.

Comment s’appelle l'auteur du paquet « express » ?

Holowaychuk
Regexp: .*Holowaychuk.*/i

NPM : node package manager

4.11 express package.json (2)

Lisez le fichier package.json d'express.

On a vu, à une question précédente, que « express » utilisait des paquets comme « mime », « etags », « methods », ...
Essayez de trouver ces noms dans ce package.json.
Comment s'appelle le champs de ce fichier package.json qui liste tous ces paquets ?

dependencies
Regexp: .*depend[ea]ncies.*

NPM : node package manager

4.12 dependencies

Le champs « dependencies » est un objet JSON qui liste tous les noms de paquets dont le paquet dépend, avec des indications sur les numéros de version.

Remontez dans le répertoire de votre logiciel (monserveur).
Lisez votre fichier package.json
Quel est le nom du paquet dans "dependencies" ?

express

NPM : node package manager

4.13 express dans package.json

En effet « express » a été ajouté à la liste des paquets dont dépend votre logiciel.
Quelle commande que vous avez déjà tapé a ajouté « express » à votre package.json ?

npm install express
Regexp: npm +i(nstall|) +express
npm install
Regexp: npm +i(nstall|) :
Presque. « npm install » tout seul ne fait rien.

NPM : node package manager

4.14 "type": "module"

On voudrait utiliser « import ». On a donc besoin d'utiliser un module js.
On a vu qu'on pouvait utiliser l'extension de nom de fichier « .mjs ».
Une autre solution est d'utiliser un fichier « .js » et d'ajouter

  "type": "module"

dans le fichier package.json (attention à bien ajuster les virgules! Le JSON a une syntaxe très stricte)
Quand node exécutera notre fichier « .js », il regardera dans package.json et saura qu'il s'agit d'un module.

Ajoutez la ligne dans package.json

5. Express.js

5.1 Express.js

On a fini la mise en place:

On a crée notre logiciel avec « npm init »
On a installé un paquet appelé « express » avec « npm install express »
On a changé le type dans package.json pour pouvoir utiliser import: « "type": "module" »

On va maintenant écrire un petit serveur web avec Express.

Express est le framework serveur web Node.js le plus utilisé.

Express.js

5.2 ¤ Architecture

Express et PHP ont des architectures très différentes.

PHP

Pour utiliser PHP un logiciel appelé « serveur web » est nécessaire (Apache, NGINX).
Il reçoit les requêtes provenant des navigateurs (http://.../ex1.php, http://.../ex2.php,...)
Il trouve les fichiers PHP correspondants
Il exécute chacune de ces requêtes PHP dans un processus différent

Chaque processus peut durer longtemps (quelques centaines de ms): chaque processus peut s’arrêter en attendant une opération longue (le contenu d'un fichier, le résultat d'une base de données, etc). Le développeur PHP n'a pas besoin de s'occuper de ces attentes. C'est géré automatiquement par le fait qu'il y ait plusieurs processus.

Express.js

Dans Express, il n'y a pas de serveur séparé. Il n'y a qu'un seul processus. Votre programme (app.js) est le serveur.
Les requêtes sont traitées les unes après les autres. Comme le code JS doit être non-bloquant, chaque requête est traitée très rapidement puis rend la main à la boucle d'événements.
S'il y a une opération longue à gérer, le développeur doit utiliser une des techniques de programmation asynchrone (callback, Promise, await).

Pourquoi ?

C'est un problème de performance.
Lancer des processus (ou même réutiliser des processus existants) c'est long.
L'architecture JS est plus rapide. Il n'y a pas de processus à lancer. Le prix à payer est la programmation asynchrone, qui est plus compliquée... même si « await » simplifie beaucoup les choses.

Express.js

5.3 Express / PHP : questions

Quelles affirmations sont vraies ?

Pour utiliser PHP on a besoin d'un serveur web
Pour utiliser Express on a besoin d'un serveur web
En PHP, on peut bloquer l’exécution en attendant le résultat d'une requête à la base de données.
En PHP, on utilise une boucle d'événements
:
Non, la boucle d'événements c’est en JS (Express)
En Express, les requêtes sont traitées successivement, les unes après les autres
En PHP, les requêtes sont exécutées en parallele

Express.js

5.4 app.js

Ouf... beaucoup de théorie... passons express-ément à la pratique !

Dans monserveur, créez le fichier app.js suivant:

import express from 'express';

const app = express();

app.listen(3000, () => {
  console.log('Notre app express écoute sur le port 3000')
});

app.get('/', (requete, reponse) => {
  console.log('Requete GET / reçue');
  reponse.send('Hello World!')
})

Express.js

5.5 Exécution du serveur

Démarrez le serveur avec:

$ node app.js

Vous devriez voir sur la console:
« Notre app express écoute sur le port 3000 »

Connectez vous, avec votre navigateur sur http://localhost:3000

Vous devriez voir « Hello world ! »

Ça y est, on a notre premier serveur web en Express.js !

Attention: chaque fois que vous modifiez votre JS, il faut arrêter app.js (Ctrl+C) puis relancer (node app.js)

Express.js

5.6 ¤ Décortiquons app.js

import express from 'express';
const app = express();

On importe une fonction qu'on choisit d'appeler « express » à partir du paquet « express ».
Ensuite, on appelle cette fonction « express ». Elle nous renvoie un objet qu'on met dans une variable « app ».
Cet objet représente notre application Express.

app.listen(3000, () => {
  console.log('Notre app express écoute sur le port 3000')
});

app.listen crée le serveur, qui écoute sur le port 3000. Normalement, un serveur web (http) est sur le port 80, mais pour utiliser le port 80, on aurait besoin d'être root.
On fournit à app.listen une fonction fléchée, que Express appelle dès que le serveur est prêt. On l'utilise juste pour afficher un message dans le terminal.

app.get('/', (requete, reponse) => {
  console.log('Requete GET / reçue');
  reponse.send('Hello World!')
})

Ici, on dit à Express:
« Quand l'utilisateur demande l'URL http://localhost:3000/ il faut appeler la fonction fléchée fournie »
Ceci s'appelle une « route ». Remarquez le nom « .get ». Il existe aussi « .post ».

Le chemin '/' est un peu court. Voici un exemple plus clair avec une URL plus longue:

app.get('/bonjour', (requete, reponse) => {
  console.log('Requete GET /bonjour reçue');
  reponse.send('Bonjour à toi!')
})

Ceci dit à Express:
« Quand l'utilisateur demande l'URL http://localhost:3000/bonjour il faut appeler la fonction fléchée fournie »

Express.js

5.7 Créer une route

Créer une route

Ajoutez un nouvel appel à app.get qui affiche toute une page HTML complète avec l'image suivante:
https://moodle.iutv.univ-paris13.fr/img/bjs2/chat2.svg
lorsque l'utilisateur se connecte avec l'URL http://localhost:3000/miaou

Vous pouvez utiliser les « ` ... ` » ( backticks = accent grave ) à la place de « ' ... ' » ou « " ... " » pour créer une chaine de caractères sur plusieurs lignes.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Express.js

5.8 Correction

app.get('/miaou', async (requete, reponse) => {
  console.log('Requete GET /miaou reçue');
  reponse.send(`<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Miaou</title>
	</head>
	<body>
        <h1>Miaou</h1>
        <img src="https://moodle.iutv.univ-paris13.fr/img/bjs2/chat2.svg"/>
	</body>
</html>`);
})

6. Profils : 1ère partie

6.1 Profils : 1ère partie

On va construire une petite application pour afficher des profils. Ce n'est pas "monserveur", c'est un nouveau logiciel.

Créez un répertoire appelé « profils » (qui n'est pas dans monserveur) et copiez-y le fichier package.json de monserveur.
Copiez-y aussi app.js

Rentrez dans profils et tapez

$ npm install

Remarquez qu'il n'y a pas de nom de paquet dans « npm install »
Cette commande va installer tous les paquets listés comme dépendances dans package.json. Ici, ce sera juste express.
(C'est à dire, qu'il va recréer node_modules et package-lock.json)

Exécutez app.js et vérifiez que http://localhost:3000/ fonctionne correctement.

Profils : 1ère partie

6.2 Pages statiques

Dans monserveur, on avait affiché une page HTML en l'incluant dans le app.js avec des backticks « ` ... ` ».
Ce n'est pas très pratique.
Express permet d'indiquer un répertoire qui fournira des pages « statiques ».
C'est à dire des fichiers (HTML, CSS, JS, images, ...) qui seront envoyés directement au navigateur.

Après « const app = express(); », ajoutez:

app.use(express.static('public'));

Créez un répertoire appelé « public » dans « profils ».
Désormais, les fichiers dans « public » seront envoyés par Express directement au navigateur.
C'est similaire à un serveur web classique.

Créez un fichier « essai.html » dans public.
Vérifiez que vous pouvez y accéder par http://localhost:3000/essai.html

Profils : 1ère partie

6.3 Création fichiers statiques

Créez les fichiers suivants dans public

index.html:

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>
		<title>Profils</title>
		<script src="https://moodle.iutv.univ-paris13.fr/img/bjs2/bjs2-js-lib.js"></script>
		<link rel="stylesheet" href="profils.css"/>
        <link rel="icon" href="data:;base64,iVBORw0KGgo=">
	</head>
	<body>
      <ul id="liste">
        <li data-id="p125">L. Neige</li>
        <li data-id="p112">Père N.</li>
        <li data-id="p132">Minou</li>
        <li data-id="p241">Anonyme</li>
      </ul>
      <div id="profil-principal" class="profil">
        <img class="portrait" src="" alt=""/>
        <p class="nom"></p>
        <p class="stats"><span class="messages">? messages</span> <span class="likes">? likes</span></p>
        <p class="description"></p>
      </div>

		<script type="module" src="profils.js"></script>
	</body>
</html>

profils.css:

/* inspiré de https://freefrontend.com/css-profile-cards/ */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Paaji+2:wght@400;500&display=swap");

body{
	background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(240,180,149,1) 100%); 
	background-repeat: no-repeat;
	font-family: sans;
	color: #444;
	background-attachment: fixed;
}


#profil-principal{
	margin-left: 7em;
}

.profil {
	background-color: #222831;
	color: white;
	width: 17em;
	text-align: center;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	font-family: 'Baloo Paaji 2', cursive;
	padding: .5em;
}

.profil .portrait {
	border-radius: 50%;
	width: 160px;
	height: 160px;
	border: 5px solid #272133;
	margin-top: 20px;
	box-shadow: 0 10px 50px rgba(235, 25, 110, .6);	
	background-color: white;
}

.profil .portrait.homme {
	box-shadow: 0 10px 50px rgba(25, 110, 235, .8);	
}

.profil .stats {
	font-size: 1.2em;
	margin-top: .5em;
}
.profil .stats span {
	margin: 1em;
}

.profil .nom{
	margin-top: 15px;
	margin-bottom: .5em;
	font-size: 1.5em;
	
}

#liste{
	display: flex;
	list-style-type: none ;
}

#liste li{
	margin: 1em;
	background-color: #222831;
	color: white;
	padding: .7em;
	border-radius: .3em;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	cursor: pointer;
}

#liste li:hover{
	background-color: #522831;	
}

profils.js

// vide pour l'instant

Profils : 1ère partie

6.4 profils.json

On a besoin de données pour notre application.

Dans le répertoire principal (profils), créez le fichier profils.json:

{
  "p132": {"id": "p132", "nom": "Minou", "sexe": "homme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/chat2.svg", "messages": 54, "description": "Miaou ? ", "likes": 132 },
  "p125": {"id": "p125", "nom": "L. Neige", "sexe": "femme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/reindeer.png", "messages": 172, "description": "Je suis un peu timide.", "likes": 232 },
  "p241": {"id": "p241", "nom": "Anonyme", "sexe": "femme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/et-masque.png", "messages": 2, "description": "J'ai beaucoup voyagé. Je cherche quelqu'un qui accepte les différences.", "likes": 5 },
  "p112": {"id": "p112", "nom": "Père N.", "sexe": "homme", "portrait": "https://moodle.iutv.univ-paris13.fr/img/bjs2/santa.png", "messages": 1300482832, "description": "J'aime la nature et les paysages nordiques. Frileuses s'abstenir. Voyage d'affaires en période de fêtes.", "likes": 5103003013 }
}

Profils : 1ère partie

6.5 Fonctionnement

Ouvrez http://localhost:3000/
Vous devriez voir une page avec 4 noms: L.Neige, Père N., Minou, Anonyme, comme ceci:

Le but dans cette partie sera d'afficher le profil de chacun dans la boite en bas, quand l'utilisateur clique sur son nom, à l'aide de requêtes AJAX.
On va faire ça ensemble dans les pages suivantes.

Une difficulté importante est de bien se souvenir où se situe chaque chose.

Les fichiers statiques (HTML,CSS, JS) sont initialement sur le serveur, mais seront envoyés au navigateur, ils s’exécuteront coté client.
Les fichiers app.js et profils.json sont exécutés ou utilisés coté serveur.

Une partie de notre JS (app.js) sera coté serveur.
Une partie de notre JS (profils.js) sera coté client.

Profils : 1ère partie

6.6 Chercher un profil

On va commencer par établir une « route » dans app.js (pas dans profils.js!) permettant de répondre à la requête http://localhost:3000/profil/p132

Rappel: les « routes » sont les appels du type app.get('/chemin', fonction )
Ils associent un chemin à une fonction.

En vous inspirant des autres routes, affichez « Requête /profil/p132 reçue » dans le terminal (console du serveur) quand vous visitez l'URL http://localhost:3000/profil/p132

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Profils : 1ère partie

6.7 Correction

app.get('/profil/p132', async (requete, reponse) => {
  console.log('Requête /profil/p132 reçue');
  reponse.send('bonjour');
})

Profils : 1ère partie

6.8 Lire un fichier

Dans cette route, on veut lire le fichier profils.json pour ensuite y chercher le profil p132
Comment s’appelle la fonction Node.js permettant de lire un fichier ?

readFile
Regexp: .*readFile.* :
Oui, c'est fs.readFIle
readfile
Regexp: .*read.?file.*/i :
Presque! Vérifiez l'orthographe

Profils : 1ère partie

6.9 Lecture du fichier

Quand vous visitez l'URL http://localhost:3000/profil/p132
lisez le fichier profils.json et affichez-le dans la console du serveur (terminal).

Indications:

N'oubliez pas l'import pour pouvoir utiliser fs.readFile: « import * as fs from "node:fs/promises"; »
N'oubliez pas que la lecture d'un fichier est asynchrone. Ça demande quelques ajustements.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Profils : 1ère partie

6.10 Correction

app.get('/profil/p132', async (requete, reponse) => {
  console.log('Requete /profil/p132 reçue');
  let profilsTexte=await fs.readFile('profils.json','utf8');
  console.log('sortie:',profilsTexte);
  reponse.send('bonjour');
})

Profils : 1ère partie

6.11 JSON

On a désormais tout le fichier profils.json dans une chaîne de caractères.
Pour l'utiliser, on a besoin de transformer cette chaîne de caractères en un objet JS.
Pour ça, on utilise la fonction JSON.parse() :

  let profils=JSON.parse(profilsTexte);

Maintenant, on a bien un objet dans « profils ».
Regardez le contenu de profils.json

Que faut-il écrire pour chercher le profil p132 dans l'objet « profils »?
(sans le mettre dans une variable, ni l'afficher)

profils['p132']
Regexp: profils *\[ *['"]p132['"] *\]
profils.p132
Regexp: profils\.p132 :
C'est vrai, on peut écrire profils.p132
Mais pour la suite on aura besoin de la notation utilisant des crochets.
profils[p132]
Regexp: profils *\[ *p132 *\] :
Presque! Il vérifiez la syntaxe.
console.log
Regexp: .*console\.log.* :
Vous avez écrit « console.log ». Ici, on ne veut pas l'afficher dans la console.
let
Regexp: let +.* : Vous ne devez pas créer de variable.
;
Regexp: .*; :
Ne mettez pas de « ; » à la fin.

Profils : 1ère partie

6.12 Fin p132

Complétez le code pour renvoyer au navigateur le profil p132

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Profils : 1ère partie

6.13 Correction

app.get('/profil/:id', async (requete, reponse) => {
  console.log('Requete /profil/p132 reçue');
  let profilsTexte=await fs.readFile('profils.json','utf8');
  let profils=JSON.parse(profilsTexte);
  reponse.send(profils['p132']);
})

Profils : 1ère partie

6.14 Paramètre dans la route

Notre code fonctionne pour le profil p132 uniquement.
Élargissons pour qu'il fonctionne pour tous les profils !

Express permet de créer des paramètres dans les chemins avec des « : »

app.get('/profil/:id', async (requete, reponse) => {

Ici on l'a appelé « id » (mais vous pouvez l'appeler comme vous voulez).
Dans la fonction, on récupère sa valeur dans « requete.params.id »
Donc pour l'URL http://localhost/profil/xyz on récupérera 'xyz' dans « requete.params.id »

Utilisez ceci pour que votre code fonctionne pour tous les profils.

Écrivez le code, vérifiez qu'il fonctionne dans votre navigateur, puis copiez-le ici pour que votre enseignant puisse le relire plus tard:

Sujet 5

1. Bienvenue au 5e sujet

1.1 Bienvenue au 5e sujet

2. Révisions

2.1 Révisions

Révisions

2.2 Client / serveur

Révisions

2.3 GET/POST

Révisions

2.4 Frontend

Révisions

2.5 Notation raccourcie objet

Révisions

2.6 Rendre la main

Révisions

2.7 Changements successifs

Révisions

2.8 Défilement

Révisions

2.9 addEventListener

Révisions

2.10 attendre

Révisions

2.11 attendre

3. Node.js

3.1 ¤ Node.js

Node.js

3.2 Node.js : questions

Node.js

3.3 ¤ Essayons Node.js !

Node.js

3.4 hello.js

Node.js

3.5 ¤ Modules JS

Node.js

3.6 import

Node.js

3.7 ¤ Node.js asynchrone

4. NPM : node package manager

4.1 ¤ NPM : node package manager

NPM : node package manager

4.2 ¤ La commande « npm »

NPM : node package manager

4.3 npm

NPM : node package manager

4.4 Création app

NPM : node package manager

4.5 package.json

NPM : node package manager

4.6 Autres fichiers

NPM : node package manager

4.7 Ajouter express

NPM : node package manager

4.8 Nouveau répertoire

NPM : node package manager

4.9 Contenu de node_modules

NPM : node package manager

4.10 Répertoire express

NPM : node package manager

4.11 express package.json (2)

NPM : node package manager

4.12 dependencies

NPM : node package manager

4.13 express dans package.json

NPM : node package manager

4.14 "type": "module"

5. Express.js

5.1 Express.js

Express.js

5.2 ¤ Architecture

PHP

Express.js

Pourquoi ?

Express.js

5.3 Express / PHP : questions

Express.js

5.4 app.js

Express.js

5.5 Exécution du serveur