Cours 1
Introduction au Web dynamique Le rôle du PHP

Présentation du cours

Objectif du cours :

  • Apprendre à faire des pages dynamiques avec PHP et MySQL
  • Stocker les informations en base de données
  • Organiser son code avec l’architecture MVC
  • Mettre en place un système d’utilisateur connecté

Cours et TP en ligne :

Évaluation :

  • Examen écrit final : 50%
  • Projet PHP : 50%
    • Parcours A : Le projet PHP sera celui de votre SAÉ
    • Parcours B & D : Le projet PHP sera celui de ce cours

Plan du cours

  1. Le fonctionnement du World Wide Web
  2. Pages Web dynamiques avec PHP
  3. Transmettre des données à une page Web

Le fonctionnement du World Wide Web

Client / Serveur

  • 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.


Mécanisme client/serveur
Le client fait une requête au serveur, qui répond en donnant la page Web

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.

Le client envoie une requête HTTP.
Le serveur retourne une réponse HTTP.



À quoi ressemble une requête HTTP ?

La requête HTTP la plus courante est la requête de méthode GET. Par exemple pour demander la page Web http://romainlebreton.github.io/R3.01-DeveloppementWeb/classes/class1.html :

GET /R3.01-DeveloppementWeb/classes/class1.html HTTP/1.1
Host: romainlebreton.github.io

Protocole de communication : Réponse HTTP

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 13231
[...]

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <title>Cours 1  Introduction au Web dynamique</title>
  </head>
  <body>
    <ul class="menu" id="top-menu">...</ul>
    <div class="main">...
      <h1>Cours 1 -- Introduction au Web dynamique 
        <span class="subtitle">Le rôle du PHP</span>
      </h1>    
    </div>
  </body>
</html>

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 client HTTP reçoit la réponse du serveur HTTP qui contient la page Web demandée.

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



Requête HTTP



Que se passe-t-il quand on clique sur un lien hypertexte <a> ?

Cliquer sur un lien fait pareil que demander une page Web par la barre d’adresse, cela envoie une requête HTTP de verbe GET.

Écoutons le réseau

On peut observer le réseau à l’aide des outils de développement (F12 ou Menu Outils/Outils de développement puis onglet Réseau).

Regardons les communications HTTP quand :

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 : serveur historique (depuis 1995), celui que l’on utilisera
  • Apache TomCat : évolution pour Java (J2EE)
  • Nginx : serveur le plus utilisé au monde depuis 2021. Très performant
  • IIS (Internet Information Services) : Microsoft
  • Node.js : codé en JavaScript.


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



Résumé :

  • Un serveur Web = un serveur HTTP

Comment déposer une page Web sur le serveur HTTP de l’IUT ?


Il suffit de déposer vos fichiers HTML/CSS/PHP dans le dossier public_html de votre répertoire personnel.



Comment ça marche ?

Quand vous demandez la page
https://webinfo.iutmontp.univ-montp2.fr/~rletud/index.html,
le serveur HTTP (Apache) de l’IUT va rechercher le fichier
/home/ann2/rletud/public_html/index.html.

Idem la page
http://webinfo.iutmontp.univ-montp2.fr/~rletud/image/topsecret.jpg
renvoie sur le fichier
/home/ann2/rletud/public_html/image/topsecret.jpg.

Pages Web statiques ou dynamiques

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 en fonction du client.
    Les sites statiques sont donc bien adaptés pour réaliser des sites « vitrine» (e.g. projet HTML/CSS 1ère année).

Requête HTTP

  • Les sites dynamiques :
    Leur contenu change en fonction du client. Des exemples ?
    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

Mécanisme de génération des pages dynamiques 1/2

Rappel :

  • Site statique :
    1. le client demande au serveur à voir une page Web (requête HTTP) ;
    2. le serveur lui répond en lui envoyant la page réclamée (réponse HTTP).

Requête HTTP

Mécanisme de génération des pages dynamiques 2/2

  • Site dynamique :
    1. le client demande au serveur à voir une page Web (requête HTTP) ;
    2. le serveur crée la page spécialement pour le client.
      Dans notre cas, le serveur va exécuter un script PHP ;
    3. le serveur répond au client en lui envoyant la page qu’il vient de générer (réponse HTTP).

