COMMENT ENVOYEZ VOTRE SITE SUR LE WEB

Votre site est tout beau, tout propre, tout prêt… mais comme il est sur votre disque dur, personne d'autre ne va pouvoir en profiter !

Vous aimeriez donc l'envoyer sur le Web, mais… vous ne savez pas comment faire.
Nous allons découvrir dans cette annexe tout ce qu'il faut savoir pour envoyer son site sur le Web :

1. Comment réserver un nom de domaine ?

2. Qu'est-ce qu'un hébergeur et comment cela fonctionne-t-il ?

3. Enfin, comment utiliser un client FTP pour pouvoir transférer les fichiers sur le Net ?

Le nom de domaine

Savez-vous ce qu'est un nom de domaine ?
Il s'agit en fait d'une adresse sur le Web : siteduzero.com est par exemple un nom de domaine.

Un nom de domaine est constitué de deux parties : siteduzero.com.

• En rouge, le nom de domaine proprement dit. Il s'agit d'un nom que l'on peut en général choisir librement, tant que personne ne l'a réservé avant nous. Il peut contenir des lettres et des chiffres, mais pas de symboles particuliers (comme le « ç » français, le « é », le « è », les espaces, etc.).

• En bleu, l'extension (aussi appelée « TLD », de l'anglais top-level domain). Il existe grosso modo une extension par pays (.fr pour la France, .be pour la Belgique, .ca pour le Canada, etc.). Toutefois, il y a aussi des extensions utilisées au niveau international comme .com, .net, .org. Elles étaient au départ réservées aux sites commerciaux, aux organisations, … mais cela fait longtemps que tout le monde peut les réserver. D'ailleurs, .com est très probablement l'extension la plus utilisée sur le Web.

En général, un site web voit son adresse précédée par www, comme par exemplewww.siteduzero.com. Cela ne fait pas partie du nom de domaine : en fait, www est ce qu'on appelle un sous-domaine, et on peut en théorie en créer autant qu'on veut une fois qu'on est propriétaire du nom de domaine.
Le www a été adopté par tous les webmasters, c'est une sorte de convention, mais elle n'est absolument pas obligatoire.

Moi aussi je veux un nom de domaine pour mon site ! Comment dois-je faire ?

Alors j'ai une bonne et une mauvaise nouvelle. Comme d'habitude, on va commencer par la mauvaise :

• la mauvaise : ce n'est pas gratuit…

• la bonne : … ce n'est vraiment pas cher du tout.

En effet, un nom de domaine coûte entre 7 et 12 euros par an.
Le prix peut varier en fonction de l'extension. Ainsi, l'extension .info est généralement proposée à plus bas prix et peut s'avérer être une alternative intéressante. Mais si vous voulez une adresse plus « courante », il faudra plutôt viser une extension de type .com ou encore .fr.

Pour réserver un nom de domaine, deux solutions :

• Passer par un registrar spécialisé. C'est un organisme qui sert d'intermédiaire entre l'ICANN (l'organisation qui gère l'ensemble des noms de domaine au niveau international) et vous. 1&1, OVH et Gandi sont de célèbres registrars français.

• Encore mieux : vous pouvez commander le nom de domaine en même temps que l'hébergement (c'est ce que je vous conseille). De cette manière, vous faites d'une pierre deux coups, vu que vous aurez de toute façon besoin de l'hébergement et du nom de domaine.

Dans ce chapitre, nous allons voir comment commander un nom de domaine en même temps que l'hébergement, c'est de loin la solution la plus simple et la moins coûteuse pour vous.

L'hébergeur

Intéressons-nous maintenant à l'hébergeur.

Qu'est-ce qu'un hébergeur et pourquoi aurais-je besoin de lui ?

Sur Internet, tous les sites web sont stockés sur des ordinateurs particuliers appelés serveurs (figure suivante). Ce sont des ordinateurs généralement très puissants, qui restent tout le temps allumés. Ils contiennent les pages des sites web et les délivrent aux internautes qui les demandent, à toute heure du jour et de la nuit.

