Aucun titre de diapositive

Internet statique et dynamique
Programmation côté Serveur
Programmation de sites web statiques et dynamiques
Programmation côté serveur
Jean CARTIER
MASTER INI
[email protected]
1
Internet statique et dynamique
Programmation côté Serveur
SOMMAIRE
•Côté Client
•Le HTML : Principe de fonctionnement
•Le HTML : Limites d'utilisation
•Le Javascript : Principe de fonctionnement
•Le Javascript : Quelques exemples
•Le Java : Principe de fonctionnement
•Le Java : Exemples d'utilisation
•En résumé
•Côté Serveur
•Les CGI : Principe de fonctionnement
•Les CGI : Quelques applications et limitations
•ASP, PHP : Principe de fonctionnement
•En résumé
•Ressources externes
2
Internet statique et dynamique
Programmation côté Serveur
Côté Client
(c’est à dire Côté Utilisateur)
(ou encore Côté Navigateur Web)
3
Internet statique et dynamique
Programmation côté Serveur
Le HTML : Principe de fonctionnement
Le HTML : un fichier texte enrichi de balises
Serveur Web
qui vont mettre ce texte en forme.
Fichier HTML
(ex : <em>bonjour</em> met bonjour
transmis du serveur Web
en italique)
au navigateur Web
Le serveur Web transmet le HTML
sans le modifier vers le demandeur.
Le fichier HTML est interprété
par le navigateur.
L’apparence d’une page peut donc
changer d'un navigateur à l'autre,
voire d'une version
à l'autre.
4
Interprétation
du HTML par
le navigateur Web
Affichage du résultat
de l'interprétation dans
le navigateur Web
Navigateur Web : Internet Explorer,
Netscape Communicator, Mosaic,
Firefox, Opéra, Konqueror, ...
Internet statique et dynamique
Programmation côté Serveur
Le HTML : Limites d'utilisation
- Mise en page via des feuilles de styles (CSS)
- Affichage d'images au format GIF, PNG ou JPEG.
- Possibilité de créer des tableaux.
- Insertion de médias : sons, vidéos,
et autre animations (Flash, VRML)
dans les pages HTML ; lecture de
ces médias si le navigateur possède
les extensions pour les lire (plugins).
Exemple de page web
5
Internet statique et dynamique
Programmation côté Serveur
Le Javascript : Principe de fonctionnement
Le Javascript est un langage de
Serveur Web
programmation simple, directement
Fichier HTML contenant du
inclus dans le code HTML.
Le serveur Web se contente de
transmettre le fichier HTML
contenant le Javascript, sans rien
modifier vers le demandeur.
Javascript transmis du
serveur Web au navigateur
Web
Interprétation
du HTML et du
Javascript par
le navigateur Web
Le Javascript est interprété
Affichage du résultat
par le navigateur, et
de l'interprétation dans
c'est pour cela qu'entre deux
le navigateur Web
navigateurs l'apparence d'une
Navigateur Web
page peut changer et le fonctionnement
des scripts être aléatoire !
6
Internet statique et dynamique
Programmation côté Serveur
Le Javascript : Quelques exemples
! Javascript ≠ Java
Le Javascript est interprété par le navigateur,
ce qui signifie qu'il n'est capable
de travailler que sur l'ordinateur du client.
Il est utilisé pour des actions simples et événementielles :
- Vérification de formulaire avant son envoi.
- Affichage de messages dans la barre d'état du navigateur.
- Changement d'images par survol.
- Ecriture de petits fichiers de configuration (les cookies)
sur l’ordinateur afin de stocker un petit nombre
d’informations.
- Interagir avec des éléments multimédia sur la page
- Interagir avec des blocs dans la page (AJAX)
7
Internet statique et dynamique
Programmation côté Serveur
Le Java : Principe de fonctionnement
! Java ≠ Javascript
Le Java est avant tout un langage de
programmation issu de chez Sun.
Pour être exécuté, il doit être
pré-compilé au préalable.
Le navigateur Web n’interprète pas
le Java, il l’exécute.
Il est indépendant de la plateforme sur laquelle il tourne
(la plateforme doit possèder
une "machine virtuelle java").
Serveur Web
Fichier HTML transmis du
serveur Web au navigateur
Web. L’applet Java est un
fichier qui sera transmis à
part.
Execution
de l’applet
sur le
navigateur
Sur Internet, le Java est utilisé sous la forme d’applet: des
petits programmes qui vont venir s’inscrire dans un cadre
sur la fenêtre du navigateur.8
Internet statique et dynamique
Programmation côté Serveur
Tout comme les sons, la vidéo, les animations,
le java est une extension du navigateur.
Le navigateur reçoit le fichier HTML et
l’applet Java séparément puis exécute cette applet.
Il en découle que plus l’ordinateur client
est puissant, plus l ’exécution de l ’applet sera
Serveur Web
Fichier HTML transmis du
serveur Web au navigateur
Web. L’applet Java est un
fichier qui sera transmis à
rapide.
part.
Le Java offre néanmoins plus de possibilité
que le HTML ou que le Javascript :
il permet de se connecter à d’autres machines,
de dialoguer avec celle-ci, de consulter des Execution
bases
de l’applet
de données, de générer du graphisme
sur le
navigateur
et tout ceci en reposant sur un module
de sécurité très avancé empêchant
jusqu’à présent le piratage ou les virus.
! Java de Sun ≠ Java de Microsoft
Navigateur Web du type : Internet Explorer, Netscape Commu
9
Internet statique et dynamique
Programmation côté Serveur
Le Java : Exemple d'utilisation
Défilement de
texte lu sur le
serveur
Texte défilant
(Lecteur d'un fichier texte
sur le serveur Web)
Jeu Java : démineur
(Génération d'image et
d’interface)
10
Internet statique et dynamique
Programmation côté Serveur
En résumé
Toutes ces techniques peuvent bien entendu être
combinées pour créer un site que l’on pourrait qualifier
de statique.
Exception faite du Java (et du flash), toutes ces techniques
ne mettent en jeu que le navigateur Web, et ne prennent
par conséquent pas en compte de facteurs extérieurs
(comme des bases de données, des dialogues avec
d’autres personnes, d’autres machines, …).
Elles ont comme inconvénient d'être dépendantes
de la plate-forme cliente sur laquelle elles tournent
(mise en page, exécution des scripts clients, plugins, …)
11
Internet statique et dynamique
Programmation côté Serveur
Côté Serveur
12
Internet statique et dynamique
Programmation côté Serveur
Les CGI : Principe de fonctionnement
Serveur Web
Données
externes
Exécution
du programme
Fichier HTML à
transmettre du
serveur Web au
navigateur Web
Interprétation
du HTML par
le navigateur Web
Affichage du résultat
de l'interprétation dans
le navigateur Web
Navigateur Web du type : Internet Explorer, Netscape Communi
13
Internet statique et dynamique
Programmation côté Serveur
Les CGI : Principe de fonctionnement
Un CGI (Common Gateway Interface) est un programme exécutable (comm
PaintBrush, le démineur) dont le but est de renvoyer du HTML.
Un CGI se trouve sur le serveur Web; il va donc pouvoir dialoguer avec cel
travailler sur celui-ci avant de retourner la réponse tant attendue.
L ’avantage du CGI est qu’il est exécuté par le serveur. Il va donc pouvoir
des informations provenant de l'utilisateur (formulaires), des informations
comme des fichiers texte, des données brutes, des bases de données.
Il va aussi pouvoir exécuter des programmes à distance, ce qui peut être p
dans certains cas (manipulation d ’objets à distance, …)
Les CGI sont écrits dans des langages de programmation classiques comm
le Perl, le Python, les divers Shell (unix), …
14
Internet statique et dynamique
Programmation côté Serveur
Les CGI : Quelques applications et limitations
Ecrits dans des langages de programmation, ils sont bien souvent
difficiles et longs à mettre en œuvre
Il ne sont pas portable aisément d’une plate-forme à l’autre, sauf au prix
d’une recompilation (transformation en exécutable).
Ils ont l’avantage, par rapport aux autres types de langage que nous
allons voir (ASP, PHP, JSP ), d’être moins limitatifs, puisqu’ils peuvent
être écrits dans divers langages.
InitCgi()
separe("gif", 1, 6)
PRINT "Content-type: text/html\n\n"
PRINT "<html><body><img src=\"test.gif\">"
PRINT "</html></body>"
Exemple de CGI en Basic
15
Internet statique et dynamique
Programmation côté Serveur
Les CGI : Quelques applications et limitations
Exemple complet d’une application CGI
Traitement
de formulaire
Envoi de commande
système (heure)
Lecture de
fichier texte
Génération dynamique
d'image temps réèl
à partir de fichiers
externes
Exemple de page : http://www.obs-nancay.fr/html_an/jeuvisudam.htm
16
Internet statique et dynamique
Programmation côté Serveur
ASP, PHP, JSP : Principe de fonctionnement
HTML+ASP (ou PHP ou JSP)
Serveur Web
Données
externes
Interpréteur
ASP, PHP ou JSP
Fichier HTML à
transmettre du
serveur Web au
navigateur Web
Interprétation
du HTML par
le navigateur Web
Affichage du résultat
de l'interprétation dans
le navigateur Web
17
Internet statique et dynamique
Programmation côté Serveur
ASP, PHP, JSP : Principe de fonctionnement
Ces 3 types de langages fonctionnent un peu comme le
Javascript, mais côté serveur et avec plus de possibilités.
Le fichier HTML sur le serveur contient des ordres ASP,
PHP ou JSP inclus dans le code HTML, avec une syntaxe
particulière. Lorsque le serveur envoie le fichier HTML
vers le navigateur Web, il va, à la volée, interpréter les
ordres ASP et les exécuter pour les transformer en HTML.
ASP (Active Server Page), PHP (Hypertext Preprocessor)
et JSP (Java Server Pages) permettent la lecture de
données externes (fichiers textes, bases de données),
l'envoie de commandes système, …
ASP = Microsoft, PHP = Linux&GPL, JSP = Sun
18
Internet statique et dynamique
Programmation côté Serveur
En résumé
Toutes ces techniques peuvent être combinées pour
créer un site que l’on peut qualifier de dynamique.
Les pages ne sont plus statiques, mais générées
à la demande.
Elles ont comme avantage de ne pas mettre en
jeu le navigateur de l'utilisateur,
mais elles utilisent des ressources
serveur.3
Transfert
1
Pages HTML
HTTP
HTTP :
HTML
Req
HTTP :
URL...
Serveur Web
Navigateur Web
2
de paramètres Exécution de
2
requète SQL
API
4
2
4
5
19
4
3
SGBDR
CGI
.exe
Résultat
HTML
3
Internet statique et dynamique
Programmation côté Serveur
Ressources externes
HTML et Javascript :
Site de Netscape : developer.netscape.com (Anglais)
Site du W3 Consortium : www.W3.org (Anglais)
Site de l'UNGI :www.imaginet.fr/ime (Français)
Java :
Site de Sun (créateur de Java) : java.sun.com (Anglais)
Site de l'UNGI :www.imaginet.fr/ime (Français)
Exemple de Java :www.javaside.com (Français)
CGI :
Site Alian Web Server : www.alianwebserver.com/informatique/internet/cgi/default.htm (Français)
Site de la NCSA :hoohoo.ncsa.uiuc.edu/cgi/ (Anglais)
Programmation de CGI en C :www.hut.fi/u/jkorpela/forms/cgic.html (Anglais)
Exemple de CGI (Observatoire de RadioAstronomie de Nançay) : www.obs-nancay.fr/html_an/jeuvisudam.
ASP :
Site : www.asp-fr.net (Français)
LearnASP : www.learnasp.com (Anglais)
PHP :
Linux France : www.linux-france.org/article/devl/php3/tut/ (Français)
PHPInfo : www.phpinfo.net (Français)
Site Officiel du PHP : www.php.net mais doc en Français
20