• 30 hours
  • Medium

Free online content available in this course.

Certificate of achievement available at the end this course

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Last updated on 11/23/17

Qu’est-ce qu’un site web ?

Log in or subscribe for free to enjoy all this course has to offer!

Alors, qu’est-ce qu’un site web et comment ça fonctionne ?

Pour un utilisateur, il n'est pas fondamental de comprendre comment fonctionne la mécanique qui se cache derrière une page web, par contre cela devient indispensable pour le développeur d'application web qui se doit d'appréhender correctement la façon dont les choses fonctionnent afin d'en tirer le meilleur parti.

Vous verrez, c'est plutôt simple. Et même si tout ne vous paraît pas clair dès le début, votre perception de ces concepts s'affinera petit à petit.

Comment fonctionne un site web

Un site web est un ensemble de fichiers qui sont hébergés sur un serveur, consultés par un navigateur Internet et mis en forme par un moteur de rendu. Pas très clair ? Détaillons un peu :

Ces fichiers peuvent être des simples pages HTML (extension .htm ou .html) ou des fichiers exécutables qui seront interprétés par le moteur de rendu.

Un serveur, c’est un (ou plusieurs) ordinateur puissant qui héberge des applications et auquel on peut se connecter via une adresse Internet, par exemple : http://fr.openclassrooms.com.

Sur ce serveur, il y a bien sûr un système d’exploitation (Windows, Linux,…) mais également des applications informatiques dont une particulière qui sert à exécuter des applications web, c’est ce que j’ai appelé le moteur de rendu.

Lorsque l’utilisateur va vouloir naviguer sur le site d'OpenClassrooms, il va saisir l’adresse du site dans son navigateur (Internet Explorer, Firefox, Chrome, etc...) et le navigateur va afficher une page HTML.

Ce qu’il se passe en fait c’est qu’en tentant d’accéder à une page d'un site (par exemple http://fr.openclassrooms.com/cours), le moteur va se connecter à cette adresse et demander au moteur de rendu de transformer la page demandée en quelque chose de compréhensible et d’affichable par le navigateur, en l’occurrence du HTML.

Fonctionnement d'un site web
Fonctionnement d'un site web

Sites statiques, sites dynamiques

Vous êtes déjà tous allés sur un site web. Si ! Déjà, si vous lisez ce cours en ligne, c’est que vous êtes allés sur une page du site d'OpenClassrooms. Il existe des sites web plus ou moins compliqués, mais on peut les classer grosso modo en deux grandes catégories : les sites statiques et les sites dynamiques.

Dans un site dit statique c’est un peu comme si vous affichiez un document issu d’un traitement de texte. Il s’agit d'un contenu structuré qui a été mis à disposition à cet emplacement grâce à un langage de programmation fait pour ça : le HTML. Vous saisissez dans la barre de votre navigateur Internet l’adresse d’un site, prenons par exemple le site d'un gîte sympathique où j'ai eu l'occasion de passer quelques nuits agréables, http://www.lesmelusines.com/Decouvrir.htm. La page Decouvrir.htm correspond à un document structuré situé sur le site http://www.lesmelusines.com/. Il y a plusieurs documents structurés sur ce site web (citons encore la page http://www.lesmelusines.com/acces.htm), puis en demandant à notre navigateur d'afficher cette page, celui-ci interprète le contenu de ce document structuré et vous l’affiche dans votre navigateur.

Ce genre de site est très bien pour présenter de l’information mais est très vite limité. Imaginons que sur le site d'OpenClassrooms je vous apprenne ASP.NET MVC mais qu’il y ait un endroit qui ne soit pas très clair (honte à moi !)… L’idéal serait de pouvoir mettre un commentaire demandant une précision afin que je (ou un autre lecteur) puisse éclaircir ce point particulier. Et ceci n’est pas faisable avec du HTML tout simple…

C’est là qu’entrent en action les sites dit dynamiques… En fait, aujourd’hui, il n’y a quasiment plus que ça. Rares sont les sites qui n’affichent que du HTML, à part quelques pages persos perdues au fin fond des méandres d’Internet ou bien des sites qui n'ont besoin d'afficher que quelques informations, comme le site du gite par exemple. Le site d'OpenClassrooms par exemple est un site dynamique, les utilisateurs peuvent poser des questions sur le forum, commenter les cours, s’inscrire, changer la photo de leur profil… Le site de votre banque est un site dynamique également, qui affiche en permanence l‘état de votre compte ; et ce n’est pas un être humain qui, à chaque fois que vous faites un paiement, vient modifier le HTML de la page pour refléter les changements.

