102
Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Embed Size (px)

Citation preview

Page 1: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Client/Serveur InternetConception de pages dynamiques

Jean-Marc Thévenin

Laurent Perrussel{thevenin,perussel}@univ-tlse1.fr

Page 2: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Plan du Cours

I/ Introduction

II/ Architecture Client/Serveur dans Internet

III/ Configuration d’un serveur HTTPD

IV/ Conception de Pages Dynamiques

V/ Le Langage PHP

VI/ Interactions avec une Base de Données

VII/ Saisie d’Informations sur Plusieurs Pages

Page 3: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I/ Introduction

1/ Architecture client/serveur Internet

2/ Lien avec le cours de conception de pages HTML

3/ Les pages HTML dynamiques

Page 4: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.1/ Arch. client/serveur Internet

• Rôle du client ?– Programme permettant de demander des

données ou des services à une autre machine• données : pages, messages, fichiers

• services : programme s’exécutant sur une machine distante (exemple : HotMail)

– le client doit connaître la seconde machine– la seconde machine s’appelle un Serveur

Page 5: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.1/ Architecture client/serveur Internet

• Trois types de client ?– Navigateur de pages Web : Netscape, MS

Internet Explorer, Word...– logiciel de messagerie électronique : Eudora,

Outlook Express, Netscape, Word…– logiciel de transfert de fichiers : WS-FTP, MS

Internet Explorer, Word…

Page 6: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.1/ Arch. client/serveur Internet (suite)

• Rôle du serveur :– Programme qui attend, traite et répond à des

requêtes provenant de clients localisés sur des machines distantes

– Rappel : une requête peut concerner des données et/ou un service.

Page 7: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.1/ Arch. client/serveur Internet (suite)

• Trois types de serveur :– Serveur de pages Web : Apache, Microsoft

Server, Netscape Server…– Serveur de messagerie : SendMail, Microsoft

Exchange…– Serveur FTP : WU-FTP

Page 8: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.1/ Arch. client/serveur Internet (suite)

• Une Transaction Typea) le client, un navigateur,

demande une page à un serveur Web.

b) le serveur, qui attendait reçoit la requête et cherche la page sur sa machine.

c) le serveur envoie la page au client et attend à nouveau.

Client (Navigator)

Fichiers (pages)

Serveur (Apache)

a)

c)b)

Page 9: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.2/ Lien avec le cours de conception de pages HTML

• Dreamweaver : éditions de pages

• Pour rendre ces pages accessibles il faut :– définir le fonctionnement du serveur (URL,

autorisations, organisation des répertoires...)– publier ces pages, i.e. stockage dans les

répertoires adaptés

Page 10: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.2/ Lien avec le cours … (suite)

• Dreamweaver : conception de la structure de pages et de formulaires (aspect statique)

• Nécessité de prendre en compte les aspects dynamiques :– associer des instructions au(x) bouton(s) – récupérer et traiter les données saisies– interaction avec une base de données– génération de pages pour afficher des résultats

Page 11: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.3/ Les pages dynamiquesTransaction type

• client :– saisie de données dans un

formulaire et envoi

– réception de la page générée dynamiquement et affichage

• Serveur

– réception des données

– génération d’une page en fonction des données reçues

– envoi de cette page

Page 12: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.3/ Les pages dynamiques (suite)

• Génération de pages– effectuée sur le serveur– programme de génération souvent appelé CGI

(Common Gateway Interface)– le programme interagit avec le serveur (E/S) et

éventuellement d’autres programmes et/ou un serveur de bases de données

Page 13: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

I.3/ Les pages dynamiques (suite)

• Objectif du cours– génération de pages HTML conditionnées par

des paramètres – écriture de CGI simples accédant à une base de

données relationnelle

Page 14: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II/ Architecture Client/Serveur dans Internet

1/ Introduction

2/ Dans le contexte HTTP

3/ Dans le contexte du Mail

4/ Dans le contexte des News

Page 15: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction

• Internet / Intranet / Extranet– Internet

• ensemble de machines interconnectées selon le protocole de communication TCP/IP .

• Les machines ont un nom et sont dans un domaine (ex : igsi.univ-tlse1.fr).

