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>PHP : Introduction</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-1.9.1.min.js" type="text/javascript" ></script>
16 <!-- Load the library -->
17 <script src="../libs/raphael-min.js" type="text/javascript" ></script>
19 <script src="../simpleWebSlides.js" type="text/javascript" ></script>
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" />
26 <!-- Customize some templates and initialize -->
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;
33 //Ensures that we load SWS at the very end, after MathJax has
36 $(window).load(SWS.Presentation.init);
40 <a href="unix_prog_web_05.xhtml" class="sws-previous"/>
42 <div class="sws-slide sws-cover sws-option-nofooter">
43 <h1>Unix et Programmation Web</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>
49 <h1>Introduction et généralités</h1>
51 <div class="sws-slide">
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>
59 <li>Programme écrit dans n'importe quel langage et exécuté par
61 <li>Le serveur passe les infos au programme par
62 des <em>variables d'environnement</em> et <em>l'entrée
64 <li>Le programme génère une page Web par affichage sur la
67 <p class="sws-pause">Inconvénients</p>
69 <li>Communication difficile entre le serveur Web et le
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>
76 <div class="sws-slide">
77 <h1>PHP (Avantages)</h1>
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
85 <li> <em>Intégration avec HTML</em> : PHP supporte
86 des <em><i>templates</i></em> (modèles/patrons) HTML contenant
88 <li> <em>Expose des Web simplement</em> (ports, URL, requêtes
91 <p>Exemple: fichier <tt>heure.php</tt> : </p><code><![CDATA[ <html>
92 <head><title>Heure</title></head>
95 <p>Il est ]]><span style="color:orange;"><?php echo date('H:i:s'); ?></span> <![CDATA[</p>
99 <div class="sws-slide">
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
105 <li>Quelques gros sites:
106 <ul><li>Facebook</li>
107 <li>Portail Yahoo!</li>
115 <div class="sws-slide">
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"><?php</tt>
121 <li class="sws-onframe-2-5">Le code se trouvant
122 entre <tt style="color:orange"><?php</tt>
123 et <tt style="color:orange">?></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">?></tt>
130 <li class="sws-onframe-5">Le serveur renvoie le contenu du fichier temporaire comme
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>
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>
141 </html>]]></span></code>
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
149 <li>Interprété : problème de performances si beaucoup de
151 <li><em><b>NON TYPÉ</b></em> : <em style="color:red">C'est
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">
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 ✔✔✔</em></span></span></li>
172 <div class="sws-slide">
173 <h1>Un mot sur les langages de programmation (subjectif)</h1>
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, …).
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
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>
194 <tr><td>Notation décimale</td><td>10, 3444, -25, 42,
196 <tr><td>Notation binaire</td><td>0b10, -0b10001010,
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>
202 <p>Opérateurs arithmétiques : </p>
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>!
214 <div class="sws-slide">
215 <h1>Booléens (<tt>boolean</tt>)</h1>
217 <tr><td>TRUE/FALSE</td><td>vrai/faux (en majuscules)</td></tr>
219 <p>Opérateurs logiques :</p>
221 <tr><td>!</td><td> négation (unaire) </td></tr>
222 <tr><td>&&, || </td><td>« et » logique, « ou » logique</td></tr>
225 <div class="sws-slide">
226 <h1>Flottants (<tt>float</tt>)</h1>
228 <tr><td>Notation scientifique</td><td>1.3, 0.99, 00.34e102, -2313.2313E-23,
231 <p>Opérateurs arithmétiques : </p>
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>
239 <div class="sws-slide">
240 <h1>Variables, affectations</h1>
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
253 <div class="sws-slide">
254 <h1>Chaînes de caractères (<tt>string</tt>)</h1>
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>
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, \\, \", \$. Les variables (sous-chaînes
265 commençant par un $) sont remplacées par leur valeur.
269 <p>Opérations sur les chaînes : </p>
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>
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>
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>
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
304 <tr><td>print_r</td><td>affiche un tableau (ne pas utiliser <tt>echo</tt>)</td></tr>
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>
323 <div class="sws-slide">
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
333 <div class="sws-slide">
334 <h1>Conversions de types</h1>
335 <p><span style="color:red;">☠☢☣☹</span> :
337 font <em style="color:red;">implicitement</em>, en fonction du
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>
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>
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>
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>
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
373 <tr><td><tt> $a != $b </tt></td> <td>Différent, après conversion
376 <tr><td><tt> $a === $b </tt></td> <td>Égal et de même type
378 <tr><td><tt> $a !== $b </tt></td> <td>Différent ou de type différent
380 <tr><td><tt> $a < $b </tt></td> <td>Strictement plus petit,
381 après conversion de type
383 <tr><td><tt> $a > $b </tt></td> <td>Strictement plus grand,
384 après conversion de type
386 <tr><td><tt> $a <= $b </tt></td> <td>Plus petit,
387 après conversion de type
389 <tr><td><tt> $a >= $b </tt></td> <td>Plus grand,
390 après conversion de type
393 <p>On comparera <em style="color:red;">TOUJOURS</em> des valeurs
394 de <em style="color:red;">MÊME TYPE</em></p>
396 <div class="sws-slide">
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;
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>
409 <td><tt>echo "Hello";<br/>
410 echo "World";</tt></td>
412 <td>HelloWorld</td></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<br/>";<br/>
419 echo "World";</tt></td>
420 <td> Hello<tt><br/></tt>World</td>
421 <td>Hello<br/>World</td></tr>
424 <h1>Structures de contrôle</h1>
425 <div class="sws-slide">
426 <h1>Conditionnelle: <tt>if else</tt></h1>
428 <em>if (</em> c <em>) {</em>
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>
439 <div class="sws-slide">
441 <div class="sws-pause">
442 <code> <em>while (</em> c <em>) {</em>
443 //corps de la boucle while
446 <div class="sws-pause">
449 //corps de la boucle do
450 <em>} while (</em> c <em>);</em></code>
453 <div class="sws-pause">
455 <em>for(init ; test ; incr) {</em>
456 //corps de la boucle for
459 <div class="sws-pause">
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
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>
469 <div class="sws-slide">
470 <h1><tt>break</tt> et <tt>continue</tt></h1>
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
480 for($i = 0; $i < 10; $i = $i + 1){
481 if ($i == 2 || $i == 4) continue;
486 <p>Affiche 0 1 3 5 6</p>
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><form></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>
500 <form method="get" action="calcul.php">
501 Entrez votre année de naissance: <input type="text" name="val_age"/>
502 <input type="submit" />
508 <div class="sws-slide">
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>
519 echo "Vous êtes né il y a ";
521 echo date("Y") - ]]><em>$_GET["val_age"]</em><![CDATA[;
531 <h1>Définitions de fonctions</h1>
533 <div class="sws-slide">
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>
540 ]]><em>function</em> double ($x)
542 <em>return</em> $x + $x;
551 <div class="sws-slide">
552 <h1>Portée des variables locales et globales
553 <b style="color:red">⚠</b>
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;
561 border-width: 0 1pt 0 0;
562 border-color:gray; float:left;">
564 <em style="color:red">$a</em> = 42;
567 <span id="leftend" />
568 return $x + <em style="color:red">$a</em>;<span id="leftstart" />
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;
581 <em>$a</em> = 42;<span id="rightend"/>
584 <em>global $a</em>;<span id="rightmid"/>
585 return $x + <em>$a</em>;<span id="rightstart"/>
593 <script type="text/javascript">
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;
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;
611 "M" + x1 + " " + y1 + " S" + x1 + " " + y2 + " " + x2 + " " + y2;
612 var p1 = paper.path(path_cmd);
617 function draw_arrows(x) {
619 var paper = overlay("left2");
620 $("#svg_left2").css ( { 'z-index': '2', 'top':'0', 'left':'0', 'position':'absolute' } );
622 curve_to (paper, "#leftstart", "#leftend", { 'stroke': "red",
623 'stroke-dasharray' : "-",
625 'arrow-end' : "block-wide-long" });
627 var paper = overlay("right2");
628 $("#svg_right2").css({ 'z-index': '2', 'top':'0', 'right':'0', 'position':'absolute' });
630 curve_to (paper, "#rightstart", "#rightmid", { 'stroke': "green",
632 'arrow-end' : "block-wide-long" });
633 curve_to (paper, "#rightmid", "#rightend", { 'stroke': "green",
635 'arrow-end' : "block-wide-long" });
637 SWS.Presentation.registerCallback(0, draw_arrows);
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>
647 <div class="sws-slide">
648 <h1>Fonction : définition <b style="color:red">⚠</b></h1>
649 <p>On peut utiliser une fonction <s>« avant »</s> de la définir :</p>
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
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;">
677 //<s>n'affiche rien (car NULL ⇝ "")</s>
680 <div style="margin-left:20pt;display:inline-block;vertical-align:top;">
682 function add_a(<em>&</em>$tab)
690 //<em>affiche 42</em>
696 <p style="position:relative">On utiliser le modificateur <tt><em>&</em></tt> devant
697 un paramètre de fonction pour indiquer que ce dernier est passé
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.