Apprendre la programmation Web côté serveur

Introduction au Web dynamique - Le rôle du PHP

L'objectif de ce cours est de vous apprendre à faire des pages dynamiques avec PHP et MySQL en organisant son code avec l'architecture MVC.

Ces notes de cours proviennent d'un cours donné au département Informatique de l'IUT de Montpellier. Certaines informations (liens, logiciels...) sont spécifiques à l'IUT et le lecteur devra les adapter à son contexte.

Pour réagir au contenu de ce tutoriel, un espace de dialogue vous est proposé sur le forum.

1 commentaire

Article lu fois.

Les trois auteurs

Romain Lebreton

Sébastien Gagné

Auréline Quatrehomme

L'article

Publié le 2 septembre 2016 - Mis à jour le 12 mars 2018

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

I. Le fonctionnement du World Wide Web▲

Le client : c'est le visiteur d'un site Web. Il demande la page Web au serveur. En pratique, vous êtes des clients quand vous surfez sur le Web.
Plus précisément c'est votre navigateur Web (Firefox, Chrome, Safari, IE, Edge…) qui est le client, car c'est lui qui demande la page Web.
Le serveur : ce sont les ordinateurs qui délivrent les sites Web aux internautes, c'est-à-dire aux clients.

Le client fait une requête que serveur, qui répond en donnant la page Web.

I-A. Protocole de communication : HTTP▲

HTTP (HyperText Transfer Protocol) est un protocole de communication entre un client et un serveur développé pour le Web. L'une de ses fonctions principales est ainsi de récupérer des pages Web.

I-B. À quoi ressemble une requête HTTP ?▲

La requête HTTP la plus courante est la requête GET. Par exemple pour demander la page Web : http://infolimon.iutmontp.univ-montp2.fr/~rletud/index.html :

Sélectionnez

GET /~rletud/index.html HTTP/1.1
Host: infolimon.iutmontp.univ-montp2.fr

La réponse est alors :

Sélectionnez

HTTP/1.1 200 OK
Date: Tue, 08 Sep 2015 13:32:19 GMT
Server: Apache/2.2.14 (Ubuntu)
Last-Modified: Tue, 08 Sep 2015 13:06:07 GMT
Accept-Ranges: bytes
Content-Length: 5781
Content-Type: text/html

<html><head>... (contenu de index.html)

I-C. Le navigateur comme client HTTP▲

Quand on ouvre une URL en http://, le navigateur va agir comme un client HTTP. Il va donc envoyer une requête HTTP.

Le serveur HTTP renvoie une réponse HTTP qui contient la page Web demandée.

Le navigateur interprète alors la page Web et l'affiche.

I-D. Écoutons le réseau▲

Ouvrons http://infolimon.iutmontp.univ-montp2.fr/~rletud/index.html en écoutant le réseau à l'aide des outils de développement (F12 ou Menu Outils/Outils de développement puis onglet Réseau).

I-E. Qu'est-ce qu'un serveur HTTP ?▲

Un serveur HTTP est un logiciel qui répond à des requêtes HTTP. Il est souvent associé au port 80 de la machine hôte.

Quelques exemples de serveurs HTTP

Apache HTTP Server : classique, celui que l'on utilisera.
Apache TomCat : évolution pour Java (J2EE).
IIS (Internet Information Services) : Microsoft.
Node.js : codé en JavaScript.

En pratique lors des TD, nous utiliserons le serveur HTTP Apache de l'IUT (infolimon) et nous vous ferons installer des serveurs HTTP sur vos ordinateurs portables.

Résumé

Un serveur Web = un serveur HTTP.

II. Pages Web statiques ou dynamiques▲

II-A. Différence entre page statique/dynamique▲

Les sites statiques : sites réalisés uniquement à l'aide de HTML/CSS. Ils fonctionnent très bien, mais leur contenu ne change pas. Les sites statiques sont donc bien adaptés pour réaliser des sites « vitrine».
Les sites dynamiques : ils utilisent d'autres langages tels que PHP pour générer du HTML et CSS. La plupart des sites Web que vous visitez sont dynamiques.

Fonctionnalités typiques de sites dynamiques : un espace membres, un forum, un compteur de visiteurs, des actualités, une newsletter.

