3.

GESTION DE TP3 HTML Cours

L’INFORMATION
Architecture client/serveur 1/11

PROBLEMATIQUE
Transmettre un identifiant et un mot de passe à un serveur pour accéder à des données présentées dans une page Web.

CONDITIONS DE DEROULEMENT DE L’ACTIVITE

Phases de
travail Objectifs Activités
Comprendre le modèle client-serveur appliqué aux
A) Mise en
pages web. Lecture de la mise en situation.
situation
Programmer un formulaire dans lequel sera saisi un Construire un site Web constitué de deux
mot de passe et un identifiant. pages. La première contiendra un formulaire
B) Etude de la Acquérir des informations (température, humidité et permettant d’entrer un identifiant et un mot
problématique luminosité) située dans une base de données (fichier de passe afin d’accéder à la deuxième. Cette
texte) avec un script PHP et les présenter dans une page dernière présentera des informations dans un
Web. tableau.
Compléter un questionnaire de synthèse
Utiliser des CSS pour définir l’aspect d’une
C) Synthèse Modifier une page web en séparant la forme du fond.
page Web.

RESSOURCES DOCUMENTAIRES, LOGICIELS ET MATERIELS

PC + Navigateur (Internet explorer, Mozilla etc..) + Wamp Serveur + Notepad++
+ dépliant des balises HTML, liste des propriétés CSS.
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 2/11

1 MISE EN SITUATION

1.1 Présentation de l’activité de projet

Au cours d’un projet « Station météo », on demande d’acquérir les
grandeurs physiques ambiantes et les présenter dans une page Web
installée sur un serveur Apache. Ainsi, ces informations pourront être
consultées avec un navigateur.

Pour cela, on demande de mettre en œuvre une architecture matérielle

telle que celle illustrée par le schéma de l’annexe 1.

Ce schéma peut être décomposé en trois parties :

 Le serveur Apache chargé d’acquérir les valeurs des grandeurs physiques, de les mémoriser et de
générer la page Web assurant leur présentation.
 Le client Panda II (associé au module Arduino) chargé de transmettre périodiquement la valeur des
grandeurs physiques au serveur.
 Les PC client utilisés pour consulter la page web « Grandeurs physiques » ci-dessus.

Cette organisation fait apparaitre un modèle client/serveur appliqué aux pages Web.

Aujourd’hui, nous nous occuperons d’afficher des valeurs sur une page Web via le serveur Apache.

1.2 Architecture client/serveur

1.2.1 Généralités
L’architecture client/serveur désigne un mode de communication entre
plusieurs composants d’un réseau . Chaque entité est considérée
comme un client ou un serveur. Chaque logiciel client peut envoyer des
requêtes à un serveur. Un serveur peut être spécialisé en serveur
d’application, de fichiers, de terminaux, ou encore de messagerie
électronique.

Regardez votre cours pour plus d’informations.

1.2.2 HyperText Transfert Protocol, HTTP

La consultation de pages sur un site Web a un fonctionnement basé sur l’architecture client/serveur.
L’internaute connecté au réseau via son ordinateur et un navigateur Web constituent le client. Le serveur
correspond à l’ordinateur contenant les applications qui délivrent les pages demandées.
Dans ce cas, c’est le protocole de communication HTTP qui est utilisé.

L’HyperText Transfert Protocol, plus connu sous l’abréviation HTTP, littéralement le « protocole de transfert
hypertexte », est le protocole de communication client/serveur développé pour le World Wide Web.
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 3/11

Les navigateurs sont les clients(Firefox, Safari, Internet Explorer…). Ces clients se connectent à des serveurs
HTTP tels qu’Apache ou IIS (Internet Information Service).

Les méthodes
Dans le protocole HTTP, une méthode est une commande spécifiant un type de requête, c'est-à-dire qu’elle
demande au serveur d’effectuer une action. En général, l’action concerne une ressource identifiée par l’URL qui
suit le nom de la méthode.

Les méthodes les plus utilisées sont GET et POST.

C’est la méthode la plus courante pour demander une ressource. Une requête
GET
GET est sans effet sur la ressource.
Cette méthode doit être utilisée pour ajouter une nouvelle ressource, comme un
POST message sur un forum, un article dans un site ou encore un login et un mot de
passe.

