Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Express : créez votre premier serveur HTTP avec NodeJS !
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Rivals" data-source="post: 6903430" data-attributes="member: 694298"><p style="text-align: center">[ATTACH=full]100659[/ATTACH]</p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Bonjour à tous [FA]fa-smile-o[/FA], nous allons aujourd'hui apprendre à créer </span><span style="color: rgb(0, 0, 0)"><span style="font-family: 'MyriadPro'">notre premier serveur HTTP</span><span style="font-family: 'MyriadPro Light'"><strong> [FA]fa-server[/FA]</strong></span></span><span style="font-family: 'MyriadPro Light'"> à l'aide de <span style="color: #000000"><em>NodeJS</em></span> couplé à <span style="color: #000000"><em>Express</em></span><span style="color: rgb(0, 89, 179)">.</span></span></p> <p style="text-align: center"></p> <p style="text-align: left"><span style="font-family: 'MyriadPro Light'"><span style="color: #000000"><u>[FA]fa-align-justify[/FA] SOMMAIRE :</u></span></span></p> <p style="margin-left: 20px"><p style="text-align: left"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: left"><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] </span><span style="font-family: 'MyriadPro'">Qu'est-ce qu'un serveur HTTP ?</span></p> <p style="text-align: left"><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] </span><span style="font-family: 'MyriadPro'">Qu'est-ce que NodeJS ?</span></p> <p style="text-align: left"><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] </span><span style="font-family: 'MyriadPro'">Qu'est-ce que Express ?</span></p> <p style="text-align: left"><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] </span><span style="font-family: 'MyriadPro'">Réalisation du serveur</span></p> <p style="text-align: left"><span style="font-family: 'MyriadPro'"><span style="font-family: 'MyriadPro-Light'">[FA]fa-angle-right[/FA] </span><span style="font-family: 'MyriadPro-Regular'">Réalisation d'une page de contact</span></span></p> </p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">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</span><span style="font-family: 'MyriadPro'"> des bases solides en JavaScript</span><span style="font-family: 'MyriadPro Light'">.</span></p> <p style="text-align: center"></p> <p style="text-align: center">[ATTACH=full]100661[/ATTACH]</p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Dans un premier temps, revenons au fonctionnement du </span><strong><span style="font-family: 'MyriadPro'">w</span></strong><span style="font-family: 'MyriadPro Light'">orld </span><strong><span style="font-family: 'MyriadPro'">w</span></strong><span style="font-family: 'MyriadPro Light'">ide </span><strong><span style="font-family: 'MyriadPro'">w</span></strong><span style="font-family: 'MyriadPro Light'">eb plus particulièrement en<em>1990</em> lorsque l'</span><span style="font-family: 'MyriadPro'">HTTP</span><span style="font-family: 'MyriadPro Light'"> fût créé. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite349" alt=":rêve:" title="Rêveur :rêve:" loading="lazy" data-shortname=":rêve:" /></span></p> <p style="text-align: center">[ATTACH=full]100696[/ATTACH]</p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="font-size: 12px"><em>(crédits: infowebmaster.fr)</em></span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Un serveur HTTP est tout simplement un serveur qui va pouvoir </span><span style="font-family: 'MyriadPro'">communiquer [FA]fa-exchange[/FA]</span><span style="font-family: 'MyriadPro Light'"> avec un internaute (client) par le biais du </span><span style="font-family: 'MyriadPro'">protocole HTTP</span><span style="font-family: 'MyriadPro Light'">, grossièrement le client </span><span style="font-family: 'MyriadPro'">envoie une requête [FA]fa-share[/FA]</span><span style="font-family: 'MyriadPro Light'"> au serveur quant au serveur il </span><span style="font-family: 'MyriadPro'">envoie une réponse [FA]fa-reply[/FA]</span><span style="font-family: 'MyriadPro Light'"> en retour.</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Ainsi lorsque vous accédez à <a href="https://reality-gaming.fr" target="_blank"><u>https://reality-gaming.fr</u></a> vous envoyez une requête au serveur HTTP</span><span style="font-family: 'MyriadPro'">S</span><span style="font-family: 'MyriadPro Light'">, qui est une variante de l'HTTP mais celle-ci </span><span style="font-family: 'MyriadPro'"><span style="font-size: 15px">crypte la communication</span></span><span style="font-family: 'MyriadPro Light'"> entre vous et le serveur, et en retour </span><span style="font-family: 'MyriadPro'">vous recevez</span> <span style="font-family: 'MyriadPro'">l'accueil du forum</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">[ATTACH=full]100639[/ATTACH]</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="font-size: 12px"><em>(en réalité vous en faites beaucoup plus qu'une comme vous pouvez le voir ci-dessous)</em></span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="font-size: 12px"></span></span></p> <p style="text-align: center">[ATTACH=full]100660[/ATTACH]</p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Le principe d'un serveur HTTP est normalement acquis passons à </span><span style="font-family: 'MyriadPro'">NodeJS</span><span style="font-family: 'MyriadPro Light'">, 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'</span><span style="font-family: 'MyriadPro'">exécuter du JavaScript du côté serveur [FA]fa-server[/FA]</span><span style="font-family: 'MyriadPro Light'">.</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><img src="https://userscontent2.emaze.com/images/be28dbea-b860-46ce-9a1c-20555a7b6022/c7f8e120188e6775eb3e0e25363b5e3e.jpg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="font-size: 12px"><em>(le fonctionnement asynchrone de NodeJS qui lui vaut une rapidité accrue face à PHP, crédits: emaze.com)</em></span></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">En effet le javascript jusqu'à là (avant 2010) était utilisé uniquement </span><span style="font-family: 'MyriadPro'">du côté client</span><span style="font-family: 'MyriadPro Light'"> & <u>interprété par vos navigateurs</u> 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.</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-border fa-download[/FA] </span><span style="font-family: 'MyriadPro'">INSTALLATION </span><span style="font-family: 'MyriadPro Light'">(sous Windows)</span></p><ol> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Rendez-vous sur le site de <a href="https://nodejs.org/en/" target="_blank">NodeJS</a>.</span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Téléchargez le fichier.</span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Procédez à l'installation.</span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Une fois terminée </span><span style="font-family: 'MyriadPro'">ouvrez votre CMD [FA]fa-code[/FA]</span><span style="font-family: 'MyriadPro Light'">.</span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Entrez la commande : <em>node</em>. Si vous obtenez une console (symoblisé par ce symbole : </span><span style="font-family: 'MyriadPro'">></span><span style="font-family: 'MyriadPro Light'">) , vous avez réussi.</span></li> </ol><p><span style="font-family: 'MyriadPro-Light'"><span style="font-family: 'MyriadPro-Light'">[FA]fa-border fa-code[/FA] </span><span style="font-family: 'MyriadPro-Regular'">COMMANDES </span></span></p><ul> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro-Regular'">node : </span><span style="font-family: 'MyriadPro Light'">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 <em>console.log('La console fonctionne bien !')</em>.</span></li> </ul> <p style="margin-left: 20px"><span style="font-family: 'MyriadPro-Light'">[ATTACH=full]100668[/ATTACH] </span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">[ATTACH=full]100665[/ATTACH] </span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Dernière définition à aborder avant de rentrer dans le vif du sujet, parlons peu parlons </span><span style="font-family: 'MyriadPro'">Express</span><span style="font-family: 'MyriadPro Light'"> ( <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite375" alt=":trollface:" title="Trollface :trollface:" loading="lazy" data-shortname=":trollface:" /> ). Très simplement, Express vous permet de </span><span style="font-family: 'MyriadPro'">créer des architectures [FA]fa-sitemap[/FA] web minimalistes</span><span style="font-family: 'MyriadPro Light'"> très facilement avec NodeJS. </span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">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 </span><span style="font-family: 'MyriadPro'">incorpore un tas de fonctionnalités basiques mais très importantes </span><span style="font-family: 'MyriadPro Light'">pour démarrer la création d'un site web [FA]fa-globe[/FA].</span></p> <p style="text-align: center"></p><p><span style="font-family: 'MyriadPro-Light'">[FA]fa-border fa-download[/FA] </span><span style="font-family: 'MyriadPro-Regular'">INSTALLATION </span></p><ol> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Créez un dossier "website" où vous le souhaitez.</span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Ouvrez</span> <span style="font-family: 'MyriadPro Light'">votre</span> CMD <span style="font-family: 'MyriadPro Light'">et entrez la commande : <em>cd</em> <em>chemin-vers-votre-dossier-website</em>.</span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Entrez la commande : <em>npm init --yes</em>.</span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Puis celle-ci : npm install express --save .</span></li> </ol><p><span style="font-family: 'MyriadPro-Light'"><span style="font-family: 'MyriadPro-Light'">[FA]fa-border fa-code[/FA] </span><span style="font-family: 'MyriadPro-Regular'">COMMANDES </span></span></p><ul> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro-Regular'"><span style="font-family: 'MyriadPro-Regular'">cd : </span></span><span style="font-family: 'MyriadPro Light'">cette commande vous permet de vous rendre dans un dossier si elle est suivie de l'emplacement de celui-ci.</span></li> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro'">npm : </span><span style="font-family: 'MyriadPro Light'">NPM est le gestionnaire de dépendances de NodeJS, c'est par ce biais que vous pouvez installer tout un tas de packages.</span></li> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro'">npm init --yes : </span><span style="font-family: 'MyriadPro Light'">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 <em>--yes</em>) pour nous.</span></li> <li data-xf-list-type="ul"><span style="font-family: 'MyriadPro'">npm install express --save : </span><span style="font-family: 'MyriadPro Light'">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 <em>node_modules</em>.</span></li> </ul><p><span style="font-family: 'MyriadPro Light'">Ainsi après avoir entrez nos commandes vous devriez obtenir un fichier <em>package.json</em> qui contiendra</span> <span style="font-family: 'MyriadPro'"><span style="font-family: 'MyriadPro'">les informations [FA]fa-info-circle[/FA] relatives à notre projet NodeJS (notre serveur HTTP)</span> </span><span style="font-family: 'MyriadPro Light'">comme <em>ses dépendances</em>, <em>son nom</em>, <em>sa description</em> etc. </span></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro-Light'">[ATTACH=full]100671[/ATTACH] </span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro-Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro-Light'">[ATTACH=full]100672[/ATTACH] </span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'">Entrons dans le vif du sujet : </span><span style="font-family: 'MyriadPro'">la création de notre serveur HTTP. </span></p><p></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Dans un premier temps nous allons créer un fichier <em>app.js</em>.</span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Modifiez votre fichier <em>package.json </em>pour modifier le nom de notre fichier principal.</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p style="margin-left: 20px"><span style="font-family: 'MyriadPro Light'"><img src="https://i.gyazo.com/0c332f9b46b4d56c0451353c876ee2e0.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p> <p style="margin-left: 20px"><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro-Light'">[FA]fa-angle-right[/FA] </span><span style="font-family: 'MyriadPro Light'">Ouvrez de nouveau votre fichier <em>app.js </em>pour faire appel à notre dépendance Express, chaque dépendance (nommée aussi</span> <span style="font-family: 'MyriadPro'">module</span><span style="font-family: 'MyriadPro Light'">) est appelée par</span> <span style="font-family: 'MyriadPro'">la méthode require</span><span style="font-family: 'MyriadPro-Light'">.</span></p><p><span style="font-family: 'MyriadPro-Light'">[CODE]var express = require('express');</span></p><p><span style="font-family: 'MyriadPro-Light'">var app = express();[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Nous allons</span> <span style="font-family: 'MyriadPro'">créer notre serveur HTTP</span> <span style="font-family: 'MyriadPro Light'">afin qu'il affiche "<em>Hello World !</em>" [FA]fa-child[/FA] lorsque nous nous rendrons sur celui-ci, c'est à dire qu'à chaque requête ayant</span> <span style="font-family: 'MyriadPro'">la méthode GET</span> <span style="font-family: 'MyriadPro Light'">sur notre serveur HTTP devra </span><span style="font-family: 'MyriadPro'">recevoir une réponse contenant le texte</span> <span style="font-family: 'MyriadPro Light'">"<em>Hello World !</em>".</span></p><p><span style="font-family: 'MyriadPro-Light'">[CODE]</span></p><p><span style="font-family: 'MyriadPro-Light'">/*</span></p><p> <span style="font-family: 'MyriadPro-Light'">Nous utilisons la méthode get qui permet d'utiliser une fonction qui s'exécutera lorsque</span></p><p> <span style="font-family: 'MyriadPro-Light'">nous voudrons nous rendre sur le chemin /. Cette fonction prend 2 paramètres : req & res.</span></p><p> <span style="font-family: 'MyriadPro-Light'">Ces deux paramètres sont des objets contenant pour le premier la requête, et le deuxième</span></p><p> <span style="font-family: 'MyriadPro-Light'">la réponse à envoyer.</span></p><p><span style="font-family: 'MyriadPro-Light'">*/</span></p><p><span style="font-family: 'MyriadPro-Light'">app.get('/', (req, res) => {</span></p><p><span style="font-family: 'MyriadPro-Light'"> /*enfin nous utilisons une méthode disponible via l'objet res pour retourner une réponse</span></p><p><span style="font-family: 'MyriadPro-Light'"> sous forme de plain/text.</span></p><p><span style="font-family: 'MyriadPro-Light'"> */</span></p><p><span style="font-family: 'MyriadPro-Light'"> res.send('Hello World !');</span></p><p><span style="font-family: 'MyriadPro-Light'">});</span></p><p><span style="font-family: 'MyriadPro-Light'">[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Enfin, </span><span style="font-family: 'MyriadPro'">nous devons démarrer [FA]fa-play[/FA] notre serveur HTTP</span><span style="font-family: 'MyriadPro Light'"> en lui demandant d'être disponible, d'écouter sur un port spécifique.</span></p><p><span style="font-family: 'MyriadPro-Light'">[CODE]app.listen(8989, function(){</span></p><p><span style="font-family: 'MyriadPro-Light'"> //se code s'exécutera à chaque fois que le serveur HTTP se lancera.</span></p><p><span style="font-family: 'MyriadPro-Light'"> console.log("Le serveur HTTP a bien démarré sur le port 8989");</span></p><p><span style="font-family: 'MyriadPro-Light'">});</span></p><p><span style="font-family: 'MyriadPro-Light'">[/CODE]</span></p><p><span style="font-family: 'MyriadPro-Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Pour </span><span style="font-family: 'MyriadPro'">exécuter notre script</span><span style="font-family: 'MyriadPro Light'"> et donc notre serveur, il faut exécuter la commande <em>node app.js, </em>pour l'arrêter faites CTRL + C.</span></p><p></p><p style="margin-left: 20px"><span style="font-family: 'MyriadPro-Light'"><img src="https://i.gyazo.com/6889d3a149d7a3f71a970dd0cdcf1cd1.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p><p></p><p><span style="font-family: 'MyriadPro Light'"><span style="font-size: 12px"><span style="color: rgb(255, 0, 0)">[FA]fa-border fa-warning[/FA]</span> En cas d'erreur, changez le port il se peut qu'il soit déjà utilisé.</span></span></p><p></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Rendez-vous ensuite sur l'URL suivante : <u><a href="http://localhost:8989" target="_blank">http://localhost:8989</a></u> pour observer le résultat. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite348" alt=":cool:" title="Cool :cool:" loading="lazy" data-shortname=":cool:" /></span></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro-Light'">[ATTACH=full]100674[/ATTACH] </span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro-Light'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro-Light'">[ATTACH=full]100675[/ATTACH] </span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro Light'"><span style="font-family: 'MyriadPro Light'">Nous avons vu <u>un exemple basique</u>, essayons maintenant de réaliser quelque chose de basique :</span> </span><span style="font-family: 'MyriadPro'">une page de contact permettant d'envoyer un mail [FA]fa-paper-plane-o[/FA] lors de sa soumission</span><span style="font-family: 'MyriadPro Light'">.</span></p> <p style="text-align: center"></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Dans un premier temps nous allons rendre notre page un peu plus jolie avec Twitter Bootstrap, pour se faire crééons un dossier "<em>static</em>" qui va contenir notre CSS, notre JS etc.</span></p><p style="margin-left: 20px"><span style="font-family: 'MyriadPro Light'"></span></p> <p style="margin-left: 20px"><span style="font-family: 'MyriadPro Light'">[ATTACH=full]100676[/ATTACH] </span></p> <p style="margin-left: 20px"><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Express ne sait pas que ce dossier doit servir des fichiers statiques il va donc ne rien servir puisque aucune méthode GET pour ses fichiers & dossiers n'a été écrite, </span><span style="font-family: 'MyriadPro'">nous devons donc déclarer notre dossier [FA]fa-folder-o[/FA].</span></p><p><span style="font-family: 'MyriadPro-Light'">[CODE]/*</span></p><p><span style="font-family: 'MyriadPro-Light'"> on déclare notre dossier "static" qui va indiquer à Express qu'il faut</span></p><p><span style="font-family: 'MyriadPro-Light'"> servir les fichiers contenus dans ce dossier comme des fichiers statiques.</span></p><p><span style="font-family: 'MyriadPro-Light'">*/</span></p><p><span style="font-family: 'MyriadPro-Light'">app.use(express.static('static'));[/CODE]</span></p><p></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] <span style="font-family: 'MyriadPro Light'">Vous pouvez accéder votre dossier static après avoir sauvegardé mais vous constaterez que vous obtiendrez une erreur [FA]fa-meh-o[/FA] du type : <em>CANNOT GET /static</em>, c'est tout à fait normal et ceci pour deux raisons :</span></span></p><ol style="margin-left: 20px"> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">Vous n'avez pas relancé votre serveur HTTP, et oui,</span> <span style="font-family: 'MyriadPro'">à chaque modification vous devez relancer votre serveur</span><span style="font-family: 'MyriadPro-Light'">. </span><span style="font-family: 'MyriadPro'">Mais heureusement pour vous un package nommé</span> <span style="font-family: 'MyriadPro Light'"><em>nodemon</em> 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 <em>npm install nodemon -g </em>, l'option -g permet d'</span><span style="font-family: 'MyriadPro'">installer ce module globalement sur votre ordinateur </span><span style="font-family: 'MyriadPro Light'">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 <em>nodemon app.js </em>au lieu de <em>node app.js</em>. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite351" alt=";)" title="Clin d'oeil ;)" loading="lazy" data-shortname=";)" /></span></li> <li data-xf-list-type="ol"><span style="font-family: 'MyriadPro Light'">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 <em>static</em>, c'est à dire qu'au lieu de vouloir accéder à <em>static/css</em> vous pouvez directement y accéder via <em>css</em>.</span></li> </ol> <p style="margin-left: 20px"><span style="font-family: 'MyriadPro-Light'"><span style="font-family: 'MyriadPro-Light'"><img src="https://i.gyazo.com/473898b1ecaf078fbd55e694477ea9cf.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></span></p> <p style="margin-left: 20px"><span style="font-family: 'MyriadPro-Light'"><span style="font-family: 'MyriadPro-Light'">[ATTACH=full]100677[/ATTACH] </span></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Crééons ensuite deux fichiers : index.html & contact.html.</span></p><p></p><p><span style="font-family: 'MyriadPro'">[FA]fa-border fa-html5[/FA] INDEX.HTML</span></p><p><span style="font-family: 'MyriadPro-Light'">[HTML]<!DOCTYPE html></span></p><p><span style="font-family: 'MyriadPro-Light'"><html></span></p><p><span style="font-family: 'MyriadPro-Light'"> <head></span></p><p><span style="font-family: 'MyriadPro-Light'"> <title>Bienvenue sur l'accueil !</title></span></p><p><span style="font-family: 'MyriadPro-Light'"> <meta charset="utf-8"/></span></p><p><span style="font-family: 'MyriadPro-Light'"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/></span></p><p><span style="font-family: 'MyriadPro-Light'"> </head></span></p><p><span style="font-family: 'MyriadPro-Light'"> <body></span></p><p><span style="font-family: 'MyriadPro-Light'"> <h1>Bienvenue sur l'accueil !</h1></span></p><p><span style="font-family: 'MyriadPro-Light'"> <p>Je t'invite à <a href="contact">me contacter</a>. </p></span></p><p><span style="font-family: 'MyriadPro-Light'"> </body></span></p><p><span style="font-family: 'MyriadPro-Light'"></html></span></p><p><span style="font-family: 'MyriadPro-Light'">[/HTML]</span></p><p></p><p><span style="font-family: 'MyriadPro'">[FA]fa-border fa-html5[/FA] CONTACT.HTML</span></p><p><span style="font-family: 'MyriadPro Light'">[HTML]<!DOCTYPE html></span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'"><html></span></p><p><span style="font-family: 'MyriadPro Light'"> <head></span></p><p><span style="font-family: 'MyriadPro Light'"> <title>Nous contacter</title></span></p><p><span style="font-family: 'MyriadPro Light'"> <meta charset="utf-8"/></span></p><p><span style="font-family: 'MyriadPro Light'"> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/></span></p><p><span style="font-family: 'MyriadPro Light'"> </head></span></p><p><span style="font-family: 'MyriadPro Light'"> <body></span></p><p><span style="font-family: 'MyriadPro Light'"> <h1>Bienvenue sur la page de contact</h1></span></p><p><span style="font-family: 'MyriadPro Light'"> <form action method="POST"></span></p><p><span style="font-family: 'MyriadPro Light'"> <div class="form-group"></span></p><p><span style="font-family: 'MyriadPro Light'"> <label for="message">Votre message</label></span></p><p><span style="font-family: 'MyriadPro Light'"> <textarea class="form-control" name="message" id="message" rows="3"></textarea></span></p><p><span style="font-family: 'MyriadPro Light'"> <button type="submit" class="btn btn-primary">Envoyer</button></span></p><p><span style="font-family: 'MyriadPro Light'"> </div></span></p><p><span style="font-family: 'MyriadPro Light'"> </form></span></p><p><span style="font-family: 'MyriadPro Light'"> </body></span></p><p><span style="font-family: 'MyriadPro Light'"></html></span></p><p><span style="font-family: 'MyriadPro Light'">[/HTML]</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Nous devons ensuite les déclarer (ce qu'on appelle du routing) grâce à </span><span style="font-family: 'MyriadPro'">notre méthode get</span><span style="font-family: 'MyriadPro Light'"> contenue dans l'objet de réponse ainsi qu'à une méthode <em>sendFile</em> qui va permettre "d'envoyer" nos fichiers HTML en tant que réponse. </span></p><p><span style="font-family: 'MyriadPro Light'">[CODE]app.get('/', (req, res) => {</span></p><p><span style="font-family: 'MyriadPro Light'"> res.sendFile(__dirname + "/" + 'index.html');</span></p><p><span style="font-family: 'MyriadPro Light'">});</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">app.get('/contact', (req, res) => {</span></p><p><span style="font-family: 'MyriadPro Light'"> res.sendFile(__dirname + "/" + 'contact.html');</span></p><p><span style="font-family: 'MyriadPro Light'">});[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p style="text-align: center">[ATTACH=full]100688[/ATTACH]</p> <p style="text-align: center">[ATTACH=full]100689[/ATTACH]</p> <p style="text-align: center"></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Nous allons utiliser </span><span style="font-family: 'MyriadPro'">nodemailer</span><span style="font-family: 'MyriadPro Light'"> qui est un module très simple d'utilisation pour l'envoi d'emails [FA]fa-envelope-o[/FA], installez le très simplement toujours avec la même commande [FA]fa-code[/FA] : <em>npm install nodemailer --save, </em>le module est à appelé comme les autres.</span></p><p><span style="font-family: 'MyriadPro Light'">[CODE]var nodemailer = require('nodemailer');</span></p><p><span style="font-family: 'MyriadPro Light'">[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Pour envoyer un email après la soumission du formulaire il faut utiliser </span><strong><span style="font-family: 'MyriadPro'">la méthode POST</span></strong><span style="font-family: 'MyriadPro Light'"> pour le chemin <em>/contact</em>.</span></p><p><span style="font-family: 'MyriadPro Light'">[CODE]app.post('/contact', (req, res) => {</span></p><p><span style="font-family: 'MyriadPro Light'"> //le code s'exécutera après une requête avec la méthode POST</span></p><p><span style="font-family: 'MyriadPro Light'">});[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Il faut également que nous installions le module </span><em><span style="font-family: 'MyriadPro Light'">body-parser</span></em><span style="font-family: 'MyriadPro Light'"> qui nous permet d'</span><span style="font-family: 'MyriadPro'">extraire nos données envoyées</span><span style="font-family: 'MyriadPro Light'"> en POST, vous connaissez la routine : </span><em><span style="font-family: 'MyriadPro Light'">npm install body-parser --save</span></em><span style="font-family: 'MyriadPro Light'"> et on le déclare en début de fichier.</span></p><p><span style="font-family: 'MyriadPro Light'">[CODE]var bodyParser = require('body-parser');</span></p><p><span style="font-family: 'MyriadPro Light'">[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Nous allons utiliser </span><span style="font-family: 'MyriadPro'">notre propre compte mail</span><span style="font-family: 'MyriadPro Light'">, en l'occurence nous utiliserons Gmail, d'après l'exemple disponible sur le site <a href="https://nodemailer.com/" target="_blank">https://nodemailer.com/</a> il faut tout d'abord déclarer notre </span><em><span style="font-family: 'MyriadPro Light'">transporter</span></em><span style="font-family: 'MyriadPro Light'"> qui sera le service utilisé et techniquement l'objet que nous allons utiliser pour envoyer le mail.</span></p><p><span style="font-family: 'MyriadPro Light'">[CODE] var transporter = nodemailer.createTransport('smtps://bernard221@gmail.com:Azerty1234@smtp.gmail.com');</span></p><p><span style="font-family: 'MyriadPro Light'">[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Ensuite il faut définir un tas d'options telle que </span><span style="font-family: 'MyriadPro'">l'email de l'expéditeur</span><span style="font-family: 'MyriadPro Light'">, </span><span style="font-family: 'MyriadPro'">l'email du receveur</span><span style="font-family: 'MyriadPro Light'">, </span><span style="font-family: 'MyriadPro'">le message</span><span style="font-family: 'MyriadPro Light'"> et </span><span style="font-family: 'MyriadPro'">l'objet</span><span style="font-family: 'MyriadPro Light'">.</span></p><p><span style="font-family: 'MyriadPro Light'">[CODE] var mailOptions = {</span></p><p><span style="font-family: 'MyriadPro Light'"> from: '"Bernard" <bernard221@gmail.com>', // de qui</span></p><p><span style="font-family: 'MyriadPro Light'"> to: '"Bernard" <bernard221@gmail.com>', // vers qui</span></p><p><span style="font-family: 'MyriadPro Light'"> subject: 'Demande de contact effectué depuis le site', // l'objet</span></p><p><span style="font-family: 'MyriadPro Light'"> text: req.body.message, //l'email brute qui n'est autre que notre message</span></p><p><span style="font-family: 'MyriadPro Light'"> html: req.body.message //l'email avec des balises HTML qui au final dans notre cas reviens à l'email brute</span></p><p><span style="font-family: 'MyriadPro Light'"> };[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Enfin nous envoyons notre email grâce à la fonction <em>sendMail</em> qui prend en paramètres nos options, mais également un <em>callback</em> c'est à dire une fonction qui va être appelée</span><span style="font-family: 'MyriadPro'"> lorsque la requête d'envoie de mail sera terminée</span><span style="font-family: 'MyriadPro Light'">.</span></p><p><span style="font-family: 'MyriadPro Light'">[CODE]transporter.sendMail(mailOptions, function(error, info){</span></p><p><span style="font-family: 'MyriadPro Light'"> if(error){</span></p><p><span style="font-family: 'MyriadPro Light'"> return console.log(error);</span></p><p><span style="font-family: 'MyriadPro Light'"> }</span></p><p><span style="font-family: 'MyriadPro Light'"> console.log('Email envoyé: ' + info.response);</span></p><p><span style="font-family: 'MyriadPro Light'"> res.redirect('/');</span></p><p><span style="font-family: 'MyriadPro Light'"> });[/CODE]</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-angle-right[/FA] Essayez d'envoyer un email, soumettez le formulaire et </span><span style="font-family: 'MyriadPro'">regarder la console</span><span style="font-family: 'MyriadPro Light'"> ainsi que </span><span style="font-family: 'MyriadPro'">votre boite mail</span><span style="font-family: 'MyriadPro Light'">. [FA]fa-magic[/FA]</span></p><p><span style="font-family: 'MyriadPro Light'"></span></p><p style="margin-left: 20px"><span style="font-family: 'MyriadPro Light'">[ATTACH=full]100691[/ATTACH]</span></p> <p style="margin-left: 20px"><span style="font-family: 'MyriadPro Light'"></span></p><p><span style="font-family: 'MyriadPro Light'">[FA]fa-border fa-hand-o-right[/FA] Nous en avons terminé pour ce tutoriel, bien sûr il manque pas mal de choses comme des <em>vérifications de contenu</em>, <em>spam anti-robot</em> etc. mais l'idée principale était de vous faire</span> <span style="font-family: 'MyriadPro'">découvrir NodeJS & Express</span><span style="font-family: 'MyriadPro-Light'"> ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite363" alt=":smile:" title="Smile :smile:" loading="lazy" data-shortname=":smile:" /></span></p><p><span style="font-family: 'MyriadPro-Light'"></span></p><p style="text-align: center"><span style="font-family: 'MyriadPro-Light'">[ATTACH=full]100693[/ATTACH]</span></p></blockquote><p></p>
[QUOTE="Rivals, post: 6903430, member: 694298"] [CENTER][ATTACH=full]100659[/ATTACH] [FONT=MyriadPro Light]Bonjour à tous [FA]fa-smile-o[/FA], nous allons aujourd'hui apprendre à créer [/FONT][COLOR=rgb(0, 0, 0)][FONT=MyriadPro]notre premier serveur HTTP[/FONT][FONT=MyriadPro Light][B] [FA]fa-server[/FA][/B][/FONT][/COLOR][FONT=MyriadPro Light] à l'aide de [COLOR=#000000][I]NodeJS[/I][/COLOR] couplé à [COLOR=#000000][I]Express[/I][/COLOR][COLOR=rgb(0, 89, 179)].[/COLOR][/FONT] [/CENTER] [LEFT][FONT=MyriadPro Light][COLOR=#000000][U][FA]fa-align-justify[/FA] SOMMAIRE :[/U][/COLOR][/FONT][/LEFT] [INDENT][LEFT][FONT=MyriadPro Light] [FA]fa-angle-right[/FA] [/FONT][FONT=MyriadPro]Qu'est-ce qu'un serveur HTTP ?[/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] [/FONT][FONT=MyriadPro]Qu'est-ce que NodeJS ?[/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] [/FONT][FONT=MyriadPro]Qu'est-ce que Express ?[/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] [/FONT][FONT=MyriadPro]Réalisation du serveur [FONT=MyriadPro-Light][FA]fa-angle-right[/FA] [/FONT][FONT=MyriadPro-Regular]Réalisation d'une page de contact[/FONT][/FONT][/LEFT][/INDENT] [CENTER][FONT=MyriadPro Light] 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[/FONT][FONT=MyriadPro] des bases solides en JavaScript[/FONT][FONT=MyriadPro Light].[/FONT] [ATTACH=full]100661[/ATTACH] [FONT=MyriadPro Light]Dans un premier temps, revenons au fonctionnement du [/FONT][B][FONT=MyriadPro]w[/FONT][/B][FONT=MyriadPro Light]orld [/FONT][B][FONT=MyriadPro]w[/FONT][/B][FONT=MyriadPro Light]ide [/FONT][B][FONT=MyriadPro]w[/FONT][/B][FONT=MyriadPro Light]eb plus particulièrement en[I]1990[/I] lorsque l'[/FONT][FONT=MyriadPro]HTTP[/FONT][FONT=MyriadPro Light] fût créé. :rêve:[/FONT] [ATTACH=full]100696[/ATTACH] [FONT=MyriadPro Light][SIZE=3][I](crédits: infowebmaster.fr)[/I][/SIZE] Un serveur HTTP est tout simplement un serveur qui va pouvoir [/FONT][FONT=MyriadPro]communiquer [FA]fa-exchange[/FA][/FONT][FONT=MyriadPro Light] avec un internaute (client) par le biais du [/FONT][FONT=MyriadPro]protocole HTTP[/FONT][FONT=MyriadPro Light], grossièrement le client [/FONT][FONT=MyriadPro]envoie une requête [FA]fa-share[/FA][/FONT][FONT=MyriadPro Light] au serveur quant au serveur il [/FONT][FONT=MyriadPro]envoie une réponse [FA]fa-reply[/FA][/FONT][FONT=MyriadPro Light] en retour.[/FONT] [FONT=MyriadPro Light]Ainsi lorsque vous accédez à [URL='https://reality-gaming.fr'][U]https://reality-gaming.fr[/U][/URL] vous envoyez une requête au serveur HTTP[/FONT][FONT=MyriadPro]S[/FONT][FONT=MyriadPro Light], qui est une variante de l'HTTP mais celle-ci [/FONT][FONT=MyriadPro][SIZE=4]crypte la communication[/SIZE][/FONT][FONT=MyriadPro Light] entre vous et le serveur, et en retour [/FONT][FONT=MyriadPro]vous recevez[/FONT] [FONT=MyriadPro]l'accueil du forum[/FONT] [FONT=MyriadPro Light][ATTACH=full]100639[/ATTACH] [SIZE=3][I](en réalité vous en faites beaucoup plus qu'une comme vous pouvez le voir ci-dessous)[/I] [/SIZE][/FONT] [ATTACH=full]100660[/ATTACH] [FONT=MyriadPro Light]Le principe d'un serveur HTTP est normalement acquis passons à [/FONT][FONT=MyriadPro]NodeJS[/FONT][FONT=MyriadPro Light], 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'[/FONT][FONT=MyriadPro]exécuter du JavaScript du côté serveur [FA]fa-server[/FA][/FONT][FONT=MyriadPro Light]. [/FONT] [IMG]https://userscontent2.emaze.com/images/be28dbea-b860-46ce-9a1c-20555a7b6022/c7f8e120188e6775eb3e0e25363b5e3e.jpg[/IMG] [FONT=MyriadPro Light][SIZE=3][I](le fonctionnement asynchrone de NodeJS qui lui vaut une rapidité accrue face à PHP, crédits: emaze.com)[/I][/SIZE] En effet le javascript jusqu'à là (avant 2010) était utilisé uniquement [/FONT][FONT=MyriadPro]du côté client[/FONT][FONT=MyriadPro Light] & [U]interprété par vos navigateurs[/U] 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. [/FONT][/CENTER] [FONT=MyriadPro Light][FA]fa-border fa-download[/FA] [/FONT][FONT=MyriadPro]INSTALLATION [/FONT][FONT=MyriadPro Light](sous Windows)[/FONT] [LIST=1] [*][FONT=MyriadPro Light]Rendez-vous sur le site de [URL='https://nodejs.org/en/']NodeJS[/URL].[/FONT] [*][FONT=MyriadPro Light]Téléchargez le fichier.[/FONT] [*][FONT=MyriadPro Light]Procédez à l'installation.[/FONT] [*][FONT=MyriadPro Light]Une fois terminée [/FONT][FONT=MyriadPro]ouvrez votre CMD [FA]fa-code[/FA][/FONT][FONT=MyriadPro Light].[/FONT] [*][FONT=MyriadPro Light]Entrez la commande : [I]node[/I]. Si vous obtenez une console (symoblisé par ce symbole : [/FONT][FONT=MyriadPro]>[/FONT][FONT=MyriadPro Light]) , vous avez réussi.[/FONT] [/LIST] [FONT=MyriadPro-Light][FONT=MyriadPro-Light][FA]fa-border fa-code[/FA] [/FONT][FONT=MyriadPro-Regular]COMMANDES [/FONT][/FONT] [LIST] [*][FONT=MyriadPro-Regular]node : [/FONT][FONT=MyriadPro Light]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 [I]console.log('La console fonctionne bien !')[/I].[/FONT] [/LIST] [INDENT][FONT=MyriadPro-Light][ATTACH=full]100668[/ATTACH] [/FONT][/INDENT] [CENTER][FONT=MyriadPro Light] [ATTACH=full]100665[/ATTACH] Dernière définition à aborder avant de rentrer dans le vif du sujet, parlons peu parlons [/FONT][FONT=MyriadPro]Express[/FONT][FONT=MyriadPro Light] ( :troll: ). Très simplement, Express vous permet de [/FONT][FONT=MyriadPro]créer des architectures [FA]fa-sitemap[/FA] web minimalistes[/FONT][FONT=MyriadPro Light] très facilement avec NodeJS. [/FONT] [FONT=MyriadPro Light]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 [/FONT][FONT=MyriadPro]incorpore un tas de fonctionnalités basiques mais très importantes [/FONT][FONT=MyriadPro Light]pour démarrer la création d'un site web [FA]fa-globe[/FA].[/FONT] [/CENTER] [FONT=MyriadPro-Light][FA]fa-border fa-download[/FA] [/FONT][FONT=MyriadPro-Regular]INSTALLATION [/FONT] [LIST=1] [*][FONT=MyriadPro Light]Créez un dossier "website" où vous le souhaitez.[/FONT] [*][FONT=MyriadPro Light]Ouvrez[/FONT] [FONT=MyriadPro Light]votre[/FONT] CMD [FONT=MyriadPro Light]et entrez la commande : [I]cd[/I] [I]chemin-vers-votre-dossier-website[/I].[/FONT] [*][FONT=MyriadPro Light]Entrez la commande : [I]npm init --yes[/I].[/FONT] [*][FONT=MyriadPro Light]Puis celle-ci : npm install express --save .[/FONT] [/LIST] [FONT=MyriadPro-Light][FONT=MyriadPro-Light][FA]fa-border fa-code[/FA] [/FONT][FONT=MyriadPro-Regular]COMMANDES [/FONT][/FONT] [LIST] [*][FONT=MyriadPro-Regular][FONT=MyriadPro-Regular]cd : [/FONT][/FONT][FONT=MyriadPro Light]cette commande vous permet de vous rendre dans un dossier si elle est suivie de l'emplacement de celui-ci.[/FONT] [*][FONT=MyriadPro]npm : [/FONT][FONT=MyriadPro Light]NPM est le gestionnaire de dépendances de NodeJS, c'est par ce biais que vous pouvez installer tout un tas de packages.[/FONT] [*][FONT=MyriadPro]npm init --yes : [/FONT][FONT=MyriadPro Light]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 [I]--yes[/I]) pour nous.[/FONT] [*][FONT=MyriadPro]npm install express --save : [/FONT][FONT=MyriadPro Light]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 [I]node_modules[/I].[/FONT] [/LIST] [FONT=MyriadPro Light]Ainsi après avoir entrez nos commandes vous devriez obtenir un fichier [I]package.json[/I] qui contiendra[/FONT] [FONT=MyriadPro][FONT=MyriadPro]les informations [FA]fa-info-circle[/FA] relatives à notre projet NodeJS (notre serveur HTTP)[/FONT] [/FONT][FONT=MyriadPro Light]comme [I]ses dépendances[/I], [I]son nom[/I], [I]sa description[/I] etc. [/FONT] [CENTER][FONT=MyriadPro-Light][ATTACH=full]100671[/ATTACH] [ATTACH=full]100672[/ATTACH] [/FONT] [FONT=MyriadPro Light]Entrons dans le vif du sujet : [/FONT][FONT=MyriadPro]la création de notre serveur HTTP. [/FONT][/CENTER] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Dans un premier temps nous allons créer un fichier [I]app.js[/I]. [FA]fa-angle-right[/FA] Modifiez votre fichier [I]package.json [/I]pour modifier le nom de notre fichier principal. [/FONT] [INDENT][FONT=MyriadPro Light][IMG]https://i.gyazo.com/0c332f9b46b4d56c0451353c876ee2e0.gif[/IMG] [/FONT][/INDENT] [FONT=MyriadPro-Light][FA]fa-angle-right[/FA] [/FONT][FONT=MyriadPro Light]Ouvrez de nouveau votre fichier [I]app.js [/I]pour faire appel à notre dépendance Express, chaque dépendance (nommée aussi[/FONT] [FONT=MyriadPro]module[/FONT][FONT=MyriadPro Light]) est appelée par[/FONT] [FONT=MyriadPro]la méthode require[/FONT][FONT=MyriadPro-Light]. [CODE]var express = require('express'); var app = express();[/CODE][/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Nous allons[/FONT] [FONT=MyriadPro]créer notre serveur HTTP[/FONT] [FONT=MyriadPro Light]afin qu'il affiche "[I]Hello World ![/I]" [FA]fa-child[/FA] lorsque nous nous rendrons sur celui-ci, c'est à dire qu'à chaque requête ayant[/FONT] [FONT=MyriadPro]la méthode GET[/FONT] [FONT=MyriadPro Light]sur notre serveur HTTP devra [/FONT][FONT=MyriadPro]recevoir une réponse contenant le texte[/FONT] [FONT=MyriadPro Light]"[I]Hello World ![/I]".[/FONT] [FONT=MyriadPro-Light][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][/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Enfin, [/FONT][FONT=MyriadPro]nous devons démarrer [FA]fa-play[/FA] notre serveur HTTP[/FONT][FONT=MyriadPro Light] en lui demandant d'être disponible, d'écouter sur un port spécifique.[/FONT] [FONT=MyriadPro-Light][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"); }); [/CODE] [/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Pour [/FONT][FONT=MyriadPro]exécuter notre script[/FONT][FONT=MyriadPro Light] et donc notre serveur, il faut exécuter la commande [I]node app.js, [/I]pour l'arrêter faites CTRL + C.[/FONT] [INDENT][FONT=MyriadPro-Light][IMG]https://i.gyazo.com/6889d3a149d7a3f71a970dd0cdcf1cd1.gif[/IMG][/FONT][/INDENT] [FONT=MyriadPro Light][SIZE=3][COLOR=rgb(255, 0, 0)][FA]fa-border fa-warning[/FA][/COLOR] En cas d'erreur, changez le port il se peut qu'il soit déjà utilisé.[/SIZE][/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Rendez-vous ensuite sur l'URL suivante : [U][URL]http://localhost:8989[/URL][/U] pour observer le résultat. :cool:[/FONT] [CENTER][FONT=MyriadPro-Light][ATTACH=full]100674[/ATTACH] [ATTACH=full]100675[/ATTACH] [/FONT] [FONT=MyriadPro Light][FONT=MyriadPro Light]Nous avons vu [U]un exemple basique[/U], essayons maintenant de réaliser quelque chose de basique :[/FONT] [/FONT][FONT=MyriadPro]une page de contact permettant d'envoyer un mail [FA]fa-paper-plane-o[/FA] lors de sa soumission[/FONT][FONT=MyriadPro Light].[/FONT] [/CENTER] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Dans un premier temps nous allons rendre notre page un peu plus jolie avec Twitter Bootstrap, pour se faire crééons un dossier "[I]static[/I]" qui va contenir notre CSS, notre JS etc.[/FONT] [INDENT][FONT=MyriadPro Light] [ATTACH=full]100676[/ATTACH] [/FONT][/INDENT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Express ne sait pas que ce dossier doit servir des fichiers statiques il va donc ne rien servir puisque aucune méthode GET pour ses fichiers & dossiers n'a été écrite, [/FONT][FONT=MyriadPro]nous devons donc déclarer notre dossier [FA]fa-folder-o[/FA].[/FONT] [FONT=MyriadPro-Light][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'));[/CODE][/FONT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] [FONT=MyriadPro Light]Vous pouvez accéder votre dossier static après avoir sauvegardé mais vous constaterez que vous obtiendrez une erreur [FA]fa-meh-o[/FA] du type : [I]CANNOT GET /static[/I], c'est tout à fait normal et ceci pour deux raisons :[/FONT][/FONT] [INDENT][LIST=1] [*][FONT=MyriadPro Light]Vous n'avez pas relancé votre serveur HTTP, et oui,[/FONT] [FONT=MyriadPro]à chaque modification vous devez relancer votre serveur[/FONT][FONT=MyriadPro-Light]. [/FONT][FONT=MyriadPro]Mais heureusement pour vous un package nommé[/FONT] [FONT=MyriadPro Light][I]nodemon[/I] 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 [I]npm install nodemon -g [/I], l'option -g permet d'[/FONT][FONT=MyriadPro]installer ce module globalement sur votre ordinateur [/FONT][FONT=MyriadPro Light]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 [I]nodemon app.js [/I]au lieu de [I]node app.js[/I]. ;)[/FONT] [*][FONT=MyriadPro Light]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 [I]static[/I], c'est à dire qu'au lieu de vouloir accéder à [I]static/css[/I] vous pouvez directement y accéder via [I]css[/I].[/FONT] [/LIST] [FONT=MyriadPro-Light][FONT=MyriadPro-Light][IMG]https://i.gyazo.com/473898b1ecaf078fbd55e694477ea9cf.gif[/IMG] [ATTACH=full]100677[/ATTACH] [/FONT][/FONT][/INDENT] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Crééons ensuite deux fichiers : index.html & contact.html.[/FONT] [FONT=MyriadPro][FA]fa-border fa-html5[/FA] INDEX.HTML[/FONT] [FONT=MyriadPro-Light][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> [/HTML][/FONT] [FONT=MyriadPro][FA]fa-border fa-html5[/FA] CONTACT.HTML[/FONT] [FONT=MyriadPro Light][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> [/HTML] [FA]fa-angle-right[/FA] Nous devons ensuite les déclarer (ce qu'on appelle du routing) grâce à [/FONT][FONT=MyriadPro]notre méthode get[/FONT][FONT=MyriadPro Light] contenue dans l'objet de réponse ainsi qu'à une méthode [I]sendFile[/I] 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'); });[/CODE] [/FONT] [CENTER][ATTACH=full]100688[/ATTACH] [ATTACH=full]100689[/ATTACH] [/CENTER] [FONT=MyriadPro Light][FA]fa-angle-right[/FA] Nous allons utiliser [/FONT][FONT=MyriadPro]nodemailer[/FONT][FONT=MyriadPro Light] qui est un module très simple d'utilisation pour l'envoi d'emails [FA]fa-envelope-o[/FA], installez le très simplement toujours avec la même commande [FA]fa-code[/FA] : [I]npm install nodemailer --save, [/I]le module est à appelé comme les autres. [CODE]var nodemailer = require('nodemailer'); [/CODE] [FA]fa-angle-right[/FA] Pour envoyer un email après la soumission du formulaire il faut utiliser [/FONT][B][FONT=MyriadPro]la méthode POST[/FONT][/B][FONT=MyriadPro Light] pour le chemin [I]/contact[/I]. [CODE]app.post('/contact', (req, res) => { //le code s'exécutera après une requête avec la méthode POST });[/CODE] [FA]fa-angle-right[/FA] Il faut également que nous installions le module [/FONT][I][FONT=MyriadPro Light]body-parser[/FONT][/I][FONT=MyriadPro Light] qui nous permet d'[/FONT][FONT=MyriadPro]extraire nos données envoyées[/FONT][FONT=MyriadPro Light] en POST, vous connaissez la routine : [/FONT][I][FONT=MyriadPro Light]npm install body-parser --save[/FONT][/I][FONT=MyriadPro Light] et on le déclare en début de fichier. [CODE]var bodyParser = require('body-parser'); [/CODE] [FA]fa-angle-right[/FA] Nous allons utiliser [/FONT][FONT=MyriadPro]notre propre compte mail[/FONT][FONT=MyriadPro Light], en l'occurence nous utiliserons Gmail, d'après l'exemple disponible sur le site [URL]https://nodemailer.com/[/URL] il faut tout d'abord déclarer notre [/FONT][I][FONT=MyriadPro Light]transporter[/FONT][/I][FONT=MyriadPro Light] qui sera le service utilisé et techniquement l'objet que nous allons utiliser pour envoyer le mail. [CODE] var transporter = nodemailer.createTransport('smtps://bernard221@gmail.com:Azerty1234@smtp.gmail.com'); [/CODE] [FA]fa-angle-right[/FA] Ensuite il faut définir un tas d'options telle que [/FONT][FONT=MyriadPro]l'email de l'expéditeur[/FONT][FONT=MyriadPro Light], [/FONT][FONT=MyriadPro]l'email du receveur[/FONT][FONT=MyriadPro Light], [/FONT][FONT=MyriadPro]le message[/FONT][FONT=MyriadPro Light] et [/FONT][FONT=MyriadPro]l'objet[/FONT][FONT=MyriadPro Light]. [CODE] var mailOptions = { from: '"Bernard" <bernard221@gmail.com>', // de qui to: '"Bernard" <bernard221@gmail.com>', // 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] [FA]fa-angle-right[/FA] Enfin nous envoyons notre email grâce à la fonction [I]sendMail[/I] qui prend en paramètres nos options, mais également un [I]callback[/I] c'est à dire une fonction qui va être appelée[/FONT][FONT=MyriadPro] lorsque la requête d'envoie de mail sera terminée[/FONT][FONT=MyriadPro Light]. [CODE]transporter.sendMail(mailOptions, function(error, info){ if(error){ return console.log(error); } console.log('Email envoyé: ' + info.response); res.redirect('/'); });[/CODE] [FA]fa-angle-right[/FA] Essayez d'envoyer un email, soumettez le formulaire et [/FONT][FONT=MyriadPro]regarder la console[/FONT][FONT=MyriadPro Light] ainsi que [/FONT][FONT=MyriadPro]votre boite mail[/FONT][FONT=MyriadPro Light]. [FA]fa-magic[/FA] [/FONT] [INDENT][FONT=MyriadPro Light][ATTACH=full]100691[/ATTACH] [/FONT][/INDENT] [FONT=MyriadPro Light][FA]fa-border fa-hand-o-right[/FA] Nous en avons terminé pour ce tutoriel, bien sûr il manque pas mal de choses comme des [I]vérifications de contenu[/I], [I]spam anti-robot[/I] etc. mais l'idée principale était de vous faire[/FONT] [FONT=MyriadPro]découvrir NodeJS & Express[/FONT][FONT=MyriadPro-Light] ! :smile: [/FONT] [CENTER][FONT=MyriadPro-Light][ATTACH=full]100693[/ATTACH][/FONT][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Express : créez votre premier serveur HTTP avec NodeJS !
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut