Royaume du Maroc

Universit Hassan 1
er

Facult des Sciences et Techniques Settat






Mmoire de Projet de Fin dtudes

Prsent en vue de lobtention dune Licence en Gnie Informatique

Par
Anass SOFAINY
Anass EL HACHIMI

Sujet
Conception et ralisation dune application web de gestion du
sport

Encadr par :
Mr. A. Marzouk


Anne Universitaire 2012 / 2013

2


Ddicace




L'eau coule grce sa source
L'arbre pousse grce ses racines
A
Nos parents
Pour les sacrifices dploys nos gards ; pour leur patience
Leur amour et leur confiance en nous
Ils ont tout fait pour notre bonheur et notre russite.
Qu'ils trouvent dans ce modeste travail, le tmoignage de notre
Profonde affection et de notre attachement indfectible.
Nulle ddicace ne puisse exprimer ce que nous leur devons
Que dieu leur rserve la bonne sant et une longue vie.
A
Nos amis
En tmoignage de nos sincres reconnaissances pour les efforts
Qu'ils ont consentis pour nous soutenir au cours de nos tudes.
Que dieu nous garde toujours unis
A
Toute personne qui nous a aids faire notre projet.






3


Remerciements :





Au terme de la rdaction de ce mmoire, nous tenons remercier notre
encadreur Mr. Marzouk pour ses
prcieux conseils et son aide durant toute la priode du travail.
Nos vifs remerciements s'adressent galement tous nos enseignants, nos
amis et tous ceux qui nous ont prt mains fortes pour la ralisation du projet.
Nous remercions aussi chaleureusement
Mr. et Mr.
D'avoir accept de juger ce travail

Merci











4


Table des matires :

Ddicace ................................................................................................................................................... 2
Remerciements : .................................................................................................................................... 3
Table des matires : ............................................................................................................................. 4
Liste des abrviations : ....................................................................................................................... 6
Liste des figures : ................................................................................................................................... 7
Introduction : .......................................................................................................................................... 9
Chapitre I : Cadre du projet ............................................................................................................. 11
Organisme daccueil : ................................................................................................................................... 12
Universit Hassan 1er : ........................................................................................................................... 12
Luniversit en chiffres : ......................................................................................................................... 12
Facult des Sciences et Techniques de Settat : .............................................................................. 14
Cadre gnral du projet : ............................................................................................................................ 15
Problmatique : ......................................................................................................................................... 15
Travail demand : ..................................................................................................................................... 15
Mthodologie adopte : ............................................................................................................................... 15
Prsentation de lUML : .......................................................................................................................... 16
Prsentation dUP : ................................................................................................................................... 16
Conclusion ........................................................................................................................................................ 17
Chapitre II : Spcification et analyse des besoins .................................................................... 18
Spcification des besoins : ......................................................................................................................... 19
Dfinition des acteurs : ................................................................................................................................ 19
Besoins fonctionnels : .................................................................................................................................. 20
Diagramme de contexte : ....................................................................................................................... 20
Besoins non fonctionnels : ......................................................................................................................... 21
Diagramme des cas dutilisations global : ............................................................................................ 22
Analyse des cas dutilisation : ................................................................................................................... 23
Crer un compte :...................................................................................................................................... 23
Sauthentifier : ............................................................................................................................................ 24

5


Grer son compte : ................................................................................................................................... 25
Sinscrire : .................................................................................................................................................... 27
Grer ses demandes : .............................................................................................................................. 29
Effectuer une rservation : .................................................................................................................... 30
Grer les inscriptions : ............................................................................................................................ 32
Grer les activits : ................................................................................................................................... 33
Diagramme de classe danalyse : ............................................................................................................. 35
Conclusion : ...................................................................................................................................................... 36
Chapitre III : Conception ................................................................................................................... 37
Architecture de lapplication : .................................................................................................................. 38
Conception dtaill : ..................................................................................................................................... 39
Diagramme de package : ........................................................................................................................ 39
Diagramme des classes de participantes : ...................................................................................... 40
Diagrammes de squence: ..................................................................................................................... 41
Diagramme de classes de conception: .............................................................................................. 46
Conclusion ........................................................................................................................................................ 46
Chapitre IV : Ralisation ................................................................................................................... 47
Environnement matriel et logiciel : ...................................................................................................... 48
Environnement Matriel : ..................................................................................................................... 48
Choix de la plateforme de dveloppement : ................................................................................... 48
Environnement logiciel : ........................................................................................................................ 49
Framework utilis : ....................................................................................................................................... 50
Implmentation de la base de donnes : .............................................................................................. 52
Modle Physique de Donnes : ............................................................................................................ 53
Principales interfaces graphiques ........................................................................................................... 53
Conclusion : ...................................................................................................................................................... 66
Conclusion gnral ............................................................................................................................. 67
Bibliographie : ...................................................................................................................................... 68




6




Liste des abrviations :

Abrviation Dsignation
API Application Programming Interface
APS Activits Physiques et Sportives
DAO Data Access Objet
DCC Diagramme de Classe de conception
DCP Diagramme de Classes Participantes
EL Expression Language
ENCG Ecole National de Commerce et de Gestion
ENSA Ecole Nationale des Sciences Appliques
ENT Espace Numrique de Travail
EST Ecole Suprieure de Technologie
FPK Facult Polydisciplinaire de Khouribga
FSJES Facult des Sciences juridiques conomiques et Sociales
FST Facult des Sciences et Techniques
FTP File Transfert Protocol
IDE Integrated Development Environment
IHM Interface Homme Machine
JEE Java Entreprise Edition
JSP Java Server Page
JSTL Java Standard Tag Library
MVC Model View Controller
MySQL My Structured Query Language
OMG Object Management Group
OMT Object Modelling Technique
OOSE Object Oriented Software Engineering
PHP Hypertext Preprocessor
SGBD Systme de Gestion de Base de Donnes
SQL Structured Query Language
SSL Secure Sockets Layer
SUAPS Service Universitaire des Activits Physiques et Sportives
UH1 Universit Hassan 1er
UML Unified Modeling Language
UP Unified Process
WYSIWYG What You See Is What You Get
XSS Cross-Site Scripting



7


Liste des figures :

