Internet statique et dynamique Programmation côté Serveur. Programmation de sites web statiques et dynamiques. Programmation côté serveur

Transcription

1 Programmation de sites web statiques et dynamiques Programmation côté serveur Jean CARTIER MASTER INI 1

2 SOMMAIRE Internet statique et dynamique 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

3 Côté Client (c est à dire Côté Utilisateur) (ou encore Côté Navigateur Web) 3

4 Le HTML : Principe de fonctionnement Le HTML : un fichier texte enrichi de balises qui vont mettre ce texte en forme. (ex : <em>bonjour</em> met bonjour en italique) Le serveur Web transmet le HTML sans le modifier vers le demandeur. Serveur Web Fichier HTML transmis du serveur Web au navigateur Web 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. 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,... 4

5 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

6 Le Javascript : Principe de fonctionnement Le Javascript est un langage de programmation simple, directement inclus dans le code HTML. Le serveur Web se contente de transmettre le fichier HTML contenant le Javascript, sans rien modifier vers le demandeur. Le Javascript est interprété par le navigateur, et c'est pour cela qu'entre deux navigateurs l'apparence d'une 6 Interprétation du HTML et du Javascript par le navigateur Web page peut changer et le fonctionnement des scripts être aléatoire! Fichier HTML contenant du Javascript transmis du serveur Web au navigateur Web Affichage du résultat de l'interprétation dans le navigateur Web Navigateur Web Serveur Web

7 Le Javascript : Quelques exemples 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)! Javascript Java 7

8 Le Java : Principe de fonctionnement 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.! Java Javascript Serveur Web Fichier HTML transmis du serveur Web au navigateur Web. L applet Java est un fichier qui sera transmis à part. Il est indépendant de la plateforme sur laquelle il tourne (la plateforme doit possèder une "machine virtuelle java"). 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

9 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 rapide. 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 bases de données, de générer du graphisme et tout ceci en reposant sur un module de sécurité très avancé empêchant jusqu à présent le piratage ou les virus. Execution de l applet sur le navigateur Fichier HTML transmis du serveur Web au navigateur Web. L applet Java est un fichier qui sera transmis à part. Serveur Web! Java de Sun Java de Microsoft Navigateur Web du type : Internet Explorer, Netscape Commu 9

10 Le Java : Exemple d'utilisation Jeu Java : démineur (Génération d'image et d interface) Défilement de texte lu sur le serveur Texte défilant (Lecteur d'un fichier texte sur le serveur Web) 10

11 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

12 Côté Serveur 12

13 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

14 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

15 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

16 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 : 16

17 ASP, PHP, JSP : Principe de fonctionnement Serveur Web Données externes HTML+ASP (ou PHP ou JSP) 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

18 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

19 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. Navigateur Web Pages HTML HTTP : HTML 5 HTTP 1 2 Req HTTP : URL... Serveur Web API Transfert de paramètres CGI.exe 3 Exécution de requète SQL 3 3 SGBDR 19 4 Résultat HTML

20 Ressources externes HTML et Javascript : Site de Netscape : developer.netscape.com (Anglais) Site du W3 Consortium : (Anglais) Site de l'ungi : (Français) Java : Site de Sun (créateur de Java) : java.sun.com (Anglais) Site de l'ungi : (Français) Exemple de Java : (Français) CGI : Site Alian Web Server : (Français) Site de la NCSA :hoohoo.ncsa.uiuc.edu/cgi/ (Anglais) Programmation de CGI en C : (Anglais) Exemple de CGI (Observatoire de RadioAstronomie de Nançay) : ASP : Site : (Français) LearnASP : (Anglais) PHP : Linux France : (Français) PHPInfo : (Français) Site Officiel du PHP : mais doc en Français 20