Ministère de l’Enseignement Supérieur, de la Recherche Scientifique et de la TechnologieUniversité 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’EcoleSupé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 102.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.2 Cadre général . . . . . . . . . . . . . . . . . . . . . . . . . . . 102.3 Présentation générale de l�ESSAI . . . . . . . . . . . . . . . . 102.4 Etude de l�existant

102.4.1 Les Projets de Fin d�Annnée . . . . . . . . . . . . . . . 102.4.2 Le projet de �n d�études (PFE) : . . . . . . . . . . . . 11

2.5 Critique de l�existant . . . . . . . . . . . . . . . . . . . . . . . 142.6 Besoins et suggestions . . . . . . . . . . . . . . . . . . . . . . 14

3 Conception 163.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163.2 Le modèle conceptuel de données (MCD) . . . . . . . . . . . . 16

3.2.1 Description des entités . . . . . . . . . . . . . . . . . . 19

4 Environnement du travail 224.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224.2 Environnement technique du travail . . . . . . . . . . . . . . . 22

4.2.1 Environnement matériel . . . . . . . . . . . . . . . . . 224.2.2 Environnement logiciel . . . . . . . . . . . . . . . . . . 22

5 Description de la solution développée 255.1 Home page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255.2 Accueil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265.3 Authenti�cation . . . . . . . . . . . . . . . . . . . . . . . . . . 275.4 Page d�accueil du compte étudiant . . . . . . . . . . . . . . . 285.5 Fonctionnalités accordées à l�étudiant . . . . . . . . . . . . . . 295.6 Espace administrateur . . . . . . . . . . . . . . . . . . . . . . 36

6 Conclusion 41

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

1

Liste des �gures

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

2

liste des annexes

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

3

RemerciementsJe tiens à exprimer ma gratitude à Mme Fatma CHAKER-KHARRAT pour

ses conseils et ses encouragements pendant la période consacrée à cetravail. 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�EcoleSupé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 projetssont intégrés dans le programme d�études universitaires, ils représentent desexcellents 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 lepremier responsable de sa formation. Le milieu de stage, tout en béné�ciantdu travail du stagiaire, participe à la formation de futurs professionnels del�information. Ainsi le stage donne une occasion de prendre contact avec lavie professionnelle et de découvrir le monde réel de travail et les meilleursmoyens pour rapprocher les connaissances théoriques et technologiques de lapratique.Aujourd�hui, plus que jamais, la tendance est à la communication et au

partage de l�information qui représente la pierre angulaire autour de laquellegravitent 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 commemédia d�échange d�informations multi plate-

forme d�une vaste portée , et l�importance majeur des stages et des projetsintégrés dans les programmes d�étude universitaire , à amener l�ESSAI à sedoter des meilleurs technologies pour informatiser sa gestion des stages etdes 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èeanné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 desdemandes 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 poure¤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é ainsielle 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 quiconsiste à :� 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, nousavons essayé de concevoir un site web dynamique pour notre école qui, enplus 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 deTunis (ESSAI) est la première école d�ingénieurs tunisienne qui, à traversd�enseignements approfondis en statistique, en mathématiques appliquées,en économie, en informatique et en systèmes d�information, permet d�accéderaux 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 parl�élève ingénieur durant son programme de formation. Il est à noter que lePFA 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 dePFA.

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 prendcontact avec l�enseignant responsable a�n de choisir un sujet parmi la listedes 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¤èreselon 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 unedé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èsdélibération une note sera attribuée. La note porte sur :

� La compétence, le sérieux, l�implication des étudiants dans le projetet 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èveingénieur et se déroule durant la troisième année (sixième semestre) d�unedurée d�environ quatre mois. Les projets de �n d�études peuvent être de deuxtypes :- 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éroulentdans 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 enseignantsde 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 remettreau 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 étudiantsdoivent contacter les enseignants a�n de voir leurs propositions de sujets.Dans le cas d�un projet industriel, l�étudiant doit prendre contact avec lesentreprises 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 unentretient entre l�étudiant et l�enseignant, ce dernier peut choisir d�accepterd�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 quiest considéré comme un co-encadrant.

