Implémentation d'un panier en JavaScript avec Node.js

Ce tutoriel s'adresse à des lecteurs qui connaissent déjà Node.JS, mais qui souhaiteraient comprendre comment développer basiquement une application web client-serveur.

Les bibliothèques et versions des logiciels utilisées pour les besoins de l'article :

• Node.js 4.2.3 ;
• MongoDb 3.2 ;
• navigateur Firefox (42.0).

Pour ce tutoriel, toutes les sources ont été écrites avec l'EDI Atom, mais un simple éditeur tel que SublimeText ou Notepad++ sera suffisant.

L'objectif est de produire une application client-serveur de gestion de panier. Nous développerons bien entendu dans ce tutoriel une page d'authentification préalable d'un utilisateur et une page permettant l'enregistrement en temps réel du panier dans une base de données.
Tout sera réalisé côté serveur, donc pas de session ni cookies gérés dans le navigateur.

Les IHM à produire dynamiquement par le serveur seront de ce type :

Le serveur HTTP (serveur web) sera créé dynamiquement avec le Framework node.js comme l'illustre le tutoriel Node.js le livre du débutant.

L'application étant de très petite taille, je vais me permettre de développer le serveur d'application dans le fichier app.js qui prendra en charge :

• la création du serveur HTTP ;
• le mapping objet relationnel entre mes classes métier et la base de données. Je parle de classes, car nous développerons en ES6.
  La gestion des routes. Une sorte de contrôleur pour multiplexer les requêtes du client ;
• quelques traitements métier pour l'authentification et les opérations élémentaires de gestion d'un panier.

À des fins pédagogiques, nous n'aurons qu'une classe métier Panier que nous développerons en ES6.

Pour la base de données, j'utiliserai MongoDB. Ça n'est pas une base de données, mais une base orientée documents. J'aurais pu choisir un vrai SGBD/R comme Postgresql. Mais pour une application de cette dimension, cela ne change pas grand-chose et l'on pourra assimiler une table d'une base de données à un document de MongoDB.
De plus MongoDB est le compagnon structurel de node.js au même titre que mysql l'est pour Apache/PHP.

Pour créer des IHM, nous utiliserons le module EJS qui est un moteur de « Templates ». De tels moteurs permettent de séparer les IHM du reste de l'application. Les templates permettent surtout de réduire le nombre de lignes de code nécessaires pour créer des pages HTML, ce qui est connu sous l'acronyme DRY : don't repeat yourself. SylvainPV a d'ailleurs publié un petit guide du templating côté client.

Node.js fonctionne avec des paquets qui accroissent ses capacités. Pour ce tutoriel nous utiliserons les paquets :

• Express qui fournit un jeu basique de capacités de traitement des routes et URL ;
• bodyparser pour parser les URL et les données Json ;
• ejs qui permet d'écrire des IHM à l'aide d'un langage de templating ;
• Mongoose qui permet de mapper les objets métier en JavaScript avec les documents de la base MongoDB.

Tous ces modules seront installés à l'aide de la commande npm install <nomDuModule>.

L'arborescence des répertoires pour le projet sera la suivante :

panierNode sera le répertoire racine de notre projet dans lequel on se placera pour lancer les commandes Node.js. Le répertoire views contiendra les IHM développées en HTML5 + EJS. Le répertoire node_modules contiendra tous les modules installés (Express, EJS, Mongoose…) ce répertoire sera créé automatiquement par la commande npm.

Pour l'installation de MongoDB et la création de la base, on suivra la procédure décrite dans le tutoriel Introduction à la base de données NoSQL MongoDB de Harry Wanki.
La base que j'ai créée s'appelle caddy.
J'ai créé deux collections : lignes et clients qui contiennent les données suivantes :

> db.clients.find(){ "_id" : ObjectId("568400bccf09d2b462bd3dd0"), "nom" : "autran", "prenom" : "marc", "email" : "marc.autran@datavalue.com", "password" : "123456" }
		
