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 en organisant son code avec l’architecture MVC

4 intervenants :

  • Q1 - Mardi 15h45 - Romain Lebreton
  • Q2 - Mercredi 10h15 - Sébastien Gagné
  • Q3 - Vendredi 12h30 - Auréline Quatrehomme
  • Q4 - Vendredi 09h15 - Romain Lebreton

Cours et TP en ligne :

Évaluation :

  • examen final : ~40%
  • projet PHP : ~60%
  • pas de partiel

Emploi du temps prévisionnel

  • 2 Septembre – Cours Introductif

1er bloc de TPs – Bases de PHP :

  • 5 Septembre 2016 – TP 1 – Introduction aux objets en PHP
  • 12 Septembre 2016 – TP 2 – La persistance des données en PHP
  • 19 Septembre 2016 – TP 3 – Fin TP2 et association entre classes
  • 26 Septembre 2016 – TP 4 – Architecture MVC simple
  • 03 Octobre 2016 – TP 5 – Architecture MVC avancée 1/2
  • 10 Octobre 2016 – TP 6 – Architecture MVC avancée 2/2

2ème bloc de TPs – Mise en application sur le projet + TPs complémentaires :

  • 17 Octobre 2016 - Début projet
  • 24 Octobre 2016 - 3h projet (lundi -> mercredi) puis Congé IUT
  • 31 Octobre 2016 - Congé IUT puis 3h projet (jeudi -> vendredi)
  • 7 Novembre 2016 - TP 7 – Cookies & Sessions + 1h projet
  • 14 Novembre 2016 – TP 8 – Authentification & Validation par email + 1h projet
  • 21 Novembre 2016 – 3h projet
  • 28 Novembre 2016 - 3h projet
  • 5 Décembre 2016 - 3h projet
  • 12 Décembre 2016 - soutenances du projet

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 site Web aux internautes, c’est-à-dire aux clients.


Mécanisme client/serveur
Le client fait une requête que 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.

À 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 :

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

La réponse est alors:

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)

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.



Requête HTTP

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

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 TDs, 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

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.
    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 :
    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 (en suivant les instructions du PHP) ;
    3. le serveur lui répond en lui envoyant la page qu’il vient de générer (réponse HTTP).

Génération PHP

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é est ensuite renvoyée dans la réponse HTTP.

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


Rôle du PHP

Le langage de création de page 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.

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


Attention : Les clients (navigateur) 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 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).

Popularité des langages côté serveur
Popularité des langages côté serveur

Un premier aperçu de PHP

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 indique comment générer le document en sortie.


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

Votre premier fichier PHP

Document PHP en entrée :

<?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

Imbrication de PHP dans le HTML 1/2

Le document PHP suivant

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

produira

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

Imbrication de PHP dans le HTML 2/2

En fait, les deux fichiers suivants sont équivalents.

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

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

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

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

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


  • On peut créer le tableau case par case :

    $coordonnees['prenom'] = 'François';
$coordonnees['nom'] = 'Dupont';

    NB : En PHP les variables commencent par $

  • Ou l’initialiser en une fois

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

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

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

Transmettre des données entre pages Web

Comment ça marche ?

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.

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 PHP reçoit le lien bonjour.php?nom=Dupont&prenom=Jean, il va :

  • remplir le tableau $_GET avec

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

  • puis lancer le script bonjour.php.

Exemple de transmission en GET


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

<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 remplit le tableau $_GET avec

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

avant de lancer le script bonjour.php.

Les formulaires


Les formulaires utilisent entre autre 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

Les formulaires 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 Valider sur charge l’URL traitement.php?nom_var=MaDonnee
    On reconnait le champ name du formulaire et ce qu’a rempli 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 type 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: infolimon.iutmontp.univ-montp2.fr


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

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. 

<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 la 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>

Les formulaires POST 2/3



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

  1. la page chargée va être traitePost.php sans query string ;

  2. les données du formulaire sont envoyées dans le corps d’une requête HTTP de type POST ;

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

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.


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.

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 infolimon.iutmontp.univ-montp2.fr 80
GET /~rletud/ HTTP/1.1
Host: infolimon.iutmontp.univ-montp2.fr

nous répond

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.