Ministère de l’Enseignement Supérieur, de la Recherche Scientifique et de la Technologie

Université 7 novembre de Carthage

Ecole Supérieure de la Statistique et de l’Analyse de l’Information de Tunis

Projet de deuxième année

Création d’un site web dynamique pour l’Ecole

Supérieure de la Statistique et de l’Analyse de
l’Information de Tunis

Elaboré par : Riadh KOUKI Encadré par : Mme. Fatma CHAKER KHARRAT

Mai 2010

Année Universitaire 2009/2010

Table des matières
1 Introduction 7

2 Etude de l’existant 10
2.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Cadre général . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3 Présentation générale de l’ESSAI . . . . . . . . . . . . . . . . 10
2.4 Etude de l’existant
10
2.4.1 Les Projets de Fin d’Annnée . . . . . . . . . . . . . . . 10
2.4.2 Le projet de …n d’études (PFE) : . . . . . . . . . . . . 11
2.5 Critique de l’existant . . . . . . . . . . . . . . . . . . . . . . . 14
2.6 Besoins et suggestions . . . . . . . . . . . . . . . . . . . . . . 14

3 Conception 16
3.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.2 Le modèle conceptuel de données (MCD) . . . . . . . . . . . . 16
3.2.1 Description des entités . . . . . . . . . . . . . . . . . . 19

4 Environnement du travail 22
4.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.2 Environnement technique du travail . . . . . . . . . . . . . . . 22
4.2.1 Environnement matériel . . . . . . . . . . . . . . . . . 22
4.2.2 Environnement logiciel . . . . . . . . . . . . . . . . . . 22

5 Description de la solution développée 25

5.1 Home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.2 Accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
5.3 Authenti…cation . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.4 Page d’accueil du compte étudiant . . . . . . . . . . . . . . . 28
5.5 Fonctionnalités accordées à l’étudiant . . . . . . . . . . . . . . 29
5.6 Espace administrateur . . . . . . . . . . . . . . . . . . . . . . 36

6 Conclusion 41

7 Annexes 43
7.1 Annexe 1 : Code JSP asuurant la connexion à la base . . . . 43

1
Liste des …gures

Figure1 : Modèle Conceptuel des Données. . . . . . . . . . . . . . . . . . .. 17

Figure2 : Modèle Physique des Données. . . . . . . . . . . . . . . . . . . . . 18
Figure3 : Home page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Figure4 : page d’accueil. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Figure5 : Authenti…cation. . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Figure6 : Page d’accueil du compte étudiant. . . . . . . . . . . . . . . . . . .28
Figure7 : fenêtre groupe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29
Figure8 : former un groupe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Figure9 : Consulter la liste des groupes . . . . . . . . . . . . . . . . . . . . . . 30
Figure10 : S’inscrire à un groupe. . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Figure11 : fenêtre projet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Figure12 : Déposer une demande de projet. . . . . . . . . . . . . . . . . . . 31
Figure13 : Choix du publicateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Figure14 : Consulter la liste des projets proposés. . . . . . . . . . . . . . . 32
Figure15 : Véri…cation de la décision …nale. . . . . . . . . . . . . . . . . . . . 33
Figure16 : envoyer un mail. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Figure17 : envoyer un mail à un enseignant. . . . . . . . . . . . . . . . . . . . 34
Figure18 : voire les coordonnées. . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Figure19 : Espace administrateur. . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Figure20 : Ajouter un étudiant. . . . . . . . . . . . . . . . . . . . . . . . . . . . .36
Figure21 : Supprimer un étudiant. . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Figure22 : A¢ cher / Supprimer un groupe. . . . . . . . . . . . . . . . . . . . 37
Figure23 : A¢ cher / Supprimer une demande de projet. . . . . . . . . . 38
Figure24 : Valider / Refuser une demande de projet. . . . . . . . . . . . . 38

2
liste des annexes

Annexe 1 : Code JSP. . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

3
 Remerciements
Je tiens à exprimer ma gratitude à Mme Fatma CHAKER-KHARRAT pour
ses conseils et ses encouragements pendant la période consacrée à ce
travail. Je tiens à remercier également les membres de jury qui me
font l’honneur de juger ce projet..

4
 Résumé
Ce travail, qui entre dans le cadre du projet de …n de deuxième année,
consiste à concevoir et à développer un site web dynamique pour l’Ecole
Supérieure de la Statistique et de l’Analyse de l’Information de Tunis
(ESSAI). Ce site va permettre à l’ESSAI de se rapprocher davantage de ses
étudiants en leurs o¤rant la possibilité d’être au bout du …l des autres
étudiants, des enseignants et des entreprises.

Mots clés : ESSAI, site Web dynamique, Conception, gestion des projets.