> db.lignes.find(){ "_id" : ObjectId("5686bead431b408024099bf5"), "proprietaire" : "john.rambo@boom.com", "code" : "3", "qte" : 53, "prix" : 9 }{ "_id" : ObjectId("56a36a52b4d39a30115a611f"), "proprietaire" : "marc.autran@datavalue.com", "code" : "1", "qte" : 10, "prix" : 20 }

La table clients sera utile pour authentifier les utilisateurs.
La table lignes représente le panier qui est une agrégation de lignes commandées par un propriétaire (client). Donc dans la table lignes, la colonne (propriété) propriétaire peut être considérée comme une clé étrangère qui pointe vers la table clients.

On trouvera deux objets Panier et LignePanier.
Mais ici, il s'agira de classes, car nous développerons en ES6.
Ces deux classes seront dans le fichier panier.js :

'use strict';
class LignePanier 
{ 
    constructor(code, qte, prix)
    { 
        this.codeArticle = code;
        this.qteArticle = qte;
        this.prixArticle = prix;
    } 

    ajouterQte(qte)
    {
        this.qteArticle += qte;
    }
    getPrixLigne()
    {
        var resultat = this.prixArticle * this.qteArticle;
        return resultat;
    }
    getCode() 
    {
        return this.codeArticle;
    }
    getQte()
    {
        return this.qteArticle;
    }
    getPrix()
    {
        return this.prixArticle;
    }
}
module.exports = class Panier 
{ 
    constructor()
    { 
        this.liste = [];
    } 

    ajouterArticle(code, qte, prix)
    { 
        var index = this.getArticle(code);
        if (index == -1) this.liste.push(new LignePanier(code, qte, prix));
        else this.liste[index].ajouterQte(qte);
    }
    getPrixPanier()
    {
        var total = 0;
        for(var i = 0 ; i < this.liste.length ; i++)
            total += this.liste[i].getPrixLigne();
        return total;
    }
    getArticle(code)
    {
        for(var i = 0 ; i <this.liste.length ; i++)
            if (code == this.liste[i].getCode()) return i;
        return -1;
    }
    supprimerArticle(code)
    {
        var index = this.getArticle(code);
        if (index > -1) this.liste.splice(index, 1);
    }
}

Seule la classe Panier sera exportée dans le reste de l'application. La classe LignePanier est utilisée par agrégation par la classe Panier.

Nous nous servirons de mongoose pour faire le lien entre les objets métier et la base de données MongoDB. Un tutoriel sur mongoose est proposé par Sébastien Chopin.
Voici le code source de la partie exploitation de mongoose.

'use strict';
var mongoose = require('mongoose');
var Panier = require('./panier');

// initialisation de mongoose
mongoose.connect('mongodb://localhost/caddy', function(err) {
 if (err) throw err;
});

// définition des schémas
var clientSchema = new mongoose.Schema({
 nom : String,
 prenom : String,
 email : String,
 password : String
}, {
   versionKey: false
});

var ligneSchema = new mongoose.Schema({
 proprietaire : String,
 code : String,
 qte : Number,
 prix : Number
}, {
   versionKey: false
});

// création des liens entre les tables et les schémas
var clientModel = mongoose.model('clients', clientSchema);
var ligneModel = mongoose.model('lignes', ligneSchema);

var monPanier; 
var lignes;    
var clients;

ligneModel.find({}, function (err, liste) 
 {
   if (err)  console.log(err);
   lignes = liste;
 });

var chargerPanier = function(proprio)
{
 monPanier = new Panier();
 var longueur = lignes.length;
 for(var i = 0; i < longueur ; i++)
 {
   if(lignes[i].proprietaire == proprio)
     monPanier.ajouterArticle(lignes[i].code, lignes[i].qte, lignes[i].prix);
 }
}

clientModel.find({}, function (err, liste) 
{
 if (err)  console.log(err);
 clients = liste;    
});