• Différents services offerts : sites web, accès distant à des documents, courrier électronique, forums de discussion

Page 16: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction (suite)

• Internet / Intranet / Extranet– Intranet

• C ’est une « sous-partie » d’Internet

• Réseau privé et donc inaccessible de l ’extérieur (i.e. Internet) pour des raisons de sécurité

• limitation à un domaine – ex : univ-tlse1.fr

• Utilisé pour le fonctionnement d’une organisation (ex : Citroën)

Page 17: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction (suite)

• Internet / Intranet / Extranet– Extranet

• C ’est une « sous-partie » d’Internet• Réseau privé et donc inaccessible de l ’extérieur (i.e.

Internet) pour des raisons de sécurité• limitation à quelques machines• utilisé pour relier une entreprise avec ses partenaires (ex:

suivi de commandes).

– Intranet et Extranet font souvent partie du S.I. de l ’entreprise

Page 18: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction (suite)TCP/IP

• Transmission Control Protocol / Internet Protocol

• Circulation des données par paquets– le message est découpé en

paquets.– Chaque paquet est envoyé à un

nœud qui renvoie vers un autre nœud suivant l’encombrement.

– A l’arrivée, les paquets sont réordonnés

Système A

Système B

Message = P1 + P2

P1, P2

P1

P1

P2

P2

Page 19: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction (suite)TCP/IP

• Expéditeurs et Destinataires des paquets sont identifiées

• Numéro de machine : adresse IP– ex 190.10.20.30

• Nom complet de machine : www.lemonde.fr– nom : www– nom de domaine : lemonde.fr

Page 20: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction (suite)TCP/IP

• Fonctionnement des serveurs DNS– Domain Name System– association entre le nom d’une machine et son

adresse IP– Un serveur de noms par domaine

• Quand le nom accédé n’est pas dans le domaine, le serveur de nom local transfère la requête à un serveur de noms Internet

Page 21: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction (suite)

• Les URLs– un protocole– éventuellement un nom d’utilisateur suivi de @– un nom complet de machine– éventuellement un nom de dossier et/ou de

document– ex

• news://news.cict.fr• mailto://[email protected]• http://igsi.univ-tlse1.fr/igsi

Page 22: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.1/ Introduction (suite)

• Les principaux protocoles– http (et https) : pages HTML (et pages

sécurisées)– mailto : envoi de messages– news : forums de discussion– ftp : transfert de fichiers

• Chaque protocole est pris en charge par un service (un serveur)

Page 23: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.2/ Client/Serveur HTTP

• HTTP : protocole permettant de demander et de recevoir des pages HTML auprès d’un serveur de pages localisé sur une machine distante

• le serveur est désigné sous le nom de HTTPD : démon HTTP

Page 24: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.2/ Client/Serveur HTTP (suite)

• Principaux HTTPD– Apache (Unix, Windows, MacOS X...)– Microsoft Personal Web Server (Win)– Microsoft Site Server (Win NT)– Netscape iPlanet Web Server (Unix, NT…)

Page 25: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.2/ Client/Serveur HTTP (suite)

• Transaction type avec une page limitée à du texte– http://uneMachine.unDomaine.fr/undossier/unePage.html

1. le serveur sur la machine uneMachine.unDomaine.fr reçoit la demande

2. le serveur associe à undossier le nom réel sur le disque.

3. Le serveur vérifie l’existence de la page et les droits d’accès

4. le serveur envoie la page unePage.html à la machine cliente

5. le serveur enregistre la transaction dans un journal

Page 26: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.2/ Client/Serveur HTTP (suite)

• Zoom Etape 2 : associer undossier à un nom réel sur le disque.

• http://igsi.univ-tlse1.fr/~thevenin

• http://igsi.univ-tlse1.fr/~thevenin/p1.html

/home /thevenin /public_html /index.html/home /thevenin /public_html

/p1.html

Machine IGSI

Page 27: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.2/ Client/Serveur HTTP (suite)

• Transaction type avec une page multimédia (texte + images + animations + …)– http://uneMachine.unDomaine.fr/undossier/unePage.html