Figure 1 : Effectifs des tudiants par tablissement ................................................................................. 13
Figure 2 : Effectifs des tudiants de l'universit par site......................................................................... 13
Figure 3 : Diagramme de contexte statique .................................................................................................. 20
Figure 4 : Diagramme des cas dutilisations gnral ................................................................................. 22
Figure 5 : Diagramme de squence boite noire du cas dutilisation Crer un compte .......... 24
Figure 6 : Diagramme de squence boite noire du cas dutilisation Sauthentifier ................. 25
Figure 7 : Diagramme de squence boite noire du cas dutilisation Grer son compte ........ 26
Figure 8 : Diagramme du cas dutilisation Sinscrire .......................................................................... 27
Figure 9 : Diagramme de squence boite noire du cas dutilisation Sinscrire ........................ 28
Figure 10 : Diagramme du cas dutilisation Grer ses demandes ................................................. 29
Figure 11 : Diagramme de squence boite noire du cas dutilisation Grer ses demandes . 30
Figure 12 : Diagramme de squence boite noire du cas dutilisation Effectuer une
rservation ..................................................................................................................................... 32
Figure 13 : Diagramme du cas dutilisation Grer les inscriptions ............................................... 32
Figure 14 : Diagramme de squence boite noire du cas dutilisation Grer les
inscriptions ..................................................................................................................................... 33
Figure 15 : Diagramme du cas dutilisation Grer les activits ...................................................... 34
Figure 16 : Diagramme de squence boite noire du cas dutilisation Grer les activits ..... 35
Figure 17 : Diagramme de classe danalyse .................................................................................................. 36
Figure 18 : Larchitecture MVC adopte ........................................................................................................ 39
Figure 19 : Diagramme de package .................................................................................................................. 39
Figure 20 : Diagramme DCP Crer un compte ...................................................................................... 40
Figure 21 : Diagramme DCP Grer les activits ................................................................................... 41
Figure 22 : Diagramme de squence du cas dutilisation Crer un compte ............................. 42
Figure 23 : Diagramme de squence du cas dutilisation Sauthentifier .................................... 43
Figure 24 : Diagramme de squence bote blanche du cas dutilisation Grer son compte 44
Figure 25 : Diagramme de squence bote blanche du cas dutilisation Grer les activits . 46
Figure 26 : Diagramme de classe de conception ........................................................................................ 46
Figure 27 : Diagramme de dploiement ........................................................................................................ 50
Figure 28 : Architecture de Struts 2 ................................................................................................................ 51
Figure 29 : Diagramme de package final ....................................................................................................... 52
Figure 30 : Modle physique de donnes ...................................................................................................... 53
Figure 31 : Page daccueil .................................................................................................................................... 54
Figure 32 : Message derreur .............................................................................................................................. 55
Figure 33 : Le plugin Lightbox 2 en action .................................................................................................... 55
Figure 34 : Liste des vnements ..................................................................................................................... 56
Figure 35 : Exemple dune fiche de dvnement ....................................................................................... 57
Figure 36 : Liste des activits ............................................................................................................................. 58
Figure 37 : Exemple dune fiche dactivit .................................................................................................... 58

8


Figure 38 : Formulaire dinscription pour tudiants ................................................................................ 59
Figure 39 : Formulaire dinscription pour associations .......................................................................... 60
Figure 40 : Menu utilisateur dune association et dun tudiant .......................................................... 61
Figure 41 : Formulaire de rservation ........................................................................................................... 62
Figure 42 : Menu de gestion................................................................................................................................ 62
Figure 43-1 : Formulaire dajout dune activit .......................................................................................... 63





















9


Introduction :

u cours de ces dernires annes, les nouvelles technologies de l'information et de la
communication ont connues un bouleversement marqu par l'apparition de l'Internet
et par sa croissance exponentielle ces annes ont aussi t marques par l'entre en scne
du World Wide Web (les annes 90), lune des applications qui a popularis Internet, et qui a
fait exploser le nombre de ses utilisateurs.
Par consquent, le web suscite l'intrt de la majorit des organisations qui se doivent
d'enrichir leur prsentation via des sites web, et lUniversit Hassan 1er en est une.
En effet, lUniversit veille fournir la meilleure information possible aux internautes,
qu'ils soient lycens, tudiants, enseignants, chercheurs, actifs, en reprise d'activits,
journalistes ou entrepreneurs en mettant a leur disposition un portail web qui compte
aujourdhui plus de 250 pages cran prsentant des informations concernant les tudes, la
recherche, la vie tudiante et lorganisation de lUniversit.
Rcemment, le site vient de senrichir dun Espace Numrique de Travail, qui est le point
dentre unique pour tous les services numriques : affaires estudiantines, cours en ligne,
bibliothque numrique, liens utiles et ce depuis nimporte quel ordinateur connect
Internet accessible tous (tudiants, enseignants-chercheurs, personnels administratifs et
techniques) via une authentification personnalise et scurise, transformant le site en un
portail web de grande envergure.
Cest dans ce cadre que se situe le sujet de notre projet de fin dtudes effectu la Facult
des Sciences et Technique de Settat, sous la tutelle de l'universit Hassan 1
er
, et qui consiste
raliser une application Web pour la gestion du sport au sein de luniversit pour le
Service Universitaire des Activits Physiques et Sportives (SUAPS).
Le SUAPS assure la promotion, l'organisation et l'animation de la pratique sportive ainsi
que la gestion des installations sportives.
La pratique sportive habilite ltudiant :
o Apprendre dvelopper et grer ses potentialits physiques permettant
l'acquisition de comptences dans les APS.

o Contribuer quilibrer sa vie (gestion du stress, sant...).

o Favoriser la convivialit, l'intgration la vie et au travail en quipe, ainsi que la
dmocratie et la citoyennet dans le cadre du mouvement sportif universitaire.

o Le SUAPS organise et manage de nombreuses manifestations et vnements tout
au long de l'anne universitaire : tournois, animations sportives, spectacles,
marathon, confrences . . .


A

10



Le prsent document dcrit en dtail la progression du projet stalant sur cinq chapitres :

o Le premier chapitre introduit le cadre gnral du travail savoir le contexte et la
problmatique que traite ce projet.

o Le second chapitre est consacr la prsentation de ltat des lieux et la
spcification des besoins fonctionnels.

o Le troisime chapitre est consacr la conception gnrale et dtaille de notre
application.

o Le quatrime chapitre expose le travail ralis en dcrivant les technologies
utilises et en prsentant quelques captures dcran de certaines interfaces de
lapplication.

o Le rapport se termine par une conclusion qui tablit le bilan du travail et dresse les
perspectives concernant les voies damlioration de lapplication.


11





Chapitre I : Cadre du projet



Ce premier chapitre est ddi la
prsentation de lorganisme daccueil en
premier lieu, alors quen second lieu il
prcise le cadre gnral du projet.

















12


