Bases de données et Sites Web. Li345

Transcription

1 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,

2 Bases de données et Sites Web. Li345 Web et programmation 1 ère partie Architecture HTTP/CGI HTML Programmation Web 2

3 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

4 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): poux.ufr-info-p6.jussieu.fr:80 4

5 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) poux.ufr-info-p6.jussieu.fr:80/~login/index.html 5

6 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 Eventuellement appel à un plugin pour d autres types de docs. Apache 6

7 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

8 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

9 Réponse HTTP Date: Tue, 05 Jun :39:56 GMT Server: Apache/ (Unix) mod_jk PHP/4.0.2 Last-Modified: Tue, 05 Jun :13:39 GMT /* cache Content-Length: 159 /* permet d estimer le temps Connection: close Content-Type: text/html /* pourrait être GIF, XML, /* ici éventuellement des cookies <HTML> <HEAD> <TITLE>Page d accueil</title> </HEAD> <BODY BGCOLOR="white"> <H1 ALIGN="CENTER">Page d accueil</h1> </BODY> </HTML> entête contenu 9

10 HTML : premier document <HTML> <HEAD> <TITLE>Un exemple de document HTML</TITLE> </HEAD> <BODY BGCOLOR="white">  <CENTER><H1>Mon premier document HTML </H1> </CENTER> Je tape du texte <B>n importe comment</b> </BODY></HTML> 10

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 Session Web 31