Embed Size (px)
Citation preview
1
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Architecture et Développement Web
� Les principes du Web Dynamique� Les outils et techniques de développement
2
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Introduction
� Présentation du formateur� L'objectifs de la formation
� Les bases du développement Web� Le principe pour faire du Web dynamique� Utilisation d'une base de données SQL� Initiation au Modèle-Vue-Contrôleur
� Les questions sont bienvenues� N’hésitez pas à me contacter [email protected]
3
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Les grandes lignes de la formation
� Acquérir les bases du Web dynamique� Apprendre la programmation Web� Construire une application Web� Adapter une base de données SQL au Web� S'habituer au Model-Vue-Contrôleur� Faire marcher tous les éléments ensembles
techniques ensemble pour créer un site Internet
4
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Invitations
� La formation vous invite fortement à être des utilisateurs curieux et dynamiques des outils d'Internet
� La conception de sites Web s'inspire très largement de l'existant qu'il faut donc consulter
� L’examen final par réalisation d’une application web dans un temps donnée
5
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Des outils simples souvent gratuit
� Un éditeur de texte: Bloc-notes de Windows, Ultra-edit32, Notepad++, Dreamweaver, Eclipse Pdt, Eclipse J2EE
� Un navigateur Internet : Internet Explorer, Mozilla Firefox, Opera, Safari, Chrome, Chromium
� Un serveur Web: Apache, Ms-IIS, Tomcat, nginx� Un outil de base de données: Mysql, Oracle,
PostgreSql, Ms SQL Server� Un langage de développement orienté Web: Php,
Asp.Net, Java J2EE, Perl, Python, Ruby on Rail
6
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La sauvegarde des données:
� Attention l'utilisation des ordinateurs en réseau obligent à une sauvegarde spécifiques des données,
� A votre charge:� Les bases de données� Les fichiers des pages dynamiques� Les fichiers de configurations spécifiques
7
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Pour du développement Java
� Vérifier systématiquement que vous utilisez Eclipse pour Java EE et Tomcat que nous allons installer ensemble� Eclipse IDE Java EE Developers� Apache Tomcat 7.x
� Vérifier que vous utilisez le JDK et non le JRE de la machine virtuelle java
8
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Conseils
� Faites des sauvegardes multiples sur le disque� N'hésitez pas à demander un
rafraîchissement/actualisation des pages Web dans votre navigateur en appuyant sur le bouton correspondant (ou la touche F5)
� Afficher le code source de la page HTML par clic droit sur la page "Afficher le source"
� Désactiver le cache du navigateur� Outils intégrés des navigateurs / firebug
9
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Base de l'architecture et vocabulaire
� Chapitre 1: � TCP/IP et DNS� Outils Web� Une communication asynchrone� HTML: Hyper Text Markup Language� Structure d'une page HTML� Tag HTML: exemples� HTML: attributs et imbrications� De l'URL à l'Information� Les adresses des documents� De l'URL à l'Information
10
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
TCP/IP et DNS
� Transmissions d'informations par paquets� Chaque paquet à l'adresse expéditeur et
destinataire� Database Name Server (fichier host)� Synchronisation des DNS mondiaux
11
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Outils WEB
� Publication de documents: Serveur Web,Navigateur� Transmission de données par FTP, SFTP� Des outils historiques: Mail, News, ICQ� De nouveaux outils: P2P, VoIP, Certificat,
Streaming, Dropbox-like� L'hébergement, FAI, Registrar, DNS, Serveur dédié
12
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Une communication asynchrone
GET /index.html HTTP/1.1 Host: www.example.com Accept: text/plainAccept-Charset: iso-8859-5Accept-Encoding: compress, gzipAccept-Language: frDate: Tue, 14 Jan 2008 08:12:31 GMTUser-Agent: Mozilla/5.0 (Linux; X11; UTF-8)
HTTP/1.1 200 OKDate: Mon, 14 January 2008 08:13:34 GMTServer: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 09 Jan 2008 13:11:55 GMTAccept-Ranges: bytesContent-Length: 438Connection: closeContent-Type: text/html; charset=UTF-8
13
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Le Web=échange d'informations
http://www.test.com/fr/index.htmlDomaine: .com
Sous domaine: testServeur: www
Racine du site: /Dossier: fr/
Fichier: index.html
� Requête URL: Unified Ressource Locator
<html><head><title>Site test.com</title></head><body>Bonjour</body></html>
Cache du navigateur
14
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
HTML: Hyper Text Markup Language
� Langage de présentation de l'information� Normé par le W3C: xhtml 2.0 et html 5� Les Tags s'imbriquent comme des parenthèses dans
un calcul<body><h1>bonjour</h1></body>
� Tag solitaire dans certain cas: <br />� Validation du code html sur les différents navigateurs
du marché: <br> <br/> <br />
Cache du navigateur Interprétation
15
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Structure d'une page HTML
� Exemple : <html><head></head><body></body></html>
� Pour indiquer un commentaire que le navigateur ne va pas interpréter:
<!-- votre commentaire -->� Tout ce qui n'est pas tag ou commentaire entre les
tags <body> et </body> est donc affiché comme étant du texte.
� Les retour à la ligne et les espaces multiples ne sont pas pris en compte par le navigateur. Il faut en profiter pour éclaircir le code HTML.
16
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Tag HTML: exemples
� Dans le <head><title>Le titre de la page </title><meta tag name="keywords"
content="mot1,mot2,mot3"><meta name="description" content="autres
informations récupérées sur Internet.">� Dans le <body>
<h1>Titre1</h1><h2>Titre2</h2><p> un paragraphe </p><div>Regroupement d’information</div><ul><li>Matin</li><li>Soir</li></ul>
17
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
HTML: attributs et imbrications
� Attributs de tag<p align="right">Paragraphe</p><img src="image.gif" alt="Image"><a href="in.html" >ici</a><a name="bas_de_page">
� Imbrications des tags<p>Pour voir l’image en grand cliquez dessus <a
href="image-grand.jpg"><img src=" image-petite.jpg" /></a></p>
18
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Les adresses des documents
� Côté serveur un seul document (page Web, fichier image, document Word, etc) est identifiable par son URL
� L'identification est absolue tout comme pour un fichier sur un disque dur� http://www.ema.fr/logo.gif� http://localhost/documents/cv/cv-fr.pdf� http://www.ema.fr/� http://www.ema.fr/index.html
� L'identification peut être relative à la page actuellement affichée dans le navigateur
<a href="acceuil.html"><img src="../logos/fr/ema.gif">
19
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
De l'URL à l'Information
� URL absolue http://www.test.fr/documents/cv/cv-fr.pdf
� L'identification peut être relative à la page actuellement affichée dans le navigateur
<a href="acceuil.html"><img src="../logos/fr/ema.gif">
Ordinateur D:\web\ wwwsite1\ rep1\srep12\ page4.htmlURI file://d:/web/wwwsite1/rep1/srep12/page4.html
URL http://www.test.fr/rep1/srep12/page4.htmlServeur Web Sites wwwsite1/ rep1/srep12/ page4.html
20
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Web dynamique
� Chapitre 2: � Du Web statique au Dynamique� Exemple avec la date du jour� But d'une requête de formulaire� Les différents types de requêtes� La méthodes GET de requête� La méthodes POST de requêtes� Formulaire GET et POST� Récupération du formulaire côté serveur� Scénario d’échange de données� La session utilisateur� Les information de la session utilisateur
21
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Du Web statique au Dynamique
� Le concept de page HTML virtuellement construite à la demande :� Je fabrique une page HTML où l'heure et la date
sont insérées pour présenté une page HTML différente toutes les secondes
� La SNCF ne peux préparer à l'avance tous les trajets possibles entre 2 destinations via une troisième ou indiqué des retards sans Web dynamique
22
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Etape 2: exécution par le module php du code php
Etape 3: Génération de la page html en mémoire
Exemple avec la date du jour 1/3
Etape 1: Accès à la page index.php stockée sur le
serveur webLe navigateur de
l’internaute demande l’URL suivante
http://localhost/index.php
Le navigateur de l’internaute
affiche l’HTML
23
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Exemple avec la date du jour 2/3
Page index.jspSur le serveur web
Page Web consulté depuis le navigateur de l’internaute
via http://localhost/Jsp/index.jsp
Code source de la page générée
24
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Exemple avec la date du jour 3/3
Page index.phpSur le serveur web
Page Web consulté depuis le navigateur de l’internaute
via http://localhost/index.php
Code source de la page générée
25
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
But d'une requête de formulaire
� L’interaction entre l’internaute et le serveur web ne peut se limiter à des demandes de pages via des URL
� Une requête de formulaire permet de demander à l'utilisateur via son navigateur de remplir des informations par des champs de saisies: champs texte, cases à cocher, liste déroutante, etc.
� A la fin, l'utilisateur soumet son formulaire (envoie toutes les données saisies) au serveur web via une page/programme
� Le serveur n’a connaissance des données la page qu’au moment de sa soumission
26
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Les différents types de requêtes
� 2 familles de requêtes Web du client vers le serveurs�La requête classique de demande de page
Web ou d'image �http://localhost/login.html�http://www.ema.fr/logo.gif
<a href="index.html"><img src="logo.gif">
�La requête de formulaire où le client envoie des données pertinentes à un programme du serveur web
27
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La méthodes GET de requête
� La méthode classique est le GET:�L'intégralité des données sont indiquées
dans l'URL de la nouvelle page/programme qui va traiter les données
login.php?nom=jean&prenom=pierree
�Toutes les informations sont visibles dans l'URL: débogage, visibilité, bookmark
�Méthode classique pour les liens et les images
28
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La méthodes POST de requêtes
� La méthode POST:�Les données sont envoyés dans l'entête du
fichier POST�Adapté aux grosses quantités de données
par exemple l'expédition de fichier�Meilleur rendu visuel en production
� Les 2 méthodes étant rapidement interchangeable, le mieux est de faire du GET puis de passer en POST pour la production
29
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Formulaire GET et POST 1/3
http://localhost/test.php?Nom=Jean&Civ=Mr&go=go
<form action="test.php" method="get" >Votre Nom:<input type="text" name="Nom">Mr:<input type="radio" name= "Civ" value="Mr">Mme:<input type="radio" name= "Civ" value="Mme"><input type="submit" name="go" value="go"></form>
30
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Formulaire GET et POST 2/3
<form name="login" method="get" action="login.php"><input type="text" name="nom" value="Entrez
votre nom"><input type="hidden" name="idsession"
value="367821"><input type="radio" name="Civ" value="M"> <input
type="radio" name="Civ" value="Mme" checked><input type="submit" name="Action" value="login">
</form>
31
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Formulaire GET et POST 3/3
<form method="get" action="test.php"><input type="checkbox" name="anglais"
value="lu"><input type="checkbox" name="anglais" value="parlé">
<select name="Langues" multiple><option value="US">Anglais</option><option value="ES">Espagnol</option><option value="All">Allemand</option>
</select><textarea Name="Info"></textarea><input type="submit" name="Action"
value="Envoyer"></form>
32
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Récupération du formulaire côté serveur
test.php
$_REQUEST["Nom"]$_REQUEST["Civ"]$_REQUEST["Valider"]
http://localhost/test.php?Nom=Jean&Civ=Mr&Valider=o k
33
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Récupération du formulaire côté serveur
test.jsp
request.getParameter("Civ")request.getParameter("Nom")request.getParameter("Valider")
http://localhost/test.php?Nom=Jean&Civ=Mr&valider=o k
34
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
INTE
RN
ET
Scénario d’échange de données
Http Get PostTraitement des variables et des
données(x)HTML
Durée de vie du programme
Traitement des variables et des
données
Traitement des variables et des
données
35
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La session utilisateur
� Le but d’une session est d’identifier un internaute et de le différencier des autres internautes
� La différenciation peut se faire par:Un cookie de session, crypté ou nonUn champ caché ou non de session dont
l’information est crypté ou nonUne authentification par le navigateur
� Attention à la durée de vie de la session, au time-out de la session
� Tentative d’utilisation d’une session mal fermée, rejouer une session et processus de double authentification
� <img src="page.php?action=disable&article=45">
36
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Les information de la session utilisateur
Variables globales ou d’application
Variables de sessions
Variables de sessions
Variables de sessions
Variable de sessions en JSP:session.setAttribute(variable,valeur);session.getAttribute( variable);
Variable d’applications en JSP:getServletContext().setAttribute(var, val);getServletContext().getAttribute(var);
Variable de sessions en PHP:session_start();$_SESSION[var] = val;
Variable d’applications en PHP:define( 'PI' , 3.14159265 );
37
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Technologies Web
� Chapitre 3: � Architecture de l’application web� Architecture 3 tiers� Accès à la couche de persistance� Css: Cascading Style Sheet� Framework Bootstrap� Javascript� DOM: Document Object Model� Web 2.0� Ajax� AngularJS
38
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
INTE
RN
ET
Architecture de l’application web
Http Get PostODBC JDBC SQL
Variables/Objets(x)HTML
Durée de vie du programme
Durée de vie de la requête SQL
Durée de la réponse de la requête Web
LOC
AL o
u IN
TRAN
ET
39
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Architecture 3 tiers
Architecture de base d'une application Web
� Couche présentation de l'information, les vues utilisateurs:
xHTML, Javascript, Flash, ActiveX, PDF, Applet Java, Xml, CSS, svg, etc.
� Couche métier, applicative, système d’information: ASP.NET, PHP, Java, CGI, Perl, Ruby, C#,
Python, etc.
� Couche de persistance, base de donnéesMysql, Oracle, MS-SQL, Postgresql, Firebug, etc.
40
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
<?php$connect= mysql_connect("localhost", "userDB","passwordDB");mysql_select_db(“Systeme_information");if (! $connect ) die("Erreur de connection");
$resultat=mysql_query(“select * from client");mysql_close($connect);?>
Accès à la couche de persistance
INTE
RN
ET
41
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
CSS: Cascading Style Sheet 1/3
� Évolution du langage HTML pour simplifier et améliorer le design de site Web� Plutôt que de mettre tous les titres de la page en
gras, italique, alignés à gauche� Définir un style commun:
h1.titre1{font-weight: bold; font-style:italic; text-align:left; }<h1 class="titre1">
� Évolution du langage HTML pour simplifier et améliorer le design de site Web
� Identifier un tag par son nom de tag, son id unique dans la page ou par une classe
� Identifier un tag par des notions d’ordre, ensembliste ou de contrainte
42
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
CSS: Cascading Style Sheet 2/3
� Fichier de style commun à un site Web et donc à plusieurs pages
<style type="text/css"> @import url(/styles/habillage.css); </style>
� Extraire la présentation du contenue pour permettre d’accélérer les temps de chargement et de complexifier les présentation
� Css Zen garden: 1 fichier HTML pour plusieurs fichiers css
43
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
CSS: Cascading Style Sheet 3/3
<html><head><style type="text/css">
h1{font-size : 2em; margin : 0.67em 0;}.attention{ color:red; }#intro{ font-style: italic; }h3.attention{ color: black; }
</style> <body><h1>Titre du site web</h1><p class="attention">Ce site est en construction</p><p id="intro" class="attention"> L’introduction…</p><h3 class="attention">le 6 janvier 2008</h3></body></html>
44
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Framework Bootstrap
� Grille de présentation de 12 colonnes
<div class="form-group"><div class="col-sm-offset-2 col-sm-
10"><div class="checkbox"><label><input name=“remenberMe"
type="checkbox">Remember me
</label></div>
</div></div>
45
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Javascript 1/2
� Un langage embarqué dans la page HTML� Permet la manipulation et le contrôle des données
dans le navigateur� Bibliothèque AngularJS, Jquery, Prototype, etc.
http/Ajax
Get PostMVC Javascript
MVC Server Side
46
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Javascript 2/2
� Version de Javascript selon les navigateurs � Une langage de référence
� débuggeur,� programmation par prototypage,� bibliothèques multi navigateur
� De plus en plus universel� Fonction anonyme en paramètre� $ = rechercher dans le DOM
47
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
DOM: Document Object Model
� Décomposition d’un document xhtml en zone et en éléments
<html><body><div id="zoneTitre">Le titre</div><div id="zoneCentre">
<div id="zoneMenu">Le menu</div></div>
$('div#nom').html( '<p>nouveau titre</p>' );
� Utilisation de div et de span en conjonction du CSS pour l’affichage
div#nom{float:left;width: 150px; }
48
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
le Web 2.0
� Le Web 2.0 a pour but de simplifier les interfaces utilisateurs avec des fonctions notamment javascript avancées et le DOM en évitant l’effet rechargement de la page
� L’utilisation appropriée des URL (Url rewriting)� Les nuages de tags, cheminement
49
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Ajax 1/2
� Asynchronous Javascript et Xml
Etape1: afficher la page html originelle
Etape 4: javascript modifie le Dom selon le fichier Xml
50
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Ajax 2/2
$.ajax({url:"http://www.truc.com/getHorloge.php",success: function( result ){
$("#horloge").html( result.find("now").innerText );}
});
XML
ou JSON
51
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
AngularJS
� Partie Vueng-appng-controllerng-repeatng-model{{ }}
� Partie Contrôleur
� Partie Model
52
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Développement Web
� Chapitre 4: � Les technologies Java� L’approche par Jsp� L’approche par Servlet� Rappel sur la base de données� Automate à état� Le Design Pattern MVC� La couche contrôleur� La couche modèle� La couche vue� La machine à états doit est lisible� Chaine de production d’application web
53
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Les technologies Java 1/2
� Eclipse� Outil de développement ou IDE pour Java ou
d’autres langages� Logiciel opensource complet pouvant comporter
des extensions et des modules� Tomcat
� Serveur Web prévu pour développer en Java� Permet d’exécuter des applications Web écrite en
HTML, JSP, Servlet
54
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Les technologies Java 2/2
� Jsp� Document HTML comportant des parties de code
java ou tags spécifiques� Une Jsp est transformé en Servlet par Tomcat
� Servlet� Servlet s’exécute sur le serveur Web Tomcat et
restitue une page HTML/CSS/Javascript � Applet
� Application qui s’exécute dans le navigateur de l’utilisateur
55
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
L’approche par Jsp
<html><head><title>ma première jsp</title></head><body><h1>Bonjour <%=request.getParameter("nom")%>
</h1></html>
56
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
L’approche par Servlet
import java.io.*;import javax.servlet.*;import javax.servlet.http.*;
public class HelloWorldExample extends HttpServlet {public void doGet(HttpServletRequest request,
HttpServletResponse response)throws IOException, ServletException{
response.setContentType("text/html");PrintWriter out = response.getWriter();out.println("<html><head>");out.println("<title>première servlet</title></head>");out.println("<body><h1>bonjour");out.println( request.getParameter("nom"));out.println("</h1></body>");out.println("</html>");
}}
57
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Rappel sur la base de données 1/2
� Un Système de Gestion de Base de Données (SGBD) permet le stockage de grosses quantités d'informations structurées
� Extraction d'informations à partir de tables où sont structurées et stockées les données
� Interrogation en SQL (Search and Querying Language) "proche" du langage naturel
� Une table contient des données typées et structurées en colonnes (les champs) et en lignes (les enregistrements)
� Un ensemble de tables sont regroupées dans un "schéma" de base de données
58
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Rappel sur la base de données 2/2
INSERT INTO Conducteur (Numero de Permis,Nom du Conducteur) VALUE('12RT1','Jean');
UPDATE Conducteur SET 'Nom Du Conducteur'='Jean P.' WHERE "Nom Du Conducteur" = "Jean" AND "Numero de Permis"="12RT1";
SELECT 'Nom du Conducteur' FROM 'Conducteur' WHERE "Nom Du Conducteur" = "Jean" AND "Numero de Permis"="12RT1";
DELETE 'Conducteur' WHERE "Nom Du Conducteur" = "Jean" AND "Numero de Permis"="12RT1";
59
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Automates à état
vue=PageLogin.jsp
action=DemandeLogin
PageLogin.jsp
vueAfficher=PageLogin.jsp
1/Servlet extrait
les données
2/Invalidation
par la couche
métier
3/Appel de la
JSP
PageLogin.jsp
Quel est l’automate à Etat correspondant ?
60
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Le Design Pattern MVC
� Un site dynamique doit respecter le paradigme Modèle-Vue-Controleur
� Une forme d’extension de l'architecture 3 tiers (architecture physique)
� Une architecture logique provenant d'une réflexion aboutie dans l'ingénierie logicielle
� Pour faire simple, la division du programmes en morceaux chacun spécialisé dans un objectif
61
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La couche contrôleur
� Contrôle des échanges entre la couche Modèle et la couche Vue
� Représentation sous formes de graphes d'états finis� Validation des échanges et des transitions d’un état
vers un nouvel état� Mis à mal par les évènements Ajax qui arrivent de
manière asynchrone
62
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La couche modèle
� Appelé aussi partie Métier car en relation directe avec le métier des utilisateurs de l'application ( banque, assurance )
� Notion par exemple d'objet Compte Banquaire, Sinitres, etc
� Dans nos exemples inclus la base de données� Peut s'étendre à des applications spécifiques sur de
très gros systèmes� Une représentation UML par diagramme de classe
sert pour la conception de la partie modèle� Une application classique sans aucun interface mais
avec des tests unitaires est souvent conçue pour cette couche
63
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La couche vue
� Partie graphique et intelligence graphique� Présentation de l'informations et interactions avec
l'utilisateur de l'application� Contrôle de validité des informations rentrées� Messages d'erreurs� Adaptable facilement en fonction des terminaux� La partie doit être pensée pour l’internationalisation
des interfaces
64
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
La machine à états doit être lisible
String action = request.getParameter("action");
if ("ajouterTodo".equals(action)) {String texte = request.getParameter("todo_texte");Application.getInstance().addTodo(texte, false);
vueAfficher = "liste_todos.jsp";}
if ("effacerTodo".equals(action)) {String idTodo = request.getParameter("todo_id");Application.getInstance().deleteTodo( idTodo );
vueAfficher = "liste_todos.jsp";}
return vueAfficher;
65
Arc
hite
ctur
e et
Dév
elop
pem
ent
WE
B-
Pie
rre.
jean
@ e
ma.
fr
Chaine de production d’application web
� Phase d’analyse de la couche métier en UML � Génération du code avec annotation de la couche
de persistance� Génération de la base de données à partir des
annotation� Création des tests unitaires avant production du
code spécifiques� Création du diagramme d’état pour l’enchainement
des pages� Maquette de la charte graphique du site en Css� Génération des interfaces graphiques simplifiés
