unix_prog_web/unix_prog_web_06.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>PHP : Introduction</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-1.9.1.min.js" type="text/javascript" ></script>
  16     <!-- Load the library -->
  17     <script src="../libs/raphael-min.js" type="text/javascript" ></script>
  18
  19     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  20
  21     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
  22     <!-- Load a custom Theme, the class-element marks this style-sheet
  23          a "theme" that can be swtiched dynamicaly -->
  24     <link class="sws-theme" rel="stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
  25
  26     <!-- Customize some templates and initialize -->
  27
  28     <script type="text/javascript">
  29       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  30       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  31       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  32
  33       //Ensures that we load SWS at the very end, after MathJax has
  34       //been initialized
  35
  36       $(window).load(SWS.Presentation.init);
  37     </script>
  38   </head>
  39   <body>
  40     <a href="unix_prog_web_05.xhtml" class="sws-previous"/>
  41
  42     <div class="sws-slide sws-cover sws-option-nofooter">
  43       <h1>Unix et Programmation Web</h1>
  44       <h1>Cours 6</h1>
  45       <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
  46       <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
  47     </div>
  48
  49     <h1>Introduction et généralités</h1>
  50
  51     <div class="sws-slide">
  52       <h1>Avant PHP</h1>
  53       <p>Constat: besoin de pages Web <em>dynamiques</em> (contenu
  54        généré au chargement de la page)<br/>
  55         Première solution: scripts (ou programmes) <em>CGI</em><br/>
  56         <code>             http://www.example.com/foo.cgi?sort=alpha</code>
  57       </p>
  58       <ol>
  59         <li>Programme écrit dans n'importe quel langage et exécuté par
  60         le serveur Web</li>
  61         <li>Le serveur passe les infos au programme par
  62         des <em>variables d'environnement</em> et <em>l'entrée
  63         standard</em></li>
  64         <li>Le programme génère une page Web par affichage sur la
  65         sortie standard</li>
  66       </ol>
  67       <p class="sws-pause">Inconvénients</p>
  68       <ol>
  69         <li>Communication difficile entre le serveur Web et le
  70         programme</li>
  71         <li>Les langages généralistes <em>ne sont pas faits pour le
  72         Web</em> (pas de support d'HTML nativement par exemple)</li>
  73       </ol>
  74     </div>
  75
  76     <div class="sws-slide">
  77       <h1>PHP (Avantages)</h1>
  78       <ul>
  79         <li> <em>Langage utilisé côté serveur</em> : le navigateur ne
  80         « voit » jamais de PHP, uniquement du HTML (comportement
  81         indépendant du navigateur)</li>
  82         <li> <em>Langage interprété</em> : on ne génère pas de
  83           binaire, déploiment facile (on copie les fichiers sur le
  84           serveur)</li>
  85         <li> <em>Intégration avec HTML</em> : PHP supporte
  86         des <em><i>templates</i></em> (modèles/patrons) HTML contenant
  87         du PHP</li>
  88         <li> <em>Expose des Web simplement</em> (ports, URL, requêtes
  89         HTTP, …)</li>
  90       </ul>
  91       <p>Exemple: fichier <tt>heure.php</tt> : </p><code><![CDATA[      <html>
  92         <head><title>Heure</title></head>
  93         <body>
  94           <h1>L'heure</h1>
  95           <p>Il est ]]><span style="color:orange;">&lt;?php echo date('H:i:s'); ?&gt;</span> <![CDATA[</p>
  96         </body>
  97       </html>]]></code>
  98     </div>
  99     <div class="sws-slide">
 100       <h1>PHP</h1>
 101       <ul>
 102         <li>On compte 140,000,000 de noms de domaines enregistrés</li>
 103         <li>On estime à environ 20,000,000 le nombre de sites faits en
 104         PHP</li>
 105         <li>Quelques gros sites:
 106           <ul><li>Facebook</li>
 107             <li>Portail Yahoo!</li>
 108             <li>Flickr</li>
 109             <li>Digg</li>
 110             <li>Wikipedia</li>
 111           </ul>
 112         </li>
 113       </ul>
 114     </div>
 115     <div class="sws-slide">
 116       <h1>Principe</h1>
 117       <ul>
 118         <li class="sws-onframe-1-5">Le serveur Web crée un fichier temporaire. Il copie le
 119         contenu de <tt>heure.php</tt> jusqu'à trouver la balise <tt style="color:orange">&lt;?php</tt>
 120         </li>
 121         <li  class="sws-onframe-2-5">Le code se trouvant
 122         entre  <tt style="color:orange">&lt;?php</tt>
 123         et  <tt style="color:orange">?&gt;</tt> est exécuté.</li>
 124         <li  class="sws-onframe-3-5">Tout ce que le code écrit
 125         (instruction <tt style="color:orange">echo</tt>) est aussi
 126         copié dans le fichier temporaire</li>
 127         <li  class="sws-onframe-4-5">Le serveur web reprend la copie du fichier
 128         après <tt style="color:orange">?&gt;</tt>
 129         </li>
 130         <li  class="sws-onframe-5">Le serveur renvoie le contenu du fichier temporaire comme
 131         page au client</li>
 132       </ul>
 133       <div class="sws-onframe-0-5" style="background:white;margin:0% 5%;border:solid 1pt gray">
 134 <code><span class="sws-onframe-1-5"><![CDATA[      <html>
 135         <head><title>Heure</title></head>
 136         <body>
 137           <h1>L'heure</h1>
 138           <p>Il est ]]></span><span class="sws-onframe-3-5"
 139           style="color:orange;">15:53:00</span><span class="sws-onframe-4-5"> <![CDATA[</p>
 140         </body>
 141       </html>]]></span></code>
 142       </div>
 143     </div>
 144
 145     <div class="sws-slide">
 146       <h1>PHP (inconvénients)</h1>
 147       <ol><li>Génère du HTML via <tt><em>echo</em></tt> (débuggage
 148       difficile)</li>
 149         <li>Interprété : problème de performances si beaucoup de
 150         clients</li>
 151         <li><em><b>NON TYPÉ</b></em> : <em style="color:red">C'est
 152         HORRIBLE</em></li>
 153       </ol>
 154       <p>Devinette : qu'affiche l'instruction suivante ? (on ne
 155       connaît pas encore PHP mais on peut utiliser son intuition)</p>
 156       <code>   echo 013 + "013 c'est en fait 11 en base 8"; </code>
 157       <ul style="background:white">
 158         <li>013</li>
 159         <li>13</li>
 160         <li>013 c'est en fait 11 en base 8</li>
 161         <li>013013 c'est en fait 11 en base 8</li>
 162         <li>13013 c'est en fait 11 en base 8</li>
 163         <li><span style="position:relative;"> <span class="sws-onframe-0"
 164         style="position:absolute;
 165         left:0;">24</span><span class="sws-onframe-1-2"
 166         style="position:absolute;
 167         left:0;"><em>24&nbsp;&#10004;&#10004;&#10004;</em></span></span></li>
 168         <li>une erreur</li>
 169         <li>autre chose</li>
 170       </ul>
 171     </div>
 172     <div class="sws-slide">
 173       <h1>Un mot sur les langages de programmation (subjectif)</h1>
 174       <ol>
 175         <li> Il n'y a pas d'excellent langage de programmation. Par
 176         contre il y a d'excellents programmeurs</li>
 177         <li> Connaître plusieurs langages aide à devenir un bon
 178           programmeur (en particulier plusieurs paradigmes différents :
 179           impératifs, objet, fonctionnel, logique, déclaratif, …).
 180         </li>
 181         <li> On ne peut pas vraiment se faire plaisir en informatique
 182           en étant un mauvais programmeur</li>
 183         <li>Il y a de très mauvais langages, le plus mauvais étant
 184           PHP</li>
 185       </ol>
 186     </div>
 187
 188
 189     <h1>Types de base et expressions simples</h1>
 190     <div class="sws-slide">
 191       <h1>Entiers (<tt>integer</tt>)</h1>
 192       <p>Les entiers ont une taille fixe (généralement 32bits) : </p>
 193       <table class="desc">
 194         <tr><td>Notation décimale</td><td>10, 3444, -25, 42,
 195         …</td></tr>
 196         <tr><td>Notation binaire</td><td>0b10, -0b10001010,
 197         …</td></tr>
 198         <tr><td>Notation octale</td><td>0755, -01234567, …</td></tr>
 199         <tr><td>Notation hexadécimale</td><td>0x12b, -0xb00b5,
 200         0xd34db33f, …</td></tr>
 201       </table>
 202       <p>Opérateurs arithmétiques : </p>
 203       <table class="desc">
 204         <tr><td>-</td><td> « Moins » unaire </td></tr>
 205         <tr><td>+, -, *, % </td><td>addition, soustraction, produit, modulo</td></tr>
 206         <tr><td><span style="color:red">/</span></td><td>Division. Si
 207         <tt>x</tt> et <tt>y</tt> sont des entiers et que <tt>y</tt>
 208         divise <tt>x</tt> alors <tt>x/y</tt> renvoie
 209         un <em style="color:red">entier</em> sinon <tt>x/y</tt> renvoie
 210         un <em style="color:red">flottant</em>!
 211         </td></tr>
 212         </table>
 213     </div>
 214     <div class="sws-slide">
 215       <h1>Booléens (<tt>boolean</tt>)</h1>
 216       <table class="desc">
 217         <tr><td>TRUE/FALSE</td><td>vrai/faux (en majuscules)</td></tr>
 218       </table>
 219       <p>Opérateurs logiques :</p>
 220       <table class="desc">
 221         <tr><td>!</td><td> négation (unaire) </td></tr>
 222         <tr><td>&amp;&amp;, || </td><td>« et » logique, « ou » logique</td></tr>
 223       </table>
 224     </div>
 225     <div class="sws-slide">
 226       <h1>Flottants (<tt>float</tt>)</h1>
 227       <table class="desc">
 228         <tr><td>Notation scientifique</td><td>1.3, 0.99, 00.34e102, -2313.2313E-23,
 229         …</td></tr>
 230       </table>
 231       <p>Opérateurs arithmétiques : </p>
 232       <table class="desc">
 233         <tr><td>-</td><td> « Moins » unaire </td></tr>
 234         <tr><td>+, -, *, /, % </td><td>opérations standard</td></tr>
 235         <tr><td>abs, sin, cos, sqrt, pow, …</td><td>fonctions
 236           mathématiques pré-définies     </td></tr>
 237     </table>
 238     </div>
 239     <div class="sws-slide">
 240       <h1>Variables, affectations</h1>
 241       <ul>
 242         <li>Un nom de variable commence toujours
 243         par <tt><em>$</em></tt></li>
 244         <li>Pas besoin de donner le type, l'affectation détermine le
 245         type</li>
 246       </ul>
 247       <p>Exemples :</p>
 248       <code>     $foo = 123;
 249      $bar = 1323e99;
 250      $_toto = $bar;
 251 </code>
 252     </div>
 253     <div class="sws-slide">
 254       <h1>Chaînes de caractères (<tt>string</tt>)</h1>
 255       <table class="desc">
 256         <tr><td>Simples quotes</td><td> <tt>'foo'</tt>, <tt>'c\'est
 257               moi'</tt>, <tt>'Un antislash : \\'</tt>, …<br/>
 258             <em style="color:orange">Pas d'autre séquence d'échappement</em>
 259         </td></tr>
 260         <tr><td style="width:8em;">Doubles quotes</td><td><tt>"foo"</tt>, <tt>"c'est
 261         moi"</tt>, <tt>"Un retour chariot: \n"</tt>, <tt>"La variable
 262         \$toto contient: $toto"</tt><br/>
 263             <em style="color:orange">Les séquences d'échapement sont:
 264             \n, \t, \\, \&quot;, \$. Les variables (sous-chaînes
 265             commençant par un $) sont remplacées par leur valeur.
 266             </em>
 267           </td></tr>
 268       </table>
 269       <p>Opérations sur les chaînes : </p>
 270       <table class="desc">
 271         <tr><td>$foo[10]</td><td> accès au 11<sup>ème</sup> caractère </td></tr>
 272         <tr><td>$foo[10] = 'A';</td><td> mise à jour</td></tr>
 273         <tr><td> . </td><td>concaténation</td></tr>
 274         <tr><td>strlen</td><td>longueur</td></tr>
 275     </table>
 276     </div>
 277     <div class="sws-slide">
 278       <h1>Tableaux (<tt>array</tt>)</h1>
 279       <p>Les tableaux sont des tableaux <em>associatifs</em> : </p>
 280       <table class="desc" >
 281         <tr><td>array()</td><td>crée un tableau vide</td></tr>
 282         <tr><td style="width:14.5em;">array(<tt>k<sub>1</sub> => v<sub>1</sub>, …,
 283         k<sub>n</sub> => v<sub>n</sub> </tt>)</td>
 284           <td>créé un nouveau tableau pour lequel
 285           l'entrée <tt>k<sub>i</sub></tt> est associée à la
 286           valeur <tt>v<sub>i</sub></tt>
 287             </td>
 288           </tr>
 289         <tr><td>array(<tt>v<sub>1</sub>, …,  v<sub>n</sub> </tt>)</td>
 290           <td>créé un nouveau tableau pour lequel
 291             l'entier <tt>i-1</tt>
 292           valeur <tt>v<sub>i</sub></tt>
 293             </td>
 294           </tr>
 295       </table>
 296       <p>Quelques fonctions : </p>
 297       <table class="desc" style="background:white;">
 298         <tr><td style="width:7em;">count</td><td> taille du tableau (nombre d'éléments)</td></tr>
 299         <tr><td>sort, rsort</td><td> trie un tableau (<tt>rsort</tt> trie par
 300         ordre décroissant) par valeurs. Les clés sont supprimées et
 301         de nouvelles clées de 0 à longueur - 1 sont crées</td></tr>
 302         <tr><td>ksort, krsort</td><td>trie un tableau par
 303         clés</td></tr>
 304         <tr><td>print_r</td><td>affiche un tableau (ne pas utiliser <tt>echo</tt>)</td></tr>
 305     </table>
 306     </div>
 307     <div class="sws-slide">
 308       <h1>Tableaux (exemples)</h1>
 309             <code>        $tab1 = <em>array()</em>; //tableau vide
 310         $tab2 = <em>array("zero", "un", "deux", "trois");</em>
 311         $tab3 = <em>array("pi" => 3.14159, "e" => 2.71828; "phi" => 1.61803)</em>;
 312         echo <em>$tab2[0]</em>; //affiche zero
 313         echo <em>$tab3["phi"]</em>; //affiche 1.61803
 314         <em>$tab1["dix"] = 10</em>; //affectation
 315         <em>sort($tab2)</em>;
 316         echo <em>$tab2[0]</em>;//affiche deux
 317         <em>sort($tab3)</em>;
 318         echo $tab3[0]; //affiche 1.61803
 319         echo $tab3[1]; //affiche 2.71828
 320         echo $tab3[2]; //affiche 3.14159
 321         echo <em>count($tab2)</em>; //affiche 4 </code>
 322     </div>
 323     <div class="sws-slide">
 324       <h1>NULL</h1>
 325       <p><em>NULL</em> est une <em>constante</em> spéciale, de
 326       type <em>NULL</em>. C'est la valeur d'une variable non déclarée
 327       ou d'un accès invalide dans un tableau.</p>
 328       <code>        $a = $b;  // $b n'est pas déclarée, $a reçoit NULL
 329         $c = $tab["toto"]; // $tab existe mais n'a pas de valeur
 330                            // associée à la clé "toto", $c reçoit NULL
 331       </code>
 332     </div>
 333     <div class="sws-slide">
 334       <h1>Conversions de types</h1>
 335       <p><span style="color:red;">☠☢☣☹</span> :
 336 les conversions se
 337       font <em style="color:red;">implicitement</em>, en fonction du
 338       contexte.
 339       </p>
 340       <table class="desc">
 341         <tr> <td style="width:5em;">Booléen</td> <td>0, 0.0, "", "0", <tt>NULL</tt>, et le tableau
 342         vide sont convertis en <tt>FALSE</tt>, le reste
 343         en <tt>TRUE</tt> (en particulier "00" vaut <tt>TRUE</tt>
 344         ☹)</td> </tr>
 345         <tr><td>Entier</td><td> <tt>FALSE</tt> ⇝ 0, <tt>TRUE</tt> ⇝ 1,
 346         les flottants sont arrondis par partie entière (1.23242 ⇝
 347         1). Les chaînes <em style="color:red">dont un préfixe</em>
 348         est un entier sont converties en cet entier, sinon en 0 ("123
 349         bonjour" ⇝ 123) </td>
 350         </tr>
 351         <tr><td>Chaîne</td> <td> La chaîne contient la représentation
 352         de la valeur (<tt> 1 . "ABC" </tt>
 353         ⇝ <tt>"1ABC"</tt>). <tt>FALSE</tt> et <tt>NULL</tt> sont
 354         convertis en <tt>""</tt>, <tt>TRUE</tt> converti en <tt>"1"</tt></td></tr>
 355       </table>
 356       <p> La réponse à la devinette : 013 + "013 c'est 11 en octal" : </p>
 357       <ul style="background:white;">
 358         <li> 013  ⇝ notation octale pour l'entier décimal 11 </li>
 359         <li> "013 c'est 11 en octal" chaîne de caractères utilisées
 360         dans une addition (contexte entier), le préfixe "013" est
 361         transformé en <span style="color:red">décimal</span> 13</li>
 362         <li> 11 + 13  ⇝ 24 (ça au moins ça a du sens)</li>
 363       </ul>
 364
 365     </div>
 366     <div class="sws-slide">
 367       <h1>Comparaisons</h1>
 368       <p>Opérateurs de comparaisons</p>
 369       <table class="simple">
 370         <tr><td style="width:2em;"><em>Opérateur</em></td> <td style="width:13em;"><em>Description</em></td></tr>
 371         <tr><td><tt> $a == $b </tt></td> <td >Égal, après conversion
 372         de type     </td></tr>
 373         <tr><td><tt> $a != $b </tt></td> <td>Différent, après conversion
 374         de type
 375         </td></tr>
 376         <tr><td><tt> $a === $b </tt></td> <td>Égal et de même type
 377         </td></tr>
 378         <tr><td><tt> $a !== $b </tt></td> <td>Différent ou de type différent
 379         </td></tr>
 380         <tr><td><tt> $a &lt; $b </tt></td> <td>Strictement plus petit,
 381         après conversion de type
 382         </td></tr>
 383         <tr><td><tt> $a &gt; $b </tt></td> <td>Strictement plus grand,
 384         après conversion de type
 385         </td></tr>
 386         <tr><td><tt> $a &lt;= $b </tt></td> <td>Plus petit,
 387         après conversion de type
 388         </td></tr>
 389         <tr><td><tt> $a &gt;= $b </tt></td> <td>Plus grand,
 390         après conversion de type
 391         </td></tr>
 392         </table>
 393       <p>On comparera <em style="color:red;">TOUJOURS</em> des valeurs
 394       de <em style="color:red;">MÊME TYPE</em></p>
 395     </div>
 396     <div class="sws-slide">
 397       <h1>Affichage</h1>
 398       <p>On utilise l'instruction <tt><em>echo</em></tt> pour écrire
 399         du texte dans la page HTML résultante : </p>
 400       <table class="simple" border="1" style="margin-left:10vh; border-collapse:collapse;border-spacing: 2pt 2pt" >
 401         <tr style="boder-width:0pt 0pt 3pt 0pt;
 402                    border-color: gray;
 403                    border-style: solid " >
 404           <td  style="width: 10em;"><em>Code PHP</em></td>
 405           <td  style="width: 7em;" ><em>Code HTML</em></td>
 406           <td><em>Affichage dans le navigateur</em></td>
 407         </tr>
 408         <tr>
 409           <td><tt>echo "Hello";<br/>
 410               echo "World";</tt></td>
 411           <td> HelloWorld</td>
 412           <td>HelloWorld</td></tr>
 413         <tr>
 414         <td><tt>echo "Hello\n";<br/>
 415             echo "World";</tt></td>
 416         <td> Hello<br/>World</td>
 417         <td>Hello World</td></tr>
 418         <tr><td><tt>echo "Hello&lt;br/&gt;";<br/>
 419             echo "World";</tt></td>
 420         <td> Hello<tt>&lt;br/&gt;</tt>World</td>
 421         <td>Hello<br/>World</td></tr>
 422       </table>
 423     </div>
 424     <h1>Structures de contrôle</h1>
 425     <div class="sws-slide">
 426       <h1>Conditionnelle: <tt>if else</tt></h1>
 427       <code>
 428         <em>if (</em> c <em>) {</em>
 429                // cas then
 430         <em> } else { </em>
 431               // cas else
 432         <em>};</em>
 433       </code>
 434       <p>Les <em>parenthèses</em> autour de la condition <tt>c</tt> sont
 435           obligatoires. La branche <tt><em>else { … }</em></tt> est
 436           optionnelle. Les accolades sont optionnelles pour les blocs
 437           d'une seule instruction</p>
 438       </div>
 439       <div class="sws-slide">
 440         <h1>Boucles</h1>
 441         <div class="sws-pause">
 442           <code>     <em>while (</em> c <em>)  {</em>
 443         //corps de la boucle while
 444      <em>};</em></code>
 445         </div>
 446        <div class="sws-pause">
 447           <code>
 448      <em>do  {</em>
 449         //corps de la boucle do
 450      <em>} while (</em> c <em>);</em></code>
 451         </div>
 452
 453        <div class="sws-pause">
 454           <code>
 455      <em>for(init ; test ; incr)  {</em>
 456         //corps de la boucle for
 457      <em>};</em></code>
 458         </div>
 459        <div class="sws-pause">
 460           <code>
 461      <em>foreach($tab as $key => $val)  {</em>
 462         //corps de la boucle foreach
 463         //$tab est un tableau, $key une clé et $val la valeur associée
 464      <em>};</em></code>
 465         </div>
 466        <p style="background:white;">Remarque: <tt>ksort</tt> et <tt>krsort</tt> influencent
 467        l'ordre de parcours par une boucle <tt>foreach</tt></p>
 468       </div>
 469       <div class="sws-slide">
 470         <h1><tt>break</tt> et <tt>continue</tt></h1>
 471         <table class="desc">
 472           <tr><td><tt>break</tt></td>
 473             <td>sort de la boucle
 474           immédiatement</td> </tr>
 475           <tr> <td><tt>continue</tt></td> <td>reprend à l'itération
 476           suivante</td>
 477           </tr>
 478         </table>
 479         <code>
 480           for($i = 0; $i &lt; 10; $i = $i + 1){
 481               if ($i == 2 || $i == 4) continue;
 482               if ($i == 7) break;
 483               echo $i . ' ';
 484           }
 485           </code>
 486         <p>Affiche 0 1 3 5 6</p>
 487       </div>
 488       <h1>Passage de paramètres depuis une page</h1>
 489       <div class="sws-slide">
 490         <h1>Formulaire HTML (version simple)</h1>
 491         <p>L'élément <tt><em>&lt;form&gt;</em></tt> permet de créer des formulaires HTML. Un
 492 formulaire est constitué d'un ensemble de widgets (zones de saisies
 493 de textes, boutons, listes déroulantes, cases à cocher, ... ) et d'un
 494 bouton submit. Lorsque l'utilisateur appuie sur le bouton, les
 495 données du formulaires sont envoyées au serveur. Exemple, fichier
 496 <tt>age.html</tt> :</p>
 497 <code><![CDATA[
 498     <html>
 499       <body>
 500         <form method="get" action="calcul.php">
 501           Entrez votre année de naissance: <input type="text" name="val_age"/>
 502           <input type="submit" />
 503         </form>
 504       </body>
 505     </html>
 506     ]]></code>
 507 </div>
 508 <div class="sws-slide">
 509   <h1>Paramètres</h1>
 510   <p>
 511     Les paramètres envoyés au serveur web par la méthode <tt>get</tt>, sont
 512     accessibles en PHP dans la variable globale <tt><em>$_GET</em></tt>. C'est un tableau
 513     qui associe au nom d'un input sa valeur.
 514     Exemple : <tt>calcul.php</tt></p>
 515 <code><![CDATA[
 516       <html>
 517         <body>
 518           <?php
 519            echo "Vous êtes né il y a ";
 520            echo "<b>";
 521            echo date("Y") - ]]><em>$_GET["val_age"]</em><![CDATA[;
 522            echo "</b> ans";
 523            echo "<br/>";
 524            ?>
 525           </body>
 526      </html>
 527       ]]></code>
 528 </div>
 529
 530
 531     <h1>Définitions de fonctions</h1>
 532
 533     <div class="sws-slide">
 534       <h1>Fonctions</h1>
 535       <p>Les fonctions sont déclarées à l'aide du
 536       mot-clé <tt><em>function</em></tt>. On renvoie des résultats à
 537       l'aide du mot-clé  <tt><em>return</em></tt>.</p>
 538         <code><![CDATA[
 539    <?php
 540     ]]><em>function</em> double ($x)
 541       <em>{</em>
 542          <em>return</em> $x + $x;
 543       <em>}</em>
 544
 545       echo double(10);
 546   <![CDATA[?>]]>
 547         </code>
 548     </div>
 549
 550
 551     <div class="sws-slide">
 552       <h1>Portée des variables locales et globales
 553         <b style="color:red">&#9888;</b>
 554       </h1>
 555       <div id="cont2" style="width:100%;position:relative;"
 556            onresize="draw_arrows();" >
 557         <div id="left2" style="display:inline-block;width:50%; position:relative;
 558                                box-sizing:border-box;
 559                                padding: 0 1em 0 2em;
 560                                border-style:dashed;
 561                                border-width: 0 1pt 0 0;
 562                                border-color:gray; float:left;">
 563 <code>  &lt;?php
 564   <em style="color:red">$a</em> = 42;
 565   function add_a($x)
 566   {
 567         <span id="leftend" />
 568     return $x + <em style="color:red">$a</em>;<span id="leftstart" />
 569   }
 570   echo add_a(10);
 571   ?&gt;
 572 </code>
 573         </div>
 574         <div id="right2" style="display:inline-block;
 575                                 width:50%; position:relative;
 576                                 box-sizing:border-box;
 577                                 padding: 0 2em 0 1em;
 578                                 vertical-align:text-top;
 579                                 ">
 580 <code >  &lt;?php
 581   <em>$a</em> = 42;<span id="rightend"/>
 582   function add_a($x)
 583   {
 584     <em>global $a</em>;<span id="rightmid"/>
 585     return $x + <em>$a</em>;<span id="rightstart"/>
 586   }
 587   echo add_a(10);
 588   ?&gt;
 589 </code>
 590         </div>
 591       </div>
 592
 593       <script type="text/javascript">
 594
 595         function overlay(id) {
 596         var w = $("#" + id)[0].offsetWidth;
 597         var h = $("#" + id)[0].offsetHeight;
 598         $("#svg_"+id).remove();
 599         var paper = Raphael(id, w, h);
 600         paper.canvas.id = "svg_" + id;
 601         return paper;
 602         };
 603
 604         function curve_to(paper, start, end, style) {
 605         var x1 = $(start)[0].offsetLeft;
 606         var y1 = $(start)[0].offsetTop;
 607         var x2 = $(end)[0].offsetLeft;
 608         var y2 = $(end)[0].offsetTop;
 609
 610         var path_cmd =
 611         "M" + x1 + " " + y1 + " S" + x1 + " " + y2 + " " + x2 + " " +   y2;
 612         var p1 = paper.path(path_cmd);
 613         p1.attr(style);
 614
 615         };
 616
 617         function draw_arrows(x) {
 618
 619         var paper = overlay("left2");
 620         $("#svg_left2").css ( { 'z-index': '2', 'top':'0', 'left':'0', 'position':'absolute' } );
 621
 622         curve_to (paper, "#leftstart", "#leftend", { 'stroke': "red",
 623         'stroke-dasharray' : "-",
 624         'stroke-width': 2,
 625         'arrow-end' : "block-wide-long" });
 626
 627         var paper = overlay("right2");
 628         $("#svg_right2").css({ 'z-index': '2', 'top':'0', 'right':'0', 'position':'absolute' });
 629
 630         curve_to (paper, "#rightstart", "#rightmid", { 'stroke': "green",
 631         'stroke-width': 2,
 632         'arrow-end' : "block-wide-long" });
 633         curve_to (paper, "#rightmid", "#rightend", { 'stroke': "green",
 634         'stroke-width': 2,
 635         'arrow-end' : "block-wide-long" });
 636         };
 637         SWS.Presentation.registerCallback(0, draw_arrows);
 638       </script>
 639       <p>Le code de gauche <em style="color:red">affiche 10</em> !
 640       Les variables ont une portée <em style="color:red">locale</em>
 641       par défaut. Si <tt>$a</tt> n'est pas définie dans le corps de la
 642       fonction, sa valeur est <tt style="color:red">NULL</tt>
 643       (variable non définie). <span >Pour référencer
 644       des variables globales, on utilise le mot clé <tt><em>global</em></tt>.</span>
 645       </p>
 646     </div>
 647     <div class="sws-slide">
 648       <h1>Fonction : définition <b style="color:red">&#9888;</b></h1>
 649       <p>On peut utiliser une fonction <s>« avant »</s> de la définir :</p>
 650       <code>   &lt;?php
 651         echo next(10);
 652         echo &lt;br/&gt;;
 653
 654         function next($x)
 655         {
 656           return $x + 1;
 657         }
 658    ?&gt;</code>
 659       <p>On définira <em>toujours</em> des fonctions <em>avant</em> de
 660       les utiliser. On ne peut pas définir deux fonctions avec le même
 661       nom.
 662       </p>
 663     </div>
 664     <div class="sws-slide">
 665       <h1>Fonctions : passage par référence</h1>
 666       <div style="position:relative;margin-top:20pt;">
 667         <div style="margin-left:20pt;display:inline-block;vertical-align:top;float:left;">
 668             <code>&lt;?php
 669   function add_a($tab)
 670   {
 671     $tab["a"] = 42;
 672   }
 673
 674   $mytab = array();
 675   add_a($mytab);
 676   echo $mytab["a"];
 677   //<s>n'affiche rien (car NULL ⇝ "")</s>
 678 ?&gt;</code>
 679         </div>
 680         <div style="margin-left:20pt;display:inline-block;vertical-align:top;">
 681           <code>&lt;?php
 682   function add_a(<em>&amp;</em>$tab)
 683   {
 684     $tab["a"] = 42;
 685   }
 686
 687   $mytab = array();
 688   add_a($mytab);
 689   echo $mytab["a"];
 690   //<em>affiche 42</em>
 691 ?&gt;</code>
 692         </div>
 693
 694       </div>
 695       <br/>
 696       <p style="position:relative">On utiliser le modificateur <tt><em>&amp;</em></tt> devant
 697       un paramètre de fonction pour indiquer que ce dernier est passé
 698       par référence.</p>
 699
 700       <p style="position:relative">Lorsque l'on veut <em>modifier</em> un argument de la
 701       fonction (plutot que de renvoyer une version modifiée, par
 702       ex. mise à jour d'un tableau, d'une chaîne, …), on doit le
 703       passer  par référence.
 704       </p>
 705     </div>
 706   </body>
 707
 708 </html>