A. le client demande la page et le serveur envoie le texte (étapes 1 à 5 précédemment)

B. le client analyse la page et demande le chargement pour chacun des composants

– les étapes 1 à 5 sont répétées par le serveur pour chaque composant.

– Autrement dit, une requête d ’un client se traduit par un ensemble de transactions élémentaires

Page 28: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.2/ Client/Serveur HTTP (suite)

• Transaction HTTPS– transaction HTTP sécurisée– Principes identiques aux transactions HTTP– Communication Client/Serveur sécurisée par

encodage des paquets.

Page 29: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.2/ Client/Serveur HTTP (suite)

• Publication d’une page– URL de la page

• http://uneMachine.unDomaine.fr/undossier/unePage.html

– transfert FTP du fichier unePage.html sur la machine uneMachine.unDomaine.fr dans le dossier associé au chemin undossier en lui donnant le même nom (unePage.html)

Page 30: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.3/ Client/serveur Mail

• Client : lecture, stockage définitif et rédaction de messages

• Serveur : boite postale (stockage temporaire des messages) et envoi des messages.– Deux serveurs distincts (entrée et sortie)– chaque serveur peut être sur une machine

distincte

Page 31: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.3/ Client/serveur Mail (suite)

• Client– rédaction du message

• adresse• sujet• corps

– envoi du message au serveur de courrier sortant

• Serveur

– Réception du message à envoyer

– envoi du message selon le protocole SMTP (Simple Mail Transfer Protocol) à l’adresse « adresse »

Page 32: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.3/ Client/serveur Mail (suite)

• Client

– interrogation du serveur de courrier entrant (la boite au lettre), récupération des messages

– affichage des messages à la demande

• Serveur– Réception du message

et stockage dans une boite temporaire selon le protocole POP (Post Office Protocol)

– suppression dans la boite des messages transférés

Page 33: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.3/ Client/serveur Mail (suite)

• Circulation des messages : texte– documents attachés : encodés (binaire -->

texte)– client encode et décode

• expéditeur et destinataire doivent respecter la même convention d’encodage

– conventions usuelles : Mime, Uuencode, Base64

Page 34: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

II.3/ Client/serveur Mail (suite)

• Principaux clients– Eudora

– Netscape Messenger

– Outlook

– Pegasus

– elm

• Principaux Serveurs– Sendmail

– iPlanet™ Messaging Server 5.0 (Netscape)

– Microsoft Exchange Server

Page 35: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Client/Serveur News

• News : forums de discussion thématique

• Principe– envoi d’un message au serveur de forums– le message est publié dans le forum– lecture du forum par les utilisateurs– les utilisateurs répondent au forum

Page 36: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Client/Serveur News (suite)

• Contrôle de la discussion– publication sur le forum peut être modérée par

un modérateur (administrateur)– les forums peuvent être privés

• dans un intranet

• abonnement

Page 37: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Client/Serveur News (suite)

Page 38: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Client/Serveur News (suite)

• Rôle du lecteur de forums– « Sélection » des forums préférés auprès de

différents serveurs de forums– Affichage des entêtes des messages du forum

sélectionné– Réception du corps du message sélectionné et

affichage– Envoi d’un message au serveur du forum

sélectionné

Page 39: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Client/Serveur News (suite)

• Rôle du serveur de forums– Stockage des messages dans les forums– Gestion de l’archivage– Envoi sur demande d’un client les entêtes des

messages d’un forum– Idem pour les corps des messages– Publication des messages– Synchronisation avec les autres serveurs de forums

Page 40: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III/ Configuration d’un serveur HTTPD

1/ Présentation de Apache

2/ Configuration de Apache

3/ Configuration des espaces publics/personnels

4/ Exercices• dossier personnel et publication de pages

• autorisation

• consultation des journaux

Page 41: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.1/ Présentation de Apache

• Serveur HTTP

• Plates-formes : Windows 9x/NT, Unix (Linux),…

• logiciel libre : programme source accessible et distribué avec la licence GNU

• Serveur rapide et stable

• utilisé sur plus de 6 millions de serveurs