e prsent projet intitul, Conception et dveloppement dune application de gestion
de sport, est ralis dans le cadre de la prparation dun mmoire de fin dtudes
prsent en vue de lobtention de la licence en gnie informatique de la Facult des
Sciences et Techniques de Settat pour lanne universitaire 2012/2013.
Organisme daccueil :
Universit Hassan 1er :
LUniversit Hassan 1
er
vise conjuguer formation de haut niveau et recherche scientifique
reconnues internationalement en tant une universit pluridisciplinaire de rputation
internationale et acteur majeur du dveloppement de la Rgion et du notre pays.
Appuye sur des laboratoires de recherche dynamiques et pauls par ses partenaires
socio-conomiques multiples, lUH1 se donne les moyens de ses ambitions qui nont quun
objectif : prparer le succs des tudiants dans les dfis de demain.
LUH1 a pour objectif de permettre chacun de ses tudiants de trouver sa voie : choix dun
parcours de formation et / ou de professionnalisation. Pluridisciplinaire, lUH1 offre un
large ventail de champs disciplinaire qui ont pour objectif de former les tudiants sur un
large spectre de connaissance et de comptence et de garder la formation en adquation
avec le march.
Dans un contexte de comptition nationale et internationale, lUH1 forte des ses atouts et
fire de ses valeurs, a dcid de relever le dfis et de sengager dans cette rvolution que
connaissent les Universits marocaines en sinscrivant dans lesprit et les orientations du
plan durgence qui visent la promotion de lexcellence, lamlioration de loffre de
lenseignement, la lutte contre le dcrochage universitaire, la promotion de la recherche,
laccs aux nouvelles technologies et louverture linternational.
Sa mission de production du savoir et de transmission aux gnrations futures, loblige
innover pour mieux apprhender les enjeux et les dfis du XXIme sicle. La multiplication
des outils numriques, la structuration de la recherche scientifique et sa dotation de
moyens pour promouvoir son rayonnement lchelle rgionale, nationale et
internationale, la cration dun centre dinformations et dorientation et lObservatoire
dinsertion des laurats.
Luniversit en chiffres :
Au titre de lanne acadmique 2012-2013, lUniversit Hassan 1er regroupe au sein de ses
diffrents tablissements et structures, de nombreuses comptences qui lui permettent de
vhiculer un enseignement de qualit et des valeurs dans lesquelles le royaume chrifien se
reconnait. Comme une tradition qui se perptue dans le temps, toutes ces structures et
ressources humaines font de lUniversit Hassan 1er lune des meilleures universit du
Maroc.
L

13


LUniversit Hassan 1er cest 19724 tudiants:

o 1202 tudiants lENCG
o 616 tudiants lENSA
o 377 tudiants la EST
o 3824 tudiants la FST
o 9412 tudiants la FSJES
o 4293 tudiants la FPK

Figure 1 : Effectifs des tudiants par tablissement

Effectifs des tudiants par site :

o Site de Settat : 73 %
o Site de Berrechid : 2%
o Site de Khouribga : 25%


Figure 2 : Effectifs des tudiants de l'universit par site

LUniversit Hassan 1er cest 1580 laurats en 2011/2012 :
o 312 laurats de la FST
o 580 laurats de la FSJES
o 306 laurats de la FPK
o 122 laurats de lEST
o 208 laurats de lENCG
o 52 laurats de lENSA

LUniversit Hassan 1er cest 344 Enseignants Permanents :
o 19 enseignants lEST
o 35 enseignants lENCG
o 19 enseignants lENSA
o 147 enseignants la FST
o 80 enseignants la FSJES
o 44 enseignants la FPK


14


Rpartition de leffectif du corps enseignant par Etablissement :
o FST : 43%
o FSJES : 23%
o FPK : 13%
o ENCG : 10%
o ENSA : 6%
o EST : 5%

LUniversit Hassan 1er cest 260 Administratifs :
o 63 administratifs rattachs la prsidence
o 42 administratifs rattachs la FSJES
o 63 administratifs rattachs la FST
o 34 Administratifs rattachs lENCG
o 19 Administratifs rattachs la FPK
o 14 administratifs rattachs lEST
o 25 administratifs rattachs lENSA

Facult des Sciences et Techniques de Settat :
Cre en 1994 et initialement dpendante de lUniversit Chouaib Doukkali, la Facult des
Sciences et Techniques de Settat (FSTS) est un tablissement universitaire caractre
scientifique et technique, qui fait partie de l'Universit Hassan 1
er
et propose une formation
solide dans les diffrents domaines des sciences et techniques.
Elle a pour mission :
o La formation Universitaire dans les domaines scientifiques et techniques.

o La formation continue des cadres techniques des industries environnantes.

o La recherche applique et les tudes relatives des thmes prioritaires pour le
dveloppement de lconomie rgionale et nationale.

Elle a comme orientation stratgique :

o Le renforcement des activits de recherche par la structuration du Centre de
recherche de la FST et la cration de laboratoires de recherche.

o La mise en place dun centre de formation continue.

o La mise en uvre de la rforme pdagogique universitaire avec le systme LMD.


15


o Ladoption dune politique dinvestissement intense dans le domaine des systmes
dinformation et des nouvelles technologies ducatives.

Cet tablissement est destin sintgrer dans le ple technologique et industriel des villes
de Casablanca, Settat et Berrechid, pour tre, une ppinire de techniciens et de cadres de
haut niveau.
Cadre gnral du projet :
Problmatique :
Le site internet de lUniversit compte aujourdhui plus de 250 pages web, mais ne contient
aucun espace rserv au sport rendant ainsi la tche de sinformer sur les actualits et les
activits sportives pratiqus dans son enceinte difficile.
En ce jour luniversit, le suivi et l'identification des inscriptions aux activits et
lvnement est encore manuel, ce qui occasionne de la lenteur dans le travail, la possibilit
de perte de certaines informations importantes lies aux tudiants, ainsi que la mauvaise
conservation des donnes sur des papiers et cahiers exposs l'usure ou aux intempries.
Luniversit dispose dinstallations sportives qui pourrait tre mis a disposition au profit
des associations tudiantes externes afin de pratiquer leurs activits ou organiser des
vnements et ceci pourra se faire grce un systme de rservation lui permettant ainsi
de contribuer au dveloppement du sport, non seulement lintrieur de luniversit, mais
galement a lextrieur.
Travail demand :
Le travail demand consiste concevoir et implmenter une application web permettant
de pallier aux diffrents problmes recenss.
Le travail demand se rsume ainsi dans les fonctionnalits suivantes :
Offrir lutilisateur une interface dinscription et de suivi de ses demandes.
Scuriser lchange dinformations grce un systme dauthentification.
Mettre disposition les informations sur les activits et les vnements.
Informatiser la gestion du service en fournissant un ensemble doutils de gestion via une
interface web.
Mthodologie adopte :
Dans notre tude nous avons choisi de concevoir notre systme d'information avec le langage de
modlisation UML (Unified Modeling Language) en utilisant la dmarche UP (Unified Process)
comme mthode de dveloppement.

16


