Application Web¶

Une application web est une application client/serveur
Où le client est généralement un navigateur (browser)‏
Où le serveur est généralement un serveur web (Apache, par ex.)‏
Fonctionnant en mode déconnecté
Grâce au protocole HTTP
Avec des données présentées en (X)HTML

Le formulaire HTML¶

Au sein d’une page XHTML ou HTML, utilisant le protocole HTTP
Les balises <form> et </form> encadrent le formulaire :
L’attribut « method » est « GET » (transmission par URL) ou « POST » (tranmission par l’en-tête HTTP)‏
L’attribut « action » indique la page vers laquelle les données sont envoyées
Les champs d’entrée :
- <input> de type « text », « checkbox », « radio », « hidden », « password », « image », « file » ou « submit »
- <textarea>
- <select> et <option>
Les boutons « send » et « reset »

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Formulaire traité par PHP</title>
 </head>
<body>
 <form action="form_recuperation.php" method="post" enctype="multipart/form-data"> 

    <legend><b>Vos coordonnées</b></legend>
    <label>Nom : </label>
	<input type="text" name="nom" size="40" value="" /><br />
    <label>Prénom : </label>
	<input type="text" name="prenom" size="40" value="" /><br />
    <label>Mail : </label>
	<input type="text" name="mail" size="40" value="" /><br />
	<input type="reset" value="Effacer" />&nbsp;&nbsp;&nbsp;
    <input type="submit" value="Envoyer" />    
  </form>
 </body>
</html>

La récupération des données¶

Le script PHP de récupération des données doit se trouver dans l’attribut « action » du formulaire
Toutes les données sont envoyées dans des tableaux PHP prédéfinis, acccessibles de partout (« superglobales »).
L’index des variables superglobales est le nom du champ du formulaire

Les « superglobales » :

$_GET[] : données envoyées par l’URL (méthode GET)‏
$_POST[] : données envoyées par un formulaire en POST
$_COOKIE[] : données de cookies
$_REQUEST[] : fusion de $_GET, $_POST et $_COOKIE
$_FILES[] : fichiers envoyés par formulaire

L’index des variables superglobales est le nom du champ du formulaire

Récupérer les données d’un champ <input> :¶

$_POST[‘nomChamp’] ou
$_GET[‘nomChamp’] ou
$_REQUEST[‘nomChamp’]
$_REQUEST fonctionne toujours !

=> Si plusieurs champs HTML sont envoyés par plusieurs méthodes avec le même nom, la priorité est : 1. cookies, 2. post, 3. get.

<?php
	echo $_POST['nom'] . "<br />";
	echo $_REQUEST['prenom'] . "<br />";
	echo $_POST['mail'] . "<br />";

<?php
echo '<h1>Lecture des données </h1>';
foreach($_POST as $cle=>$valeur)
{
  echo 'Nom de la variable :'. $cle. ', valeur de la variable :' . $valeur .' <br />';
}

Les cases à cocher¶

<input type="checkbox"> : la valeur (par défaut à « on ») n'est transmise que si la case est cochée.

=> utilisation de la fonction

