Listing du fichier sen_tps_cor.php avec syntaxhighlighter
<?php
# # (gH) -_- sen_tps_cor.php ; TimeStamp (unix) : 19 Septembre 2016 vers 11:36
include("../std.php") ;
debutPage("L3SEN TP CORRIGES","strict") ;
debutSection() ;
h1("CORRIGES DES TPS INFORMATIQUE WEB ") ;
h1("pour la licence DSCS") ;
h1("(Diffusion du savoir et Culture scientifique)") ;
p("grouge droite") ;
echo "gilles.hunault@univ-angers.fr" ;
finp() ;
#########################################################
function tpDscs($num,$nom="") {
h2("Corrigé du ".aname("TP DSCS","tp$num")." numéro $num ".ancre("sen_tps.php#tp$num","(énoncé)").$nom) ;
} # fin de fonction tpDscs
#########################################################
#########################################################
$nomTp = array() ;
$nomTp[1] = " Pages Web ".em(ghvert("locales")) ;
$nomTp[2] = " Pages Web sur ".em(ghRouge("forge/janus"))." et tableaux " ;
$nomTp[3] = " Tableaux, listes et CSS " ;
$nomTp[4] = " CCS, formulaires et Javascript" ;
$nomTp[5] = " Javascript" ;
$nomTp[6] = " Php " ;
$nomTp[7] = " Php et Mysql " ;
h2("Table des matières") ;
$nb_tp = 7 ;
blockquote() ;
for ($itp=1;$itp<=$nb_tp;$itp++) {
echo h3(ancre("#tp$itp","Corrigé du TP numéro $itp").$nomTp[$itp]) ;
} ; # fin pour
finblockquote() ;
$jtp = 0 ;
#########################################################
$jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP1
#########################################################
ol() ;
debutli() ; # 1
p("texte") ;
echo " Sous Windows, les navigateurs Web disponibles sont Internet Explorer, Firefox, Opera, Safari, Chrome...";
echo " Sous Linux, il y a les mêmes sauf Internet Explorer et Safari. La notion de \"meilleur\" n'existe que par ";
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 " ;
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 " ;
echo " ou, en tous cas, moins nettes en ce qui concerne les navigateurs." ;
# echo " Dans nos salles sous Linux, Firefox 2 et Firefox 3 sont tous les deux disponibles." ;
finp() ;
p("texte") ;
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 " ;
echo " correctement avec Internet Explorer." ;
finp() ;
finli() ;
debutli() ; # 2
p("texte") ;
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." ;
echo " Cela tient au fait qu'on demande un titre de niveau 1 via l'élément ".ghVert("h1").". " ;
echo " Le fichier n'est pas \"bien formé\" : il faut toujour fermer une balise ouvrante et il manque donc au moins ".ghVert("</h1>").".";
echo " Pour qu'il soit valide, il faudrait indiquer par rapport à quelle grammaire (DOCTYPE) et rajouter les éléments ".b("html, head, title, body")." " ;
finp() ;
p("texte") ;
echo "La validation du W3C se fait à l'adresse ".ancre("http://validator.w3.org/")." (utiliser ".em("File Upload")."." ;
finp() ;
p("texte") ;
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." ;
echo " Le squelette ".b("sq.htm")." est ".ancre("sq.htm","ici")."." ;
finp() ;
finli() ;
debutli() ; # 3
p("texte") ;
echo " On peut utiliser des paragraphes différents, des titres consécutifs, un retour à la ligne, un tableau. " ;
echo " Et aussi un texte préformaté (avec des retours charriot) via l'élément ".b("pre").", des divisions." ;
echo " Le fichier ".ancre("sen_lignes.htm")." présente toutes ces solutions. Le tableau est sans doute ici un peu \"lourd\" juste pour avoir " ;
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 " ;
echo " ou pas sur des lignes différentes. N'oubliez pas de lire le code-source de la solution !" ;
finp() ;
finli() ;
debutli() ; # 4
p("texte") ;
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") ;
echo " le mieux pour nous, c'est-à-dire pour classe, est d'utiliser la grammaire ".b("XHTML 1.0 Strict")." car ".em("plus «rigoureuse»").". " ;
finp() ;
p("texte") ;
echo "A propos des styles, le mieux est de procéder ainsi : " ;
finp() ;
ul() ;
debutli() ;
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," ;
finli() ;
debutli() ;
echo "après avoir testé le style en ligne, le mettre en style interne en début de fichier avec une grammaire transitionnelle," ;
finli() ;
debutli() ;
echo "pour un site \"propre\", tout externaliser et mettre une grammaire stricte." ;
finli() ;
finul() ;
finli() ;
debutli() ;
p("texte") ;
echo em("No, but it helps !").". En d'autres termes et en français, ce serait mieux de savoir parler (et surtout lire) " ;
echo " l'anglais (ou plus exactement l'américain) parce que toutes les spécifications et documentations sont ".b("au départ")." en anglais. " ;
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")) ;
echo " américano-capitaliste), c'est un fait et il faut s'y adapter pour au moins quelques années." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " Suivant la grammaire (transitionnelle ou stricte), c'est plus ou moins facile. L'énoncé parle d'une enveloppe A4." ;
echo " Il faut donc certainement écrire gros et avec un grand interligne, sans alinéa. " ;
finp() ;
p("texte") ;
echo " En transitionnel, on peut utiliser " ;
echo " l'attribut ".ghBleu('align')." de l'élément ".ghBleu("p").", " ;
echo " l'attribut ".ghBleu("size")." de l'élément ".ghBleu("font")." pour la taille. " ;
echo " On peut définir la couleur avec l'attribut ".ghBleu("color")." de l'élément ".ghBleu("font")." " ;
echo " et gérer l'interligne par un style \"à la volée\" via l'attribut ".ghBleu("style")." de l'élément ".ghBleu("p")." " ;
echo " (propriété ".em("line-height").", valeur ".em("100pt")." par exemple)." ;
echo " Pour le gras, aucune difficulté, il existe un élément ".ghBleu("b").". " ;
echo " Voir ".ancre("sen_adr1.htm")."." ;
finp() ;
p("texte") ;
echo " En strict, il faut impérativement tout mettre dans un style externe. On peut regrouper ou pas les propriétés " ;
echo " ".ghBleu("line-height font-size text-align color")." " ;
echo " selon que l'on doive faire souvent ou pas des enveloppes." ;
echo " Voir ".ancre("sen_adr2.htm")." qui contient (où ?) une validation XHTML et " ;
echo ancre("sen_adr3.htm")." qui contient (où ?) une validation CSS. " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
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 " ;
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, " ;
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 ";
echo " avec le fichier ".ancre("sen_courses.php","sen_courses")."." ;
finp() ;
p("texte") ;
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 " ;
echo " l'élément ".b("a").", attribut ".b("href").". Pour pain, l'URL est ".b("http://www.google.fr/search?q=pain").", etc. " ;
echo " Pour mettre une image, on utilise l'élément ".b("img").", attributs ".b("src")." et ".b("alt").". Voir le même " ;
echo " fichier ".ancre("sen_courses.php#enbas","sen_courses")." (en bas de page)." ;
finp() ;
p("texte") ;
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 " ;
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").". " ;
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("#")." " ;
echo " avec le nom de la section. On définition la section avec l'attribut ".b("name")." dans une ancre (élément ".b("a")."). " ;
echo " Vérification ".ancre("sen_courses.php#enbas","ici")."." ;
finp() ;
finli() ;
finol() ;
#########################################################
$jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP2
#########################################################
ol() ;
debutli() ;
p("texte") ;
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 " ;
echo " de la machine Linux pour aller sur une autre machine (forge/janus) qui contient nos fichiers. " ;
finp() ;
p("texte") ;
echo "Pour savoir quelles URLs sont associées à vos pages Web, consulter la page ".ancre("serveurs.php","serveurs")."." ;
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... " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " Bien sur que oui, qu'on peut ! Il faut utiliser un logiciel de transfert de fichier sécurisée (SFTP en anglais) " ;
echo " comme ".ancre("http://winscp.net/eng/docs/lang:fr","WinScp")." ou " ;
echo href("https://filezilla-project.org/index.php","FileZilla").". " ;
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")."." ;
finp() ;
p("texte") ;
echo " Pour tout ce qui suit, on utilisera donc la méthode suivante : on écrit en local les pages Web " ;
echo " avec des liens ".b("relatifs")." et ensuite on les transfère sur le compte Unix " ;
echo " même si on chez soi, à la maison." ;
finp() ;
p("texte") ;
echo " Pour Windows, les éditeurs que nous conseillons sont " ;
echo href('http://notepad-plus.sourceforge.net/fr/site.htm',"notepad++") ;
echo " et " ;
echo href("https://www.geany.org/","Geany").". " ;
echo " Les navigateur ".b("Firefox, Chrome ")." et ".b("Opera")." sont sans doute des bons choix." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Une division est plus souple mais plus difficile à gérer qu'une cellule de tableau." ;
# echo "Voir le code-source de ".ancre("sen_courses2.php")."." ;
finp() ;
finli() ;
finol() ;
#########################################################
$jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP3
#########################################################
ol() ;
/*
debutli() ;
p("texte") ;
echo " ".em(ghVert("Rappel"))." : pour transférer les fichiers, on utilise ".ancre("http://winscp.net/eng/docs/lang:fr","WinScp")."." ;
finp() ;
finli() ;
*/
debutli() ;
p("texte") ;
echo "Voir le code-source de ".ancre("sen_botablo.htm")." et ".ancre("sen_botablo2.htm")." ; les ".b("bgcolor")." " ;
echo " indiqués pour ".b("table").", ".b("td")." et ".b("p")." mettent respectivement une couleur de fond pour : " ;
echo " tout le tableau, toute la case (cellule), la zone du paragraphe à l'intérieur de la case." ;
finp() ;
finli() ;
debutli() ;
p("cadrej") ;
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, " ;
echo " le texte est justifié à droite et à gauche, comme le demande l'énoncé, le fond du paragraphe est gris, et un lien comme " ;
echo " le mot ".href('http://www.google.fr',"Google","nou grouge")." est en rouge, sans souligné alors que c'est un lien." ;
echo " On consultera le code-source de ce paragraphe et le fichier de style ".ancre("std.css")." pour essayer de comprendre ce " ;
echo " que signifie".b("<p class='cadrej'>...")." et".b("<a class='nou grouge' href=...")." " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Voir le code-source de ".ancre("sen_jules.php").". Pour le retrait on peut utiliser l'élément ".b("blockquote")." " ;
echo " ou simplement ajouter autour du paragraphe un élément ".b("div")." avec la bonne marge gauche. Cela ne vaut pas le " ;
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 " ;
echo " à \"bloquer\" tous les styles qu'on utilise dans un seul fichier ".b("CSS")." selon l'adage de \"mon premier sac à main de " ;
echo " quand que j'avais 14 ans \" (".em("ça peut toujours servir...").")." ;
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 " ;
echo " la modification de la taille des caractères. Il aurait plus judicieux de définir ".b("jc")." pour la couleur et ".b("gros"). " " ;
echo " pour la taille, de façon à utiliser ".b("class ='jc'")." dans le paragraphe et ".b("class ='gros jc'")." dans le titre." ;
finp() ;
p("texte") ;
echo "Pour la version grammaire ".em("stricte").", voir ".ancre("sen_jules2.php")." ; le code-source contient des commentaires..." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Voir le code-source de ".ancre("sen_stdcss.php")."." ;
finp() ;
finli() ;
finol() ;
#########################################################
$jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP4
#########################################################
ol() ;
debutli() ;
p("texte") ;
echo "Voir ".ancre("sen_ts1.htm")." et ".ancre("sen_ts2.htm")." comme résultats ; la seule différence dans le " ;
echo " code-source est au niveau de l'élément ".b("link")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Voir le code-source de ".ancre("sen_comme_google.php")." ; dans le formulaire original, il y a plein de choses, dont " ;
echo " le choix de la langue, les boutons utilisés..." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
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"))."," ;
echo " on peut obtenir le nombre de jours par mois, dont les initiales sont justement NJPM." ;
echo " On pourra vérifier que toute valeur autre que les nombres entiers 1, 2, 3... 12 provoque l'affichage d'un " ;
echo " texte d'aide. Idem si on ne passe aucun paramètre (les paramètres sont après le symbole point d'interrogation)." ;
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)." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Fastoche. Voir ".ancre("sen_cal1.php") ;
finp() ;
p("texte") ;
echo " L'attribut ".b("type")." de l'élément ".b("ol")." permet de choisir la numérotation. " ;
echo " La valeur ".b("i")." demande l'écriture en chiffres romains, soit ".b("MCMLVII")." pour 1957. " ;
echo " La valeur ".b("A")." demande l'écriture en mode «colonne Excel»." ;
echo " L'attribut ".b("start")." de l'élément ".b("ol")." indique à partir de quelle valeur démarrer." ;
echo " Malheureusement, ces attributs sont interdits en XHTML 1.0 strict et nous verrons dans les TP suivants " ;
echo " comment utiliser Javascript pour résoudre ce problème." ;
finp() ;
p("texte") ;
echo " Il faut décomposer ".b("1957")." en base 26 pour savoir comment cela s'écrit en notation A (comme Excel). " ;
echo " Puisque 1957 = 75×26 + 7, et comme 75=2×26 + 23, on peut écrire 1957 = ( (2×26+23) × 26 + 7, soit au final " ;
echo " 1957 = 2×26".sup("2")." + 23×26 + 7. A l'aide la table suivante " ;
finp() ;
pre_fichier("../lettres.txt","cadre") ;
p("texte") ;
echo " on en déduit que 1957 s'écrit ".b("BWG")." en notation A. " ;
finp() ;
p("texte") ;
echo " De même, 2020 correspond (sans explication) à 2×26".sup("2")." + 25×26 + 18 donc c'est ".b("BYR").". " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Re-fastoche. Voir ".ancre("sen_cal2.php") ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Pour bien utiliser par formulaire " ;
echo " l'URL ".href("http://forge.info.univ-angers.fr/~gh/internet/longlarg.php") ;
echo " il faut que les champs soient nommés ".b("long")." et ".b("larg")." ; " ;
echo " on pourra consulter le code-source de ".ancre("long_large1.php")." pour voir le texte du formulaire correspondant. " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Il suffit de demander à Javascript de rajouter l'attribut ".b("start")." à l'élement ".b("ol")." à la fin du " ;
echo " chargement de la page, comme on peut le voir avec la page " ;
echo href("http://forge.info.univ-angers.fr/~gh/internet/olstart2.php","olstart2")." et, en plus général, avec " ;
echo href("http://forge.info.univ-angers.fr/~gh/internet/olstart3.php","olstart3")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Consulter le code-source de ".ancre("sen_nombres.php")." et de ".ancre("sen_nombres2.php")." (version stricte). " ;
#echo " L'url ".b("javascript:")." -- avec Firefox uniquement -- permet de voir une partie des erreurs que Javascript détecte." ;
echo " Pour les décimales, il faut convertir le texte en nombre réel avec ".b("parseFloat()")." puis utiliser " ;
echo " la fonction ".b("toFixed()")." pour choisir le nombre de décimales." ;
echo " Pour que l'action (qui est ".b("obligatoire").") ne s'exécute pas, il faut terminer le code javascript par ".b("return false ;").". " ;
finp() ;
p("texte") ;
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 " ;
echo " le fichier ".ancre("sen_nombres3.php").". " ;
echo " Si on veut faire quelque chose de \"propre\", il faut externaliser le code Javascript, comme dans " ;
echo " le fichier ".ancre("sen_nombres4.php").". " ;
finp() ;
finli() ;
finol() ;
#########################################################
$jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP5
#########################################################
ol() ;
debutli() ;
p("texte") ;
echo "Pour bien utiliser par formulaire " ;
echo " l'URL ".href("http://forge.info.univ-angers.fr/~gh/internet/longlarg.php") ;
echo " il faut que les champs soient nommés ".b("long")." et ".b("larg")." ; " ;
echo " on pourra consulter le code-source de ".ancre("long_large1.php")." pour voir le texte du formulaire correspondant. " ;
finp() ;
p("texte") ;
echo " Pour la deuxième partie de l'exercice, il faut commencer par mettre ".b("onsubmit='return false'") ;
echo " comme attribut de l'élément form pour ne plus utiliser l'URL." ;
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")."." ;
echo " Consulter ".ancre("long_large2.php")." pour voir le code-source associé." ;
finp() ;
p("texte") ;
echo b("Attention : ")." il est ".s_span("obligatoire","grouge")." de mettre ".b("parseInt(...)")." autour de chaque valeur " ;
echo " pour calculer la somme des dimensions dans le calcul du périmètre car sinon Javascript va se contenter de la concaténation " ;
echo " des valeurs textes. En d'autres termes, sans parseInt, avec 10 comme longueur et 2 comme largeur, Javascript va interpréter " ;
echo '"10" + "2" comme "102" au lieu de 10 + 2, soit 12...' ;
finp() ;
p("texte") ;
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 " ;
echo " et un id pour pouvoir y accéder ensuite. " ;
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. " ;
echo " Consulter ".ancre("long_large3.php")." pour voir le code-source associé." ;
finp() ;
p("texte") ;
echo "Une solution plus «propre» consiste à mettre toutes les instructions Javascript dans un autre fichier (on parle alors " ;
echo " d'".b("externalisation du code Javascript").") à l'intérieur d'une fonction. Dans la page Web, il faut donc alors charger la fonction " ;
echo " dans l'élément head et l'appeler dans la partie onsubmit." ;
echo " Consulter ".ancre("long_large4.php")." pour voir le code-source correspondant et" ;
echo " son fichier Javascript nommé ".ancre("montresource.php?nomfic=long_large4.js","long_large4.js")."." ;
echo " Une version sans \"".b("alert")."\" est ".ancre("long_large5.php","ici")." et le code Javascript associé est " ;
echo ancre("montresource.php?nomfic=long_large5.js","là")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "L'erreur est d'avoir mis l'apostrophe telle quelle ce qui ferme trop tot " ;
echo "l'instruction write. Pour afficher une \"quote\", il faut mettre \ devant l'apostrophe." ;
echo "Le texte correct est donc : " ;
finp() ;
pre() ;
echo " window.document.write(' Qui le dit ? C\'est moi ! ') ;\n " ;
echo " **** \n " ;
finpre() ;
p("texte") ;
echo "A l'affichage, l'instruction write incorrecte est simplement ignorée : il est difficile " ;
echo " de se rendre compte qu'il manque quelquechose. Il est donc conseillé d'utiliser ".kbd("la console d'erreurs de javascript") ;
echo " avec Firefox pour tester les scripts écrits en Javascript (lorsque cela fonctionne). \n" ;
echo " Une solution \"propre\" consiste à utiliser ".b("Firebug")." avec Firefox dont une version ".em("\"lite\"")." existe " ;
echo " même pour Internet Explorer. Pour Opera, on utilisera ".b("Dragonfly")."." ;
finp() ;
p("texte") ;
echo "Voici ce qu'affichent les consoles d'erreur d'Opera et de Firefox quand on charge la page (images cliquables) : " ;
finp() ;
div("centre") ;
table(0,50) ;
tr() ;
td() ;
echo href("console_opera.png",img("console_opera.png","console_opera",500)) ;
fintd() ;
fintr() ;
tr() ;
td() ;
echo href("console_firefox.png",img("console_firefox.png","console_firefox",500)) ;
fintd() ;
fintr() ;
fintable() ;
findiv() ;
p("texte") ;
echo "Cela ne joue pas sur la validation qui se fait sur le code HTML au chargement (donc avant exécution du Javascript)." ;
echo " Si on corrige l'erreur, la page correcte est ".href("chance.htm","ici").". " ;
finp() ;
p("texte") ;
echo "Avec une version récente de Firefox, pour avoir la console d'erreurs, il faut activer " ;
echo b("la barre de menus") ;
echo " puis utiliser le menu " ;
echo b("Outils").", " ;
echo " sous-menu " ;
echo b("Développement Web").", " ;
echo " sous-sous-menu " ;
echo b("Console web").". " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Consulter le code-source de ".ancre("sen_kilos.php").". " ;
echo " Ce qui change, c'est qu'avec une grammaire stricte, on est obligé d'utiliser un fichier externe pour écrire le " ;
echo " texte javascript. Pour l'exercice, c'est le fichier ".ancre("sen_kilos.js")." ; il est chargé via l'attribut ".b("src")." " ;
echo " dans l'élément ".b("script")." qui est lui-même dans l'élément ".b("head")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Consulter le code-source de ".ancre("sen_deuxnombres.php")." ; l'url ".b("javascript:")." sous Firefox " ;
echo " fournit une fenêtre qui affiche des messages d'erreur de Javascript, au chargement et à l'exécution." ;
echo " Cela a déjà été dit, mais comme tout le monde ne l'utilise pas, je le répète ! " ;
echo " Le fichier javascript utilisé est ".ancre("sen_deuxnombres.js")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " Avec 3 variables distinctes deux à deux, il y a 6 cas à envisager. A partir de trois variables, il vaut mieux " ;
echo " mettre les variables dans un tableau et trier le tableau avant de l'afficher." ;
echo " Consulter le code-source de ".ancre("sen_ordrecroissant.php") ;
echo " et le texte de son script ".ancre("sen_ordrecroissant.js")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Consulter le code-source de ".ancre("sen_eux_et_nous.php")." et son fichier de script ".ancre("sen_eux_et_nous.js")."." ;
echo " Le corrigé fournit une solution avec un tableau, puis avec des divisions sans CSS et enfin avec des divisions " ;
echo " en CSS ; le script fonctionne avec IE et FF comme indiqué en commentaires." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " L'horloge numérique c'est pratiquement la même chose que les panneaux de score de l'exercice précédent. " ;
echo " Le seul changement c'est qu'il faut fonctionner en \"modulo\" 24 et 60 comme disent les mathématicien(ne)s." ;
echo "Consulter le code-source de ".ancre("sen_horloge.php")." et son fichier de script ".ancre("sen_horloge.js")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Exercice volontairement non corrigé (sert parfois de base d'examen)." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Exercice volontairement non corrigé : il y a plein de solutions sur Internet. Un exercice " ;
echo " intéressant est de lire une solution et de la commenter, voire de la critiquer." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Voir par exemple " ;
echo href("http://yoast.com/articles/sortable-table/","sortable")." (avec un seul t) " ;
echo " ou ".href("ttp://www.kryogenix.org/code/browser/sorttable/","sorttable")." (avec deux t). " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Consulter la page " ;
echo href("chaperon.php").". Le code Javascript associé est " ;
echo " ci-dessous." ;
finp() ;
pre_fichier("chaperon.js","cadrejaune") ;
finli() ;
finol() ;
#########################################################
$jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP6
#########################################################
ol() ;
debutli() ;
p("texte") ;
echo b("Rappel :") ;
echo " à la faculté, il faut transférer vos fichiers depuis la machine locale sur l'hote " ;
echo ghRouge("forge.info-ua") ;
echo " alors que partout depuis l'extérieur (donc hors de la faculté), l'hote se nomme " ;
echo ghRouge("forge.info.univ-angers.fr").". " ;
echo " Pour réaliser depuis Linux une connexion en mode terminal (ligne des commandes), il faut écrire " ;
echo b("ssh -X -Y ".ghVert("login")."@forge.info-ua").". " ;
finp() ;
p("texte") ;
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) " ;
echo " dont le code-source " ;
echo " est ".ancre("montresource.php?nomfic=sen_etvoila.php","ici").", il y a 3 lignes de code HTML " ;
echo " qui produisent le texte ".b("<h1>ET VOILA LE TRAVAIL</h1>")."." ;
finp() ;
p("texte") ;
echo "Pour le nombre de secondes écoulées depuis l'an 0, " ;
echo " consulter ".ancre("montresource.php?nomfic=nbsec.php","nbsec").". " ;
echo " Utiliser des années bissextiles est important car un jour compte 86400 secondes. Avec 500 jours de plus, on rajoute " ;
echo " en gros 43 millions de secondes." ;
finp() ;
p("texte") ;
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. " ;
echo " Au lieu d'écrire un code avec des si en cascade comme dans la page " ;
$url = "http://forge.info.univ-angers.fr/~gh/wstat/Programmation_R/Programmation_introduction/progie3.php?solutions=1" ;
echo href($url,"conditions logiques et tests").", " ;
echo " il vaut mieux passer par un tableau : " ;
finp() ;
pre_fichier("compare-sor.txt","cadre") ;
finli() ;
debutli() ;
p("texte") ;
echo " Voici le ".ancre("bonjour.php","texte")." d'une page minimale et valide qui affiche " ;
echo ancre("montresource.php?nomfic=bonjour.php","bonjour")." à l'aide de fonctions personnelles ; le code-source " ;
echo " des fonctions utilisées est : ".ancre("montresource.php?nomfic=mesfonctions.php","mesfonctions.php")."." ;
finp() ;
p("texte") ;
echo em("Pour les expert(e)s")." : consulter ".ancre("montresource.php?nomfic=std.php","std.php") ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " Consulter le ".ancre("montresource.php?nomfic=bonjour2.php","code-source")." de " ;
echo " la solution ".ancre("bonjour2.php")." et le code-source " ;
echo " des fonctions utilisées : ".ancre("montresource.php?nomfic=mesfonctions2.php","mesfonctions2.php")." ;" ;
echo " on pourra vérifier que le code-source des ".b("h1")." est identique." ;
finp() ;
p("texte") ;
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 " ;
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"))." " ;
echo " ont le même comportement puisqu'elles sont toutes écrites par la même fonction." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " Consulter le ".ancre("montresource.php?nomfic=sen_age_rep.php","code-source")." de " ;
echo " la solution ".ancre("sen_age_rep.php")." ; on n'est pas obligé(e) de recopier le formulaire pour tester le code " ;
echo " car avec ".b("method='GET'")." on peut tester le fichier réponse via son URL en ajoutant " ;
echo b("?age=")." avec la valeur à tester." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " Solution volontairement non corrigée sur cette page pour l'examen de décembre 2014. " ;
echo " Celles et ceux qui viennent en TP auront la correction en \"live\"." ;
finp() ;
pre_fichier("decembre2014.php","cadrebleu invisible") ;
p("texte") ;
echo "Par contre, voici la réponse au début de la question 2, pour tester si l'utilisateur " ;
echo " a bien entrée une date préférée :" ;
finp() ;
pre_fichier("histoire.php","cadre") ;
p("texte") ;
echo " Pour l'examen de juin 2017, voici le code XHTML :" ;
finp() ;
pre_fichier("juin2017.html","cadrebleu") ;
p("texte") ;
echo " Le code en PHP conceptuel est listé ci-dessous :" ;
finp() ;
pre_fichier("juin2017.php","cadrejaune") ;
finli() ;
debutli() ;
p("texte") ;
echo " Consulter le ".ancre("montresource.php?nomfic=ldc.php","code-source")." de " ;
echo " la solution ".ancre("ldc.php")." et le code-source " ;
echo " des fonctions utilisées : ".ancre("montresource.php?nomfic=mesfonctions3.php","mesfonctions3.php")."." ;
echo " Pour légumes, on utilise ".b("urlencode")." dans le lien Google et on fait un test pour utiliser le mot " ;
echo b("legumes")." (donc sans accent) pour les images... " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " Consulter le ".ancre("montresource.php?nomfic=sen_hist_form.php","code-source")." du " ;
echo " formulaire ".ancre("sen_hist_form.php")." et le " ;
echo ancre("montresource.php?nomfic=sen_hist_rep.php","code-source")." de " ;
echo " la correction des réponses ".ancre("sen_hist_rep.php")."." ;
finp() ;
p("texte") ;
echo "Pour celles et ceux qui préfèreraient une solution \"conceptuelle\", c'est-à-dire en PHP " ;
echo " sans aucune balise, donc avec un code \"plus beau\" et \"plus propre\", on pourra " ;
echo " consulter le ".ancre("montresource.php?nomfic=sen_hist_form_c.php","code-source")." du " ;
echo " formulaire ".ancre("sen_hist_form_c.php")." et le " ;
echo ancre("montresource.php?nomfic=sen_hist_rep_c.php","code-source")." de " ;
echo " la correction des réponses ".ancre("sen_hist_rep_c.php")."." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo "Les titres sont produits à l'aide la fonction ".b("h1()")." en PHP conceptuel." ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " La page ".ancre("sen_quests1.php")." contient juste le tirage aléatoire ; " ;
echo " consulter son ".ancre("montresource.php?nomfic=sen_quests1.php","code-source")." pour voir " ;
echo " comment cela fonctionne. " ;
finp() ;
finli() ;
finol() ;
#########################################################
$jtp++ ; tpDscs($jtp,$nomTp[$jtp]) ; # TP7
#########################################################
ol() ;
debutli() ;
p("texte") ;
echo "La requête SQL qui compte le nombre d'hommes (".em("sexe=0").") est " ;
finp() ;
p("texte") ;
echo b("SELECT COUNT(*) FROM ronfle WHERE sexe=0 ;") ;
finp() ;
p("texte") ;
echo "Celle qui compte le nombre d'hommes (".em("sexe=0").") qui fument (".em("taba=1").") et ronflent (".em("ronfle=1").") est " ;
finp() ;
p("texte") ;
echo b("SELECT COUNT(*) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
finp() ;
p("texte") ;
echo "Si on sait qu'il y a 75 hommes, la requête SQL qui calcule le pourcentage d'hommes qui fument et ronflent " ;
echo "par rapport au nombre d'hommes en tout est " ;
finp() ;
p("texte") ;
echo b("SELECT 100*( COUNT(*)/75 ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
finp() ;
p("texte") ;
echo "Si on a stocké dans la variable PHP nommée ".b("nhom")." le nombre d'hommes, la requête SQL qui calcule " ;
echo " le pourcentage d'hommes qui fument par rapport au nombre d'hommes en tout devient pour PHP " ;
finp() ;
p("texte") ;
echo b("SELECT 100*( COUNT(*)/\$nbhom ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
finp() ;
p("texte") ;
echo "L'arrondi du pourcentage via SQL s'écrit alors " ;
finp() ;
p("texte") ;
echo b("SELECT ROUND( 100*( COUNT(*) /\$nbhom) ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;") ;
finp() ;
p("texte") ;
echo "Mais si on préfere arrondir en PHP le pourcentage mis dans la variable nommée ".b("pct")." il faut écrire " ;
finp() ;
p("texte") ;
echo b("\$pct_ar = round( \$pct , 0 ) ; ") ;
finp() ;
p("texte") ;
echo "Il est certainement préférable de laisser SQL faire tout le travail." ;
finp() ;
p("texte") ;
echo "Pour lister les 10 plus jeunes femmes qui ronflent par age croissant en SQL, il faudrait écrire " ;
finp() ;
p("texte") ;
echo b("SELECT * FROM ronfle WHERE sexe=1 AND ronfle=1 ORDER BY age LIMIT 10 ;") ;
finp() ;
p("texte") ;
echo "Le seul problème est qu'il y a 25 femmes en tout et seulement 5 qui ronflent. La partie ".b("LIMIT 10 ") ;
echo " est donc inutile ici." ;
finp() ;
p("texte") ;
echo " La page ".ancre("sen_ronfle.php")." montre les différents résultats ; " ;
echo " consulter le ".ancre("montresource.php?nomfic=sen_ronfle.php","code-source")." pour le " ;
echo " détail de la connexion, du listage des femmes... " ;
echo " On remarquera que tout le code-source est conceptuel, c'est-à-dire sans balise." ;
finp() ;
p("texte") ;
echo "Pour la production d'histogrammes, voir ".href("histo.php").". " ;
finp() ;
finli() ;
debutli() ;
p("texte") ;
echo " La page ".ancre("sen_quests1.php")." contient juste le tirage aléatoire ; " ;
echo " consulter son ".ancre("montresource.php?nomfic=sen_quests1.php","code-source")." pour voir " ;
echo " comment cela fonctionne. " ;
finp() ;
p("texte") ;
echo " La page ".ancre("sen_quests2.php")." contient la solution complète ; " ;
echo " son ".ancre("montresource.php?nomfic=sen_quests2.php","code-source").", bien que court à lire, se " ;
echo " révèle très intéressant. Les sous-programmes utilisés sont dans " ;
echo ancre("montresource.php?nomfic=sen_quests3.php","sen_quests3.php")." (plus long à lire)." ;
finp() ;
p("texte") ;
echo " On remarquera que, là encore, tout le code-source est conceptuel, c'est-à-dire sans balise." ;
finp() ;
finli() ;
finol() ;
pvide() ;
p() ;
echo href("montresource.php?nomfic=sen_tps_cor.php","Code-source de cette page","orange_stim nou")."." ;
finp() ;
finSection() ;
finPage() ;
?>
La coloration syntaxique est réalisée par : SyntaxHighlighter. Si vous préférez, vous pouvez utiliser celle de geshi ou même celle construite autour de la fonction highlight_file. |
Retour à la page principale de
(gH)