Un serveur ne possède pas d'écran car, la plupart du temps, il tourne tout seul sans qu'il y ait besoin de faire quoi que ce soit dessus. Comme vous le voyez, les serveurs sont très plats : c'est un format spécial de serveur (appelé « 1U »). Cela permet de les empiler dans des baies, c'est-à-dire une sorte d'armoire climatisée pour serveurs (figure suivante).

Comme vous le voyez, il y a un écran pour toute la baie. C'est suffisant car on ne branche l'écran sur un serveur que si celui-ci rencontre un problème. La plupart du temps, heureusement, le serveur travaille sans broncher.

L'hébergeur est une entreprise qui se charge de gérer des baies de serveurs. Elle s'assure du bon fonctionnement des serveurs 24h/24, 7j/7. En effet, si l'un d'eux tombe en panne, tous les sites présents sur la machine deviennent inaccessibles (et cela fait des clients mécontents).

Ces baies se situent dans des lieux particuliers appelés datacenters (figure suivante). Les datacenters sont donc en quelque sorte des « entrepôts à serveurs » et leur accès est très protégé.

Il est aussi possible, en théorie, d'héberger un site sur son propre ordinateur. Toutefois, c'est complexe : il vaut mieux avoir des connaissances en Linux, l'ordinateur doit être assez puissant, tourner jour et nuit et… surtout… la connexion doit être à très très haut débit (surtout en upload, la vitesse d'envoi des fichiers compte énormément). Les particuliers n'ont en règle générale pas une connexion suffisamment puissante pour héberger des sites, contrairement aux datacenters : ceux-ci sont câblés en fibre optique (ce qui permet d'atteindre des vitesses de plusieurs Gbps !)

Bref, gérer un serveur soi-même est complexe et, la plupart du temps, les particuliers et les entreprises font appel à un hébergeur dont c'est le métier.

Les hébergeurs, contrairement aux registrars, sont très très nombreux. Il y en a de tous types, à tous les prix. Il y a un vocabulaire à connaître pour vous repérer dans leurs offres :

