Université Joseph Fourier

Année Universitaire 2001-2002

Technologies du Web

 

TD : HTML Simple

Concepteur :     Didier DONSEZ Didier.Donsez@imag.fr

But :                 Ce premier TD vise à vous familiariser avec HTML aussi au moyen de logiciel auteur que rédigeant directement le source HTML.

Durée :            3 heures (gérez votre temps !)

Documents  http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Conseil :          Des nombreuses solutions à ce TD se trouvent dans les exemples !!!

Recommandations :     Tester votre code HTML, vos CSS et vos scripts à la fois sur Internet Explorer et Netscape !

Logiciels :     Internet Explorer 5, Netscape Communicator 4

 

Ex0 : Exemple du Cours

Parcourez les exemples vus en cours

Ils sont présents sur http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Ex1 : Votre page personnelle

Réalisez une présentation de vous même au travers d'une page personnelle (cursus dans une table, loisirs, sports, langues parlées …) en version multilingue et une présentation de votre promotion.

Ex2 : Utilisation des Frames

Organisez votre page personnelle avec des Frames (Bannière, Sommaire, Rubrique)

N'oubliez pas que quelques navigateurs antédiluviens ne supportent pas les frames.

Ex3 : Feuilles de Style CSS

Définissez une feuille de style CSS commun pour personnaliser la mise en page de votre “ collection ” de documents. Vous en trouverez une certaines nombres depuis www.w3.org/CSS

Ex4 : Utilisation d'une Image sensible

Organisez votre sommaire au moyen d'une image sensible.

Ex5 : Livre d'Or

Prévoyez un livre d'or (guestbook) pour les visiteurs de votre site. Intégrez le à vos frames.

Il sera constitué d'un formulaire demandant au visiteur son nom, son sexe (RADIO), son email, son pays d'origine (parmi une liste de pays) et un commentaire (TEXTAREA) et un bouton de validation et de remise à zéro.

Ex6 : Livre d'Or (la suite avec JavaScript)

Reprenez le formulaire de votre livre d'or.

Ajoutez un ou plusieurs scripts JavaScript qui vérifient si le visiteur a complètement rempli les entrées du formulaire et notamment si le email semble correct (pas d'espace, un mot suivi d'un @ suivi d'une chaîne de mots séparés par des points et dont le dernier est soit .fr, .gb, .com, .org, .net (la liste n'est pas limitative)).

Ajoutez ensuite un script JavaScript qui à la soumission du formulaire, génère (à la volée) un nouveau document HTML à la place du formulaire (ce document contient les textes entrés dans le formulaires).

Ex7 : Intégration d'une police dynamique

