• 6 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 17/11/2020

Découvrez les langages serveur

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

En plus des langages client que nous venons d’évoquer (HTML, CSS et JavaScript), il y a une quantité importante de langages serveur.

Quelle est la différence ? Pourquoi faut-il encore plus de langages ?

Les langages serveur sont, comme leur nom l’indique, gérés par les serveurs. Les clients n’y touchent pas. Leur rôle est un peu différent :

  • Les langages client décrivent comment le site web doit s’afficher.

  • Les langages serveur décrivent comment le site web doit se comporter.

Subtil, mais important !

  • Avec un langage client, je peux dire "Un menu doit s’afficher à gauche de mon site web".

  • Avec un langage serveur, je peux dire "Le menu ne doit s’afficher que si cette personne a créé un compte sur mon site".

Quelques langages serveur

Les langages serveur sont nombreux. En voici quelques exemples :

  • PHP

  • Java (rien à voir avec JavaScript, attention !)

  • Python

  • C#

  • ...

Il n’y a pas de meilleur langage. On me pose souvent la question et je réponds toujours la même chose : prenez le langage que vous voulez, celui sur lequel un ami peut vous aider peut-être.

On trouve tous ces langages parmi les sites web les plus connus. On trouve par exemple du PHP chez Facebook et OpenClassrooms, du Java sur le site de votre banque, du Python et du Java chez Google, etc.

Les frameworks

En plus de ces langages, on a inventé des frameworks pour faciliter la création de sites web dans ces langages.

Les frameworks sont des boîtes à outils qui se révèlent de plus en plus indispensables aujourd’hui. De la même façon que l’on n’envisage plus de creuser un trou "à la main" (on préfère utiliser une pelleteuse !), on n’envisage plus trop de construire un site web à la main. On se fait aider un peu par un framework !

Les frameworks se rapportent à des langages. On peut citer :

  • Pour PHP : Symfony, Zend...

  • Pour Java : Java EE (ou J2EE)

  • Pour Python : Django

  • Pour C# : ASP .NET

Inutile de les retenir ! Je souhaite juste que vous connaissiez le concept de framework à ce stade.

Comment un langage serveur génère-t-il une page ?

Le rôle d’un langage serveur est de générer une page web. On peut résumer l’interaction entre le client et le serveur comme ceci :

Le client demande la page au serveur. Le serveur génère la page puis l'envoie au client.
Communication entre un client et un serveur
  1. Le client demande une page au serveur.

  2. Le serveur génère la page (à l’aide du langage serveur).

  3. Le serveur envoie la page (sous forme de code HTML et CSS).

Par exemple, si vous utilisez PHP comme langage serveur, et HTML et CSS comme langages client, voici à quoi ressemblera le schéma :

Le serveur génère la page en utilisant le langage PHP, puis envoie la page au client en utilisant le langage HTML et CSS.
Communication avec les langages client et serveur

Utilisation des langages

Comme vous le voyez, PHP (le langage serveur) est du côté du serveur. Son rôle est de générer une page HTML et CSS, qui sera ensuite envoyée au client.

Un client ne sait lire que du HTML et du CSS (ainsi que du JavaScript). Il ne sait pas lire un langage serveur comme PHP.

À quoi ressemble un langage serveur ?

Prenons un langage serveur comme PHP. Voici un exemple de code en PHP qui vérifie que le fichier envoyé via un formulaire est bien une image et que celle-ci n’est pas trop grosse :

<?php
if (isset($_FILES['monfichier']) AND $_FILES['monfichier']['error'] == 0)
{
if ($_FILES['monfichier']['size'] <= 1000000)
{
$infosfichier = pathinfo($_FILES['monfichier']['name']);
$extension_upload = $infosfichier['extension'];
$extensions_autorisees = array('jpg', 'jpeg', 'gif', 'png');
if (in_array($extension_upload, $extensions_autorisees))
{
// Afficher le message ici
}
}
}
?>

Là encore, ne paniquez pas si vous ne comprenez pas, c’est normal ! Un code en langage serveur est souvent plus compliqué à comprendre pour un débutant qu’un code en langage client.

À vous de jouer !

Avec cette activité, prouvez que vous êtes capables de reconnaître le rôle des langages serveur en analysant une situation très concrète : la connexion au site OpenClassrooms.

Page connexion d'OpenClassrooms comprenant un formulaire
Page connexion d'OpenClassrooms

Je vous ai listé ci-dessous des développements qu’on a dû effectuer pour créer cette fonctionnalité. Votre mission est de déterminer, pour chacun de ces développements, lesquels ont été programmés avec les langages serveur et lesquels avec des langages client. C’est parti !

  • Créer un champ texte “Adresse mail ou nom d’utilisateur”

  • Autoriser la connexion des utilisateurs ayant un mot de passe respectant les critères de sécurité

  • Faire apparaître le bouton “SE CONNECTER” en violet

  • Créer le bouton à cocher “Se souvenir de moi”

  • Souligner en violet le lien “Mot de passe oublié ?”

  • Autoriser les utilisateurs ayant une adresse mail correcte à se connecter

  • Générer un tableau de bord personnalisé pour les utilisateurs se connectant

  • Créer un lien vers la page “Inscrivez-vous gratuitement”

Vérifiez votre travail

Langage client :

  • Créer un champ texte “Adresse mail ou nom d’utilisateur”

  • Faire apparaître le bouton “SE CONNECTER” en violet

  • Créer le bouton à cocher “Se souvenir de moi”

  • Souligner en violet le lien “Mot de passe oublié ?”

  • Créer un lien vers la page “Inscrivez-vous gratuitement”

Langage serveur :

  • Autoriser la connexion des utilisateurs ayant un mot de passe respectant les critères de sécurité

  • Autoriser les utilisateurs ayant une adresse mail correcte à se connecter

  • Générer la page “Tableau de bord” pour les utilisateurs se connectant

Vous l’aurez compris : toute la partie apparente du site est codée avec les langages client, comme html, alors que tout ce qui décrit le comportement du site relève du langage serveur.

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