• • Hébergement mutualisé : si vous optez pour une offre d'hébergement mutualisé, votre site sera placé sur un serveur gérant plusieurs sites à la fois (peut-être une centaine, peut-être plus). C'est l'offre la moins chère et c'est celle que je vous recommande de viser si vous démarrez votre site web.

  • Hébergement dédié virtuel : cette fois, le serveur ne gère que très peu de sites (généralement moins d'une dizaine). Cette offre est généralement adaptée aux sites qui d'un côté ne peuvent plus tenir sur un hébergement mutualisé car ils ont trop de trafic (trop de visiteurs), mais qui par ailleurs ne peuvent pas se payer un hébergement dédié (voir ci-dessous).

  • Hébergement dédié (on parle aussi de « serveur dédié ») : c'est le nec plus ultra. Le serveur gère uniquement votre site et aucun autre. Attention, cela coûte assez cher et il vaut mieux avoir des connaissances en Linux pour administrer le serveur à distance.

Par exemple, le Site du Zéro est lui-même sur un hébergement dédié, car son trafic est très important.

Mais où puis-je trouver un hébergeur ?

Oh ça, c'est très simple.
Une recherche dans Google de « hébergeur web » vous donnera plusieurs millions de résultats. Vous n'aurez que l'embarras du choix.

Dans la suite de ce tutoriel, je vais vous montrer comment cela fonctionne avec l'hébergeur 1&1, auprès de qui nous avons pu obtenir des réductions spécialement pour les visiteurs du Site du Zéro.

Si vous le souhaitez, vous pouvez bien entendu recourir à un autre hébergeur de votre choix. Je sais que les lecteurs de ce tutoriel utilisent parfois aussi PlanetHoster et MavenHosting
La suite de ce chapitre détaille la procédure pour héberger votre site chez 1&1, mais sachez que cela fonctionne quasiment de la même manière avec PlanetHoster, MavenHosting ou tout autre hébergeur.

Revenons à 1&1. Cet hébergeur propose plusieurs offres d'hébergement mutualisé, comme le montre la figure suivante.

Les offres d'hébergement de 1and1

Comme vous le voyez, la page indique que vous avez une réduction de 21€ (soit 3 mois gratuits) sur l'hébergement 1&1 Illimité encadre en rouge en bas. Cette réduction s'ajoute aux 6 mois gratuits offerts par 1&1 en ce moment, ce qui fait pas moins de 9 mois gratuits sur un an ! Cela devrait vous revenir au final dans les 21€ pour héberger votre site web pendant un an, nom de domaine compris.
Notez bien que la réduction ne s'applique que sur l'offre 1&1 Illimité.

Cliquez sur le bouton "Continuer" dans l'offre 1&1 Illimité. On vous demande ensuite de choisir le nom de domaine de votre site, c'est-à-dire l'adresse à laquelle on pourra le trouver. Cochez la case en fonction des extensions que vous voulez utiliser (.com, .fr...). Un seul nom de domaine étant compris dans l'offre, je vous recommande de ne cocher qu'une seule case (par exemple ".com"). Si vous en cochez plusieurs, il faudra payer un peu plus.

On vous demande de choisir le nom de domaine de votre site

Notez que, si vous avez les moyens, c'est en général une bonne idée d'acheter plusieurs noms de domaine similaires. Ca vous évite d'être victime de "domain parking", c'est-à-dire de personnes qui achètent des noms de domaines semblables au vôtre pour vous les revendre au prix fort ensuite quand vous voyez que vos visiteurs se trompent de site.

Une fois que c'est fait, 1&1 va vérifier que le nom de domaine que vous demandez n'est pas déjà pris :

Vérifiez si le nom de domaine est libre avant de continuer

Si le domaine est libre, vous pouvez continuer ! Cliquez simplement sur "Continuer".

On vous proposera ensuite plusieurs offres commerciales (acheter plus de domaines, un générateur de sites...). A moins qu'elles ne vous intéressent, je vous invite à cliquer sur "Non merci" à chaque fois :

On vous propose d'acheter d'autres noms de domaine (facultatif)

Vous devriez à la fin arriver sur votre panier. Vérifiez que les 21€ de réduction sont bien pris en compte (sinon c'est probablement que vous avez sélectionné la mauvaise offre au tout début) :

Il ne reste plus qu'à valider le panier !

Il ne vous reste plus qu'à renseigner vos coordonnées et finaliser l'achat.
Une fois les formalités et le paiement effectués, vous êtes redirigés vers 1&1, qui vous confirme la prise en compte de votre commande. Vous devriez recevoir un peu plus tard un e-mail vous indiquant toutes les informations nécessaires pour mettre en place votre site. Conservez-les précieusement, vous en aurez besoin.

Lorsque vous avez reçu par e-mail vos identifiants pour vous connecter au serveur de votre hébergeur, vous pouvez passer à l'étape suivante : envoyer votre site web sur le serveur de votre hébergeur !

Utiliser un client FTP

FTP signifie File Transfer Protocol et, pour faire court et simple, c'est le moyen que l'on utilise pour envoyer nos fichiers.
Il existe des logiciels permettant d'utiliser le FTP pour transférer vos fichiers sur Internet.

Bien entendu, des logiciels FTP, il en existe des centaines, gratuits, payants, français, anglais, etc.
Pour que nous soyons sur la même longueur d'onde, je vais vous proposer celui que j'utilise, qui est gratuit et en français : FileZilla (figure suivante).

Ce logiciel n'a rien à avoir avec Mozilla, si ce n'est qu'il se termine lui aussi par « zilla ». N'allez donc pas croire que je vous force à utiliser des logiciels d'un même éditeur, c'est tout à fait faux. D'ailleurs, vous pouvez utiliser n'importe quel autre logiciel FTP si cela vous chante, cela ne me dérange absolument pas.

Quoiqu'il en soit, je vais vous montrer quelle est la marche à suivre avec FileZilla. Et la première étape, c'est bien entendu de le télécharger !

Prenez la version correspondant à votre système d'exploitation : ici pour Windows, ici pour Mac OS ou là pour Linux.

Je vous fais confiance pour l'installation, elle est toute simple et vous ne devriez pas avoir de problème.
Lancez le logiciel, vous devriez voir quelque chose ressemblant à la figure suivante.

À première vue, cela semble un peu compliqué (à première vue seulement). En fait, le principe est très simple.
Il y a quatre grandes zones à connaître dans la fenêtre :

1. En haut, vous verrez apparaître les messages qu'envoie et reçoit le logiciel. Si vous avez un peu de chance, vous verrez même la machine vous dire bonjour (si si, je vous jure). En général, cette zone ne nous intéresse pas vraiment, sauf s'il y a des messages d'erreur en rouge…

2. À gauche, c'est votre disque dur. Dans la partie du haut, vous avez les dossiers et, dans la partie du bas, la liste des fichiers du dossier actuel.

3. À droite, c'est la liste des fichiers envoyés sur le serveur sur Internet. Pour le moment il n'y a rien car on ne s'est pas connecté, mais cela va venir, ne vous en faites pas.

4. Enfin, en bas, vous verrez apparaître les fichiers en cours d'envoi (et le pourcentage d'envoi).

La première étape va être de se connecter au serveur de votre hébergeur.

Quel que soit l'hébergeur que vous avez choisi, cela fonctionne toujours de la même manière. On va vous fournir trois informations qui sont indispensables pour que FileZilla puisse se connecter au serveur :

• L'IP : c'est « l'adresse » du serveur. Le plus souvent, on vous donnera une information du typeftp.mon-site.com, mais il peut aussi s'agir d'une suite de nombres comme 122.65.203.27.

• Le login : c'est votre identifiant, on vous probablement demandé de le choisir. Vous avez peut-être mis votre pseudo, ou le nom de votre site. Mon login pourrait par exemple être mateo21.

• Le mot de passe : soit on vous a demandé de choisir un mot de passe, soit (c'est plus probable) on vous en a attribué un d'office (un truc imprononçable du genre crf45u7h).

Si vous avez ces trois informations, vous allez pouvoir continuer.
Si vous ne les avez pas, il faut que vous les cherchiez, c'est indispensable. On vous les a probablement envoyées par e-mail. Sinon, n'hésitez pas à les demander à votre hébergeur (IP, login et mot de passe).

Maintenant que nous sommes en possession de ces informations, nous allons les donner à FileZilla, qui en a besoin pour se connecter au serveur.

Cliquez sur la petite icône en haut à gauche (pas sur la petite flèche à droite, mais bien sur l'image), représentée à la figure suivante.

Une fenêtre s'ouvre. Cliquez sur Nouveau site et donnez-lui le nom que vous voulez (par exemple « Site du Zéro »). À droite, vous allez devoir indiquer les trois informations dont je viens de vous parler, comme à la figure suivante.

Vous pouvez distinguer en haut l'hôte (c'est là qu'il faut indiquer ftp.monsite.com, par exemple). Cochez Type d'authentification : Normale pour pouvoir saisir le login et le mot de passe.

Cliquez sur Connexion et le tour est (presque) joué.

À ce stade, deux possibilités :

• Soit la connexion a réussi : vous voyez alors apparaître en haut des messages en vert comme « Connecté ». Dans ce cas, la zone de droite de la fenêtre de FileZilla devrait s'activer et vous verrez les fichiers qui se trouvent déjà sur le serveur (il se peut qu'il y en ait déjà quelques-uns).

• Soit cela a planté, vous avez plein de messages écrits en rouge et là, eh bien… il n'y a pas trente-six solutions : vous vous êtes trompés en tapant l'IP, ou le login, ou le mot de passe. Un de ces éléments est incorrect, veillez à les redemander à votre hébergeur car s'ils sont bons cela doitmarcher.

Si la connexion a réussi, alors ce que vous avez à faire est très simple : dans la partie de gauche, cherchez où se trouvent, sur votre disque dur, vos fichiers .html et .css (mais aussi vos images .jpg, .png, .gif, etc.).
À gauche, faites un double-clic sur le fichier que vous voulez transférer. Au bout de quelques secondes, il apparaîtra à droite, ce qui voudra dire qu'il a été correctement envoyé sur le serveur, et donc qu'il est accessible sur Internet !

Vous pouvez envoyer n'importe quel type de fichier. Bien entendu, généralement on envoie des fichiers .php, .html, .css et des images, mais vous pouvez aussi très bien envoyer des .pdf, des programmes, des .zip, etc.

La figure suivante, par exemple, représente le résultat que l'on obtient après avoir transféré un fichierindex.html et quelques autres fichiers.

Il apparaît à droite, ce qui veut dire qu'il est maintenant disponible sur le serveur.

Veuillez noter qu'il faut que votre page d'accueil s'appelle index.html. C'est la page qui sera chargée lorsqu'un nouveau visiteur arrivera sur votre site.

Vous pouvez aussi transférer des dossiers entiers d'un seul coup : il suffit de faire un glisser-déposer du dossier depuis la partie de gauche (ou directement de la fenêtre de votre système d'exploitation) jusqu'à la partie de droite de la fenêtre de FileZilla.

Une fois configuré, vous pouvez voir que l'envoi de fichiers est très simple.

Accéder à la base de données de l'hébergeur

L'envoi des fichiers .php se fait via un logiciel FTP comme nous venons de le voir. Ceux-ci fonctionneront sans aucun problème si vous avez choisi un hébergeur qui supporte PHP (et je vous rassure, c'est le cas de la très grande majorité d'entre eux ).
Il vous suffit, après envoi du fichier .php, de vous rendre par exemple sur : www.monsite.com/mapage.php(la page de votre site en ligne) et celle-ci s'exécutera comme sur votre PC. Les serveurs de l'hébergeur font eux aussi tourner Apache et PHP, comme vous sur votre machine avec WAMP.

Mais comment ça fonctionne pour la base de données ? Comment je peux envoyer ma base de données sur Internet ?

Bonne question. En fait, votre hébergeur vous propose déjà une base de données MySQL. Celle-ci est le plus souvent déjà créée.
Normalement, votre hébergeur doit vous donner le moyen d'y accéder (par e-mail ou sur leur panel web).

Vous avez besoin de ces informations :

• L'adresse IP du serveur MySQL

• Votre login MySQL

• Votre mot de passe MySQL

• Le nom de la base de données, si elle a déjà été créée

• L'adresse du phpMyAdmin qui vous permet de gérer votre base en ligne

Généralement, les hébergeurs ne vous proposent qu'une ou deux bases de données. Ce n'est pas vraiment une limitation car une base de données suffit à stocker toutes les informations dont on a besoin. Avoir plusieurs bases permet juste de mieux découper les informations, un peu comme les dossiers sur votre ordinateur.

Servez-vous des 4 premières informations (IP, login, mot de passe, nom de la base) pour adapter votre code PHP afin qu'il puisse se connecter à la base de données de l'hébergeur :

<?php

$bdd = new PDO('mysql:host=sql.hebergeur.com;dbname=mabase', 'pierre.durand', 's3cr3t');

?>

Maintenant que c'est fait, vos scripts ont accès à la base de données de l'hébergeur... Mais celle-ci est encore vide ! Il faut utiliser le phpMyAdmin qu'ils mettent à votre disposition pour y recréer les tables.

Pour cela, vous devez suivre ces étapes :

Sur votre machine, via WAMP, accédez à votre phpMyAdmin local. Utilisez-le pour exporter toutes vos tables, comme nous avons appris à le faire. Cela va créer un fichier .sql sur votre disque dur qui contiendra vos tables.

Rendez-vous ensuite sur l'adresse du phpMyAdmin de votre hébergeur. Une fois là-bas, utilisez la fonctionnalité d'importation pour y importer le fichier .sql qui se trouve sur votre disque dur.

Patientez un peu... Et vos tables sont maintenant chargées sur le serveur MySQL de l'hébergeur !

• Pour le moment, votre site web n'est visible que par vous, sur votre ordinateur. Il faut l'envoyer sur le Web pour qu'il soit visible par tout le monde.

• Vous avez besoin de deux éléments :

  • Un nom de domaine : c'est l'adresse de votre site web. Vous pouvez réserver une adresse en.com, .fr, .net… Par exemple : siteduzero.com.

  • Un hébergeur : c'est lui qui va stocker votre site web sur une machine appelée « serveur ». Son rôle sera d'envoyer votre site à vos visiteurs à toute heure du jour et de la nuit.

• Pour transmettre les fichiers de votre site au serveur de votre hébergeur, il faut utiliser un client FTP comme FileZilla.

• Pour vous connecter au serveur, vous avez besoin de trois informations : l'adresse IP du serveur (ou son nom d'hôte), votre login et votre mot de passe. Ceux-ci vous sont fournis par votre hébergeur.