ISI 1022 : Jean-Noël Sorenti. Année 2002/2003 Développement Partie Cliente ISI 1022 : 1
ISI 1022 : Développement Partie Cliente Le développement partie cliente concerne tout développement étant interprété directement ou indirectement* par le navigateur Web : HTML,CSS JAVASCRIPT FLASH VISUAL BASIC APPLETS, PLUGINS (VML,MathML) XML (XSL/DTD) Ces ressources sont fournies par le Serveur via des pages statiques (*.html,*.js, pouvant être fournies par un simple serveur HTTP) ou via des pages JSP ou des Servlets. 2 HTML est un langage directement interprété par le navigateur Web. On dira que les Applets, le Flash sont interprétés par des modules externes du navigateur Web, on peut dire qu il sont interprétés indirectement par le Web Browser.
ISI 1022 : Développement Partie Cliente HTML (Hyper Text Markup Language) est le langage standard du Web. Lors de la réception d un document, le Web Browser ne s attend dans un premier temps qu à interpréter uniquement du HTML. Comme son nom l indique, un fichier HTML est composé de balises qui vont représenter des éléments. Ces éléments sont interprétés et représentés par le Web Browser (graphiques, sons, formulaires de saisies, autre langage, etc..) Le langage JavaScript sera encapsulé dans une balise HTML : <script language= javascript ></script> 3
ISI 1022 : Développement Partie Cliente Une page HTML est donc composée de balises ; Les premières balises définissent la page HTML elle même avec son entête et son contenu : <HTML> <HEAD> <TITLE>TITRE DE LA PAGE</TITLE> </HEAD> <BODY> CONTENU DE LA PAGE </BODY> </HTML> La syntaxe d un élément est la suivante : <ELM param1 param2= val2 param3= val3 > corps de l élément </ ELM > Un élément ne comprenant pas de corps peut s écrire de la façon suivante : < ELM param1 param2= val2 param3= val3 /> 4
ISI 1022 : Développement Partie Cliente : Saisie d informations Les applications Web prévoient généralement la collecte d informations auprès des clients. Les formulaires HTML sont la solution la plus courante. Le jeu de balises utilisé pour créer un formulaire est <form > contrôles </form>. L élément form comprendra des contrôles (champ, cases à cocher, etc. ) Les informations des contrôles seront soumises au Serveur afin d être traitées. 5
ISI 1022 : HTML : Les formulaires Exemple de formulaire dans une page HTML <HTML> <HEAD> <TITLE>TITRE DE LA PAGE</TITLE> </HEAD> <BODY> <FORM name= mon formulaire action= /maservlet method= get > </FORM> </BODY> </HTML> Nom : <input type="text" name="nom /> <br> Prénom: <input type="text" name="prenom value= prenom ici /> <br> Age: <input type="text" name="age /> <br> < input TYPE = submit value= Ok />> < input TYPE = reset /> Définition de contrôle avec input. Input ne comprend pas de corps Bouton de validation (submit) Ressource à laquelle les informations du formulaire vont être transmises via HTTP Valeur par défaut d un champ. 6 Chaque contrôle doit être défini au sein d un formulaire. Il doit porter un nom (sauf submit ou reset) afin de pouvoir être récupérer coté Serveur.
ISI 1022 : HTML <form> : <INPUT> Contrôles pouvant être définis avec <INPUT> : text : entrée de texte sur une seule ligne. <input type= text name= nom /> password : identique que text mais avec les caractères masqués. <input type= password name= pass /> checkbox : case à cocher. Envoie value si coché. <input type= checkbox name= majeur value= maj /> radio : groupe de cases à cocher s excluant mutuellement ; ils se réunissent par leurs nom. <input type= radio name= genre value= M /> <input type= radio name= genre value= F /> reset : bouton rétablissant tous les contrôles dans leurs valeur initiale <input type= reset value= ok /> 7
ISI 1022 : HTML <form> : <INPUT> Contrôles pouvant être définis avec <INPUT> : file : Permet de pouvoir up loader des fichier sur le serveur. <input type="file" name="filename" /> image: bouton graphique de soumission (envoie les coordonnées x,y au serveur) hidden: Bouton non visible, mais la valeur est soumise avec le formulaire. <input type= hidden name= id value= E9339984 /> button : boutton permettant de pouvoir lancer des scripts coté client par le navigateur. <input type= button onclick= action() /> submit : bouton soumettant un formulaire. <input type= submit value= ok /> 8
ISI 1022 : HTML <form> : <SELECT> et <TEXTAREA> Deux balises viennent s ajouter à <INPUT> pour la création de formulaire : SELECT : liste de sélection à choix simple ou multiple <SELECT name=nom size=nbelm multiple> <option>elm1</option> <option value=val>elm3</option> <option selected>elm3</option> </SELECT> TEXTAREA : texte sur plusieurs lignes <TEXTAREA name=nom rows=numrows cols=numcols > LIGNE 1 PAR DEFAUT LIGNE 2 PAR DEFAUT </TEXTAREA> 9 SELECT : size : si cette option est présente, la sélection comprendra plusieurs choix visibles simultanément. multiple : autorise la sélection multiple selected : l option est sélectionnée par défaut value : si cette option est présente et sélectionnée, la valeur est envoyée sous forme de paramètres. TEXTAREA : rows et cols représentent le nombre de lignes visibles et le nombre de colonnes en largeur.
ISI 1022 : HTML <form> : action et method Un formulaire est aussi défini par les attributs action et method : action : URL (Ressource) à laquelle vont être soumises les informations du formulaire. method : méthode HTTP à utiliser (get ou post) get : Les données du formulaire sont ajoutées à l URL séparées par des ;. On utilise get quand on souhaite par exemple qu un utilisateur puisse répéter une action : Si on veux pouvoir sauvegarder des signets ou liens pas d information sur les sessions post :les données du formulaire sont soumises dans le corps de la requête. On utilise post quand une action doit être effectuée qu une seule fois par session ou pour l envoi d un volume important de données. La base de donnée est mise à jour Mots de passes 10
ISI 1022 : CSS : Feuilles de styles Les feuilles de style permettent de factoriser le code portant sur les propriétés des éléments décrivant une page HTML (Allure, couleur,dimension, ) Le CSS (langage feuille de style) peut résider entre les balises <STYLE></STYLE> dans un fichier HTML ou dans un fichier séparé. Le paramètre style peut être aussi utilisé dans n importe quelle balise HTML. 11
ISI 1022 : JAVASCRIPT : dynamiser une page HTML JavaScript permet d amener de la souplesse (dynamisme) aux pages HTML : Souvent utilisé pour la gestion d évènements <input type= submit onclick= preenvoi(); /> Peut aussi servir à effectuer des tests mineurs coté clients pour ne pas charger inutilement un Serveur. Tout de façon pour des raisons de sécurité, il est aussi préférable de réitérer les test client coté Serveur*. JavaScript n est pas une norme du Web ; selon les navigateur, on peut avoir des divergences. Le code JavaScript est écrit entre les balises <script language= javascript ></script> ou dans un fichier séparé. 12 *On ne peux pas être sur que le navigateur Web va effectuer les tests demandé!. Un navigateur Web peut être un pirate, un robot,
ISI 1022 : Autre technologies existantes Flash : Permet de créer des animations et des présentation de haute qualité avec gestion d évènements. Est en train de se développer considérablement. Visual Basic : Technologie similaire à JavaScript mais avec de grosse lacune coté sécurité (ActiveX). JavaScript est préféré Applets : Application Java sécurisée s exécutant avec une JVM étant une extension du navigateur Web. X-Markup Language : Est considéré à la base comme une extension du HTML. On peut maintenant créer des nouvelles balises! On va retrouver l information sémantique dans un fichier [*.xml], en respectant une syntaxe d écriture définie dans un fichier [*.dtd]. L allure dont est représenté l objet est définie dans un fichier [*.xsl] 13 Nous étudierons plus en détail les technologies XML dans les prochains cours. XML est maintenant utilisé comme un support standard de données dans des fichiers lisibles. On va le retrouver dans la majorité des fichiers de configurations des applications récentes (web.xml de Jakarta Tomcat,...)
ISI 1022 : Développement Partie Cliente Liens utiles http://www.w3.org/tr/html4/ http://www.allhtml.com/ http://www.toutjavascript.com/ http://www.macromedia.com/ http://javascript.internet.com/ http://www.webteacher.com/javascript/ http://www.flashxpress.net/ (HTML) (HTML, ) (JavaScript/HTML) (Flash) (JavaScript) (JavaScript) (Flash) 14