Section 3: Le Web, le http et le HTML1 La programmation du Web Du côté client Code léger qui...

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


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.


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


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é


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


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>


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é


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


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


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



La programmation du côté serveur


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


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


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


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


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


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!


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


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


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


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>”);

}

}


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


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


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


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


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


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


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


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


Technologie des pages dynamiques

• Active Serveur Pages (Microsoft)• Java Server Pages (le monde Java)• RHTML (le monde Ruby)• PHP (le monde Linux)


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


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


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>


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() %>


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

Date post:	04-Apr-2015
Category:	Documents
Upload:	mireille-antoine
View:	110 times
Download:	1 times

Section 3: Le Web, le http et le HTML1 La programmation du Web Du côté client Code léger qui...

Documents