Deployer son site web:
Exemple avec 000webhost
Introduction
Nous allons dans ce cours déployer pas à pas un site web.
Nous utiliserons l'outil natif de l'hébergeur web pour déployer des fichiers, puis Filezilla Client.
Enfin, nous importerons une base de données via PhPMyAdmin (fournit avec l'hébergeur).
Il vous faudra une adresse courriel, n'hesitez pas à en créer une spécialement pour ce cours.
Souscrire à un hébergeur
Pour ce cours, nous utiliserons un hébergeur avec une option gratuite: https://www.000webhost.com/
Ci-après, vous pouvez voir un comparatif des services en fonction du prix (nous avons parlé du nom de domaine inclus ou non selon les offres dans le cours précédent):
Cliquer sur Inscription Gratuite pour l'hébergement web gratuit, en bas à gauche
Inscrivez-vous en renseignant une adresse e-mail puis en choisissant un mot de passe.
Votre compte se crée. Vous devez confirmer votre courriel.
Votre compte se crée. Vous devez confirmer votre courriel.
Allez dans votre boite courriel, ouvrez le courriel correspondant, et cliquez sur Verifier l'e-mail
Vous allez être redirigé vers 000webhost.com, qui va afficher une page de vérification ...
... puis la confirmation que votre courriel est vérifié.
Cliquer sur Get Started
"Get Started"
Cliquer sur Autre
Indiquer le nom de votre site, et cliquer sur soumettre.
Pour ce cours, nous allons choisir Upload your site.
Nous arrivons sur cette page. Il y a les différents outils pour télécharger les pages de votre site web que vous avez en local.
Les pages de votre site web seront à télécharger dans public_html pour que cela soit visible via votre site web.
Nous allons voir juste après comment retrouver cette page
Retouver son site et la page de téléchargement de fichiers sur 000webhost
Revenez sur la page https://www.000webhost.com/ puis cliquer sur Sign In ou Se connecter en haut à droite
Vous allez tomber sur une page où vous pouvez sélectionner Mes Sites Web
Vous allez arriver sur cette page.
A gauche, votre projet de site apparait (dans mon cas, coursherbergerunsite)
Sur votre projet, cliquer sur Actions rapides puis Voir le site pour être rédiriger vers votre site en ligne
Pour l'instant, nous n'avons mis en ligne aucune page web (aucun fichier .php, .html etc). Nous en ajouterons à la section suivante.
En revanche, vous pouvez noter l'url de votre page web.
De retour sur la page avec la gestion de votre site web, cliquer sur Gérer le Site
Sur le menus de gauche, cliquer sur Outils
En cliquant sur Télecharger des fichiers au centre de la page, vous allez retomber sur la page vue dans la section Get Started
Nous allons mettre en ligne un site web avec deux pages.
Télécharger des fichiers pour les mettre en ligne
Je vous fourni un site web avec deux pages que vous pouvez télécharger ci-contre.
La première est index.php, qui demande votre nom, vous dit bonjour et affiche le lien vers la page 2.
la deuxième est pagedeux.html, avec un lien pour la page index.
Sur la page pour télécharger des fichiers dans votre site, double cliquer sur le dossier public_html
Les pages téléchargées doivent absolument être dans ce dossier afin qu'elles apparaissent dans le site web (= publiquement)
Une fois dans public_html, aller sur l'icone Upload Files en haut à droite de la page
Cliquer sur Select Files
Selectionner les fichiers à télécharger (sur l'image, il s'agit de deux fichiers dans le dossier de mon serveur web local).
Appuyer sur UPLOAD à la fin du téléchargement.
Les fichiers apparaissent dans votre dossier public_html.
Si vous aller à l'adresse de votre site web, ça fonctionne:
par convention, vous arrivez sur la page appellée index
les liens entre les pages fonctionnent
le javascript, le PhP et le HTML fonctionnent
Utiliser FileZilla
Installer FileZilla (ici, le tutoriel sur Mac)
Aller à l'adresse https://filezilla-project.org
Cliquer sur Download FileZilla Client
Cliquer sur Download FileZilla Client
Cliquer sur Download
Autoriser le téléchargement
Le téléchargement commence
Autoriser le téléchargement
Double cliquer sur le fichier téléchargé
Cela décompresse le fichier, FileZilla est reconnue comme un application.
Double cliquer pour ouvrir. Si on vous demande, accepter l'ouverture du fichier.
Si on vous demande si on vous demande l'accès à des serveurs distants, accepter.
FileZilla est ouvert, cliquer sur OK.
Paramétrer FileZilla
Sur ma page de gestion du site web, cliquer sur Paramètre du Site Web dans le menu de gauche
Sur Général, vous trouverez vos informations poir le FTP
Noter les points suivants pour les renseigner dans ZileZilla:
Nom d'hôte : correspond à Hôte dans FileZilla
Nom d'utilisateur: correspond à Identifiant dans FileZilla
Mot de passe: correspond à Mot de passe dans FileZilla
Port: correspond à Port dans FileZilla
Sur FileZilla Client, renseigner ces éléments en haut de la fenêtre, puis cliquer sur Connexion rapide
Choisissez ensuite si vous souhaitez que FileZilla enregistre vos mots de passe
Verifier le certificat et cliquer sur OK
Dans le premier encadré en haut, on peut lire que la connexion a été faire et que le contenu du serveur a été récupéré.
Les deux encadrés de droite indiquent les dossiers sur le serveur web distant du site (public_html et tmp).
Vous êtes prêts à ajouter des fichiers sur votre site web via FileZilla.
Ajouter et mettre à jour des fichiers sur votre site via FileZilla
Dans l'encadré en bas à droite, double cliquer sur le dossier public_html
L'encadré en bas à droite se met à jours, et affiche les fichiers dans ce dossier.
Nous allons ajouter une troisième page web dans ce fichier.
Creer un fichier pagetrois.html avec le code suivant:
<html>
<head>
<title>Test PHP</title>
</head>
<body>
<p> ceci est la page 3 </p>
</body>
</html>
Il suffit de faire un glisser déposé du fichier pagetrois.html sur l'encadré en bas à droite pour qu'il se télécharge sur votre serveur web distant. La page est alors en ligne !
Pour le voir, vous pouvez mettre /pagetrois.html à la fin de l'adresse de votre site.
En d'autres termes, modifier le sous-domaine (en gras juste après) pour correspondre à celui de votre site: https://courshebergerunsite.000webhostapp.com/pagetrois.html
Nous allons mettre à jour pagedeux.html de manière à avoir un lien vers pagetrois.html.
ajouter la ligne de code suivante dans le fichier pagedeux.html sur votre ordinateur:
<p> aller <a href="pagetrois.html"> page 3 </a> </p>
Faire un glisser déposé du fichier pagetrois.html sur l'encadré en bas à droite pour qu'il se télécharge sur votre serveur web distant.
Comme un fichier avec ce nom existe déjà, on vous propose plusieurs options.
Choisissez celle qui vous convient et cliquer sur OK.
Maintenant, si vous allez sur votre site en ligne, vous pouvez, depuis la page deux mise à jour, aller sur la page trois
Base de données
Nous allons simplement, ici, importer une base de données. Pour savoir comment créer une base de données, notamment avec PhPMyAdmin, et comment exporter une base de données, vous pouvez vous référez ici: Créer une base de données avec PhPMyAdmin
Dans la page de gestion votre site web, aller dans Outils puis Gestionnaire De Base de Données
Cliquer sur Nouvelle Base de Données
Remplissez le formulaire, et appuyer sur Créer en bas à droite.
Attention, il y a beaucoup de contrainte sur le mot de passe, n'hésitez pas à lire l'information en survolant le ( i )
Le nom de la base de données et le nom l'utisateur réels apparaissent sur la page (précédés d'un id) seront à utiliser dans votre code si vous vous connectez à la base de données.
Lorsque votre base de données a été créée, le bouton Gérer apparait.
Cliquer sur Gérer puis sur PhpMyAdmin
Vous êtes redirigés sur PhpMyAdmin.
Cliquer sur votre base de données (ici, id15465109_filiere) dans l'aborescence à gauche.
Aller dans l'onglet Importer
Télécharger le suivant fichier pour l'exemple, il permet de télécharger les tables et les occurences de la base de données Filiere utilisée dans le cours Créer une base de données avec PhPMyAdmin
Fichier Filière-2.sql à importer pour créer les tables de la base de données Filiere
Dans PhPMyAdmin, cliquer sur Choisir le fichier pour sélectionner le fichier Filiere-2.sql sur votre ordinateur
En bas de la page, cliquer sur Exécuter
Si, dans l'arborescence à gauche, vous cliquer sur votre base de données (ici, id15465109_filiere), vous voyez apparaitre les tables ajoutées.
En selectionnant une table, par exemple Cours, vous pouvez voir que la table est déjà remplie (onglet Parcourir), et elle est prête à être utilisée dans votre site web en ligne.
Maintenant, copier le code suivant dans une de vos pages web (par exemple index.php). A terme, cela devra être présent dans toutes les pages qui utilisent une base de données. Ces pages devront donc être des pages .php
Nous allons maintenant mettre à jour les informations de connexion pour que cela fonctionne avec votre base de données.
L'instruction suivante fonctionnera sur votre site, en modifiant les champs en gras:
<?php try {
$bdd=new PDO("mysql:host=localhost;dbname=id15465109_filiere;charset=utf8", "id15465109_administrateur", "motDePasse",
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
}
catch (Exception $e) {
die('Erreur fatale : ' . $e->getMessage());
}
?>
On récupères les champs à modifier sur l'utilitaire de gestion de base de données de votre hébergeur.
Le premier champ à modifier est celui dans la colonne Nom de BD (dans l'exemple, il s'agit de id15465109_filiere).
Le deuxième champ est celui de la colonne Utilisateur de BD (dans l'exemple, il s'agit de id15465109_administrateur).
Le troisième est le mot de passe de la base de données. Si vous l'avez oublié, vous pouvez générer un nouveau mot de passe en cliquant sur Gérer > Modifier le Mot de Passe.
Il "suffit" de modifier le nom de la base de données, votre login et votre mot de passe dans les pages de votre site web pour vous connecter à votre nouvelle base de données en ligne.
Vous pouvez modifier une ligne de votre page afin de vérifier qu'elle est à jour sur votre site web.
Télécharger cette nouvelle version de votre page web sur votre site, par exemple via FileZilla.
Si votre connexion avec la base de données est réussie, votre page s'affiche.
Sinon, une erreur fatale s'affiche, comme dans l'illustration ci-contre:
Vous savez maintenant utiliser un client FTP, et mettre en ligne un site web avec sa base de données ! Il vous suffit de partager un lien avec n'importe qui, il ou elle pourra se rendre sur votre site.
En général, la procédure n'est pas très différente selon les hébergeurs.