From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../set_up_a_local_testing_server/index.html | 244 +++++++++++++++++++++ 1 file changed, 244 insertions(+) create mode 100644 files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html (limited to 'files/fr/conflicting/learn/common_questions') diff --git a/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..d688fcce92 --- /dev/null +++ b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,244 @@ +--- +title: Mettre en place un environnement de travail +slug: Apprendre/Mettre_en_place_un_environnement_de_travail +tags: + - Beginner + - CodingScripting + - Guide + - Learn +translation_of: Learn/Common_questions/set_up_a_local_testing_server +translation_of_original: Learn/Common_questions/Set_up_a_basic_working_environment +--- +
+

Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.

+
+ + + + + + + + + + + + +
Prérequis :Vous devez au préalable savoir ce qu'est un serveur web, comment installer les outils de base et comment fonctionnent les noms de domaine.
Objectifs :Savoir comment installer un serveur local et mettre en place une hiérarchie de fichiers pour développer un site web.
+ +

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

+ +
+

Note : Il existe différents logiciels de serveurs web qui sont disponibles (Apache, Tomcat, IIS, nginx). Apache est libre et gratuit, disponible sur plusieurs plateformes et est simple à installer. Nous illustrerons donc les exemples de cet article avec Apache.

+
+ +

Comprendre le fonctionnement de localhost

+ +

Dans le monde du {{Glossary("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.

+ +
+

Note : Pour être plus précis, localhost pointe vers une {{Glossary("adresse IP")}} dirigeant vers votre propre machine : 127.0.0.1 ({{Glossary("IPv4")}}) ou ::1 ({{Glossary("IPv6")}}).

+
+ +

Essayez d'accéder à votre hôte local : http://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é).

+ +

Basic index from the Apache HTTP server

+ +

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 http://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 {{Glossary("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. +
  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. +
  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. +
  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. +
  5. Sauvegardez le fichier.
    6. +
  6. Redémarrez Apache : Démarrer ➤ Apache ➤ Redémarrer Apache.
    7. +
  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.
    8. +
+ +

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
+ +
+

Note : Si vous n'utilisez pas Ubuntu ou une distribution basée sur Debian, suivez ces sept étapes pour compiler et installer Apache. Vous aurez peut-être à saisir votre mot de passe. Vous pouvez utiliser un éditeur graphique plutôt que vi pour éditer les fichiers de configuration.

+
+ +

Après l'installation, accédez à http://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 {{Glossary("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 :

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

+ +

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 {{Glossary("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. +
  2. Ouvrez le fichier de configuration Apache situé à cet emplacement : /etc/apache2/httpd.conf.
    3. +
  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. +
  4. Dans ce même fichier, trouvez l'instruction <Directory> : <Directory "/Library/WebServer/Documents"> et modifiez cette ligne avec : <Directory "/Users/NomUtilisateur/htdocs">
    5. +
  5. Sauvegardez le fichier.
    6. +
  6. Redémarrez Apache avec la commande suivante sudo apachectl restart. Si nécessaire, saisissez votre mot de passe.
    7. +
  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).
    8. +
+ +

Example of Apache serving a folder autoindexing

+ +

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 {{Glossary("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 :

+ +

Example of a custom index.html file

+ +

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

+ +

A custom index without any style

+ +

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 {{Glossary("CSS")}} ou d'ajouter des fonctionnalités avec des fichiers {{Glossary("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 :

+ +

Example of a custom basic.css file

+ +

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 {{HTMLElement("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 :

+ +

A custom index with style applied

+ +

Structure finale pour le projet

+ +

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

+ + + +

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.

-- cgit v1.2.3-54-g00ecf