Prsentation de lUML :
Face la diversit des formalismes utiliss par les mthodes d'analyse et de conception
objet, UML (Unified Modified Language langage de modlisation objet unifi ) reprsente
un rel facteur de progrs par l'effort de normalisation.
En effet, UML est issu de la fusion de trois mthodes qui ont le plus influenc la
modlisation objet au milieu des annes 90 : Booch Grady Booch, OMT (Object Modelling
Technique) de James Rumbaugh et OOSE (Object Oriented Software Engineering) d'Ivar
Jacobson. UML est prsent un standard dfini par l'OMG (Object Management Group).
L'UML est un langage graphique de modlisation des donnes et des traitements, fond sur
des concepts orients objets. UML 2.0 propose de dcrire un systme l'aide de 13
diagrammes repartis en deux grands groupes, on cite parmi ces diagrammes et notamment
ceux que dans notre travail ont t amens effectuer :
Diagrammes structurels :
- Diagrammes de classes : Ils contiennent un ensemble de classes ainsi que leurs relations.
L'intrt majeur de ce diagramme est de reprsenter les entits du systme d'information.
- Diagrammes de paquetages : Ils sont utiliss pour divis un modle en terme de
conteneurs logiques ou packages, ils permettent aussi de dcrire les interactions entra
packages.
-Diagrammes de dploiement : Ils montrent les la disposition physique et matrielle conue
pour hberger et dployer la solution.
Diagrammes comportementaux :
- Diagrammes de cas d'utilisation : Ils sont utiliss pour modliser les interactions entre
lutilisateur et le systme. Ils dfinissent le comportement et les besoins sollicits.
- Diagrammes de squence : Ils montrent des interactions entre objet selon un point de vue
temporel. Gnralement ces diagrammes dfinissent les objets acteurs et le systme.
Prsentation dUP :
La mthode est dfinie comme l'ensemble des rgles pour conduire raisonnablement,
logiquement nos pens ou encore la voie suivre pour atteindre le but qu'on s'est fix.
Unified Processus est une mthode de dveloppement logiciel :
Itratif et incrmental : le projet est dcoup en itrations de courte dure qui aident
mieux suivre lavancement global. la fin de chaque itration, une partie excutable du
systme final est produite, de faon incrmentale.
Centr sur larchitecture : tout systme complexe doit tre dcompos en parties
modulaires afin de garantir une maintenance et une volution facilites. Cette architecture

17


(fonctionnelle, logique, matrielle, etc.) doit tre modlise en UML et pas seulement
documente en texte.
Pilot par les risques : les risques majeurs du projet doivent tre identifis au plus tt,
mais surtout levs le plus rapidement possible. Les mesures prendre dans ce cadre
dterminent lordre des itrations.
Conduit par les cas dutilisation : le projet est men en tenant compte des besoins et des
exigences des utilisateurs. Les cas dutilisation du futur systme sont identifis, dcrits avec
prcision et prioriss.
Conclusion
Aprs avoir prsent le cadre gnral de notre projet, et noncer la problmatique ainsi
que le travail demand, nous allons dans ce qui suit entamer une tude de lexistant pour
mieux comprendre le cadre et lenvironnement du projet.









18




Chapitre II : Spcification et analyse des
besoins


Dans ce chapitre, une spcification et
une analyse dtaille de lensemble
des besoins que la nouvelle application
doit satisfaire.









19


e but atteindre dans notre projet est la ralisation d'un site web dynamique pour le
SUAPS, adress aux au tudiant et aux associations, regroupant des contenus pluri-
mdias (vidos, photos, articles, etc...) sur les activits sportifs et vnements concernant
luniversit ainsi que leur gestion.
Spcification des besoins :
Mise disposition dinformations sur les activits sportives et vnements
proposes :
Tout internaute a la possibilit de naviguer sur le site et consulter les diffrentes activits
et vnement proposes par le service ainsi que le tlchargement de documents
Authentification :
Ltudiant qui souhaite sinscrire a une activit sportive ou a un vnement doit se
connecter sil possde dj un compte, ou en crer un sinon.
Les associations tudiantes qui veulent inscrire des membres ou bien rserver une
installation sportive, doivent aussi sauthentifier.
En ce qui concerne ladministration, lapplication devra permettre ladministrateur la :
Gestion des inscriptions.
Gestion de lvnementiel.
Gestion des rservations.
Gestion des activits.
Gestion des utilisateurs.
Gestion des actualits.
Dfinition des acteurs :
Un acteur reprsente un ensemble cohrent de rles jous par des entits externes
(utilisateur humain, matriel ou autre systme) qui interagissent directement avec le
systme tudi et pouvant consulter ou modifier directement l'tat du systme en mettant
et/ou recevant des messages susceptibles d'tre porteur de donnes.
Dans le cadre de notre application on a recens les acteurs suivants :
Visiteur : considr comme une personne qui veut naviguer sur le site et satisfaire sa
curiosit. Elle visite le site pour sinformer sur les vnements et les activits sportives
proposes et ventuellement sy inscrire.

L

20


Utilisateur : reprsente les tudiants et les associations qui souhaitent bnficier des
services du site et accder a ses fonctionnalits avances :
Un tudiant peut :
Envoyer des demandes dinscriptions et faire leur suivi.
Grer son compte.
Une association peut :
Envoyer des demandes dinscription et faire leur suivi.
Envoyer des demandes de rservation pour les installations sportives.
Administrateur : personne qui a pour rle principal de grer toutes les fonctionnalits
administratives du site a travers des interfaces appropries, il peut :
Accepter ou refuser les demandes d'inscription et les rservations.
Ouvrir ou fermer les inscriptions pour une activit ou vnement.
Ajouter, modifier ou supprimer :

Une activit
Un vnement
Une actualit
Un utilisateur
Besoins fonctionnels :
Ce paragraphe vise la capture des besoins fonctionnels en dfinissant les exigences par
acteur puis en proposant une reprsentation gnrale des cas dutilisation.
Diagramme de contexte :
Le diagramme de contexte est un outil nous permettant d'avoir une vision globale des
interactions entre les activits et les liens vis--vis de l'extrieur. Il permet galement de
bien dlimiter le champ d'tude

Figure 3 : Diagramme de contexte statique
Dfinition des cas dutilisations :

21


En analysant les besoins exprims dans le cahier des charges, nous avons dduit les cas
d'utilisations suivants :
Acteur Cas d'utilisation
Visiteur
Crer un compte
Naviguer
Association
Grer son compte
Effectuer une rservation
S'inscrire
S'authentifier
Grer ses demandes
Etudiant
S'inscrire
Grer ses demandes
S'authentifier
Grer son compte
Administrateur
Grer les rservations
Grer les inscriptions
Grer les utilisateurs
Grer les vnements
Grer les activits
Grer les actualits
S'authentifier

Tableau 1 : Tableau des cas dutilisations par acteur
Besoins non fonctionnels :
Les besoins non fonctionnels reprsentent les exigences implicites auquel le systme doit
rpondre. Parmi ces besoins on cite :
Scurit :
Le mot de passe contient 8 caractres alphanumriques minimum avec
diffrenciation entre majuscules et minuscules
Hachage du mot de passe en utilisant un algorithme SHA-1
Dconnexion aprs temps morts dinactivit
Protection contre les injections SQL et les failles XSS
Vrification de la validit du format des numros de tlphone et des adresses
lectroniques fournies
Ergonomie :
Le systme doit tre simple utiliser
Le dplacement entre les pages doit tre souple et facile
Le systme doit assurer une bonne interface qui donne aux administrateurs et aux
internautes l'envie d'y visiter

22


Fiabilit :
Lapplication doit tre compatible avec tous les navigateurs internet.
Diagramme des cas dutilisations global :
Dans le diagramme du cas dutilisation global on regroupe tous les cas dutilisation de base
afin davoir une vue globale du fonctionnement de notre systme et afin de mettre en
vidence les ventuels relations qui peuvent les lier.


