SlideShare a Scribd company logo
1 of 15
Download to read offline
TD - Spring MVC
Setup - Config resources
Récupérer le projet /home/TP/modules/sujets/CAI/WEB/td-spring/spring-mvc-td.tar.gz
et l'installer dans votre workspace
Sous Eclipse dans le serveur.xml
Utilisation d'un Tomcat 6
<GlobalNamingResources>
<Resource auth="Container"
driverClassName="org.apache.derby.jdbc.EmbeddedDriver"
maxActive="8" maxIdle="4"
name="jdbc/devenib-ds" type="javax.sql.DataSource"
url="jdbc:derby:devenib-ds;create=true"
username="" password="" />
</GlobalNamingResources>
.....
<Context docBase="spring-mvc" path="/spring-mvc" reloadable="true" source="org.eclipse.jst.jee.server:
spring-mvc">
<ResourceLink name="jdbc/devenib-ds" global="jdbc/devenib-ds" type="javax.sql.DataSource" />
</Context>
Sous Eclipse
Dans le vue JEE dans la View Server -> serveur 'localhost Tomcat 6' -> Open (F3) ->
lien Open Lauch Configuration
Setup
Configuration du Tomcat
Open (F3)
Java EE View
Setup
Ouvrir la configuration de lancement du Tomcat
Configuration de lancement
Setup
Onglet Arguments : Indiquer au conteneur
l'emplacement de la base de données
-Dderby.system.home="/<REPERTOIRE HOME ENIB>/derby/Databases"
Setup
Onglet Classpath : Indiquer au conteneur
l'emplacement des jar de la base de données
Ajouter
User Entries : Add External Jar : derby.jar
derby.jar disponible sous /home/TP/modules/sujets/CAI/WEB/db-derby-
10.9.1.0-bin/lib
Setup
Creation BDD Derby
Exécuter le script de création de la base de données
/home/TP/modules/sujets/CAI/WEB/td-spring/createbdd.sh
Run Serveur
● Sous Eclipse
○ clean
○ publish
○ start
● Le serveur doit démarrer sans erreur
● possibilité de créer un compte dans le menu sign-up
Le bean BeerStore a les propriétés suivantes (spring-ioc.xml):
id : beerStore
class : fr.enib.cai.springframework.model.business.impl.BeerStoreImpl
scope : singleton
L'annotation @Autowired sur l'interface BeerStore permet de notifier à Spring
d'injecter l'implémentation correspondante.
Attention : Toute modification de l'injection (xml ou annotation) nécessite un
redémarrage du serveur sous Eclipse.
Injection
déclaration au bean beerStore
Servir la JSP bar.jsp pour toute méthode GET sur l'url /private/bar
Dans la classe BarControleur
Sur une requête GET url= http://localhost:8080/spring-mvc/private/bar
forwarder vers la page bar.jsp
Cette JSP affiche la liste des bières de l'utilisateur connecté
Cette méthode printHome() réalisera :
La récupération de l'utilisateur connecté
La récupération des bières de l'utilisateur
Le forward vers la page bar.jsp
BarControleur
Get
Le formulaire beer/add (Home.jsp) est soumis via une requête AJAX.
URL http://localhost:8080/spring-mvc-tp/private/beer/add
JSON {"name":"1664","brewery":"Kronenbourg","country":"France","alcohol":"5,5"}
Créer dans la classe HomeControleur une methode validateField avec les propriétés suivantes :
urlmapping : /private/beer/add
type : JSON (RequestBody / ResponseBody)
request method : POST
Cette méthode réalisera :
Le contrôle de validation du formulaire
En cas de succes :
ajouter la bière au beerStore
créeer un object AddBeerStatus relatant le résultat de l'opération
En cas d'erreur :
créer un object AddBeerStatus les erreurs de validation
retourner cet objet
Résultat attendu :
La bière doit être ajoutée à la liste de bières en cas de succès
Les messages d'erreur doivent s'afficher dans la lightwindow addBeer.
AddBeer
Soumission du formulaire
Le plus "+" dans le tableau appel un service AJAX d'ajout de bière dans le
stock
URL http://localhost:8080/spring-mvc-tp/private/bar/checkin
JSON {"id":2,"amount":"7"}
Créer dans la classe BarControleur ajouter une methode checkin avec les propriétés suivantes :
urlmapping : /private/bar/checkin
type : JSON (RequestBody / ResponseBody)
request method : POST
Cette méthode réalisera :
Récupération de l'utilisation connecté
Validation de input
Check in du nombre amount dans le stock de la bière id
Retourne un JSON avec le nouveau stock (classe CheckInCheckOutStatus)
BarControleur
Ajout de bière dans le stock
Le plus "-" dans le tableau appel un service AJAX d'ajout de bière dans le
stock
URL http://localhost:8080/spring-mvc-tp/private/bar/checkout
JSON {"id":2,"amount":"7"}
Créer dans la classe BarControleur ajouter une methode checkout avec les propriétés suivantes :
urlmapping : /private/bar/checkout
type : JSON (RequestBody / ResponseBody)
request method : POST
Cette méthode réalisera :
Récupération de l'utilisation connecté
Validation de input
Check out du nombre amount dans le stock de la bière id
Retourne un JSON avec le nouveau stock (classe CheckInCheckOutStatus)
BarControleur
Retrait de bière dans le stock
Modèle Métier
Ajout de la persistance (BDD)
L'implémentation BeerStoreImpl n'a pas de persistance... c'est mal
● Créer une nouvelle implémentation BeerStoreJDBCImpl
● créer un modèle SQL correspondant aux HashMap... ou mieux !
○ Le déployer sur votre Derby local
● injecter un driver jdbc dans la classe BeerStoreJDBCImpl
● Utiliser les preparedStatement pour requêter la base de données
● Enjoy votre application a de la persistance, vous pouvez la déployer sur
Cloubees !
Front tunning
Pour ceux qui s'ennuient...
● Ajouter des images aux bières
● Mettre un carroussel Bootstrap sur la pages d'accueil publique
● Debugguer l'application (il y en a beaucoup, c'est Seb qui a codé :P)
○ l'internationalisation ko sans cookies
○ formulaires addBeer ne traitent pas toutes les erreurs

