CORRIGES DES TPS INFORMATIQUE WEB
pour la licence DSCS
(Diffusion du savoir et Culture scientifique)
gilles.hunault@univ-angers.fr
Table des matières
Corrigé du TP DSCS numéro 1 (énoncé) Pages Web locales
-
Sous Windows, les navigateurs Web disponibles sont Internet Explorer, Firefox, Opera, Safari, Chrome... Sous Linux, il y a les mêmes sauf Internet Explorer et Safari. La notion de "meilleur" n'existe que par 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 é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 ou, en tous cas, moins nettes en ce qui concerne les navigateurs.
On utilisera désormais Firefox mais il sera bon de vérifier dans une autre salle ou chez soi que les pages s'affichent correctement avec Internet Explorer.
-
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. Cela tient au fait qu'on demande un titre de niveau 1 via l'élément h1. Le fichier n'est pas "bien formé" : il faut toujour fermer une balise ouvrante et il manque donc au moins </h1>. Pour qu'il soit valide, il faudrait indiquer par rapport à quelle grammaire (DOCTYPE) et rajouter les éléments html, head, title, body
La validation du W3C se fait à l'adresse http://validator.w3.org/ (utiliser File Upload.
Voici un tel fichier valide XHTML strict avec le lien qui le prouve : sen_bonjour.htm ; on notera l'adresse du validateur et son paramètre. Le squelette sq.htm est ici.
-
On peut utiliser des paragraphes différents, des titres consécutifs, un retour à la ligne, un tableau. Et aussi un texte préformaté (avec des retours charriot) via l'élément pre, des divisions. Le fichier sen_lignes.htm présente toutes ces solutions. Le tableau est sans doute ici un peu "lourd" juste pour avoir une séparation dans le sens des lignes. Par contre, au niveau du "code-source" cela n'a aucune importance que les balises soient ou pas sur des lignes différentes. N'oubliez pas de lire le code-source de la solution !
-
Si en 2020, la grammaire conseillée pour le développement Web général (écran, tablette, téléphone) est HTML 5 le mieux pour nous, c'est-à-dire pour classe, est d'utiliser la grammaire XHTML 1.0 Strict car plus «rigoureuse».
A propos des styles, le mieux est de procéder ainsi :
- 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,
- après avoir testé le style en ligne, le mettre en style interne en début de fichier avec une grammaire transitionnelle,
- pour un site "propre", tout externaliser et mettre une grammaire stricte.
-
No, but it helps !. En d'autres termes et en français, ce serait mieux de savoir parler (et surtout lire) l'anglais (ou plus exactement l'américain) parce que toutes les spécifications et documentations sont au départ en anglais. Bien ou mal (on ne discutera pas ici de la quasi-hégémonie américano-capitaliste), c'est un fait et il faut s'y adapter pour au moins quelques années.
-
Suivant la grammaire (transitionnelle ou stricte), c'est plus ou moins facile. L'énoncé parle d'une enveloppe A4. Il faut donc certainement écrire gros et avec un grand interligne, sans alinéa.
En transitionnel, on peut utiliser l'attribut align de l'élément p, l'attribut size de l'élément font pour la taille. On peut définir la couleur avec l'attribut color de l'élément font et gérer l'interligne par un style "à la volée" via l'attribut style de l'élément p (propriété line-height, valeur 100pt par exemple). Pour le gras, aucune difficulté, il existe un élément b. Voir sen_adr1.htm.
En strict, il faut impérativement tout mettre dans un style externe. On peut regrouper ou pas les propriétés line-height font-size text-align color selon que l'on doive faire souvent ou pas des enveloppes. Voir sen_adr2.htm qui contient (où ?) une validation XHTML et sen_adr3.htm qui contient (où ?) une validation CSS.
-
Une liste ordonnée se fait avec l'élément ol et les items de liste sont définis par les éléments li. Pour une liste non ordonnée, on utilise l'élément ul au lieu de ol, avec les mêmes li. Pour une liste à définitions, l'élément dl comporte pour chaque terme un élément dt (terme) et un élément dd (définition). Vérification avec le fichier sen_courses.
L'URL de la recherche du mot oeuf avec Google est http://www.google.fr/search?q=oeuf ; on la met comme lien hypertexte via l'élément a, attribut href. Pour pain, l'URL est http://www.google.fr/search?q=pain, etc. Pour mettre une image, on utilise l'élément img, attributs src et alt. Voir le même fichier sen_courses (en bas de page).
Pour un tableau, l'élément conteneur est table ; les lignes sont définies par les éléments tr et chaque cellule est obtenue via l'élément td. La bordure se met avec l'attribut border au niveau de l'élément table. 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 # avec le nom de la section. On définition la section avec l'attribut name dans une ancre (élément a). Vérification ici.
Corrigé du TP DSCS numéro 2 (énoncé) Pages Web sur forge/janus et tableaux
-
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 de la machine Linux pour aller sur une autre machine (forge/janus) qui contient nos fichiers.
Pour savoir quelles URLs sont associées à vos pages Web, consulter la page serveurs.La documentation du Département Info de l'UFR donne aussi des informations sur les accents, les droits...
-
Bien sur que oui, qu'on peut ! Il faut utiliser un logiciel de transfert de fichier sécurisée (SFTP en anglais) comme WinScp ou FileZilla. On peut même se connecter sur la machine Unix forge/janus via putty.
Pour tout ce qui suit, on utilisera donc la méthode suivante : on écrit en local les pages Web avec des liens relatifs et ensuite on les transfère sur le compte Unix même si on chez soi, à la maison.
Pour Windows, les éditeurs que nous conseillons sont notepad++ et Geany. Les navigateur Firefox, Chrome et Opera sont sans doute des bons choix.
-
Une division est plus souple mais plus difficile à gérer qu'une cellule de tableau.
Corrigé du TP DSCS numéro 3 (énoncé) Tableaux, listes et CSS
-
Voir le code-source de sen_botablo.htm et sen_botablo2.htm ; les bgcolor indiqués pour table, td et p mettent respectivement une couleur de fond pour : tout le tableau, toute la case (cellule), la zone du paragraphe à l'intérieur de la case.
-
La réponse est dans la propriété CSS nommée text-decoration. Dans le paragraphe que vous êtes en train de lire, le texte est justifié à droite et à gauche, comme le demande l'énoncé, le fond du paragraphe est gris, et un lien comme le mot Google est en rouge, sans souligné alors que c'est un lien. On consultera le code-source de ce paragraphe et le fichier de style std.css pour essayer de comprendre ce que signifie<p class='cadrej'>... et<a class='nou grouge' href=...
-
Voir le code-source de sen_jules.php. Pour le retrait on peut utiliser l'élément blockquote ou simplement ajouter autour du paragraphe un élément div avec la bonne marge gauche. Cela ne vaut pas le coup de faire un feuille de style pour un fichier. En général, on fait une feuille pour un ensemble de pages, quitte à "bloquer" tous les styles qu'on utilise dans un seul fichier CSS selon l'adage de "mon premier sac à main de quand que j'avais 14 ans " (ça peut toujours servir...). Le style jc défini dans la feuille ne peut pas convenir pour autre chose que le titre car il comprend en plus de la couleur la modification de la taille des caractères. Il aurait plus judicieux de définir jc pour la couleur et gros pour la taille, de façon à utiliser class ='jc' dans le paragraphe et class ='gros jc' dans le titre.
Pour la version grammaire stricte, voir sen_jules2.php ; le code-source contient des commentaires...
-
Voir le code-source de sen_stdcss.php.
Corrigé du TP DSCS numéro 4 (énoncé) CCS, formulaires et Javascript
-
Voir sen_ts1.htm et sen_ts2.htm comme résultats ; la seule différence dans le code-source est au niveau de l'élément link.
-
Voir le code-source de sen_comme_google.php ; dans le formulaire original, il y a plein de choses, dont le choix de la langue, les boutons utilisés...
-
Avec l'URI http://forge.info.univ-angers.fr/~gh/internet/ndjpm.php, on peut obtenir le nombre de jours par mois, dont les initiales sont justement NJPM. On pourra vérifier que toute valeur autre que les nombres entiers 1, 2, 3... 12 provoque l'affichage d'un texte d'aide. Idem si on ne passe aucun paramètre (les paramètres sont après le symbole point d'interrogation). 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).
-
Fastoche. Voir sen_cal1.php
L'attribut type de l'élément ol permet de choisir la numérotation. La valeur i demande l'écriture en chiffres romains, soit MCMLVII pour 1957. La valeur A demande l'écriture en mode «colonne Excel». L'attribut start de l'élément ol indique à partir de quelle valeur démarrer. Malheureusement, ces attributs sont interdits en XHTML 1.0 strict et nous verrons dans les TP suivants comment utiliser Javascript pour résoudre ce problème.
Il faut décomposer 1957 en base 26 pour savoir comment cela s'écrit en notation A (comme Excel). Puisque 1957 = 75×26 + 7, et comme 75=2×26 + 23, on peut écrire 1957 = ( (2×26+23) × 26 + 7, soit au final 1957 = 2×262 + 23×26 + 7. A l'aide la table suivante
fichier ../lettres.txt non vu
on en déduit que 1957 s'écrit BWG en notation A.
De même, 2020 correspond (sans explication) à 2×262 + 25×26 + 18 donc c'est BYR.
-
Re-fastoche. Voir sen_cal2.php
-
Pour bien utiliser par formulaire l'URL http://forge.info.univ-angers.fr/~gh/internet/longlarg.php il faut que les champs soient nommés long et larg ; on pourra consulter le code-source de long_large1.php pour voir le texte du formulaire correspondant.
-
Il suffit de demander à Javascript de rajouter l'attribut start à l'élement ol à la fin du chargement de la page, comme on peut le voir avec la page olstart2 et, en plus général, avec olstart3.
-
Consulter le code-source de sen_nombres.php et de sen_nombres2.php (version stricte). Pour les décimales, il faut convertir le texte en nombre réel avec parseFloat() puis utiliser la fonction toFixed() pour choisir le nombre de décimales. Pour que l'action (qui est obligatoire) ne s'exécute pas, il faut terminer le code javascript par return false ;.
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 le fichier sen_nombres3.php. Si on veut faire quelque chose de "propre", il faut externaliser le code Javascript, comme dans le fichier sen_nombres4.php.
Corrigé du TP DSCS numéro 5 (énoncé) Javascript
-
Pour bien utiliser par formulaire l'URL http://forge.info.univ-angers.fr/~gh/internet/longlarg.php il faut que les champs soient nommés long et larg ; on pourra consulter le code-source de long_large1.php pour voir le texte du formulaire correspondant.
Pour la deuxième partie de l'exercice, il faut commencer par mettre onsubmit='return false' comme attribut de l'élément form pour ne plus utiliser l'URL. Ensuite, il suffit de mettre avant ce return false, le texte Javascript pour la mise à jour des champs perim et aire. Consulter long_large2.php pour voir le code-source associé.
Attention : il est obligatoire de mettre parseInt(...) autour de chaque valeur pour calculer la somme des dimensions dans le calcul du périmètre car sinon Javascript va se contenter de la concaténation des valeurs textes. En d'autres termes, sans parseInt, avec 10 comme longueur et 2 comme largeur, Javascript va interpréter "10" + "2" comme "102" au lieu de 10 + 2, soit 12...
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 et un id pour pouvoir y accéder ensuite. Au niveau du code Javascript, il suffit juste d'ajouter l'instruction qui change le style de la division pour voir le résultat. Consulter long_large3.php pour voir le code-source associé.
Une solution plus «propre» consiste à mettre toutes les instructions Javascript dans un autre fichier (on parle alors d'externalisation du code Javascript) à l'intérieur d'une fonction. Dans la page Web, il faut donc alors charger la fonction dans l'élément head et l'appeler dans la partie onsubmit. Consulter long_large4.php pour voir le code-source correspondant et son fichier Javascript nommé long_large4.js. Une version sans "alert" est ici et le code Javascript associé est là.
-
L'erreur est d'avoir mis l'apostrophe telle quelle ce qui ferme trop tot l'instruction write. Pour afficher une "quote", il faut mettre \ devant l'apostrophe.Le texte correct est donc :
window.document.write(' Qui le dit ? C\'est moi ! ') ;
****
A l'affichage, l'instruction write incorrecte est simplement ignorée : il est difficile de se rendre compte qu'il manque quelquechose. Il est donc conseillé d'utiliser la console d'erreurs de javascript avec Firefox pour tester les scripts écrits en Javascript (lorsque cela fonctionne).
Une solution "propre" consiste à utiliser Firebug avec Firefox dont une version "lite" existe même pour Internet Explorer. Pour Opera, on utilisera Dragonfly.
Voici ce qu'affichent les consoles d'erreur d'Opera et de Firefox quand on charge la page (images cliquables) :
Cela ne joue pas sur la validation qui se fait sur le code HTML au chargement (donc avant exécution du Javascript). Si on corrige l'erreur, la page correcte est ici.
Avec une version récente de Firefox, pour avoir la console d'erreurs, il faut activer la barre de menus puis utiliser le menu Outils, sous-menu Développement Web, sous-sous-menu Console web.
-
Consulter le code-source de sen_kilos.php. Ce qui change, c'est qu'avec une grammaire stricte, on est obligé d'utiliser un fichier externe pour écrire le texte javascript. Pour l'exercice, c'est le fichier sen_kilos.js ; il est chargé via l'attribut src dans l'élément script qui est lui-même dans l'élément head.
-
Consulter le code-source de sen_deuxnombres.php ; l'url javascript: sous Firefox fournit une fenêtre qui affiche des messages d'erreur de Javascript, au chargement et à l'exécution. Cela a déjà été dit, mais comme tout le monde ne l'utilise pas, je le répète ! Le fichier javascript utilisé est sen_deuxnombres.js.
-
Avec 3 variables distinctes deux à deux, il y a 6 cas à envisager. A partir de trois variables, il vaut mieux mettre les variables dans un tableau et trier le tableau avant de l'afficher. Consulter le code-source de sen_ordrecroissant.php et le texte de son script sen_ordrecroissant.js.
-
Consulter le code-source de sen_eux_et_nous.php et son fichier de script sen_eux_et_nous.js. Le corrigé fournit une solution avec un tableau, puis avec des divisions sans CSS et enfin avec des divisions en CSS ; le script fonctionne avec IE et FF comme indiqué en commentaires.
-
L'horloge numérique c'est pratiquement la même chose que les panneaux de score de l'exercice précédent. Le seul changement c'est qu'il faut fonctionner en "modulo" 24 et 60 comme disent les mathématicien(ne)s.Consulter le code-source de sen_horloge.php et son fichier de script sen_horloge.js.
-
Exercice volontairement non corrigé (sert parfois de base d'examen).
-
Exercice volontairement non corrigé : il y a plein de solutions sur Internet. Un exercice intéressant est de lire une solution et de la commenter, voire de la critiquer.
-
Voir par exemple sortable (avec un seul t) ou sorttable (avec deux t).
-
Consulter la page chaperon.php. Le code Javascript associé est ci-dessous.
function verification1() {
bonneReponse = "rouge"
// on montre la zone de réponse numéro 1
window.document.getElementById("zoneReponse1").setAttribute("class","visible cadrejaune")
// on récupère la réponse de l'utilisateur
reponse = window.document.getElementById("couleur").value
if (console) {
console.log("réponse originale : "+reponse)
} // fin si
// on enlève silencieusement les espaces au début et en fin de réponse
reponse = reponse.trim()
if (console) {
console.log("réponse après trim : "+reponse)
} // fin si
// on convertit silencieusement en minuscules
reponse = reponse.toLowerCase()
if (console) {
console.log("réponse en minusucles : "+reponse)
} // fin si
// on remplace les espaces multiples par un seul espace
reponse = reponse.replace(/\s+/g," ")
if (console) {
console.log("réponse avec espaces simples: "+reponse)
} // fin si
// si la réponse est vide, ce peut pas etre la bonne reponse
if (reponse=="") {
texte = " Vous n'avez fourni aucune réponse. "
window.document.getElementById("zoneReponse1").innerHTML = texte
return(true)
} // fin si
texte = " Votre reponse est «" + reponse + "». La bonne réponse est «" + bonneReponse + "». "
// si c'est la bonne réponse on le dit et on s'arrete
if (reponse==bonneReponse) {
texte += " Super, vous avez bon ! "
window.document.getElementById("zoneReponse1").innerHTML = texte
return(true)
} // fin si
// si c'est une réponse approchée, là-encore on le dit et on s'arrete
// on utilise un tableau de réponses approchées
approchees = ["roug", "ruge", "rrouge"]
for (ind=0;ind<approchees.length;ind++) {
approchee = approchees[ ind ]
if (reponse==approchee) {
texte += " C'est presque bien, juste une petite faute d'orthographe. "
window.document.getElementById("zoneReponse1").innerHTML = texte
return(true)
} // fin si
} // fin pour
// si on arrive ici, c'est ce que ce n'est pas bon
texte += " Dommage, ce n'est pas la bonne réponse. " ;
window.document.getElementById("zoneReponse1").innerHTML = texte
} // fin de function verification1
function verification2() {
// on montre la zone de réponse numéro 2
window.document.getElementById("zoneReponse2").setAttribute("class","visible cadrejaune")
// on récupère la réponse de l'utilisateur
reponse = window.document.getElementById("jjmm").value
texte = " Votre reponse est " + reponse+ ". "
// on enlève silencieusement les espaces au début et en fin de réponse
reponse = reponse.trim()
// si la réponse est vide, ce peut pas etre la bonne reponse
if (reponse=="") {
texte = " Vous n'avez fourni aucune réponse. "
window.document.getElementById("zoneReponse2").innerHTML = texte
return(true)
} // fin si
texte = " Votre reponse est " + reponse+ ". "
// on utilise une expression régulière pour tester la validité de la saisie au format JJ-MM
// cette regexp est simple mais fausse car elle englobe trop de valeurs (par exemple 36)
// refmt = new RegExp("^[0-9]{2}$")
// et que pensez-vous de ^(0[1-9])|([1-2][0-9])|(3[01])-(0[1-9])|(1[0-2])$ ???
refmt = new RegExp("^(0[1-9]|1[1-2])$")
// autre écriture : refmt = /^(0[1-9]|1[1-2])$/
if (refmt.test(reponse)) {
texte += " Super, avec "+ reponse + " vous avez bon, c'est le bon format ! "
window.document.getElementById("zoneReponse2").innerHTML = texte
return(true)
} else {
texte += " Non, ce n'est pas au format MM : il faut deux chiffres. "
window.document.getElementById("zoneReponse2").innerHTML = texte
return(true)
} // fin de si
} // fin de function verification1
-
Rappel : à la faculté, il faut transférer vos fichiers depuis la machine locale sur l'hote forge.info-ua alors que partout depuis l'extérieur (donc hors de la faculté), l'hote se nomme forge.info.univ-angers.fr. Pour réaliser depuis Linux une connexion en mode terminal (ligne des commandes), il faut écrire ssh -X -Y login@forge.info-ua.
Comme on peut s'en rendre compte avec le fichier sen_etvoila.php (non valide car il s'agit d'un extrait de page) dont le code-source est ici, il y a 3 lignes de code HTML qui produisent le texte <h1>ET VOILA LE TRAVAIL</h1>.
Pour le nombre de secondes écoulées depuis l'an 0, consulter nbsec. Utiliser des années bissextiles est important car un jour compte 86400 secondes. Avec 500 jours de plus, on rajoute en gros 43 millions de secondes.
Pour comparer n valeurs distinctes, il faut envisager n! cas p. Donc avec 2 variables, 3 cas, avec 3 variables 6 cas. Au lieu d'écrire un code avec des si en cascade comme dans la page conditions logiques et tests, il vaut mieux passer par un tableau :
#########################################################################
# #
# code-source du programme #
# #
#########################################################################
<?php
error_reporting(E_ALL | E_NOTICE | E_STRICT ) ;
$a = 6 ;
$b = 2 ;
$tabVal = array() ;
$tabVal[0] = $a ;
$tabVal[1] = $b ;
echo "Valeurs initiales (1) :\n" ;
print_r($tabVal) ;
sort($tabVal) ;
echo "Valeurs finales (1) :\n" ;
print_r($tabVal) ;
$a = "oui" ;
$b = "non" ;
$c = "bof" ;
$tabValC = array() ;
$tabValC[0] = $a ;
$tabValC[1] = $b ;
$tabValC[2] = $c ;
echo "Valeurs initiales (2) :\n" ;
print_r($tabValC) ;
sort($tabValC) ;
echo "Valeurs finales (2) :\n" ;
print_r($tabValC) ;
# mélange de types :
$a = "oui" ;
$b = 5 ;
$tabVal = array() ;
$tabVal[0] = $a ;
$tabVal[1] = $b ;
echo "Valeurs initiales (3) :\n" ;
print_r($tabVal) ;
sort($tabVal) ;
echo "Valeurs finales (3) :\n" ;
print_r($tabVal) ;
# attention :
if ("oui">5) { echo " oui-1" ; } else { echo "non-1" ; } ;
echo "\n" ;
if ("oui">"5") { echo "oui-2" ; } else { echo "non-2" ; } ;
echo "\n" ;
?>
#########################################################################
# #
# exécution du programme #
# #
#########################################################################
Valeurs initiales (1) :
Array
(
[0] => 6
[1] => 2
)
Valeurs finales (1) :
Array
(
[0] => 2
[1] => 6
)
Valeurs initiales (2) :
Array
(
[0] => oui
[1] => non
[2] => bof
)
Valeurs finales (2) :
Array
(
[0] => bof
[1] => non
[2] => oui
)
Valeurs initiales (3) :
Array
(
[0] => oui
[1] => 5
)
Valeurs finales (3) :
Array
(
[0] => oui
[1] => 5
)
non-1
oui-2
/* Algorithmes possibles */
#################################################
# #
# à partir de valA et valB, #
# on met dans petit la plus petite valeur #
# et dans grand la plus grande valeur #
# #
#################################################
#################################################
# solution 1 sans fonction de PHP
#################################################
if (valA<valB) {
petit <- valA
grand <- valB
} else {
petit <- valB
grand <- valA
} # fin si
#################################################
# solution 2 toujours sans fonction de PHP
#################################################
petit <- valB
grand <- valA
if (valA<valB) {
petit <- valA
grand <- valB
} # finsi
#################################################
# solution 3 avec fonctions de PHP
#################################################
petit <- min( valA, valB )
grand <- max( valA, valB )
#################################################
# #
# à partir de valA, valB et valC, #
# on met dans tpetit la plus petite valeur #
# dans milieu la valeur du milieu #
# et dans tgrand la plus grande valeur #
# #
#################################################
#################################################
# solution 1 sans fonction de PHP (et sans else)
#################################################
# les cas sont triés par ordre alphabétique :
# valA valB valC puis valA valC valB etc.
if ( (valA<valB) & (valB<valC) ) {
tpetit <- valA
milieu <- valB
tgrand <- valC
} # fin si cas 1
if ( (valA<valC) & (valC<valB) ) {
tpetit <- valA
milieu <- valC
tgrand <- valB
} # fin si cas 2
if ( (valB<valA) & (valA<valC) ) {
tpetit <- valB
milieu <- valA
tgrand <- valC
} # fin si cas 3
[...] # il y a 6 cas en tout à écrire
if ( (valC<valA) & (valA<valB) ) {
tpetit <- valC
milieu <- valA
tgrand <- valB
} # fin si cas 6
####################################################
# solution 2 sans fonction de PHP avec des si emboités
####################################################
if (valA<valB) {
if (valB<valC) {
tpetit <- valA
milieu <- valB
tgrand <- valC
} else {
tpetit <- valA
milieu <- valC
tgrand <- valB
} # fin si valB<valC
} else {
if (valA<valC) {
[...] # il y a 6 cas en tout à écrire
} # fin si valA<valB
#################################################
# solution 3 sans fonction de PHP avec si en cascade
#################################################
if ( (valA < valB) & (valB < valC) ) {
# ordre valA, valB, valC
} else { if ((valA < valC) et (valC < valB) ) {
# ordre valA, valC, valB
} else { if ((valB < valA) et (valA < valC)) {
# ordre valB, valA, valC
} else { if ((valB < valC) et (valC < valA))
[...]
} # fINSI (valB < valC) et (valC < valA)
} # finsi (valB < valA) et (valA < valC)
} # FINSI (valA < valC) et (valC < valB)
} # FINSI (valA < valB) et (valB < valC)
#################################################
# solution 4 -- non évidente -- avec fonctions de PHP
#################################################
tpetit <- min( valA, min(valB,valC) )
milieu <- min( max(valA,valB), min( max(valA,valC),max(valB,valC) ) )
tgrand <- max( valA, max(valB,valC) )
#################################################
# solution 5 avec fonctions de PHP
#################################################
tri <- sort( c(valA,valB,valC) )
tpetit <- tri[ 1 ]
milieu <- tri[ 2 ]
tgrand <- tri[ 3 ]
*/
-
Voici le texte d'une page minimale et valide qui affiche bonjour à l'aide de fonctions personnelles ; le code-source des fonctions utilisées est : mesfonctions.php.
Pour les expert(e)s : consulter std.php
-
Consulter le code-source de la solution bonjour2.php et le code-source des fonctions utilisées : mesfonctions2.php ; on pourra vérifier que le code-source des h1 est identique.
L'intérêt de tnh est multiple : c'est PHP qui ouvre et ferme les balises, c'est plus "conceptuel" et on ne voit plus directement les balises, c'est plus court à écrire et c'est valide. De plus toutes les fonctions hi ont le même comportement puisqu'elles sont toutes écrites par la même fonction.
-
Consulter le code-source de la solution sen_age_rep.php ; on n'est pas obligé(e) de recopier le formulaire pour tester le code car avec method='GET' on peut tester le fichier réponse via son URL en ajoutant ?age= avec la valeur à tester.
-
Solution volontairement non corrigée sur cette page pour l'examen de décembre 2014. Celles et ceux qui viennent en TP auront la correction en "live".
<?php
include("std.php") ;
form("histoire.php","get"," onclick='return(false)' " ) ;
p("texte") ;
echo "Quelle est ta date préférée ?\n" ;
input_text("datep","1515") ;
br() ;
nbsp(3) ;
sdl() ;
input_submit("envoie") ;
finp() ;
finform() ;
?>
Par contre, voici la réponse au début de la question 2, pour tester si l'utilisateur a bien entrée une date préférée :
<?php
# initialisation
$an = "" ;
# affectation éventuelle
if (isset($_GET["datep"])) {
$an = $_GET["datep"] ;
} ; # fin si
# vérification que le champ est bien rempli
if ($an=="") {
echo " Incorrect, veuillez saisir une date. " ;
} else {
echo " Allons-y pour $an " ;
} ; # fin si
Pour l'examen de juin 2017, voici le code XHTML :
<h1> Pluriel de mots en anglais </h1>
<form action="http://www.SEN.fr/verifPluriel.php">
<p> Choisissez un mot </p>
<p>
<input type="radio" name="b" value="1" /> eye
</p>
<p>
<input type="radio" name="b" value="2" /> fish
</p>
<p>
<input type="radio" name="b" value="3" /> elf
</p>
<p>
taper ici le pluriel du mot choisi
<input type="text" id="unMot" name="unMot" />
</p>
<p>
<input type="submit" />
</p>
</form>
Le code en PHP conceptuel est listé ci-dessous :
<?php
include("std.php") ;
h1("Pluriel de mots en anglais") ;
form("http://www.SEN.fr/verifPluriel.php") ;
p() ;
echo " Choisissez un mot " ;
finp() ;
p() ;
input_radio("b","1","eye") ;
finp() ;
p() ;
input_radio("b","2","fish");
finp() ;
p() ;
input_radio("b","3","elf") ;
finp() ;
p() ;
echo " taper ici le pluriel du mot choisi " ;
input_text("unMot"," ") ;
finp() ;
p() ;
input_submit("Envoyer") ;
finp() ;
finform() ;
?>
-
Consulter le code-source de la solution ldc.php et le code-source des fonctions utilisées : mesfonctions3.php. Pour légumes, on utilise urlencode dans le lien Google et on fait un test pour utiliser le mot legumes (donc sans accent) pour les images...
-
Consulter le code-source du formulaire sen_hist_form.php et le code-source de la correction des réponses sen_hist_rep.php.
Pour celles et ceux qui préfèreraient une solution "conceptuelle", c'est-à-dire en PHP sans aucune balise, donc avec un code "plus beau" et "plus propre", on pourra consulter le code-source du formulaire sen_hist_form_c.php et le code-source de la correction des réponses sen_hist_rep_c.php.
-
Les titres sont produits à l'aide la fonction h1() en PHP conceptuel.
-
La page sen_quests1.php contient juste le tirage aléatoire ; consulter son code-source pour voir comment cela fonctionne.
Corrigé du TP DSCS numéro 7 (énoncé) Php et Mysql
-
La requête SQL qui compte le nombre d'hommes (sexe=0) est
SELECT COUNT(*) FROM ronfle WHERE sexe=0 ;
Celle qui compte le nombre d'hommes (sexe=0) qui fument (taba=1) et ronflent (ronfle=1) est
SELECT COUNT(*) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;
Si on sait qu'il y a 75 hommes, la requête SQL qui calcule le pourcentage d'hommes qui fument et ronflent par rapport au nombre d'hommes en tout est
SELECT 100*( COUNT(*)/75 ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;
Si on a stocké dans la variable PHP nommée nhom le nombre d'hommes, la requête SQL qui calcule le pourcentage d'hommes qui fument par rapport au nombre d'hommes en tout devient pour PHP
SELECT 100*( COUNT(*)/$nbhom ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;
L'arrondi du pourcentage via SQL s'écrit alors
SELECT ROUND( 100*( COUNT(*) /$nbhom) ) FROM ronfle WHERE sexe=0 AND taba=1 AND ronfle=1 ;
Mais si on préfere arrondir en PHP le pourcentage mis dans la variable nommée pct il faut écrire
$pct_ar = round( $pct , 0 ) ;
Il est certainement préférable de laisser SQL faire tout le travail.
Pour lister les 10 plus jeunes femmes qui ronflent par age croissant en SQL, il faudrait écrire
SELECT * FROM ronfle WHERE sexe=1 AND ronfle=1 ORDER BY age LIMIT 10 ;
Le seul problème est qu'il y a 25 femmes en tout et seulement 5 qui ronflent. La partie LIMIT 10 est donc inutile ici.
La page sen_ronfle.php montre les différents résultats ; consulter le code-source pour le détail de la connexion, du listage des femmes... On remarquera que tout le code-source est conceptuel, c'est-à-dire sans balise.
Pour la production d'histogrammes, voir histo.php.
-
La page sen_quests1.php contient juste le tirage aléatoire ; consulter son code-source pour voir comment cela fonctionne.
La page sen_quests2.php contient la solution complète ; son code-source, bien que court à lire, se révèle très intéressant. Les sous-programmes utilisés sont dans sen_quests3.php (plus long à lire).
On remarquera que, là encore, tout le code-source est conceptuel, c'est-à-dire sans balise.
Code-source de cette page.
|
Retour à la page principale de
(gH)