5
 Chapitre 1 :

Introduction

6
1 Introduction

En raison de l’importance de la formation qui devient un outil néces-

saire pour garantir l’adéquation de futurs employés à leur travail, Les projets
sont intégrés dans le programme d’études universitaires, ils représentent des
excellents compléments de formation.
Ils permettent à l’étudiant de s’intégrer dans la vie professionnelle et de
confronter les connaissances théoriques à l’exercice pratique.
Les projets représentent des activités obligatoires pour tous les étudiants
inscrits à l’orientation professionnelle.
Le projet constitue pour l’étudiant une période d’apprentissage (amélio-
ration de savoir, de savoir être, savoir-faire) durant laquelle l(étudiant est le
premier responsable de sa formation. Le milieu de stage, tout en béné…ciant
du travail du stagiaire, participe à la formation de futurs professionnels de
l’information. Ainsi le stage donne une occasion de prendre contact avec la
vie professionnelle et de découvrir le monde réel de travail et les meilleurs
moyens pour rapprocher les connaissances théoriques et technologiques de la
pratique.
Aujourd’hui, plus que jamais, la tendance est à la communication et au
partage de l’information qui représente la pierre angulaire autour de laquelle
gravitent toutes sortes de l’organisation.
Ces deux maîtres mots qui sont la philosophie même de l’Internet, créent
sans cesse de nouvelles fonctions et de nouveaux besoins.
Le succès de l’Internet comme média d’échange d’informations multi plate-
forme d’une vaste portée , et l’importance majeur des stages et des projets
intégrés dans les programmes d’étude universitaire , à amener l’ESSAI à se
doter des meilleurs technologies pour informatiser sa gestion des stages et
des projets.
Cette informatisation se traduit par la mise en place d’une application
Internet dynamique assurant la communication , le partage et l’échange col-
laboratif des informations entre les di¤érents auteurs : à savoir les professeurs
, les étudiants, le personnel administratif ainsi que les responsables des en-
treprises.

7
 Cette application représente le sujet de notre projet de …n de deuxièe
année. Le but est donc de se doter :
– D’un système de gestion de groupes (espace étudiant) : Création, par-
ticipation, inscription.
– D’un système de gestion des demandes de projets (espace étudiant,
enseignant, entreprise) : Déposer une demande, consulter la liste des
demandes déposées par tous les utilisateurs,
– D’un système de gestion administratif,
– D’un système de gestion des CV,
– D’un système de consultation des projets validés ou refusés,
– D’un système de consultation et d’envoie des e-mails,
– Véri…cation des coordonnées enregistrées à la base.

Le présent document se propose de décrire la démarche adoptée pour

e¤ectuer ce travail et s’articule en quatre parties :
Une première partie s’attache à présenter le projet ainsi qu’une
étude de l’existant qui nous permettra de dé…nir clairement nos besoins.
Une deuxième partie se compose d’une spéci…cation détaillée des
besoins. Elle jette les bases de la conception même de l’application.
La troisième partie concerne la réalisation de l’application moyen-
nant une méthodologie de conception adoptée aux besoins d’applications hy-
permédia, elle présente aussi les choix technologiques et le travail réalisé ainsi
elle jette, en plus, Les bases des améliorations possibles de l’application.

8
 Chapitre 2 :

Présentation et étude de l’existant

9
2 Etude de l’existant
2.1 Introduction
Dans ce chapitre, nous allons aborder la première partie du travail qui
consiste à :
– Introduire le cadre de notre travail,
– Etudier et critiquer le système actuellement utilisé au sein de l’école,
– Proposer des améliorations possibles.

2.2 Cadre général

Dans le cadre du projet de …n de notre deuxième année d’études, nous
avons essayé de concevoir un site web dynamique pour notre école qui, en
plus de ses fonctionnalités statiques, va nous o¤rir un lien direct entre les
étudiants de l’ESSAI, les enseignants et l’environnement professionnel.

2.3 Présentation générale de l’ESSAI

l’Ecole Supérieure de la Statistique et de l’Analyse de l’Information de
Tunis (ESSAI) est la première école d’ingénieurs tunisienne qui, à travers
d’enseignements approfondis en statistique, en mathématiques appliquées,
en économie, en informatique et en systèmes d’information, permet d’accéder
aux multiples fonctions de l’ingénierie statistique.
À l’issue de trois années de scolarité, les élèves majoritairement issus
de classes préparatoires (sections physique-technologie et mathématiques-
physique) deviennent ingénieurs diplômés, titre habilité par l’Ordre des in-
génieurs tunisiens.

2.4 Etude de l’existant

2.4.1 Les Projets de Fin d’Annnée

Description générale : Le Projet de Fin d’Année (PFA) est une ap-
plication pratique des connaissances scienti…ques et techniques acquises par
l’élève ingénieur durant son programme de formation. Il est à noter que le
PFA porte généralement sur l’ensemble des matières enseignées à l’ESSAI.

Proposition du PFA : Au début du second semestre de l’année uni-

versitaire les enseignants proposent des sujets de projets aux étudiants. Ces

10
sujets portent généralement sur les concepts développées en cours. Seuls les
étudiants de première et deuxième année sont concernés par les sujets de
PFA.

Choix et a¤ectaion du PFA : Un PFA peut être réalisé en monôme,

binôme ou encore en trinôme. Chaque étudiant ou groupe d’étudiants prend
contact avec l’enseignant responsable a…n de choisir un sujet parmi la liste
des projets proposés.

Evaluation du PFA : A la …n du projet chaque étudiant ou groupe d’étu-

diant fournit un rapport décrivant son travail. L’évaluation du PFA di¤ère
selon qu’il soit un PFA de 1ère ou de 2ème année :
1. S’il s’agit d’un PFA de première année l’enseignant peut demander une
démonstration suite à laquelle une note sera attribuée.
2. S’il s’agit d’un PFA de deuxième année une soutenance sera program-
mée durant laquelle le(s) étudiant(s) présenteront leur travail. Après
délibération une note sera attribuée. La note porte sur :
La compétence, le sérieux, l’implication des étudiants dans le projet
et leurs initiatives personnelles.
La forme et le fond du rapport (complétude, clarté,. . . ).
La présentation orale.

2.4.2 Le projet de …n d’études (PFE) :

Le projet de …n d’études clôture le programme de formation de l’élève
ingénieur et se déroule durant la troisième année (sixième semestre) d’une
durée d’environ quatre mois. Les projets de …n d’études peuvent être de deux
types :
- Les projets académiques : sont proposés par des enseignants de l’ES-
SAI ou par des enseignants d’autres institutions universitaires et se déroulent
dans des milieux universitaires.
- Les projets industriels : sont proposés par des entreprises, des orga-
nismes publiques et des centres de recherche à l’extérieur de l’ESSAI ;

Proposition et validation des PFE :

– Cas de projets académiques :
Un enseignant peut proposer des sujets de PFE en précisant le titre, la
description, l’objectif, les outils de développement, etc.
Un enseignant a la possibilité de choisir plusieurs projets pour la même
année universitaire.

11
 Ces projets doivent être a¢ chés aux étudiants.
– Cas de projets industriels :
Un projet industriel se déroule généralement dans une Entreprise.
L’étudiant contacte les responsables de l’Entreprise pour un éventuel stage.
Le projet proposé est étudié par une commission, composée des enseignants
de l’ESSAI.
Si le stage est conforme aux capacités de l’élève ingénieur, une lettre
d’a¤ectation de stage est remise au stagiaire qui, à son tour, doit la remettre
au responsable d’Entreprise.
Un enseignant de l’ESSAI assurant l’encadrement du projet est ensuite
a¤ecté au projet.

Choix du projet : Dans le cas d’un projet académique, les étudiants

doivent contacter les enseignants a…n de voir leurs propositions de sujets.
Dans le cas d’un projet industriel, l’étudiant doit prendre contact avec les
entreprises et voir la possibilité de réaliser son stage au sein de leur établis-
sement.

A¤ectation de sujets : Dans le cas d’un projet académique, et après un

entretient entre l’étudiant et l’enseignant, ce dernier peut choisir d’accepter
d’encadrer ou pas l’étudiant.
Dans le cas d’un projet industriel, l’étudiant est encadré, normalement,
par un encadrant Entreprise. L’ESSAI lui a¤ecte un enseignant de l’école qui
est considéré comme un co-encadrant.

Suivi du projet : Pour le bon déroulement du stage, les étudiants peuvent

compter sur les conseils de leurs encadrants à travers des réunions organi-
sées toutes les semaines. En cas de problèmes l’étudiant peut contacter son
encadrant (téléphone, e_mail. . . ).
L’encadrant rencontre régulièrement le stagiaire a…n d’évaluer l’avance-
ment du projet et de valider les méthodes de travail utilisées
Le responsable des stages et des projets intervient durant le déroulement
de projets, en s’assurant de :
- la validation des sujets proposés par les entreprises aux étudiants.
- la di¤usion des sujets proposés et validés aux étudiants.
- la di¤usion d’une liste des sujets retenus par les étudiants.
- la gestion des écritures relatives à la passation des conventions entre
l’université et les entreprises.
- la répartition des projets entre les enseignants.

12
 - la di¤usion aux étudiants et aux enseignants des consignes (contenu
attendu du rapport, nature exacte d’une soutenance, comportement attendu
d’un enseignant visitant un stagiaire. . . ).
- la gestion des calendriers des soutenances des projets, avec di¤usion de
ceux-ci auprès des enseignants et des étudiants.
- la gestion des documents après stage (…che appréciation de l’entreprise,
…che évaluation du stage, rapport)

Rédaction du rapport : Le rapport préparé par l’étudiant est un

document de synthèse présentant le travail réalisé durant son stage. Ce do-
cument peut comprendre des annexes détaillant certains points.
Le rapport comporte trois parties :
- La problématique.
- La solution technique.
- La conception et la réalisation.
Le rapport doit être lisible, précis et concluant.

La soutenance : Une soutenance est prévue pour chaque étudiant.

Un jury est a¤ecté à chaque projet. L’encadrant fait partie des membres
du jury.
La soutenance est d’une durée d’environ 30mn. Dans certains cas, et
selon le sujet, les membres du jury peuvent exiger une démonstration.
a- Déroulement de la soutenance
La soutenance se déroule devant un jury constitué par les enseignants de
l’ESSAI dans laquelle l’étudiant présente son travail. Dans le cas d’un projet
industriel, le responsable de l’Entreprise sera invité à la soutenance.
La soutenance peut être reportée à une autre date si :
– Rejet du projet par le jury.
– Absence de l’un des membres du jury.
– Problème technique : matériel non disponible, coupure de courant élec-
trique.
b- Evaluation du travail :
Le jour de la soutenance, l’étudiant est évalué sur :
- la clarté et le contenu de son rapport.
- le travail réalisé et l’initialité apportée.
- sa présentation.
- les réponses aux questions posées par les membres du jury.
Immédiatement après la présentation orale, le jury se réunit, attribut la
note …nale, et accorde la mention correspondante aux étudiants.

13
2.5 Critique de l’existant
L’étude de l’existant nous a conduit à noter quelques insu¢ sances dans
le système actuel de l’ESSAI causés principalement par le manque de com-
munication et de circulation de l’information entre les di¤érents acteurs.
En e¤et, nous avons remarqué :
- Vu le volume important des documents administratifs, le respon-
sable trouve des di¢ cultés dans la recherche d’informations ou de documents.
- Absence d’un moyen pratique qui peut aider l’étudiant à chercher
un organisme qui l’accueille pour son stage.
- Il n’y a pas un moyen de communication pratique entres les étudiants
et les entreprises et entre les entreprises et l’ESSAI.
- L’étudiant trouve des di¢ cultés pour contacter les enseignants pour
s’informer sur les projets proposés.
- L’a¤ectation de projet se fait d’une manière arbitraire qui conduit
souvent à des problèmes. C’est le cas d’un sujet choisi par plusieurs groupes
ou le cas de l’a¤ectation d’un même groupe à deux enseignants di¤érents.

2.6 Besoins et suggestions

Vue l’importance de la disponibilité permanente des informations concer-
nant toutes nouveautés à propos l’ESSAI, et l’importance d’avoir un espace
qui rapproche les étudiants à l’environnement professionnel, et compte tenu
des lacunes citées précédemment, nous sommes appelés à :
– Mettre en relief notre spécialité et notre école ainsi que notre régime
d’études en o¤rant un espace statique de présentation générale des
cours et des activités..
– O¤rir une application dynamique et performante assurant un contact
direct entre les étudiants, les enseignants et les entreprises.
– O¤rir à l’administration la possibilité de publier toutes informations
concernant l’école.
– Informatiser la distribution des formulaires et des propositions de stage.
– Informatiser tout contact des étudiants entre eux et avec le cadre ad-
ministratif, éducatif et professionnel.

14
 Chapitre 3 :
Conception

15
3 Conception
3.1 Introduction
A…n de modéliser le Système d’Information de notre application, nous
avons adopté la méthodologie de conception des systèmes d’information "
MERISE " qui propose une démarche séparant l’étude des données de celle
des traitements en avançant progressivement par niveau.
Chacun de ces niveaux a pour objectif de fournir un certain nombre de
documents qui sont indispensables à l’élaboration et la concertation autour
de tout projet informatique".1

3.2 Le modèle conceptuel de données (MCD)

Le MCD permet de représenter d’une manière structurée les données im-
pliquées dans notre SI, il nous fournit d’une description statique du SI à
l’aide des concepts de formalisme "entitée-association".
Notre MCD est réalisé via le logiciel " Power AMC 12" qu’à l’aide duquel,
on a pu générer le Modèle Physique de Données qu’ à partir duquel on a
généré le script SQL relatif à la création de notre base de données.
La Figure suivante représente le Modèle Conceptuel des Données général
de notre site.

1
Cours de "Conception et modélisation des systèmes d’informations" (2ème année)
enseigné par Mme. Fatma Chaker

16
Figure 1 : Modèle Conceptuel des Données

17
Figure 2 : Modèle Physique des Données

18
3.2.1 Description des entités
Après avoir élaboré notre MCD, on va focaliser sur la présentation des
principales entités impliquées dedans qui sont en fait l’entité : "étudiant",
"enseignant" et "entreprise".

L’entité "Etudiant"

L’entité «Etudiant» est caractérisée par le numéro C.I.N, le numéro d’ins-

cription, le nom, le prénom, le niveau, l’adresse mail et le C.V déposé.
Cette entité permet en fait de :
– Ajouter un nouvel étudiant,
– Modi…er un étudiant existant,
– Supprimer un étudiant,
– Publier un C.V ou une demande de projet,
– A¢ cher toutes les informations concernant un étudiant donné.

L’entité "Enseignant"

19
 L’entité «Enseignant» est caractérisée par un identi…ant, le numéro d’ins-
cription, le nom, le prénom, l’adresse, le téléphone, l’adresse mail, la grade,
le pays et la Faculté.
Cette entité permet en fait de :
– Ajouter un nouvel enseignant,
– Modi…er un enseignant existant,
– Supprimer un enseignant,
– Publier une proposition de projet,
– A¢ cher toutes les informations concernant un enseignant donné.

L’entité "Entreprise"

L’entité «Entreprise» est caractérisée par un identi…ant, le raison social,

l’adresse, le téléphone et l’adresse mail.
Cette entité permet en fait de :
– Ajouter une nouvelle entreprise,
– Modi…er une entreprise existante,
– Supprimer une entreprise,
– Publier une proposition de stage,
– A¢ cher toutes les informations concernant une entreprise donnée.

20
 Chapitre 4 :
Réalisation

21
4 Environnement du travail
4.1 Introduction
A…n de mettre en route notre site, on va s’intéresser tout d’abord à la
dé…nition de l’environnement du travail et on présentera par la suite les
principales interfaces de notre site.

4.2 Environnement technique du travail

Il s’agit dans cette partie d’identi…er les di¤érentes caractéristiques de
l’environnement matériel et logiciel qui nous ont servi à l’implémentation de
notre site.

4.2.1 Environnement matériel

La machine utilisée pour réaliser ce projet (ordinateur portable HP 530)
dispose de la con…guration suivante :
– Système d’exploitation : Windows 7 Edition intégrale,
– Processus Intel(R) Core(TM) Duo CPU T 2400@ 1.83 GHZ 1.83 GHZ,
– 1 Go de RAM,
– 320 Go de disque dur.

4.2.2 Environnement logiciel

A…n de réaliser notre site, nous avons eu recours à : "Oracle 10g" comme
serveur de notre base de données et à "NetBeans IDE 6.5" comme outil
de développement.

Oracle Database 10g Express Edition

On a choisi Oracle 10 g comme serveur de base de données qui est en fait
un SGBD qui peut fonctionner aisément sous Windows.
Le principal moyen d’interrogation de la base des données soutenu par
Oracle est Structured Query Langage (SQL) qui peut être considéré comme
le langage le plus populaire pour la plupart des produits commerciaux, que
ce soit SGBD micro (tel que Access) ou par les produits plus professionnels
(tel que Oracle).

Le serveur Web
Notre serveur web adopté par NetBeans IDE 6.5 est Apache.

22
NetBeans IDE 6.5
NetBeans est à l’origine un EDI Java. Il fut développé à l’origine par une
équipe d’étudiants à Prague, racheté ensuite par Sun Microsystems. Quelque
part en 2002, Sun a décidé de rendre Netbeans open-source.
Mais Netbeans n’est pas uniquement un EDI Java. C’est également une
plateforme, vous permettant d’écrire vos propres applications Swing. Sa concep-
tion est complétement modulaire : Tout est module, même la plateforme. Ce
qui fait de Netbeansune boite à outils facilement améliorable ou modi…able.
La license de Netbeans permet de l’utiliser gratuitement à des …ns com-
merciales ou non. Elle permet de développer tout types d’applications basées
sur la plateforme Netbeans. Les modules que vous pourriez écrire peuvent
être open-source comme ils peuvent être closed-source, ils peuvent être gra-
tuits comme ils peuvent être payants.2
Netbeans est téléchargeable gratuitement sur son site o¢ ciel www.netbeans.org.
Via NetBeans, on est arrivé a concevoir nos pages tout en utilisant le
langage HTML, JSP et Javascript.

HTML
L’Hypertext Markup Language, généralement abrégé HTML, est le for-
mat de données conçu pour représenter les pages web. C’est un langage de
balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML permet
également de structurer sémantiquement et de mettre en forme le contenu
des pages, d’inclure des ressources multimédias dont des images, des formu-
laires de saisie, et des éléments programmables tels que des applets. Il permet
de créer des documents inter opérables avec des équipements très variés de
manière conforme aux exigences de l’accessibilité du web. Il est souvent uti-
lisé conjointement avec des langages de programmation (JavaScript) et des
formats de présentation (feuilles de style en cascade). HTML est initialement
dérivé du Standard Generalized Markup Language (SGML).3

JSP
Les JSP (Java Server Pages) sont un standard permettant de développer
des applications Web interactives, c’est-à-dire dont le contenu est dynamique.
C’est-à-dire qu’une page web JSP (repérable par l’extension .jsp) aura un
contenu pouvant être di¤érent selon certains paramètres (des informations
stockées dans une base de données, les préférences de l’utilisateur,...) tan-
2
Source : www.netbeans.org
3
Source : wikipédia.org

23
dis que page web "classique" (dont l’extension est .htm ou .html) a¢ chera
continuellement la même information.
Il s’agit en réalité d’un langage de script puissant (un langage interprété)
exécuté du côté du serveur (au même titre que les scripts CGI,PHP,ASP,...)
et non du côté client (les scripts écrits en JavaScript ou les applets Java
s’exécutent dans le navigateur de la personne connectée à un site).
Les JSP sont intégrables au sein d’une page Web en HTML à l’aide de
balises spéciales permettant au serveur Web de savoir que le code compris à
l’intérieur de ces balises doit être interprété a…n de renvoyer du code HTML
au navigateur du client.
Ainsi, les Java Server Pages s’inscrivent dans une architecture 3-tier, ce
terme compliqué signi…e qu’un serveur supportant les Java Server Pages peut
servir d’intermédiaire (on parle généralement de serveur applicatif) entre le
navigateur du client et une base de données (on parle généralement de serveur
de données) en permettant un accès transparent à celle-ci. JSP fournit ainsi
les éléments nécessaires à la connexion au système de gestion de bases de
données, à la manipulation des données grâce au langage SQL.4

Javascript
Le Javascript est un langage de script incorporé dans un document HTML.
Historiquement il s’agit même du premier langage de script pour le Web. Ce
langage est un langage de programmation qui permet d’apporter des amélio-
rations au langage HTML en permettant d’exécuter des commandes du côté
client, c’est-à-dire au niveau du navigateur et non du serveur web.
Ainsi le langage Javascript est fortement dépendant du navigateur appe-
lant la page web dans laquelle le script est incorporé, mais en contrepartie il
ne nécessite pas de compilateur, contrairement au langage Java, avec lequel
il a longtemps été confondu.5

4
Source : www.commentçamarche.net
5
Source : www.commentçamarche.net

24
 5. Description de la solution développée
Dans cette partie, nous allons présenter les interfaces les plus importantes de notre
site tout en expliquant leurs utilités et leurs fonctionnement.

5.1 Page présentation

Cette la première page de notre site. Elle permet d’accéder aux différentes
fonctionnalités développées. La bannière utilisée dans toutes les pages du site a été
conçue par une ancienne étudiante à l’ESSAI [Amal Teieb, 2009].

Figure 3 : Page présentation

25
5.2 Accueil

Cette page est accessible par tous les internautes désirant avoir des informations sur
l’ESSAI. Mise à part les espaces étudiants, enseignants, entreprises et administrateurs
qui sont accessibles qu’après authentification, cette page contient des liens vers des
informations d’ordre général telles que la présentation de l’ESSAI, le mot du directeur,
le plan de formation, etc. Elle informe aussi tous les visiteurs de toutes les nouveautés
de l’ESSAI à travers l’espace « Agenda » qui est mis à jour quotidiennement par
l’administrateur.

Figure 4 : page d’accueil

26
 5.3 Authentification

Chaque espace (étudiant, enseignant, entreprise ou administrateur) n’est accessible

qu’après authentification.
A titre d’exemple, la figure 5 illustre la page d’authentification relative à l’espace
étudiant. En effet, tout étudiant ne peut accéder à son compte qu’après avoir saisi
son CIN et son numéro d’inscription. Ces données sont enregistrées préalablement
par l’administrateur et communiquées ensuite à chaque étudiant de l’école.

Figure 5 : Authentification

5.4 Page d’accueil du compte étudiant

Une fois authentifié, chaque étudiant peut accéder à son propre compte pour exécuter
les diverses fonctionnalités offertes (Figure 6), à savoir :
 S’inscrire à un groupe
 Déposer un CV
 Déposer une demande de projet
 Consulter la liste des projets proposés

27
  Consulter la liste des projets validés
 Consulter l’historique des projets réalisés
 Envoyer un email
 Vérifier ses coordonnées.

Figure 6 : Page d’accueil du compte étudiant

5.5 Fonctionnalités accordées à l’étudiant

A partir de son compte, chaque étudiant peut :

28
  Consulter / Former / S’inscrire à un groupe

Figure 7 : fenêtre groupe

- Former un groupe

Chaque étudiant peut créer un nouveau groupe en lui attribuant un code unique. Une fois
crée, le groupe contiendra comme premier membre la personne créatrice du groupe.

Figure 8 : Création d’un groupe

29
- Consulter la liste des groupes : chaque étudiant peut consulter la liste
des groupes crées. En saisissant le code du groupe le système affiche
le(s) membre(s) inscrit(s) à ce groupe. C’est ensuite au choix de
l’étudiant de rejoindre les membres du groupe ou pas.

Figure 9 : Consultation de la liste des groupes

- S’inscrire à un groupe : un étudiant à le droit de s’inscrire à un groupe

en spécifiant le code du groupe, son CIN et son numéro d’inscription.
Un étudiant ne peut pas être inscrit en même temps à deux groupes
différents. Si c’est le cas, le système ne prendra en compte que sa
dernière inscription. Toute inscription antérieure sera
automatiquement supprimée.

Figure 10: Inscription à un groupe

30
 Déposer un CV :
Chaque étudiant peut déposer son CV. Ce dernier peut être consulté aussi bien par les
enseignants de l’ESSAI que par les entreprises.

 Fenêtre « projets »
A partir de son espace, chaque étudiant peut déposer une demande de projet, consulter la
liste des projets proposés aussi bien par les enseignants que par les entreprises, savoir la
décision prise pour n’importe quel projet et enfin consulter l’historique des projets validés
et refusés.

Figure 11 : fenêtre projet

- Déposer une demande de projet : l’étudiant peut déposer une

demande de projet en spécifiant un code unique, la nature du projet (PFA ou PFE)
ainsi qu’une description succincte du projet. Cette demande peut être consultée
par les enseignants et/ ou les entreprises. L’administrateur se charge à a fin de
saisir la décision de validation ou de refus de la demande.

31
 Figure 12 : Déposer une demande de projet

- Consulter la liste des projets proposés

Figure 13 : Choix du publicateur

- Consulter la liste des projets proposés : chaque étudiant peut consulter la liste des
projets proposés aussi bien par d’autres étudiants, ou encore par des enseignants ou par
des entreprises. A titre d’exemple, la Figure 14 illustre le cas des sujets proposés par un

32
enseignant. Pour cela, l’étudiant doit choisir la nature du projet et préciser le nom de
l’enseignant responsable. Le système affichera la liste des projets proposés par
l’enseignant concerné.

Figure 14 : Consultation de la liste des projets proposés

- Vérifier si une demande est validée ou refusée : un étudiant peut consulter la

décision finale qui concerne une demande de projet déposé. Pour cela, il doit saisir le
code de la demande de projet et le système affichera la décision finale. Cette décision
est saisie préalablement par l’administrateur.

Figure 15 : Vérification de la décision finale pour une demande de projet

33
 Envoyer un e-mail : afin de faciliter la communication entre les différents acteurs
nous avons mis en place un système permettant l’échange d’informations à travers des
emails.

Figure 16 : Envoi d’email entre les différents acteurs du site

La Figure 17 illustre l’exemple d’échange d’email entre un étudiant et un enseignant.

Pour cela, l’étudiant doit choisir le nom de l’enseignant à contacter et le système
affichera un lien vers son adresse email. La même procédure est utilisée dans le cas
d’une entreprise ou encore d’un autre étudiant.

Figure 17: envoyer un mail à un enseignant

34
 Vérification de ses coordonnées personnelles
Cette fonctionnalité permet à l’étudiant de consulter ses coordonnées enregistrées dans la
base et d’informer l’administrateur en cas de modification (adresse, email, etc.).

Figure 18: Consultation des coordonnées étudiant

Remarque : Toutes ces fonctionnalités ont été développées pareillement aussi bien pour
les espaces enseignants que pour les entreprises à l’exception des fonctionnalités
« Déposer CV » qui a été modifiée par « Consulter CV » et « s’inscrire à un groupe » qui a
été enlevée des deux espaces enseignants et entreprise.

5.6 Espace administrateur

L’administrateur possède tous les droits de suppression, d’ajout et de modification.

Dans ce qui suit nous présentons quelques fonctionnalités développées pour l’espace
administrateur.

La figure 19 illustre la page d’accueil relative à l’espace administrateur. Ce dernier se

charge entre autres de la gestion des comptes étudiant, enseignant et entreprise.
Ainsi, et pour chacun de ces espaces, l’administrateur a le droit de :
 Ajouter, modifier ou supprimer les données d’un étudiant (respectivement un
enseignant ou une entreprise)
 Consulter/ supprimer une demande de projet déposé par l’un des trois acteurs
 Valider ou refuser une demande de projet déposé par l’un des trois acteurs

35
 Figure 19: Page d’accueil de l’Espace administrateur

A titre d’exemple, la Figure 20 illustre l’ajout des informations étudiants. Tous les
contrôles nécessaires ont été réalisés, à savoir :
 Le nom et le prénom d’un étudiant doivent être de type alphabétique
 Contrôle des dates.
 Le CIN doit être numérique et composé de 8 chiffres
 Respect du format d’écriture de l’adresse email.
 Etc.

Figure 20: Exemple d’ajout d’un étudiant

36
- L’administrateur peut aussi modifier ou supprimer un étudiant

Figure 21: Exemple de suppression d’un étudiant

- Consulter / Supprimer un groupe

Figure 22: Afficher / Supprimer un groupe

37
- Consulter / Supprimer une demande de projet

Figure 23: Afficher / Supprimer une demande de projet

- Valider / refusé une demande de projet

Figure 24: Valider / Refuser une demande de projet

38
 Chapter 5 :

Conclusion

40
6 Conclusion
Partant de nos modestes connaissances en création des sites web dyna-
miques, notre objectif était de pro…ter des technologies et des logiciels dispo-
nibles a…n de mettre en application les di¤érentes techniques de conception
et de gestion des bases de données acquises lors de notre deuxième année de
formation dans le but de concevoir un site web dynamique pour notre école.

Nous avons pu accumuler le long de notre projet de certaines expertises

qui nous ont servi de mieux comprendre le déroulement de la création des
sites web.

La partie conception nous a permis de mieux représenter les di¤érentes

entités du système en élaborant le modèle conceptuel des données (MCD)
par l’intermédiaire du logiciel Power AMC 12.Une exécution du script SQL,
généré à partir du Power AMC, sous Oracle 10 g nous a permis de disposer
des tables qui représentent, en fait, notre base de données.

En s’aidant des langages HTML pour la création des pages statiques,

JSP pour se connecter à la base et Javascript pour les structures de contrôle,
nous avons pu concevoir un site dynamique qui, en plus de ses fonctionnalités
statiques, nous a permis de disposer d’une interface qui assure des interactions
directes entre les étudiants, les enseignants et les entreprises.

Bien entendu, nous avons essayé de réunir le maximum des fonctionnalités

que peut o¤rir un site web d’une école nationale d’ingénieurs. Néanmoins,
ceci n’exclut pas l’existence d’autres fonctionnalités que nous n’avons pas pu
les mettre en considération à cause de la bureaucratie de notre administration
à l’ESSAI.

Nous tenons à noter que s’il n’y avait pas peu de temps pour la remise de
ce projet, nous aurions pu écarter notre travail en ajoutant des comptes pour
la gestion et l’organisation des soutenances et même d’ajouter un forum de
discussion pour les étudiants de l’ESSAI..

41
Annexes

42
7 Annexes
7.1 Annexe 1 : Code JSP asuurant la connexion à la
base

<%@page import="java.sql.*"%>
<%@page import="java.io.*"%>
<%@page import="java.util.*"%>
<%@page import="java.lang.String"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html ; charset=UTF-
8">
<title>JSP Page</title>
</head>
<body>
<h1 action="" method="post"/>
<%
< !–dé…nition et initialisation des variables–>
< !–Lecture des valeurs introduites par le client –>
Connection conn = null ;
String url = "jdbc :oracle :thin :@127.0.0.1 :1521 :" ;
String dbName = "XE" ;
String driver = "oracle.jdbc.driver.OracleDriver" ;
String userName = "nom du compte sur Oracle" ;
String password = "mot de passe Oracle" ;
Statement st ;
try {
Class.forName(driver) ;
conn = DriverManager.getConnection(url + dbName, userName, pass-
word) ;
System.out.println("driverOracle : " + driver) ;
System.out.println("dsnOracle : " + url + dbName) ;
String query = "Requête SQL ou PL/SQL" ;
st = conn.createStatement() ;
st.executeUpdate(query) ;
%>
<%
} catch (Exception e) {
e.printStackTrace() ;

43
String s ;
s = e.getMessage() ;
}
%>
<script>
alert (’enregistrement réussi’) ;
</script>
</body>
</html>

44