doc98 Fonctionnement du système Conception du système
download 
Plainte Transcription
98 Fonctionnement du système Conception du système
DEFRANCE Livre Page 98 Jeudi, 6. d cembre 2007 8:30 08
98
Ateliers de création d’applications Ajax-PHP
PARTIE III
Cette structure est composée :
• d’une page HTML (index.html) identique à celle de l’atelier précédent mais dans
laquelle nous avons attribué un identifiant à chaque balise <div> et ajouté une instruction
pour lier la page HTML à la feuille de styles ;
• d’un simple fichier texte (gainMax.txt) identique au précédent ;
• d’une feuille de styles (style.css) dans laquelle nous avons défini les différents styles
correspondant aux identifiants des balises <div>.
Fonctionnement du système
Le fonctionnement du système est semblable à celui de l’atelier précédent hormis le fait
que la mise en forme des éléments <div> sera effectuée par une feuille de styles externe et
que le message présentant la somme gagnée n’apparaîtra à l’écran que lorsque le résultat
de la réponse HTTP sera disponible.
Conception du système
Nous allons commencer par modifier la page HTML en attribuant des identifiants spécifiques à chaque balise <div>. Pour cela, ouvrez la page HTML précédente (index.html) et
sauvegardez-la sous le même nom dans un nouveau répertoire nommé /atelier8-2/
(profitez-en pour faire ensuite la même opération avec le fichier gainMax.txt qui est lié à
cette page). Ajoutez ensuite les différents attributs id et leur nom dans les balises <div>
concernées avec l’éditeur de Dreamweaver en mode code (voir code 8-1 et le repère 1 de
la figure 8-9).
Code 8-3 :
<div id="page">
<!--zone du résultat-->
<div id="info">
Bravo, vous avez gagné
<span id="resultat">0</span>
euros
</div>
<!--zone du formulaire-->
<div id="formulaire">
<form method="GET">
<input name="button" type="button" onClick="jouer();" value="JOUER" />
</form>
</div>
</div>
Placez-vous ensuite dans la balise <head> de la page HTML et ajoutez la ligne de code cidessous (voir code 8-4 et le repère 2 de la figure 8-9) qui permettra de lier les identifiants
précédemment ajoutés aux balises <div> avec la feuille de styles (style.css) que nous
allons créer ensuite.
Code 8-4 :
<link rel="stylesheet" type="text/css" href="style.css" />
DEFRANCE Livre Page 99 Jeudi, 6. d cembre 2007 8:30 08
Applications Ajax-PHP synchrones
CHAPITRE 8
Figure 8-9
Code de la page index.html après l’ajout de la feuille de styles style.css
Créez une nouvelle feuille de styles avec Dreamweaver (depuis le menu Fichier>Nouveau,
cliquez sur le bouton Pages vierges puis sélectionnez CSS dans la liste proposée). Saisissez ensuite les différentes règles de style ci-dessous (voir code 8-5). Enregistrez la feuille
de styles sous le nom style.css dans le même répertoire que la page HTML.
Code 8-5 :
body, h1, h2, p { font-size: 1em; margin: 0; padding: 0; }
body {
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
}
#page {
position: relative;
margin: 0 auto;
width: 600px;
height: 200px;
border-top: medium solid #ff0000;
border-bottom: medium solid #ff0000;
}
#info {
position: absolute;
left: 100px;
top: 30px;
}
99
DEFRANCE Livre Page 100 Jeudi, 6. d cembre 2007 8:30 08
100
Ateliers de création d’applications Ajax-PHP
PARTIE III
#resultat {
font-weight: bold;
}
#formulaire {
position: absolute;
left: 290px;
top: 100px;
}
Les différentes règles de style permettront d’améliorer la présentation de la page. Ainsi,
la règle de style page permettra de créer un conteneur principal et d’afficher un trait rouge
en haut et en bas de cette zone centrale pour bien la délimiter. Les règles de style info et
formulaire permettront de placer le bouton JOUER et la zone de résultat d’une manière
relative au conteneur page. Enfin, la règle de style resultat permettra d’afficher le résultat
placé dans la balise <span> en gras pour bien le mettre en évidence.
Ressources sur les CSS
Pour plus d’informations sur les styles, reportez-vous au chapitre 17 de cet ouvrage.
Après avoir saisi et enregistré la feuille de styles, revenez à la page HTML et passez la
fenêtre du document en mode Création (voir repère 1 de la figure 8-10). Si tout est
correct, les styles devraient alors être appliqués à la page directement dans la fenêtre
document de Dreamweaver (voir figure 8-10). Vous pouvez aussi demander un aperçu de
la page dans le navigateur (à l’aide du bouton Aperçu, voir repère 2 de la figure 8-10, ou
plus simplement en utilisant le raccourci clavier F12) pour vous assurer que tous les
styles fonctionnent aussi dans le navigateur.
Figure 8-10
Affichage
de la page
index.html
en mode
Création afin
de vérifier que
les styles sont
bien appliqués
à la page HTML
Nous allons maintenant modifier la règle de style de l’identifiant de la zone de résultat
pour la rendre invisible lors du chargement initial de la page. Pour cela, ouvrez la feuille
DEFRANCE Livre Page 101 Jeudi, 6. d cembre 2007 8:30 08
Applications Ajax-PHP synchrones
CHAPITRE 8
101
de styles et ajoutez la directive visibility: hidden (à noter que nous aurions aussi pu
utiliser la directive display: none) à la règle de style dont l’identifiant est info (voir
code 8-6). Enregistrez ensuite votre feuille de styles et retournez dans la page HTML en
mode Création. La zone de résultat et son message doivent maintenant avoir disparu.
Code 8-6 :
#info {
position: absolute;
left: 100px;
top: 30px;
visibility: hidden
}
Il nous reste maintenant à ajouter l’instruction qui rendra visible la balise dont l’identifiant se nomme info dès que la valeur du résultat sera connue. Pour cela nous allons
manipuler le DOM en utilisant la méthode getElementById() pour référencer l’élément
de la balise <div> à l’aide de son identifiant info. Nous agirons ensuite sur cet élément via la
propriété style.visibility pour affecter à la propriété visibility sa nouvelle valeur visible
qui, comme son nom l’indique, rendra visible l’élément concerné (voir code 8-7).
Code 8-7 :
/*-----------------------------MOTEUR AJAX-----------------------*/
function jouer() {
/*--------------------Config et envoi de la requête SYNCHRONE : */
objetXHR = new XMLHttpRequest();
objetXHR.open("get","gainMax.txt", false);
objetXHR.send(null);
/*--------------------------------Attente du retour SYNCHRONE : */
var nouveauGain = objetXHR.responseText;
document.getElementById("resultat").innerHTML=nouveauGain;
document.getElementById("info").style.visibility="visible";
}
/*--------------------------FIN DU MOTEUR AJAX----------------*/
Test du système
Ouvrez la page index.html dans le navigateur Firefox en appuyant sur la touche F12 de
Dreamweaver (ou avec la méthode de votre choix, revoir la procédure de test de l’atelier
précédent). Cette fois, les éléments doivent être mis en page selon les paramètres de la
feuille de styles à laquelle ils sont liés et aucun message de résultat par défaut ne doit
s’afficher au chargement de la page. Cliquez ensuite sur le bouton JOUER. Le résultat
maximum accompagné de son message introductif doivent maintenant s’afficher à
l’écran (voir repère 2 figure 8-11).
Figure 8-11
Test de la page HTML
de l’atelier 8-2.
Le message du résultat
(repère 2) doit s’afficher
uniquement après avoir
appuyé sur le bouton
JOUER (repère 1).
