Tutoriel : créer son site web dynamique simplement
L’objectif de ce tutoriel sera de faire un site web en utilisant un hebergeur web simple et en partant d’un projet vierge. On mettra en place un formulaire et des données changeantes pour montrer que notre site est interactif et dynamique.
Pré-requis
- Un hebergeur web (avec la version PHP 8.1 minimum)
- Un nom de domaine (normalement proposé par l’hebergeur web)
- Un IDE (integrated development environment) genre Visual Studio Code
- Un client FTP (FileZilla est très bien pour ca)
Pour l’hebergeur web je vous propose 2 solutions, selon votre besoin et vos moyens :
- Sans engagement et facture tous les mois : o2switch à partir 7€/mois TTC
- Avec engagement à l’année : Infomaniak à partir de 5,99€/mois TTC. En rechanche celui-là est fiable, rapide et très simple d’utilisation (+ support au top).
Les deux hebergeurs mentionnés vous proposent d’acheter un nom de domaine à environ 5,99€ ou 8,99€ selon l’extension du nom de domaine (.fr moins cher que .com par exemple).
Une fois votre hebergeur web et votre nom de domaine achetés, on va pouvoir commencer.
Etape 1 : Accéder à son serveur web en FTP
Création d’un compte FTP
FTP est un protocole de transfert de fichier et selon l’hebergeur que vous avez choisit, la création de comptes FTP sera différente mais généralement facile à trouver. Pour o2switch ca sera un onglet « Comptes FTP » et pour Infomaniak ca sera « FTP/SSH ».
Il faudra créer un compte FTP pour utiliser FileZilla, donc je vous invite, si vraiment vous galérez, à lire des tutos. Normalement les prestataires comme Infomaniak, o2switch, OVH, Hostinger, etc… ont des articles sur comment créer un compte FTP donc je vous laisse vous débrouiller 😉
Grosso merdo, un compte FTP demandera ces informations à minima :
- Un nom d’utilisateur au choix
- Un mot de passe
- Le répertoire auxquel l’utilisateur aura accès (ATTENTION : Veillez à bien indiquer que vous voulez avoir accès à la racine de votre serveur web, souvent « / »)
Connexion au serveur web avec FileZilla
Dès que votre compte FTP est créé, vous pouvez vous rendre sur FileZilla et vous connecter à votre site :
Ensuite vous cliquez sur « Nouveau site » puis vous entrez tous les champs demandés pour établir la connexion (Hôte, Port, Utilisateur, Mot de passe). Il faut faire attention aux champs « Protocole, Port et Chiffrement », en général il faut mettre « FTP » pour Protocole, « 21 » pour Port et « Connexion FTP explicite ».
Si par malheur ca ne voulait pas se connecter, essayez « SFTP » pour Protocole et « 22 » pour le port.
Une fois la connexion établie, vous devriez avoir quelque chose comme ca :
Etape 2 : Créer et lier une base de donnée au site
Si on veut rendre notre site dynamique, on doit créer une base de donnée et correctement la connecter à notre site. Normalement votre hebergeur web propose la création d’une base de donnée. Une fois que vous avez créer votre BDD avec : nom de la base, nom d’utilisateur et mot de passe, alors vous ferez un répertoire « config » avec dedans un fichier « db-connexion.php » (la nomenclature et la structure de votre serveur c’est vous qui gérez) :
Création d’un répertoire config et du fichier db-connexion.php
Code à mettre avec les informations de la BDD et la connexion à cette dernière
Etape 3 : Création de la page d’accueil
Normalement si votre hebergeur a bien fait son boulot, si quelqu’un tape votre nom de domaine dans l’URL de leur navigateur, il atterira sur un fichier « index.html » (fichier créé lors de l’initialisation du site). Vous pouvez le supprimer et créer à la place un fichier que vous nommerez « index.php ».
Ca devrait ressembler à ca :
A ce moment-là, on peut éditer le index.php avec Visual Studio Code et pour tester si tout fonctionne, en général, je fais un affichage de « toto » (on oublie pas de Ctrl + S et dire « oui » dans FileZilla) :
clic droit + Afficher / Editer
echo pour afficher et ‘toto’ mon texte
Sur le site, vous devriez avoir ceci, si tout s’est bien déroulé comme prévu :
