Vous êtes sur la page 1sur 31

Bases de données et Sites Web.

Li345

Remerciements à:

Stéphane Gançarski et Philippe Rigaux.


Ces transparents sont fortement inspirés du très bon livre :

Pratique de MySQL et PHP, troisième édition


Philippe Rigaux
Éditions O'Reilly, 2005

1
Bases de données et Sites Web. Li345
Web et programmation – 1ère partie

Architecture HTTP/CGI
HTML
Programmation Web

2
Serveurs Web
 Programme serveur = un programme,
s’exécutant sur une machine serveur,
accessible sur l’Internet. Une même machine
serveur peut faire tourner plusieurs
programme serveur
 Protocole = le langage connu du programme
serveur
 Port (réseau, TCP) = le canal sur lequel un
programme serveur écoute et émet.
 Serveurs mail, serveurs web, serveurs ftp,
serveurs Bases de données, etc..

3
Serveurs et clients

 Pour accéder aux documents du Web, on


utilise des clients Web.
 Clients et serveurs communiquent via le
protocole HTTP (port 80)
 Exemple :dans le projet, le serveur est
référencé par (le :80 est implicite):
http:// poux.ufr-info-p6.jussieu.fr:80

4
URLs…
p://ms[:port]/chemin/document?args

 p : le protocole: http, ou autre (ex. ftp)


 ms : le nom ou adresse IP du serveur
 port : port d’écoute
 chemin : arborescence des répertoires pour accéder au
document
 document : nom du document ou programme
 args : liste de paramètres

Pour le projet (index.html doit être dans le répertoire public_html)


http:// poux.ufr-info-p6.jussieu.fr:80/~login/index.html

5
Serveurs et clients : langages
Dialogue avec le serveur
•En lui demandant des documents
•En lui fournissant des informations (paramètres,fichiers)

Navigateur + plugins

Communique les documents à l’utilisateur


•Par affichage du document HTML renvoyé par le serveur Apache
•Eventuellement appel à un plugin pour d’autres types de
docs.
6
HTTP…

 Protocole (langage) d’échange


d’informations propre au Web
 Connexion à un serveur
 Envoi d’un en-tête suivi d’une ligne
blanche
 Eventuellement un contenu
 Fermeture de la connexion.
Pas de connexion permanente

7
Principales requêtes http

 GET : on demande quelque chose au serveur.


GET /index.html HTTP/1.0
 POST : on envoie quelque chose au serveur.
POST /cgi-bin/prog.php HTTP/1.0
nom=rigaux&prenom=philippe

 HEAD : on demande des infos sur un