Génération PHP

Le langage de création de pages Web : PHP

Le rôle de PHP (“PHP: Hypertext Preprocessor”) 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.

Mascotte PHP
L’éléPHPant, la mascotte de PHP


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

Quand on ouvre un .php directement dans le navigateur

Les concurrents de PHP

  • ASP.NET : conçu par Microsoft, il exploite le framework .NET (C#).
  • Ruby : avec le framework Ruby on Rails par exemple.
  • Java : framework Jakarta Server Pages (anciennement Java Server Pages)
    particulièrement utilisé dans le monde professionnel.
  • Python : framework Django, Flask…
  • JavaScript : aussi côté serveur avec avec Node.js

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

Popularité des langages côté serveur
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, Tumblr et Facebook).

Un premier aperçu de PHP

PHP comme langage de génération de pages Web


PHP va nous servir à créer des documents HTML :

  • Il prend donc en entrée un fichier .php
  • Il exécute les instructions PHP sans compilation (langage interprété)
  • Il affiche en sortie un document HTML
    (comme un programme C écrirait dans sa sortie standard).


Remarques :

  • PHP est un langage de programmation au même titre que Java, Python, C…
  • N’importe quel langage peut écrire une page HTML en sortie
  • PHP est juste pratique pour écrire des pages Web de par sa syntaxe, les fonctions qu’il propose…

Votre premier fichier PHP

L’exécution du document helloWorld.php suivant

<?php
  $message = "Hello World!\n";
  echo $message;
?>

affiche en sortie le texte

Hello World↵


Explications :

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

  • Les noms de variables commencent par un $ en PHP

  • L’instruction echo a pour effet d’insérer du texte dans le document en sortie
    (autrement dit, d’écrire dans la sortie standard)


Démonstration avec la ligne de commande php

$ php helloWorld.php 
Hello World!

Comment générer la page HTML suivante ?

<!DOCTYPE html>
<html>
  <head>
    <title> Mon premier php </title>
  </head>
  <body>
  Il est actuellement 09:04.
  </body>
</html>

On pourrait faire

<?php
  echo "<!DOCTYPE html>\n";
  echo "<html>
  <head>
    <title> Mon premier php </title>
  </head>
  <body>\n";
  echo "  Il est actuellement " . date("H:i") . ".\n";
  echo "  </body>\n</html>"; ?>

Imbrication de PHP dans le HTML

Heureusement, PHP propose une syntaxe plus lisible:

<!DOCTYPE html>
<html>
  <head>
    <title> Mon premier php </title>
  </head>
  <body>
  Il est actuellement <?php echo date("H:i");?>.
  </body>
</html>

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).



Remarquez aussi la différence :

  • en Java: System.out.println("Hello");
  • en PHP: echo "Hello";

Un script PHP sur un serveur HTTP 1/2

Deux principales façons d’exécuter un script PHP:

  • soit dans le terminal avec la commande php;
  • soit le serveur Web appelle lui-même l’interpréteur PHP
    • pour exécuter le script
    • et renvoyer la sortie du script en tant que réponse HTTP.

Un script PHP sur un serveur HTTP 2/2

En pratique sur un exemple :

  • On écrit le fichier /home/ann2/public_html/bonjour.php :

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

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

    Bonjour


Note : Affichez le code source de la page HTML pour retrouver la sortie complète du script <!DOCTYPE html><html>...

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 :

Ce sont les tableaux associatifs

  • Pour initialiser un tableau :

    $coordonnees = array (
  'nom'    => 'Assin',
  'prenom' => 'Marc'   
);

    ou de façon plus courte et équivalente

    $coordonnees = [
  'nom'    => 'Assin',
  'prenom' => 'Marc'   
];

  • Notez l’existence des boucles foreach pour parcourir ces tableaux :

    foreach ($coordonnees as $key => $value){
    echo $key . " : " . $value . "\n"; 
} // Affiche "nom : Assin↵prenom : Marc"

