Mettre en place un environnement de travail

En développement web, mieux vaut tester son site localement avant de le publier aux yeux du monde entier. Pour effectuer des tests sur votre ordinateur, vous pouvez installer un serveur local. Dans cet article nous verrons comment faire et comment organiser une hiérarchie de fichiers afin que ceux-ci soit organisés, même si le projet devient plus volumineux.

Pédagogie active

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.

Aller plus loin

Installer et paramétrer un éditeur de texte

Ce point était l'objet d'un article précédent. Si ce n'est pas déjà fait, voici quelques indications sur comment procéder.

Installer un serveur web local

Comprendre le fonctionnement de localhost

Dans le monde du DNS, il existe une adresse spéciale connue par chaque ordinateur : localhost. Celle-ci fait référence au serveur situé sur l'ordinateur en question. Ainsi, il est possible d'accéder à un site situé sur localhost avec votre navigateur, même sans connexion à Internet.

Essayez d'accéder à votre hôte local : https://localhost. Si vous obtenez un résultat semblable à l'image ci-après : félicitations ! Cela signifie que vous disposez déjà d'un serveur web installé sur votre ordinateur (par exemple Mac OS X inclut Apache préinstallé).

Si vous n'obtenez pas ce résultat, il faut installer Apache.

Dans les deux cas, il faudra configurer Apache afin que celui-ci pointe vers votre répertoire de travail. Nous verrons comment faire dans la suite de cet article. Selon le système d'exploitation les opérations à effectuer varient légèrement. Nous commencerons par expliquer le mode opératoire à suivre pour Windows. Si vous n'utilisez pas Windows, vous pouvez directement aller aux sections pour Ubuntu/Linux ou pour Mac OS X.

Installer et lancer son serveur local sur Windows

Installer Apache

Sous Windows, installer Apache est légèrement compliqué. Cette page explique comment installer un binaire Apache étape par étape.

Après l'installation, allez à l'URL https://localhost/ avec votre ordinateur afin de vérifier que votre serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.

Déplacer la racine de l'hôte local vers votre répertoire de travail

Sous le capôt, votre serveur web utilise HTTP pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

1. Créez un dossier appelé htdocs dans votre répertoire utilisateur : C:\Users\NomUtilisateur\htdocs, où NomUtilisateur correspond à votre nom d'utilisateur. Si vous utilisez une version de Winows plus récente, ce dossier pourra être situé à l'emplacement suivant C:\Documents and Settings\NomUtilisateur\htdocs.
2. Modifiez le fichier de configuration Apache situé à  l'emplacement suivant : C:\Program Files\Apache Software Foundation\conf\httpd.conf. Si nécessaire, fournissez les informations d'authentification pour l'administrateur.
3. Dans ce fichier, allez jusqu'à la ligne qui contient le texte suivant : DocumentRoot "C:\Users\Apache Software Foundation\htdocs". Éditez cette ligne afin qu'elle pointe vers votre répertoire htdocs : DocumentRoot "C:\Documents and Settings\NomUtilisateur\htdocs"
4. Dans le même fichier, repérez l'instruction <Directory> : <Directory "C:\Users\Apache Software Foundation\htdocs">. Là aussi, modifiez le répertoire pour qu'il pointe vers le dossier de travail :  <Directory "C:\Documents and Settings\NomUtilisateur\htdocs">
5. Sauvegardez le fichier.
6. Redémarrez Apache : Démarrer ➤ Apache ➤ Redémarrer Apache.
7. Rechargez la page localhost dans votre navigateur. Si tout s'est passé comme prévu, vous devriez voir l'index du répertoire. Par défaut, l'index correspond à la liste des fichiers du répertoire. Nous verrons par la suite comment personnaliser cette page d'index. Vous pouvez passer les instructions pour Ubuntu et Mac.

Installer et lancer son serveur local sur Ubuntu (ou plus généralement sur Linux)

Installer Apache

Sous Ubuntu, lancez un terminal (vous pouvez utiliser le raccourci Ctrl + Alt + T) puis lancez ces commandes (saisissez votre mot de passe si besoin) :

sudo apt-get update
sudo apt-get install apache2

Après l'installation, accédez à https://localhost/ avec votre navigateur afin de vérifier que le serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.

Déplacer la racine de l'hôte local vers votre répertoire de travail

Sous le capôt, votre serveur web utilise HTTP pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

• Créez un dossier appelé htdocs dans votre répertoire utilisateur : /home/NomUtilisateur/htdocs, où NomUtilisateur correspond à votre nom d'utilisateur.
• Ouvrez le fichier de configuration Apache situé à cet emplacement : /etc/apache2/sites-available/000-default.conf. Si besoin, ouvrez ce fichier en tant qu'administrateur. Selon la version d'Ubuntu ou de Debian, le fichier peut se situer à l'un de ces deux emplacements /etc/apache2/httpd.conf or /etc/httpd/conf/httpd.conf.
• Dans ce fichier et à la ligne suivante : DocumentRoot /var/www/html. Modifiez cette line afin que le répertoire corresponde au répertoire de travail htdocs : DocumentRoot /home/NomUtilisateur/htdocs
• Vous devriez également ajouter des restrictions d'accès aux fichiers. Pour cela, ajoutez les lignes suivantes sous la ligne avec DocumentRoot (n'oubliez pas de changer USERNAME avec votre nom d'utilisateur).

        <Directory />
                Options FollowSymLinks
                AllowOverride None
                Require all denied
        </Directory>
        <Directory /home/USERNAME/htdocs/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride None
                Require all granted
        </Directory>