More Related Content

Similar to ENIB cours CAI Web - Séance 4 - Frameworks/Spring - TD

Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webNormandie Web Xperts
 
Presentation Tomcat Load Balancer
Presentation Tomcat Load BalancerPresentation Tomcat Load Balancer
Presentation Tomcat Load Balancertarkaus
 
Mini projet webservice soap
Mini projet   webservice soapMini projet   webservice soap
Mini projet webservice soapYoucef Aliarous
 
BordeauxJUG : Portails &amp; Portlets Java
BordeauxJUG : Portails &amp; Portlets JavaBordeauxJUG : Portails &amp; Portlets Java
BordeauxJUG : Portails &amp; Portlets JavaCamblor Frédéric
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux ServletsFrançois Charoy
 
Web dev open door
Web dev   open doorWeb dev   open door
Web dev open doorLeTesteur
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024YounesOuladSayad1
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdfHeartKing10
 
Cours PHP PDO intégrale afin de mieux appréhender la nouvelle librairie
Cours PHP PDO intégrale afin de mieux appréhender la nouvelle librairieCours PHP PDO intégrale afin de mieux appréhender la nouvelle librairie
Cours PHP PDO intégrale afin de mieux appréhender la nouvelle librairieafdoumbia
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Sylvain Wallez
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09Claude Coulombe
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRSLilia Sfaxi
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à AngularjsRossi Oddet
 

Similar to ENIB cours CAI Web - Séance 4 - Frameworks/Spring - TD (20)

Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur webConférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
Conférence #nwx2014 - Thibaud Juin - Varnish, accélérateur web
 
Presentation Tomcat Load Balancer
Presentation Tomcat Load BalancerPresentation Tomcat Load Balancer
Presentation Tomcat Load Balancer
 
Marzouk jsp
Marzouk jspMarzouk jsp
Marzouk jsp
 
Mini projet webservice soap
Mini projet   webservice soapMini projet   webservice soap
Mini projet webservice soap
 
Les Servlets et JSP
Les Servlets et JSPLes Servlets et JSP
Les Servlets et JSP
 
BordeauxJUG : Portails &amp; Portlets Java
BordeauxJUG : Portails &amp; Portlets JavaBordeauxJUG : Portails &amp; Portlets Java
BordeauxJUG : Portails &amp; Portlets Java
 
JDBC Java
JDBC JavaJDBC Java
JDBC Java
 
Introductions Aux Servlets
Introductions Aux ServletsIntroductions Aux Servlets
Introductions Aux Servlets
 
Spring MVC
Spring MVCSpring MVC
Spring MVC
 
Web dev open door
Web dev   open doorWeb dev   open door
Web dev open door
 
cours web developpement statique AJAX 2024
cours web developpement statique AJAX  2024cours web developpement statique AJAX  2024
cours web developpement statique AJAX 2024
 
