Listing du fichier sen_tps_cor.php
00001 <?php
00002 # # (gH) -_- sen_tps_cor.php ; TimeStamp (unix) : 19 Septembre 2016 vers 11:36
00003 include("../std.php") ;
00004 debutPage("L3SEN TP CORRIGES","strict") ;
00005 debutSection() ;
00006 h1("CORRIGES DES TPS INFORMATIQUE WEB ") ;
00007 h1("pour la licence DSCS") ;
00008 h1("(Diffusion du savoir et Culture scientifique)") ;
00009
00010
00011 p("grouge droite") ;
00012 echo "gilles.hunault@univ-angers.fr" ;
00013 finp() ;
00014
00015 #########################################################
00016
00017 function tpDscs($num,$nom="") {
00018 h2("Corrigé du ".aname("TP DSCS","tp$num")." numéro $num ".ancre("sen_tps.php#tp$num","(énoncé)").$nom) ;
00019 } # fin de fonction tpDscs
00020
00021 #########################################################
00022 #########################################################
00023
00024 $nomTp = array() ;
00025 $nomTp[1] = " Pages Web ".em(ghvert("locales")) ;
00026 $nomTp[2] = " Pages Web sur ".em(ghRouge("forge/janus"))." et tableaux " ;
00027 $nomTp[3] = " Tableaux, listes et CSS " ;
00028 $nomTp[4] = " CCS, formulaires et Javascript" ;
00029 $nomTp[5] = " Javascript" ;
00030 $nomTp[6] = " Php " ;
00031 $nomTp[7] = " Php et Mysql " ;
00032
00033 h2("Table des matières") ;
00034 $nb_tp = 7 ;
00035 blockquote() ;
00036 for ($itp=1;$itp<=$nb_tp;$itp++) {
00037 echo h3(ancre("#tp$itp","Corrigé du TP numéro $itp").$nomTp[$itp]) ;
00038 } ; # fin pour
00039 finblockquote() ;
00040
00041 $jtp = 0 ;
00042
00043 #########################################################
00044
00045 $jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP1
00046
00047 #########################################################
00048
00049 ol() ;
00050
00051 debutli() ; # 1
00052 p("texte") ;
00053 echo " Sous Windows, les navigateurs Web disponibles sont Internet Explorer, Firefox, Opera, Safari, Chrome...";
00054 echo " Sous Linux, il y a les mêmes sauf Internet Explorer et Safari. La notion de \"meilleur\" n'existe que par ";
00055 echo " rapport à des critères. Au début des années 2010, on pouvait dire que Internet Explorer dominait le marché à plus de 80 %, que Firefox était plus configurable, qu'Opera " ;
00056 echo " était plus conforme aux spécifications du W3C... Aujourd'hui (2016), avec l'arrivée des tablettes, des smartphones, les choses sont plus compliquées " ;
00057 echo " ou, en tous cas, moins nettes en ce qui concerne les navigateurs." ;
00058 # echo " Dans nos salles sous Linux, Firefox 2 et Firefox 3 sont tous les deux disponibles." ;
00059 finp() ;
00060 p("texte") ;
00061 echo "On utilisera désormais Firefox mais il sera bon de vérifier dans une autre salle ou chez soi que les pages s'affichent " ;
00062 echo " correctement avec Internet Explorer." ;
00063 finp() ;
00064 finli() ;
00065
00066 debutli() ; # 2
00067 p("texte") ;
00068 echo "Oui, le texte s'affiche avec tous les navigateurs et à peu près de la même façon : BONJOUR est écrit sur une ligne en dessous en plus gros et en plus gras que ESSAI." ;
00069 echo " Cela tient au fait qu'on demande un titre de niveau 1 via l'élément ".ghVert("h1").". " ;
00070 echo " Le fichier n'est pas \"bien formé\" : il faut toujour fermer une balise ouvrante et il manque donc au moins ".ghVert("</h1>").".";
00071 echo " Pour qu'il soit valide, il faudrait indiquer par rapport à quelle grammaire (DOCTYPE) et rajouter les éléments ".b("html, head, title, body")." " ;
00072 finp() ;
00073
00074 p("texte") ;
00075 echo "La validation du W3C se fait à l'adresse ".ancre("http://validator.w3.org/")." (utiliser ".em("File Upload")."." ;
00076 finp() ;
00077
00078 p("texte") ;
00079 echo " Voici un tel fichier valide XHTML strict avec le lien qui le prouve : ".ancre("sen_bonjour.htm")." ; on notera l'adresse du validateur et son paramètre." ;
00080 echo " Le squelette ".b("sq.htm")." est ".ancre("sq.htm","ici")."." ;
00081 finp() ;
00082 finli() ;
00083
00084 debutli() ; # 3
00085 p("texte") ;
00086 echo " On peut utiliser des paragraphes différents, des titres consécutifs, un retour à la ligne, un tableau. " ;
00087 echo " Et aussi un texte préformaté (avec des retours charriot) via l'élément ".b("pre").", des divisions." ;
00088 echo " Le fichier ".ancre("sen_lignes.htm")." présente toutes ces solutions. Le tableau est sans doute ici un peu \"lourd\" juste pour avoir " ;
00089 echo " une séparation dans le sens des lignes. Par contre, au niveau du \"code-source\" cela n'a aucune importance que les balises soient " ;
00090 echo " ou pas sur des lignes différentes. N'oubliez pas de lire le code-source de la solution !" ;
00091 finp() ;
00092 finli() ;
00093
00094 debutli() ; # 4
00095 p("texte") ;
00096 echo "Si en 2020, la grammaire conseillée pour le développement Web général (écran, tablette, téléphone) est ".b("HTML 5") ;
00097 echo " le mieux pour nous, c'est-à-dire pour classe, est d'utiliser la grammaire ".b("XHTML 1.0 Strict")." car ".em("plus «rigoureuse»").". " ;
00098 finp() ;
00099 p("texte") ;
00100 echo "A propos des styles, le mieux est de procéder ainsi : " ;
00101 finp() ;
00102
00103 ul() ;
00104 debutli() ;
00105 echo "s'il s'agit juste de tester \"un bout de code\", ne pas s'embarasser de grammaire et écrire le style local en ligne à la volée," ;
00106 finli() ;
00107 debutli() ;
00108 echo "après avoir testé le style en ligne, le mettre en style interne en début de fichier avec une grammaire transitionnelle," ;
00109 finli() ;
00110 debutli() ;
00111 echo "pour un site \"propre\", tout externaliser et mettre une grammaire stricte." ;
00112 finli() ;
00113 finul() ;
00114
00115 finli() ;
00116
00117 debutli() ;
00118 p("texte") ;
00119 echo em("No, but it helps !").". En d'autres termes et en français, ce serait mieux de savoir parler (et surtout lire) " ;
00120 echo " l'anglais (ou plus exactement l'américain) parce que toutes les spécifications et documentations sont ".b("au départ")." en anglais. " ;
00121 echo " Bien ou mal (on ne discutera pas ici de la ".em("quasi-".href('http://fr.wikipedia.org/wiki/H%C3%A9g%C3%A9monie',"hégémonie")) ;
00122 echo " américano-capitaliste), c'est un fait et il faut s'y adapter pour au moins quelques années." ;
00123 finp() ;
00124 finli() ;
00125
00126 debutli() ;
00127 p("texte") ;
00128 echo " Suivant la grammaire (transitionnelle ou stricte), c'est plus ou moins facile. L'énoncé parle d'une enveloppe A4." ;
00129 echo " Il faut donc certainement écrire gros et avec un grand interligne, sans alinéa. " ;
00130 finp() ;
00131 p("texte") ;
00132 echo " En transitionnel, on peut utiliser " ;
00133 echo " l'attribut ".ghBleu('align')." de l'élément ".ghBleu("p").", " ;
00134 echo " l'attribut ".ghBleu("size")." de l'élément ".ghBleu("font")." pour la taille. " ;
00135 echo " On peut définir la couleur avec l'attribut ".ghBleu("color")." de l'élément ".ghBleu("font")." " ;
00136 echo " et gérer l'interligne par un style \"à la volée\" via l'attribut ".ghBleu("style")." de l'élément ".ghBleu("p")." " ;
00137 echo " (propriété ".em("line-height").", valeur ".em("100pt")." par exemple)." ;
00138 echo " Pour le gras, aucune difficulté, il existe un élément ".ghBleu("b").". " ;
00139 echo " Voir ".ancre("sen_adr1.htm")."." ;
00140 finp() ;
00141 p("texte") ;
00142 echo " En strict, il faut impérativement tout mettre dans un style externe. On peut regrouper ou pas les propriétés " ;
00143 echo " ".ghBleu("line-height font-size text-align color")." " ;
00144 echo " selon que l'on doive faire souvent ou pas des enveloppes." ;
00145 echo " Voir ".ancre("sen_adr2.htm")." qui contient (où ?) une validation XHTML et " ;
00146 echo ancre("sen_adr3.htm")." qui contient (où ?) une validation CSS. " ;
00147 finp() ;
00148 finli() ;
00149
00150 debutli() ;
00151 p("texte") ;
00152 echo " Une liste ordonnée se fait avec l'élément ".b("ol"). " et les items de liste sont définis par les éléments ".b("li").". Pour une liste " ;
00153 echo " non ordonnée, on utilise l'élément ".b("ul")." au lieu de ".b("ol").", avec les mêmes ".b("li").". Pour une liste à définitions, " ;
00154 echo " l'élément ".b("dl")." comporte pour chaque terme un élément ".b("dt")." (terme) et un élément ".b("dd")." (définition). Vérification ";
00155 echo " avec le fichier ".ancre("sen_courses.php","sen_courses")."." ;
00156 finp() ;
00157 p("texte") ;
00158 echo " L'URL de la recherche du mot oeuf avec Google est ".b("http://www.google.fr/search?q=oeuf")." ; on la met comme lien hypertexte via " ;
00159 echo " l'élément ".b("a").", attribut ".b("href").". Pour pain, l'URL est ".b("http://www.google.fr/search?q=pain").", etc. " ;
00160 echo " Pour mettre une image, on utilise l'élément ".b("img").", attributs ".b("src")." et ".b("alt").". Voir le même " ;
00161 echo " fichier ".ancre("sen_courses.php#enbas","sen_courses")." (en bas de page)." ;
00162 finp() ;
00163 p("texte") ;
00164 echo " Pour un tableau, l'élément conteneur est ".b("table")." ; les lignes sont définies par les éléments ".b("tr")." et chaque cellule " ;
00165 echo " est obtenue via l'élément ".b("td").". La bordure se met avec l'attribut ".b("border")." au niveau de l'élément ".b("table").". " ;
00166 echo " On peut jouer sur l'épaisseur, la couleur et la forme de la bordure. Pour un lien en bas de page, il faut ajouter le symbole ".b("#")." " ;
00167 echo " avec le nom de la section. On définition la section avec l'attribut ".b("name")." dans une ancre (élément ".b("a")."). " ;
00168 echo " Vérification ".ancre("sen_courses.php#enbas","ici")."." ;
00169 finp() ;
00170 finli() ;
00171
00172 finol() ;
00173
00174 #########################################################
00175
00176 $jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP2
00177
00178 #########################################################
00179
00180 ol() ;
00181
00182 debutli() ;
00183 p("texte") ;
00184 echo "Une fois le PC allumé sous Linux (local), on peut écrire des pages Web, mais elles ne seront pas sur le site. On se sert " ;
00185 echo " de la machine Linux pour aller sur une autre machine (forge/janus) qui contient nos fichiers. " ;
00186 finp() ;
00187
00188 p("texte") ;
00189 echo "Pour savoir quelles URLs sont associées à vos pages Web, consulter la page ".ancre("serveurs.php","serveurs")."." ;
00190 echo "La ".ancre("http://forge.info.univ-angers.fr/wiki/faq:web","documentation")." du Département Info de l'UFR donne aussi des informations sur les accents, les droits... " ;
00191 finp() ;
00192 finli() ;
00193
00194 debutli() ;
00195 p("texte") ;
00196 echo " Bien sur que oui, qu'on peut ! Il faut utiliser un logiciel de transfert de fichier sécurisée (SFTP en anglais) " ;
00197 echo " comme ".ancre("http://winscp.net/eng/docs/lang:fr","WinScp")." ou " ;
00198 echo href("https://filezilla-project.org/index.php","FileZilla").". " ;
00199 echo " On peut même se connecter sur la machine Unix forge/janus via ".ancre("http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html","putty")."." ;
00200 finp() ;
00201
00202 p("texte") ;
00203 echo " Pour tout ce qui suit, on utilisera donc la méthode suivante : on écrit en local les pages Web " ;
00204 echo " avec des liens ".b("relatifs")." et ensuite on les transfère sur le compte Unix " ;
00205 echo " même si on chez soi, à la maison." ;
00206 finp() ;
00207
00208 p("texte") ;
00209 echo " Pour Windows, les éditeurs que nous conseillons sont " ;
00210 echo href('http://notepad-plus.sourceforge.net/fr/site.htm',"notepad++") ;
00211 echo " et " ;
00212 echo href("https://www.geany.org/","Geany").". " ;
00213 echo " Les navigateur ".b("Firefox, Chrome ")." et ".b("Opera")." sont sans doute des bons choix." ;
00214 finp() ;
00215
00216 finli() ;
00217
00218 debutli() ;
00219 p("texte") ;
00220 echo "Une division est plus souple mais plus difficile à gérer qu'une cellule de tableau." ;
00221 # echo "Voir le code-source de ".ancre("sen_courses2.php")."." ;
00222 finp() ;
00223 finli() ;
00224
00225 finol() ;
00226
00227 #########################################################
00228
00229 $jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP3
00230
00231 #########################################################
00232
00233 ol() ;
00234 /*
00235 debutli() ;
00236 p("texte") ;
00237 echo " ".em(ghVert("Rappel"))." : pour transférer les fichiers, on utilise ".ancre("http://winscp.net/eng/docs/lang:fr","WinScp")."." ;
00238 finp() ;
00239 finli() ;
00240 */
00241
00242 debutli() ;
00243 p("texte") ;
00244 echo "Voir le code-source de ".ancre("sen_botablo.htm")." et ".ancre("sen_botablo2.htm")." ; les ".b("bgcolor")." " ;
00245 echo " indiqués pour ".b("table").", ".b("td")." et ".b("p")." mettent respectivement une couleur de fond pour : " ;
00246 echo " tout le tableau, toute la case (cellule), la zone du paragraphe à l'intérieur de la case." ;
00247 finp() ;
00248 finli() ;
00249
00250 debutli() ;
00251 p("cadrej") ;
00252 echo "La réponse est dans la propriété CSS nommée ".b("text-decoration").". Dans le paragraphe que vous êtes en train de lire, " ;
00253 echo " le texte est justifié à droite et à gauche, comme le demande l'énoncé, le fond du paragraphe est gris, et un lien comme " ;
00254 echo " le mot ".href('http://www.google.fr',"Google","nou grouge")." est en rouge, sans souligné alors que c'est un lien." ;
00255 echo " On consultera le code-source de ce paragraphe et le fichier de style ".ancre("std.css")." pour essayer de comprendre ce " ;
00256 echo " que signifie".b("<p class='cadrej'>...")." et".b("<a class='nou grouge' href=...")." " ;
00257 finp() ;
00258 finli() ;
00259
00260 debutli() ;
00261 p("texte") ;
00262 echo "Voir le code-source de ".ancre("sen_jules.php").". Pour le retrait on peut utiliser l'élément ".b("blockquote")." " ;
00263 echo " ou simplement ajouter autour du paragraphe un élément ".b("div")." avec la bonne marge gauche. Cela ne vaut pas le " ;
00264 echo " coup de faire un feuille de style pour un fichier. En général, on fait une feuille pour un ensemble de pages, quitte " ;
00265 echo " à \"bloquer\" tous les styles qu'on utilise dans un seul fichier ".b("CSS")." selon l'adage de \"mon premier sac à main de " ;
00266 echo " quand que j'avais 14 ans \" (".em("ça peut toujours servir...").")." ;
00267 echo " Le style ".b("jc")." défini dans la feuille ne peut pas convenir pour autre chose que le titre car il comprend en plus de la couleur " ;
00268 echo " la modification de la taille des caractères. Il aurait plus judicieux de définir ".b("jc")." pour la couleur et ".b("gros"). " " ;
00269 echo " pour la taille, de façon à utiliser ".b("class ='jc'")." dans le paragraphe et ".b("class ='gros jc'")." dans le titre." ;
00270 finp() ;
00271 p("texte") ;
00272 echo "Pour la version grammaire ".em("stricte").", voir ".ancre("sen_jules2.php")." ; le code-source contient des commentaires..." ;
00273 finp() ;
00274 finli() ;
00275
00276 debutli() ;
00277 p("texte") ;
00278 echo "Voir le code-source de ".ancre("sen_stdcss.php")."." ;
00279 finp() ;
00280 finli() ;
00281
00282 finol() ;
00283
00284 #########################################################
00285
00286 $jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP4
00287
00288 #########################################################
00289
00290 ol() ;
00291
00292 debutli() ;
00293 p("texte") ;
00294 echo "Voir ".ancre("sen_ts1.htm")." et ".ancre("sen_ts2.htm")." comme résultats ; la seule différence dans le " ;
00295 echo " code-source est au niveau de l'élément ".b("link")."." ;
00296 finp() ;
00297 finli() ;
00298
00299 debutli() ;
00300 p("texte") ;
00301 echo "Voir le code-source de ".ancre("sen_comme_google.php")." ; dans le formulaire original, il y a plein de choses, dont " ;
00302 echo " le choix de la langue, les boutons utilisés..." ;
00303 finp() ;
00304 finli() ;
00305
00306 debutli() ;
00307 p("texte") ;
00308 echo "Avec l'URI ".b(href('http://forge.info.univ-angers.fr/~gh/internet/ndjpm.php',"http://forge.info.univ-angers.fr/~gh/internet/ndjpm.php"))."," ;
00309 echo " on peut obtenir le nombre de jours par mois, dont les initiales sont justement NJPM." ;
00310 echo " On pourra vérifier que toute valeur autre que les nombres entiers 1, 2, 3... 12 provoque l'affichage d'un " ;
00311 echo " texte d'aide. Idem si on ne passe aucun paramètre (les paramètres sont après le symbole point d'interrogation)." ;
00312 echo " On peut 'coincer' le programme en écrivant m=01 car ce n'est pas prévu (0 est prévu, 1 est prévu, mais pas 01)." ;
00313 finp() ;
00314 finli() ;
00315
00316 debutli() ;
00317 p("texte") ;
00318 echo "Fastoche. Voir ".ancre("sen_cal1.php") ;
00319 finp() ;
00320
00321 p("texte") ;
00322 echo " L'attribut ".b("type")." de l'élément ".b("ol")." permet de choisir la numérotation. " ;
00323 echo " La valeur ".b("i")." demande l'écriture en chiffres romains, soit ".b("MCMLVII")." pour 1957. " ;
00324 echo " La valeur ".b("A")." demande l'écriture en mode «colonne Excel»." ;
00325 echo " L'attribut ".b("start")." de l'élément ".b("ol")." indique à partir de quelle valeur démarrer." ;
00326 echo " Malheureusement, ces attributs sont interdits en XHTML 1.0 strict et nous verrons dans les TP suivants " ;
00327 echo " comment utiliser Javascript pour résoudre ce problème." ;
00328 finp() ;
00329
00330 p("texte") ;
00331 echo " Il faut décomposer ".b("1957")." en base 26 pour savoir comment cela s'écrit en notation A (comme Excel). " ;
00332 echo " Puisque 1957 = 75×26 + 7, et comme 75=2×26 + 23, on peut écrire 1957 = ( (2×26+23) × 26 + 7, soit au final " ;
00333 echo " 1957 = 2×26".sup("2")." + 23×26 + 7. A l'aide la table suivante " ;
00334 finp() ;
00335 pre_fichier("../lettres.txt","cadre") ;
00336 p("texte") ;
00337 echo " on en déduit que 1957 s'écrit ".b("BWG")." en notation A. " ;
00338 finp() ;
00339
00340 p("texte") ;
00341 echo " De même, 2020 correspond (sans explication) à 2×26".sup("2")." + 25×26 + 18 donc c'est ".b("BYR").". " ;
00342 finp() ;
00343
00344 finli() ;
00345
00346 debutli() ;
00347 p("texte") ;
00348 echo "Re-fastoche. Voir ".ancre("sen_cal2.php") ;
00349 finp() ;
00350 finli() ;
00351
00352 debutli() ;
00353 p("texte") ;
00354 echo "Pour bien utiliser par formulaire " ;
00355 echo " l'URL ".href("http://forge.info.univ-angers.fr/~gh/internet/longlarg.php") ;
00356 echo " il faut que les champs soient nommés ".b("long")." et ".b("larg")." ; " ;
00357 echo " on pourra consulter le code-source de ".ancre("long_large1.php")." pour voir le texte du formulaire correspondant. " ;
00358 finp() ;
00359 finli() ;
00360
00361 debutli() ;
00362 p("texte") ;
00363 echo "Il suffit de demander à Javascript de rajouter l'attribut ".b("start")." à l'élement ".b("ol")." à la fin du " ;
00364 echo " chargement de la page, comme on peut le voir avec la page " ;
00365 echo href("http://forge.info.univ-angers.fr/~gh/internet/olstart2.php","olstart2")." et, en plus général, avec " ;
00366 echo href("http://forge.info.univ-angers.fr/~gh/internet/olstart3.php","olstart3")."." ;
00367 finp() ;
00368 finli() ;
00369
00370 debutli() ;
00371 p("texte") ;
00372 echo "Consulter le code-source de ".ancre("sen_nombres.php")." et de ".ancre("sen_nombres2.php")." (version stricte). " ;
00373 #echo " L'url ".b("javascript:")." -- avec Firefox uniquement -- permet de voir une partie des erreurs que Javascript détecte." ;
00374 echo " Pour les décimales, il faut convertir le texte en nombre réel avec ".b("parseFloat()")." puis utiliser " ;
00375 echo " la fonction ".b("toFixed()")." pour choisir le nombre de décimales." ;
00376 echo " Pour que l'action (qui est ".b("obligatoire").") ne s'exécute pas, il faut terminer le code javascript par ".b("return false ;").". " ;
00377 finp() ;
00378
00379 p("texte") ;
00380 echo " On n'est pas obligé(e) d'utiliser un formulaire. On peut utiliser une division et l'attribut onclick du bouton submit, comme le montre " ;
00381 echo " le fichier ".ancre("sen_nombres3.php").". " ;
00382 echo " Si on veut faire quelque chose de \"propre\", il faut externaliser le code Javascript, comme dans " ;
00383 echo " le fichier ".ancre("sen_nombres4.php").". " ;
00384 finp() ;
00385
00386 finli() ;
00387
00388 finol() ;
00389
00390 #########################################################
00391
00392 $jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP5
00393
00394 #########################################################
00395
00396 ol() ;
00397
00398 debutli() ;
00399 p("texte") ;
00400 echo "Pour bien utiliser par formulaire " ;
00401 echo " l'URL ".href("http://forge.info.univ-angers.fr/~gh/internet/longlarg.php") ;
00402 echo " il faut que les champs soient nommés ".b("long")." et ".b("larg")." ; " ;
00403 echo " on pourra consulter le code-source de ".ancre("long_large1.php")." pour voir le texte du formulaire correspondant. " ;
00404 finp() ;
00405 p("texte") ;
00406 echo " Pour la deuxième partie de l'exercice, il faut commencer par mettre ".b("onsubmit='return false'") ;
00407 echo " comme attribut de l'élément form pour ne plus utiliser l'URL." ;
00408 echo " Ensuite, il suffit de mettre avant ce ".b("return false").", le texte Javascript pour la mise à jour des champs ".em("perim")." et ".em("aire")."." ;
00409 echo " Consulter ".ancre("long_large2.php")." pour voir le code-source associé." ;
00410 finp() ;
00411 p("texte") ;
00412 echo b("Attention : ")." il est ".s_span("obligatoire","grouge")." de mettre ".b("parseInt(...)")." autour de chaque valeur " ;
00413 echo " pour calculer la somme des dimensions dans le calcul du périmètre car sinon Javascript va se contenter de la concaténation " ;
00414 echo " des valeurs textes. En d'autres termes, sans parseInt, avec 10 comme longueur et 2 comme largeur, Javascript va interpréter " ;
00415 echo '"10" + "2" comme "102" au lieu de 10 + 2, soit 12...' ;
00416 finp() ;
00417 p("texte") ;
00418 echo " Troisième partie de l'exercice : il faut commencer par ajouter un élément div pour la partie résultats, avec un style qui cache les résultats " ;
00419 echo " et un id pour pouvoir y accéder ensuite. " ;
00420 echo " Au niveau du code Javascript, il suffit juste d'ajouter l'instruction qui change le style de la division pour voir le résultat. " ;
00421 echo " Consulter ".ancre("long_large3.php")." pour voir le code-source associé." ;
00422 finp() ;
00423 p("texte") ;
00424 echo "Une solution plus «propre» consiste à mettre toutes les instructions Javascript dans un autre fichier (on parle alors " ;
00425 echo " d'".b("externalisation du code Javascript").") à l'intérieur d'une fonction. Dans la page Web, il faut donc alors charger la fonction " ;
00426 echo " dans l'élément head et l'appeler dans la partie onsubmit." ;
00427 echo " Consulter ".ancre("long_large4.php")." pour voir le code-source correspondant et" ;
00428 echo " son fichier Javascript nommé ".ancre("montresource.php?nomfic=long_large4.js","long_large4.js")."." ;
00429 echo " Une version sans \"".b("alert")."\" est ".ancre("long_large5.php","ici")." et le code Javascript associé est " ;
00430 echo ancre("montresource.php?nomfic=long_large5.js","là")."." ;
00431 finp() ;
00432 finli() ;
00433
00434 debutli() ;
00435 p("texte") ;
00436 echo "L'erreur est d'avoir mis l'apostrophe telle quelle ce qui ferme trop tot " ;
00437 echo "l'instruction write. Pour afficher une \"quote\", il faut mettre \ devant l'apostrophe." ;
00438 echo "Le texte correct est donc : " ;
00439 finp() ;
00440
00441 pre() ;
00442 echo " window.document.write(' Qui le dit ? C\'est moi ! ') ;\n " ;
00443 echo " **** \n " ;
00444 finpre() ;
00445
00446 p("texte") ;
00447 echo "A l'affichage, l'instruction write incorrecte est simplement ignorée : il est difficile " ;
00448 echo " de se rendre compte qu'il manque quelquechose. Il est donc conseillé d'utiliser ".kbd("la console d'erreurs de javascript") ;
00449 echo " avec Firefox pour tester les scripts écrits en Javascript (lorsque cela fonctionne). \n" ;
00450 echo " Une solution \"propre\" consiste à utiliser ".b("Firebug")." avec Firefox dont une version ".em("\"lite\"")." existe " ;
00451 echo " même pour Internet Explorer. Pour Opera, on utilisera ".b("Dragonfly")."." ;
00452 finp() ;
00453
00454 p("texte") ;
00455 echo "Voici ce qu'affichent les consoles d'erreur d'Opera et de Firefox quand on charge la page (images cliquables) : " ;
00456 finp() ;
00457
00458 div("centre") ;
00459 table(0,50) ;
00460 tr() ;
00461 td() ;
00462 echo href("console_opera.png",img("console_opera.png","console_opera",500)) ;
00463 fintd() ;
00464 fintr() ;
00465 tr() ;
00466 td() ;
00467 echo href("console_firefox.png",img("console_firefox.png","console_firefox",500)) ;
00468 fintd() ;
00469 fintr() ;
00470 fintable() ;
00471 findiv() ;
00472
00473 p("texte") ;
00474 echo "Cela ne joue pas sur la validation qui se fait sur le code HTML au chargement (donc avant exécution du Javascript)." ;
00475 echo " Si on corrige l'erreur, la page correcte est ".href("chance.htm","ici").". " ;
00476 finp() ;
00477
00478 p("texte") ;
00479 echo "Avec une version récente de Firefox, pour avoir la console d'erreurs, il faut activer " ;
00480 echo b("la barre de menus") ;
00481 echo " puis utiliser le menu " ;
00482 echo b("Outils").", " ;
00483 echo " sous-menu " ;
00484 echo b("Développement Web").", " ;
00485 echo " sous-sous-menu " ;
00486 echo b("Console web").". " ;
00487 finp() ;
00488
00489 finli() ;
00490
00491
00492 debutli() ;
00493 p("texte") ;
00494 echo "Consulter le code-source de ".ancre("sen_kilos.php").". " ;
00495 echo " Ce qui change, c'est qu'avec une grammaire stricte, on est obligé d'utiliser un fichier externe pour écrire le " ;
00496 echo " texte javascript. Pour l'exercice, c'est le fichier ".ancre("sen_kilos.js")." ; il est chargé via l'attribut ".b("src")." " ;
00497 echo " dans l'élément ".b("script")." qui est lui-même dans l'élément ".b("head")."." ;
00498 finp() ;
00499 finli() ;
00500
00501 debutli() ;
00502 p("texte") ;
00503 echo "Consulter le code-source de ".ancre("sen_deuxnombres.php")." ; l'url ".b("javascript:")." sous Firefox " ;
00504 echo " fournit une fenêtre qui affiche des messages d'erreur de Javascript, au chargement et à l'exécution." ;
00505 echo " Cela a déjà été dit, mais comme tout le monde ne l'utilise pas, je le répète ! " ;
00506 echo " Le fichier javascript utilisé est ".ancre("sen_deuxnombres.js")."." ;
00507 finp() ;
00508 finli() ;
00509
00510 debutli() ;
00511 p("texte") ;
00512 echo " Avec 3 variables distinctes deux à deux, il y a 6 cas à envisager. A partir de trois variables, il vaut mieux " ;
00513 echo " mettre les variables dans un tableau et trier le tableau avant de l'afficher." ;
00514 echo " Consulter le code-source de ".ancre("sen_ordrecroissant.php") ;
00515 echo " et le texte de son script ".ancre("sen_ordrecroissant.js")."." ;
00516 finp() ;
00517 finli() ;
00518
00519 debutli() ;
00520 p("texte") ;
00521 echo "Consulter le code-source de ".ancre("sen_eux_et_nous.php")." et son fichier de script ".ancre("sen_eux_et_nous.js")."." ;
00522 echo " Le corrigé fournit une solution avec un tableau, puis avec des divisions sans CSS et enfin avec des divisions " ;
00523 echo " en CSS ; le script fonctionne avec IE et FF comme indiqué en commentaires." ;
00524 finp() ;
00525 finli() ;
00526
00527 debutli() ;
00528 p("texte") ;
00529 echo " L'horloge numérique c'est pratiquement la même chose que les panneaux de score de l'exercice précédent. " ;
00530 echo " Le seul changement c'est qu'il faut fonctionner en \"modulo\" 24 et 60 comme disent les mathématicien(ne)s." ;
00531 echo "Consulter le code-source de ".ancre("sen_horloge.php")." et son fichier de script ".ancre("sen_horloge.js")."." ;
00532 finp() ;
00533 finli() ;
00534
00535 debutli() ;
00536 p("texte") ;
00537 echo "Exercice volontairement non corrigé (sert parfois de base d'examen)." ;
00538 finp() ;
00539 finli() ;
00540
00541 debutli() ;
00542 p("texte") ;
00543 echo "Exercice volontairement non corrigé : il y a plein de solutions sur Internet. Un exercice " ;
00544 echo " intéressant est de lire une solution et de la commenter, voire de la critiquer." ;
00545 finp() ;
00546 finli() ;
00547
00548 debutli() ;
00549 p("texte") ;
00550 echo "Voir par exemple " ;
00551 echo href("http://yoast.com/articles/sortable-table/","sortable")." (avec un seul t) " ;
00552 echo " ou ".href("ttp://www.kryogenix.org/code/browser/sorttable/","sorttable")." (avec deux t). " ;
00553 finp() ;
00554 finli() ;
00555
00556 debutli() ;
00557 p("texte") ;
00558 echo "Consulter la page " ;
00559 echo href("chaperon.php").". Le code Javascript associé est " ;
00560 echo " ci-dessous." ;
00561 finp() ;
00562 pre_fichier("chaperon.js","cadrejaune") ;
00563 finli() ;
00564
00565 finol() ;
00566
00567 #########################################################
00568
00569 $jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP6
00570
00571 #########################################################
00572
00573 ol() ;
00574
00575 debutli() ;
00576
00577 p("texte") ;
00578 echo b("Rappel :") ;
00579 echo " à la faculté, il faut transférer vos fichiers depuis la machine locale sur l'hote " ;
00580 echo ghRouge("forge.info-ua") ;
00581 echo " alors que partout depuis l'extérieur (donc hors de la faculté), l'hote se nomme " ;
00582 echo ghRouge("forge.info.univ-angers.fr").". " ;
00583 echo " Pour réaliser depuis Linux une connexion en mode terminal (ligne des commandes), il faut écrire " ;
00584 echo b("ssh -X -Y ".ghVert("login")."@forge.info-ua").". " ;
00585 finp() ;
00586
00587 p("texte") ;
00588 echo "Comme on peut s'en rendre compte avec le fichier ".ancre("sen_etvoila.php")." (non valide car il s'agit d'un extrait de page) " ;
00589 echo " dont le code-source " ;
00590 echo " est ".ancre("montresource.php?nomfic=sen_etvoila.php","ici").", il y a 3 lignes de code HTML " ;
00591 echo " qui produisent le texte ".b("<h1>ET VOILA LE TRAVAIL</h1>")."." ;
00592 finp() ;
00593
00594 p("texte") ;
00595 echo "Pour le nombre de secondes écoulées depuis l'an 0, " ;
00596 echo " consulter ".ancre("montresource.php?nomfic=nbsec.php","nbsec").". " ;
00597 echo " Utiliser des années bissextiles est important car un jour compte 86400 secondes. Avec 500 jours de plus, on rajoute " ;
00598 echo " en gros 43 millions de secondes." ;
00599 finp() ;
00600
00601 p("texte") ;
00602 echo " Pour comparer ".b("n")." valeurs distinctes, il faut envisager ".b("n!")." cas p. Donc avec 2 variables, 3 cas, avec 3 variables 6 cas. " ;
00603 echo " Au lieu d'écrire un code avec des si en cascade comme dans la page " ;
00604 $url = "http://forge.info.univ-angers.fr/~gh/wstat/Programmation_R/Programmation_introduction/progie3.php?solutions=1" ;
00605 echo href($url,"conditions logiques et tests").", " ;
00606 echo " il vaut mieux passer par un tableau : " ;
00607 finp() ;
00608
00609 pre_fichier("compare-sor.txt","cadre") ;
00610
00611 finli() ;
00612
00613 debutli() ;
00614 p("texte") ;
00615 echo " Voici le ".ancre("bonjour.php","texte")." d'une page minimale et valide qui affiche " ;
00616 echo ancre("montresource.php?nomfic=bonjour.php","bonjour")." à l'aide de fonctions personnelles ; le code-source " ;
00617 echo " des fonctions utilisées est : ".ancre("montresource.php?nomfic=mesfonctions.php","mesfonctions.php")."." ;
00618 finp() ;
00619
00620 p("texte") ;
00621 echo em("Pour les expert(e)s")." : consulter ".ancre("montresource.php?nomfic=std.php","std.php") ;
00622 finp() ;
00623 finli() ;
00624
00625 debutli() ;
00626 p("texte") ;
00627 echo " Consulter le ".ancre("montresource.php?nomfic=bonjour2.php","code-source")." de " ;
00628 echo " la solution ".ancre("bonjour2.php")." et le code-source " ;
00629 echo " des fonctions utilisées : ".ancre("montresource.php?nomfic=mesfonctions2.php","mesfonctions2.php")." ;" ;
00630 echo " on pourra vérifier que le code-source des ".b("h1")." est identique." ;
00631 finp() ;
00632
00633 p("texte") ;
00634 echo "L'intérêt de ".b("tnh")." est multiple : c'est PHP qui ouvre et ferme les balises, c'est plus \"conceptuel\" et on " ;
00635 echo" ne voit plus directement les balises, c'est plus court à écrire et c'est valide. De plus toutes les fonctions ".b("h".em("i"))." " ;
00636 echo " ont le même comportement puisqu'elles sont toutes écrites par la même fonction." ;
00637 finp() ;
00638
00639 finli() ;
00640
00641 debutli() ;
00642 p("texte") ;
00643 echo " Consulter le ".ancre("montresource.php?nomfic=sen_age_rep.php","code-source")." de " ;
00644 echo " la solution ".ancre("sen_age_rep.php")." ; on n'est pas obligé(e) de recopier le formulaire pour tester le code " ;
00645 echo " car avec ".b("method='GET'")." on peut tester le fichier réponse via son URL en ajoutant " ;
00646 echo b("?age=")." avec la valeur à tester." ;
00647 finp() ;
00648 finli() ;
00649
00650 debutli() ;
00651
00652 p("texte") ;
00653 echo " Solution volontairement non corrigée sur cette page pour l'examen de décembre 2014. " ;
00654 echo " Celles et ceux qui viennent en TP auront la correction en \"live\"." ;
00655 finp() ;
00656
00657 pre_fichier("decembre2014.php","cadrebleu invisible") ;
00658
00659 p("texte") ;
00660 echo "Par contre, voici la réponse au début de la question 2, pour tester si l'utilisateur " ;
00661 echo " a bien entrée une date préférée :" ;
00662 finp() ;
00663
00664 pre_fichier("histoire.php","cadre") ;
00665
00666 p("texte") ;
00667 echo " Pour l'examen de juin 2017, voici le code XHTML :" ;
00668 finp() ;
00669
00670 pre_fichier("juin2017.html","cadrebleu") ;
00671
00672 p("texte") ;
00673 echo " Le code en PHP conceptuel est listé ci-dessous :" ;
00674 finp() ;
00675
00676 pre_fichier("juin2017.php","cadrejaune") ;
00677
00678 finli() ;
00679
00680 debutli() ;
00681 p("texte") ;
00682 echo " Consulter le ".ancre("montresource.php?nomfic=ldc.php","code-source")." de " ;
00683 echo " la solution ".ancre("ldc.php")." et le code-source " ;
00684 echo " des fonctions utilisées : ".ancre("montresource.php?nomfic=mesfonctions3.php","mesfonctions3.php")."." ;
00685 echo " Pour légumes, on utilise ".b("urlencode")." dans le lien Google et on fait un test pour utiliser le mot " ;
00686 echo b("legumes")." (donc sans accent) pour les images... " ;
00687 finp() ;
00688 finli() ;
00689
00690 debutli() ;
00691
00692 p("texte") ;
00693 echo " Consulter le ".ancre("montresource.php?nomfic=sen_hist_form.php","code-source")." du " ;
00694 echo " formulaire ".ancre("sen_hist_form.php")." et le " ;
00695 echo ancre("montresource.php?nomfic=sen_hist_rep.php","code-source")." de " ;
00696 echo " la correction des réponses ".ancre("sen_hist_rep.php")."." ;
00697 finp() ;
00698
00699 p("texte") ;
00700 echo "Pour celles et ceux qui préfèreraient une solution \"conceptuelle\", c'est-à-dire en PHP " ;
00701 echo " sans aucune balise, donc avec un code \"plus beau\" et \"plus propre\", on pourra " ;
00702 echo " consulter le ".ancre("montresource.php?nomfic=sen_hist_form_c.php","code-source")." du " ;
00703 echo " formulaire ".ancre("sen_hist_form_c.php")." et le " ;
00704 echo ancre("montresource.php?nomfic=sen_hist_rep_c.php","code-source")." de " ;
00705 echo " la correction des réponses ".ancre("sen_hist_rep_c.php")."." ;
00706 finp() ;
00707
00708 finli() ;
00709
00710 debutli() ;
00711 p("texte") ;
00712 echo "Les titres sont produits à l'aide la fonction ".b("h1()")." en PHP conceptuel." ;
00713 finp() ;
00714 finli() ;
00715
00716 debutli() ;
00717 p("texte") ;
00718 echo " La page ".ancre("sen_quests1.php")." contient juste le tirage aléatoire ; " ;
00719 echo " consulter son ".ancre("montresource.php?nomfic=sen_quests1.php","code-source")." pour voir " ;
00720 echo " comment cela fonctionne. " ;
00721 finp() ;
00722 finli() ;
00723
00724 finol() ;
00725
00726 #########################################################
00727
00728 $jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP7
00729
00730 #########################################################
00731
00732 ol() ;
00733
00734 debutli() ;
00735 p("texte") ;
00736 echo "La requête SQL qui compte le nombre d'hommes (".em("sexe=0").") est " ;
00737 finp() ;
00738
00739 p("texte") ;
00740 echo b("SELECT COUNT(*) FROM ronfle WHERE sexe=0 ;") ;
00741 finp() ;
00742
00743 p("texte") ;
00744 echo "Celle qui compte le nombre d'hommes (".em("sexe=0").") qui fument (".em("taba=1").") et ronflent (".em("ronfle=1").") est " ;
00745 finp() ;
00746
00747 p("texte") ;
00748 echo b("SELECT COUNT(*) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
00749 finp() ;
00750
00751 p("texte") ;
00752 echo "Si on sait qu'il y a 75 hommes, la requête SQL qui calcule le pourcentage d'hommes qui fument et ronflent " ;
00753 echo "par rapport au nombre d'hommes en tout est " ;
00754 finp() ;
00755
00756 p("texte") ;
00757 echo b("SELECT 100*( COUNT(*)/75 ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
00758 finp() ;
00759
00760 p("texte") ;
00761 echo "Si on a stocké dans la variable PHP nommée ".b("nhom")." le nombre d'hommes, la requête SQL qui calcule " ;
00762 echo " le pourcentage d'hommes qui fument par rapport au nombre d'hommes en tout devient pour PHP " ;
00763 finp() ;
00764
00765 p("texte") ;
00766 echo b("SELECT 100*( COUNT(*)/\$nbhom ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
00767 finp() ;
00768
00769 p("texte") ;
00770 echo "L'arrondi du pourcentage via SQL s'écrit alors " ;
00771 finp() ;
00772
00773 p("texte") ;
00774 echo b("SELECT ROUND( 100*( COUNT(*) /\$nbhom) ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
00775 finp() ;
00776
00777 p("texte") ;
00778 echo "Mais si on préfere arrondir en PHP le pourcentage mis dans la variable nommée ".b("pct")." il faut écrire " ;
00779 finp() ;
00780
00781 p("texte") ;
00782 echo b("\$pct_ar = round( \$pct , 0 ) ; ") ;
00783 finp() ;
00784
00785 p("texte") ;
00786 echo "Il est certainement préférable de laisser SQL faire tout le travail." ;
00787 finp() ;
00788
00789 p("texte") ;
00790 echo "Pour lister les 10 plus jeunes femmes qui ronflent par age croissant en SQL, il faudrait écrire " ;
00791 finp() ;
00792
00793 p("texte") ;
00794 echo b("SELECT * FROM ronfle WHERE sexe=1 AND ronfle=1 ORDER BY age LIMIT 10 ;") ;
00795 finp() ;
00796
00797 p("texte") ;
00798 echo "Le seul problème est qu'il y a 25 femmes en tout et seulement 5 qui ronflent. La partie ".b("LIMIT 10 ") ;
00799 echo " est donc inutile ici." ;
00800 finp() ;
00801
00802 p("texte") ;
00803 echo " La page ".ancre("sen_ronfle.php")." montre les différents résultats ; " ;
00804 echo " consulter le ".ancre("montresource.php?nomfic=sen_ronfle.php","code-source")." pour le " ;
00805 echo " détail de la connexion, du listage des femmes... " ;
00806 echo " On remarquera que tout le code-source est conceptuel, c'est-à-dire sans balise." ;
00807 finp() ;
00808
00809 p("texte") ;
00810 echo "Pour la production d'histogrammes, voir ".href("histo.php").". " ;
00811 finp() ;
00812
00813
00814 finli() ;
00815
00816 debutli() ;
00817 p("texte") ;
00818 echo " La page ".ancre("sen_quests1.php")." contient juste le tirage aléatoire ; " ;
00819 echo " consulter son ".ancre("montresource.php?nomfic=sen_quests1.php","code-source")." pour voir " ;
00820 echo " comment cela fonctionne. " ;
00821 finp() ;
00822
00823 p("texte") ;
00824 echo " La page ".ancre("sen_quests2.php")." contient la solution complète ; " ;
00825 echo " son ".ancre("montresource.php?nomfic=sen_quests2.php","code-source").", bien que court à lire, se " ;
00826 echo " révèle très intéressant. Les sous-programmes utilisés sont dans " ;
00827 echo ancre("montresource.php?nomfic=sen_quests3.php","sen_quests3.php")." (plus long à lire)." ;
00828 finp() ;
00829
00830 p("texte") ;
00831 echo " On remarquera que, là encore, tout le code-source est conceptuel, c'est-à-dire sans balise." ;
00832 finp() ;
00833 finli() ;
00834
00835 finol() ;
00836
00837 pvide() ;
00838
00839 p() ;
00840 echo href("montresource.php?nomfic=sen_tps_cor.php","Code-source de cette page","orange_stim nou")."." ;
00841 finp() ;
00842
00843 finSection() ;
00844 finPage() ;
00845 ?>
La coloration syntaxique est réalisée par un enrobage de la function php nommée highlight_file
mais si vous préférez, vous pouvez utiliser celle de SyntaxHighlighter ou même celle de geshi.
Pour ne pas voir les numéros de ligne, ajoutez &nl=non à la suite du nom du fichier.
Retour à la page principale de (gH)