Page 42: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.1/ Présentation de Apache (suite)

• Site : www.apache.org (en anglais)

• Configuration utilisée– machine : igsi– système : linux – apache : version 1.3.12-2

Page 43: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.1/ Présentation de Apache (suite)

• Quelques fonctionnalités– définition de l’administrateur– gestion du nombre d’accès simultanés (nombre de

transactions HTTP)– surveillance des accès (journaux)– organisation des répertoires contenant les pages du

site– définition des répertoires de pages personnelles– droits d’accès généraux et personnels– définition personnalisée des pages d’erreur– pied de page personnalisé

Page 44: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.2/ Configuration de Apache

• Configuration– responsable : propriétaire (au sens unix) du

logiciel– définie dans le fichier

/etc/httpd/httpd.conf – configuration principale– déléguer des configurations spécifiques en

fonction des répertoires de pages

Page 45: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.2/ Configuration de Apache (suite)

• Structure du fichier httpd.conf : – document texte avec des lignes de commentaires

et des lignes de configuration• ligne de commentaire

– débute par un #• ligne de configuration

– MotClef Valeur• ex: # Adresse du fichier d’erreurErrorLog /var/log/httpd/error_log

Page 46: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.2/ Configuration de Apache (suite)

• Fichier httpd.conf chargé au lancement du processus HTTPD

• Généralement préconfiguré par défaut et très peu de choses à changer

• Toutes les options sont spécifiées : il suffit d ’enlever les commentaires pour les options choisies

Page 47: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.2/ Configuration de Apache (suite)

• Principaux paramètres (présentés avec leur valeur par défaut)# Nombre de processus serveurs en //StartServers 8 # nom et groupe de l ’utilisateur executant HTTPDUser nobody (droit du processus serveur)Group nobody# addresse de l ’administrateur # (ajoutée au pages générées ex 404).ServerAdmin root@localhost# Répertoire racine des pages du serveurDocumentRoot /home/httpd/html

Page 48: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.2/ Configuration de Apache (suite)

• Principaux paramètres (présentés avec leur valeur par défaut)# Répertoire racine d ’un utilisateur de la machineUserdir public_html

=> pour l’utilisateur ayant le login monLogin le répertoire racine est /home/monLogin/public_html et l’URL est http://uneMachine.unDomaine.fr/~monLogin

# Page par défaut à charger dans un répertoireDirectoryIndex index.html index.htm index.cgi

Preciser que le chargement par defaut est uniquement effectue si l ’url se conclue par un nom de repertoire

Preciser que le chargement par defaut est uniquement effectue si l ’url se conclue par un nom de repertoire

Page 49: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.2/ Configuration de Apache (suite)

• Principaux paramètres concernant les journaux (présentés avec leur valeur par défaut)# fichier d’erreurErrorLog /var/log/httpd/error_log# Niveau de journalisation des erreurs# (info, notice, error, alert,…)LogLevel warn# Fichier de journalisation des accès et niveauCustomLog /var/log/httpd/access_log common

Page 50: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels

• Description des droits effectuée par répertoire– droit d’exécuter des CGI– droit à restreindre les accès– droit de redéfinir les droits…

• Syntaxe# Droit pour le répertoire /home/*/public_html<Directory /home/*/html>

(liste des droits)</Directory>

Mentionner le * dans le nom du repertoire décrit

Mentionner le * dans le nom du repertoire décrit

Page 51: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Quelques droits# Droit précisé avec le mot clef Option# None : aucun droit, all: tous les droits# FollowSymLinks, ExecCGI,… : droit particuliers# pouvant être combinésOptions FollowSymLinks ExecCGI Indexes

• Droit à redéfinir les droits# Droit précisé avec le mot clef AllowOverride# None : aucun droit, all: tous les droits# Options, AuthConfig,… : droit particuliers# pouvant être combinésAllowOverride AuthConfig

Droit a redéfinir les droits, mentionnez que cette redefinition sera faite dans un fichier particulier.

Redefinition de Options --> droit de définir les droits précédents.

Droit a redéfinir les droits, mentionnez que cette redefinition sera faite dans un fichier particulier.

