Add courses and fixes
[hacks/simpleWebSlides.git] / prog_internet / prog_internet_06.xhtml
diff --git a/prog_internet/prog_internet_06.xhtml b/prog_internet/prog_internet_06.xhtml
new file mode 100644 (file)
index 0000000..892c59a
--- /dev/null
@@ -0,0 +1,510 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+          >
+<html xmlns="http://www.w3.org/1999/xhtml" >
+  <head>
+    <title>PHP : Introduction</title>
+
+    <meta http-equiv="Content-Type"
+          content="text/html; charset=utf-8" />
+    <meta name="copyright"
+          content="Copyright &#169; 2013 Kim Nguyễn" />
+
+    <!-- Load jQuery -->
+    <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
+    <!-- Load the library -->
+    <script src="../simpleWebSlides.js" type="text/javascript" ></script>
+
+    <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
+    <!-- Load a custom Theme, the class-element marks this style-sheet
+         a "theme" that can be swtiched dynamicaly -->
+    <link class="sws-theme" rel="stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
+
+    <!-- Customize some templates and initialize -->
+
+    <script type="text/javascript">
+      SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
+      SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
+      SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
+
+      //Ensures that we load SWS at the very end, after MathJax has
+      //been initialized
+
+      $(window).load(SWS.Presentation.init);
+    </script>
+  </head>
+  <body>
+    <a href="prog_internet_05.xhtml" class="sws-previous"/>
+
+    <div class="sws-slide sws-cover sws-option-nofooter">
+      <h1>Programmation Internet</h1>
+      <h1>Cours 6</h1>
+      <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
+      <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
+    </div>
+
+    <h1>Introduction et généralités</h1>
+
+    <div class="sws-slide">
+      <h1>Avant PHP</h1>
+      <p>Constat: besoin de pages Web <em>dynamiques</em> (contenu
+       généré au chargement de la page)<br/>
+        Première solution: scripts (ou programmes) <em>CGI</em><br/>
+        <code>             http://www.example.com/foo.cgi?sort=alpha</code>
+      </p>
+      <ol>
+        <li>Programme écrit dans n'importe quel langage et exécuté par
+        le serveur Web</li>
+        <li>Le serveur passe les infos au programme par
+        des <em>variables d'environnement</em> et <em>l'entrée
+        standard</em></li>
+        <li>Le programme génère une page Web par affichage sur la
+        sortie standard</li>
+      </ol>
+      <p class="sws-pause">Inconvénients</p>
+      <ol>
+        <li>Communication difficile entre le serveur Web et le
+        programme</li>
+        <li>Les langages généralistes <em>ne sont pas faits pour le
+        Web</em> (pas de support d'HTML nativement par exemple)</li>
+      </ol>
+    </div>
+
+    <div class="sws-slide">
+      <h1>PHP (Avantages)</h1>
+      <ul>
+        <li> <em>Langage utilisé côté serveur</em> : le navigateur ne
+        « voit » jamais de PHP, uniquement du HTML (comportement
+        indépendant du navigateur)</li>
+        <li> <em>Langage interprété</em> : on ne génère pas de
+          binaire, déploiment facile (on copie les fichiers sur le
+          serveur)</li>
+        <li> <em>Intégration avec HTML</em> : PHP supporte
+        des <em><i>templates</i></em> (modèles/patrons) HTML contenant
+        du PHP</li>
+      </ul>
+      <p>Exemple: fichier <tt>heure.php</tt> : </p><code><![CDATA[      <html>
+        <head><title>Heure</title></head>
+        <body>
+          <h1>L'heure</h1>
+          <p>Il est ]]><span style="color:orange;">&lt;?php echo date('H:i:s'); ?&gt;</span> <![CDATA[</p>
+        </body>
+      </html>]]></code>
+    </div>
+    <div class="sws-slide">
+      <h1>PHP</h1>
+      <ul>
+        <li>On compte 140,000,000 de noms de domaines enregistrés</li>
+        <li>On estime à environ 20,000,000 le nombre de sites faits en
+        PHP</li>
+        <li>Quelques gros sites:
+          <ul><li>Facebook</li>
+            <li>Portail Yahoo!</li>
+            <li>Flickr</li>
+            <li>Digg</li>
+            <li>Wikipedia</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <div class="sws-slide">
+      <h1>Principe</h1>
+      <ul>
+        <li class="sws-onframe-1-5">Le serveur Web crée un fichier temporaire. Il copie le
+        contenu de <tt>heure.php</tt> jusqu'à trouver la balise <tt style="color:orange">&lt;?php</tt>
+        </li>
+        <li  class="sws-onframe-2-5">Le code se trouvant
+        entre  <tt style="color:orange">&lt;?php</tt>
+        et  <tt style="color:orange">?&gt;</tt> est exécuté.</li>
+        <li  class="sws-onframe-3-5">Tout ce que le code écrit
+        (instruction <tt style="color:orange">echo</tt>) est aussi
+        copié dans le fichier temporaire</li>
+        <li  class="sws-onframe-4-5">Le serveur web reprend la copie du fichier
+        après <tt style="color:orange">?&gt;</tt>
+        </li>
+        <li  class="sws-onframe-5">Le serveur renvoie le contenu du fichier temporaire comme
+        page au client</li>
+      </ul>
+      <div class="sws-onframe-0-5" style="background:white;margin:0% 5%;border:solid 1pt gray">
+<code><span class="sws-onframe-1-5"><![CDATA[      <html>
+        <head><title>Heure</title></head>
+        <body>
+          <h1>L'heure</h1>
+          <p>Il est ]]></span><span class="sws-onframe-3-5"
+          style="color:orange;">15:53:00</span><span class="sws-onframe-4-5"> <![CDATA[</p>
+        </body>
+      </html>]]></span></code>
+      </div>
+    </div>
+
+    <div class="sws-slide">
+      <h1>PHP (inconvénients)</h1>
+      <ol><li>Génère du HTML via <tt><em>echo</em></tt> (débuggage
+      difficile)</li>
+        <li>Interprété : problème de performances si beaucoup de
+        clients</li>
+        <li><em><b>NON TYPÉ</b></em> : <em style="color:red">C'est
+        HORRIBLE</em></li>
+      </ol>
+      <p>Devinette : qu'affiche l'instruction suivante ? (on ne
+      connaît pas encore PHP mais on peut utiliser son intuition)</p>
+      <code>   echo 013 + "013 c'est en fait 11 en base 8"; </code>
+      <ul style="background:white">
+        <li>013</li>
+        <li>13</li>
+        <li>013 c'est en fait 11 en base 8</li>
+        <li>013013 c'est en fait 11 en base 8</li>
+        <li>13013 c'est en fait 11 en base 8</li>
+        <li><span style="position:relative;"> <span class="sws-onframe-0"
+        style="position:absolute;
+        left:0;">24</span><span class="sws-onframe-1-2"
+        style="position:absolute;
+        left:0;"><em>24&nbsp;&#10004;&#10004;&#10004;</em></span></span></li>
+        <li>une erreur</li>
+        <li>autre chose</li>
+      </ul>
+    </div>
+    <h1>Types de base et expressions simples</h1>
+    <div class="sws-slide">
+      <h1>Entiers (<tt>integer</tt>)</h1>
+      <p>Les entiers ont une taille fixe (généralement 32bits) : </p>
+      <table class="desc">
+        <tr><td>Notation décimale</td><td>10, 3444, -25, 42,
+        …</td></tr>
+        <tr><td>Notation binaire</td><td>0b10, -0b10001010,
+        …</td></tr>
+        <tr><td>Notation octale</td><td>0755, -01234567, …</td></tr>
+        <tr><td>Notation hexadécimale</td><td>0x12b, -0xb00b5,
+        0xd34db33f, …</td></tr>
+      </table>
+      <p>Opérateurs arithmétiques : </p>
+      <table class="desc">
+        <tr><td>-</td><td> « Moins » unaire </td></tr>
+        <tr><td>+, -, *, % </td><td>addition, soustraction, produit, modulo</td></tr>
+        <tr><td><span style="color:red">/</span></td><td>Division. Si
+        <tt>x</tt> et <tt>y</tt> sont des entiers et que <tt>y</tt>
+        divise <tt>x</tt> alors <tt>x/y</tt> renvoie
+        un <em style="color:red">entier</em> sinon <tt>x/y</tt> renvoie
+        un <em style="color:red">flottant</em>!
+        </td></tr>
+        </table>
+    </div>
+    <div class="sws-slide">
+      <h1>Booléens (<tt>boolean</tt>)</h1>
+      <table class="desc">
+        <tr><td>TRUE/FALSE</td><td>vrai/faux (en majuscules)</td></tr>
+      </table>
+      <p>Opérateurs logiques :</p>
+      <table class="desc">
+        <tr><td>!</td><td> négation (unaire) </td></tr>
+        <tr><td>&amp;&amp;, || </td><td>« et » logique, « ou » logique</td></tr>
+      </table>
+    </div>
+    <div class="sws-slide">
+      <h1>Flottants (<tt>float</tt>)</h1>
+      <table class="desc">
+        <tr><td>Notation scientifique</td><td>1.3, 0.99, 00.34e102, -2313.2313E-23,
+        …</td></tr>
+      </table>
+      <p>Opérateurs arithmétiques : </p>
+      <table class="desc">
+        <tr><td>-</td><td> « Moins » unaire </td></tr>
+        <tr><td>+, -, *, /, % </td><td>opérations standard</td></tr>
+        <tr><td>abs, sin, cos, sqrt, pow, …</td><td>fonctions
+          mathématiques pré-définies     </td></tr>
+    </table>
+    </div>
+    <div class="sws-slide">
+      <h1>Variables, affectations</h1>
+      <ul>
+        <li>Un nom de variable commence toujours
+        par <tt><em>$</em></tt></li>
+        <li>Pas besoin de donner le type, l'affectation détermine le
+        type</li>
+      </ul>
+      <p>Exemples :</p>
+      <code>     $foo = 123;
+     $bar = 1323e99;
+     $_toto = $bar;
+</code>
+    </div>
+    <div class="sws-slide">
+      <h1>Chaînes de caractères (<tt>string</tt>)</h1>
+      <table class="desc">
+        <tr><td>Simples quotes</td><td> <tt>'foo'</tt>, <tt>'c\'est
+              moi'</tt>, <tt>'Un antislash : \\'</tt>, …<br/>
+            <em style="color:orange">Pas d'autre séquence d'échappement</em>
+        </td></tr>
+        <tr><td style="width:8em;">Doubles quotes</td><td><tt>"foo"</tt>, <tt>"c'est
+        moi"</tt>, <tt>"Un retour chariot: \n"</tt>, <tt>"La variable
+        \$toto contient: $toto"</tt><br/>
+            <em style="color:orange">Les séquences d'échapement sont:
+            \n, \t, \\, \&quot;, \$. Les variables (sous-chaînes
+            commençant par un $) sont remplacées par leur valeur.
+            </em>
+          </td></tr>
+      </table>
+      <p>Opérations sur les chaînes : </p>
+      <table class="desc">
+        <tr><td>$foo[10]</td><td> accès au 11<sup>ème</sup> caractère </td></tr>
+        <tr><td>$foo[10] = 'A';</td><td> mise à jour</td></tr>
+        <tr><td> . </td><td>concaténation</td></tr>
+        <tr><td>strlen</td><td>longueur</td></tr>
+    </table>
+    </div>
+    <div class="sws-slide">
+      <h1>Tableaux (<tt>array</tt>)</h1>
+      <p>Les tableaux sont des tableaux <em>associatifs</em> : </p>
+      <table class="desc" >
+        <tr><td>array()</td><td>crée un tableau vide</td></tr>
+        <tr><td style="width:14.5em;">array(<tt>k<sub>1</sub> => v<sub>1</sub>, …,
+        k<sub>n</sub> => v<sub>n</sub> </tt>)</td>
+          <td>créé un nouveau tableau pour lequel
+          l'entrée <tt>k<sub>i</sub></tt> est associée à la
+          valeur <tt>v<sub>i</sub></tt>
+            </td>
+          </tr>
+        <tr><td>array(<tt>v<sub>1</sub>, …,  v<sub>n</sub> </tt>)</td>
+          <td>créé un nouveau tableau pour lequel
+            l'entier <tt>i-1</tt>
+          valeur <tt>v<sub>i</sub></tt>
+            </td>
+          </tr>
+      </table>
+      <p>Quelques fonctions : </p>
+      <table class="desc" style="background:white;">
+        <tr><td style="width:7em;">count</td><td> taille du tableau (nombre d'éléments)</td></tr>
+        <tr><td>sort, rsort</td><td> trie un tableau (<tt>rsort</tt> trie par
+        ordre décroissant) par valeurs. Les clés sont supprimées et
+        de nouvelles clées de 0 à longueur - 1 sont crées</td></tr>
+        <tr><td>ksort, krsort</td><td>trie un tableau par
+        clés</td></tr>
+        <tr><td>print_r</td><td>affiche un tableau (ne pas utiliser <tt>echo</tt>)</td></tr>
+    </table>
+    </div>
+    <div class="sws-slide">
+      <h1>Tableaux (exemples)</h1>
+            <code>        $tab1 = <em>array()</em>; //tableau vide
+        $tab2 = <em>array("zero", "un", "deux", "trois");</em>
+        $tab3 = <em>array("pi" => 3.14159, "e" => 2.71828; "phi" => 1.61803)</em>;
+        echo <em>$tab2[0]</em>; //affiche zero
+        echo <em>$tab3["phi"]</em>; //affiche 1.61803
+        <em>$tab1["dix"] = 10</em>; //affectation
+        <em>sort($tab2)</em>;
+        echo <em>$tab2[0]</em>;//affiche deux
+        <em>sort($tab3)</em>;
+        echo $tab3[0]; //affiche 1.61803
+        echo $tab3[1]; //affiche 2.71828
+        echo $tab3[2]; //affiche 3.14159
+        echo <em>count($tab2)</em>; //affiche 4 </code>
+    </div>
+    <div class="sws-slide">
+      <h1>NULL</h1>
+      <p><em>NULL</em> est une <em>constante</em> spéciale, de
+      type <em>NULL</em>. C'est la valeur d'une variable non déclarée
+      ou d'un accès invalide dans un tableau.</p>
+      <code>        $a = $b;  // $b n'est pas déclarée, $a reçoit NULL
+        $c = $tab["toto"]; // $tab existe mais n'a pas de valeur
+                           // associée à la clé "toto", $c reçoit NULL
+      </code>
+    </div>
+    <div class="sws-slide">
+      <h1>Conversions de types</h1>
+      <p><span style="color:red;">☠☢☣☹</span> :
+les conversions se
+      font <em style="color:red;">implicitement</em>, en fonction du
+      contexte.
+      </p>
+      <table class="desc">
+        <tr> <td style="width:5em;">Booléen</td> <td>0, 0.0, "", "0", <tt>NULL</tt>, et le tableau
+        vide sont convertis en <tt>FALSE</tt>, le reste
+        en <tt>TRUE</tt> (en particulier "00" vaut <tt>TRUE</tt>
+        ☹)</td> </tr>
+        <tr><td>Entier</td><td> <tt>FALSE</tt> ⇝ 0, <tt>TRUE</tt> ⇝ 1,
+        les flottants sont arrondis par partie entière (1.23242 ⇝
+        1). Les chaînes <em style="color:red">dont un préfixe</em>
+        est un entier sont converties en cet entier, sinon en 0 ("123
+        bonjour" ⇝ 123) </td>
+        </tr>
+        <tr><td>Chaîne</td> <td> La chaîne contient la représentation
+        de la valeur (<tt> 1 . "ABC" </tt>
+        ⇝ <tt>"1ABC"</tt>). <tt>FALSE</tt> et <tt>NULL</tt> sont
+        convertis en <tt>""</tt>, <tt>TRUE</tt> converti en <tt>"1"</tt></td></tr>
+      </table>
+      <p> La réponse à la devinette : 013 + "013 c'est 11 en octal" : </p>
+      <ul style="background:white;">
+        <li> 013  ⇝ notation octale pour l'entier décimal 11 </li>
+        <li> "013 c'est 11 en octal" chaîne de caractères utilisées
+        dans une addition (contexte entier), le préfixe "013" est
+        transformé en <span style="color:red">décimal</span> 13</li>
+        <li> 11 + 13  ⇝ 24 (ça au moins ça a du sens)</li>
+      </ul>
+      
+    </div>
+    <div class="sws-slide">
+      <h1>Comparaisons</h1>
+      <p>Opérateurs de comparaisons</p>
+      <table class="simple">
+        <tr><td style="width:2em;"><em>Opérateur</em></td> <td style="width:13em;"><em>Description</em></td></tr>
+        <tr><td><tt> $a == $b </tt></td> <td >Égal, après conversion
+        de type     </td></tr>
+        <tr><td><tt> $a != $b </tt></td> <td>Différent, après conversion
+        de type
+        </td></tr>
+        <tr><td><tt> $a === $b </tt></td> <td>Égal et de même type
+        </td></tr>
+        <tr><td><tt> $a !== $b </tt></td> <td>Différent ou de type différent
+        </td></tr>
+        <tr><td><tt> $a &lt; $b </tt></td> <td>Strictement plus petit,
+        après conversion de type
+        </td></tr>
+        <tr><td><tt> $a &gt; $b </tt></td> <td>Strictement plus grand,
+        après conversion de type
+        </td></tr>
+        <tr><td><tt> $a &lt;= $b </tt></td> <td>Plus petit,
+        après conversion de type
+        </td></tr>
+        <tr><td><tt> $a &gt;= $b </tt></td> <td>Plus grand,
+        après conversion de type
+        </td></tr>
+        </table>
+      <p>On comparera <em style="color:red;">TOUJOURS</em> des valeurs
+      de <em style="color:red;">MÊME TYPE</em></p>
+    </div>
+    <div class="sws-slide">
+      <h1>Affichage</h1>
+      <p>On utilise l'instruction <tt><em>echo</em></tt> pour écrire
+        du texte dans la page HTML résultante : </p>
+      <table class="simple" border="1" style="margin-left:10vh; border-collapse:collapse;border-spacing: 2pt 2pt" >
+        <tr style="boder-width:0pt 0pt 3pt 0pt;
+                   border-color: gray;
+                   border-style: solid " >
+          <td  style="width: 10em;"><em>Code PHP</em></td>
+          <td  style="width: 7em;" ><em>Code HTML</em></td>
+          <td><em>Affichage dans le navigateur</em></td>
+        </tr>
+        <tr>
+          <td><tt>echo "Hello";<br/>
+              echo "World";</tt></td>
+          <td> HelloWorld</td>
+          <td>HelloWorld</td></tr>
+        <tr>
+        <td><tt>echo "Hello\n";<br/>
+            echo "World";</tt></td>
+        <td> Hello<br/>World</td>
+        <td>Hello World</td></tr>
+        <tr><td><tt>echo "Hello&lt;br/&gt;";<br/>
+            echo "World";</tt></td>
+        <td> Hello<tt>&lt;br/&gt;</tt>World</td>
+        <td>Hello<br/>World</td></tr>
+      </table>
+    </div>
+    <h1>Structures de contrôle</h1>
+    <div class="sws-slide">
+      <h1>Conditionnelle: <tt>if else</tt></h1>
+      <code>
+        <em>if (</em> c <em>) {</em>
+               // cas then
+        <em> } else { </em>
+              // cas else
+        <em>};</em>
+      </code>
+      <p>Les <em>parenthèses</em> autour de la condition <tt>c</tt> sont
+          obligatoires. La branche <tt><em>else { … }</em></tt> est
+          optionnelle. Les accolades sont optionnelles pour les blocs
+          d'une seule instruction</p>
+      </div>
+      <div class="sws-slide">
+        <h1>Boucles</h1>
+        <div class="sws-pause">
+          <code>     <em>while (</em> c <em>)  {</em>
+        //corps de la boucle while
+     <em>};</em></code>
+        </div>
+       <div class="sws-pause">
+          <code>
+     <em>do  {</em>
+        //corps de la boucle do
+     <em>} while (</em> c <em>);</em></code>
+        </div>
+
+       <div class="sws-pause">
+          <code>
+     <em>for(init ; test ; incr)  {</em>
+        //corps de la boucle for
+     <em>};</em></code>
+        </div>
+       <div class="sws-pause">
+          <code>
+     <em>foreach($tab as $key => $val)  {</em>
+        //corps de la boucle foreach
+        //$tab est un tableau, $key une clé et $val la valeur associée
+     <em>};</em></code>
+        </div>
+       <p style="background:white;">Remarque: <tt>ksort</tt> et <tt>krsort</tt> influencent
+       l'ordre de parcours par une boucle <tt>foreach</tt></p>
+      </div>
+      <div class="sws-slide">
+        <h1><tt>break</tt> et <tt>continue</tt></h1>
+        <table class="desc">
+          <tr><td><tt>break</tt></td>
+            <td>sort de la boucle
+          immédiatement</td> </tr>
+          <tr> <td><tt>continue</tt></td> <td>reprend à l'itération
+          suivante</td>
+          </tr>
+        </table>
+        <code>
+          for($i = 0; $i &lt; 10; $i = $i + 1){
+              if ($i == 2 || $i == 4) continue;
+              if ($i == 7) break;
+              echo $i . ' ';
+          }
+          </code>
+        <p>Affiche 0 1 3 5 6</p>
+      </div>
+      <h1>Passage de paramètres depuis une page</h1>
+      <div class="sws-slide">
+        <h1>Formulaire HTML (version simple)</h1>
+        <p>L'élément <tt><em>&lt;form&gt;</em></tt> permet de créer des formulaires HTML. Un
+formulaire est constitué d'un ensemble de widgets (zones de saisies
+de textes, boutons, listes déroulantes, cases à cocher, ... ) et d'un
+bouton submit. Lorsque l'utilisateur appuie sur le bouton, les
+données du formulaires sont envoyées au serveur. Exemple, fichier
+<tt>age.html</tt> :</p>
+<code><![CDATA[
+    <html>
+      <body>
+        <form method="get" action="calcul.php">
+          Entrez votre année de naissance: <input type="text" name="val_age"/>
+          <input type="submit" />
+        </form>
+      </body>
+    </html>
+    ]]></code>
+</div>
+<div class="sws-slide">
+  <h1>Paramètres</h1>
+  <p>
+    Les paramètres envoyés au serveur web par la méthode <tt>get</tt>, sont
+    accessibles en PHP dans la variable globale <tt><em>$_GET</em></tt>. C'est un tableau
+    qui associe au nom d'un input sa valeur.
+    Exemple : <tt>calcul.php</tt></p>
+<code><![CDATA[
+      <html>
+        <body>
+          <?php
+           echo "Vous êtes né il y a ";
+           echo "<b>";
+           echo date("Y") - ]]><em>$_GET["val_age"]</em><![CDATA[;
+           echo "</b> ans";
+           echo "<br/>";
+           ?>
+          </body>
+     </html>
+      ]]></code>
+</div>
+  </body>
+
+</html>