ajax.pdf
ajax.pdfajax.pdf
ajax.pdf
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
 
Cours PHP PDO intégrale afin de mieux appréhender la nouvelle librairie
Cours PHP PDO intégrale afin de mieux appréhender la nouvelle librairieCours PHP PDO intégrale afin de mieux appréhender la nouvelle librairie
Cours PHP PDO intégrale afin de mieux appréhender la nouvelle librairie
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011Play Framework - Toulouse JUG - nov 2011
Play Framework - Toulouse JUG - nov 2011
 
Ajax GTI780 & MTI780 ETS A09
Ajax  GTI780 & MTI780  ETS  A09Ajax  GTI780 & MTI780  ETS  A09
Ajax GTI780 & MTI780 ETS A09
 
Tutoriel ajax jquery
Tutoriel ajax jqueryTutoriel ajax jquery
Tutoriel ajax jquery
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 

More from Horacio Gonzalez

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Horacio Gonzalez
 
But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...Horacio Gonzalez
 
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27Horacio Gonzalez
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...Horacio Gonzalez
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSHoracio Gonzalez
 
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Horacio Gonzalez
 
Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09Horacio Gonzalez
 
Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20Horacio Gonzalez
 
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptHoracio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLHoracio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSHoracio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLHoracio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptHoracio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSHoracio Gonzalez
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...Horacio Gonzalez
 
Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18Horacio Gonzalez
 

More from Horacio Gonzalez (20)

Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
Il n'y a pas que Polymer dans la vie… - RennesJS - 2017-06-27
 
But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...But there is no web component for that - Web Components Remote Conference - 2...
But there is no web component for that - Web Components Remote Conference - 2...
 
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27 Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
Mixité dans le monde des WebComponents - DevFest Toulouse - 2017-09-27
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
 
Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09Mixing Web Components - Best of Web Paris - 2016 06-09
Mixing Web Components - Best of Web Paris - 2016 06-09
 
Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20Polymer in the real life - Devoxx France - 2016 04-20
Polymer in the real life - Devoxx France - 2016 04-20
 
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24 Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
Warp10: collect, store and manipulate sensor data - BreizhCamp - 2016 03-24
 
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScriptENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
ENIB 2015 2016 - CAI Web S02E03- Forge JS 1/4 - La forge JavaScript
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 3/3 - Web Components avec Po...
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQLENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
ENIB 2015 2016 - CAI Web S02E03 - Forge JS 2/4 - MongoDB and NoSQL
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQLENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
ENIB 2015-2016 - CAI Web - S01E01- MongoDB and NoSQL
 
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScriptENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
ENIB 2015-2016 - CAI Web - S01E01- La forge JavaScript
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JSENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 1/3 - HTTP, HTML, CSS, JS
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 3/3 - Web components avec ...
 
Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18Beyond Polymer - JUG Summer Camp - 2015-09-18
Beyond Polymer - JUG Summer Camp - 2015-09-18
 

