unix_prog_web/unix_prog_web_08.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   4           >
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6   <head>
   7     <title>Formulaires</title>
   8
   9     <meta http-equiv="Content-Type"
  10           content="text/html; charset=utf-8" />
  11     <meta name="copyright"
  12           content="Copyright &#169; 2013 Kim Nguyễn" />
  13
  14     <!-- Load jQuery -->
  15     <script src="../jquery-2.0.3.min.js" type="text/javascript" ></script>
  16     <script src="../libs/raphael-min.js" type="text/javascript" ></script>
  17     <!-- Load the library -->
  18     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  19
  20     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
  21     <!-- Load a custom Theme, the class-element marks this style-sheet
  22          a "theme" that can be swtiched dynamicaly -->
  23     <link class="sws-theme" rel="stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
  24
  25     <!-- Customize some templates and initialize -->
  26
  27     <script type="text/javascript">
  28       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  29       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  30       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  31
  32       //Ensures that we load SWS at the very end, after MathJax has
  33       //been initialized
  34
  35       $(window).load(SWS.Presentation.init);
  36     </script>
  37   </head>
  38   <body>
  39     <a href="unix_prog_web_07.xhtml" class="sws-previous"/>
  40     <div class="sws-slide sws-cover sws-option-nofooter">
  41       <h1>Unix et Programmation Web</h1>
  42       <h1>Cours 8</h1>
  43       <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
  44       <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
  45     </div>
  46
  47     <h1>Formulaires (utilisation avancée)</h1>
  48     <div class="sws-slide">
  49       <h1>Champs de texte</h1>
  50       <p>On peut placer un champ de texte dans un formulaire au moyen
  51       de la balise <em><tt>&lt;input type="text"
  52       /&gt;</tt></em>.
  53       </p>
  54       <code><![CDATA[   <input size="10" name="montexte" type="text" value="abc" />]]></code>
  55       <p>Apperçu: <input size="10" name="montexte" type="text"
  56       value="abc"/><br/><br/>
  57         Attributs:
  58       </p>
  59       <ul>
  60         <li>size: donne la largeur en caractères</li>
  61         <li>name: le nom de l'élément (pour y accéder depuis PHP)</li>
  62         <li>value: la valeur initiale du champ (si on veut le pré-remplir)</li>
  63       </ul>
  64       <p>Accès à la valeur depuis PHP se fait
  65       via <tt>$_GET["montexte"]</tt> ou <tt>$_POST["montexte"]</tt>
  66       selon la valeur de l'attribut <tt>method</tt> de
  67       l'élément <tt>form</tt> englobant.</p>
  68
  69     </div>
  70
  71     <div class="sws-slide">
  72       <h1>Champs de texte long</h1>
  73       <p>Pour des textes multilignes, on utilise la
  74       balise <em><tt>&lt;textarea /&gt;</tt></em>.
  75       </p>
  76       <code><![CDATA[   <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
  77 ]]></code>
  78       <p>Apperçu:  <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
  79         Attributs:
  80       </p>
  81       <ul>
  82         <li>rows: donne le nombre de lignes</li>
  83         <li>cols: donne le nombre de colonnes (largeur en nombre de caractères)</li>
  84         <li>name: le nom de l'élément (pour y accéder depuis PHP)</li>
  85       </ul>
  86       <p>On peut pré-remplir la zone en mettant du texte entre la
  87       balise ouvrante et fermante.
  88         Accès à la valeur depuis PHP se fait
  89       via <tt>$_GET["montexte"]</tt> ou <tt>$_POST["montexte"]</tt>
  90       selon la valeur de l'attribut <tt>method</tt> de
  91       l'élément <tt>form</tt> englobant.</p>
  92     </div>
  93     <div class="sws-slide">
  94       <h1>Listes déroulantes</h1>
  95       <p>On peut définir une liste déroulante avec les
  96       balises <tt>&lt;select&gt;</tt> et <tt>&lt;option&gt;</tt></p>
  97 <code><![CDATA[
  98  <select name="maliste">
  99    <option value="bleu"  >Bleu</option>
 100    <option value="vert"  >Vert</option>
 101    <option value="rouge"  >Rouge</option>
 102    <option value="jaune" selected="selected" >Jaune</option>
 103  </select>
 104 ]]></code>
 105 <p> Apperçu:  <select name="maliste">
 106    <option value="bleu"  >Bleu</option>
 107    <option value="vert"  >Vert</option>
 108    <option value="rouge"  >Rouge</option>
 109    <option value="jaune" selected="selected" >Jaune</option>
 110  </select>
 111         Attributs:
 112       </p>
 113       <ul>
 114         <li>name (dans select): le nom de l'élément (pour y accéder
 115         depuis PHP)</li>
 116         <li>value (dans option): donne la valeur du choix</li>
 117         <li>checked (dans option): pré-selectionne cette option</li>
 118       </ul>
 119       <p>Le contenu de chaque élément option est celui affiché dans la
 120       liste.
 121         Accès à la valeur depuis PHP se fait
 122       via <tt>$_GET["maliste"]</tt> ou <tt>$_POST["maliste"]</tt>
 123       selon la valeur de l'attribut <tt>method</tt> de
 124       l'élément <tt>form</tt> englobant.</p>
 125     </div>
 126     <div class="sws-slide">
 127       <h1>Boutons à choix unique</h1>
 128       <p>On peut définir un choix avec la balise
 129  <tt>&lt;input type="radio"&gt;</tt></p>
 130 <code><![CDATA[
 131    8h<input type="radio" name="h" value="matin"/>
 132    12h<input type="radio" name="h" value="midi"/>
 133    20h<input type="radio" name="h" value="soir"/>
 134 ]]>
 135 </code>
 136 <p>Apperçu : 8h<input type="radio" name="h" value="matin"/>
 137 12h<input type="radio" name="h" value="midi"/>
 138 20h<input type="radio" name="h" value="soir"/>
 139 </p>
 140       <p>
 141         Accès à la valeur depuis PHP se fait
 142       via <tt>$_GET["h"]</tt> ou <tt>$_POST["h"]</tt>
 143       selon la valeur de l'attribut <tt>method</tt> de
 144       l'élément <tt>form</tt> englobant.<br/>
 145         <s>Attention</s> il faut réutiliser la même valeur de
 146         l'attribut <tt>name</tt> pour les boutons du même groupe.
 147
 148 </p>
 149 </div>
 150     <div class="sws-slide">
 151       <h1>Cases à choix multiples</h1>
 152       <p>On peut définir des cases à cocher à choix multiple avec la balise
 153  <tt>&lt;input type="radio"&gt;</tt></p>
 154 <code><![CDATA[
 155    8h<input type="checkbox" name="tab[]" value="matin"/>
 156    12h<input type="checkbox" name="tab[]" value="midi"/>
 157    20h<input type="checkbox" name="tab[]" value="soir"/>
 158 ]]>
 159 </code>
 160 <p>Apperçu:
 161   8h<input type="checkbox" name="tab[]" value="matin"/>
 162   12h<input type="checkbox" name="tab[]" value="midi"/>
 163   20h<input type="checkbox" name="tab[]" value="soir"/>
 164 </p>
 165       <p>
 166         Accès à la valeur depuis PHP se fait
 167       via <tt>$_GET["tab"]</tt> ou <tt>$_POST["tab"]</tt>
 168       selon la valeur de l'attribut <tt>method</tt> de
 169       l'élément <tt>form</tt> englobant.<br/>
 170         <s>Attention</s> il faut rajouter <tt>[]</tt> dans l'attribut <tt>name</tt> pour
 171         que PHP crée un tableau. <tt>tab[<i>i</i>]</tt> contient la
 172         valeur de la <i>i<sup>ème</sup></i> cases cochée (à partir de 0).
 173
 174 </p>
 175 </div>
 176 <h1>Variables super-globales (rappels)</h1>
 177 <div class="sws-slide">
 178   <h1>Variables super-globales</h1>
 179   <p>PHP définit un certain nombre de variables dites
 180   «&nbsp;super-globales&nbsp;». Ce sont des variables accessible
 181   depuis n'importe où dans un programme PHP, y compris depuis des
 182   fonctions, sans adjonction du mot clé <tt>global</tt>.</p>
 183   <code>
 184    $TOTO = 42;
 185    function f() {
 186    global $TOTO;   // obligatoire, sinon $TOTO n'est pas visible
 187
 188    echo $TOTO;
 189    echo $_GET["champ"];  //fonctionne toujours, même sans 'global'
 190                          //au début de la fonction.
 191
 192    }
 193
 194   </code>
 195 </div>
 196 <div class="sws-slide">
 197 <h1>Variable <tt>$_GET</tt> et <tt>$_POST</tt></h1>
 198 <p>
 199   Ces variables contiennent les valeurs des champs d'un formulaire.
 200   Si l'attribut <tt>method</tt> de l'élément <tt>form</tt>
 201   vaut <tt>get</tt> la variable <tt>$_GET</tt> contient les valeurs.
 202   S'il vaut <tt>post</tt> la variable <tt>$_POST</tt> est à utiliser.
 203 </p>
 204 </div>
 205 <div class="sws-slide">
 206 <h1>Variable <tt>$_FILES</tt></h1>
 207 <p>
 208   Cette variable contient les informations relatives aux fichiers
 209   envoyés par le client.<br/>Si le nom du champ est <tt>fichier</tt>,
 210   alors:
 211
 212 </p>
 213 <dl>
 214     <dt><tt>$_FILES["fichier"]["error"]</tt></dt> <dd>Code d'erreur
 215     (0 si tout c'est bien passé, <tt>></tt> 0 si une erreur s'est produite. Les
 216     autres champs ne sont définis que si "error" vaut 0).
 217     </dd>
 218     <dt><tt>$_FILES["fichier"]["tmp_name"]</tt></dt><dd>Nom du fichier
 219     temporaire sur le serveur où a été sauvegardé le contenu du
 220     fichier envoyé</dd>
 221     <dt><tt>$_FILES["fichier"]["name"]</tt></dt><dd>Nom original du fichier</dd>
 222     <dt><tt>$_FILES["fichier"]["size"]</tt></dt><dd>Taille du
 223     fichier</dd>
 224     <dt><tt>$_FILES["fichier"]["type"]</tt></dt><dd>Le type MIME du fichier</dd>
 225   </dl>
 226 </div>
 227 <div class="sws-slide">
 228 <h1>Variable <tt>$_SESSION</tt></h1>
 229 <p>Contient les <em>variables de sessions</em>. La variable n'est
 230   accessible qu'après un appel à <tt>session_start()</tt>. Ces
 231   le contenu de cette variable persiste durant toute la durée de la
 232   session même sur des pages différentes. La
 233   variable <tt>$_SESSION</tt> est un tableau.
 234 </p>
 235 </div>
 236
 237 <div class="sws-slide">
 238 <h1>Variable <tt>$_COOKIE</tt></h1>
 239 <p>Contient les <em>cookies</em> que le client à envoyé au serveur.
 240   La
 241   variable <tt>$_COOKIE</tt> est un tableau.
 242 </p>
 243 </div>
 244 <h1>Conception d'une application simple (étude de cas)</h1>
 245 <div class="sws-slide">
 246   <h1>Cahier des charges</h1>
 247   <p>On souhaite créer une application Web simple de gestion de QCM.
 248     L'application doit répondre au contraintes suivantes :
 249   </p>
 250   <ul>
 251     <li>Un QCM est un ensemble de questions, suivies d'une liste de
 252     choix. Il peut y avoir plusieurs choix possible. La réponse à la
 253     question est correcte si uniquement les bons choix sont
 254     sélectionnés.</li>
 255     <li>Un QCM doit être facilement modifiable/éditable</li>
 256     <li>Après la réponse à la dernière question, le score de
 257       l'utilisateur est affiché, ainsi que les bonnes réponses</li>
 258     <li>Il y a un temps limite par question</li>
 259   </ul>
 260 </div>
 261 <div class="sws-slide">
 262 <h1>But du jeu</h1>
 263 <p>Nous allons concevoir, le plus précisément possible l'application
 264   (prenez des notes) :
 265 </p>
 266
 267   <ul>
 268     <li>Rafiner le cahier des charges</li>
 269     <li>Prévoir plusieurs scénarios d'utilisation</li>
 270     <li>Concevoir l'application (données, interface grapique,
 271     code)</li>
 272     <li>Tester/vérifier la robustesse</li>
 273   </ul>
 274 <p>Vous devrez écrire le code correspondant en TP</p>
 275 </div>
 276   </body>
 277
 278
 279
 280 </html>