Redefinition de Options --> droit de définir les droits précédents.

Page 52: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Restriction d’accès au répertoire– Autorisation ou restriction par machine ou

domaine (autoriser quelques machines ou interdire quelques machines).

– Autoriser des individus ou des groupes d’individus (nom + mot de passe).

– combinaison des deux : quelques individus sur un sous-domaine (ex : intranet).

Page 53: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Autoriser - Interdire quelques machines– clauses allow from et deny from

allow from nomDomaine1 nomDomaine2 … nomMachine1 nomMachine2 … adresseIP1 adresseIP3 …

deny from nomDomaine1 nomDomaine2 … nomMachine1 nomMachine2 … adresseIP1 adresseIP3 …

– pour désigner toutes les machines : all

• Ordre d’application de la restriction– clauses Order deny, allow et Order allow, deny

Page 54: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Exemple : limiter au domaine de l’universitéallow from .univ-tlse1.frdeny from allOrder deny, allow

• Exemple : interdire les accès de UT2allow from alldeny from .univ-tlse2.frOrder allow, deny

• Exemple : accès depuis une machine préciseallow from igsi.univ-tlse1.frdeny from allOrder deny, allow

Page 55: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Limitation à quelques personnes– nécessité d’un fichier (ou éventuellement une

base de données) contenant les personnes autorisées

– couples nomLogin, MotDePasse– Création du fichier

htpasswd -c nomFichier premierLogin

– Ajout dans le fichierhtpasswd nomFichier nouveauLogin

Les personnes autorises n ’ont pas besoin d ’un compte UNIX

Les personnes autorises n ’ont pas besoin d ’un compte UNIX

Page 56: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Limitation à quelques personnes– Directive pour spécifier le fichier des personnes

autorisées (rappel : entre les balises <Directory> </Directory>)

# Nom du fichier contenant les logins

AuthUserFile nomFichier

Page 57: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Limitation à un groupe de personnes– Regrouper les personnes autorisées dans un

groupe– Les groupes sont référencés dans un fichier

texte ayant la forme suivantenomGroupe1: nomLogin1 nomLogin2 nomLogin3 …

nomGroupe2: nomLogin1 nomLogin2 nomLogin3 …

Page 58: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Limitation à un groupe– Directive pour spécifier le fichier des groupes

autorisés (rappel : entre les balises <Directory> </Directory>)

# Nom du fichier contenant les groupes

AuthGroupFile nomFichier

Page 59: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Configuration de l’espace personnel– Autorisation de la configuration d ’un dossier

est donné dans le httpd.conf avec la clause AllowOverride (cf. page préc.)

– La clause AccessFileName précise le nom du fichier de configuration particulier

# Nom du fichier de configuration particulier

# à rechercher

AccessFileName .htaccess

Page 60: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

III.3/ Configuration des espaces publics/personnels (suite)

• Configuration de l’espace personnel– Pour configurer votre espace personnel créer le

fichier • /home/monLogin/public_html/.htaccess

– le fichier est un fichier texte contenant les clauses à l ’intérieur des balises <Directory>

</Directory> (les balises ne doivent pas être mentionnées).

Page 61: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV/ Conception de Pages Dynamiques

1/ Principe

2/ Transaction Type

3/ Exemple Perl - PHP

4/ CGI/PHP : Principales différences

Page 62: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.1/ Principe

• Deux Types de dynamique :– Dynamique prise en charge par le client

• Page animée

• Programme(s) exécuté(s) par le client prenant en charge la dynamique

– Dynamique prise en charge par le serveur• Page créée dynamiquement par un programme

exécuté sur le serveur

• Page statique affichée sur le client

La page générée par le serveur peut être dynamique

La page générée par le serveur peut être dynamique

Page 63: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.1/ Principe

• Dynamique dans les clients– Applets Java– Fonctions JavaScript– Plug-In– Composants ActiveX (Microsoft)

Page 64: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.1/ Principe (suite)

• Applets Java– Programme exécuté par le client et dont

l ’affichage est effectué dans un espace clos de la fenêtre

– Programme autonome dont le nom est représenté comme une URL dans la page d hôte

