SlideShare une entreprise Scribd logo
1  sur  12
Télécharger pour lire hors ligne
TD - Servlet / JSP
Import du projet
Sous Eclipse
● Importer le projet - servlet-alone
○ context root : servlet-alone
○ content directory : web
○ ne pas générer le deployement descriptor web.xml
● Lancer le tomcat sous Eclipse
○ project
○ run/as - run on server
○ configurer le server Tomcat 6 avec le port 8080
○ vérifier que le serveur est lancé http://127.0.0.1:8080/servlet-alone/beer
Les Pojos
● Pojo Beer avec les attributs suivants :
○ String name;
○ String brewery;
○ String country;
○ double alcohol;
● Pojo Bar avec les attributs suivants :
○ Beer beer
○ int stock
Business
La classe BarBusiness permet d'effectuer les actions sur le bar :
● ajouter une bière (newBeer)
● supprimer une bière (removeBeer)
● obtenir la liste des bières (getBeers)
● obtenir le stocke du bar (getBar)
● mettre des bière en stocke (checkinBeer)
● sortir une bière du stocke (checkoutBeer)
Servlet BeerServlet
● Mapping {web app context}/beer voir web.xml
<servlet>...
<servlet-name>BeerServlet</servlet-name>
<servlet-class>fr.enib.cai.servlet.BeerServlet</servlet-class>
</servlet> ...
<servlet-mapping>
<servlet-name>BeerServlet</servlet-name>
<url-pattern>/beer/*</url-pattern>
</servlet-mapping>
● GET
Renvoie la liste de bières dans la page /WEB-INF/views/beer.jsp
● POST
○ sur l'url {web app context}/beer/add ajoute une bière et retourne le flux
JSON de la bière ajoutée. {"name":"1664","brewery":"Kronenbourg","country":"
France","alcohol":5.5,"id":3}
○ sur l'url {web app context}/beer/delete supprime une bière et retourne
le flux JSON de la bière supprimée
○ sinon affiche la page /WEB-INF/views/404.jsp
Servlet BarServlet
● Mapping {web app context}/beer voir web.xml
<servlet>...
<servlet-name>BarServlet</servlet-name>
<servlet-class>fr.enib.cai.servlet.BarServlet</servlet-class>
</servlet> ...
<servlet-mapping>
<servlet-name>BarServlet</servlet-name>
<url-pattern>/bar/*</url-pattern>
</servlet-mapping>
● GET et POST qui renvoient Hello Enib
Servlet BarServlet
Methode Get
● Méthode idempotent
1. Récupérer le bar avec la méthode getBar (liste de BeerStock)
2. Ajouter l'attribut "bar" à la request avec comme object la collection de
BeerStock
3. Forwarder la requête à la jsp privée /WEB-INF/views/bar.jsp
Le résultat peut être consulté à l'URL suivante :
http://127.0.0.1:8080/{context}/bar
Servlet BarServlet
Methode Post checkInBeer
● Méthode non-idempotent
Le bouton + dans la page web) génére l'url suivante (utilisation de la methode
POST):
http://127.0.0.1:8080/{context}/bar/checkInBeer
avec le paramètre id=2
le paramètre ID corresponds à l'identifiant de la bière.
L'execution de cette méthode POST doit
● ajouter une bière dans le stock
● ajouter l'attribut beerStock à la requête
● forwarder à la jsp bar-json.jsp
Cette jsp produit le json suivante {id=3,stock=12}
Actionner le bouton + doit ajouter une bière dans le stock et mettre à jour la
page Web
Servlet BarServlet
Methode Post checkOutBeer
● Méthode non-idempotent
Le bouton + dans la page web) génére l'url suivante (utilisation de la methode
POST):
http://127.0.0.1:8080/{context}/bar/checkOutBeer
avec le paramètre id=2
le paramètre ID corresponds à l'identifiant de la bière.
L'execution de cette méthode POST doit
● retirer une bière dans le stock
● ajouter l'attribut beerStock à la requête
● forwarder à la jsp bar-json.jsp
Cette jsp produit le json suivante {id=3,stock=12}
Actionner le bouton - doit retirer une bière dans le stock et mettre à jour la page
Web
Servlet BarServlet
Extra (pour ceux qui s'ennuient)
Le bouton + et - ouvre un lightwindow permettant de choisir le nombre de
bières à ajouter ou retirer du stock.
La jsp beer.jsp a un formulaire caché addbeer
La lightbox est gérer avec Bootstrap
Le formulaire est envoyé en Ajax avec la methode de JQuery ajaxForm
Bonne chance ;)
Tomcat Beer
● Produire le war (sous Eclipse)
○ File->export->web->War
■ nom du war servlet-alone.war
Option (pour ceux qui s'ennuient...)
● Deployer le war dans le Tomcat
○ copier le war dans /opt/apache-tomcat-6.X.X/webapps/
● Démarrer le Tomcat
○ /opt/apache-tomcat-6.X.X/bin/startup.sh
■ port d'écoute définit dans le server.xml (connector)
■ les logs (catalina.out) sont riches d'information
● Arrêter le Tomcat
○ /opt/apache-tomcat-6.X.XX/bin/shutdown.sh
CloudBee(r)s

Contenu connexe

En vedette

Rapport Stage Ouvrier - Application J2EE - Haroun SMIDA
Rapport Stage Ouvrier - Application J2EE - Haroun SMIDARapport Stage Ouvrier - Application J2EE - Haroun SMIDA
Rapport Stage Ouvrier - Application J2EE - Haroun SMIDAHaroun SMIDA
 
Apache Tomcat + Java EE = Apache TomEE
Apache Tomcat + Java EE = Apache TomEEApache Tomcat + Java EE = Apache TomEE
Apache Tomcat + Java EE = Apache TomEEJacek Laskowski
 
Femmes tiers monde
Femmes tiers mondeFemmes tiers monde
Femmes tiers mondeiesboliches
 
El Mundo En Miniatura Jmt Ab 08
El Mundo En Miniatura Jmt Ab 08El Mundo En Miniatura Jmt Ab 08
El Mundo En Miniatura Jmt Ab 08Armando Lopez
 
Presentación corporativa CVTeam Chile 2012
Presentación corporativa  CVTeam Chile 2012Presentación corporativa  CVTeam Chile 2012
Presentación corporativa CVTeam Chile 2012Diego Dal Cero
 
Láminas de Weber (Teoría de la Organización)
Láminas de Weber (Teoría de la Organización) Láminas de Weber (Teoría de la Organización)
Láminas de Weber (Teoría de la Organización) carlucho98
 
Veille economie numérique 200711
Veille economie numérique 200711Veille economie numérique 200711
Veille economie numérique 200711Agence Elan
 
como crear una base de datos (tarea de compu.Html
como crear una base de datos (tarea de compu.Htmlcomo crear una base de datos (tarea de compu.Html
como crear una base de datos (tarea de compu.Htmlmay_campos
 
M Dicodeguardia
M DicodeguardiaM Dicodeguardia
M Dicodeguardiakikesa
 
L'hymne français
L'hymne françaisL'hymne français
L'hymne françaisildamaria
 
Jardin éphémère 2007
Jardin éphémère 2007Jardin éphémère 2007
Jardin éphémère 2007Sekko Cheng
 
KOUNANKOU :Villes Internet , Villes numériques afrique
KOUNANKOU :Villes Internet , Villes numériques afriqueKOUNANKOU :Villes Internet , Villes numériques afrique
KOUNANKOU :Villes Internet , Villes numériques afriqueKounakou
 
Bahai Faith Ap French 051508 1211857190999707 9
Bahai Faith Ap French 051508 1211857190999707 9Bahai Faith Ap French 051508 1211857190999707 9
Bahai Faith Ap French 051508 1211857190999707 9Marisol Bashiri
 

En vedette (20)

html5 and css3
html5 and css3html5 and css3
html5 and css3
 
Rapport Stage Ouvrier - Application J2EE - Haroun SMIDA
Rapport Stage Ouvrier - Application J2EE - Haroun SMIDARapport Stage Ouvrier - Application J2EE - Haroun SMIDA
Rapport Stage Ouvrier - Application J2EE - Haroun SMIDA
 
J2 ee
J2 eeJ2 ee
J2 ee
 
Apache Tomcat + Java EE = Apache TomEE
Apache Tomcat + Java EE = Apache TomEEApache Tomcat + Java EE = Apache TomEE
Apache Tomcat + Java EE = Apache TomEE
 
Servlets et JSP
Servlets et JSPServlets et JSP
Servlets et JSP
 
Faqjavaee (1)
Faqjavaee (1)Faqjavaee (1)
Faqjavaee (1)
 
Femmes tiers monde
Femmes tiers mondeFemmes tiers monde
Femmes tiers monde
 
El Mundo En Miniatura Jmt Ab 08
El Mundo En Miniatura Jmt Ab 08El Mundo En Miniatura Jmt Ab 08
El Mundo En Miniatura Jmt Ab 08
 
Presentación corporativa CVTeam Chile 2012
Presentación corporativa  CVTeam Chile 2012Presentación corporativa  CVTeam Chile 2012
Presentación corporativa CVTeam Chile 2012
 
Láminas de Weber (Teoría de la Organización)
Láminas de Weber (Teoría de la Organización) Láminas de Weber (Teoría de la Organización)
Láminas de Weber (Teoría de la Organización)
 
Veille economie numérique 200711
Veille economie numérique 200711Veille economie numérique 200711
Veille economie numérique 200711
 
como crear una base de datos (tarea de compu.Html
como crear una base de datos (tarea de compu.Htmlcomo crear una base de datos (tarea de compu.Html
como crear una base de datos (tarea de compu.Html
 
Verbes pronominaux
Verbes pronominauxVerbes pronominaux
Verbes pronominaux
 
M Dicodeguardia
M DicodeguardiaM Dicodeguardia
M Dicodeguardia
 
Presentation ADENDI
Presentation ADENDIPresentation ADENDI
Presentation ADENDI
 
L'hymne français
L'hymne françaisL'hymne français
L'hymne français
 
Jardin éphémère 2007
Jardin éphémère 2007Jardin éphémère 2007
Jardin éphémère 2007
 
KOUNANKOU :Villes Internet , Villes numériques afrique
KOUNANKOU :Villes Internet , Villes numériques afriqueKOUNANKOU :Villes Internet , Villes numériques afrique
KOUNANKOU :Villes Internet , Villes numériques afrique
 
Bahai Faith Ap French 051508 1211857190999707 9
Bahai Faith Ap French 051508 1211857190999707 9Bahai Faith Ap French 051508 1211857190999707 9
Bahai Faith Ap French 051508 1211857190999707 9
 
Los tulipanes
Los tulipanesLos tulipanes
Los tulipanes
 

Plus de 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
 

Plus de 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 3 - JSP/Servlet - TP

  • 1. TD - Servlet / JSP
  • 2. Import du projet Sous Eclipse ● Importer le projet - servlet-alone ○ context root : servlet-alone ○ content directory : web ○ ne pas générer le deployement descriptor web.xml ● Lancer le tomcat sous Eclipse ○ project ○ run/as - run on server ○ configurer le server Tomcat 6 avec le port 8080 ○ vérifier que le serveur est lancé http://127.0.0.1:8080/servlet-alone/beer
  • 3. Les Pojos ● Pojo Beer avec les attributs suivants : ○ String name; ○ String brewery; ○ String country; ○ double alcohol; ● Pojo Bar avec les attributs suivants : ○ Beer beer ○ int stock
  • 4. Business La classe BarBusiness permet d'effectuer les actions sur le bar : ● ajouter une bière (newBeer) ● supprimer une bière (removeBeer) ● obtenir la liste des bières (getBeers) ● obtenir le stocke du bar (getBar) ● mettre des bière en stocke (checkinBeer) ● sortir une bière du stocke (checkoutBeer)
  • 5. Servlet BeerServlet ● Mapping {web app context}/beer voir web.xml <servlet>... <servlet-name>BeerServlet</servlet-name> <servlet-class>fr.enib.cai.servlet.BeerServlet</servlet-class> </servlet> ... <servlet-mapping> <servlet-name>BeerServlet</servlet-name> <url-pattern>/beer/*</url-pattern> </servlet-mapping> ● GET Renvoie la liste de bières dans la page /WEB-INF/views/beer.jsp ● POST ○ sur l'url {web app context}/beer/add ajoute une bière et retourne le flux JSON de la bière ajoutée. {"name":"1664","brewery":"Kronenbourg","country":" France","alcohol":5.5,"id":3} ○ sur l'url {web app context}/beer/delete supprime une bière et retourne le flux JSON de la bière supprimée ○ sinon affiche la page /WEB-INF/views/404.jsp
  • 6. Servlet BarServlet ● Mapping {web app context}/beer voir web.xml <servlet>... <servlet-name>BarServlet</servlet-name> <servlet-class>fr.enib.cai.servlet.BarServlet</servlet-class> </servlet> ... <servlet-mapping> <servlet-name>BarServlet</servlet-name> <url-pattern>/bar/*</url-pattern> </servlet-mapping> ● GET et POST qui renvoient Hello Enib
  • 7. Servlet BarServlet Methode Get ● Méthode idempotent 1. Récupérer le bar avec la méthode getBar (liste de BeerStock) 2. Ajouter l'attribut "bar" à la request avec comme object la collection de BeerStock 3. Forwarder la requête à la jsp privée /WEB-INF/views/bar.jsp Le résultat peut être consulté à l'URL suivante : http://127.0.0.1:8080/{context}/bar
  • 8. Servlet BarServlet Methode Post checkInBeer ● Méthode non-idempotent Le bouton + dans la page web) génére l'url suivante (utilisation de la methode POST): http://127.0.0.1:8080/{context}/bar/checkInBeer avec le paramètre id=2 le paramètre ID corresponds à l'identifiant de la bière. L'execution de cette méthode POST doit ● ajouter une bière dans le stock ● ajouter l'attribut beerStock à la requête ● forwarder à la jsp bar-json.jsp Cette jsp produit le json suivante {id=3,stock=12} Actionner le bouton + doit ajouter une bière dans le stock et mettre à jour la page Web
  • 9. Servlet BarServlet Methode Post checkOutBeer ● Méthode non-idempotent Le bouton + dans la page web) génére l'url suivante (utilisation de la methode POST): http://127.0.0.1:8080/{context}/bar/checkOutBeer avec le paramètre id=2 le paramètre ID corresponds à l'identifiant de la bière. L'execution de cette méthode POST doit ● retirer une bière dans le stock ● ajouter l'attribut beerStock à la requête ● forwarder à la jsp bar-json.jsp Cette jsp produit le json suivante {id=3,stock=12} Actionner le bouton - doit retirer une bière dans le stock et mettre à jour la page Web
  • 10. Servlet BarServlet Extra (pour ceux qui s'ennuient) Le bouton + et - ouvre un lightwindow permettant de choisir le nombre de bières à ajouter ou retirer du stock. La jsp beer.jsp a un formulaire caché addbeer La lightbox est gérer avec Bootstrap Le formulaire est envoyé en Ajax avec la methode de JQuery ajaxForm Bonne chance ;)
  • 11. Tomcat Beer ● Produire le war (sous Eclipse) ○ File->export->web->War ■ nom du war servlet-alone.war Option (pour ceux qui s'ennuient...) ● Deployer le war dans le Tomcat ○ copier le war dans /opt/apache-tomcat-6.X.X/webapps/ ● Démarrer le Tomcat ○ /opt/apache-tomcat-6.X.X/bin/startup.sh ■ port d'écoute définit dans le server.xml (connector) ■ les logs (catalina.out) sont riches d'information ● Arrêter le Tomcat ○ /opt/apache-tomcat-6.X.XX/bin/shutdown.sh