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
•	logs/
•	conf/
•	conf/server.xml
•	webapps/
•	webapps/examples/WEB-INF
•	webapps/examples /WEB-INF/web.xml
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
•	boncmd.jsp : qui génère un nouveau formulaire à partir des articles présents dans la base (il sera du même type que celui que vous avez fait dans le TD3.
•	commande.jsp : qui traite la soumission du bon de commande et insère la nouvelle commande dans la base de données
•	Ainsi que toutes les pages nécessaires au serveur de sujet de projet.
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.