TD.3 - LRI

TD1
Formulaires et cadres en HTML Un exemple de formulaire radio est donné par les instructions HTML
suivantes (extraites du formulaire d'examen sur www.lri.fr/~mdr : Q1 : Un entier A est représenté en binaire par 10101010 et un entier B par 01010101. Alors: A+B=127 en décimal A=B+1 en décimal A+B=255 en décimal A=B+11 en décimal Recopier ces instructions dans un nouveau fichier Dreamweaver que vous
sauvegarderez (f1.htm) puis que vous lirez avec Explorer. Ajouter au
fichier f1.htm un formulaire de type text comme par exemple.
Votre Nom :
Votre Age:
Les autres types importants sont Checkbox (comme radio), button et submit.
Rajouter au fichier f1.htm, l'instruction de « zone de texte »
(Textarea) :
et interpréter le nouveau fichier à l'aide de Netscape. On peut aussi
introduire directement des formulaires à l'aide des commandes : Insert
(Insertion) puis Form Object (Objet de Formulaire) : tester ces commandes
sur les différents types. Les cadres (Frames) : la version 1.2 du logiciel Dreamweaver permet de
définir des cadres à l'aide des commandes :Modify puis Frameset mais ne
suit pas la syntaxe d'HTML 4 (ce problème est résolu dans la version
Dreamweaver 3). Editer à l'aide de Bloc-notes les instructions suivantes
(vues en cours) d'un fichier g.htm que l'on interprètera à l'aide
d'Netscape:


Votre navigateur ne supporte pas les frames
Dans chacun des fichiers f1.html, f2.html, f3.html .f4.html, écrire un
formulaire de type différent. Créer avec Dreamweaver un système similaire
de cadres. T.D.2
HTML interactif : scripts clients
Comment saisir des informations écrites dans des formulaires ou
sélectionnées ou comment animer des pages? C'est tout le problème de
l'interface Client-Serveur et de la gestion de sites Web. Nous allons
étudier tout d'abord des exemples où l'interaction se fait au niveau du
Client à l'aide de scripts Javascript, puis au TD6 au niveau Serveur à
l'aide de scripts PHP. Interaction Client Lire à l'aide de Netscape et de Dreamweaver le fichier
www.lri.fr/~mdr/netscaperadio.htm (voir le lien sur la page du deug) et
observons le source. Dans l'entête se trouve :

function change(q){
if (q==1) {document.bgColor="red";}
if (q==2) {document.bgColor="red";}
if (q==3) {document.bgColor="green";}
if (q==4) {document.bgColor="red";}
}

Dans le corps du document le formulaire : Q1 : Un entier A est représenté en binaire par 10101010 et un entier B par 01010101. Alors:
A+B=127 en décimal

A=B+1 en décimal

A+B=255 en décimal

A=B+11 en décimal
On reprend le formulaire du TD 6 (auquel vous êtes encouragés à répondre)
auquel on adjoint des instructions onClick pour activer une action selon
le choix effectué. Si la réponse 1 ,2,3 ou 4 est selectionnée, alors on
appliquera la fonction change(i) sur l'argument i=1,2,3 ou 4. Observer que
onClick="change(1) est un paramètre de INPUT de la réponse 1. La fonction
change est définie dans l'entête et modifie la couleur de fond (rouge
pour les réponses 1,2,4 incorrectes et vert pour la réponse correcte 3). Modifier la couleur de vert à bleu pour la réponse correcte. Modifier
l'ordre des réponses pour que la réponse 1 soit correcte et affiche un fond
vert. (Pour ceux qui ont accès à Explorer, lire le fichier ieradio.htm qui
modifie la couleur du cadre de chaque réponse.) Considérons maintenant le questionnaires à 3 réponses du fichier
www.lri.fr/~mdr/deugtest3questions.htm que l'on recopiera dans un nouveau
fichier 3question.htm. Les réponses correctes sont données par le tableau R
de la partie script: ainsi R(1)=3 car la 3ième réponse à la question 1 est
correcte. On calcule un tableau T tel que T(i)=1 si la réponse à la
question i est correcte et T(i)=0 si la réponse est incorrecte. La variable
Total est la somme des T(i), i=1,2,3, calculée par la fonction total(form)
activée par le bouton Votre note?. La note affichée est Total*10/3 pour
normaliser à une note entre 0 et 10. Editer 3question.htm à l'aide de Dreamweaver en permutant les questions 1
et 3. Modifier les valeurs du tableau R dans les scripts pour que le test
soit correct, c'est-à-dire donne la même réponse que le test originel.
T.D.3
HTML interactif : scripts serveurs Les scripts serveurs utilisent le langage PHP (Hypertexte Preprocesseur).
La documentation se trouve sur http://www.php.net
Interaction serveur Lire le fichier deugphp.htm sur le site www.lri.fr/~mdr/deug1.html :
Exemple PHP
votre nom :


votre note :





Le fichier deug.php3 se trouve sur le serveur HTTP, www.lri.fr et sera
exécuté lorsque le bouton submit sera activé car le paramètre
action="http://www.lri.fr/~mdr/deug.php3 se trouve dans la balise .
Le fichier deug.php3 est :
PHP Test
Bonjour ,