isset($_REQUEST['nomCaseaCocher']

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Formulaire traité par PHP</title>
 </head>
<body>
 <form action="form_checkbox.php" method="post" enctype="multipart/form-data"> 
  

    <legend><b>Cochez vos préférences : </b></legend>
    Le bon : <input type="checkbox" name="bon"  /><br />
	La brute : <input type="checkbox" name="brute" /><br />
	Le truand : <input type="checkbox" name="truand" /><br />
	
    <input type="submit" value="Envoyer" />    
  </form>
 </body>
</html>

<?php
echo '<h1>Eléments récupérés </h1>';

if (isset($_REQUEST['bon'])) { echo 'BON coché <br />'; }
if (isset($_REQUEST['brute'])) echo 'BRUTE coché <br />';
if (isset($_REQUEST['truand'])) echo 'TRUAND coché <br />';

?>

Exercice : Remplacer le code précédent par une boucle.

Les sélections multiples¶

<select name="nomSelect" multiple> : le même paramètre peut être envoyé plusieurs fois avec différentes valeurs. => risque de ne garder que le dernier !!!

=> combiner 2 solutions :

mettre [] à la fin du champ HTML

<select name="nomSelect[]" multiple>

récupérer en PHP un tableau contenant les valeurs sélectionnées

foreach ($_REQUEST["nomSelect"] as value)‏

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Formulaire traité par PHP</title>
 </head>
<body>
 <form action="form_selectMultiple.php" method="post" enctype="multipart/form-data"> 
  

    <legend><b>Sélectionnez vos préférences : </b></legend>
    <select name="language[]" size="4" multiple>
	<option value="PHP">Le PHP</option>
	<option value="JAVA">Le JAVA</option>
	<option value="c#">Le C#</option>
	<option value="COBOL">Le COBOL</option>
	</select>
	<br />
	
    <input type="submit" value="Envoyer" />    
  </form>
 </body>
</html>

<?php
echo "<h1>Eléments sélectionnés </h1>";

foreach ( $_REQUEST["language"] as $selection ) {
	echo 'Choix :'. $selection .' <br />';
}

?>

Les lignes multiples¶

<textarea name="nomTextarea"> : plusieurs lignes sont envoyées, avec des retours à la ligne. Mais les retours à la ligne ne sont pas des caractères HTML => le contenu du textarea ne peut pas être affiché sur une page HTML

=> utilisation de la fonction

nl2br($_REQUEST['nomTextarea']

pour transformer les “new line” (nl) en “br”, et pouvoir afficher le contenu du textarea sur une page HTML

<!DOCTYPE html P>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Formulaire traité par PHP</title>
 </head>
<body>
	 <form action="form_textarea.php" method="post" enctype="multipart/form-data"> 

	    <legend><b>Ecrivez votre paragraphe : </b></legend>
	    <textarea name="nomTextarea" cols="50" rows="10"></textarea>
		<br />
		
	    <input type="submit" value="Envoyer" />    
	  </form>
 </body>
</html>

<?php
echo '<h1>Eléments récupérés </h1>';

// echo $_REQUEST['nomTextarea'] ;
echo ($_REQUEST['nomTextarea']) ;

?>

Les images cliquables¶

<input type="image" name="nomImg" src=... > : la position du clic de souris est envoyée.

L’abscisse du point de clic est donnée par le nom du champ suivi de _x (dans ce cas “nomImg_x”); l’ordonnée est donnée par le nom du champ suivi de _y (dans ce cas “nomImg_y”).

Les fichiers¶

<input type="file" name="nomFile"> : les données sont récupérées dans la superglobale $_FILES[].

$FILES[] est un tableau à 2 dimensions :

1ère dimension : nom du champ du formulaire
2ème dimension : nom de l’information sur le fichier transmis : ‘name’ pour le nom original, ‘type’ pour le type MIME du fichier, ‘size’ pour la tailel du fichier, ‘tmp_name’ pour le nom du fichier temporaire sur le serveur, ‘error’ pour l’erreur associée au téléchargement

Par exemple :

$_FILES['nomFile']['nom'];

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Formulaire traité par PHP</title>
 </head>
<body>
	 <form action="form_file.php" method="post" enctype="multipart/form-data"> 

	    <legend><b>Uploadez votre fichier : </b></legend>
	    <input type="file" name="nomFile" size="50" />
		<br />		
	    <input type="submit" value="Envoyer" />    
	  </form>
 </body>
</html>

<?php
echo '<h1>Eléments récupérés </h1>';

echo 'Nom fichier origine : ' . $_FILES['nomFile']['name'] . '<br />';
echo 'Taille fichier : ' . $_FILES['nomFile']['size'] . '<br />';
echo 'Nom temporaire du fichier : ' . $_FILES['nomFile']['tmp_name'] . '<br />';
echo 'Type du fichier : ' . $_FILES['nomFile']['type'] . '<br />';
echo 'Erreur de t&eacute;l&eacute;chargement : ' . $_FILES['nomFile']['error'] . '<br />';

$destination = '/tmp/upload/' . $_FILES['nomFile']['name'];

move_uploaded_file($_FILES['nomFile']['tmp_name'], $destination);

Exercice

Annotations

//Créez un formulaire qui permette d’ajouter une personne (nom, prenom).
//Récupérez les données de ce formulaire, et afficher les en gras et majuscule.

HTML

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form action="request.php" method="post">

    <input type="text" name="nom" id="nom">
    <input type="text" name="prenom" id="prenom">
    <input type="submit" value="Envoyer">

</form>
</body>
</html>

PHP

<?php

$nom    = $_POST['nom'];
$prenom = $_POST['prenom'];
?>

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
Nom : <?php echo strtoupper($nom); ?>
Pr&eacute;nom : <?php echo strtoupper($prenom) ?>
</body>
</html>

La création dynamique de formulaire¶

PHP peut permettre de créer des formulaires de manière dynamique :
- En produisant les données qui seront les « valeurs » du formulaire
  
  Valeur par défaut d’un champ
  
  Liste de données d’une sélection
  
  => Question de l’insertion de ces champs dans le formulaire HTML ???
- En produisant les champs mêmes du formulaire, avec le nom de chaque champ
Problème: le champ d’un formulaire doit avoir une valeur par défaut calculée (par ex, la date du jour).
Solution : un script PHP s’occupe d’afficher tout le formulaire, avec la bonne valeur dans le champ par défaut.
Difficulté: faire imprimer du HTML par PHP, ce qui n’est pas très maintenable
Défi: la séparation des couches en PHP
Pour séparer les couches, plusieurs voies possibles:
- syntaxe heredoc,
- division du script en une partie HTML et une partie PHP,
- séparation des couches view/controller grâce à des includes,
(gestion approfondie de « templates »)‏
Exemple: afficher un champ texte avec la date du jour comme valeur par défaut

Heredoc

<?php

$now = date('d/m/y');

echo <<<fin

<html >
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
  <title>Formulaire traité par PHP</title>
 </head>
<body>
	 <form action="form_dynamique_donnee_traitement.php" method="get" enctype="multipart/form-data"> 
	<legend><b>La date</b></legend>
    <label>Entrez votre date : </label>
	<input type="text" name="date" size="40" value="$now" /><br />
    <input type="submit" value="Envoyer" />    
  </form>
 </body>
</html>

fin;

HTML + PHP

<?php

$now = date('d/m/y');
?>

<html >
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
  <title>Formulaire traité par PHP</title>
 </head>
<body>
	 <form action="form_dynamique_donnee_traitement.php" method="get" enctype="multipart/form-data"> 
	<legend><b>La date</b></legend>
    <label>Entrez votre date : </label>
	<input type="text" name="date" size="40" value="<?php echo $now ?>" /><br />
    <input type="submit" value="Envoyer" />    
  </form>
 </body>
</html>

HTML séparé de PHP

La vue

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  
  <title>Formulaire traité par PHP</title>
 </head>
<body>
	 <form action="form_dynamique_donnee_traitement.php" method="get" enctype="multipart/form-data"> 
	<legend><b>La date</b></legend>
    <label>Entrez votre date : </label>
	<input type="text" name="date" size="40" value="<?php echo $now ?>" /><br />
    <input type="submit" value="Envoyer" />    
  </form>
 </body>
</html>

Le PHP

<?php

$now = date('d/m/y');
include("form_dynamique_donnee_include_view.php");

Récupération

<?php

$date = $_REQUEST['date'];
echo "LA DATE EST : " . $date;

La création de champs¶

Problème: il faut créer un formulaire qui s’adapte automatiquement au nombre de données.
Difficulté: donner des noms de champs dynamiquement
Plusieurs voies de solution :
- Donner un nom différent à chaque champ grâce à un index numérique, et on indique le nombre de champs dans un champ hidden
- Donner à toutes les champs le même nom, mais suivi de « [ ] ». PHP renvoie alors un tableau de valeurs
Par exemple :
- Imaginons une application de gestion de composition familiale :
- tout dabord (écran 1), on demande combien d’enfants compte la famille,
- Ensuite, pour chaque enfant (écran 2), on demande de spécifier un âge
- Enfin, (écran 3) on établit un récapitulatif

Annotations
```
# A vous
```

HTML

<html >
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <title>Formulaire traité par PHP</title>
 </head>
<body>
     <form action="composition_familiale.php" method="post" >
    <legend><b>Vos données personnelles</b></legend>
        <label>Nom : </label>
        <input type="text" name="nom" size="40" value="" /><br />
        <label>Prénom : </label>
        <input type="text" name="prenom" size="40" value="" /><br />
       <legend><b>Combien d'enfants compte votre famille ?</b></legend>
        <label>Nombre d'enfants : </label>
        <input type="text" name="nombre" size="40" value="" /><br />
        <input type="submit" value="Envoyer" />
      </form>
 </body>
</html>

PHP

<?php

    $nombreenfant = $_POST['nombre'];

?>


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <title>Formulaire traité par PHP</title>
 </head>
<body>
     <form action="composition_familiale_ecran2_controller.php" method="get" enctype="multipart/form-data">

       <legend><b>Indiquez l'âge pour chacun d'entre eux</b></legend>
       <?php for ($i=0; $i<$nombreenfant;$i++): ?>

        <label>Age de l'enfant <?php echo $i+1 ?> : </label>
        <input type="text" name="age[]" size="40" value="" /><br />
        <?php endfor; ?>

        <input type="submit" value="Envoyer" />
      </form>
 </body>
</html>

PHP

<?php
$age = $_POST['age'];
?>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  <title>Formulaire traité par PHP</title>
 </head>
<body>
     <h1>Récapitulatif</h1>

       <?php for($i=0;$i<count($age);$i++) : ?>
        <p>Age de l'enfant <?php echo $i+1 ?> : <?php echo $age[$i] ?> </p>
        <?php endfor; ?>

 </body>
</html>

Application Web¶

Le formulaire HTML¶

La récupération des données¶

Récupérer les données d’un champ <input> :¶

Les cases à cocher¶

Les sélections multiples¶

Les lignes multiples¶

Les images cliquables¶

Les fichiers¶

La création dynamique de formulaire¶

La création de champs¶

Table des Matières

Sujet précédent

Sujet suivant

Cette page

Navigation

Application Web¶

Le formulaire HTML¶

La récupération des données¶

Récupérer les données d’un champ <input> :¶

Les cases à cocher¶

Les sélections multiples¶

Les lignes multiples¶

Les images cliquables¶

Les fichiers¶

La création dynamique de formulaire¶

La création de champs¶

Table des Matières

Sujet précédent

Sujet suivant

Cette page

Recherche rapide

Navigation