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

Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...
Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...
Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...ayoub daoudi
 
Modele rapport pfe esprit
Modele rapport pfe  espritModele rapport pfe  esprit
Modele rapport pfe espritAmine Chahed
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITLina Meddeb
 
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
 
Rapport Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatiqueHicham Ben
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...MOHAMMED MOURADI
 
Rapport pfe 2017 Système de gestion des rendez-vous médicaux
Rapport pfe 2017 Système de gestion des rendez-vous médicaux Rapport pfe 2017 Système de gestion des rendez-vous médicaux
Rapport pfe 2017 Système de gestion des rendez-vous médicaux fehmi arbi
 
Cours08 exceptions
Cours08 exceptionsCours08 exceptions
Cours08 exceptionsIssam Talkam
 
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIRRapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIRAHMEDAKHACHKHOUCH
 
Rapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboardRapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboardSiwar GUEMRI
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5YounessLaaouane
 
Gestion des actifs applicatifs
Gestion des actifs applicatifsGestion des actifs applicatifs
Gestion des actifs applicatifsSafaAballagh
 
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...Yasmine Lachheb
 
Rapport PFE ISMAGI SQLI Microsoft
Rapport PFE ISMAGI SQLI MicrosoftRapport PFE ISMAGI SQLI Microsoft
Rapport PFE ISMAGI SQLI MicrosoftOussama BAHLOULI
 
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...tayebbousfiha1
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATSiwar GUEMRI
 
Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...
Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...
Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...Abderrahmane Belhimer
 
réaliser une plateforme d’automatisation et de génération des rapports de test
réaliser une plateforme d’automatisation et de génération des rapports de testréaliser une plateforme d’automatisation et de génération des rapports de test
réaliser une plateforme d’automatisation et de génération des rapports de testahmed oumezzine
 
Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Ramzi Noumairi
 

Tendances (20)

Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...
Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...
Présentation de Projet de Fin d'année - Daoudi Ayoub - Génie informatique ENS...
 
Modele rapport pfe esprit
Modele rapport pfe  espritModele rapport pfe  esprit
Modele rapport pfe esprit
 
RapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRITRapportPFE_IngenieurInformatique_ESPRIT
RapportPFE_IngenieurInformatique_ESPRIT
 
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...
 
Rapport Projet de fin d'etude sur le parc informatique
Rapport Projet  de fin d'etude sur le parc informatiqueRapport Projet  de fin d'etude sur le parc informatique
Rapport Projet de fin d'etude sur le parc informatique
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
Rapport pfe 2017 Système de gestion des rendez-vous médicaux
Rapport pfe 2017 Système de gestion des rendez-vous médicaux Rapport pfe 2017 Système de gestion des rendez-vous médicaux
Rapport pfe 2017 Système de gestion des rendez-vous médicaux
 
Cours08 exceptions
Cours08 exceptionsCours08 exceptions
Cours08 exceptions
 
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIRRapport du Projet de Fin d'année Génie informatique ENSA AGADIR
Rapport du Projet de Fin d'année Génie informatique ENSA AGADIR
 
Rapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboardRapport de stage boite à idées innovantes avec dashboard
Rapport de stage boite à idées innovantes avec dashboard
 
Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5Application web Gestion RH ASP.NET MVC5
Application web Gestion RH ASP.NET MVC5
 
Gestion des actifs applicatifs
Gestion des actifs applicatifsGestion des actifs applicatifs
Gestion des actifs applicatifs
 
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
Rapport PFE BIAT Conception et mise en place d’une plate-forme de gestion des...
 
Rapport de stage
Rapport de stageRapport de stage
Rapport de stage
 
Rapport PFE ISMAGI SQLI Microsoft
Rapport PFE ISMAGI SQLI MicrosoftRapport PFE ISMAGI SQLI Microsoft
Rapport PFE ISMAGI SQLI Microsoft
 
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
Rapport de Stage PFE - Développement d'un Projet ALTEN MAROC Concernant le Sy...
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSAT
 
Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...
Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...
Mémoire de fin d'études. Modules: SI Helpdesk , Gestion Park informatique , B...
 
réaliser une plateforme d’automatisation et de génération des rapports de test
réaliser une plateforme d’automatisation et de génération des rapports de testréaliser une plateforme d’automatisation et de génération des rapports de test
réaliser une plateforme d’automatisation et de génération des rapports de test
 
Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...Présentation PFE (Conception et développement d'une application web && mobile...
Présentation PFE (Conception et développement d'une application web && mobile...
 

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