– Intérêt : Tous types d’affichage (graphique, interaction avec des images...)

– Applications exécutables dans la plupart des navigateurs.

Page 65: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.1/ Principe (suite)

• JavaScript– fonctions de manipulation de la page– Les instructions sont dans le source HTML– Intérêt : Faire des contrôles sur des éléments

d’un formulaire pour diminuer les dialogues entre le client et le serveur.

Page 66: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.1/ Principe (suite)

• Dynamique pris en charge par le serveur– Récupérer et gérer des informations transmises

par un client• calcul, stockage dans une base de données,…

– Génération dynamique de pages• Génération d’un fichier source HTML

• Affichage d’un résultat (interrogation d’une base de données)

Page 67: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.1/ Principe (suite)

• Génération du fichier source HTML– Effectué par un programme indépendant appelé

CGI • Le programme peut être écrit dans de nombreux

langages (Perl, Visual Basic, C, PL/SQL,…)

– Pré-traitement par le serveur HTTPD de fichiers HTML pré-existants comportant des instructions conditionnant la génération de lignes HTML

• langage PHP

Page 68: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.2/ Transaction Type

• Le client reçoit une page contenant un formulaire

• L’utilisateur clique sur Envoi après avoir garni les zones de saisie

• Le navigateur demande au serveur une URL associée au bouton Envoi tout en transmettant des couples <nomZone, valeurZone>– l’URL contient le nom du CGI à exécuter

Page 69: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.2/ Transaction Type (Suite)

• Le serveur HTTPD reçoit l’URL et lance l’exécution du CGI mentionné dans l’URL en lui transmettant les paramètres.

• Le CGI traite les couples de paramètres et génère une page HTML

• La page est transmise au serveur HTTPD• Le serveur transmet la page au client• Le client affiche la page

Page 70: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.2/ Transaction Type (Suite)

• Mécanismes d’invocation– le programme est stocké dans un fichier– le nom de ce fichier conditionne le mécanisme

d’invocation (CGI ou pré-traitement)

Page 71: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.2/ Transaction Type (Suite)

• Invocation du CGI– Deux types de programmes CGI

• exécutable (ex: extension .exe sous W9x) : le programme est lancé

• interprété (ex : extension .cgi) : les premières lignes du programme spécifie l'interprète à utiliser

Page 72: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.2/ Transaction Type (Suite)

• Invocation du pré-processeur– les extensions .PHP, .PHP4, .PHP3 sont des

fichiers HTML contenant des instructions PHP• le serveur transmet la page au pré-processeur PHP.

• le pré-processeur exécute les instructions PHP.

Page 73: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.2/ Transaction Type (Suite)

• Transmission des paramètres : deux méthodes– méthode GET– méthode POST

• la méthode est mentionnée dans la balise de description du formulaire (dans la page HTML)

Page 74: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.2/ Transaction Type (Suite)

• Méthode GET– les paramètres sont transférés dans l ’URL du CGI

(paramètres visibles)– ex : monCGI.cgi?nom=Martin&prenom=Jean

• Méthode POST– les paramètres sont transférés dans le corps de la

requête (comme dans un fichier) : les paramètres ne sont pas visibles

– ex : monCGI.cgi…nom=Martin&prenom=Jean

Page 75: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.3/ Exemple Perl (sans paramètre) http://igsi.univ-tlse1.fr/~thevenin/bonjour.cgi

#!/usr/bin/perl ->Identification de l’interpréteuse CGI;

$moncgi = new CGI();

#description de l'enteteprint $moncgi->header(-type=>'text/html');print $moncgi->start_html();print $moncgi->p("Bonjour");print $moncgi->end_html();exit;

Page 76: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.3/ Exemple PHP (sans paramètre) http://igsi.univ-tlse1.fr/~thevenin/hello.php3

<html><body>

<?php echo("hello!"); ?>

</body></html>

Balises des instructions PHP à l ’intention du pré-processeur

Page 77: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.3/ Exemple Perl (avec paramètres) http://igsi.univ-tlse1.fr/~thevenin/addition.html

<html>

<head><title> Addition effectue par un CGI en PERL </title></head>

<body>