Figure 4 : Diagramme des cas dutilisations gnral
Aprs avoir expos le diagramme du cas dutilisation gnral nous allons aborder avec plus
de dtails les cas dutilisation les plus pertinents.

23


Analyse des cas dutilisation :
Crer un compte :
Description du cas dutilisation:
Titre: Crer un compte
Acteur: Visiteur
Description: Le visiteur souhaite possder un compte pour sinscrire une activit ou un
vnement
Pr-condition: /
Post-condition: Un compte utilisateur est cr
Nominal:
1. Le visiteur demande la cration d'un compte
2. Le systme affiche un formulaire d'inscription
3. Le visiteur soumet les informations
4. Le systme affiche un message de validation

Alternatif: /
Exception:
4.1. Le visiteur est dj enregistr
4.2. Le systme affiche un message d'erreur

Diagramme de squence (bote noire) :


24



Figure 5 : Diagramme de squence boite noire du cas dutilisation Crer un compte
Sauthentifier :
Description du cas dutilisation:
Titre: Sauthentifier
Acteur: Visiteur
Description: Le visiteur souhaite sauthentifier pour sinscrire une activit ou un
vnement
Pr-condition: Le visiteur doit possder un compte utilisateur
Post-condition: Le visiteur est reconnu par le systme en tant quutilisateur
Nominal:
1. Le visiteur demande de s'identifier
2. Le systme affiche le formulaire d'authentification
3. Le visiteur soumet son login et son mot de passe.
4. Le systme affiche la page qui tait affiche avant que le visiteur demande de s'authentifier

Alternatif:
2.1 Le visiteur n'a pas de compte
2.1.1 Le visiteur demande la cration d'un compte

25



Exception:
3.1 Les informations soumises par le visiteur sont incorrectes
3.2 Le systme affiche la page de login avec un message d'erreur

Diagramme de squence (bote noire) :

Figure 6 : Diagramme de squence boite noire du cas dutilisation Sauthentifier

Grer son compte :
Description du cas dutilisation:
Titre: Grer son compte
Acteur: Utilisateur
Description: Lutilisateur souhaite modifier les informations de son compte
Pr-condition: Lutilisateur est authentifi

26


Post-condition: Les informations de lutilisateur sont modifies
Nominal:
1. Le visiteur demande l'accs aux informations de son compte
2. Le systme affiche un formulaire avec les informations de son compte
3. Le visiteur soumet les nouvelles informations de son compte
4. Le systme raffiche un formulaire avec les informations de son compte mises jour

Alternatif: /

Exception:

3.1 Les informations soumises par lutilisateur sont incorrectes
3.2 Le systme affiche un formulaire avec les informations de son compte et un message
d'erreur

Diagramme de squence (bote noire) :

Figure 7 : Diagramme de squence boite noire du cas dutilisation Grer son compte


27


Sinscrire :

Figure 8 : Diagramme du cas dutilisation Sinscrire

Description du cas dutilisation:
Titre: Sinscrire
Acteur: Utilisateur
Description: Lutilisateur souhaite sinscrire une activit ou un vnement
Pr-condition: Lutilisateur doit tre authentifi
Post-condition: Une demande dinscription est envoye
Nominal:
1. Lutilisateur demande l'accs aux informations de lactivit ou de lvnement
2. Affiche les informations relatives l'activit ou l'vnement
3. Lutilisateur choisit de sinscrire
4. Le systme affiche un message de validation confirmant que sa demande dinscription a
t envoye

Alternatif: Si lutilisateur est une association.
4.1. Le systme affiche un formulaire qui permet dajouter des membres linscription
4.2. Lutilisateur soumet les informations sur les participants
4.3. Le systme affiche un message de validation

28



Exception:

4.2.1 Les informations soumises par lutilisateur sont incorrectes
4.2.2 Le systme raffiche le formulaire avec un message d'erreur

Diagramme de squence (bote noire) :

Figure 9 : Diagramme de squence boite noire du cas dutilisation Sinscrire

29


Grer ses demandes :

Figure 10 : Diagramme du cas dutilisation Grer ses demandes

Description du cas dutilisation:
Titre: Grer ses demandes
Acteur: Utilisateur
Description: Lutilisateur veut consulter ou annuler une demande
Pr-condition: Lutilisateur est authentifi
Post-condition: Affichage ou suppression dune demande
Nominal:
1. Lutilisateur demande d'accder la gestion des demandes
2. Le systme retourne la liste des demandes dinscription
3. Lutilisateur choisit de consulter une demande
4. Le systme affiche la fiche de la demande

Alternatif:
2.1. Le systme retourne la liste des demandes dinscription et de rservation si lutilisateur
est une association
3.1.1 Lutilisateur choisit de supprimer une demande
3.1.2 Le systme affiche la liste des demandes mise jour

30



Diagramme de squence (bote noire) :

Figure 11 : Diagramme de squence boite noire du cas dutilisation Grer ses demandes

Effectuer une rservation :
Description du cas dutilisation:
Titre: Effectuer une rservation
Acteur: Association
Description: Lassociation souhaite rserver une installation sportive
Pr-condition: Lassociation est authentifie
Post-condition: Demande de rservation envoye.
Nominal:
1. Lutilisateur demande deffectuer une rservation
2. Le systme affiche le formulaire de rservation

31


3. Lutilisateur remplit le formulaire et le soumet
4. Le systme affiche un message de validation

Alternatif: /

Exception:

4.1.1 Les informations soumises par lutilisateur sont incorrectes
4.1.2 Le systme raffiche le formulaire avec un message d'erreur

Diagramme de squence (bote noire) :





32


Figure 12 : Diagramme de squence boite noire du cas dutilisation Effectuer une
rservation

Grer les inscriptions :


Figure 13 : Diagramme du cas dutilisation Grer les inscriptions

Description du cas dutilisation:
Titre: Grer les inscriptions
Acteur: Administrateur
Description: Ladministrateur peut valider ou refuser une demande dinscription
Pr-condition: Ladministrateur est authentifi
Post-condition: Une inscription est valide ou refuse.
Nominal:

1. Ladministrateur demande d'accder la gestion des inscriptions
2. Le systme retourne la liste des inscriptions
3. Le manager choisit de valider une inscription
4. Le systme affiche la liste des inscriptions mise jour


33


Alternatif:
3.1. Le manager choisit de refuser une inscription

Exception:/

Diagramme de squence (bote noire) :

Figure 14 : Diagramme de squence boite noire du cas dutilisation Grer les
inscriptions
Grer les activits :


34



Figure 15 : Diagramme du cas dutilisation Grer les activits

Description du cas dutilisation:
Titre: Grer les inscriptions
Acteur: Administrateur
Description: Ladministrateur peut valider ou refuser une demande dinscription
Pr-condition: Ladministrateur est authentifi
Post-condition: Une inscription est valide ou refuse.
Nominal:

