2265U10 – Développement Application Web M. Dominique

1
2265U10 – Développement Application Web
M. Dominique GALLAND
2007-01-25
Application « Web »
Ce sont les applications dont on a accès par le Web. Du côté client, on fait appel à un
navigateur qui affiche les pages HTML, sur lequel on peut faire des saisies sous forme HTML
(champs, boutons => soumission). Du côté fournisseur, il y a un serveur Web statique (Web
documentaire) ou dynamique (avec des composants applicatifs)
Client léger
 Zéro installation sur le poste client => zéro traitement du côté client
Modèle transactionnel
Le modèle interactif plus exigeant sur les transactions réseau et les charges du serveur, par
conséquent, limite la montée des charges applicatives.
Le modèle interactif est plus riche sur le terme de réactivité et d’interface.
Le modèle transactionnel permet de grosses montées des charges applicatives.
Il y a une tendance de faire des traitements du côté client pour combiner les avantages des
deux modèles (plus interactif + plus de montées de charges applicatives).
Ainsi la génération d’utilisation de Javascript.
Les cas particuliers de vrais traitements du côté client :
 Applet
C’est un composant (paragramme) qui s’exécute du côté navigateur.
 Active X :
Universalité
Il est universellement disponible sur l’Internet (sous réserve d’avoir droit d’accès)
Différence : Applications Internet & Intranet
Serveur de traitement
Navigateur
Serveur Web
Protocole HTTP
Contenu de la
forme
HTTP
dynamique
Composant
applicatif
réseau
Document
HTML
Web statique
ou
documentaire
BD
Web applicatif

2
Ils sont les mêmes choses, mais les différences se trouvent au niveau applicatif (cf. notion de
couches). Pour avoir accès à l’Intranet, il faut passer par une identification spécifique (alors
que l’Internet est accessible de façon universelle)
Différence : modèle centralisé & modèle à 3 niveaux
Modèle centralisé : pas de traitement au niveau client et tout traitement se fait sur le serveur.
Modèle à 3 niveaux : l’apparition des traitements au niveau client.
Conception coté serveur
Modularité ou non ?
 Séparation des métiers et travailler en équipe
 Réutilisation des certaines modules des applications dans d’autres applications
interopérationnelles
 Maintenance plus facile
Plus compréhensible et maintenable
 Modularité permet la répartition
Rq : on peut faire fonctionner certaines modules sur des machines différentes. La
répartition des traitements peut augmenter la performance.
 Affichage génération du HTML
 Logique de dialogue
Recevoir, valider la requête
Navigation de l’utilisateur dans l’application
 Logique « métier »
C’est le traitement applicatif proprement dit en liaison avec la base de données.
Il est indépendant d’aspect « web » (càd aucun aspect « web »)
Génération du HTML : modèle MVC pour une application Web
MVC : Model View Controler
Rq : on combine 3 aspects :
 Model
 Logique metier
 Independent des aspects Web
 Éventuellement, legacy (légataire)
 Controleur
 Logique de dialogue avec
l’utilisateur
 Vue
 Présente le contenu prepare par le controler
 Générer le HTML (ou PDF, ou d’autres)
Rq : sans changer le contenu, on peut le générer sous plusieurs formes de présentation.
Répartition ?
Controler
Model
View
BD
Utilisateur
agit
voir
Prépare le
contenu
requête
réponse

3
Web services
C’est au véritable 3 niveaux sur support « web » (càd il y a une sous-traitance de traitement)
Web service :
 Appel de traitement distant sur support WEB
 Requête et réponse données brutes hors présentation codées en XML (un langage de balise
qui écrit un contenu structuré)
Ex :
<actions>
<ibm> 36 </ibm>
</actions>
Schéma (ou DTD)
C’est le document qui décrit ce que doit être le contenu échangé (ex : document XML). Cela
permet de vérifier si le format ou le contenu correspond bien à certains normes.
Dans les sites Web, HTML ne sépare pas le contenu de la présentation.
Exemple des notes
<note>
<emetteur> galland </emetteur>
<titre> Examen </titre>
<contenu> Il aura lieu … </contenu>
</note>
Schéma pure réaliste :
Eléments du langage HTML
4.1/ La page HTML et les éléments statiques
Navigateur
Serveur Web
HTML
Composant
applicatif
réseau
Portail
Serveur Web
Serveur Web
réseau
XML
XML
Serveur de traitement
Application
Serveur Web
Requête de traitement
Réponse
Web service
réseau
BD
Poste client
Serveur de traitement
Composant
applicatif
ou
Modèle transactionnel
Serveur de traitement
Composant
controler + view
Serveur de traitement
Composant
métier
BD

4
C’est un langage de balise, orienté présentation.
Différence : HTML & XHTML
 XHTML : c’est HTML écrit en conformité avec des règles bien formalisées telles que :
 quoter les attributs
Ex : color = « red » (au lieu de color = red)
 fermer les balises
 soit par une balise fermante
Rq : <br/> = <br> + </br> => « à la ligne »
 soit dans la balise ouvrante (auto-fermant)
Ex : <input … /> (au lieu de <input …>)
Liens hypertexte
Table
4.2/ Eléments de saisie
L’élément de saisie doit se trouver dans une action « form ».
Ex :
<form action = « … »>
…
</form>
Composants de saisie
3 types de composants disponibles :
 <input> : champ texte ou bouton
l’attribut type peut définir les composants suivants :
 text : champ texte mono-ligne
 password : champ texte non affiché
 checkbox : champ à cocher
 radio : bouton « radio », les radios de même name forment un groupe à choix unique
 submit : bouton qui déclenche l’envoi de la forme
 reset :bouton qui réinitialise les valeurs des champs
 hidden : champ caché
le couple (name, value) est le paramètre de la requête. Transmis à l’application
 <select> : liste à choix multiple
 <textarea> : champ texte multi-ligne
4.3/ Javascript
Ex :
<form action = “validation.jsp”>
<input type = “submit” value = “valider”>
<input type = “submit” onsubmit = “this.form.action =“menu.jsp”
</form>
Auto-submit

5
<form action = “validation.jsp”>
onchange =“submit”
</form>
4.4/ Feuilles de style CSS
4.5/ Mise en page
On n’utilise plus de « frame ».
2 méthodes :
 méthode usuelle avec « table »
 méthode moderne avec « div »
2007-02-01
Rappel :
Application Web
 Modèle de répartition
 Web Services
Caractéristique : traitement applicatif sous-traité
 HTML
 A la base :
 un langage d’élément textuel et images
 formes de saisie et leurs composants
 Plus élaboré :
 Javascript  ou +
 CSS
 Mise en page sophistiquée, etc.
 Panorama de quelques solutions pour le développement WEB
Exécution :
 Au sein du serveur WEB généralement par le biais de librairie dynamiques
d’extension au serveur WEB
 A l’extérieur du serveur WEB, le serveur WEB transmet la requête au composant qui
s’exécute dans le serveur de traitement WEB
Ex :
 le processus APACHE exécute en son sein le PHP grâce à l’extension « modphp »
 IIS exécute en son sein les pages ASP
« thread » : la concurrence interne des ? => multithread pour le bon
fonctionnement su serveur
 CGI (Common Gateway Interface)
Serveur de traitement
Serveur Web
Composants Web
BD