Ces sites-là sont capables d’exécuter des programmes qui vont être en mesure d’afficher des informations différentes en fonction du besoin. C’est le rôle du serveur web, il exécute la page dynamique (qui peut par exemple afficher la liste de tous les messages d’un utilisateur) et la transforme en HTML afin qu’elle soit affichable par le navigateur internet.

Les requêtes GET et POST

Lorsqu’on accède à un site web et qu’on lui demande de nous renvoyer le contenu d’une page, on fait ce qu’on appelle une « requête HTTP » sur le site web. Rappelez-vous, cela correspond aux étapes 1 et 3 dans notre schéma de fonctionnement d’un site web :

La requête HTTP correspond à l'envoi d'une demande de consultation et à la réception de la réponse
La requête HTTP correspond à l'envoi d'une demande et à la réception de la réponse

Un serveur web est capable d’interpréter plusieurs types de requêtes. Celles qui vont nous servir ici sont les requêtes du type GET et du type POST.

Une requête du type GET (que l’on peut traduire par « obtenir ») correspond à une demande qui va nous permettre d’obtenir une ressource du site web en lecture seule. C’est la requête la plus souvent utilisée et qui permet de dire au serveur web « donne-moi le HTML correspondant à cette page », par exemple http://www.lesmelusines.com/index.htm. Ici, le serveur bien discipliné va vous renvoyer le HTML correspondant au fichier index.htm.

Il est possible de passer des paramètres à une requête GET, pour cela on utilise une construction particulière de l'URL. Par exemple, imaginons une page fictive du site d'OpenClassrooms qui permet d'afficher un cours.

Appelons cette page fictive pagedecours.html. Pour afficher le cours ASP.NET on pourrait envisager d’aller sur cette page de cette façon : http://fr.openclassrooms.com/pagedecours.html?cours=ASP.NET. Ceci est possible grâce au point d'interrogation (?) qui se place après le nom de la page web, qui fait office de séparateur et qui indique qu'après lui, on trouve des paramètres. Ici, le paramètre cours vaudra ASP.NET, ce qui permettra d’afficher le cours qui nous intéresse. Pour afficher le cours sur PHP, il faudrait faire par exemple http://fr.openclassrooms.com/pagedecours.html?cours=PHP.

Il est possible de passer plusieurs paramètres à une requête GET, il suffit d’enchaîner les paramètres et de les séparer par le symbole &. Par exemple, en reprenant l'exemple de ma page fictive http://fr.openclassrooms.com/pagedecours.html, si je voulais retrouver mon cours en ligne sur ASP.NET, je pourrais faire un requête GET avec deux paramètres :  http://fr.openclassrooms.com/pagedecours.html?cours=ASP.NET&auteur=nico.pyright. Vous aurez compris que le paramètre cours vaudra ASP.NET et que le paramètre auteur vaudra nico.pyright.

À noter qu’une requête GET correspond à une consultation, elle ne doit pas modifier le contenu d’une page et doit pouvoir être réexécutée à l’infini.

La requête du type POST (que l’on peut traduire par « envoyer ») soumet des données à une ressource d'un site web. C’est typiquement le cas d’un formulaire HTML, par exemple lorsque vous vous inscrivez sur le site d'OpenClassrooms, vous devez fournir votre pseudo, votre email, votre mot de passe, etc. dans le formulaire d’inscription :

Le formulaire d'inscription d'Open Class Room
Le formulaire d'inscription d'OpenClassrooms

Ces données doivent être envoyées au serveur web afin qu’il puisse réaliser votre inscription et vous envoyer un email de bienvenue.

Nous verrons plus loin comment ces requêtes HTTP s’inscrivent dans nos applications ASP.NET MVC.

En résumé

  • Un site web est constitué d'un ensemble de pages HTML

  • Un site web peut être soit statique, soit dynamique

  • Aujourd’hui, il n’y a quasiment plus que des sites dynamiques

  • Le serveur web peut exécuter des mini-programmes qui renvoient du HTML afin d’être affiché dans un navigateur internet

  • Pour accéder à la page d’un site web sur notre navigateur Internet, on effectue ce qu’on appelle une « requête http » auprès du serveur web hébergeant le site. Le serveur web exécute alors des mini-programmes qui renvoient du HTML et nous permettent d’afficher la page du site dans notre navigateur.

  • On peut effectuer plusieurs types de requêtes sur un serveur web, et notamment les requêtes GET et POST qui permettent respectivement de consulter des informations et d'envoyer des informations.

Example of certificate of achievement
Example of certificate of achievement