| Node | | Mise à jour 12-2014 |
|
Node est un environnement qui permet d'écrire en javascript côté serveur des applications web. Node est de bas niveau, ce qui nécessite de prendre en charge beaucoup d'opérations normalement gérées par des outils plus évolués. Cependant le framework express apporte des facilités d'utilisation dans la configuration du serveur http, la gestion des vues, des feuilles de style notamment. Cette page est à rapprocher de celle consacrée à Node dans sa version de base. On y voit bien les apports d' express. Les vues La notion de vue, similaire à ce qu'on trouve dans rails par exemple, est très importante pour séparer la réalisation des pages html de celle du code applicatif. Au lieu d'écrire des fonctions qui créent du code html en y insérant des données, le code applicatif gère les données, la vue reçoit ces données et les formate pour produire la page html voulue, à l'aide de code délimité par des balises spécifiques. Les vues peuvent être modifiées pour la présentation, sans toucher au code applicatif, ni redémarrer le serveur. De plus, comme pour des fonctions, on peut écrire des morceaux de code html appelables dans les vues. Les feuilles de style Contrairement à la version de base de Node, express offre la possibilité de déclarer une feuille de style de manière classique dans la vue et de la charger automatiquement. La désynchronisation Comme dans la version de base, les accès de base de données sont désynchronisés et nécessitent l'utilisation de callbacks pour enchainer plusieurs accès à la base. Certains modules permettent de simplifier la gestion des ces callbacks. |
L'exemple proposé ici est une classique application de bibliothèque. Il est organisé autour de 3 tables : des auteurs, des catégories et des livres. Un livre appartient à un auteur et est défini par sa catégorie. L'écran est structuré également de manière classique, avec un bandeau horizontal pour le titre, un bandeau vertical à gauche pour le menu et une partie centrale recevant les différents formulaires. Eux-mêmes sont organisés toujours de manière identique : un titre, un corps et un pied de page regroupant les boutons d'action. Il existe deux types de formulaires :
Exemples de pages :
Le module de lancement de l'application s'appelle traditionnellement app.js. Il crée l'application, puis définit le routage (traduction des urls en appel de fonction). La forme de l'écriture est plus simple qu'en version basique. La plupart des fonctions reçoivent deux paramètres particuliers, request et response, qui comportent les objets représentant la requête au navigateur et la réponse qui lui est envoyée. Par simplification, les chemins d'accès des fichiers et modules sont indiqués "en dur". L'utilisation des vues nécessite que le code applicatif alimente en données un objet, utilisé par la vue pour constituer la page html. Cet objet est nommé zechange dans l'application et est composé de la manière qui suit :
Les répertoires sont organisés de la manière suivante. Le répertoire principal contient les modules généraux de l'application. Il contient aussi trois répertoires :
Chaque fichier contient des commentaires participant à la compréhension du code.
Le répertoire principal contient les fichiers suivants. app.js Création du serveur http, définition des routes et lancement du serveur. L'application est lancée par la commande node app.js. Dans le navigateur, taper l'url //localhost:8080. 8080 est le n° du port de l'instruction listen. basedonnees.js Contient les fonctions d'accès à la base de données :
constantes.js Définit les valeurs des variables utilisées pour représenter d'une part les url des pages du site, d'autre part les noms des vues. Ceci permet de ne pas inscrire en dur dans les programmes des liens vers des urls ou des vues. Les vues sont des fichiers ejs, donc les constantes doivent prendre les noms exacts. Les url en revanche, sont strictement propres au fonctionnement du navigateur; on peut donc les changer sans aucun dommage. development.sqlite3 La base de données.
Ces deux répertoires fonctionnent en parallèle; à un fichier dans les controleurs correspondent un ou plusieurs fichiers de vue, un pour chaque vue utilisée par le contrôleur. accueil.js, accueil.ejs Il s'agit ici de la page d'accueil du site, entièrement statique. auteurs.js, auteurs_liste.ejs, auteurs_modif.ejs et auteurs_liste_deroulante.ejs Le controleur possède une fonction de liste qui présente les auteurs existants, un par ligne, avec un lien modifier, un lien supprimer sur chacune, et un lien ajouter en bas de page. Elle est architecturée autour de la fonction each de l'objet de base de données, qui possède deux fonctions de callback:
Lors de la demande d'ajout, un objet ligne est créé, avec simplement un id à 0. Pour une modification, l'objet ligne est alimenté par la ligne de l'auteur concerné. La vue de modification exploite cet objet pour afficher les données existantes. Lors de la validation du formulaire, les données sont envoyées en POST et immédiatement remises dans un nouvel objet ligne. De sorte que si les contrôles de validité acceptent les valeurs, il suffit de les transférer de l'objet ligne à la base de données (un run accompagné d'un callback qui réaffiche la liste). En cas d'erreur, il suffit de réactiver l'affichage de la page à partir de l'objet créé, auquel on a ajouté le message d'erreur. La suppression fait appel à une fonction javascript côté navigateur. Celle-ci lance une demande de confirmation puis, si la réponse est "ok", redirige le navigateur sur la fonction de validation de la suppression. Cette dernière supprime la ligne puis, dans un callback, réaffiche la liste. La contrainte est que le navigateur permette l'exécution de scripts. La vue liste_deroulante permet d'afficher une liste déroulante des auteurs dans plusieurs formulaires décrits plus loin : l'ajout, la modification et la recherche de livres. Pour une fonction d'ajout ou de recherche de livres, une ligne blanche est systématiquement insérée en début de liste. En cas de modification, la liste est positionnée sur la valeur actuelle. categories.js, categories_liste.ejs et categories_modif.ejs Le principe est le même que pour les auteurs. La liste déroulante est gérée dans chaque vue des livres, contrairement à celle des auteurs qui est une vue partagée. general.js Ce module contient la fonction qui initialise l'objet d'échange entre vues et controleurs. Elle est appelée par chaque transaction. livres.js, livres_liste.ejs et livres_modif.ejs Le controleur possède une fonction de liste, similaire à celle de la table des auteurs. Sa particularité est la récupération de cookies dans les données postées, afin d'appliquer des critères de recherche. Les cookies permettent de conserver des données entre plusieurs transactions, dans une même session. Les fonctions d'ajout et de modification sont un peu plus compliquées, car le mécanisme utilisé pour les auteurs ne suffit pas (les seules données de la table). Il faut aussi recharger les listes déroulantes, notamment dans le cas d'affichage d'anomalie. Pour cettre raison, on crée un objet d'échange zechange qui comportera toutes les données nécessaires. Il est transmis entre les différentes fonctions et complété/modifié. Le traitement consiste à appeler une première fonction qui charge les données du livre et, dans son callback final, appelle le chargement de la liste déroulante des auteurs. Celle-ci charge la liste des auteurs et, dans son callback final, appelle le chargement de la liste déroulante des catégories. Celle-ci charge la liste des catégories et, dans son callback final, affiche le formulaire. Comme le chargement des listes et l'affichage sont utilisés à plusieurs endroits dans le contrôleur, une fonction a été dédiée afin de ne pas répéter le code. La fonction de suppression est similaire à celle des auteurs. recherche.js et livres_recherche.ejs Ce module fonctionne un peu comme le module des livres, à l'exception du fait que les données résultantes de ce formulaire ne sont pas stockées dans une base de données mais dans des cookies. page_entete.ejs et page_pied.ejs Ces deux pages sont intégrées systématiquement aux pages spécifiques via une commande include. Elles contiennent la structure générale des pages du site. Le début avec l'appel des feuilles de style et l'intégration des scripts selon le domaine concerné, le menu général, le titre de la page spécifique. Entre les deux viennent s'intercaler les pages spécifiques. |
Quelques modules supplémentaires à charger avec npm, non livrés en standard, sont nécessaires. Modifier les chemins d'accès (X:/...) dans les fichiers.js. express (ejs pour les vues est compris) body-parser cookie-parser sqlite3
Ces quelques sites proposent des cours et documentations sur node. Openclassrooms Pour débuter Documentation technique détaillée sur les classes offertes Utilisation de la base de données sqlite |