ENIB cours CAI Web - Séance 4 - Frameworks/Spring - TD

  • 2. Setup - Config resources Récupérer le projet /home/TP/modules/sujets/CAI/WEB/td-spring/spring-mvc-td.tar.gz et l'installer dans votre workspace Sous Eclipse dans le serveur.xml Utilisation d'un Tomcat 6 <GlobalNamingResources> <Resource auth="Container" driverClassName="org.apache.derby.jdbc.EmbeddedDriver" maxActive="8" maxIdle="4" name="jdbc/devenib-ds" type="javax.sql.DataSource" url="jdbc:derby:devenib-ds;create=true" username="" password="" /> </GlobalNamingResources> ..... <Context docBase="spring-mvc" path="/spring-mvc" reloadable="true" source="org.eclipse.jst.jee.server: spring-mvc"> <ResourceLink name="jdbc/devenib-ds" global="jdbc/devenib-ds" type="javax.sql.DataSource" /> </Context>
  • 3. Sous Eclipse Dans le vue JEE dans la View Server -> serveur 'localhost Tomcat 6' -> Open (F3) -> lien Open Lauch Configuration Setup Configuration du Tomcat Open (F3) Java EE View
  • 4. Setup Ouvrir la configuration de lancement du Tomcat Configuration de lancement
  • 5. Setup Onglet Arguments : Indiquer au conteneur l'emplacement de la base de données -Dderby.system.home="/<REPERTOIRE HOME ENIB>/derby/Databases"
  • 6. Setup Onglet Classpath : Indiquer au conteneur l'emplacement des jar de la base de données Ajouter User Entries : Add External Jar : derby.jar derby.jar disponible sous /home/TP/modules/sujets/CAI/WEB/db-derby- 10.9.1.0-bin/lib
  • 7. Setup Creation BDD Derby Exécuter le script de création de la base de données /home/TP/modules/sujets/CAI/WEB/td-spring/createbdd.sh
  • 8. Run Serveur ● Sous Eclipse ○ clean ○ publish ○ start ● Le serveur doit démarrer sans erreur ● possibilité de créer un compte dans le menu sign-up
  • 9. Le bean BeerStore a les propriétés suivantes (spring-ioc.xml): id : beerStore class : fr.enib.cai.springframework.model.business.impl.BeerStoreImpl scope : singleton L'annotation @Autowired sur l'interface BeerStore permet de notifier à Spring d'injecter l'implémentation correspondante. Attention : Toute modification de l'injection (xml ou annotation) nécessite un redémarrage du serveur sous Eclipse. Injection déclaration au bean beerStore
  • 10. Servir la JSP bar.jsp pour toute méthode GET sur l'url /private/bar Dans la classe BarControleur Sur une requête GET url= http://localhost:8080/spring-mvc/private/bar forwarder vers la page bar.jsp Cette JSP affiche la liste des bières de l'utilisateur connecté Cette méthode printHome() réalisera : La récupération de l'utilisateur connecté La récupération des bières de l'utilisateur Le forward vers la page bar.jsp BarControleur Get
  • 11. Le formulaire beer/add (Home.jsp) est soumis via une requête AJAX. URL http://localhost:8080/spring-mvc-tp/private/beer/add JSON {"name":"1664","brewery":"Kronenbourg","country":"France","alcohol":"5,5"} Créer dans la classe HomeControleur une methode validateField avec les propriétés suivantes : urlmapping : /private/beer/add type : JSON (RequestBody / ResponseBody) request method : POST Cette méthode réalisera : Le contrôle de validation du formulaire En cas de succes : ajouter la bière au beerStore créeer un object AddBeerStatus relatant le résultat de l'opération En cas d'erreur : créer un object AddBeerStatus les erreurs de validation retourner cet objet Résultat attendu : La bière doit être ajoutée à la liste de bières en cas de succès Les messages d'erreur doivent s'afficher dans la lightwindow addBeer. AddBeer Soumission du formulaire
  • 12. Le plus "+" dans le tableau appel un service AJAX d'ajout de bière dans le stock URL http://localhost:8080/spring-mvc-tp/private/bar/checkin JSON {"id":2,"amount":"7"} Créer dans la classe BarControleur ajouter une methode checkin avec les propriétés suivantes : urlmapping : /private/bar/checkin type : JSON (RequestBody / ResponseBody) request method : POST Cette méthode réalisera : Récupération de l'utilisation connecté Validation de input Check in du nombre amount dans le stock de la bière id Retourne un JSON avec le nouveau stock (classe CheckInCheckOutStatus) BarControleur Ajout de bière dans le stock
  • 13. Le plus "-" dans le tableau appel un service AJAX d'ajout de bière dans le stock URL http://localhost:8080/spring-mvc-tp/private/bar/checkout JSON {"id":2,"amount":"7"} Créer dans la classe BarControleur ajouter une methode checkout avec les propriétés suivantes : urlmapping : /private/bar/checkout type : JSON (RequestBody / ResponseBody) request method : POST Cette méthode réalisera : Récupération de l'utilisation connecté Validation de input Check out du nombre amount dans le stock de la bière id Retourne un JSON avec le nouveau stock (classe CheckInCheckOutStatus) BarControleur Retrait de bière dans le stock
  • 14. Modèle Métier Ajout de la persistance (BDD) L'implémentation BeerStoreImpl n'a pas de persistance... c'est mal ● Créer une nouvelle implémentation BeerStoreJDBCImpl ● créer un modèle SQL correspondant aux HashMap... ou mieux ! ○ Le déployer sur votre Derby local ● injecter un driver jdbc dans la classe BeerStoreJDBCImpl ● Utiliser les preparedStatement pour requêter la base de données ● Enjoy votre application a de la persistance, vous pouvez la déployer sur Cloubees !
  • 15. Front tunning Pour ceux qui s'ennuient... ● Ajouter des images aux bières ● Mettre un carroussel Bootstrap sur la pages d'accueil publique ● Debugguer l'application (il y en a beaucoup, c'est Seb qui a codé :P) ○ l'internationalisation ko sans cookies ○ formulaires addBeer ne traitent pas toutes les erreurs