• Sauvegardez le fichier.
• Redémarrez Apache avec la commande suivante sudo apachectl restart. Si nécessaire, saisissez votre mot de passe.
• Rechargez la page localhost dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après). Par défaut, l'index sera la liste des fichiers du répertoire courant. Nous allons voir par la suite comment personnaliser cette page. Vous pouvez passer les instructions pour Mac.

Installer et lancer son serveur local sur Mac OS X

Apache est préinstallé avec Mac OS X. Mais il est toujours nécessaire de déplacer la racine localhost vers le répertoire de travail.

Sous le capôt, votre serveur web utilise HTTP pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé index.html qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.

Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :

1. Créez un dossier appelé htdocs dans votre répertoire utilisateur : /Users/NomUtilisateur/htdocs, où NomUtilisateur correspond à votre nom d'utilisateur.
2. Ouvrez le fichier de configuration Apache situé à cet emplacement : /etc/apache2/httpd.conf.
3. Dans ce fichier, trouvez la ligne DocumentRoot "/Library/WebServer/Documents". puis modifiez la afin qu'elle pointe vers votre répertoire htdocs : DocumentRoot "/Users/NomUtilisateur/htdocs"
4. Dans ce même fichier, trouvez l'instruction <Directory> : <Directory "/Library/WebServer/Documents"> et modifiez cette ligne avec : <Directory "/Users/NomUtilisateur/htdocs">
5. Sauvegardez le fichier.
6. Redémarrez Apache avec la commande suivante sudo apachectl restart. Si nécessaire, saisissez votre mot de passe.
7. Rechargez la page localhost dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après).

Ajouter une page d'index

Lorsque vous visitez un site web, vous vous attendez à y trouver plus qu'une simple liste de fichiers. Il est possible d'ajouter une page d'index personnalisée pour votre site web local. Ce fichier d'index est un fichier HTML, il doit être intitulé index.html et il doit être placé dans le répertoire htdocs.

Pour cela, ouvrez votre éditeur de texte puis copiez le code HTML qui suit dans un nouveau fichier :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Voici une page d'index</title>
</head>

<body>
  <p>Ma propre page d'index</p>
</body>
</html>

Enregistrez ce fichier dans votre répertoire htdocs avec le nom index.html :

Vous pouvez ouvrir la page https://localhost dans votre navigateur, vous aurez alors :

Organiser ses fichiers

La structure et l'organisation des fichiers est critique pour n'importe quel site web. Il est très rare qu'un site web se compose uniquement de fichiers HTML. Vous aurez vraisemblablement à intégrer des images, à mettre en forme des pages avec des fichiers CSS ou d'ajouter des fonctionnalités avec des fichiers JavaScript. Dès le début, il est nécessaire d'organiser clairement ces fichiers pour ne pas s'y perdre par la suite.

Bien entendu, vous pouvez suivre votre propre organisation mais la plus communément utilisée contient trois répertoires : images pour les images, styles pour les fichiers CSS et scripts pour les scripts. Simple et efficace.

Fichiers d'exemples

Dans les prochains articles, nous verrons comment créer une page web, comment utiliser CSS puis comment utiliser JavaScript. Nul besoin de connaître ces langages pour placer quelques fichiers d'exemples qu'on modifiera par la suite. Cela vous permettra de mieux percevoir la structure qu'on souhaite mettre en place.

Créons un nouveau fichier qui correspondra à votre feuille de style principale (là où vous écrirez toutes les règles CSS). Pour le moment, copiez-collez ce fragment de code dans un nouveau fichier dans votre éditeur de texte :

body {
  font-family: sans-serif;
}

Puis enregistrez le fichier dans le répertoire styles sous le nom basic.css :

Ensuite, revenez à (ou réouvrez) votre page d'index pour y insérer une référence à la feuille de styles. Pour cela, on utilisera la balise <link> (qu'on reverra dans les prochains articles) :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Voici une page d'index</title>

  <link rel="stylesheet" href="./styles/basic.css">
</head>

<body>
  <p>Ma propre page d'index</p>
</body>
</html>

Maintenant, si vous réouvrez votre site local (vous pouvez simplement rafraîchir la page si vous avez laissé votre navigateur ouvert), vous verrez que la police a changé à cause de la feuille de style :

Structure finale pour le projet

Reprenons. Votre structure de répertoires et de fichiers pour votre site devrait désormais ressembler à :

• htdocs (le dossier racine pour le projet)
  • images (le répertoire pour les images)
  • scripts (le répertoire pour les différents scripts JavaScript)
  • styles (le répertoire pour les feuilles de styles CSS)
    • basic.css (la feuille de style principale)
  • index.html (la page d'index pour le site web local)

Voici la structure minimale que vous devriez avoir et qui pourra s'adapter lorsque votre projet grandira. Au fur et à mesure des développements de votre projet, n'hésitez pas à adapter et à améliorer cette structure afin qu'elle soit optimale pour votre site.

Prochaines étapes

Maintenant que nous avons vu comment organiser les fichiers et que nous avons créé quelques uns, il est temps d'écrire sa premère page web.