1. Ladministrateur demande d'accder la gestion des activits
2. Le systme retourne la liste des activits
3. Ladministrateur demande l'ajout d'une nouvelle activit
4. Le systme affiche le formulaire de saisie d'une activit
5. Ladministrateur soumet les informations
6. Le systme affiche la liste des activits

Alternatif:
3.1.1 Ladministrateur choisit de modifier une activit
3.1.2 Le systme affiche le formulaire de modification de lactivit
3.1.3 Ladministrateur soumet les modifications
3.1.4 Le systme affiche la fiche de lactivit modifie

35



3.2.1 Ladministrateur choisit de supprimer une activit
3.2.2 Le systme affiche la liste des activits

Exception:/
Diagramme de squence (bote noire) :


Figure 16 : Diagramme de squence boite noire du cas dutilisation Grer les activits
Diagramme de classe danalyse :
Le diagramme de classes est un schma utilis en gnie logiciel pour prsenter les classes
et les interfaces d'un systme ainsi que les diffrentes relations entre celles-ci.

36




Figure 17 : Diagramme de classe danalyse
Conclusion :
Dans ce chapitre on a dtaill les spcifications et les besoins du projet. Il sest prsent
comme tant le cahier des charges de l'application concevoir et dvelopper, il prsente
aussi une partie analytique oriente objet qui prcde la phase de conception.

37





Chapitre III : Conception


La ralisation d'un site dynamique
doit tre imprativement prcde
d'une mthodologie de conception
permettant un aperu global de
l'application et offrant une vision
claire des diffrents lments de
l'application ainsi que l'interaction
entre ces derniers.








38


e chapitre sera consacr la conception du systme. Nous prsentons, en premier lieu,
son architecture gnrale afin den extraire les diffrents modules qui le composent.
Puis, nous dtaillons chacun de ces modules conformment la notation UML, en
prsentant les vues statiques dcrivant ltat physique du systme via le diagramme de
package et des diagrammes de classe, et les vues dynamiques montrant le fonctionnement
du systme via des diagrammes de squences.
Nous allons dans ce qui suit prsenter larchitecture gnrale de notre systme et dgager
les diffrents modules qui le composent.
Architecture de lapplication :
Dans les phases prliminaires du dveloppement dune application, la dfinition de
larchitecture technique consiste faire les choix de technologies et dorganisation de
composants logiciels.
Ces choix sont ensuite relays au sein de notre projet, guidant la conception et permettant
la transformation dun modle fonctionnel en application performante et robuste.

Larchitecture MVC (Modle Vue Contrleur), est une architecteur qui permet de sparer
une application en trois couches :

La couche Vue : elle correspond lIHM. Elle prsente les donnes et interagit avec
lutilisateur.

La couche Contrleur : rpond des interactions utilisateurs en provenance de la couche
Vue, en appelant des traitements mis disposition sous forme de mthode par la couche
Modle, afin de nourrir la vue associe au traitement demand par lutilisateur.

La couche Modle : elle reprsente les rgles mtiers et les donnes, elle est constitue
de :

La couche mtiers : elle implmente la logique mtier de lapplication, ce sont ses
objets qui vont collaborer entre eux pour raliser les fonctionnalits attendue du
systme.

La couche DAO : elle a pour but de transformer les donnes contenues dans une
base de donnes en objets et inversement.

La couche mtier n'a connaissance que des interfaces dcrivant les objets de la couche
donnes. Ainsi, peu importe le systme de stockage final utilis, du point de vue du code
mtier les mthodes appeler ne changent pas, elles seront toujours celles dcrites dans
l'interface. C'est uniquement l'implmentation qui sera spcifique au mode de stockage.

C

39




Figure 18 : Larchitecture MVC adopte
Larchitecture MVC peut se rvler lourde mettre en place cause de la multitude de
contrleur implmenter. Afin de simplifier la ralisation dun tel modle, une nouvelle
version a t introduite : le MVC2. Cest exactement le mme modle de conception la
diffrence quil ny a plus quun seul contrleur qui se charge de rediriger la requte vers le
bon traitement.
Nous avons choisi MVC2 comme architecture pour notre application.
Conception dtaill :
Dans cette partie nous allons entrer dans les dtails conceptuels de notre application.
Diagramme de package :



Figure 19 : Diagramme de package

40


On prsente ici les packages correspondant aux couches applicatives.
Le package web correspond la couche vue de l'application, on trouve dans le package
action les classes dactions qui permettent de grer les vue.
Le package service correspond la couche mtier de l'application, on y trouve les
classes qui permettent de raliser le code mtiers de l'application.
Le package dao correspond la couche d'accs aux donnes, on y trouve les interfaces
qu'il faut implmenter pour raliser la persistance des donnes ainsi que leur
implmentation dans le package impl .

Diagramme des classes de participantes :
Le diagramme de classes participantes est important puisquil effectue la jonction entre,
dune part, les cas dutilisation, les modles de la couche mtiers et linterface avec
lutilisateur. Il semble particulirement important pour guider la phase de production du
livrable final.



Figure 20 : Diagramme DCP Crer un compte


41



Figure 21 : Diagramme DCP Grer les activits

Diagrammes de squence:
Crer un compte :
Un visiteur peut crer soit un compte tudiant soit un compte association, on a choisit de
reprsenter que le premier cas afin dallger le diagramme.

42




Figure 22 : Diagramme de squence du cas dutilisation Crer un compte

Sauthentifier :


43



Figure 23 : Diagramme de squence du cas dutilisation Sauthentifier

Grer son compte :


44




Figure 24 : Diagramme de squence bote blanche du cas dutilisation Grer son compte
Le mme traitement sera fait pour lacteur association, on a prfrer ne pas le reprsenter
pour allger le diagramme.

Grer les activits :


45




46


Figure 25 : Diagramme de squence bote blanche du cas dutilisation Grer les activits

Diagramme de classes de conception:
Figure 26 : Diagramme de classe de conception



Conclusion
Dans ce chapitre nous avons dtaill la conception de notre application. Nous avons
commenc par dfinir larchitecture gnrale de notre plateforme que nous avons par la
suite aborde avec plus de dtail en prsentant la vue dynamique via les diagrammes de
squences illustrant quelques cas dutilisation ainsi que les vues statiques via le diagramme
de package et les diagrammes de classes de conception.
















47






Chapitre IV : Ralisation

Aprs avoir vu la conception dtaille du
systme raliser ainsi que les principaux
modules le constituant, on aborde dans le
prsent chapitre la mise en uvre de ces
modules.

















48


ans ce paragraphe nous allons prsenter la ralisation par rapport au produit final en
dcrivant lenvironnement de travail et les technologies utilises pour la mise en place
de notre application.
Enfin, nous prsentons quelques captures dcran de lapplication ralise.
Environnement matriel et logiciel :
Dans ce paragraphe, nous prsentons la configuration matrielle et logicielle que nous
avons exploit et nous prsentons les choix technologiques en les justifiant.
Environnement Matriel :
Pour dvelopper lapplication, nous avons utilis comme environnement matriel deux
ordinateurs :

Un ordinateur SONY VAIO qui possde comme caractristiques :