2 ETUDE DE LA PROBLEMATIQUE

2.1 Présentation

Deux modes de communication sont mis en œuvre dans l’architecture décrite à l’annexe 1.
 Un mode consultation de la page web « Grandeurs physiques» (entre un client 1, 2… n) et le serveur,
 Un mode transmission des valeurs des grandeurs physiques (entre le module Penda II et le serveur).

Ces deux modes vont nous permettre d’illustrer la communication entre un client et le serveur. Pour cela,
vous allez mettre en œuvre la méthode GET citée précédemment.
Remarque : pour des raisons de sécurité, on n’utilise pas une méthode GET pour transmettre un login et un
mot de passe. Dans ce TP, ceci est réalisé à des fins pédagogiques.
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 4/11
 Description du mode « Consultation »
La page de présentation des grandeurs physiques est accessible à condition de disposer d’un login et
d’un mot de passe. Le comportement attendu est représenté ci-dessous :
(2) Requête SERVEUR
Le navigateur envoie l’URL
NAVIGATEUR

http://localhost/TP3HTML/index.html
(1) L’utilisateur se
connecte au serveur.

(3) Réponse
Le serveur renvoie la page index.html

(4) L’utilisateur (7) Le serveur

complète le traite les
formulaire. (6) Requête (méthode GET) données avec le
Le navigateur envoie les données dans l’URL script acces.php
(5) L’utilisateur
envoie les données http://localhost/TP3HTML/acces.php?login=admin
au serveur. 1234 &motpasse=1234

(8) Réponse
si (Identifiant = admin) et (Mot de passe = 1234) alors
affichage de la page TblGphy.php
(8) Réponse
sinon affichage

<-ou->

 Description du mode « Transmission des grandeurs physiques »

Cette transmission sera réalisée par le module Panda II dans le projet.

Dans ce TP, "vous allez prendre la place" du module Panda II en entrant manuellement les valeurs
des grandeurs physiques dans le champ URL (Uniform Resource Locator) d’un navigateur.
Exemple d’URL : http://localhost/TP3HTML/ TblGphy2.php?Temp=21.0&Hum=62&Lum=0
Script PHP de traitement des données Données à traiter

En résumé : Il est possible de « passer » des informations à un script à l’aide d’un formulaire. L’information
transmise est renseignée par l’utilisateur du navigateur client puis transmise selon la méthode choisie (GET ou
POST) au serveur qui, à l’aide d’un script PHP peut exploiter cette information (sauvegarde, traitement …) .
Il est aussi possible d’assurer une transmission de l’information sans avoir recours à l’utilisateur du client. Une
solution consiste à créer un URL comme le ferait la méthode GET.
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 5/11
2.2 Préparation et test du serveur Apache

2.2.1 Présentation
Le serveur Apache utilisé dans ce TP fait partie de la plateforme de
développement Web sous Windows WAMPSERVER accessible à :
http://www.wampserver.com/

WAMP : Windows Apache MySQL PHP

Cet ensemble de logiciels est installé sur le disque dur de votre PC. Il est accessible sous c:/wamp. Les
fichiers du site à développer devront OBLIGATOIREMENT se situer dans le répertoire www accessible
par c:/wamp/www.

2.2.2 Préparation
 Démarrez le serveur en cliquant sur l’icône ou à partir de la liste des programmes :
Démarrer  Tous les programmes  Wampserver. Après le démarrage du server, un
clic sur l’icône dans la zone de
 Copier le répertoire du TP (TP3HTML) dans notification doit vous donner la
figure ci-contre.
le répertoire www du serveur Apache.

Pour récupérer le répertoire du TP

2.2.3 Test
 Vous avez plusieurs possibilités pour faire apparaitre la page de garde du serveur et accéder au
répertoire du projet :
o Soit en cliquant sur puis en sélectionnant localhost,
o Soit en ouvrant un navigateur et en entrant l’URL http://localhost
o Soit en ouvrant un navigateur et en entrant l’URL http://127.0.0.1

La page ci-contre doit apparaître pour indiquer que le

serveur est prêt à fonctionner ! 

Le répertoire TP3HTML doit être présent, sur la page, dans la liste "Vos projet »