Suivi du projet : Pour le bon déroulement du stage, les étudiants peuventcompter 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 sonencadrant (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éesLe 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 (contenuattendu du rapport, nature exacte d�une soutenance, comportement attendud�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 undocument 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 soutenanceLa 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 projetindustriel, 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 dansle 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 groupesou 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 espacequi rapproche les étudiants à l�environnement professionnel, et compte tenudes lacunes citées précédemment, nous sommes appelés à :� Mettre en relief notre spécialité et notre école ainsi que notre régimed�études en o¤rant un espace statique de présentation générale descours et des activités..

� O¤rir une application dynamique et performante assurant un contactdirect entre les étudiants, les enseignants et les entreprises.

� O¤rir à l�administration la possibilité de publier toutes informationsconcernant 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, nousavons 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 celledes 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 autourde 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 agé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.

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

16

17

Figure 1 : Modèle Conceptuel des Données

18

Figure 2 : Modèle Physique des Données

3.2.1 Description des entités

Après avoir élaboré notre MCD, on va focaliser sur la présentation desprincipales 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 à ladé�nition de l�environnement du travail et on présentera par la suite lesprincipales interfaces de notre site.

4.2 Environnement technique du travail

Il s�agit dans cette partie d�identi�er les di¤érentes caractéristiques del�environnement matériel et logiciel qui nous ont servi à l�implémentation denotre 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" commeserveur de notre base de données et à "NetBeans IDE 6.5" comme outilde développement.

Oracle Database 10g Express EditionOn 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é commele langage le plus populaire pour la plupart des produits commerciaux, quece soit SGBD micro (tel que Access) ou par les produits plus professionnels(tel que Oracle).

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

22

NetBeans IDE 6.5NetBeans est à l�origine un EDI Java. Il fut développé à l�origine par une

équipe d�étudiants à Prague, racheté ensuite par Sun Microsystems. Quelquepart 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. Cequi 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éessur 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.

HTMLL�HypertextMarkup 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 debalisage qui permet d�écrire de l�hypertexte, d�où son nom. HTML permetégalement de structurer sémantiquement et de mettre en forme le contenudes 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 permetde créer des documents inter opérables avec des équipements très variés demanière conforme aux exigences de l�accessibilité du web. Il est souvent uti-lisé conjointement avec des langages de programmation (JavaScript) et desformats de présentation (feuilles de style en cascade). HTML est initialementdérivé du Standard Generalized Markup Language (SGML).3

JSPLes 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 uncontenu pouvant être di¤érent selon certains paramètres (des informationsstockées dans une base de données, les préférences de l�utilisateur,...) tan-

2Source : www.netbeans.org3Source : wikipédia.org

23

dis que page web "classique" (dont l�extension est .htm ou .html) a¢ cheracontinuellement 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 Javas�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 HTMLau 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 peutservir d�intermédiaire (on parle généralement de serveur applicatif) entre lenavigateur du client et une base de données (on parle généralement de serveurde données) en permettant un accès transparent à celle-ci. JSP fournit ainsiles éléments nécessaires à la connexion au système de gestion de bases dedonnées, à la manipulation des données grâce au langage SQL.4

JavascriptLe 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. Celangage 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 ilne nécessite pas de compilateur, contrairement au langage Java, avec lequelil a longtemps été confondu.5

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

24

25

5. Description de la solution développéeDans cette partie, nous allons présenter les interfaces les plus importantes de notresite 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érentesfonctionnalité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

26

5.2 Accueil

Cette page est accessible par tous les internautes désirant avoir des informations surl’ESSAI. Mise à part les espaces étudiants, enseignants, entreprises et administrateursqui sont accessibles qu’après authentification, cette page contient des liens vers desinformations 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ésde l’ESSAI à travers l’espace « Agenda » qui est mis à jour quotidiennement parl’administrateur.

Figure 4 : page d’accueil

27

5.3 Authentification

Chaque espace (étudiant, enseignant, entreprise ou administrateur) n’est accessiblequ’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 saisison CIN et son numéro d’inscription. Ces données sont enregistrées préalablementpar 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écuterles 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

28

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 :

29

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 foiscrée, le groupe contiendra comme premier membre la personne créatrice du groupe.

Figure 8 : Création d’un groupe

30

- Consulter la liste des groupes : chaque étudiant peut consulter la listedes groupes crées. En saisissant le code du groupe le système affichele(s) membre(s) inscrit(s) à ce groupe. C’est ensuite au choix del’é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 groupeen 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 groupesdifférents. Si c’est le cas, le système ne prendra en compte que sadernière inscription. Toute inscription antérieure seraautomatiquement supprimée.

Figure 10: Inscription à un groupe

31

Déposer un CV :Chaque étudiant peut déposer son CV. Ce dernier peut être consulté aussi bien par lesenseignants 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 laliste des projets proposés aussi bien par les enseignants que par les entreprises, savoir ladécision prise pour n’importe quel projet et enfin consulter l’historique des projets validéset refusés.

Figure 11 : fenêtre projet

- Déposer une demande de projet : l’étudiant peut déposer unedemande 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éepar les enseignants et/ ou les entreprises. L’administrateur se charge à a fin desaisir la décision de validation ou de refus de la demande.

32

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 desprojets proposés aussi bien par d’autres étudiants, ou encore par des enseignants ou pardes entreprises. A titre d’exemple, la Figure 14 illustre le cas des sujets proposés par un

33

enseignant. Pour cela, l’étudiant doit choisir la nature du projet et préciser le nom del’enseignant responsable. Le système affichera la liste des projets proposés parl’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 ladécision finale qui concerne une demande de projet déposé. Pour cela, il doit saisir lecode de la demande de projet et le système affichera la décision finale. Cette décisionest saisie préalablement par l’administrateur.

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

34

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

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èmeaffichera un lien vers son adresse email. La même procédure est utilisée dans le casd’une entreprise ou encore d’un autre étudiant.

Figure 17: envoyer un mail à un enseignant

35

Vérification de ses coordonnées personnellesCette fonctionnalité permet à l’étudiant de consulter ses coordonnées enregistrées dans labase 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 pourles 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’espaceadministrateur.

La figure 19 illustre la page d’accueil relative à l’espace administrateur. Ce dernier secharge 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 unenseignant 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

36

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

A titre d’exemple, la Figure 20 illustre l’ajout des informations étudiants. Tous lescontrô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

37

- 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

38

- 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

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 conceptionet de gestion des bases de données acquises lors de notre deuxième année deformation dans le but de concevoir un site web dynamique pour notre école.

Nous avons pu accumuler le long de notre projet de certaines expertisesqui nous ont servi de mieux comprendre le déroulement de la création dessites web.

La partie conception nous a permis de mieux représenter les di¤érentesentité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 disposerdes 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ésstatiques, nous a permis de disposer d�une interface qui assure des interactionsdirectes entre les étudiants, les enseignants et les entreprises.

Bien entendu, nous avons essayé de réunir le maximum des fonctionnalitésque 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 pules 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 dece projet, nous aurions pu écarter notre travail en ajoutant des comptes pourla gestion et l�organisation des soutenances et même d�ajouter un forum dediscussion pour les étudiants de l�ESSAI..

41

Annexes

42

7 Annexes

7.1 Annexe 1 : Code JSP asuurant la connexion à labase

<%@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