Un processeur Intel Pentium Core i3 350M, 2.27 GHz.
Une mmoire vive de 3Go.
Un disque dur 320 Go.
Un cran 15,5 pouces.

Un ordinateur DELL LATITUDE qui possde comme caractristiques :

Un processeur Intel Pentium Core i7 2620M 2x 2.70GHz
Une mmoire vive de 8Go.
Un disque dur 500 Go.
Un cran 15,6 pouces.

Choix de la plateforme de dveloppement :
Le bon choix de la plateforme de dveloppement influe imprativement sur les
performances des produits dvelopps.
JAVA EE est une plateforme de dveloppement performante et facilement exploitable qui
est portable, et prsente plusieurs avantages savoir :
Riche : plusieurs API pour lusage des services web.
Innovante : limplmentation est libre ce qui favorise la comptition entre diteurs.
Soutenue par plusieurs gants de linformatique (Sun, IBM, BEA. . .).
Tous ces avantages, nous ont amenes opter pour JEE comme plateforme de dveloppement.
D

49


Environnement logiciel :
Aprs avoir fait le choix de JEE nous avons utilis les outils suivant pour le dveloppement
des diffrentes parties de lapplication :
Eclipse Juno :
Eclipse est un environnement de dveloppement intgr (IDE) open source pour Java EE.
Apache Tomcat 7.0 :
Tomcat est le conteneur libre de servlets et JSP de lApache Software Foundation, il
implmente la norme Java EE 6 et recouvre les spcifications Servlet 3.0, JSP 2.2 et EL 2.2.
Il est paramtrable par des fichiers XML et de proprits, et inclut des outils pour la
configuration et la gestion.
JSTL 1.2 :
La Java Standard Tag Library un composant de la plate-forme JEE de dveloppement. Elle
tend la spcification JSP en ajoutant une bibliothque de balises pour les tches courantes,
comme le travail sur des fichiers XML, l'excution conditionnelle, les boucles et
l'internationalisation.
La JSTL, en tant que bibliothque de balises JSP, propose de dvelopper une page JSP sans y
utiliser de code Java directement, elle utilise ainsi une syntaxe proche des langages utiliss
par les web designers (HTML ou XHTML) ce qui permet, dune part de concevoir des pages
dynamiques complexes sans connaissances pralable du langage Java, dautre part de
respecter la logique MVC .
phpMyAdmin 3.5.1 :
phpMyAdmin est une application web crite en PHP et qui permet de grer un serveur de
bases de donnes MySQL.
Cette interface pratique permet d'excuter de nombreuses requtes et est trs pratique
pour sauvegarder une base de donnes sous forme de fichier .sql et ainsi transfrer
facilement ses donnes. De plus celle-ci accepte la formulation de requtes SQL
directement en langage SQL.
MySQL 5.5.24 :
MySQL est un Systme de Gestion des Bases de donnes Open Source trs rapide, robuste
et multiutilisateur. Le serveur MySQL supporte le langage de requtes SQL, langage
standard de choix des SGBD modernes. Il est facilement accessible en rseaux et supporte
des connexions scurises grce au protocole SSL. La portabilit du serveur MySQL lui
permet de s'excuter sur toutes les plateformes et d'tre intgr plusieurs serveurs web
Dreamweaver CS6 :

50


Dreamweaver est un diteur de site web WYSIWYG permettant la conception des pages
web. Il est commercialis par Macromedia puis Adobe Systems sous licence utilisateur
final.
La partie Editeur de code du logiciel permet la modification rapide du contenu des pages,
de leur mise en forme, de l'insertion d'images, de liens ou d'autres lments habillant la
page Web.
La partie Gestion du site permet d'organiser tous les fichiers composant le site et de les
publier sur le serveur distant via un client FTP pour qu'ils soient accessibles via Internet.
PowerAMC 15 :
PowerAMC est un logiciel de conception dvelopp par Sysbase, qui permet de modliser
les traitements informatiques et leurs bases de donnes associes, il permet de travailler
avec la mthode Merise et gre tous les diagrammes UML 2.0.
Nous dcrivons l'implantation physique de notre application grce au diagramme de
dploiement propos par lUML.


Figure 27 : Diagramme de dploiement
Framework utilis :
Un framework est un ensemble de bibliothques, doutils et de rgles suivre, qui aident au
dveloppement dapplications. Il est constitu de plusieurs composants qui sont en
interaction les uns avec les autres.

51


Les applications peuvent tre crites de manire plus efficace si nous utilisons un
framework adapt au projet au lieu dtre oblig de rinventer chaque fois la roue.
Pour une application base sur larchitecture MVC2 et sur la plateforme J2EE, le framework
Struts se rvle trs adapt, on a choisit de travailler avec son successeur : Struts 2.

Apache Struts est un Framework libre pour dvelopper des applications web J2EE. Il utilise
et tend l'API Servlet Java afin d'encourager les dveloppeurs adopter l'architecture
Modle-Vue-Contrleur. Struts permet la structuration d'une application Java sous forme
d'un ensemble d'actions reprsentant des vnements dclenchs par les utilisateurs de
l'application. Ces actions sont dcrites dans un fichier de configuration de type XML,
nomm struts.xml, dcrivant les cheminements possibles entre les diffrentes actions.
Le contrleur est le cur de lapplication. Toutes les demandes du client transitent par lui.
C'est une servlet fournie par le Framework elle prend les informations dont elle a besoin
dans le fichier struts.xml.
Avant de donner la main la classe d'action, Struts 2 lance les intercepteurs adquats.

Un intercepteur est une classe Java qui utilise les mthodes init () et destroy () ainsi que
intercept (). Il permet de faire des pr/post vrifications sur la requte, et excute la
mthode de traitement (execute () par dfaut), titre d'exemple Struts 2 utilise :

-L'intercepteur fileUpload afin de grer l'upload des fichiers vers le serveur, et
TockenInterceptor pour le double clic.

- Lintercepteur params qui assigne les valeurs prsentes dans la requte la classe
daction associe par lintermdiaire de ses accesseurs

- Lintercepteur validation pour soccuper de la validation des paramtres reus, pour
cela il consulte le fichier de validation concernant la classe daction, ce fichier est de la
forme NomClasseActionvalidation.xml



Figure 28 : Architecture de Struts 2

52


1) Le client envoie des requtes partir dURLs adaptes. Il peut ventuellement envoyer
des paramtres dans lURL ou par lintermdiaire dun formulaire de saisie.
2) Struts consulte son fichier de configuration struts.xml afin de retrouver la configuration
de laction.
3) Chaque intercepteur associ laction est dclench.
4) La vue afficher est slectionne en accord avec le fichier de configuration struts.xml
5) La classe daction transmet les donnes ncessaires la vue.
6) La vue affiche au client les rsultats traits.