Utilisez une police dynamique publique (Dynamic Font : http://www.truedoc.com) pour les titres de type H1 dans votre CSS. (Ne fonctionne qu’avec Netscape)

 

 

Université Joseph Fourier

Année Universitaire 2001-2002

Technologies du Web

 

TD  : DHTML, JavaScript et Applet Java

Concepteur :     Didier DONSEZ Didier.Donsez@imag.fr

But :                 Programmation en JavaScript et manipulation d’applets

Durée :            3 heures (gérez votre temps !)

Documents :    http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Conseil :          Des nombreuses solutions à ce TD se trouvent dans les exemples !!!

Logiciels :     J2SE 1.2+, Internet Explorer 5, Netscape Communicator

 

Ex0 : Exemple du Cours

Parcourez les exemples vus en cours

Ils sont présents sur http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Consultez également les exemples du site développeur de Netscape (. N'y passez pas trop de temps (maximum 30 minutes) !

Ex1 : Bouton Sensible

Organisez votre sommaire avec des boutons sensibles.

Un bouton sensible offre plusieurs fonctionnalités combinables:

·         Surbrillance: il passe en surbrillance quand le pointeur passe dessus.

·         Déactivation après suivi : il se déactive jusqu'à la prochaine session quand l'utilisateur veut suivre le lien.

·         Mémoire de suivi sur plusieurs sessions: il se déactive jusqu'à la prochaine session quand l'utilisateur veut suivre le lien.

Programmez ces boutons en JavaScript et de manière réutilisable (prototype et script séparé).

Ex2 : Barre de navigation

L’exemple http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb/js_navbar présente d’utilisation d’une barre de menu déroulant.

Remplacer le sommaire par une barre de menu horizontale.

Ex3 : Applets Java

Trouvez le répertoire d’un JDK (Java Development Kit).ou installez le si vous ne le trouvez pas : http://java.sun.com/products

Testez les applets en démonstration dans le répertoire $JAVA_HOME/demo/applets/ sur Unix et %JAVA_HOME%\demo\applets

Je vous recommande TicTacToe, ImageMap, MoleculeViewer, WireFrame, GraphLayout, SimpleGraph

Et bien sur NervousText

Pour cela, visualisez les documents HTML présents dans ces réperatoires avec Netscape ou IE.

Regardez également le source des documents HTML

Remarque : SimpleGraph amélioré permet d’illustrer vos documents scientifiques sur le Web.

Ex4 : Applet Java

Placez dans votre page d’accueil l’applet NervousText des demos du JDK

<applet code="NervousText.class" width=534 height=50>

<param name=text value="Bienvenu sur mon site">

</applet>

La classe de cette applet doit se trouver dans le même répertoire que votre document !

Ex5 : Modification de l’applet Java

Modifiez le source de la classe NervousText pour y ajouter la méthode publique setBanner(String)

    public void setBanner(String _banner){

     banner=_banner;

     int bannerLength = banner.length();

     StringBuffer bc = new StringBuffer(bannerLength);

     StringBuffer attrs = new StringBuffer(bannerLength);

     int wd = 0;

     for (int i = 0; i < bannerLength; i++) {

         char c = banner.charAt(i);

         char a = 0;

         if (c == '^') {

          i++;

          if (i < bannerLength) {

              c = banner.charAt(i);

              a = '^';

              wd += SMALL_WD - REGULAR_WD;

          } else {

              break;

          }

         }

         bc.append(c);

         attrs.append(a);

         wd += REGULAR_WD;

     }

 

     bannerLength = bc.length();

     bannerChars =  new char[bannerLength];

     attributes = new char[bannerLength];

     bc.getChars(0, bannerLength, bannerChars, 0);

     attrs.getChars(0, bannerLength, attributes, 0);

 

     threadSuspended = false;

     resize(wd + 10, 50);

    }

Recompilez la classe avec javac et testez votre applet dans le document !

Ex6 : Applet Java et JavaScript

Pilotez cette applet au moyen d’un script JavaScript déclenché par un script qui change toutes les 10 secondes le message que visualise l’applet.

Ex7 : Applet Java et JavaScript (Extra)

Modifiez l’applet Clock du JDK en lui ajoutant un paramètre et une méthode permettant à l’horloge d’affichage l’heure dans un autre fusion horaire.

Ajoutez dans un même document HTML plusieurs horloges à des fuseaux différents.

Utilisez l’image sensible de la Mappemonde (dans l’exemple usemap) pour configurer les fuseaux horaires des horloges.

 

 

Université Joseph Fourier

Année Universitaire 2001-2002

Technologies du Web

 

TD  : Formulaire HTML et JavaScript

Concepteur :     Didier DONSEZ Didier.Donsez@imag.fr

But :                 Création de formulaire et gestion en JavaScript

Durée :            3 heures (gérez votre temps !)

Documents  http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Conseil :          Des nombreuses solutions à ce TD se trouvent dans les exemples !!!

Logiciels :     MS Access, Internet Explorer 5, Netscape Communicator

 

Ex0 : Exemple du Cours

Parcourez les exemples vus en cours

Ils sont présents sur http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Ex1 : Bon de Commande

A partir des exemples de formulaires vus dans http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb/form, réalisez une formulaire de bon de commande pour les articles présents dans la base de données MS Access factcmd.mdb

Le client doit pouvoir commander zéro ou aucune de ces articles.

 

A chaque modification d’une quantité, un script recalcule le nouveau total de la ligne et le nouveau montant globale (HT et TTC en FRF et en EUR) du bon de commande.

 

Complétez votre formulaire avec des champs pour remplir les coordonnées de livraison et de facturation. Effectuez des vérifications des champs en JavaScript (Certains champs sont obligatoires et d’autres optionnels)

 

N’oubliez pas d’ajouter un bouton pour la soumission du formulaire dont l’action sera commande.jsp

 

Ecrire un script qui sur soumission du formulaire qui vérifie que tous les champs obligatoires sont remplis correctement

 

Optionnel : Complétez ce script pour qu’après les vérifications, il génère « à la volée » un récapitulatif de la commande dans une nouvelle fenêtre (voir l’exemple js_window)

 

Important : nous utiliserons ce bon de commande dans un TD ultérieur.

 

 

Université Joseph Fourier

Année Universitaire 2001-2002

Technologies du Web

 

TD : XML

Concepteur :     Didier DONSEZ Didier.Donsez@imag.fr

But :                 Définition d’un DTD XML, Feuille de transformation de style XSLT

Durée :            2 heures (gérez votre temps !)

Documents  http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Conseil :          Des nombreuses solutions à ce TD se trouvent dans les exemples !!!

Recommandations :     Tester votre code XML et XSLT avec Internet Explorer 5

Logiciels :     Internet Explorer 5

 

XML dans la prise de commande

Rappel : XML peut servir de “ hub ” logiciel entre des systèmes d’information (appartenant à des organisations et entreprises différentes). Ce TD vise à mettre ceci en pratique en utilisant XML pour mener une transaction commerciale (simplifiée) entre un client et un marchand en B2B ou en B2C.

Ex0 : Exemple du Cours

Parcourez les exemples vus en cours (Et surtout xslt_doc et xslt_table)

Ils sont présents sur http://www-adele.imag.fr/~donsez/cours/exemplescourstechnoweb

Ex1 : DTD

Définir la DTD commande.dtd pour un bon de commande (en FRF et en EUR avec les montants HT et TTC) pour les articles comme ceux de la base données MS Access factcmd.mdb

Ex2 : XML

Ecrire à la main un exemple de bon de commande cmd123.xml qui valide la DTD commande.dtd

<?xml version="1.0"?>

<!DOCTYPE doc SYSTEM "commande.dtd">

<commande numcmd="123">

…

</commande>

Visualiser sous IE5

Modifier légèrement ce document pour qu’il ne soit pas valide (invalid_cmd123.xml)

Visualiser sous IE5

Ex3 : XSLT

Définir un document XSL cmd2html.xsl pour visualiser cette commande en HTML

Modifier cmd123.xml pour qu’il inclut la PI (Processing Instruction) suivante

<?xml version="1.0"?>

<!DOCTYPE doc SYSTEM "commande.dtd">

<?xml-stylesheet type="text/xsl" href="cmd2html.xsl"?>

<commande numcmd="123">

…

</commande>

Visualiser cmd123.xml sous IE5

 

Important : nous utiliserons ce bon de commande dans un TD ultérieur.

 

 

Université Joseph Fourier

Année Universitaire 2001-2002

Technologies du Web

 

TD : Serveur Web

Concepteur :     Didier DONSEZ Didier.Donsez@imag.fr

But :                 Installation et prise en main de TomCat

Durée :            2 heures (gérez votre temps !)

Documents  http://www-adele.imag.fr/~donsez/cours#web

Recommandations :     Tester le fonctionnement de TomCat avec Internet Explorer 5 et Netscape

Logiciels :     J2SE 1.2+, TomCat, Internet Explorer 5, Netscape Communicator

Ex1 : Installation et démarrage de Jakarta TomCat

Téléchargez TomCat : http://jakarta.apache.org/builds/jakarta-tomcat/release/v3.2.3/bin/

Installez Jakarta TomCat sur votre machine dans un répertoire tomcat

(Vérifiez bien que vous avez un JDK installé !)

Positionnez les variables suivantes en fonction de vos installations

set JAVA_HOME=c:\jdk1.3.1

set TOMCAT_HOME=c:\tomcat

Lancez TomCat avec la commande

%TOMCAT_HOME%\bin\startup.bat

Attendez que TomCat affiche

2001-10-04 09:43:02 - ContextManager: Adding context Ctx( /examples )

2001-10-04 09:43:02 - ContextManager: Adding context Ctx( /admin )

Demarrage de tomcat. Consultez le fichier logs/tomcat.log pour les messages d''e

rreurs

2001-10-04 09:43:11 - ContextManager: Adding context Ctx(  )

2001-10-04 09:43:12 - ContextManager: Adding context Ctx( /test )

2001-10-04 09:43:15 - PoolTcpConnector: Starting HttpConnectionHandler on 8080

2001-10-04 09:43:15 - PoolTcpConnector: Starting Ajp12ConnectionHandler on 8007

Testez les exemples de JSP et de Servlet accessible à partir du serveur http://localhost:8080/

http://localhost:8080/examples/jsp/index.html

http://localhost:8080/examples/servlets/index.html

Arrêtez (proprement) TomCat avec la commande

%TOMCAT_HOME%\bin\shutdown.bat

Ex2 : Installation de nouvelles applications

Ajoutez au fichier de configuration de TomCat %TOMCAT_HOME%\conf\server.xml les 2 contextes suivants :

        <Context path="/ecom"

                 docBase="webapps/ecom"

                 crossContext="false"

                 debug="0"

                 reloadable="true" >

        </Context>

        <Context path="/perso"

                 docBase="webapps/perso"

                 crossContext="false"

                 debug="0"

                 reloadable="true" >

        </Context>

        <Context path="/chat"

                 docBase="webapps/chat"

                 crossContext="false"

                 debug="0"

                 reloadable="true" >

        </Context>

        <Context path="/technoweb"

                 docBase="webapps/technoweb"

                 crossContext="false"

                 debug="0"

                 reloadable="true" >

        </Context>

 

juste après le contexte :

        <Context path="/examples"

                 docBase="webapps/examples"

                 crossContext="false"

                 debug="0"

                 reloadable="true" >

        </Context>

Ex3 : Application perso

Créez un répertoire %TOMCAT_HOME%\webapps\perso dans lequel vous mettrez les documents relatifs à votre page personnelle (TD1 et 2)

Relancez TomCat avec la commande

%TOMCAT_HOME%\bin\startup.bat

Visualisez les à partir de l’URL http://localhost:8080/perso

Visualisez celles de vos camarades en remplacant localhost par le nom de leur machine à partir de l’URL http://localhost:8080/perso

Ex4 : Application ecom (comme Electronic Commerce)

Créez un répertoire %TOMCAT_HOME%\webapps\ecom dans lequel vous mettrez les documents relatifs à la prise de commande (TD3 et 4)

Visualisez les à partir de l’URL http://localhost:8080/ecom

Ex5 : Test des formulaires de ecom

Copiez la JSP snoop.jsp dans le répertoire de ecom %TOMCAT_HOME%\webapps\ecom

NB : cette JSP est la même que celle utilisée dans les exemples du cours form/

Modifiez les formulaires (TD3 et 4) de l’application ecom pour l’action du formulaire soit

     ACTION="snoop.jsp"

Visualisez vos formulaires et soummettez les !

Ex6 : Tour d’horizon de TomCat

Allez jeter un coup d’œil aux fichiers suivants

Quels sont leurs rôles respectifs à votre avis ?

 

 

Université Joseph Fourier

Année Universitaire 2001-2002

Technologies du Web

 

TD : Serveur Web et Bases de Données

Concepteur :     Didier DONSEZ Didier.Donsez@imag.fr

But :                 Configuration d’ODBC et développement de JSP

Durée :            2 heures (gérez votre temps !)

Documents  http://www-adele.imag.fr/~donsez/cours#web

Recommandations :     Tester le fonctionnement de TomCat avec Internet Explorer 5 et Netscape

Logiciels :     J2SE 1.2+, TomCat, MS Access, Internet Explorer 5, Netscape Communicator

Ex1 : Configuration de la source ODBC

ODBC (Open DataBase Connection) est un format de communication entre clients et serveurs de bases de données.

Décompressez la base de données MS Access

%TOMCAT_HOME%\webapps\ecom\WEB-INF\database\factcmd.mdb.zip

Ouvrez ODBC dans le panneau de configuration de Windows

Dans la partie DNS utilisateur, Ajoutez la source OBDC avec les paramètres suivants :

Chemin de la base de données :

%TOMCAT_HOME%\webapps\ecom\WEB-INF\database\factcmd.mdb

Nom de la source : ECOM

Nom de connection : admin

Mot de Passe : MESSI

Ex2 : Test de ODBC par une page JSP

Testez ensuite la JSP sql.jsp suivante http://localhost:8080/ecom/sql/sql.jsp

<HTML><HEAD><TITLE>JSP SQL</TITLE>

<%@ page import="java.sql.*" %>

</HEAD><BODY>

<H1>Liste des articles Ecom</H1>

<HR>

<%

           String driver="sun.jdbc.odbc.JdbcOdbcDriver";

           String dburl="jdbc:odbc:ECOM"; // quand la source ODBC s'appelle ECOM

           String dbusername="admin";

           String dbpassword="nimda";

 

           String sqlstatement= "SELECT * from Article";

 

             Class.forName(driver);

             Connection cnx = DriverManager.getConnection(dburl,dbusername,dbpassword) ;

             PreparedStatement stmt = cnx.prepareStatement(sqlstatement);

             if (stmt.execute()) {

               ResultSet rs = stmt.getResultSet();

               ResultSetMetaData rsmd = rs.getMetaData();

               int numcols = rsmd.getColumnCount();

          %><TABLE BORDER="1"><TR><%

               for (int i = 1; i <= numcols; i++){

                 out.println("<TH>" + rsmd.getColumnLabel(i));

          }

 

               while(rs.next()) {

                 %><TR><%

                         for(int i = 1; i <= numcols; i++) {

                                 Object obj = rs.getObject(i);

                                if (obj != null){

                                    out.println("<TD>"+obj.toString());

                                 } else {

                                    out.println("<TD>");

                                 }

                         }

                     }

                   %></TABLE><%

                    rs.close();

   } else {

                    out.println("No Row<BR>");

   }

   cnx.close();

%>

<HR>

</BODY>

</HTML>

Ajoutez manuellement un article dans la base factcmd.mdb

Retestez la JSP http://localhost:8080/ecom/sql/sql.jsp

 

Modifiez la JSP sql.jsp pour qu’elle prenne en paramêtre la requête SQL à exécuter (au lieu de SELECT * FROM ARTICLE). Ce paramêtre devra être nommé sqlstatement

Retestez la JSP http://localhost:8080/ecom/sql/sql.jsp

Puis avec la JSP http://localhost:8080/ecom/sql/sql.htm

 

Testez ensuite la JSP xsql.jsp http://localhost:8080/ecom/sql/xsql.htm qui retourne un document XML.

Ex3 : Création des principales JSP de ecom

Créez les JSP nécessaires à votre application de prise de commande

Ex4 : Portage du Chat PHP en JSP (Optionnel)

L’application php_chap présente dans les exemples est une application de Tchatche écrite en PHP.

Portez cette application vers les JSP (jsp_chat) en réutilisant la même base de données.

 

 

Université Joseph Fourier

Année Universitaire 2001-2002

Technologies du Web

 

TD : Serveur Web Apache

Concepteur :     Didier DONSEZ Didier.Donsez@imag.fr

But :                 Configuration d’Apache et de divers modules

Durée :            2 heures (gérez votre temps !)

Documents  http://www-adele.imag.fr/~donsez/cours#web

Recommandations :     Tester le fonctionnement de TomCat avec Internet Explorer 5 et Netscape

Logiciels :     J2SE 1.2+, Apache Server, Jserv, mod_php, TomCat, MS Access, Internet Explorer 5, Netscape Communicator

Ex1 : Installation de Apache Server

Installez Apache Server sur votre machine

Configurez le serveur pour qu’il puisse servir de Proxy

Testez la fonction de proxy

Ex2 : Installation du module PHP pour Apache Server

Installez le module mod_php sur votre machine

Installez et testez l’application php_chap présente dans les exemples

Ex3 : Installation du module  mod_jserv pour Apache Server

Installez Apache Server et le module mod_jserv sur votre machine

Configurez pour que TomCat soit le moteur de servlet de Jserv

TesteZ les applications précédents (perso,ecomm).

Ex4: Installation du module  mod_ssl pour Apache Server

Installez le module mod_ssl pour Apache Server sur votre machine. SSL/TLS permet de sécuriser (par chiffrage) la connexion HTTP(S) entre le navigateur et le serveur Apache

Testez la liaison sécurisée pour l’application ecom (https://localhost/ecom) et chat (https://localhost/chat)

Ex5 : Installation de HTDig

Installez HTDig sur votre machine (HTDig est un moteur d’indexation de documents)

Configurez le pour qu’il indexe les documents servis par Apache.