<form name="formAddition" action="calculAddition.cgi" method="get">premier nombre :<input type="text" name="nombre1">second nombre :<input type="text" name="nombre2">

<input type="submit" value = "Additionner"></form>

</body>

</html>

CGI exécuté à la soumission

Page 78: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.3/ Exemple Perl (avec paramètres) http://igsi/~thevenin/calculAddition.cgi?nombre1=10&nombre2=20

#!/usr/bin/perl#use CGI;

$moncgi = new CGI();

$a = $moncgi->param("nombre1");$b = $moncgi->param("nombre2");

$total = $a + $b;

#description de l'enteteprint $moncgi->header(-type=>'text/html');print $moncgi->start_html();print $moncgi->p("Résultat : $total");

print $moncgi->end_html();exit;

Page 79: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.3/ Exemple PHP (avec paramètres) http://igsi.univ-tlse1.fr/~thevenin/addition.html

<html>

<head><title> Addition effectue par PHP </title></head>

<body>

<form name="formAddition" action="calculAddition.php" method="get">premier nombre :<input type="text" name="nombre1">second nombre :<input type="text" name="nombre2">

<input type="submit" value = "Additionner"></form>

</body>

</html>

Page PHP à pré-traiter à la soumission

Page 80: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.3/ Exemple PHP (avec paramètres) http://igsi/~thevenin/calculAddition.php?nombre1=10&nombre2=20

<html><body>Résultat : <? $total = $nombre1 + $nombre2; echo($total);?></body></html>

Page 81: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

4/ CGI/PHP : Principales différences

• CGI– impossible d’utiliser un éditeur pour décrire la

page générée.• Les lignes HTML sont générées par des instructions

« print » ou des instructions spécifiques aux balisesprint $moncgi->start_html();print $moncgi->p("Résultat : $total");

==><HTML>

<P> Résultat : ??? </P>

Page 82: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

4/ CGI/PHP : Principales différences

• PHP– Possibilité d’utiliser un éditeur pour décrire la

page générée (Dreamweaver).– Les lignes HTML statiques sont écrites

directement dans le fichier PHP avec les balises HTML

– coût : moindre lisibilité de la partie algorithmique– bénéfice :

• aspect WYSIWYG; • possibilité de traiter la requête et sa réponse en une

seule page.

Page 83: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

IV.3/ Exemple PHP (avec paramètres) http://igsi/~thevenin/additionToutEnUn.php

<html><head><title> Addition effectue par PHP </title></head>

<body>

<form name="formAddition" action="calculAdditionToutEnUn.php" method="get">premier nombre :<input type="text" name="nombre1">second nombre :<input type="text" name="nombre2">

<input type="submit" value = "Additionner"></form>

<? if($nombre1 != 0 && $nombre2 != 0) {?>Résultat : <? $total = $nombre1 + $nombre2; echo($total); }?></body></html>

Page 84: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

V/ Le langage PHP

1/ Présentation

2/ Structure d’un fichier

3/ Le langage

4/ Exemples

Page 85: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

V.1/ Présentation du langage

• Langage récent : 1994

• Première version « mature » : PHP3

• Version actuelle : PHP4

• Utilisé par plusieurs millions de sites.

• Couplage avec Apache (possible aussi avec d’autres serveurs).

Page 86: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

V.1/ Présentation du langage (suite)

• Interprète PHP : module de Apache

• instructions enchâssées dans le fichier HTML

• instructions à pré-traiter sont identifiées par des balises

• Traitement sur le serveur (contrairement à JavaScript)

Dans la page affichée dans le client, on ne voit pas le PHP

Dans la page affichée dans le client, on ne voit pas le PHP

Page 87: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

V.1/ Présentation du langage (suite)

• Intégration avec de nombreux SGBD (MySQL, Oracle,…)

• Pour plus d’informations :– http://www.php.net/

• Configuration utilisée : Serveur Apache sous Linux (RedHat) avec PHP4

Page 88: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

V.2/ Structure d’un fichier

• Extension du fichier : .php ou .php3 ou .php4

• Extension du fichier source (non pré-processé): .phps