Figure 29 : Diagramme de package final
Implmentation de la base de donnes :
Pour implmenter la base de donnes, noua avons fait recours au logiciel Sybase
PowerAMC qui nous a permis de crer le diagramme de classe rcapitulatif partir duquel
la gnration d'un modle physique de donnes est possible. Le modle physique de
donnes reflte le schma de la base de donnes relationnelle en fournissant la structure
de ses tables. Enfin, la gnration d'un fichier portant l'extension SQL afin que nous
puissions l'excuter pour l'obtention de toutes les tables de la base de donnes.
servi ce
modl e
dao
i mpl
<<struts 2>>
struts 2
web
vue acti on

53


La gnration automatique d'un fichier SQL contenant toutes les instructions de la cration
des tables, ainsi, l'implmentation rapide de la base de donnes reprsente un avantage
majeur de Sybase PowerAMC.
De plus, l'utilisation de phpMyAdmin nous a facilit normment la tache de gnration de
la base de donnes MySQL puisque ce dernier joue le rle d'une interface de manipulation
des tables, vues, requtes etc. Ainsi, il fournit un diteur de requte SQL permettant
l'excution du fichier SQL contenant les instructions ncessaires pour la cration de la base
de donnes relationnelles.
Modle Physique de Donnes :
Le modle physique de donne offre une vue complte sur la structure des tables de la base
de donne, ainsi il nous offre la possibilit de gnrer un fichier SQL contenant toutes les
instructions ncessaire pour la cration de la base de donnes relationnelles.

Figure 30 : Modle physique de donnes

Principales interfaces graphiques
La conception des interfaces de lapplication est une tape trs importante puisque toutes
les interactions avec le cur de lapplication passent travers ces interfaces, on doit alors
guider lutilisateur avec les messages derreurs et de notification si besoin, ainsi prsenter
un systme complet.
Nous allons prsenter dans cette section le travail ralis dans le cadre de ce projet par
l'intermdiaire de captures crans de quelques pages de notre application Web.
Page daccueil :

54






Figure 31 : Page daccueil
La page daccueil est compose principalement d :

55


Une diapositive permettant de dfiler un aperu sur les activits pratiques au sein de
luniversit. Il a t ralis grce NivoSlider, un plugin slider pour jQuery ,.
Un calendrier JavaScript permettant de mettre en avant les dates importantes tel que les
dates o les installations sont rserves et les dates dun vnement.
Une interface dauthentification qui permet lutilisateur de sauthentifier et de se
connecter au serveur de la base de donnes. Lutilisateur doit entrer son login et son mot
de passe pour accder lapplication. En cas derreur un message dalerte saffiche


Figure 32 : Message derreur
Pour faciliter la navigation dans les gallries photos on a utilis Lightbox 2 qui est un plugin
lightbox pour jQuery et qui permet de parcourir les images en restant sur la mme page.

Figure 33 : Le plugin Lightbox 2 en action


56


Navigation :
On prsente ici quelques une des interfaces que le visiteur du site peut consulter :


Figure 34 : Liste des vnements

57



Figure 35 : Exemple dune fiche de dvnement



58


Figure 36 : Liste des activits



Figure 37 : Exemple dune fiche dactivit

Cration dun nouveau compte :
Chaque visiteur du site qui veut s'inscrire il doit remplir les champs du formulaire qui
saffichera selon le type du compte quil veut crer

59




Figure 38 : Formulaire dinscription pour tudiants





60


Figure 39 : Formulaire dinscription pour associations

61



Une fois authentifi, un menu remplacera la zone dauthentification et les utilisateurs
pourront accder aux fonctionnalits prives.

Figure 40 : Menu utilisateur dune association et dun tudiant
Une association pourra accder au formulaire de rservation.


62



Figure 41 : Formulaire de rservation
Menu de gestion :
Une fois authentifi, ladministrateur aura accs aux fonctionnalits administratives de
lapplication grce au menu de gestion :


Figure 42 : Menu de gestion

Ajout dune activit :
Ladministrateur peut ajouter une activit en cliquant sur bouton Ajouter une activit
de la page gestion dactivit; un formulaire comportant plusieurs champs saffiche pour
lentre des donnes. Lapplication gre le contrle de saisie ainsi que la sauvegarde dans
les bases des donnes.


63



Figure 43-1 : Formulaire dajout dune activit
La saisie des dates dans toute lapplication sera gre par un calendrier qui apparat quand
lutilisateur clique sur le champ de saisie.

64



Figure 43-2 : Formulaire dajout dune activit

Le formulaire permet aussi lajout dynamique des champs de saisie pour ajouter les
horaires

65




66


Figure 43-3 : Formulaire dajout dune activit

Conclusion :
Nous avons vu dans ce chapitre les environnements logiciel et matriel sur lesquels sest
bas notre travail. Nous avons justifi les choix considrs pour aboutir la ralisation de
la nouvelle application et enfin, nous avons prsent quelques captures dcran.
Nous prsentons dans ce qui suit la conclusion gnrale.






















67


Conclusion gnral

Lobjectif de notre projet de fin dtude tait de concevoir et implmenter une application de
gestion du sport au sein dune universit.
Le point de dpart de la ralisation de ce projet tait une rcolte des informations ncessaires
pour dresser un tat de lexistant, prsenter un aperu sur la problmatique.
Par la suite, nous nous sommes intresss lanalyse et la spcification des besoins qui nous a
permis de distinguer les diffrents acteurs interagissant avec lapplication vise.
Lobjectif de la partie suivante tait la conception dtaille, dans laquelle nous avons fix la
structure globale de lapplication.
Le dernier volet de notre projet tait la partie ralisation qui a t consacre la prsentation des
outils du travail et les interfaces les plus significatives de notre application.
Ce projet a fait l'objet d'une exprience intressante, qui nous a permis d'amliorer nos
connaissances et nos comptences dans le domaine de la programmation et nous a permis
dapprendre et de toucher du doigt une partie de divers aspects du travail du dveloppeur et de
celui du concepteur.
En effet, la ralisation de ce projet nous a permis :
De mieux manipuler les langages JAVA, HTML, MYSQL et Java Script
De suivre une mthodologie de travail bien tudi
Dapprofondir nos connaissances dans le monde de dveloppement des applications
Dassimiler le paradigme MVC/MVC2 et de bien nous exercer sur le Framework
Struts 2
Parmi les voies damlioration possibles pour notre application :
Ajout de la gestion de la persistance de donnes grce au Framework Hibernate.
Intgration de lapplication LEspace Numrique de Travail de lUniversit
Nous laissons le libre arbitre toutes personnes qui se sentiraient intresses de traiter
encore davantage ce sujet en vue d'une quelconque amlioration.





68


Bibliographie :

Ouvrages et publications :
[Bib1] Taoufiq GADI, Omar EL BEGGAR, Brahim BOUSSETTA Guide de la modlisation en
UML
[Bib2] Jrme LAFOSSE Struts 2, le framework de dveloppement dapplications java
[Bib3] Pasqual Roques UML2 : Modliser une application web

Rfrences Web :
[1] http://www.siteduzero.com/
[2] http://fr.wikipedia.org
[3] http://www.developpez.com
[4] http://www.uh1.ac.ma/
[5] http://uml.free.fr/