M.
GUEYE PAPE EL HADJI
ABDOULAYE
[email protected]
77 929 99 93
Chapitre 1 :
Architecture Client Serveur.
Présentation de HTML.
Objectifs
Savoir configurer un serveur web et un serveur de base de donnée comme mysql
Créer des pages web statiques ou dynamiques.
Pré requis
Une bonne connaissance du web
Environnement de travail
Télécharger et installer Wampserver.exe Ou Easyphp.exe
Télécharger et installer un éditeur de texte comme Notepad++
1 Présentation de l’architecture client serveur:
De nombreuses applications fonctionnent selon l’architecture client/serveur qui
dispose de deux entités reliées par un réseau (intranet, internet, …) . Chaque entité
englobe l’aspect hardware (machine) et software (logiciel). Une machine cliente
exécute une application cliente qui interagit avec une application serveur qui tourne sur
une machine serveur et qui lui fournit un service.
NB : un même poste peut être client et serveur en même temps.
2 Dialogue client-serveur
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 1
WEB
Pour dialoguer et se comprendre une application cliente et une application serveur
utilisent un ensemble de règles communes (les protocoles) et suivent un modèle de
communications (OSI, TCP/IP, …).
2.1 La couche application et ses protocoles
Elle englobe les protocoles applicatifs et permet de relier une application au réseau.
Une application cliente sur une machine cliente utilise un protocole compatible à
celui utilisé par l’application serveur avec qui elle veut dialoguer.
(1) Exemples de protocoles applicatifs
HTTP: (HyperText Transfer Protocol) développé pour le Web il permet de
transferer des documents (au format HTML pour la plupart).
FTP : (File Transfer Protocol), est utilisé pour l'échange de fichiers situés sur deux
ordinateurs distants.
SMTP: (Simple Mail Transfer protocol) est utilisé pour transférer le courrier
électronique vers les serveurs de messagerie.
POP: (Post Office Protocol) permet de récupérer les courriers électroniques situés
sur un serveur de messagerie.
IMAP : (Internet Message Access Protocol) permet comme POP de récupérer les
courriers électroniques sur un serveur de messagerie mais en laissant les courriers
sur le serveur.
2.2 Exemple d’applications serveur et clientes:
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 2
WEB
2.3 Connexion à un serveur:
Pour envoyer des requêtes à un serveur, un client a besoin de plus ou moins
d’informations selon le type de serveur (web, ftp, ssh, mysql, …):
L’adresse IP: Le client doit connaître l’adresse IP de la machine qui heberge
l’application serveur. Généralement un nom est associé à l’adresse IP via un serveur
DNS (Domain Name Server).
Données d’authentification : Pour certaines connections un login et un mot de
passe sont demandés par le serveur. Exemple des serveurs de base de données
(mysql, postgres, oracle, …), ftp (accès anonyme possible), imap, …
Port : Plusieurs instances de serveurs peuvent tourner sur une machine (section
1.1) mais chacune d’elle ne s’interesse qu’aux requêtes qui lui sont déstinées. Pour
cela une application cliente et une application serveur se mettent d’accord sur un
numéro entier appelé port exclusivement utilisé par l’application serveur sur la
machine. L’adresse IP permet d’identifier de manière unique un ordinateur dans un
réseau et le port permet d’identifier une application serveur unique sur une
machine. A chaque application serveur est attribuée un numéro de port par défaut :
smtp(25), http (80), https (443) ftp (21), ssh (22), dns (53), ldap (389), mysql
(3306)… Il est possible par configuration de changer ce port par défaut.
2.4 Le fonctionnement d’un site web statique
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 3
WEB
Principe de fonctionnement :
L'utilisateur demande l'accès à une page Web depuis son navigateur. Adresse tapée,
clic sur un lien, utilisation d'un signet, etc ... Le navigateur envoie une demande à
un serveur Web. Le serveur Web lit le fichier demandé sur le disque dur. Le serveur
Web envoie le contenu du fichier au navigateur. Le navigateur affiche le contenu de
la page. Pour l'affichage, il peut également demander le contenu d'autres fichier au
serveur (ex : images).
Pages statiques :
Pour changer le contenu, il faut éditer le fichier. On peut générer le contenu de la
page au moment où elle est demandée, en fonction du contenu d'une base de
données ou de paramètres fournis avec la demande (ex : formulaires).
2.5 Les sites Web dynamiques
L'utilisateur demande l'accès à une page Web depuis son navigateur. Le navigateur
transmet, envoie une demande au serveur web comprenant : le nom de la page, qui
correspond en fait à un programme ; éventuellement un ensemble de paramètres.
Le serveur web va chercher sur le disque le code source d'un programme. Le
serveur web exécute ce programme qui peut : utiliser les paramètres transmis avec
la demande du navigateur ; aller chercher des données dans une base de données ou
sur le disque. Durant l'exécution, le programme génère un contenu HTML. Le
contenu HTML est envoyé au navigateur. Le navigateur affiche le résultat.
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 4
WEB
Pour créer une page dynamique, il faut :
Créer un programme PHP correspondant à cette page. Plus précisément, écrire le
code source de ce programme. Le but de ce programme est de générer le contenu
d'une page Web, i.e. du HTML. Cette génération se fait via des print, un peu
comme pour écrire dans un fichier. Ce programme peut éventuellement utiliser des
requêtes SQL. Ces requêtes sont passées sous forme de chaînes de caractères à des
fonctions spéciales qui vont les transmettre au SGBD et récupérer les résultats.
Remarque : Bien que le but principal d'un programme PHP soit de produire une
page HTML, cela reste un programme qui peut par conséquent avoir d'autres
effets:
Ex : insérer des valeurs dans une base de données
2.7 le préprocesseur php
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 5
WEB
2.8 Le HTML
Un fichier HTML est fichier texte contenant des informations de structuration. La
structure est indiquée à l'aide de balises :<balise> </balise>. Le nom de la balise
indique le type de mise en forme à appliquer. On met une balise ouvrante au début
du morceau de texte concerné :
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 6
WEB
<nom balise> début du texte
On met une balise fermante à la fin du texte concerné :
fin du texte</nom balise>.
Une balise ouvrante peut contenir des attributs de la forme nom="valeur"
<nom balise nom1="val1" nom2="val2" ...>texte </nom balise>
Les attributs permettent de préciser des informations concernant la mise en forme.
Les balises peuvent être imbriquées. C'est le navigateur qui interprète les balises
pour faire l'affichage.
2.8.1 Structure d’une page HTML
Une page HTML a la structure suivante :
<html>
<head>
<title>titre de la page</title>
</head>
<body>
Partie affichée dans le navigateur.
</body>
</html>
Les commentaires (non affichés) sont délimités par < !-- et -->.
2.8.2 Structures
<p>texte</p> : texte forme un paragraphe (saut de ligne avant et après).
<h1>texte</h1> : texte est un titre important (paragraphe avec un affichage plus
gros, en gras).
<h2>texte</h2> :texte est un titre moins important (affichage un peu moins
gros).
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 7
WEB
<h6>texte</h6> : texte est un petit titre.
2.8.3 Exemple de page HTML
<html>
<head>
<title> La page de Toto </title>
</head>
<body>
<h1>Toto</h1>
<h2>L'histoire de Toto</h2>
<p>Il était une fois ...</p>
<p>Chemin faisant. </p>
<h2>Les amis de Toto</h2>
<p>Oui oui</p>
<p>Casimir</p>
</body>
</html>
2.8.4 Structure : Styles simples
<i>texte</i> ou <em>texte</em> : mettre texte en italique.
<b>texte</b> ou <strong>texte</strong> : mettre texte en gras.
<u>texte</u> : souligner texte.
<big>texte</big> : mettre texte en plus grand.
<small>texte</small> : mettre texte en plus petit.
2.8.5 Les listes en HTML
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 8
WEB
<ul>
<li>entrée 1</li>
<li>entrée 2</li>
<li>entrée 3</li>
<li>...</li>
</ul>
<ol>
<li>entree 1</li>
<li>entree 2</li>
<li>entree 3</li>
<li>...</li>
</ol>
2.8.6 Les tableaux en HTML
<table>
<tr>
<td> case 1</td>
<td> case 2</td>
</tr>
<tr>
<td>case 3</td>
<td>case 4</td>
</tr>
</table>
2.8.7 Les tableaux avec bordures
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 9
WEB
<table border="2">
<tr>
<td>case 1</td>
<td>case 2</td>
</tr>
<tr>
<td>case 3</td>
<td>case 4</td>
</tr>
</table>
2.8.8 Les Liens
<a href="adresse web">texte</a> : texte devient un lien cliquable.
Lorsque l'on clique sur texte, on va à l'adresse (URL) adresse web.
<a href="http ://www.w3.org/TR/html401/">Documentation HTML</a>
Le texte Documentation HTML est un lien vers la page web dont l'adresse est
http ://www.w3.org/TR/html401/
<a href="truc.html">Des trucs</a>
Le texte Des trucs est un lien vers la page web truc.html située au même endroit
que la page courante.
Exemple 1
<html>
<head>
<title>Titre</title>
</head>
<body>
<?php
echo "Hello World !";
?>
<?php
if ( 1 ) {
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 10
WEB
?>
<strong>Ceci est vrai.</strong>
<?php
} else {
?>
<strong>Ceci est faux.</strong>
<?php
}
?>
<?php
echo "Ceci est un test";
?>
<?php echo "Ceci est un test" ?>
<h1>Toto</h1>
<h2>L'histoire de Toto</h2><BR>
<p>Il était une fois ...</p><BR>
<p>Chemin faisant. </p><BR>
<h2>Les amis de Toto</h2><BR>
<p>Oui oui</p><BR>
<p>Casimir</p><BR>
<i>texte</i> ou <em>texte</em> :texte <BR>
<b>texte</b> ou <strong>texte</strong> : texte <BR>
<u>texte</u> : texte. <BR>
<big>texte</big> : texte <BR>
<small>texte</small> : texte<BR>
<ul>
<li>entrée 1</li>
<li>entrée 2</li>
<li>entrée 3333</li>
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 11
WEB
<li>...</li>
</ul>
<ol>
<li>entree 1</li>
<li>entree 2</li>
<li>entree 3</li>
<li>...</li>
</ol>
<table>
<tr>
<td>case 1</td>
<td>case 2</td>
</tr>
<tr>
<td>case 3</td>
<td>case 4</td>
</tr>
</table>
<table border="2">
<tr>
<td>case 1</td>
<td>case 2</td>
</tr>
<tr>
<td>case 3</td>
<td>case 4</td>
</tr>
</table>
<a href="truc.html">Des trucs</a>
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 12
WEB
<BR>
<a href="http ://www.w3.org/TR/html401/">Documentation HTML</a>
</body>
</html>
********************************************************************
Exemple 2
Créer la feuille de style.css
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 13
WEB
<a href="http ://www.w3.org/TR/html401/">Documentation HTML</a>
</body>
2.8.9 Les Formulaires en HTML
Les formulaires en HTML permettent d’ accéder à une page (dynamique) en spécifiant des
paramètres. Ils permettent à l'utilisateur de saisir ces paramètres.
Comment :
en utilisant des champs textuels, des listes déroulantes, des cases à cocher ; à chacun de ces
composants de saisie correspond un paramètre.
Exemple
<form action="adresse web" method="POST" name="nom">
contenu formulaire
</form>
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 14
WEB
contenu formulaire : du texte contenant en particulier des balises représentant les
différents composants de saisie ;
adresse web : l'adresse de la page web dynamique à laquelle on souhaite accéder via
ce formulaire ;
POST : la méthode de transmission des paramètres (on peut également mettre
GET) ;
nom : le nom du formulaire (optionnel)
2.8.9.1 Saisie de Texte dans un Formulaire
<input type="text" name="nom">
Cette instruction créée un champ de saisie pour une ligne de texte.nom est le nom
du paramètre correspondant à ce composant. On peut ajouter les attributs suivants
: size="un nombre" : la taille du champ en caractères ; value="une valeur" : texte
pré-saisi utile pour modifier des informations. On peut remplacer type="text" par
type=" password " si on veut afficher des * au lieu des lettres lors de la saisie.Pas
de balise fermante.
2.8.9.2 Saisi d’un grand texte dans un formulaire
<textarea name="nom" rows="h" cols="l">
contenu pré saisi
</textarea>
Cette instruction créée un champ de saisie pour du texte sur plusieurs lignes. nom
est le nom du paramètre correspondant à ce composant. h est la hauteur du
composant en nombre de lignes. l est la largeur du composant en nombre de
caractères. Le contenu pré saisi peut être vide et ne contient de balise.
2.8.9.3 Paramètre cache
<input type="hidden" name="nom" value="val">
Permet de donner la valeur val au paramètre nom. Ce composant n'est pas affiché.
Utile pour spécifier un identifiant dans un formulaire de modification des
informations de la base. Pas de balise fermante.
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 15
WEB
2.8.9.4 Liste Deroulante
<select name="nom">
<option value="val1">Texte 1</option>
<option value="val2">Texte 2</option>
...
</select>
Créée une liste déroulante ayant comme sélection possible Texte 1, Texte 2,. . . La
valeur du param_etre nom est donnée par la sélection choisie par l'utilisateur :
val1 pour Texte 1
val2 pour Texte 2
...
L'attribut value est optionnel.
Par défaut c'est le texte dans la balise <option></option> On peut ajouter
selected="true" dans une des balises options pour pré sélectionner cette option.
2.8.9.5 Soumisssion et réinitialisation de données du formulaire
<input type="submit" value="texte">
Créée un bouton déclenchant le chargement de la page de destination (attribut
action de la balise <form>).
texte est un texte qui sera affiché sur le bouton.
<input type="reset" value="texte">
Créée un bouton déclenchant la réinitialisation du formulaire,
en utilisant les valeurs pré saisies lorsqu'elles existent.
texte est un texte qui sera affiché sur le bouton.
2.8.9.6 Methode de Transmission des données
Deux méthodes de transmission des paramètres
GET
Les paramètres sont encodés avec l'adresse de la page : à la fin de l'adresse, on
ajoute le caractère ? puis pour chaque paramètre on ajoute nom=val.
Les paramètres sont séparés par le caractère & utile pour spécifier des paramètres
dans un lien hypertexte.
POST
Les paramètres sont encodés séparément de l'adresse web.
Plus pratique pour les formulaires.
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 16
WEB
<HTML >
<head>
<TITLE > Exemple 1</TITLE
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><label for="textfield">a</label>
<input name="a" type="text" id="a" size="10" /></td>
<td> </td>
<td><input type="submit" name="Submit" value=" + "
onclick="return addition()" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><label for="textfield">b</label>
<input name="b" type="text" id="b" size="10" /></td>
<td> </td>
<td> </td>
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 17
WEB
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>resultat
<input name="r" type="text" id="r" /></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</HTML >
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 18
WEB
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 19
WEB
M.GUEYE PAPE EL HADJI ABDOULAYE L2WEB et L2 MAINTENANCE CLIENT SERVEUR SITE 20
WEB
