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"
5 <html xmlns="http://www.w3.org/1999/xhtml" >
7 <title>Formulaires</title>
9 <meta http-equiv="Content-Type"
10 content="text/html; charset=utf-8" />
11 <meta name="copyright"
12 content="Copyright © 2013 Kim Nguyễn" />
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>
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" />
25 <!-- Customize some templates and initialize -->
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;
32 //Ensures that we load SWS at the very end, after MathJax has
35 $(window).load(SWS.Presentation.init);
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>
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>
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><input type="text"
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/>
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>
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>
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><textarea /></tt></em>.
76 <code><![CDATA[ <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
78 <p>Apperçu: <textarea name="montexte" rows="3" cols="10">du texte!</textarea>
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>
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>
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><select></tt> et <tt><option></tt></p>
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>
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>
114 <li>name (dans select): le nom de l'élément (pour y accéder
116 <li>value (dans option): donne la valeur du choix</li>
117 <li>checked (dans option): pré-selectionne cette option</li>
119 <p>Le contenu de chaque élément option est celui affiché dans la
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>
126 <div class="sws-slide">
127 <h1>Boutons à choix unique</h1>
128 <p>On peut définir un choix avec la balise
129 <tt><input type="radio"></tt></p>
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"/>
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"/>
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.
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><input type="radio"></tt></p>
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"/>
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"/>
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).
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 « super-globales ». 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>
186 global $TOTO; // obligatoire, sinon $TOTO n'est pas visible
189 echo $_GET["champ"]; //fonctionne toujours, même sans 'global'
190 //au début de la fonction.
196 <div class="sws-slide">
197 <h1>Variable <tt>$_GET</tt> et <tt>$_POST</tt></h1>
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.
205 <div class="sws-slide">
206 <h1>Variable <tt>$_FILES</tt></h1>
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>,
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).
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
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
224 <dt><tt>$_FILES["fichier"]["type"]</tt></dt><dd>Le type MIME du fichier</dd>
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.
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.
241 variable <tt>$_COOKIE</tt> est un tableau.
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 :
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
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>
261 <div class="sws-slide">
263 <p>Nous allons concevoir, le plus précisément possible l'application
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,
272 <li>Tester/vérifier la robustesse</li>
274 <p>Vous devrez écrire le code correspondant en TP</p>