SlideShare une entreprise Scribd logo
1  sur  9
Télécharger pour lire hors ligne
Master SID-1
Année Universitaire : 2016/2017
Jeu (MVC) avec les sessions
« JEE »
Réalisé Par :
Abdelhakim HADI-ALAOUI
Encadré Par :
Mr. Mohammed YOUSSFI
1
Table des matières
Introduction........................................................................................................................2
Enonce ...............................................................................................................................2
Architecture........................................................................................................................2
Structure de projet ..............................................................................................................3
Code Source .......................................................................................................................3
Couche métier.................................................................................................................3
Couche web....................................................................................................................4
Démonstration de l’application...........................................................................................7
2
Introduction
La plupart des applications web utilisent le protocole HTTP. Malheureusement ce protocole
est ce que l'on appelle un protocole sans état, c'est-à-dire que le serveur web ne maintient pas
les informations à propos du client entre deux requêtes. De ce fait, le serveur ne sait pas
déterminer si une requête ou une réponse provient du même client. C'est pour cela que les
applications web utilisent le concept de session. Une session représente l'ensemble des
interactions pouvant intervenir entre un client et le serveur nous avons utilisé ce concept.
Enonce
Créer une application web J2EE qui respecte le modèle MVC qui permet de simuler un jeu
entre les clients http et le serveur web. Le principe du jeu est le suivant :
- Le serveur choisit un nombre aléatoire entre 0 et 100
- Un client http connecté, doit saisir un nombre pour deviner le nombre secret.
- Le serveur répond avec les éventualités suivantes :
 Votre nombre est plus grand
 Votre nombre est plus petit
 Bravo, vous avez gagné. Et dans ce cas-là le jeu s’arrête et pour chaque tentative