II-B. Mécanisme de génération des pages dynamiques 1/2▲

Rappel

Site statique :

Le client demande au serveur à voir une page Web (requête HTTP) ;
Le serveur lui répond en lui envoyant la page réclamée (réponse HTTP).

II-C. Mécanisme de génération des pages dynamiques 2/2▲

Site dynamique

Le client demande au serveur à voir une page Web (requête HTTP) ;
Le serveur crée la page spécialement pour le client (en suivant les instructions du PHP) ;
Le serveur lui répond en lui envoyant la page qu'il vient de générer (réponse HTTP).

II-D. Où intervient le PHP ?▲

Un module PHP (mod_php5) est intégré au serveur HTTP Apache.
Quand le serveur Web reçoit une requête d'un fichier .php, il génère dynamiquement la page Web en exécutant le code PHP de la page.
La page générée est ensuite renvoyée dans la réponse HTTP.

C'est ce que l'on appelle une page dynamique.

II-E. Le langage de création de pages Web : PHP▲

Le rôle de PHP est justement de générer du code HTML. C'est un langage que seuls les serveurs comprennent et qui permet de rendre votre site dynamique.

Image non disponible

Attention : les clients (navigateur) sont incapables de comprendre le code PHP : ils ne connaissent que le HTML et le CSS.

Image non disponible

II-F. Les concurrents de PHP▲