2.2.4 Réalisation du mode « Consultation »

Objectif : Programmer un formulaire dans lequel sera saisi un mot de passe et un identifiant.

2.3 Programmation du formulaire dans la page « index.html »

Les formulaires permettent de transmettre des informations du client vers le serveur.

Un formulaire est encadré par les balises <form> Ligne de

</form>. texte
Bouton
Des objets tels que les lignes de texte, les boutons
d’option, les cases à cocher sont placées à l’intérieure
de ces balises afin de recueillir des informations.

Une fois le formulaire complété, un bouton « Envoyer » permet de transmettre les informations au
serveur à l’aide d’une méthode d’envoi (GET ou POST)
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 6/11
La page index.html du site à réaliser doit contenir un
formulaire permettant d’entrer un identifiant et un mot de
passe.

Cette page devra avoir la présentation ci-contre.

Dans un premier temps, on ne se souciera pas de

l’alignement des différents objets.
Voici la démarche à suivre :

Ouvrez l’éditeur Notepad++ puis à partir de Fichier -> Ouvrir, chargez le fichier « index.html », situé dans le
répertoire c:/wamp/www/TP3HTML/.

Complétez-le fichier « index.html » comme ci-dessous :

index.html acces.php
<html>
<html>
<!-- Fichier index.html
Login + code d'accès <head>
--> <title> Accès aux grandeurs physiques </title>
<head> </head>
<title> Accès aux grandeurs physiques
</title> <body>
</head> <?php
if (($_GET["login"] == "admin") &&
<body > ($_GET["motpasse"] == "1234"))
<p>Accès aux grandeurs physiques</p> {
<form action="acces.php" method="GET"> header('Location: TblPhy.php');
Identifiant: }
<input type="text" name="login" else
size="20"/></br> echo "Acces refusé";
Mot de passe: ?>
<input type="password" </body>
name="motpasse" size="20"/></br>
<input type="submit" name="EnvValeur" </html>
value="Envoyer"/>
</form> Identifiant Mot de passe
</body>

</html>

Testez votre fichier en entrant l’URL : http://localhost/TP3HTML (admin et 1234 afin de voir apparaître
le tableau des grandeurs physiques)
Lorsque vous cliquez sur , le navigateur transmet
Attention : Vos fichiers devront toujours être testés l’URL suivant au serveur.
sur le serveur Apache installé sur votre PC avec un http://localhost/TP3HTML/ acces.php?login=admin&
URL tel que: motpasse=1234
http://localhost/TP3HTML/<nomdufichier> …
ou
http://127.0.0.1/TP3HTML/<nomdufichier> …
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 7/11

2.4 Analyse des fichiers

 Analysez le fichier « index.html » ci-dessus pour répondre aux questions Q1, Q2, Q3 et Q4 :

Q1) Donnez le nom de la balise permettant de créer un objet de formulaire ? Répondez sur le DR1.

Q2) Donnez le nom de l’attribut permettant de différencier les objets du formulaire ? Répondez sur le DR1.

Q3) Donnez le nom des informations transmises par le formulaire ? Répondez sur le DR1.

Q4) Donnez le nom de l’attribut permettant de désigner le script auquel les informations contenues dans le
formulaire sont destinées ? Donnez le nom de ce script. Répondez sur le DR1.

 Analysez les fichiers « index.html » et « acces.php » ci-dessus pour répondre aux questions Q5 et
Q6 :
Q5) Quelles balises utilise-t-on pour identifier le code PHP dans le fichier « acces.php » ? Répondez sur le DR1.

Remarque : En PHP, un mot précédé de $ est une variable.

Q6) Comment le script de traitement « acces.php » est-il capable de récupérer les données du formulaire ?
Répondez sur le DR1.
Indication: essayez de trouver des mots identiques dans chacun des fichiers.

Remarque : On rappelle qu’une structure alternative simple s’écrit : si (condition) alors action 1
sinon action 2
finsi

Q7) Ecrivez l’algorithme correspondant au code ci-dessous sur le DR1 :

if (($_GET["login"] == "admin") && ($_GET["motpasse"] == "1234")) // Remarque &&  ET
{
header('Location: index1.php');
}
else
echo "Acces refusé";

Ouvrez le fichier « acces.php », situé dans le répertoire c:/wamp/www/TP3HTML/ à partir

de Notepad++. Personnalisez l’identifiant puis le mot de passe. Testez le fonctionnement.

Q8) Remplacez && par || (accessible par les touches Alt Gr 6) dans le fichier « acces.php » et testez le
fonctionnement.
Indications : mettez un identifiant juste et un mot de passe faux puis l’inverse.

Que remarquez-vous ? Quelle opération logique réalise l’opérateur || ? Répondez sur le DR1.
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 8/11

2.5 Réalisation du mode « Transmission des grandeurs physiques »

Objectif : Acquérir des informations (température, humidité et luminosité) avec un script PHP et les présenter
dans une page Web.

Ouvrez le fichier « TblGphy.php », situé dans le répertoire c:/wamp/www/TP3HTML/ avec Notepad++.

Bon, c’est un peu compliqué !

Dans le projet, les données seront sauvegardées dans un fichier .txt (voir l’annexe 1). Dans ce TP, nous allons faire
plus simple et « court-circuiter » le fichier .txt afin de nous concentrer sur la transmission des données dans un
URL.

Fermez le fichier « TblGphy.php » et ouvrez le fichier « TblGphy2.php », situé dans le répertoire

c:/wamp/www/TP3HTML/ avec l’éditeur Notepad++. Ce fichier doit contenir le texte ci-dessous.

TblGphy2.php
<html>
<head>
<title> Grandeurs physiques </title>
</head>

<body>
<div align="center">
<p> Grandeurs physiques </p>
<table border="1">
<tr>
<td> Température = </td>
<td><?php echo
$_GET["Temp"]; ?> </td>
<td> °C </td>
</tr>
Résultat attendu !
</table>
</div>
</body>
</html>

Testez le fichier en entrant l’URL : http://localhost/TP3HTML/TblGPhy2.php?Temp=20.3

 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 9/11
Q9) Modifiez le fichier « TblGPhy2.php » pour obtenir le résultat ci-contre.
Imprimez le code source du fichier et joignez-le à votre document
réponse.

Testez le fichier en entrant l’URL : Résultat attendu !

http://localhost/TP3HTML/TblGPhy2.php?Temp=20.2&Hum=40

Q10) Modifiez le fichier « TblGPhy2.php » pour obtenir les résultats ci-dessous. Imprimez le code source du
fichier et joignez-le à votre document réponse.

Remarque : Si vous ne trouvez pas la solution pour la sélection des images, consultez le fichier TblGPhy.php.

http://localhost/TP3HTML/TblGPhy2.php?Temp=21.3&Hum=60&Lum=1

http://localhost/TP3HTML/TblGPhy2.php?Temp=21.3&Hum=60&Lum=0

3 SYNTHESE
Complétez le questionnaire de synthèse du document réponse 3.

Ouvrez le fichier « TblGphy.php », situé dans le répertoire

c:/wamp/www/TP3HTML/ avec l’éditeur Notepad++, modifiez-le pour
qu’il corresponde à la copie d’écran ci-contre puis réalisez son design
avec une feuille de styles (CSS) que vous nommerez meteo.css

Remarques : Pour tester le design sans avoir à installer un serveur Apache :

- vous désactiverez les balises < ?php ?> en les entourant de balises de
commentaires html :

< !-- Voici un commentaire -->

Exemple : < !-- <?php // Fermeture du fichier contenant les données

fclose($FValeur); ?>
-->
- vous renommerez le fichier « TblGphy.php » en « TblGphy.html »

Contraintes à respecter pour le design

 Propriétés de la page à choisir et à modifier
- Famille de caractères
- Couleur de fond
 3. GESTION DE TP3 HTML Cours
L’INFORMATION
Architecture client/serveur 10/11
- Couleur du texte

 Propriétés du titre à choisir et à modifier

- Taille au choix (plus grand que le texte)

 Propriétés du tableau
- Centré dans la page
- Bord extérieur apparent : au choix
- Texte : taille au choix
Les mots « Température, Humidité, … » doivent se différentier du reste (couleur différente etc…)

 Lune et soleil à remplacer