• Les Balises pour encadrer les instructions PHP: – <? … ?> – <script language="php"> … </script>– <?php … ?>

Page 89: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

V.3/ Le langagemanuel :

http://www.php.net/manual/fr/manual.php

• Séparateur d ’instructions : ;

• commentaires :• // commentaire sur une seule ligne• # commentaire sur une seule ligne• /* commentaire sur plusieurs lignes*/

Page 90: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - les variables simples

• Pas de déclaration et pas de typage explicite

• les noms des variables sont toujours préfixés par un $.

• Exemples :• $age = 10; # age est un entier• $nom = "titi"; # nom est une chaîne• $pi = 3.14; # pi est un nombre réel

Page 91: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - les variables tableaux

• Les tableaux ne sont pas déclarés et non typés.• les noms des variables tableaux sont toujours

préfixés par un $.• Le premier élément est en 0.• Exemples :

• $daltons[0] = "Joe"; • $daltons[] = "Jack"; # Averell est le deuxieme element (numero 1)

• $nb = count($dalton); # nb vaut 2

Page 92: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - Les opérateurs

• Opérateur d'affectation– $nomVar = expression

• Opérateurs arithmétiques– opérateurs binaires : +, -, *, / et % (modulo)– opérateur unaires : ++ et --

•$i = 0;•$j = $i++; # i et j valent 1•$i--; # i vaut 0

Page 93: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - Les opérateurs

• Opérateurs logiques– And, Or, Xor et ! (not)

• Opérateurs de comparaison– >, <, >=, <=, == (égalité) et != (différent)

• Opérateurs sur les chaînes– . (concaténation)

Page 94: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - Structure de contrôle

• Structure alternative

SI condition ALORS

SINON

...

FIN SI

if (conditionPHP){

}

else {

}

Page 95: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - Structure de contrôle

• Structure itérativeTANT QUE condition FAIRE

FIN TANT QUE

REPETER

...

JUSQUA condition

while (conditionPHP){

}

do {

...

}

while(!conditionPHP)

Page 96: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - Structure de contrôle

• Structure itérativePOUR i allant de 1 à n

...

FIN POUR

for($i=1; $i<=$n; $i++) {

}

Page 97: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - Définition de fonctions

Fonction nomFonction (nomP1, nomP2, nomP3) : TypeRetourDEBUT...FIN

function nomFonction ($nomP1, $nomP2, $nomP3) {

return $nomVarDuTypeRetour;

}

Page 98: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le langage - Appel de fonctions

function addition ($n1, $n2) {

$somme = $n1 + $n2;

return $somme;

}

#utilisation de la fonction

$i = 8;

$monTotal = addition(12,$i);

Page 99: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le Langage - Fonctions utiles

• Afficher : écrire dans la page HTML.– echo(eltAafficher);

echo ($monTotal);

– print(eltAafficher);print (addition(12,$i));

Page 100: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le Langage - Fonctions utiles

• Manipulation de chaînes.– trim(chaine) : enlever les blancs au début

et à la fin.echo trim(" Joe "); # affiche "Joe"

– substr(chaine, debut, long) : recopier la sous-chaine de long caractères débutant à debut.echo substr("Averell",3,3); # affiche "rel"

– strlen(chaine) : longueur de la chaineecho strlen("Averell"); # affiche 7

Page 101: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le Langage - Fonctions Utiles

• Manipulation de dates– getDate(chaine) : obtenir la date système.– date(format) : obtenir la date dans un

format précis de son choix.•echo(jMY) # affiche "26 JAN 20001"

Page 102: Client/Serveur Internet Conception de pages dynamiques Jean-Marc Thévenin Laurent Perrussel {thevenin,perussel}@univ-tlse1.fr

Le Langage - Fonctions Utiles

• Il est possible d'utiliser date() et mktime() ensemble pour générer des dates dans futur ou dans passé.

<?php

$tomorrow = mktime (0,0,0,date("m") ,date("d")+1,date("Y"));

$lastmonth = mktime (0,0,0,date("m")-1,date("d"), date("Y"));$nextyear = mktime (0,0,0,date("m"), date("d"), date("Y")+1);

?>