de jouer le serveur envoi au client un message qui indique que le jeu est terminé en
affichant le nombre secret recherché.
Architecture
3
Structure de projet
Code Source
Couche métier
Class jeu.java
package Metier;
public class Jeu {
private int secret;
private boolean fin;
public Jeu() {
secret=(int)(Math.random()*100);
fin=false;
}
public String jouer(int nb){
if(fin==false){
if(nb<secret)
return ("Votre nombre est plus petit");
else if(nb>secret)
return ("Votre nombre est plus grand");
else{
fin= true;
return ("Bravo vous avez gagnée");
}
}else{
return ("le jeu est terminée");
}
}//getters and setters
}
4
Couche web
Servlet :
5
EssaiForm
package presentation;
import java.util.ArrayList;
public class EssaiForm {
private int nombre;
// private String message;
private ArrayList<String> historique;
public EssaiForm() {
historique=new ArrayList<>();
}
public int getNombre() {
return nombre;
}
public void setNombre(int nombre) {
this.nombre = nombre;
}
public ArrayList<String> getHistorique() {
return historique;
}
public void setHistorique(ArrayList<String> historique) {
this.historique = historique;
}
public void addToHistorique(String resultat){
this.historique.add("Nombre : "+nombre+" Indication : "+resultat);
}
}
VUEJeu.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jeu</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<p></p>
<div class="panel panel-primary inverse">
<div class="panel-heading center" style="font-size: 30px">Veuillez
choisir un nombre entre 0 et 100 !</div>
<div class="panel-body">
<form action="jouer.php" method="post">
<label>Diviner ce nombre : </label>
6
<input type="text" name="nombre" id="nbre">
<button class="btn btn-primary" type="submit" name="jouer" id="jouer"
value="essaie">Essaie</button>
<c:if test="${fin==false || fin==null}">
<button class="btn btn-success" type="submit" name="jouer"
value="rejouer" disabled>Rejouer</button>
</c:if>
<c:if test="${fin==true}">
<button class="btn btn-success" type="submit" name="jouer"
value="rejouer" >Rejouer</button>
</c:if>
<br/>
<p></p>
<div id="message"></div>
<br/><br/>
<label>
${jeu.historique[fn:length(jeu.historique)-1]}
</label>
<br/><br/><br/>
<h4>Historique</h4>
<ol class="list-group">
<c:forEach items="${jeu.historique}" var="his">
<li class="list-group-item">${his}</li>
</c:forEach>
</ol>
<c:if test="${fin==true}">
<div class="alert alert-success" style="font-size: 40px">
<strong >FIN DE JEUX !</strong><br/>le nombre secret est :
${secret} !
</div>
</c:if>
</form>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$(function(){
$( "#jouer" ).on( 'click' , function(evt){
var nombre= document.querySelector('#nbre').value
console.log(nombre)
if(nombre<0){
evt.preventDefault();
var msg=document.querySelector('#message')
$(msg).text("le Nombre que vous avez saisi est inferieure a 0
")
$(msg).addClass("alert");
$(msg).addClass("alert-danger");
}else if(nombre>100){
evt.preventDefault();
var msg=document.querySelector('#message')
$(msg).text("le Nombre que vous avez saisi est superieur a
100")
$(msg).addClass("alert");
$(msg).addClass("alert-danger");
}
});
});
7
</script>
</body>
</html>
Démonstration de l’application
Interface de jeu
Gestion d’erreur de saisir
8
Chaque utilisateur a sa propre session (sa propre historique)
Message indique la fin de jeu lorsqu’un utilisateur trouve le nombre secret

Contenu connexe

Tendances

Rapport genie logiciel
Rapport genie logicielRapport genie logiciel
Rapport genie logicielserge sonfack
 
Rapport de stage d'été
Rapport de stage d'étéRapport de stage d'été
Rapport de stage d'étéJinenAbdelhak
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web ServicesLilia Sfaxi
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.jsBruno Bonnin
 
Soutenance PFE ingénieur génie logiciel
Soutenance PFE ingénieur génie logicielSoutenance PFE ingénieur génie logiciel
Soutenance PFE ingénieur génie logicielSiwar GUEMRI
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)ENSET, Université Hassan II Casablanca
 
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...Nawres Farhat
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITLina Meddeb
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesENSET, Université Hassan II Casablanca
 

Tendances (20)

Rapport genie logiciel
Rapport genie logicielRapport genie logiciel
Rapport genie logiciel
 
Introduction à React
Introduction à ReactIntroduction à React
Introduction à React
 
Rapport de stage d'été
Rapport de stage d'étéRapport de stage d'été
Rapport de stage d'été
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web Services
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Soutenance PFE ingénieur génie logiciel
Soutenance PFE ingénieur génie logicielSoutenance PFE ingénieur génie logiciel
Soutenance PFE ingénieur génie logiciel
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
Rapport pfe- Refonte et déploiement d’une solution de messagerie en utilisant...
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRIT
 
Rapport pfev7
Rapport pfev7Rapport pfev7
Rapport pfev7
 
Angular
AngularAngular
Angular
 
2 TUP
2 TUP2 TUP
2 TUP
 
Tp java ee.pptx
Tp java ee.pptxTp java ee.pptx
Tp java ee.pptx
 
Architecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependancesArchitecture jee principe de inversion de controle et injection des dependances
Architecture jee principe de inversion de controle et injection des dependances
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
 

Similaire à Jeu jee session

Mémoire fin de cycle1
Mémoire fin de cycle1Mémoire fin de cycle1
Mémoire fin de cycle1Mustafa Bachir
 
gestion Comptes Bancaire SpringBoot-Exemple.pdf
gestion Comptes Bancaire SpringBoot-Exemple.pdfgestion Comptes Bancaire SpringBoot-Exemple.pdf
gestion Comptes Bancaire SpringBoot-Exemple.pdfMohamedHassoun11
 
Devoir de contrôle N°1 Système et réseaux 2011-2012
Devoir de contrôle N°1 Système et réseaux 2011-2012Devoir de contrôle N°1 Système et réseaux 2011-2012
Devoir de contrôle N°1 Système et réseaux 2011-2012Wael Ismail
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoftdavrous
 
Conception et implémentation d'un nouveau langage de programmation
Conception et implémentation d'un nouveau langage de programmationConception et implémentation d'un nouveau langage de programmation
Conception et implémentation d'un nouveau langage de programmationAymen Bouein
 

Similaire à Jeu jee session (13)

Rapport Sockets en Java
Rapport Sockets en JavaRapport Sockets en Java
Rapport Sockets en Java
 
Mémoire fin de cycle1
Mémoire fin de cycle1Mémoire fin de cycle1
Mémoire fin de cycle1
 
gestion Comptes Bancaire SpringBoot-Exemple.pdf
gestion Comptes Bancaire SpringBoot-Exemple.pdfgestion Comptes Bancaire SpringBoot-Exemple.pdf
gestion Comptes Bancaire SpringBoot-Exemple.pdf
 
Devoir de contrôle N°1 Système et réseaux 2011-2012
Devoir de contrôle N°1 Système et réseaux 2011-2012Devoir de contrôle N°1 Système et réseaux 2011-2012
Devoir de contrôle N°1 Système et réseaux 2011-2012
 
Dc13 si
Dc13 siDc13 si
Dc13 si
 
Rapport final
Rapport finalRapport final
Rapport final
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
Rapport finiale
Rapport finialeRapport finiale
Rapport finiale
 
Rapport de fin d'etude
Rapport  de fin d'etudeRapport  de fin d'etude
Rapport de fin d'etude
 
Conception et implémentation d'un nouveau langage de programmation
Conception et implémentation d'un nouveau langage de programmationConception et implémentation d'un nouveau langage de programmation
Conception et implémentation d'un nouveau langage de programmation
 
Rapport de stage du fin d'étude
Rapport de stage du fin d'étudeRapport de stage du fin d'étude
Rapport de stage du fin d'étude
 
TD1.pdf
TD1.pdfTD1.pdf
TD1.pdf
 
vanderpypendaniel_msc
vanderpypendaniel_mscvanderpypendaniel_msc
vanderpypendaniel_msc
 

Jeu jee session

  • 1. Master SID-1 Année Universitaire : 2016/2017 Jeu (MVC) avec les sessions « JEE » Réalisé Par : Abdelhakim HADI-ALAOUI Encadré Par : Mr. Mohammed YOUSSFI
  • 2. 1 Table des matières Introduction........................................................................................................................2 Enonce ...............................................................................................................................2 Architecture........................................................................................................................2 Structure de projet ..............................................................................................................3 Code Source .......................................................................................................................3 Couche métier.................................................................................................................3 Couche web....................................................................................................................4 Démonstration de l’application...........................................................................................7
  • 3. 2 Introduction La plupart des applications web utilisent le protocole HTTP. Malheureusement ce protocole est ce que l'on appelle un protocole sans état, c'est-à-dire que le serveur web ne maintient pas les informations à propos du client entre deux requêtes. De ce fait, le serveur ne sait pas déterminer si une requête ou une réponse provient du même client. C'est pour cela que les applications web utilisent le concept de session. Une session représente l'ensemble des interactions pouvant intervenir entre un client et le serveur nous avons utilisé ce concept. Enonce Créer une application web J2EE qui respecte le modèle MVC qui permet de simuler un jeu entre les clients http et le serveur web. Le principe du jeu est le suivant : - Le serveur choisit un nombre aléatoire entre 0 et 100 - Un client http connecté, doit saisir un nombre pour deviner le nombre secret. - Le serveur répond avec les éventualités suivantes :  Votre nombre est plus grand  Votre nombre est plus petit  Bravo, vous avez gagné. Et dans ce cas-là le jeu s’arrête et pour chaque tentative de jouer le serveur envoi au client un message qui indique que le jeu est terminé en affichant le nombre secret recherché. Architecture
  • 4. 3 Structure de projet Code Source Couche métier Class jeu.java package Metier; public class Jeu { private int secret; private boolean fin; public Jeu() { secret=(int)(Math.random()*100); fin=false; } public String jouer(int nb){ if(fin==false){ if(nb<secret) return ("Votre nombre est plus petit"); else if(nb>secret) return ("Votre nombre est plus grand"); else{ fin= true; return ("Bravo vous avez gagnée"); } }else{ return ("le jeu est terminée"); } }//getters and setters }
  • 6. 5 EssaiForm package presentation; import java.util.ArrayList; public class EssaiForm { private int nombre; // private String message; private ArrayList<String> historique; public EssaiForm() { historique=new ArrayList<>(); } public int getNombre() { return nombre; } public void setNombre(int nombre) { this.nombre = nombre; } public ArrayList<String> getHistorique() { return historique; } public void setHistorique(ArrayList<String> historique) { this.historique = historique; } public void addToHistorique(String resultat){ this.historique.add("Nombre : "+nombre+" Indication : "+resultat); } } VUEJeu.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Jeu</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <body> <div class="container"> <p></p> <div class="panel panel-primary inverse"> <div class="panel-heading center" style="font-size: 30px">Veuillez choisir un nombre entre 0 et 100 !</div> <div class="panel-body"> <form action="jouer.php" method="post"> <label>Diviner ce nombre : </label>
  • 7. 6 <input type="text" name="nombre" id="nbre"> <button class="btn btn-primary" type="submit" name="jouer" id="jouer" value="essaie">Essaie</button> <c:if test="${fin==false || fin==null}"> <button class="btn btn-success" type="submit" name="jouer" value="rejouer" disabled>Rejouer</button> </c:if> <c:if test="${fin==true}"> <button class="btn btn-success" type="submit" name="jouer" value="rejouer" >Rejouer</button> </c:if> <br/> <p></p> <div id="message"></div> <br/><br/> <label> ${jeu.historique[fn:length(jeu.historique)-1]} </label> <br/><br/><br/> <h4>Historique</h4> <ol class="list-group"> <c:forEach items="${jeu.historique}" var="his"> <li class="list-group-item">${his}</li> </c:forEach> </ol> <c:if test="${fin==true}"> <div class="alert alert-success" style="font-size: 40px"> <strong >FIN DE JEUX !</strong><br/>le nombre secret est : ${secret} ! </div> </c:if> </form> </div> </div> </div> <script src="js/jquery.js"></script> <script> $(function(){ $( "#jouer" ).on( 'click' , function(evt){ var nombre= document.querySelector('#nbre').value console.log(nombre) if(nombre<0){ evt.preventDefault(); var msg=document.querySelector('#message') $(msg).text("le Nombre que vous avez saisi est inferieure a 0 ") $(msg).addClass("alert"); $(msg).addClass("alert-danger"); }else if(nombre>100){ evt.preventDefault(); var msg=document.querySelector('#message') $(msg).text("le Nombre que vous avez saisi est superieur a 100") $(msg).addClass("alert"); $(msg).addClass("alert-danger"); } }); });
  • 9. 8 Chaque utilisateur a sa propre session (sa propre historique) Message indique la fin de jeu lorsqu’un utilisateur trouve le nombre secret