DÉVELOPPEMENT WEB ET DESIGN PATTERN

PIERRE JEAN INGÉNIEUR DE RECHERCHE

LGI2P – TIC & SANTÉ – EUROMOV

pierre.jean@mines-ales.fr http://pierrejean.wp.imt.fr/

1. PRINCIPES

2. WEB

3. MVC WEB J2EE

SOMMAIRE

CHAPITRE 0 : LA FORMATION 4

L’objectif est la base du développement web MVC J2EE

2 cours + 6 TPs sur ordinateur

Projet individuel en temps limité

A voir : ► Serveur Web et URL ► HTML / CSS / JSON ► Servlet et debugger sur Tomcat ► JSP et MVC ► Test unitaires et Loggeur ► Javascript ► Couche de persistance

CHAPITRE 1 : PRINCIPES 5 Réseau TCP-IP et Adresses IP

Réseau adresses IP ipconfig /all

Boucle locale 127.0.0.1 localhost

CHAPITRE 1 : PRINCIPES 6 DNS et résolution de noms

Top level DNS

nslookup

Zone DNS

CHAPITRE 1 : PRINCIPES 7 Communication asynchrone

http://www.example.com/index.html

Outils de développements du navigateur

CHAPITRE 1 : PRINCIPES 8 URL = Uniform Ressource Locator et DocumentRoot

Ordinateur D:\wamp\ www\ rep1\srep12\ page4.html URI file://d:/web/www/rep1/srep12/page4.html

URL http://www.test.fr/rep1/srep12/page4.html Serveur Web Sites www/ rep1/srep12/ page4.html

CHAPITRE 1 : PRINCIPES 9 HTML / CSS / Image

CHAPITRE 1 : PRINCIPES 10 Architecture 3-tiers

Http Get Post SQL

Variables/Objets html

Ajax

json

CHAPITRE 2 : WEB DYNAMIQUE 11

Fabrique du HTML + Css + javascript ► Fabriquer depuis un serveur Web ► A partir d’un langage de

programmation ► Généré à la demande ► HTML / CSS + Javascript inline ► CSS / SASS ► Javascript / Framework JS

CHAPITRE 1 : PRINCIPES 12 HTML5

► https://validator.w3.org/ ► ► Code source + inspecteur DOM ► Tags imbriqués

CHAPITRE 2 : WEB DYNAMIQUE 13

Http Get Post Programmes

Variables/Objets html

Ajax

json

CHAPITRE 2 : WEB DYNAMIQUE 14 Génération du HTML depuis un programme et un serveur Web

exécution par le Serveur Web

Le navigateur de l’internaute demande

l’URL suivante http://localhost/index.php

CHAPITRE 2 : WEB DYNAMIQUE 15 Génération du HTML depuis un code Java/JSP

CHAPITRE 2 : WEB DYNAMIQUE 16 Formulaire GET/POST

http://localhost/test.php?Nom=Jean&Civ=Mr&go=go

Votre Nom: Mr: Mme:

CHAPITRE 2 : WEB DYNAMIQUE 17 Formulaire GET/POST

CHAPITRE 2 : WEB DYNAMIQUE 18 Récupération des valeurs côté serveur en PHP

test.php

$_REQUEST["Nom"] $_REQUEST["Civ"] $_REQUEST["Valider"]

http://localhost/test.php?Nom=Jean&Civ=Mr&Valider=ok

CHAPITRE 2 : WEB DYNAMIQUE 19 Récupération des valeurs côté serveur en Java

http://localhost/test.php?Nom=Jean&Civ=Mr&Valider=ok

request.getParameter("Civ") request.getParameter("Nom") request.getParameter("Valider")

CHAPITRE 2 : WEB DYNAMIQUE 20 Session utilisateur

CHAPITRE 2 : WEB DYNAMIQUE 21 Différence Servlet / JSP

ma première jsp Bonjour

CHAPITRE 2 : WEB DYNAMIQUE 22 Différence Servlet / JSP

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(""); out.println("première servlet"); out.println("bonjour"); out.println( request.getParameter("nom")); out.println(""); out.println(""); } }

CHAPITRE 2 : WEB DYNAMIQUE 23 Architecture du projet

► Servlet Contrôleur ► Data Access Object ► Classes Métier ► Dossiers css / img ► Jars spécifique au projet ► Pages JSPs

CHAPITRE 2 : WEB DYNAMIQUE 24 Architecture du projet

CHAPITRE 2 : WEB DYNAMIQUE 25 Automate à état avec la variable action

String action = request.getParameter("action"); if ("addTodo".equals(action)) { String texte = request.getParameter("todo_texte"); Application.getInstance().addTodo(texte, false); vue = "index.jsp"; } if ("delTodo".equals(action)) { String idTodo = request.getParameter("todo_id"); Application.getInstance().deleteTodo( idTodo ); vue = "confirm.jsp"; } request.getRequestDispatcher( vue ).forward(request, response);

CHAPITRE 2 : WEB DYNAMIQUE 26 CSS

CHAPITRE 2 : WEB DYNAMIQUE 27 CSS link, inline, CSS éditeur, CSS Zen Garden

CHAPITRE 3 : EXTENSIONS 28

CHAPITRE 3 : JAVASCRIPT 29 Javascript, executé dans le navigateur

Javascript version Vanilla (sans framework JS)

CHAPITRE 3 : FORMAT JSON 30 En remplacement du XML

var textJson = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}'; var employeList = JSON.parse( textJson );

CHAPITRE 3 : JAVASCRIPT 31 Javascript version Jquery

$( "recherche d’un element dans le DOM" )

CHAPITRE 3 : AJAX 32 En arrière plan appel à une URL

CHAPITRE 3 : TEST UNITAIRE 33 Junit

Class TodoTest

Class Todo

CHAPITRE 3 : SYSTÈME DE LOG 34 Log4j

Criticité de Log

► Debug ► Info ► Warm ► Error ► Fatal Log vers Console

CHAPITRE 3 : ORM 35 Hibernate

Diapositive numéro 1Diapositive numéro 2sommaireChapitre 0 : la formationChapitre 1 : PRINCIPESChapitre 1 : PRINCIPESChapitre 1 : PRINCIPESChapitre 1 : PRINCIPESChapitre 1 : PRINCIPESChapitre 1 : PRINCIPESChapitre 2 : WEB DYNAMIQUEChapitre 1 : PRINCIPESChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 2 : WEB DYNAMIQUEChapitre 3 : ExtensionsChapitre 3 : JavascriptChapitre 3 : format jsonChapitre 3 : javascriptChapitre 3 : AJAXChapitre 3 : Test unitaireChapitre 3 : Système de logChapitre 3 : ORMDiapositive numéro 36