Hello World

Maintenant que nous avons installé tout ce dont nous avons besoin pour réaliser cette application, nous pouvons commencer !

Vous avez désormais appris tous les langages qui nous serviront dans ce tutoriel, mais vous n’avez probablement jamais élaboré une application complète avec. Ce programme tout simple permet de comprendre la structure de base de l’application que nous allons réaliser. Le code, bien que très court, sera séparé en plusieurs fichiers en prévision de la création du forum.

Les fichiers et dossiers

Commençons tout d’abord par bâtir la structure de base nécessaire à l’élaboration de ce Hello World. D’autres fichiers seront ensuite rajoutés lorsque nous avancerons dans la suite de ce tutoriel.

.
├── app.js
├── node_modules
├── serveur
│   └── routes.js
├── static
│   ├── js
│   │   └── general.js
│   ├── responsive.css
│   └── style.css
└── views
    ├── balise_head.ejs
    ├── barre_navigation.ejs
    └── index.ejs

Avertissement

Le dossier node-modules doit contenir les modules que vous avez téléchargés à la section précédente.

Prenez le dossier décompressé de bootstrap et glissez-le vers static. Puis, renommez-le avec le nom de bootstrap. Vous devriez désormais avoir la structure de fichiers suivante :

.
├── app.js
├── node_modules
├── serveur
│   └── routes.js
├── static
│   ├── bootstrap
│   │   ├── css
│   │   │   ├── bootstrap-theme.css
│   │   │   ├── bootstrap-theme.css.map
│   │   │   ├── bootstrap-theme.min.css
│   │   │   ├── bootstrap-theme.min.css.map
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   └── bootstrap.min.css.map
│   │   ├── fonts
│   │   │   ├── glyphicons-halflings-regular.eot
│   │   │   ├── glyphicons-halflings-regular.svg
│   │   │   ├── glyphicons-halflings-regular.ttf
│   │   │   ├── glyphicons-halflings-regular.woff
│   │   │   └── glyphicons-halflings-regular.woff2
│   ├── js
│   │   └── general.js
│   ├── responsive.css
│   └── style.css
└── views
    ├── balise_head.ejs
    ├── barre_navigation.ejs
    └── index.ejs

Code

Maintenant, nous pouvons enfin débuter le codage !

Nous indiquons au script NodeJS principal de récupérer différents modules et de lancer expressJS.

./app.js
var http = require('http');
var path = require('path');
var express = require('express');

// nous pouvons faire appel à expressJS en tapant app.nom_de_la_fonction()
var app = express();

Ensuite, nous appelons les fichiers qui se trouvent dans le dossier serveur.

./app.js
var routes = require('./serveur/routes.js');
// à cet emplacement viendront d'autres fichiers qui seront créés plus tard

Enfin, nous entrons les instructions pour lancer le serveur.

./app.js
var server = http.Server(app);
server.listen(8888);

Note

Nous utilisons ici le port 8888, mais bien entendu, vous pouvez en employer un autre. Notez que si vous utilisez le port 80, vous n’aurez pas besoin de le spécifier depuis votre navigateur web ; toutefois, ce port sert généralement lors de la mise en ligne de l’application, et non lors du développement.

Nous allons ensuite dans le fichier balise_head.ejs et y ajoutons quelques éléments pour que le tout soit compatible avec bootstrap :

./views/balise_head.ejs
<!-- définition de l'encodage -->
<meta charset="utf-8">
<!-- ces deux lignes servent à faire comprendre aux appareils mobiles
que le site est responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- titre de la page -->
<title>Hello World</title>
<!-- si vous souhaitez que les pages de votre application aient un titre différent,
vous devrez spécifier les titres sur les pages elles-mêmes et non pas ici -->

<!-- chargement des feuilles de style -->
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="static/style.css">
<link rel="stylesheet" href="static/responsive.css">

<!-- chargement du script principal -->
<script src="static/js/general.js"></script>

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Astuce

Le fichier general.js contiendra des fonctions javascript qui seront accessibles depuis toutes les pages du site web

Nous ajoutons une barre de navigation :

./views/barre_navigation.ejs
<nav class="navbar navbar-default" id="navbar" style="height:50px;">
  <div class="navbar-header">
    <a class="navbar-brand" href="/">Hello World</a>
    <a href="#"
    class="navbar-toggle"
    onclick="navbar_mobile();">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
  </div>
  <div class="navbar-collapse collapse" id="contenu_nav">
    <ul class="nav navbar-nav">
      <li>
        <a href="/">Accueil</a>
      </li>
    </ul>
  </div>
</nav>

Note

Pour plus d’informations sur la barre de navigation, vous pouvez consulter la documentation officielle de bootstrap qui traite plus précisément ce sujet.