Transmettre des données à une page Web

Les pages Web se transmettent des données entre elles.
Par exemple, votre nom/prénom, le fait que vous soyez 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és aux sites statiques.

Comment ça marche ?

Deux moyens pour transmettre des données à une page Web




  1. Dans une requête HTTP de méthode GET, que l’on obtient

    1. en cliquant sur une URL, et notamment dans les liens <a>

    2. en validant un formulaire de méthode GET

  2. Dans une requête HTTP de méthode POST, que l’on obtient

    1. en validant un formulaire de méthode POST

Les query strings dans l’URL

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

  • Une URL simple :

    Exemple d'URL

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

    Exemple d'URL

Sources : Standard des URL, Wikipedia

Récupérer des données GET en PHP


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


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



Exemple :

Quand un client demande bonjourGet.php?nom=Assin&prenom=Marc :

  • PHP remplit le tableau $_GET avec

    $_GET = [
  "nom" => "Assin",
  "prenom" => "Marc"
];

  • puis PHP exécute le script bonjourGet.php.

Exemple de transmission avec la méthode GET


Une 1ère page avec un lien contenant des informations dans son query string.

<a href="bonjourGet.php?nom=Assin&prenom=Marc">
  Dis-moi bonjour !
</a>



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

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

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

<p>Bonjour Marc !</p>


En effet, PHP aura rempli le tableau $_GET avec

  $_GET = ["nom" => "Assin", "prenom" => "Marc"];

avant de lancer le script bonjourGet.php.

Les formulaires de méthode GET

Considérons le formulaire suivant et supposons que l’utilisateur a tapé MaDonnee

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

  1. le clic sur le bouton Valider :
    • charge la page traitement.php (champ action du formulaire)
    • transmet ses informations dans le query string

  2. donc le clic sur Valider charge l’URL traitement.php?nom_var=MaDonnee
    On reconnaît l’attribut name="nom_var" de <input> et la valeur remplie par l’utilisateur.

  3. la page traitement.php suivante s’exécute avec le tableau
    $_GET = ["nom_var" => "MaDonnee"];

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

  4. la page générée par traitement.php est

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

Pourquoi la méthode du formulaire s’appelle “GET” ?


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


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

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


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


Remarque :

Les formulaires GET utilisent donc l’envoi de données dans le query string.

Envoi de données via la méthode POST

Les formulaires POST

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

Différences :

  1. La méthode du formulaire devient method="post"
  2. On récupère les données dans le tableau PHP $_POST.


Exemple :

Quand on clique sur Valider, PHP fait

$_POST = ["nom_var" => "valeur"];

juste avant d’exécuter la page PHP 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>

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. 


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 :

  1. la présence dans la requête HTTP d’un corps de requête en plus de l’en-tête.

  2. L’en-tête et le corps de la requête sont séparés par une ligne vide.

  3. Le corps de la requête HTTP sert ici à envoyer les informations.
    Il n’y a donc plus de query string dans l’URL.


Démonstration avec l’outil Réseaux :

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.

Bilan du cours

À la suite de ce cours, vous devez comprendre la signification du vocabulaire suivant :

  • protocole HTTP

  • client HTTP

  • requête HTTP scindée en 2 parties : en-tête et corps

  • verbes HTTP : GET, POST

  • serveur HTTP, fourni par le logiciel Apache à l’IUT

  • réponse HTTP scindée en 2 parties : en-tête et corps

  • Site Web statique / dynamique

  • la partie query string d’une URL

  • formulaire de méthode GET ou POST
    Et comment l’information est transmise

Sources

Sources :

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 nous envoie sa réponse HTTP normalement.

Exemple :

> telnet romainlebreton.github.io 80
GET /R3.01-DeveloppementWeb/assets/Cours1/HelloWorld.html HTTP/1.1
Host: romainlebreton.github.io

nous répond

HTTP/1.1 200 OK
Server: GitHub.com
Content-Type: text/html; charset=utf-8
Content-Length: 170
[...]

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Fichier test</title>
  </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>

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