document.
Sera géré automatiquement grâce aux formulaires
8
Réponse HTTP
Date: Tue, 05 Jun 2001 20:39:56 GMT
Server: Apache/1.3.17 (Unix) mod_jk PHP/4.0.2
Last-Modified: Tue, 05 Jun 2001 20:13:39 GMT /* cache
Content-Length: 159 /* permet d’estimer le temps
entête
Connection: close
Content-Type: text/html /* pourrait être GIF, XML, …
/* ici éventuellement des cookies

<HTML>
<HEAD>
<TITLE>Page d’accueil</TITLE>
</HEAD> contenu
<BODY BGCOLOR="white">
<H1 ALIGN="CENTER">Page d’accueil</H1>
</BODY>
</HTML>

9
HTML : premier document
<HTML>
<HEAD>
<TITLE>Un exemple de document HTML</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<!-- Ceci est un commentaire -->
<CENTER><H1>Mon premier document HTML
</H1>
</CENTER>
Je tape du texte
<B>n’importe comment</B>
</BODY></HTML>

10
HTML : principales balises (1/2)
 Les conteneurs appliquent un formatage à tout le texte entre <balise> et </balise>
<B>Ceci est important</B>
met en caractères gras

 Les éléments vides insèrent un élément de présentation


<HR> trace une ligne horizontale

 La balise <A HREF=”url”> est un conteneur qui permet de marquer les ancres

<A HREF=’ExHTML1.html’>L’autre document</A>

<A HREF=’/FILMS/Film.php?titre=Seven’>..</A>

 Tableau : entre les balises <TABLE> et </TABLE>

<TR> et </TR> définissent une ligne


<TD> et </TD> définissent une cellule

On peut imbriquer une autre table ou n’importe quoi d’autre dans une cellule

11
HTML : principales balises (2/2)
 Liste : <OL> <LI> ... </LI> </OL>
 <P> : nouveau paragraphe
 <Hn> (0 < n < 8) pour les titres
 <FORM> pour des formulaires
 <IMG SRC=’url’> : insérer une image
 <B>, <IT>, <TT>: gras, italique, courier
 Couleur et fontes
<BODY BGCOLOR=’white’>...</BODY>
<FONT COLOR=’red’FACE=’time’></FONT>

12
Programmation Web

 Principes généraux de la programmation


Web
 Passage d’information via HTTP:
 Paramètres CGI
 Paramètres en mode GET
 Paramètres en mode POST
 Envois du serveur au client
 Cookies

 Les formulaires HTML


13
Prog. Web :principes généraux
Principe : on déclenche un programme sur la machine
serveur
 transmettre des infos (paramètres) au programme (via
formulaire)
 le programme renvoie un document (HTML
dynamique)
 utilisé dans à peu près tous les sites Web
professionnels.
 Actions du programme
 Lecture des paramètres transmis par le programme serveur
 Traitement de la demande : tout est permis ! Accès aux bases
de données,génération d’images, ...
 Production du document, renvoyé au programme serveur, qui
le transmet au navigateur

14
les paramètres HTTP

 Paramètres CGI : informent le serveur


sur le client et le contexte;
 Paramètres GET : placés dans une URL
 Paramètres POST : placés dans le corps
d’un message HTTP
 Cookies : transmis systématiquement,
permettant de connaître l’historique des
échanges avec un client.

15
Principaux paramètres CGI

 SERVER_NAME : nom du serveur


 HTTP_USER_AGENT : nom du client
 REQUEST_METHOD : GET ou POST
 QUERY_STRING : la chaîne des
paramètres
 CONTENT_LENGTH : longueur de la
chaîne (pour POST)

16
Paramètres GET et POST
 Les paramètres GET et POST peuvent être placés
dans des ancres, ou saisis dans un formulaire.
 Les arguments sont fournis dans une chaîne de
caractères au format : nom1=val1&nom2=val2&...
 Deux méthodes principales:
 GET : la chaîne est transmise dans l’URL
 POST : la chaîne est transmise dans le corps du message
HTTP
 POST est préférée, car elle évite les très longues URL
(certains navigateurs limitent la taille)

17
Formulaires HTML
<FORM ACTION=’Simul.php’METHOD=’GET’
NAME=’monForm’>
 ACTION est l’URL du script ou du
programme à déclencher sur le serveur
 METHOD : GET ou POST (meilleur)
 NAME : nom du formulaire (contrôles
JavaScript)
 ENCTYPE est le mode d’encodage des
informations (transfert de fichiers

18
Exemple de Formulaire
<HTML><HEAD>
<TITLE>Simulation financière</TITLE>
</HEAD><BODY bgcolor="WHITE">
Entrez le montant, le taux et la durée :
<FORM ACTION="HTTP.php" METHOD="GET">
Mt : <INPUT TYPE=TEXT SIZE=20 NAME="mtfin"><BR>
Taux : <INPUT TYPE=TEXT SIZE=20
NAME="taux"></Durée : <SELECT NAME=’duree’>
<OPTION VALUE="6">6 mois</OPTION>
<OPTION VALUE="12">1 an</OPTION>
<OPTION VALUE="24">2 ans</OPTION>
</SELECT></TD>
<INPUT TYPE=SUBMIT VALUE="Exécuter">
</FORM></BODY></HTML>

19
Champs d’un formulaire

<INPUT TYPE=… …>


 L’attribut TYPE vaut :
 TEXT pour les chaînes de caractères
 HIDDEN pour les champs cachés

 CHECKBOX pour un choix multiple

 RADIO pour un choix exclusif

 SUBMIT pour déclencher l’action

 FILE pour transmettre un fichier

20
Champs HIDDEN et SUBMIT
<HTML><HEAD>
<TITLE>Balise INPUT-SUBMIT</TITLE>
</HEAD><BODY bgcolor=’white’>
<FORM ACTION=’HTTP.php’ METHOD=’GET’>
<P>
<INPUT TYPE=’HIDDEN’ VALUE=’valeur’
NAME=’champ’> /* on est passé par le form.
<P>
<INPUT TYPE=’SUBMIT’ VALUE=’Pas choix !’>
</FORM>
</BODY></HTML>

21
Champs de saisie de texte
<HTML>
<HEAD>
<TITLE>Exemple de la balise INPUT</TITLE>
</HEAD>
<BODY bgcolor=’white’>
<FORM ACTION=’HTTP.php’ METHOD=’GET’>
<P>
Texte : <INPUT TYPE=’TEXT’SIZE=20 NAME=’texte’>
<P>
Nombre : <INPUT TYPE=’TEXT’SIZE=4 NAME=’nombre’
VALUE=’<P>
<INPUT TYPE=SUBMIT VALUE=’Allons-y’>
</FORM>
</BODY>
</HTML>

22
Boutons radio
<HTML><HEAD>
<TITLE>Exemple de la balise INPUT-RADIO</TITLE>
</HEAD><BODY bgcolor=’white’>
<FORM ACTION=’HTTP.php’ METHOD=’GET’>
<P>
Le beurre :
<INPUT TYPE=’RADIO’ VALUE=’1’ NAME=’choix’>
<BR>
L’argent du beurre :
<INPUT TYPE=’RADIO’ VALUE=’2’ NAME=’choix’>
<P>
<INPUT TYPE=SUBMIT VALUE=’Allons-y’>
</FORM>
</BODY></HTML>

23
Menus déroulants
<HTML><HEAD>
<TITLE>Balise INPUT-SELECT</TITLE>
</HEAD><BODY bgcolor=’white’>
<FORM ACTION=’HTTP.php’ METHOD=’GET’>
Choix :
<SELECT NAME=’choix’>
<OPTION VALUE=’1’>Saucisson
<OPTION VALUE=’2’>Rillettes
<OPTION VALUE=’3’>Paté
</SELECT>
<P>
<INPUT TYPE=SUBMIT VALUE=’Allons-y’>
</FORM>
</BODY></HTML>

24
Champ <TEXTAREA>
<HTML><HEAD>
<TITLE>Balise INPUT-SUBMIT</TITLE>
</HEAD><BODY bgcolor=’white’>
<FORM ACTION=’HTTP.php’ METHOD=’GET’>
<P>
<TEXTAREA NAME=’champ’ COLS=’30’ ROWS=’4’>
Entrez votre texte
</TEXTAREA>
<BR>
<INPUT TYPE=SUBMIT VALUE="C’est parti">
</FORM>
</BODY></HTML>

25
Transfert de fichiers
<HTML><HEAD>
<TITLE>Exemple de la balise INPUT-FILE</TITLE>
</HEAD><BODY bgcolor=’white’>
<FORM ACTION=’HTTP.php’
METHOD=’POST’ ENCTYPE=’multipart/form-data’>
<P>
Fichier:<INPUT TYPE=’FILE’ SIZE=20 NAME=’file’>
<P>
<INPUT TYPE=SUBMIT VALUE=’Allons-y’>
</FORM>
</BODY></HTML>

26
Limites des CGI

 Passage des paramètres : pénible


 Pas d’intégration avec HTML
 Lancement d’un prg. à chaque requête !
 Mode totalement déconnecté : pas de
mémoire des requêtes précédentes
 Améliorations avec des langages récents
(PHP, ASP, JSP)

27
Langages de scripts

PHP, ASP, JSP : de nombreux points communs


 Code inclus dans du texte HTML
 Interpréteur inclus dans le serveur
 Instructions exécutées par le serveur
 Décodage automatique des variables
provenant du client
 Dernier problème : les échanges client/serveur
en mode déconnecté

28
Cookies

 le serveur envoie au navigateur une


variable ayant un nom et une valeur et «
stocke la variable MaVariable avec la
valeur 100 pendant 2 jours »
 Le navigateur transmet ensuite
systématiquement la variable au serveur
qui l’a créée
 MonNavi transmet à MonServeur la
variable sous la forme MaVariable=100

29
Sessions Web grâce aux cookies

 Quand un client se connecte la première fois :


le serveur lui associe un identifiant de session
 Le serveur transmet cet identifiant au client
sous la forme d’un cookie
 On conserve un historique des actions du
client, associé à l’identifiant de session
 Quand le client se connecte à nouveau : on
sait l’identifier grâce au cookie.
Continuité dans le dialogue client/serveur

30
Session Web

31

Vous aimerez peut-être aussi