Créer son site web – Leçon 3 : Composantes et langages de programmation

Dans notre dernière leçon, nous présentions les différentes plateformes utilisables pour créer son site (conçu par soi-même, site-modèles, CMS). Ici, nous expliquons les différentes composantes de votre site, principalement serveur et base(s) de données.

Sur quoi repose un site ?

Un site web repose sur deux composantes principales :
-* Le serveur d’hébergement (obligatoire)
-* La base de données (optionnel)

Le serveur d’hébergement est le serveur dédié par l’hébergeur de votre site au stockage des fichiers qui le composent. Ainsi, n’importe quel site sur lequel on se connecte affiche des pages stockées dans le serveur d’hébergement.

La base de données et un outil indispensable pour tout site qui nécessite le stockage dynamique de données : identifiants, numéros de pages ou d’articles, catégories… En effet, si vous voulez un site où du contenu peut être ajouté directement en ligne, sans passer par le serveur d’hébergement (création de profils, mise en ligne de fichiers, mise en ligne d’articles…), vous devrez obligatoirement passer par une BDD.

**Accéder au serveur : le client FTP

Vous pouvez communiquer avec votre serveur d’hébergement via le protocole FTP — File Transfer Protocol. Lors de votre achat d’un service d’hébergement, l’adresse FTP et des identifiants ont dû vous être communiqués.

Téléchargez ensuite un client FTP — nous vous recommandons le logiciel open-source FileZilla.

Connectez-vous ensuite avec vos identifiants FTP pour modifier le contenu de votre site. Si vous utilisez un CMS, suivez les indications du CMS, sinon commencez à mettre vos fichiers en ligne. En général, le premier fichier à mettre en ligne est le fichier index, qui est la page d’accueil de votre site.

**Accéder à la base de données : PHPmyAdmin

Si votre offre d’hébergement inclut une base de données, vous avez dorénavant accès à une BDD privée (dédiée uniquement à votre site) ou publique (plusieurs sites sont gérés). Si la BDD doit être mise en place manuellement, nous vous invitons à lire les instructions de votre hébergeur.

Pour accéder à votre base de données, le moyen le plus simple est d’utiliser PHPmyAdmin, qui est un logiciel permettant d’accéder et de modifier une base de données. Votre hébergeur devrait déjà l’avoir installé et devrait vous indiquer comment y accéder. Par exemple, pour OVH, les bases de données publiques sont disponibles ici.

Il existe également des logiciels dédiés, mais ceux-ci ne fonctionnent généralement qu’en local. Si vous avez une base de données privée, vérifiez les conditions d’accès distante auprès de votre hébergeur.

Vous avez à partir de là la maîtrise de votre site : vous pouvez modifier son contenu (FTP) et sa base de données (PHPmyAdmin).

 

Comment fonctionne votre site ? Les langages de programmation

Comme un logiciel, un site affiche son contenu par le biais de différents langages de programmation, qui l’organisent et le structurent. L’essentiel n’est d’abord pas d’apprendre ces langages, surtout si vous utilisez un CMS, mais de comprendre leur fonctionnement.

Il existe deux grands type de langages :
-* Les langages côté navigateur : ils se chargent d’afficher le contenu d’un site pour votre navigateur. Les plus connus sont le HTML, le CSS et le Javascript.
-* Les langages côté serveur : ce sont des scripts exécutés par le serveur avant l’affichage des pages d’un site. Ils permettent par exemple de communiquer avec la base de données. Les plus connus sont le PHP et le SQL.

Prenons ainsi le site d’Inside Electronic Pipo comme exemple :
-* Avant d’afficher la page, le serveur exécute un script PHP qui communique avec la base de données, en extrait des informations, puis renvoie les données à afficher au format HTML.
-* Les données HTML retournées sont affichées par le navigateur.

Chaque étape est indispensable : il faut un langage pour savoir quoi afficher (PHP) et un langage d’affichage (HTML).

Ce qu’il faut retenir : les scripts côté serveur (PHP, SQL, ASP) sont exécutés avant les scripts côté navigateur (Javascript). Vous ne pouvez donc pas utiliser du Javascript pour interagir avec du PHP (erreur de débutant commune) !

Voici les langages typiques utilisés par un site :
-* Le HTML définit la structure de base du site : en haut un titre, à droite une colonne, à gauche une boîte…
-* Le CSS est utilisé en conjonction avec le HTML et définit le style du site : la boîte du haut sera rouge, le bouton du bas sera de telle couleur et telle largeur…
-* Le Javascript permet l’exécution de scripts après le chargement de la page. Par exemple, en cliquant sur tel bouton, une pop up s’affiche, etc.
-* Le PHP est utilisé dès que le contenu à afficher est dynamique : par exemple, il sera différent si je suis administrateur ou non. Dès lors, le PHP vérifie que je suis administrateur via la BDD puis renvoie le HTML à afficher selon la réponse de la BDD.
-* Le SQL est utilisé en conjonction avec le PHP : c’est le langage interne des BDD mySQL (quasiment hégémoniques).

Il existe d’autres langages de programmation, souvent des alternatives aux langages présentés ci-dessus : par exemple, le ASP est un concurrent du PHP.