DU-GL L3 alternance Conception de sites WEB Examen de février 2011 (corrigé) Durée : 2 heures Etape N 1 : HTML + CSS (5 points) Documents autorisés etape1.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>du-gl - L3 Alternance : examen février 2011</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <!-- =============== Création de l'interface ================ --> <div class="titre1"> Test de calcul arithmétique <div class="titre2"> L'addition <img src="./images/interr.gif" align="right"> <div class="operation"> <form> <table border="0"> <td class="operande">25</td> <td><span class="signe">+</span></td> <td class="operande" >32</td> <td><span class="signe">=</span></td> <td><input class="resultat" type="text"></td> <td colspan="5" class="suite"><input class="bsuite"type="button" value="suite"></td> </table> <!-- Zone d'explications --> <div class="aide"> <div class="titre2">comment procéder : <div> <ol> <li>remplir le champ texte avec le résultat de votre calcul</li> <li>cliquer sur le bouton "Suite" pour passer à l'opération suivante</li> </ol> Examen février 2011 Page 1 sur 8
<div class="conseil"> Cliquer sur cette zone pour la faire disparaître </body> </html> styles.css body background-color:#ffffaa; font-family:arial;.titre1 position absolute; top:15px; text-align:center; color:red; font-weight:bold; font-size:26px;.titre2 position absolute; top:15px; margin-left:30px; margin-top:20px; text-align:left; color:green; font-weight:bold; font-size:22px;.operation position absolute; top:45px; margin-left:80px; margin-top:50px; color:green; font-weight:bold;.operande width:145px; background-color:#cccccc; color:green; fontsize:18px; text-align:center;.resultat color:green; font-size:25px; text-align:center;.signe font-size:30px;.suite text-align:right; padding:20px;.bsuite font-size:22px;.aide position absolute; top:205px; margin-left:80px; color:#444444; background-color:#dddddd; font-size:16px; border-style:ridge; border-width:3px; border-color:red; width:500px;.conseil margin:35px; font-size:14px; color:red; font-weight:bold; Etape N 2 : Javascript (5 points) La zone contenant l'aide doit être rendue visible ou invisible à volonté. Pour l'identifier on ajoute l'attribut id="z_aide". Ensuite il suffit d'insérer en fin de document le code javascript suivant : <!- =============== Définition de l'interactivité ============= --> <script style="text/javascript"> // Initialisation dynamique de l'interactivité : propriétés d'objets // Actions de l'interactivité function cacher() document.getelementbyid("z_aide").style.visibility="hidden"; function montrer() document.getelementbyid("z_aide").style.visibility="visible"; // Associations (objet,événement) ==> action document.getelementbyid("z_aide").onclick=cacher; document.getelementbyid("interr").onclick=montrer; </script> Examen février 2011 Page 2 sur 8
Etape N 3 : PHP - Mysql (5 points) En supposant la mise à disposition des documents proposés dans le sujet, il suffit de partir du code HTML de la question précédente et lui ajouter la partie php écrite en rouge. Le script "etape3.php" peut s'écrire comme suit : etape3.php <?php include("acces.inc"); // ===== Traitement des données et préparation du HTML dynamique = $req="select oper1,oper2 FROM addition WHERE num_oper=1"; $rep=requete($req); $ligne=mysql_fetch_row($rep); $oper1=$ligne[0]; $oper2=$ligne[1];?> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>du-gl - L3 Alternance : examen février 2011</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <!-- =============== Création de l'interface ================ --> <div class="titre1"> Test de calcul arithmétique <div class="titre2"> L'addition <div class="operation"> <form> <table border="0"> <td class="operande"><?php echo $oper1;?></td> <td><span class="signe">+</span></td> <td class="operande" ><?php echo $oper2;?></td> <td><span class="signe">=</span></td> <td><input class="resultat" type="text"></td> <td colspan="5" class="suite"><input class="bsuite"type="button" value="suite"></td> </table> <div id="z_aide" class="aide"> <div class="titre2">comment procéder : <div> <ol> <li>remplir le champ texte avec le résultat de votre calcul</li> <li>cliquer sur le bouton "Suite" pour passer à l'opération suivante</li> </ol> Examen février 2011 Page 3 sur 8
<div class="conseil"> Cliquer sur cette zone pour la faire disparaître <!- =============== Définition de l'interactivité ============= --> <script style="text/javascript"> // Initialisation dynamique de l'interactivité : propriétés d'objets // Actions de l'interactivité function cacher() document.getelementbyid("z_aide").style.visibility="hidden"; // Associations (objet,événement) ==> action document.getelementbyid("z_aide").onclick=cacher; </script> </body> </html> Etape N 4 : PHP - Mysql (5 points) La première fois que le script est appelé, aucune donnée ne lui est transmise. En supposant que le champ résultat est nommé "reponse", le test if (!isset($_request["reponse"])) permet de savoir si c'est la première fois que le script est appelé. Dans ce cas on renvoie la première série de valeurs d'opérateurs if (!isset($_request["reponse"])) // premier appel (sans réponse) $numoper=1; et on mémorise via une variable de session le numéro de la série envoyée : $_SESSION["numOper"]=$numOper; Si une donnée est transmise lors de l'appel, on doit enregistrer la valeur transmise et envoyer la série d'opérateurs suivante : // traitement de la réponse $reponse=$_request["reponse"]; enregistrer($reponse); // opération suivante $numoper=$_session["numoper"]; $numoper+=1; ; Il est également indispensable de mémoriser le numéro de la série envoyée. Pour savoir si la dernière série de valeurs d'opérateurs a été envoyées, il suffit de voir si on peut en obtenir une autre. Dans le cas contraire on passe le relai au script "bilan.php". $req="select oper1,oper2 FROM addition WHERE num_oper=$numoper"; Examen février 2011 Page 4 sur 8
$rep=requete($req); $num=mysql_num_rows($rep); if ($num>0) // il y a une opération à proposer $ligne=mysql_fetch_row($rep); $oper1=$ligne[0]; $oper2=$ligne[1]; // Toutes les opérations ont été faites header("location:bilan.php"); Dans la partie HTML on prendra soin d'indiquer dans la balise <form> qu'il faut passer les données au script lui-même : <form action="<?php echo $_SERVER["PHP_SELF"];?>"> Sans rien changer d'autre à la partie HTML+JS on écrit la partie PHP comme ci-dessous : <?php // ===== Mise en oeuvre du mécanisme de session ================ session_start(); // ===== Insertion de code externe ============================= include("acces.inc"); include("traitements.inc"); // ===== Récupération des variables de session ================== if (!isset($_request["reponse"])) // premier appel (sans réponse) $numoper=1; // traitement de la réponse $reponse=$_request["reponse"]; enregistrer($reponse); // opération suivante $numoper=$_session["numoper"]; $numoper+=1; ; $_SESSION["numOper"]=$numOper; // ===== Traitement des données et préparation du HTML dynamique = $req="select oper1,oper2 FROM addition WHERE num_oper=$numoper"; $rep=requete($req); $num=mysql_num_rows($rep); if ($num>0) // il y a une opération à proposer $ligne=mysql_fetch_row($rep); $oper1=$ligne[0]; $oper2=$ligne[1]; // Toutes les opérations ont été faites header("location:bilan.php");?> Examen février 2011 Page 5 sur 8
On peut aussi souhaiter que la zone d'explications ne soit pas réaffichée à chaque nouvelle opération si l'utilisateur a souhaité la faire disparaître lors de l'opération précédente. Cette fois-ci on n'utilisera pas le mécanisme de session car ce qu'il faut mémoriser se passe du coté de l'utilisateur et non pas coté serveur. On va donc, en javascript, sauvegarder dans un nouveau champ caché <input name="visibilite" id="visibilite" type="hidden"> l'état de visibilité de la zone d'explications et le transmettre au script lors de chaque nouvel appel. // Actions de l'interactivité function cacher() document.getelementbyid("z_aide").style.visibility="hidden"; document.getelementbyid("visibilite").value="hidden"; function montrer() document.getelementbyid("z_aide").style.visibility="visible"; document.getelementbyid("visibilite").value="visible"; En fonction de cette information récupérée lors de chaque appel, le script générera le code adapté. // Initialisation dynamique de l'interactivité : propriétés d'objets document.getelementbyid("z_aide").style.visibility="<?php echo $mode_visibilite;?>"; document.getelementbyid("visibilite").value="<?php echo $mode_visibilite;?>"; La solution finale peut donc être : <?php // ===== Mise en oeuvre du mécanisme de session ================ session_start(); // ===== Insertion de code externe ============================= include("acces.inc"); include("traitements.inc"); // ===== Récupération des données ================== if (!isset($_request["reponse"])) // premier appel (sans réponse) $numoper=1; $mode_visibilite="visible"; // sert à connaître la visibilité de la zone d'explications // traitement de la réponse $reponse=$_request["reponse"]; enregistrer($reponse); // opération suivante $numoper=$_session["numoper"]; Examen février 2011 Page 6 sur 8
$mode_visibilite=$_request["visibilite"]; $numoper+=1; ; $_SESSION["numOper"]=$numOper; // ===== Traitement des données et préparation du HTML dynamique = $req="select oper1,oper2 FROM addition WHERE num_oper=$numoper"; $rep=requete($req); $num=mysql_num_rows($rep); if ($num>0) // il y a une opération à proposer $ligne=mysql_fetch_row($rep); $oper1=$ligne[0]; $oper2=$ligne[1]; // Toutes les opérations ont été faites header("location:bilan.php");?> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>du-gl - L3 Alternance : examen février 2011</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <!-- =============== Création de l'interface ================ --> <div class="titre1"> Test de calcul arithmétique <div class="titre2"> L'addition <img id="interr" src="./images/interr.gif" align="right"> <div class="operation"> <form action="<?php echo $_SERVER["PHP_SELF"];?>"> <table border="0"> <td class="operande"><?php echo $oper1;?></td> <td><span class="signe">+</span></td> <td class="operande" ><?php echo $oper2;?></td> <td><span class="signe">=</span></td> <td><input class="resultat" type="text" name="reponse"></td> <td colspan="5" class="suite"><input class="bsuite"type="submit" value="suite"></td> </table> <!-- Ajout d'un champ caché destiné à recevoir l'état de visibilité de la zone d'explications --> <input name="visibilite" id="visibilite" type="hidden"> Examen février 2011 Page 7 sur 8
<!-- Zone d'explications --> <div id="z_aide" class="aide"> <div class="titre2">comment procéder : <div> <ol> <li>remplir le champ texte avec le résultat de votre calcul</li> <li>cliquer sur le bouton "Suite" pour passer à l'opération suivante</li> </ol> <div class="conseil"> Cliquer sur cette zone pour la faire disparaître <!- =============== Définition de l'interactivité ============= --> <script style="text/javascript"> // Initialisation dynamique de l'interactivité : propriétés d'objets document.getelementbyid("z_aide").style.visibility="<?php echo $mode_visibilite;?>"; document.getelementbyid("visibilite").value="<?php echo $mode_visibilite;?>"; // Actions de l'interactivité function cacher() /* on fait disparaître la zone d'explications et on mémorise ce fait dans le champ caché pour en avertir le script lorsqu'il sera appelé */ document.getelementbyid("z_aide").style.visibility="hidden"; document.getelementbyid("visibilite").value="hidden"; function montrer() /* on fait apparaître la zone d'explications et on mémorise ce fait dans le champ caché pour en avertir le script lorsqu'il sera appelé */ document.getelementbyid("z_aide").style.visibility="visible"; document.getelementbyid("visibilite").value="visible"; // Associations (objet,événement) ==> action document.getelementbyid("z_aide").onclick=cacher; document.getelementbyid("interr").onclick=montrer; </script> </body> </html> Examen février 2011 Page 8 sur 8