ASP .NET : conçu par Microsoft, il exploite le framework .NET (C#).
Ruby on Rails : ce framework s'utilise avec le langage Ruby.
Django : il est similaire à Ruby on Rails, mais il s'utilise en langage Python.
Java Server Pages : particulièrement utilisé dans le monde professionnel.

Lequel est le meilleur ? Tout dépend de vos connaissances en programmation.

PHP se démarque de ses concurrents par une importante communauté qui peut vous aider. C'est un langage facile à utiliser, idéal pour les débutants comme pour les professionnels (Wikipédia, Yahoo et Facebook).

III. Un premier aperçu de PHP▲

III-A. PHP comme langage de génération de pages Web▲

PHP sert à créer des documents HTML :

il prend donc en entrée un fichier .php qui contient de l'HTML et du PHP ;
il ressort un document HTML pur ;
pour cela, il exécute les instructions PHP qui lui indiquent comment générer le document en sortie.

Remarque : PHP peut générer tout type de document, pas nécessairement du HTML.

III-B. Votre premier fichier PHP▲

Document PHP en entrée :

Sélectionnez

<?php
  echo "Hello World!";
?>

PHP s'exécute sur ce document et produit :

Hello World

Explications

Les balises ouvrantes <?php et fermantes ?> doivent entourer le code PHP.

L'instruction echo a pour effet d'insérer du texte dans le document en sortie.

Démonstration avec la ligne de commande php.

III-C. Imbrication de PHP dans le HTML 1/2▲

Le document PHP suivant :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

<!DOCTYPE html>
<html>
    <head>
        <title> Mon premier php </title>
    </head>
    <body>
      <?php echo "Bonjour"; ?>
    </body>
</html>

Produira :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

<!DOCTYPE html>
<html>
    <head>
        <title> Mon premier php </title>
    </head>
    <body>
      Bonjour
    </body>
</html>

III-D. Imbrication de PHP dans le HTML 2/2▲

En fait, les deux fichiers suivants sont équivalents :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

<!DOCTYPE html>
<html>
    <head>
        <title> Mon premier php </title>
    </head>
    <body>
      <?php echo "Bonjour"; ?>
    </body>
</html>

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

<?php
  echo "<!DOCTYPE html>";
  echo "<html>
      <head>
          <title> Mon premier php </title>
      </head>
      <body>";
  echo "Bonjour";
  echo "</body></html>"; ?>

En effet, ce qui est en dehors des balises PHP est écrit tel quel dans la page Web générée (comme si on avait fait echo).

III-E. Test de la page sur un serveur HTTP▲

Enregistrons ce fichier PHP sur le serveur HTTP infolimon de l'IUT. Les fichiers PHP se mettent dans le dossier public_html de votre répertoire personnel.
Vous pouvez alors y accéder à partir de l'URL http://infolimon.iutmontp.univ-montp2.fr/~loginIUT/ en remplaçant loginIUT par votre login.

Exemple

On écrit le fichier bonjour.php suivant dans notre dossier public_html :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.

<!DOCTYPE html>
<html>
    <head>
        <title> Mon premier php </title>
    </head>
    <body>
      <?php echo "Bonjour"; ?>
    </body>
</html>

On ouvre http://infolimon/~loginIUT/bonjour.php pour voir la page générée

Bonjour

Note : regardez les sources pour voir la page complète.

III-F. Les tableaux associatifs▲

Vous connaissez déjà les tableaux classiques, ceux qui sont indexés par 0,1,2…

Les tableaux en PHP peuvent aussi s'indexer par des chaînes de caractères :

on peut créer le tableau case par case :
Sélectionnez
```
$coordonnees['prenom'] = 'François';
$coordonnees['nom'] = 'Dupont';
```
N.B. : En PHP les variables commencent par $

ou l'initialiser en une fois

Sélectionnez

$coordonnees = array (
  'prenom' => 'François',
  'nom'    => 'Dupont'  );

notez l'existence des boucles foreach pour parcourir ces tableaux :

Sélectionnez

foreach (array_expression as $key => $value){
    //commandes
}

IV. Transmettre des données entre pages Web▲

IV-A. Comment ça marche ?▲

Les pages Web se transmettent des données entre elles.

Par exemple, votre nom/prénom, le fait que vous êtes connectés, vos réponses aux formulaires d'inscription.

Sans données supplémentaires, on n'aurait pas de pages personnalisées et on serait ramené aux sites statiques.

IV-B. Les query strings dans l'URL▲

Une URL (Uniform Resource Locator) sert à représenter une adresse sur le Web.

Une URL simple :
Une URL avec query string (chaîne de requête) :

Image non disponible

Sources : Standard des URL, Wikipedia

IV-C. Récupérer des données GET en PHP▲

PHP est capable de récupérer les données saisies dans les URL.

PHP va automatiquement remplir le tableau associatif $_GET avec les informations contenues dans le query string.

Exemple

Quand PHP reçoit le lien bonjour.php?nom=Dupont&prenom=Jean, il va :

remplir le tableau $_GET avec

Sélectionnez

$_GET["nom"] = "Dupont";
$_GET["prenom"] = "Jean";

puis lancer le script bonjour.php.

IV-D. Exemple de transmission en GET▲

Une 1^re page avec un lien contenant des informations dont son query string :

Sélectionnez

<a href="bonjour.php?nom=Dupont&prenom=Jean">
  Dis-moi bonjour !
</a>

Quand on clique sur ce lien, on est renvoyé sur la page bonjour.php suivante :

<p>Bonjour <?php echo $_GET['prenom']; ?> !</p>

qui va s'exécuter pour créer la page Web :

<p>Bonjour Jean !</p>

En effet, PHP aura rempli le tableau $_GET avec :

Sélectionnez

$_GET["nom"] = "Dupont";
$_GET["prenom"] = "Jean";

avant de lancer le script bonjour.php.

IV-E. Les formulaires▲

Les formulaires utilisent entre autres l'envoi de données dans le query string pour transmettre les informations qui ont été remplies.

On va voir qu'il y a deux types de formulaires :

ceux dont les données sont envoyées avec la méthode GET ;
ceux dont les données sont envoyées avec la méthode POST.

IV-F. Les formulaires GET▲

Considérons le formulaire suivant et supposons que l'utilisateur a saisi MaDonnee :

Sélectionnez

1.
2.
3.
4.

<form method="get" action="traitement.php">
    <input type="text" name="nom_var" />
    <input type="submit" />
</form>

Le clic sur le bouton Valider :
Donc le clic Valider surcharge l'URL traitement.php?nom_var=MaDonnee.

charge la page traitement.php (champ action du formulaire),
transmet ses informations dans le query string ;

On reconnait le champ name du formulaire et ce qu'a rempli l'utilisateur ;

La page traitement.php suivante s'exécute avec le tableau $_GET['nom_var']="MaDonnee" ;

La page générée par traitement.php est <p>La donnée nom_var est MaDonnee !</p>.

IV-G. Pourquoi la méthode du formulaire s'appelle “GET” ?▲

Parce que en method="get", le formulaire envoie une requête HTTP de type GET.

En effet lorsque l'on valide le formulaire, le navigateur (client HTTP) envoie la requête HTTP de type GET suivante :

Sélectionnez

GET /~rletud/traitement.php?nom_var=valeur HTTP/1.1
Host: infolimon.iutmontp.univ-montp2.fr

C'est de cette manière que l'on demande une page Web généralement.

IV-H. Les formulaires POST 1/3▲

Un formulaire en méthode POST envoie ses informations différemment :

elles ne sont plus encodées dans le query string :

Sélectionnez

<form method="post" action="traitePost.php">
    <input type="text" name="nom_var" />
    <input type="submit" />
</form>

Pour récupérer les informations dans la page cible traitePost.php, nous utiliserons alors le tableau associatif $_POST de PHP.

Exemple

Quand on clique sur Valider, on est renvoyé sur la page traitePost.php suivante :

<p>La donnée nom_var est <?php echo $_POST['nom_var']; ?> !</p>

qui va s'exécuter pour créer la page Web :

<p>La donnée nom_var est MaDonnee !</p>

IV-I. Les formulaires POST 2/3▲

Plus précisément, avec un formulaire en method="post" :

La page chargée va être traitePost.php sans query string ;
Les données du formulaire sont envoyées dans le corps d'une requête HTTP de type POST ;
On récupère les données dans le tableau PHP $_POST.

Dans notre exemple, PHP fait l'affectation $_POST["nom_var"] = "valeur" juste avant d'exécuter la page PHP traitePost.php.

IV-J. Les requêtes HTTP de type POST▲

Nous voyons ici le deuxième type de requête HTTP le plus courant : les requêtes HTTP de type POST.

Sélectionnez

1.
2.
3.
4.
5.
6.

POST /~rletud/traitePost.php HTTP/1.1
Host: localhost
Content-Length:14
Content-Type:application/x-www-form-urlencoded

nom_var=valeur

Elles servent aussi à demander des pages Web. Les principales différences sont :

La présence dans la requête HTTP d'un corps de requête en plus de l'en-tête ;
L'en-tête et le corps de la requête sont séparés par une ligne vide ;
Le corps de la requête HTTP sert ici à envoyer les informations.

IV-K. Avantages et inconvénients des deux méthodes▲

La méthode GET :
- se prête bien à un site en développement, car on peut facilement contrôler les valeurs et noms de variables du formulaire ;
- il est facile de créer un lien <a> vers une page traitant un formulaire en méthode GET et d'y envoyer des données via le query string.
La méthode POST :
- est plus propre, car les valeurs ne sont plus affichées dans la barre d'adresse du navigateur ;
- attention : ces informations ne sont pas vraiment cachées pour autant.

V. Bonus : Émuler un client HTTP textuel▲

Expérience amusante

Même si le client HTTP le plus connu est votre navigateur, il est facile de simuler un client HTTP autrement. La commande telnet permet d'envoyer du texte à une machine distance. En envoyant le texte d'une requête HTTP à un serveur HTTP, celui-ci nous envoie sa réponse HTTP normalement.

Exemple

Sélectionnez

> telnet infolimon.iutmontp.univ-montp2.fr 80
GET /~rletud/ HTTP/1.1
Host: infolimon.iutmontp.univ-montp2.fr

nous répond :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

HTTP/1.1 200 OK
Date: Tue, 08 Sep 2015 20:24:04 GMT
Server: Apache/2.2.14 (Ubuntu)
Last-Modified: Tue, 08 Sep 2015 20:05:38 GMT
Accept-Ranges: bytes
Content-Length: 225
Content-Type: text/html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title> Insérer le titrer ici </title>
  </head>

  <body>
    Un problème avec les accents à é è ?
    <!-- ceci est un commentaire -->
  </body>
</html>

Faites de même avec la requête POST précédente.

VI. Sources▲

Open Classrooms - Concevez votre site web avec PHP et MySQL
Documentation officielle de PHP

VII. Note de la rédaction de Developpez.com▲

Nous tenons à remercier Romain Lebreton qui nous a aimablement autorisés à publier son tutoriel intitulé Introduction au Web dynamique - Le rôle du PHP. Nous remercions également Claude Leloup pour la relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :