Section 3: Le Web, le http et le HTML 1
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 2
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 3
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 4
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 5
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 6
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 7
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 8
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
• 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
Section 3: Le Web, le http et le HTML 9
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 10
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 11
Section 3: Le Web, le http et le HTML 12
La programmation du côté serveur
Section 3: Le Web, le http et le HTML 13
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 14
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 15
Quelques variables CGI
• AUTH_TYPE• Il s'agit de la méthode d'authentification qui a été utilisée par le client pour accéder au
programme• CGI CONTENT_LENGTH
• 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• 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
• 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
• HTTP_REQUEST_METHOD• 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
Section 3: Le Web, le http et le HTML 16
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 17
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 18
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 19
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 20
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 21
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 22
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 23
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 24
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 25
Exemple getParameter
public void doPost(HttpServletRequest rq,HttpServletResponse rp)
throws ServletException{...String fName = rq.getParameter(“FirstName”),
sName = rq.getParameter(“SurName”);
...
<INPUT TYPE = “text” NAME =s “SurName”Size = “40” MAXLENGTH = 50>
Javacode forprocessingforms element
Section 3: Le Web, le http et le HTML 26
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 27
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 28
Un exemple en Java
HttpSession sess = rq.getSession(true);..sess.putValue(“Basket”, orderVector);..Vector shopVect = (Vector) sess.getValue(“Basket”);
Create a sessionobject
Associate a Vector withit Finally retrieve the
Vector after it has been filled
Section 3: Le Web, le http et le HTML 29
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 30
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 31
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 32
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 33
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 34
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 35
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 36
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