Puis, nous insérons une fonction qui permet à la barre de navigation de s’ajuster sur les appareils mobiles :

./static/js/general.js
/* les fonctions byId() et byClass() permettent juste
de ne pas avoir besoin d'écrire "document.getElementById" et
"document.getElementsByClassName" à chaque fois qu'on les appelle */
function byId(id) {
  return document.getElementById(id);
}

function byClass(classe) {
  return document.getElementsByClassName(classe);
}

/* cette fonction est appelée lorsque un utilisateur qui est
sur un appareil mobile clique sur le toggle de la barre de navigation */
function navbar_mobile() {
  // si, lorsque la fonction est appelée, le contenu de la barre n'est pas affiché
  if (byId('contenu_nav').className === 'navbar-collapse collapse') {
    // on l'affiche
    byId('contenu_nav').className = 'navbar-collapse collapse in';
    byId('navbar').style.height = '100%';
  // à l'inverse
  } else {
    // on le cache
    byId('contenu_nav').className = 'navbar-collapse collapse';
    byId('navbar').style.height = '50px';
  }
}

Enfin, nous assemblons le tout dans la page principale, index.ejs :

./views/index.ejs
<!DOCTYPE html>
<html>
  <head>
    <% include balise_head %>
  </head>
  <body>
    <% include barre_navigation %>
    <div class="container">
      <div class="row">
        <div class="col-lg-offset-2 col-md-offset-1 col-md-10 col-lg-8">
          <p>Hello World !</p>
        <div class="col-lg-offset-2 col-md-offset-1"></div>
      </div>
    </div>
  </body>
</html>

Note

Comme vous pouvez le remarquer, la page principale se contente d’effectuer des inclusions qui pointent vers d’autres fichiers EJS. Ce système permet d’avoir des codes récurrents comme la barre de navigation et la balise head dans un fichier séparé. Ainsi, en modifiant ce fichier, la transformation est appliquée sur toutes les autres pages.

Il reste maintenant une dernière étape : nous demandons à expressJS d’afficher la page index.ejs lorsqu’on entre l’URL de l’application dans le navigateur :

./serveur/routes.js
// nous créons une fonction qui contient toutes les routes
// ainsi, nous pouvons la lancer depuis le fichier app.js
exports.f = function(app, dossier) {

// affichage de la page index si on entre localhost/
app.get('/', function(req, res) {
   res.render('index.ejs');
});

// envoi des fichiers statiques si l'URL commence par "static"
app.get(/static\/([a-z\.\/_-]+)$/i, function(req, res) {
   res.sendFile(dossier + '/static/' + req.params[0]);
});

// affichage d'un message d'erreur pour n'importe quel autre URL
app.get(/.*/, function(req, res) {
   res.end('Cette page n\'existe pas');
});

}

Puis nous insérons la fonction que nous venons de créer dans le fichier principal :

./app.js
routes.f(app, __dirname);

Astuce

Cette fonction utilise pour l’instant deux paramètres ; la variable app qui sert au bon fonctionnement d’expressJS et __dirname qui contient le dossier dans lequel se trouve le fichier app.js. Comme res.SendFile ne supporte que les chemins absolus et que le dossier static se trouve au même endroit que app.js, nous pouvons ensuite simplement déterminer l’emplacement du fichier statique qu’expressJS ira chercher avec res.SendFile().

Tout ceci devrait donner, au final :

./app.js
var http = require('http');
var path = require('path');
var express = require('express');

// nous faisons appel à expressJS en tapant app.nom_de_la_fonction()
var app = express();

var routes = require('./serveur/routes.js');
// à cet emplacement viennent d'autres fichiers qui seront créés plus tard

// appel de la fonction qui se trouve dans "routes.js"
routes.f(app, __dirname);

var server = http.Server(app);
server.listen(8888);

Résultat

Maintenant, ouvrez le terminal (sur OSX) ou node.js command prompt et exécutez la commande suivante :

sudo node app.js

Ouvrez un navigateur web et entrez l’adresse http://localhost:8888/.

Si tout fonctionne bien, la page suivante s’affiche :

_images/3.png

Si vous redimensionnez la fenêtre, un bouton d’affichage s’ajoute dans la barre de navigation les mots “Hello World” apparaissent tout à gauche (la marge est supprimée) :

_images/4.png

Nous avons maintenant la base de la structure des fichiers de l’application que nous allons produire. Gardez bien cette structure et n’hésitez pas à créer de nouveaux fichiers lorsque vous rajoutez des fonctionnalités ; cela évitera d’éventuelles redondances du code et améliorera votre organisation.

Astuce

Vous pouvez télécharger ce Hello World en cliquant ici.