var checkLogin = function(login, mdp)
{
 for (var i = 0; i < clients.length; i++) 
 {
   if (clients[i].email == login && clients[i].password == mdp)
     return (clients[i]);
 }
}

On remarquera que l'on ne s'est pas donné la peine de créer une classe métier pour la table client, car elle n'est utilisée qu'une fois dans la méthode checkLogin().

Comme nous l'avons aperçu lors de la description de l'architecture logicielle, nos IHM seront écrites avec l'inclusion dans le code HTML5 de directives Jade. La syntaxe de Jade est assez proche de celle de la technologie de templating JEE : les JSP.

Le code EJS se trouvera incorporé au milieu du code HTML via les balises <% code EJS %>.

Les fichiers contenant du code en langage de templating EJS seront suffixés : .ejs Nous aurons deux IHM :

• une pour la page d'authentification (login.ejs) ;
• une pour la page de gestion du panier (index.ejs).

<html>
    <head>
        <title>Identification</title>
    </head>
    <body>
        <h1>Identifiez vous</h1>
        <form id = "loginForm" action = "/connecter" method = "post">
            <table>
                <tr>
                    <td><label> Login: </label></td>
                    <td><input type = "text" id = "login" name = "login" /></td>
                </tr>
                <tr>
                    <td><label> Mot de passe: </label></td>
                    <td><input type = "text" id = "mdp" name = "mdp" /></td>
                </tr>
            </table>    
            <input type = "submit" value = "Connecter" />
        </form>
    </body>
</html>

<html>
    <head>
        <title>Panier</title>
    </head>
    <body>
        <h1>Mon panier</h1>
        <h2> <%= client.prenom %>  <%= client.nom %></h2> 
        <h3>Email : <%= client.email%></h3>
        <h2>Contenu</h2>
        <table>
            <thead>
                <tr>    
                    <th>code</th>
                    <th>quantité</th>
                    <th>prix(Euros)</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <%
                    for(var i = 0 ; i < nbre ; i++) {
                %>
                <tr>
                    <td><%= liste[i].codeArticle %></td>
                    <td><%= liste[i].qteArticle %></td>
                    <td><%= liste[i].prixArticle %></td>
                    <td>
                        <form id="supprimer" action="/supprimer" method = "post">
                            <input type = "submit" value = "Retirer"/>
                            <input type = "text" name = "ident" hidden value = <%= liste[i].codeArticle %> /> 
                            <input type = "text" name = "prenom" hidden value = <%= client.prenom %> />
                            <input type = "text" name = "nom" hidden value = <%= client.nom %> />
                            <input type = "text" name = "email" hidden value = <%= client.email %> />
                        </form>
                    </td>
                </tr>
                <% } %>
            </tbody>
        </table>
        <h3>Prix Total : <%= total%></h3>
        <form id="ajouter" action="/ajouter" method = "post">
            <h2>Ajouter un article</h2>
            <table>
                <tr>
                    <td><label> Code: </label></td>
                    <td><input type = "text" id = "code" name = "code"/></td>
                </tr>
                <tr>
                    <td><label> Quantité: </label></td>
                    <td><input type = "number" id = "qte" name = "qte"/></td>
                </tr>
                <tr>
                    <td><label> Prix: </label></td>
                    <td><input type = "number" id = "prix" name = "prix"/></td>
                </tr>
            </table>
            <input type = "text" id = "prenom" name = "prenom" hidden value = <%= client.prenom %> />
            <input type = "text" id = "nom" name = "nom" hidden value = <%= client.nom %> />
            <input type = "text" id = "email" name = "email" hidden value = <%= client.email %> />
            <input type = "submit" value = "Ajouter"/>    
        </form>
            
        <form id="sauvegarder" action="/sauvegarder" method = "post">
            <input type = "text" id = "proprietaire" name = "proprietaire" hidden value = <%= client.email %> />
            <input type = "submit" value = "Commander"/>
        </form>
    </body>
</html>

On remarque que le fichier login.ejs ne comporte pas d'inclusion EJS. Il s'agit d'un banal fichier HTML porteur d'un tout aussi banal formulaire d'authentification.

Quant au fichier index.ejs, on remarque que le code EJS permet de manipuler des objets en lien avec le contenu du panier que ce langage de templating permet d'échanger avec l'application.

Nous gérerons cinq routes :

• / : oriente par défaut vers la page du formulaire de connexion ;
• connecter : à la validation du formulaire ;
• ajouter : ajoute un article au panier ;
• supprimer : supprime un article du panier ;
• enregistrer : sauvegarde le panier en base de données.

Voici le code source correspondant à la gestion de ces routes :

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.get("/", function(req, res) 
{
    ligneModel.find({}, function (err, liste) 
    {
        if (err)  console.log(err);
        lignes = liste;
    });
    res.render('login.ejs', {}); 
})
.post('/connecter', function(req, res) 
{
    var client = checkLogin(req.body.login, req.body.mdp)
    if (client) 
    {
        chargerPanier(req.body.login);
        res.render('index.ejs', {
        client: client,
        liste : monPanier.liste,
        nbre : monPanier.liste.length, 
        total : monPanier.getPrixPanier()}); 
    }
    else res.redirect('/');
})
.post('/ajouter', function(req, res) {
    if (req.body.code != '' && req.body.qte != ''&& req.body.prix != '') 
    { 
        var client = new Object();
        client.nom = req.body.nom; 
        client.prenom = req.body.prenom;
        client.email = req.body.email;
        monPanier.ajouterArticle(req.body.code, parseInt(req.body.qte), parseInt(req.body.prix));
        res.render('index.ejs', {
        client: client,
        liste : monPanier.liste,
        nbre : monPanier.liste.length, 
        total : monPanier.getPrixPanier()}); 
    }
    else res.redirect('/');
})
.post('/supprimer', function(req, res) {
    if (req.body.ident != '') 
    { 
        var client = new Object();
        client.nom = req.body.nom; 
        client.prenom = req.body.prenom;
        client.email = req.body.email;
        monPanier.supprimerArticle(req.body.ident);
        res.render('index.ejs', {
        client: client,
        liste : monPanier.liste,
        nbre : monPanier.liste.length, 
        total : monPanier.getPrixPanier()}); 
    }
    else res.redirect('/');
})
.post('/sauvegarder', function(req, res) 
{
    ligneModel.remove({ proprietaire : req.body.proprietaire }, function (err) 
    {
        if (err) { throw err; }
        console.log("lignes détruites");
        var maLigne;
        var longueur = monPanier.liste.length;
        for (var i = 0; i < longueur; i++)
        {
            maLigne = new ligneModel({proprietaire : req.body.proprietaire, code : monPanier.liste[i].getCode() , qte : parseInt(monPanier.liste[i].getQte()) , prix : parseInt(monPanier.liste[i].getPrix())});
            maLigne.save(function (err) {
                if (err) throw err;
                console.log('ligne panier ajoutée avec succès !');
            });
        }
        res.redirect('/');
    });
});

app.listen(5000);

Grâce au module Express, la gestion d'un serveur web est grandement facilitée. En effet, var app = express(); permet d'instancier un serveur HTTP.

La méthode listen fera écouter le serveur HTTP sur le port 5000 grâce à l'instruction : app.listen(5000);.

La méthode post(url, callback()) permet de déterminer la fonction de callback à appliquer suivant l'URL reçue par le serveur (gestion des routes).

Nous avons donc vu comment écrire en JavaScript une application sur un serveur. Néanmoins il convient de garder à l'esprit que cet exemple est une première approche des possibilités de ce langage côté serveur et que cette application reste très modeste. En effet une application professionnelle doit aujourd'hui implémenter le pattern MVC (modèle - vue - contrôleur). Mais cette technique sera vue dans un prochain tutoriel.

Nous tenons à remercier Claude Leloup pour la relecture orthographique de cet article.