• 6 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 13/03/2019

Les notions clés

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Avant de parler des CMS en eux-mêmes, je vais vous expliquer ou vous réexpliquer quelques bases sur le fonctionnement des sites web en général. Cela vous sera utile pour bien suivre le cours.

Client et serveur

Je vais commencer par vous présenter le fonctionnement général d'un site web. Représenté sous la forme d'un schéma, un site web fonctionne comme cela :

Fig. 1 - l'architecture d'une page web
L'architecture d'une page web

Ce que l'on appelle "client", c'est l'ordinateur (ou téléphone/tablette) qui vous sert à vous connecter à Internet. Le client effectue une requête (lorsque vous cliquez sur un lien ou quand vous tapez une adresse directement dans votre navigateur) pour obtenir une page web.

La base de données est l'espace où sont stockées les informations nécessaires à afficher la page web demandée (textes, images...).

Enfin, le serveur est la machine qui permet de faire le lien entre les deux.

  • D'abord, le serveur reçoit une demande de la part du client (qui pourrait se traduire par : "Envoie moi la page xxx"). (1)

  • Il récupère les informations nécessaires dont il a besoin pour construire la page sur la base de données. (2) et (3)

  • Il envoie (on dit aussi qu'il sert) la page demandée au client (4) et le client interprète ce qu'il reçoit pour l'afficher. À partir de là, la page s'affiche sur votre écran ! :) 

Maintenant, voyons un peu plus en détails les différentes étapes.

Côté client

Comme vous le savez peut-être, une page web est généralement construite avec du HTML/CSS/JavaScript :

  1. HTML est une norme qui permet de structurer un document (titres, parties, header, footer...). C'est le seul élément indispensable à la création d'une page web.

  2. CSS est un formalisme qui permet de mettre en forme un document (couleur, police, taille de caractère...).

  3. JavaScript est un langage de programmation permettant d'animer le contenu d'une page web (réagir à une action de l'utilisateur, afficher un élément évolutif, etc.).

Lorsque vous demandez à afficher une page web, vous demandez au serveur de vous envoyer un ou plusieurs fichier(s) HTML, JavaScript et CSS. Une fois reçus, ces fichiers seront utilisés par votre navigateur (Chrome, Firefox, Opéra...) pour vous afficher la page demandée.

Côté serveur 

À la différence du HTML qui est standard côté client, il existe de très nombreux langages pour programmer un serveur web (PHP, JSP, ASP, Java...). 

En fait, presque tous les langages permettent de faire un serveur web ! Cependant certains, tels que PHP,  sont dédiés à la création de serveur web.

Quel que soit le langage utilisé, l'objectif du serveur reste le même lors d'une requête d'affichage de page.

  1. D'abord, il va interpréter le message envoyé par le client (sous la forme d'un lien, d'une adresse, d'un formulaire...).

  2. Il va ensuite récupérer les informations sur la base de données.

  3. Cela va lui permettre de construire la page en assemblant le HTML, le CSS et le JavaScript.

  4. Enfin, il pourra envoyer la page au client.

Côté base de données

Sans rentrer trop dans le détail, la plupart des bases de données utilisées dans le Web aujourd'hui sont des bases de données relationnelles utilisant le langage SQL (Structured Query Language, soit langage de requête structurée).

Comme son nom l'indique, SQL est un langage dédié au stockage et à la récupération d'informations sur (ou à partir) d'une base de données.

Il existe diverses variantes de ce langage en fonction de la base de données utilisée (MySQL, PostgreSQL, Oracle...) mais elles sont relativement minimes et nous ne les considérerons pas dans ce cours.

Pour faire simple, la base de données a deux utilités :

  • sauvegarder des informations envoyées par le serveur ; 

  • envoyer au serveur des informations préalablement enregistrées.

En reprenant le schéma initial, cela donne : 

Fig. 2 : architecture d'une page web
Architecture d'une page web

Site dynamique et site statique

Tous les sites ont-ils besoin d'une base de données et d'un serveur ?

Non. Il est tout à fait possible de se passer de base de données et/ou de serveur. Comme je l'ai dit, seul le HTML est indispensable à la création d'une page web.

Sans serveur ni base de données, la page sera statique : c'est-à-dire qu'elle sera toujours la même quel que soit le moment où vous la consultez.

Avec une base de données et un serveur, il est possible de créer une page web dynamique : une page web qui peut évoluer avec les utilisateurs (comme une page Facebook) ou au cours du temps (comme un blog par exemple).

Front-office et back-office

Dernier point de connaissance à aborder : la différence entre ce que l'on appelle le front-office et le back-office ("boutique" et "arrière-boutique" en français).

Comme nous venons de le voir, le rôle du serveur, lorsque l'on demande à afficher une page, est d'aller chercher des informations sur la base de données. D'où la question légitime : d'où viennent ces informations qui sont présentes dans la base de données ?

Si vous avez lu le titre de cette section, vous devez vous douter de la réponse : du back-office !

On appelle back-office la partie du site web qui permet de modifier/ajouter/retirer des informations sur notre site. La partie d'un site web où sont affichées ces informations, c'est le front-office. :)

Un schéma pour visualiser ça : 

Fig. 3 : front-office et back-office d'un site web
Front-office et back-office d'un site web
  • Le back-office envoie au serveur une information et le serveur stocke cette information dans la base de données. (1) et (2)

  • Le front-office demande l'affichage de la page au serveur, qui va chercher dans la base les données nécessaires. (3) et (4)

On ne peut pas mettre d'informations dans la base de données directement depuis le front-office ou sans back-office ?

Si.

Par exemple, lorsque vous laissez un commentaire sur un blog, ce commentaire est stocké dans la base de données pour pouvoir être affiché aux autres internautes. Pourtant, vous n'êtes pas passé par le back-office !... mais vous avez bel et bien modifié le contenu de la base de données.

En fait, la différence entre front-office et back-office n'est pas une différence technique, c'est une différence d'usage. Le back-office est la partie du site (généralement privée et sécurisée par un mot de passe) qui permet à l'administrateur du site d'administrer son site web : ajouter des pages, modifier du contenu, gérer les utilisateurs, etc. Le front-office, lui, est à destination des usagers du site : il est visible par les internautes.

Exemple de certificat de réussite
Exemple de certificat de réussite