node.js formulaire post get avec express

Dans l’article Servir des fichiers html avec node.js, je montrais comment exposer des fichiers html avec node.js. Je vous propose dans ce qui suit de vous montrer comment soumettre des formulaires et en récupérer les données toujours avec node.js.

Pré-requis conseillés aux débutants

– Comprendre node.js;
– Installer node.js;
– Servir des fichiers html avec node.js.

Création d’un dossier projet

Créez un dossier pour y mettre les fichiers du projet qui seront créés.

L’api node.js express

Cette api permet d’instancier simplement un serveur http et permettant d’exposer l’url d’accès à un fichier html.

Pour l’installer, il suffit de taper en ligne de commande en se plaçant dans le dossier du projet.

npm install express

Instancier un serveur avec node.js express

Pour commencer, dans le dossier du projet, créez un fichier javascript en le nommant exemple.js. Vous y mettrez tout le code javascript de l’exercice.

Instancier un serveur http avec node.js n’a rien de compliquer, il suffit d’instancier un objet express puis de le mettre en écoute sur un port de votre choix. Pour du http web, le port utilisé est le 80.

Dans le fichier exemple.js, ajoutez le code suivant.

// dépendance api express
let express = require('express');
  

let server= express();
server.listen(80);

Pour démarrer le serveur node.js, il suffit d’invoquer la commande suivante.

node exemple.js

Souvenez vous qu’à chaque modification, il vous faudra stopper node.js (par la combinaison des touches CTRL + C) et le redémarrer.

Servir un fichier html avec node.js express

Toujours dans le dossier du projet, créez le fichier html suivant en le nommant page.html.

<html>
 <body>
  PAGE
  <form method="post" action="/post.html">
    p1=<input type="text" name="p1">
    <input type="submit" value="post">
  </form>
 </body>
</html>

Un simple page comportant un formulaire avec une zone de saisie nommée p1, un bouton submit.
Lorsque le formulaire est soumis via le bouton submit, ses données sont envoyées à l’url /post.html en méthode post : à l’inverse de la méthode get, les paramètres ne sont pas placés dans l’url.

Pour servir le fichier page.html, il suffit d’employer la méthode get de l’objet server.
Cette méthode prend en paramètre un chemin qui lorsqu’il sera appelé, exécutera la fonction placée en second paramètre.

// dépendance api express
let express = require('express');
  

let server= express();
server.listen(80);
 
server.get('/page.html', function(request, response) {

});

Il ne reste plus qu’à renvoyer la fichier page.html.

// dépendance api express
let express = require('express');
  

let server= express();
server.listen(80);
 
server.get('/page.html', function(request, response) {
  response.sendFile( __dirname  + '/page.html');
});

La variable d’environnement __dirname renvoie comme valeur le chemin du dossier courant. C’est un peu l’équivalent du ./

Vous avez modifié le fichier exemple.js, il faut donc stopper (CTRL + C) et redémarrer le serveur node.js.

node exemple.js

Puis depuis votre navigateur, invoquer l’url http://localhost/page.html. La page html devrait normalement s’afficher.

Notez bien que le 1er paramètre (le chemin) de la méthode get peut être choisi arbitrairement sans une quelconque corrélation avec le fichier renvoyé.

// dépendance api express
let express = require('express');
  

let server= express();
server.listen(80);
 
server.get('/toto', function(request, response) {
  response.sendFile( __dirname  + '/page.html');
});

Dans l’exemple ci-dessus, il faudra simplement invoqué depuis le navigateur http://localhost/toto.

Récupérer les paramètres figurant dans l’url (méthod get)

La méthode get permet de placer des paramètres directement dans une url.

http_path?p1=8&p2=9&....&pn=56

Par exemple.

http://localhost/page.html?p1=8

Ci-dessus, on intègre le paramètre p1 en lui associant la valeur 8.

Pour récupérer les paramètres, il suffit d’utiliser la structure de données request de la fonction exécutée à l’invocation. Notamment la propriété param prenant en paramètre le nom du paramètre de l’url.

server.get('/page.html', function(request, response) {
  let p1 = request.param("p1"); 
  console.log(p1);
  response.sendFile( __dirname  + '/page.html');
});

Cette manière de faire est à ce jour dépréciée : elle reste valide mais n’est plus maintenue.
De même que la forme des paramètres présentées ci-dessus dans l’url n’est pas conseillée.

node.js express propose d’utiliser le format d’url suivant.

http_path/:p1/:p2/.../pn

Par exemple.

http://localhost/page.html/8

Dans ce cas, la manière de récupérer les paramètres change aussi.

On utilise toujours la structure de données request contenant une sous-structure params contenant tous les paramètres de l’url. Remarquez que ça a un côté un peu magique.

Cette méthode oblige à ce que tous les paramètres soient donnés dans l’url, sans quoi une erreur sera levée. De même qu’il faut être attentif à l’ordre des paramètres.

Ces 2 aspects ajoutent un cadre plus contraignant.

Récupérer les paramètres renvoyés par un formulaire (méthod post)

Ici, on utilise la méthode post de l’objet server.

Tout comme la méthode get, la méthode post prend en paramètre un chemin qui lorsqu’il sera appelé, exécutera la fonction placée en second paramètre.

server.post('/post.html', function(request, response) {

});

Pour ce qui est des paramètres, il est nécessaire d’installer l’api body-parser (plus d’infos sur l’api body-parser).

npm install body-parser

Il faut ensuite indiquer au serveur d’utiliser le module de parsing.

let express = require('express');
let bodyParser = require("body-parser");

Ce module met à disposition divers parser de données utilisés selon le type de données reçus. Il est ainsi possible de parser un contenu json ou encore dans le cas qui nous intéresse le parsing de données issues d’un formulaire.


let server = express();

server.use(bodyParser.urlencoded({ extended: true }));

Un nouvel objet body contenant les données du formulaire est construit lorsque le formulaire est soumis et reçu par la méthode post. L’accès aux données du formulaire passe donc par l’objet request et la structure de données body.

Cet objet body contient sous forme de propriétés les paramètres du formulaire.

let express = require('express');
let bodyParser = require("body-parser");
 

let server = express();
server.use(bodyParser.urlencoded({ extended: true }));
server.listen(80);
 
server.post('/post.html', function(request, response) {
  let p1 = request.body.p1; 
  console.log("p1=" + p1);
});

Dans l’exemple ci-dessus, on affiche les valeurs des paramètres dans la console node.js.

Le code de l’exemple complet

let express = require('express');
let bodyParser = require("body-parser");
 

let server = express();
server.use(bodyParser.urlencoded({ extended: true }));
server.listen(80);
 
server.get('/page.html', function(request, response) {
  response.sendFile( __dirname  + '/page.html');
});
 
server.post('/post.html', function(request, response) {
  let p1 = request.body.p1; 
  console.log("p1=" + p1);
});

node.js formulaire post get avec express