Stack MEAN (Express- Node.js)
1. Première application web avec nodejs (hello world)
Tapez ce code dans un fichier texte et sauvegarder dans un répertoire de votre choix par exemple (c:/node) sous le nom hello.js.(n’oubliez pas de modifier la variable d’environnement pour qu’elle pointe le répertoire nodejs)
var http = require('http'); (1)
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end('Hello World!');
}).listen(8080);
pour lancer le serveur
node hello.js
Important :
Node.js est bas niveau. Généralement le programmeur est appelé à écrire du code qui n’a pas l’habitude à écrire dans le cas d’utilisation d’autres solutions telles que PHP , ASP.( c.à.d. nodejs demande un effort supplémentaire par rapport au autres mais par rapport à ces avantages cette inconvénient ne vaut rien)
Par exemple quand vous créez des sites web avec PHP par exemple, vous n’êtes pas appelé à analyser les requêtes http pour extraire les informations voulues (type de méthode, variable et leurs valeurs, etc.) . ce travail est le travail du serveur (par exemple apache). Le programmeur peut connaitre ce qu’il veut en lisant des variables dites superglobale et d’environnement ($_post, $get , $_session, $_cookie…etc).
Avec Node.js, c’est au programmeur de créer le serveur et de réaliser toutes les services demandé par un serveur HTTP (avant vous avez l’habitude d’utiliser les services déjà fournit par un serveur qui tu doit installé ( comme Apache)).
Explication du code
ce code utilise Le module http (1). Ce module est un module de base Node.js (un module inclus dans la distribution Node.js, et ne demande pas l'installation de ressources supplémentaires). Avec http nous créons un serveur , en l’occurrence un serveur web (HTTP), en appelons la fonctionnalité createServer() ( http.createServer()).
Cette méthode retourne un objet de type serveur. La méthode listen(port, IPadress) du serveur lance l’écoute sur le port donné en paramètre. Par défaut le serveur est 127.0.0.1(locahost).
La fonction createServer prend une callback(fonction) comme paramètre. Cette callback sera exécutée à chaque réception de requête par le serveur.
Cette callback prend elle-même deux paramètres : la requête (req) et la réponse (res). (on peut les nomer comme on veut).
· La requête est un objet contenant les détails de la requête HTTP reçue par serveur : en-têtes HTTP, paramètres GET ou POST, etc.
· La réponse est un objet qui nous permet de créer une réponse HTTP à envoyer au client.
Dans le code précèdent nous créons une réponse HTTP ayant :
-l’en-tête HTTP Content-type à text/html,
–le corps de la réponse http est le texte Hello World .
Exemple 2
Une application web composée de deux pages.
La 1ere (acceuil.html) pour saisir un nom et l’autre pour le saluer.
<html>
<body>
<input type="text" placeholder="Enter your name" id="name"/>
<input type="button" value="OK" onclick="valid()"/>
<div id="message"></div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function valid() {
$.get('', { name: $('#name').val() }, function(data) {
$('#message').html(data.message);
}, 'json');
}
</script>
</body>
</html>
Techniquement la 1 ère est un formulaire(champ nom + bouton saluer). Quand l’utilisateur click sur le bouton on fait une requête ajax (get +nom saisi). Le serveur à la réception de cette requête répond par l’envoi de la response JSON { ‘message’ :’salut+nom’}. Par exemple si la requête reçue est http://127.0.0.1:1337/?name=omar ; le serveur envoi l’objet JSON {‘message’ :’salut omar’}
var http = require('http');
var url = require('url');
var fs = require('fs');
var server = http.createServer(function (req, res) {
var url_parts = url.parse(req.url, true);
var name = url_parts.query.name;
if (name) {
console.log('Name: ' +name);
res.writeHead(200, {'Content-Type': 'application/json'});
res.end(JSON.stringify({message: 'salut ' +name + '!'}));
} else {
console.log('No name!');
res.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile('acceuil.html',function (err,data) {
res.end(data);
});
} }).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
le code utilise les modules url et fs. url est un module qui contient les fonctionnalités permettant d’analyser une URL avec ses paramètres et le module fs permet la manipulation (lire et écrire ..) des fichiers se trouvant sur le serveur local.
Une analyse de ce programme montre que :
2.Express
Express est un cadriciel web pour node.js fournissant un ensemble robuste de fonctionnalités pour faciliter la création d'applications Web.
Avec express on peut :
fixer les propriétés classiques d’un serveur, gérer facilement les routes
il intègre des moteurs de rendu des vues etc.
Le site officiel d'Express est expressjs.com . La source peut être trouvée sur GitHub .
Syntaxe
• app.get (chemin [, middleware], callback [, callback ...])
• app.put (chemin [, middleware], callback [, callback ...])
• app.post (chemin [, middleware], callback [, callback ...])
• app ['delete'] (chemin [, middleware], callback [, callback ...])
• app.use (chemin [, middleware], callback [, callback ...])
• app.use (rappel)
Exemple (1)
const express = require('express');
const app = express();
app.get('/p1', (request, response) => {
response.send('page p1');
});
app.get('/p2', (request, response) => {
response.send('page p2');
});
app.listen(8080, 'localhost');
ce code crée un serveur et le met en écoute sur 8080.
Le serveur à la réception de la requête htttp://127.0.0.1 :8080/p1 répond par l’envoi du text ‘page p1’.
Le serveur à la réception de la requête htttp://127.0.0.1 :8080/p1 repond par l’envoi du text ‘page p2’.
Puisque Node.js est bas niveau. Généralement le programmeur est appelé à écrire du code qui n’a pas l’habitude d’écrire dans le cas d’utilisation d’autres solutions telles que PHP , ASP.
Par exemple le programmeur doit écrire le code nécessaire pour analyser les requêtes https du client et de construire les réponses selon les cas. C.à.d. appeler les fonctions adéquates pour créer les réponses http. Cette activités est généralement nommé Routing(routage).
Routing
Gérer les routes c.à.d. comparer les requêtes reçues avec les routes(un modèle de la partie requête de l’url (format REST) (figure1)) existantes et s’il y a un match avec une route alors exécuter le gestionnaire de cette route (fonction).
Par exemple : à la réception de la requête get p1.html http1.1 envoyer au client la page p1.html
La route sera p1.html et le gestionnaire est la fonction qui envoi p1.html au client.
En express en code ca comme suit
app.get('/p1.html', (request, response) => {
response.send('page p1');
});
App.get=>si la requête est de type get( vert), la route est p1.html (en rouge) alors exécuter le gestionnaire (la fonction) en Blue.
Requêtes avec paramètres
à la réception de la requête get localhost:8080/p2/8/9 http1.1 , sommer 8 et 9 et envoyer le texte résultat est 17.
Ici la route sera /somme/ :n1/ :n2 et le gestionnaire est la fonction qui calcul la somme et forme la réponse et le type de la requête est get.
En express
app.get('/somme/:n1/:n2', (request, response) => {
var p1 = parseInt(request.params.n1);
var p2 = parseInt(request.params.n2);
var res=p1+p2 ;
response.send('resulat somme = ' +res+ '!');
});
Le format d’une URL
Figure 1. format de l’url et comment récupérer ces parties en utilisant le module url de node.
Par exemple dans l’exemple 1. Le serveur à la réception de la requête htttp://127.0.0.1 :8080/p1 répond par l’envoi du text ‘page p1’.
Le serveur à la réception de la requête htttp://127.0.0.1 :8080/p1 répond par l’envoi du text ‘page p2’.
Exemple 2
créons un serveur express qui gère l’application web suivante :
L’application est composée de 2 pages(form.html (statique), result.html(dynamique))
Le serveur envoi la page statique form.html quand il recoit l’url http://localhost:8080/form.html
Quand le serveur recoit après click de l’user sur le bouton (requête ajax) http://localhost:8080/somme/n1/n2
express propose d’utiliser le format d’url suivant :
|
1 |
http_path/:p1/:p2/.../pn |
Par exemple :
|
1 |
http://localhost/somme/8/9 |
Le serveur express
const express = require('express');
const app = express();
var fs = require('fs');
app.get('/form.html', (request, response) => {
fs.readFile('form.html',function (err,data) {
response.end(data);
});
});
app.get('/somme/:n1/:n2', (request, response) => {
var p1 = parseInt(request.params.n1);
var p2 = parseInt(request.params.n2);
var res=p1+p2 ;
response.send('resulat somme = ' +res+ '!');
});
app.listen(8080, 'localhost');
Le code de form.html est
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ma page Node.js !</title>
</head>
<body>
<p>Voici un formulaire <strong>somme</strong> !</p>
<form>
<input type =text name=number1 id=n1>
<input type =text name=number2 id=n2>
<input type =button value=somme onclick="valid();">
</form>
<div id="div1"></div>
<script>
function valid() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("div1").innerHTML = this.responseText;
}
};
xhttp.open("get", "somme/"+document.getElementById("n1").value+"/"+document.getElementById("n2").value, true);
xhttp.send();
}
</script>
</body>
</html>
3. MongoDB
un système de gestion de base de données orienté documents. Ces documents peuvent être distribués et ne nécessitant pas de schéma prédéfini des données. mongoDb est un sgbd de type no-sql basé sur JSON et BSON (Binary JSON).
Votre travail sera de savoir comment créer et manipuler une base de données MongoDb avec nodejs.