La programmation du Web • Du côté client • Code léger qui s’exécute sur l’ordinateur client • Javascript, Applets, Flash, DHTML • Du côté serveur • • • • CGI-Perl PHP (Python) Servlet et Java Server Pages ASP « Active Server Pages » et VBScript Section 3: Le Web, le http et le HTML 1 Sur le client-DOM • La page actuellement présenté par le fureteur est représenté enmémoire par son arbre XML • le “Document Object Model” (DOM) • Les modifications par programme local sur ce DOM sont immédiatement présentées à l’utilisateur. Section 3: Le Web, le http et le HTML 2 Sur le client - Javascript • Langage • Interprété, Orienté Objet, Syntaxe proche du C et Java • Code s’insère dans le code HTML • Cadre dans la page envoyée au client, puis interprétée • Code s’exécute localement dans une boite de sécurité • Les événements du client • La souris, le clavier, le temps • OnOver, OnMouse. OnClick • Des requêtes http additionnelles au serveur • L’écran de l’utilisateur • Nouvelles fenêtre et cadres • Modifications partielles à la page affichée par son DOM Section 3: Le Web, le http et le HTML 3 Sur le client les Applets • Code téléchargé au client • Code référencé dans le HTML • Les objets Applet n’ont pas de constructeur • Ont des restrictions de sécurité Section 3: Le Web, le http et le HTML 4 Les Applets • Langage java • Ensemble de fichiers sources java • Compiler en .class (1 fichier .class par classe définie) • JVM client exécute le code • Appel de l’applet dans le code HTML • <APPLET CODE= … > </APPLET> • Modèle de sécurité fort Section 3: Le Web, le http et le HTML 5 Les Applets <html> <head> <TITLE> Exemple d’applet</TITLE> </head> <body> <H1>Applet Java qui produit et affiche une horloge </H1> <applet code=« clock.class » width=170 height=150> </applet> </body> </html> Section 3: Le Web, le http et le HTML 6 Les ActiveX • • • • Composant Microsoft ActiveX ≠ Applets (Java) Orienté objet Fichiers stockés sur disque dur • .VBX • .OCX • .DLL ou .EXE • Créés avec Visual basic, Delphi ou C++ • Pas de contrôle de sécurité Section 3: Le Web, le http et le HTML 7 Différences entre les applets et les applications • Les applets sont exécutés dans une page HTML • Les applets ne peuvent pas agir sur le système local • Tous les sorties se font par l’interface visuelle • Hérite de la classe Applet Section 3: Le Web, le http et le HTML • Les applications démarre et se termine de façon autonome • Les applications peuvent agir sur le système local • Les applications peuvent écrire sur fichier et sur la console 8 Caractéristiques des clients riches • Le modèle objet du document (DOM) est une interface neutre au fureteur et au rendu qu’il présente. • Le fureteur est responsible de l’exécution des scripts locaux • L’apparence du HTML est défini par les feuilles de styles CSS • JavaScript est le langage de scripting universellement supporté dans les différents fureteur sur le marché. • Plusieurs autres alternatives technologiques pour les clients riches: • Applets, ActiveX, Flash Section 3: Le Web, le http et le HTML 9 AJAX • Asynchronous JavaScript and XML, ou Ajax • Ensemble de technique de développement web pour créer des applications web interactives • HTML (ou XHTML) et CSS pour la présentation de l’information • Le modèle objet du document manipulé par Javascript pour afficher dynamiquement et interargir avec l’information présentée. • L’utilisation de l’objet XMLHttpRequest afin d’échanger des données asynchrones avec le serveur Web. • Voir http://en.wikipedia.org/wiki/AJAX Section 3: Le Web, le http et le HTML 10 Section 3: Le Web, le http et le HTML 11 La programmation du côté serveur Section 3: Le Web, le http et le HTML 12 Rappel: le serveur Web • Un serveur de fichier sophistiqué • Réagit aux requêtes faites selon le protocole HTTP • Les requêtes vont de la demande d’une page au traitement des données d’un formulaire • Un grand nombre de serveurs existent • Apache, gratuit, le plus populaire • IIS de Microsoft • Maintenant un serveur web de base est disponible dans tous les ordinateurs et appareils réseaux Section 3: Le Web, le http et le HTML 13 Les programmes serveurs Web • Première génération: • « Common Gateway Interface »-CGI • La requête HTTP du client est redirigée sur le serveur vers un programme • Une passerelle sur le serveur initie le programme lors de la requête • Les paramètres de la requêtes sont des variables d’environnement et elles peuvent être consultées par le programme Section 3: Le Web, le http et le HTML 14 Quelques variables CGI • AUTH_TYPE • • CGI CONTENT_LENGTH • • • Type de données contenu présent dans le corps de la requête. Il s'agit du type MIME des données HTTP_COOKIE • • Longueur du corps de la requête. Il s'agit de la taille des données envoyées au CGI par l'intermédiaire de la méthode POST d'un formulaire CONTENT_TYPE • • Il s'agit de la méthode d'authentification qui a été utilisée par le client pour accéder au programme Les témoins du client si jamais un ou plusieurs sont effectivement présents sur le disque du client HTTP_REFERER • URL de la page qui a appelé le script CGI • Cette variable indique le type de méthode utilisée pour envoyer les données au programme CGI. Il s'agit de GET,HEAD,POST,PUT ou DELETE. Dans le cas de la méthode GET, les données sont encodées avec l'URL de requête, dans le cas de la méthode POST, par contre, les données présentes dans le corps de la requête sont accessibles via le fichier de flux d'entrée standard nommé STDIN HTTP_REQUEST_METHOD Section 3: Le Web, le http et le HTML 15 Quelques variables CGI (ii) • HTTP_USER_AGENT • • Cette variable permet d'avoir des informations sur le type de navigateur utilisé par le client, ainsi que son système d'exploitation PATH Il s'agit du chemin d'accès au script CGI PATH_INFO Il s'agit de la partie de l'URL (ayant servie à accéder au script CGI) située avant le point d'interrogation. Il s'agit donc du chamin d'accès au script CGI sans prendre en compte les données supplémentaires PATH_TRANSLATED • Il s'agit du chemin d'accès absolu au script CGI, c'est-à-dire l'emplacement absolu du script sur le serveur QUERY_STRING Il s'agit de la partie de l'URL (ayant servie à accéder au script CGI) située après le point d'interrogation. C'est de cette manière que sont transmises les données d'un formulaire dans le cas de la méthode GET • REMOTE_ADDR • Cette variable contient l'adresse IP du client appelant le script CGI Section 3: Le Web, le http et le HTML 16 Quelques variables CGI (iii) • REMOTE_USER • Cette variable n'existe que si le client a été soumis à une authentification, et contient alors le couple • nom_d_utilisateur/mot_de_passe SCRIPT_FILENAME • Chemin d'accès complet au script • CGI SCRIPT_NAME • Chemin d'accès relatif (par rapport au chemin d'accès à la racine web) au script • CGI SERVER_PORT • port TCP auxquel les données ont été envoyées (généralement le port 80) • SERVER_PROTOCOL • Nom et version du protocole utilisé pour envoyer la requête au script CGI Section 3: Le Web, le http et le HTML 17 Nouvelles technologies pour la programmation serveur • Servlets et Java Server Pages • PHP (Python et Apache) • Perl (anciennement, le premier choix pour la programmation des CGI) • Active Server Pages et VBScript pour l’environnement Microsoft • Ruby on Rails! Section 3: Le Web, le http et le HTML 18 Les Servlets • En Java, en Ruby, • avec une approche orientée objet • Peuvent utiliser les libraires du langage • Portable, • s’exécute sur une grande variété de serveurs • Définition publique • Tests disponibles • Code ouvert de base gratuit • Disponible sur Apache Section 3: Le Web, le http et le HTML 19 Les servlets (ii) • Composante qui reçoit la requête HTTP • Construit la réponse • Retourne la réponse • Interface aux serveurs standardisée • • • • Paramètres Appel et fil d'exécution Variables locales, par requêtes, ou partagées Construire la réponse • Limite: construire la réponse en HTML dans un programme est lourd • Séparer la logique de l'application de la présentation Section 3: Le Web, le http et le HTML 20 Pour faire un Servlet • Implémenter l’interface Servlet, habituellelement en héritant de la super classe HttpServlet • La méthode doGet est appelée lorsque le serveur web reçoit une requête GET(doPut, doHead) • protected void doGet(HttpServletRequest req, HttpServletResponse resp) • Parameters: • req - an HttpServletRequest object that contains the request the client has made of the servlet • resp - an HttpServletResponse object that contains the response the servlet sends to the client Section 3: Le Web, le http et le HTML 21 Un exemple import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class HelloThere extends HttpServlet{ public void doGet (HttpServletRequest rq, HttpServletResponse rp) throws ServletException, IOException { rp.setContentType(“text/html”); PrintWriter browserOut = rp.getWriter(); browserOut.println(“<HTML>”); browserOut.println (“<HEAD><TITLE> Hello there </TITLE></HEAD>”); browserOut.println(“<BODY>”); browserOut.println(“<H3> Hello there</H3>”); browserOut.println(“</BODY></HTML>”); } } Section 3: Le Web, le http et le HTML 22 Le cycle de vie du Servlet • • • • Le Servlet est chargé en mémoire Le Servlet est initialisé Il attend les requêtes Il exécute la méthode à chaque requête • Il est finalement mis hors service Section 3: Le Web, le http et le HTML 23 Traitement des formulaires • Les servlets peuvent accéder aux champs du formulaire soumis • Ils utilisent la méthode getParameter pour cela • Ils exécutent le traitement approprié • Ils peuvent construire une page de réponse Section 3: Le Web, le http et le HTML 24 Exemple getParameter public void doPost(HttpServletRequest rq, HttpServletResponse rp) throws ServletException { ... String fName = rq.getParameter(“FirstName”), sName = rq.getParameter(“SurName”); ... Java code for processing forms element <INPUT TYPE = “text” NAME =s “SurName” Size = “40” MAXLENGTH = 50> Section 3: Le Web, le http et le HTML 25 La persistance • HTTP est un protocole sans état • Théoriquement, on ne peut pas suivre l’état d’une session d’une requête à l’autre • Plusieurs solutions sont « standards » • Témoins • Identification de l’utilisateur • Réécriture de l’URL avec un paramètre donnant le numéro de session Section 3: Le Web, le http et le HTML 26 Les Servlets et la persistance • La gestion de la session est supportée avec les Servlets • Un objet HttpSession est disponible pour chaque session • C’est un sac de tuples <identificateur>, <objet> • Cet objet est conservé en mémoire et il est disponible d’une requête HTTP à l’autre Section 3: Le Web, le http et le HTML 27 Un exemple en Java HttpSession sess = rq.getSession(true); .. sess.putValue(“Basket”, orderVector); .. Vector shopVect = (Vector) sess.getValue(“Basket”); Associate a Vector with it Section 3: Le Web, le http et le HTML Finally retrieve the Vector after it has been filled Create a sessio object 28 Les pages dynamiques (i) • Problèmes avec la programmation des Servlet et des CGI • Le programmeur doit produire des pages HTML dans son code • Mélange les tâches et les spécialités • Mélange la logique de l’application et la présentation Section 3: Le Web, le http et le HTML 29 Les pages dynamiques (ii) • Encoder du code (ou des appels à du code) dans les pages HTML • La majeure partie de la page est « statique », • Le gabarit de la page est définie par le concepteur graphique • Certaines parties de la page sont dynamiques • Le code est exécuté au moment de la requête Section 3: Le Web, le http et le HTML 30 Technologie des pages dynamiques • Active Serveur Pages (Microsoft) • Java Server Pages (le monde Java) • RHTML (le monde Ruby) • PHP (le monde Linux) Section 3: Le Web, le http et le HTML 31 Java Server Pages • Quoi? • Sépare la génération dynamique, en Java, de la présentation, en HTML • Réutilise des composents génériques • Balises "JSP" et librairies de Java, de JavaBeans • Simplifie le développement des pages avec des balises Section 3: Le Web, le http et le HTML 32 Java Server Pages (ii) • Comment? • Compile les pages JSP en objets Java Servlet • Les balises JSP sont remplacées par des appels aux composantes objets Java • Ces composantes objets Java, remplaçant les balises JSP, seront exécutés • A chaque requête HTTP Section 3: Le Web, le http et le HTML 33 Un exemple de JSP • Imprime "Good Morning" ou "Good Afternoon" <HTML> <%@ page language="java" imports="com.wombat.JSP.*" %> <H1>Welcome</H1> <P>Today is </P> <jsp:useBean id="clock" class="calendar.jspCalendar" /> <UL> <LI>Day: <%=clock.getDayOfMonth() %> <LI>Year: <%=clock.getYear() %> </UL> <% if (Calendar.getInstance().get(Calendar.AM_PM) == Calendar.AM) { %> Good Morning <% } else { %> Good Afternoon <% } %> <%@ include file="copyright.html" %> </HTML> Section 3: Le Web, le http et le HTML 34 Description de l'exemple • La directive jsp • Incluse entre les balises <%@ et %> • Balises HTML et textes • Envoyées tel quel au client • <H1>Welcome</H1> <P>Today is </P> • Balises JSP ou d'actions • Construites comme des balises XML • <jsp:useBean id="clock" class="calendar.jspCalendar" /> • Celle-ci instancie un objet sur le serveur • Balises d'expression Java • Evalue l'expression Java entre <%= et %> • <%=clock.getDayOfMonth() %> Section 3: Le Web, le http et le HTML 35 Références • Anglais • http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/ • http://java.sun.com/products/jsp/whitepaper.html • http://java.sun.com/products/jsp/docs.html • Français • http://www.loria.fr/~chades/SID/JSP/JSP.ppt Section 3: Le Web, le http et le HTML 36