You must be registered for see images attach
Bonjour à tous , nous allons aujourd'hui apprendre à créer notre premier serveur HTTP à l'aide de NodeJS couplé à Express.
SOMMAIRE :
Qu'est-ce qu'un serveur HTTP ?
Qu'est-ce que NodeJS ?
Qu'est-ce que Express ?
Réalisation du serveur
Réalisation d'une page de contact
Pour les plus novices, je vous ai sans doute déjà perdu mais rassurez-vous je vais faire en sorte que vous compreniez l'ensemble des notions énoncées dans ce tutoriel mais il faudra bien évidemment avoir des bases solides en JavaScript.
You must be registered for see images attach
Dans un premier temps, revenons au fonctionnement du world wide web plus particulièrement en1990 lorsque l'HTTP fût créé.
You must be registered for see images attach
(crédits: infowebmaster.fr)
Un serveur HTTP est tout simplement un serveur qui va pouvoir communiquer avec un internaute (client) par le biais du protocole HTTP, grossièrement le client envoie une requête au serveur quant au serveur il envoie une réponse en retour.
Ainsi lorsque vous accédez à https://reality-gaming.fr vous envoyez une requête au serveur HTTPS, qui est une variante de l'HTTP mais celle-ci crypte la communication entre vous et le serveur, et en retour vous recevez l'accueil du forum
You must be registered for see images attach
(en réalité vous en faites beaucoup plus qu'une comme vous pouvez le voir ci-dessous)
You must be registered for see images attach
Le principe d'un serveur HTTP est normalement acquis passons à NodeJS, vous avez sûrement entendu ceci ou alors c'est la première fois mais cela reste encore flou, d'une manière aussi grossière que la précédente définition NodeJS est une plateforme logicielle libre qui vous permet d'exécuter du JavaScript du côté serveur .
(le fonctionnement asynchrone de NodeJS qui lui vaut une rapidité accrue face à PHP, crédits: emaze.com)
En effet le javascript jusqu'à là (avant 2010) était utilisé uniquement du côté client & interprété par vos navigateurs pour ajouter du dynamisme à nos pages comme vous pouvez le savoir grâce aux scripts disponibles sur RealityGaming qui vous permette d'ajouter des fonctionnalités ou des modifications au forum.
- Rendez-vous sur le site de
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici..
- Téléchargez le fichier.
- Procédez à l'installation.
- Une fois terminée ouvrez votre CMD .
- Entrez la commande : node. Si vous obtenez une console (symoblisé par ce symbole : >) , vous avez réussi.
- node : cette commande vous permet d'utiliser Node via la console (CLI), elle permet d'exécuter des morceaux de code afin de vérifier la syntaxe de celle-ci par exemple, vous pouvez y taper console.log('La console fonctionne bien !').
You must be registered for see images attach
You must be registered for see images attach
Dernière définition à aborder avant de rentrer dans le vif du sujet, parlons peu parlons Express (
). Très simplement, Express vous permet de créer des architectures web minimalistes très facilement avec NodeJS. Express est lui même un projet créé par l'organisation NodeJS, ainsi avec ce framework il devient bien plus facile de créer des sites web car celui-ci incorpore un tas de fonctionnalités basiques mais très importantes pour démarrer la création d'un site web .
- Créez un dossier "website" où vous le souhaitez.
- Ouvrez votre CMD et entrez la commande : cd chemin-vers-votre-dossier-website.
- Entrez la commande : npm init --yes.
- Puis celle-ci : npm install express --save .
- cd : cette commande vous permet de vous rendre dans un dossier si elle est suivie de l'emplacement de celui-ci.
- npm : NPM est le gestionnaire de dépendances de NodeJS, c'est par ce biais que vous pouvez installer tout un tas de packages.
- npm init --yes : avant de pouvoir utiliser NPM il faut déclarer notre projet, dans notre cas ce n'est pas pertinent donc nous autorisons NPM à remplir les champs demandés (pour les voir il suffit de retirer l'option --yes) pour nous.
- npm install express --save : par le biais de NPM nous installons le framework Express en précisant que nous voulons l'installer dans le dossier de notre site en utilisant l'option --save, chaque dépendance est installée dans un dossier node_modules.
You must be registered for see images attach
You must be registered for see images attach
Entrons dans le vif du sujet : la création de notre serveur HTTP.
Dans un premier temps nous allons créer un fichier app.js.
Modifiez votre fichier package.json pour modifier le nom de notre fichier principal.
Code:
var express = require('express');
var app = express();
Code:
/*
Nous utilisons la méthode get qui permet d'utiliser une fonction qui s'exécutera lorsque
nous voudrons nous rendre sur le chemin /. Cette fonction prend 2 paramètres : req & res.
Ces deux paramètres sont des objets contenant pour le premier la requête, et le deuxième
la réponse à envoyer.
*/
app.get('/', (req, res) => {
/*enfin nous utilisons une méthode disponible via l'objet res pour retourner une réponse
sous forme de plain/text.
*/
res.send('Hello World !');
});
Code:
app.listen(8989, function(){
//se code s'exécutera à chaque fois que le serveur HTTP se lancera.
console.log("Le serveur HTTP a bien démarré sur le port 8989");
});Pour exécuter notre script et donc notre serveur, il faut exécuter la commande node app.js, pour l'arrêter faites CTRL + C.
En cas d'erreur, changez le port il se peut qu'il soit déjà utilisé.
Rendez-vous ensuite sur l'URL suivante :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
pour observer le résultat.
You must be registered for see images attach
You must be registered for see images attach
Nous avons vu un exemple basique, essayons maintenant de réaliser quelque chose de basique : une page de contact permettant d'envoyer un mail lors de sa soumission.
You must be registered for see images attach
Code:
/*
on déclare notre dossier "static" qui va indiquer à Express qu'il faut
servir les fichiers contenus dans ce dossier comme des fichiers statiques.
*/
app.use(express.static('static'));Vous pouvez accéder votre dossier static après avoir sauvegardé mais vous constaterez que vous obtiendrez une erreur du type : CANNOT GET /static, c'est tout à fait normal et ceci pour deux raisons :
- Vous n'avez pas relancé votre serveur HTTP, et oui, à chaque modification vous devez relancer votre serveur. Mais heureusement pour vous un package nommé nodemon a été crée il détecte lorsque vous avez modifié vos fichiers et relance le serveur en une fraction de secondes. Pour l'installer utilisez la commande npm install nodemon -g , l'option -g permet d'installer ce module globalement sur votre ordinateur ainsi plus besoin de l'installer à chaque projet, cette commande requière les droits administrateur. Pour utiliser ce module il vous suffit de lancer le serveur via la commande nodemon app.js au lieu de node app.js.
- Express va servir vos fichiers à partir de ce dossier, ainsi vous devez accéder à vos fichiers / dossiers directement via l'architecture présente dans le dossier static, c'est à dire qu'au lieu de vouloir accéder à static/css vous pouvez directement y accéder via css.
You must be registered for see images attach
INDEX.HTML
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue sur l'accueil !</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<h1>Bienvenue sur l'accueil !</h1>
<p>Je t'invite à <a href="contact">me contacter</a>. </p>
</body>
</html>CONTACT.HTML
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Nous contacter</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<h1>Bienvenue sur la page de contact</h1>
<form action method="POST">
<div class="form-group">
<label for="message">Votre message</label>
<textarea class="form-control" name="message" id="message" rows="3"></textarea>
<button type="submit" class="btn btn-primary">Envoyer</button>
</div>
</form>
</body>
</html>Nous devons ensuite les déclarer (ce qu'on appelle du routing) grâce à notre méthode get contenue dans l'objet de réponse ainsi qu'à une méthode sendFile qui va permettre "d'envoyer" nos fichiers HTML en tant que réponse.
Code:
app.get('/', (req, res) => {
res.sendFile(__dirname + "/" + 'index.html');
});
app.get('/contact', (req, res) => {
res.sendFile(__dirname + "/" + 'contact.html');
});
You must be registered for see images attach
You must be registered for see images attach
Code:
var nodemailer = require('nodemailer');Pour envoyer un email après la soumission du formulaire il faut utiliser la méthode POST pour le chemin /contact.
Code:
app.post('/contact', (req, res) => {
//le code s'exécutera après une requête avec la méthode POST
});Il faut également que nous installions le module body-parser qui nous permet d'extraire nos données envoyées en POST, vous connaissez la routine : npm install body-parser --save et on le déclare en début de fichier.
Code:
var bodyParser = require('body-parser');
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
il faut tout d'abord déclarer notre transporter qui sera le service utilisé et techniquement l'objet que nous allons utiliser pour envoyer le mail.
Code:
var transporter = nodemailer.createTransport('smtps://[email protected]:[email protected]');Ensuite il faut définir un tas d'options telle que l'email de l'expéditeur, l'email du receveur, le message et l'objet.
Code:
var mailOptions = {
from: '"Bernard" <[email protected]>', // de qui
to: '"Bernard" <[email protected]>', // vers qui
subject: 'Demande de contact effectué depuis le site', // l'objet
text: req.body.message, //l'email brute qui n'est autre que notre message
html: req.body.message //l'email avec des balises HTML qui au final dans notre cas reviens à l'email brute
};
Code:
transporter.sendMail(mailOptions, function(error, info){
if(error){
return console.log(error);
}
console.log('Email envoyé: ' + info.response);
res.redirect('/');
});Essayez d'envoyer un email, soumettez le formulaire et regarder la console ainsi que votre boite mail.
You must be registered for see images attach
You must be registered for see images attach
