Vous êtes sur la page 1sur 50

Espace étudiant 2017 - 2018

Hamza& Youssef Page 1


Espace étudiant 2017 - 2018

Introduction Générale

À partir du XXe siècle, les nouvelles technologies de l'information et de la communication


(NTIC), sont apparues et ont permis de créer de nombreux moyens de communication entre
les êtres humains. Ainsi, le Web 2.0 est devenu un réseau qui permet une nouvelle forme
d'interactivité entre internautescommuniquant à travers une photo, un texte, une vidéo et
même une image.

Parallèlement, le développement de l'éducation et de la formation technique et


professionnelle à l'ère de la connaissance et de l'information a fortement contribué dans
l'amélioration et le développement des méthodes et des techniques d'enseignement et de
formation sont nécessaires pour faire face au développement significatif des technologies de
l'information et de la communication.

Ce développement a ouvert le champ de l'éducation et de nouveaux horizons dans les


termes de moyens disponibles, de nouvelles technologies et de technologies utilisées et de
contenus éducatifs avancés, mais d'un autre côté. L'exploitation de ce développement place le
domaine de l'éducation et de la formation face à de nombreux défis.

Actuellement, la plupart des établissements universitairestunisiens utilisent encore des


moyens classiques de communication imposant la présence de l’enseignant en face de ses
étudiants malgré le développement des techniques de l’enseignement et de l’évaluation dans
ce domaine.

L’Institut Supérieur de Gestion de Gabes (ISGGB) est parmi ces établissements


puisqu’i il prend la même direction et la même technique classique qui est résumée par la
communication directeentre les enseignants et les étudiants pendant les séancesde cours, TD
et TP, la consultation du site web de l’institut pour consulter les nouveautés et la messagerie
électronique pour contacter un responsable ou un enseignant.

C’est dans ce cadre que s’inscrit notre projet de fin d’études, dans lequel nous étions
chargés de développer une application web offrant un espace numérique pour les étudiants de
l’ISGGB.

Pour présenter notre travail, nous organisons le rapport autour des trois chapitres suivants :

Hamza& Youssef Page 2


Espace étudiant 2017 - 2018

 Le premier chapitre nommé « Étude préalable », permet de placer le projet dans son
contexte général. Dans ce chapitre introductif nous présenteronsla vie de l’étudiante à
l’ISGG ainsi que les services offerts par le site web de l’institut. Une étude critique
des fonctionnalités existantes est présentée suivie de la solution proposée dans le cadre
du projet.
 Dans le deuxième chapitre intitulé « Étude conceptuelle », nous entamerons la
modélisation des besoins à partir l’étude préalable du projet par l'élaboration des
principaux diagrammes UML.
 Dans le troisième chapitre nommé « Réalisation », nous présenterons l’environnement
de développement adopté suivi des principaux scénarii du test de l'application réalisée.

Nous terminerons ce rapport par une conclusion générale résumant les apports, les limites
ainsi que les perspectives du travail réalisé.

Hamza& Youssef Page 3


Espace étudiant 2017 - 2018

Chapitre 1: Étude préalable

Introduction

Dans ce chapitre, nous plaçons le projet dans son cadre en présentant une étude du domaine
ainsi qu’un aperçu des solutions existantes en matière d’espace numérique pour les étudiants
suivies de la solution proposée dans le cadre de notre projet de fin d’études.

1.1 Étude du domaine

1.1.1 Cadre de l’étude


Notre stage se déroule à notre institut à savoir, l’Institut Supérieur de Gestion de Gabés
(ISGGB).Ce dernier a été créé le 01/07/1998 par le décret N/468 du 23/02/1998 (J.O.R.T) du
03/03/1998 faisant partie de l’Université de Gabés. L’ISGG est un établissement à caractère
administratif, se situant à Rue Jilani El Habib, 6000 Gabés. Le site Web de l’ISGG est
« www.isggb.rnu.tn» et son adresse e-mail est «isggb@isggb.rnu.tn».

Figure1.1 : Photo de l’Institut Supérieur de Gestion Gabés

L’Institut Supérieur de Gestion de Gabés (ISGG) comprend 2200 étudiants qui se répartissent
en 7 filières pour la 1ère année, en 8 filières pour la 2ème année, en 13 filières pour la 3ème

Hamza& Youssef Page 4


Espace étudiant 2017 - 2018

année et en 4 filières de mastère. Notre institut comporte 32 sections de Cours et 78 groupes


de TD.

1.1.2 Méthode d’enseignement et d’apprentissage


La méthode adoptée pour l’enseignement est traditionnelleet centrée sur le cours magistral.
Les étudiants sont passifs,souvent intellectuellement absents du fait des conditions difficiles
imposées par la surcharge horaire. Les principaux moyens mis en œuvre dans ce type
d’enseignement: un cours magistral associé à des travaux dirigés et/ou pratiques, le « tableau
traditionnel » et le support « papier », et parfois électronique.
Par ailleurs, les systèmes traditionnels d'enseignement imposent à tous les apprenants
uneunité de lieu, une unité de temps, une unité d'action, une unité de rythme ce qui implique
une
rigidité des mécanismes et une difficulté d'adéquation avec la réalité quotidienne.

L'étudiant souffre d'une routine négative à travers de longues heures d'étude par jour et un
manque d'activités culturelles et sportives. L'information au sein de l'université peut être
consultée de plusieurs façons, telles que via la page officielle Facebook, le Site Web ou
l'administration. Mais il y a des lacunes dans les sources de l’information à cause de la
présence de plusieurs pages officielles sur Facebook.

Les cours dans les universités tunisiennes ont généralement lieu lorsque l'étudiant a une heure
et demie d'explication tout en prenant la leçon sous la forme présentations imprimées.

Les étudiants peuvent interagir avec leurs enseignants de manière classique grâce à
l'interaction au sein du département ou en envoyant un courriel. Les enseignants suivent le
travail de leurs étudiants en leur donnant des exercices pendant les séances.

Le but de notre projet pour la fin d'études est d’améliorer la qualité de la communication entre
les différentsintervenants de l'université à travers un site web qui offre différents services
utilespour les étudiants.

Hamza& Youssef Page 5


Espace étudiant 2017 - 2018

1.2 Étude critique de l’existant

1.2.1 Site web de l’ISGGB

Figure1.2 : Capture du site web de l’ISGGB

La figure présente le site web de notre institut qui a été crée en 2005 et l’administrateur de ce
site est M. Ramzi Najeh. Il est divisé en trois espaces : enseignant, étudiant et personnel.
Aussi, il affiche l’actualité de l’institut comme les emplois, les résultats, les annonces…. Dans
notre projet de fin d’étude, nous nous intéresserons pour l’espace des étudiants, et la figure
suivante

Hamza& Youssef Page 6


Espace étudiant 2017 - 2018

Figure1.3 : Capture de l’espace étudiant du site webde l’ISGGB

La figure montre l’espace étudiant et les services qui leur sont offerts, à savoir, l’envoi des
demandes pour des documents administratifs.

L’étudiant est l’acteur principal à l’ISGGB. En effet, il faudrait lui présenter différents
services pour faciliter son parcours universitaire.

Nous signalons que le site de l'ISG souffre d'un manque de services orientés vers les étudiants
sachant que c’est pareil pour la plupart des autres établissements universitaires tunisiens.

De plus, la plus grande difficulté trouvée par les étudiants est les travaux pratiques. En effet,
l’étudiant ne peut pas continuer le TP plus d’une séance parce qu’il est impossible de trouver
son travail la séance prochaine à cause du manque de sécurité et d’organisation.

Hamza& Youssef Page 7


Espace étudiant 2017 - 2018

1.2.2 Espace étudiant de l’ESSTSS

Figure1.4 : espace étudiant de l’ESSTSS

IL FAUT LE DECRIRE !

Hamza& Youssef Page 8


Espace étudiant 2017 - 2018

Dans ce cadre, nous citons quelques exemples de sites qui ont le même problème, auxquels
nous avons eu la possibilité d’y accéder :

1.2.2.3 Espace étudiant de la Faculté des Sciences de Sfax

Figure1.5 : espace étudiant du Faculté des Sciences de Sfax

IL FAUT LE DECRIRE !

1.2.2.4 Espace étudiant de l’Université de Carthage

Figure1.6 : Site web de l’Université de carthage Tunis

Hamza& Youssef Page 9


Espace étudiant 2017 - 2018

IL FAUT LE DECRIRE !

Par ces exemplaires, il est clair que l’espace étudiant est défini d’une manière formelle et les
services sont limités à présenter quelques informations personnelles ou d’envoyer une
demande de document ou d’afficher des avis pour les résultats, les emplois, etc. C'est
également le cas pour le site de l’ISGGB, il n'a pas développé ses services bien qu'il y ait des
sections dans le domaine informatique. Mais ce n’est pas le cas pour des autres universités qui
ont amélioré leurs sites web comme celui de « l’Institut Supérieur de Gestion Industrielle de
Sfax ».

1.2.2.4 Espace étudiant de l’Université de Carthage

1.7 : espace étudiant del’ISGI de Sfax

Hamza& Youssef Page 10


Espace étudiant 2017 - 2018

Ce site est caractérisé par les services disponibles à l'étudiant à travers le contenu où il peut
communiquer avec ses enseignants et être informé de toutes les mises à jour telles que les
emplois du temps et les cours en ligne ou suggérer un livre de la bibliothèque.

L’ISG Gabes n’a pas cherché à améliorer son site qui reflète son image devant les autres
établissements universitaires. C’est pourquoi et comme étant des étudiants de 3ème année
IAG, nous cherchons à donner une nouvelle conception de l’espace de communication avec
les étudiants.

1.3 Solution proposée


Puisqu’on vit un développement de services informatiques (service bancaire, service
administratif, etc.), nous visons d’améliorer la communication et la collaboration entre les
déférents acteurs (étudiant, enseignant et administrateur) de l’ISGGB. Ainsi, nous proposons
de concevoir et de développer une application web nommée « Espace Numérique de travail au
profit des étudiants de l’ISGGB » dans le but d’organiser et de faciliter les flux de
communication internes à l’ISGGB et de satisfaire les besoins des étudiants. Cette application
offrira différents services aux étudiants de l'ISG, à savoir :

 Contacter des enseignants


 Télécharger les supports de cours
 Stocker le travail de TP, TD,des mini projets
 Consulter les formations proposées par l’institut
 Consulter l’emploi, le calendrier des examens
 Consulter les nouvelles de l’institut

Hamza& Youssef Page 11


Espace étudiant 2017 - 2018

Chapitre 2: Étude Conceptuelle

Introduction

La phase de conception présente une étape primordiale dans le cycle de développement d’un
projet. En effet, elle permet de mieux comprendre le travail demandé en dégageant les besoins
des différentsutilisateurs que le système doit accomplir.Dans ce chapitre, nous essayons en
premier lieu, d’identifier les différents besoins (fonctionnels et non fonctionnels).En
deuxième lieu, nous élaborerons les principaux diagrammes UML pour la modélisation des
besoins du projet, à savoir le diagramme des cas d’utilisation, les diagrammes de séquence et
le diagramme de classes.En dernier lieu, nous présenterons le schéma logique de la base de
données relationnelle de notre projet accompagné d’une description des règles de passage et
du dictionnaire de données.Ceci constitue un bon moyen pour maitriser la complexité et
d’assurer la cohérence du système.

2.1 Identification des besoins


Dans cette partie, nous présenterons les besoins fonctionnels qui représentent les
fonctionnalités attendues de notre application et les besoins non fonctionnels pour
échapper le développement d’une application non satisfaisante,concerner les
contraintes d'implémentation (langage de programmation, type SGBD, de système
d'Exploitation...) et perfectionner la qualité logicielle du système.

2.1.1 Les besoins fonctionnels


Notre application doit permettre de
Garantir à l’étudiant un moyen simple, pratique et fiable pour la gestion des
services qui le concernent.
Facilter la diffusion des informations utiles par la gestion des documents et des
demandes.

2.1.2 Les besoins non fonctionnels


Les besoins non fonctionnels décrivent toutes les contraintes auxquelles est soumis le système
pour sa réalisation et son bon fonctionnement.Ils représentent une propriété désirée du
système :

Besoin de performance : les performances d’exécution du système sont


généralementdécrites en termes de temps de réponse.Dans notre projet, c’est le

Hamza& Youssef Page 12


Espace étudiant 2017 - 2018

tempsde chargement d’une page dans le navigateur qui ne devrait pas prendre plus de
15secondes en condition normale.
Besoin de disponibilité/fiabilité : Il concerne le niveau de disponibilité qui doit être
explicitement défini pour les applications critiques. Notre projet a une exigence de
disponibilité 24/24, 7/7 sauf période de maintenance.
Besoin de sécurité : il définit les niveaux d’accès possibles au système pour les
utilisateurs du système et les systèmes externes.C’est-à-dire, toute information
confidentielle fournie par les clients via l’Internet sera cryptée avec le système.
Besoin d’utilisabilité : il est généralisé en la possibilité de manipuler, utliser, fournir
l’entrée et interpréter les sorties des programmes.

2.2 Modélisation des besoins du projet


Dans cette section, nous présenterons les principaux diagrammes UML qui modélisent les
besoins de notre projet.

2.2.1 Diagramme des cas d’utilisation

2.2.1.1 Identification des acteurs


Les acteurs de notre systéme sont les suivants :

Etudiant : Cést l’acteur principal dans notre systéme, celui qui peut accéder à l’application
pour déposer des demandes, consulter des documents ou ajouter son travail.

Administrateur : C’est l’acteur qui se charge de gérer (ajouter, modifier, supprimer) les
comptes utilisateur , les documents et les actualités.

Enseignant : c’est l’acteur qui accéde à l’application pour consulter les travaux des étudiants
et ajouter des cours .

2.2.1.2 Identification des cas d’utilisation


Un cas d'utilisation est la description d'un ensemble de séquences d'actions qu'un système
effectue pour produire un résultat observable à un acteur. Un cas d'utilisation représente une
exigence fonctionnelle de notre système dans son ensemble.

S’authentifier : l’utlisateur doit s’authentifier en donnant son login et son mot de passe pour
accéder à l’application.

Gérer compte : ce cas d’utilisation permet à l’utlisateur d’ajouter, consulter, modifier et


supprimer un compte .

Hamza& Youssef Page 13


Espace étudiant 2017 - 2018

Gérer emploi de temps :ce cas d’utilisation permet d’ajouter, consulter et modifier les
emplois .

Gérer clanderier des examens : ce cas d’utilisation permet d’ajouter, consulter et modifier le
calendrier des examens.

Gérer forum : ce cas d’utilisation permet d’avoir un accès à l’actualité de notre institut (les
avis, les événements,les formations,etc.)

Gérer travail : ce cas d’utilisationoffre à l’utilisateur d’ajouter, consulter ou supprimer un


travail.

Gérer contact-enseignant : ce cas d’utilisation aide à trouver l’email d’un enseignant.

Gérer papier administratif : ce cas d’utilisationdonne un accès aux papiers administratifs.

Gérer cours : ce cas d’utilisationfacilite à l’utilisateur de trouver son cours.

En langage UML, le diagramme de cas d'utilisation modélise le comportement d'un système et


permet de capturer les exigences du système.

Hamza& Youssef Page 14


Espace étudiant 2017 - 2018

Figure 2.1 : Diagramme initial des cas d’utilisation

2.2.1.3 Raffinement des cas d’


d’utilisation

Dans cette section, nous détaillons les CU identifiés dans le diagramme initial des CU.

a) Raffinement du cas d’
d’utilisation « Gérer compte »

Hamza& Youssef Page 15


Espace étudiant 2017 - 2018

Figure2.2 : Raffinement du CU « Gérer compte »

b) Raffinement du cas d’utilisation


utilisation « Gérer calendrier des examens »

Figure 2.3 : Raffinement du CU « Gérer calendrier des examens »

Hamza& Youssef Page 16


Espace étudiant 2017 - 2018

c) Raffinement du cas
as d’utilisation « Gérer emploi du temps»

Figure 2.4: Raffinement d


du CU « Gérer emplois du temps »

d) Raffinement du cas d’utilisation « Gérer forum »

Figure 2.5: Raffinement du CU « Gérer forum «

Hamza& Youssef Page 17


Espace étudiant 2017 - 2018

e) Raffinement du cas d’utilisation « Gérer cours »

Figure 2.6: Raffinement du CU « Gérer cours »

f) Raffinement du cas d’utilisatio


d’utilisation « Gérer contact enseignant »

Figure2.7: Raffinement de CU « Gérer Contact enseignant »

Hamza& Youssef Page 18


Espace étudiant 2017 - 2018

g) Raffinement du cas d’utilisation « Gérer papier administratif »

Figure2.8: Raffinement ddu CU «gérer papier administratif «

h) Raffinement du cas d’utilisation


’utilisation « Gérer travail »

Figure 2.9: Raffinement du CU « gérer travail »

Hamza& Youssef Page 19


Espace étudiant 2017 - 2018

2.2.2 Description des cas d’utilisation


Le cas d’utilisation « s’authentifier »

Pré-condition : L’acteur a chargé le site et veut accéder à son espace.

Chemin de base :

1/ L’utilisateur demande de se connecter au système.

2/ Le système affiche le formulaire de connexion.

3/ L’utilisateur remplit le formulaire d’authentification.

4/ Le systèmevérifie le login et le mot de passe.

5/ Le système affiche l’espace de l’utilisateur.

6/ L’instance du cas d’utilisation « s’authentifier » se termine.

Le cas d’utilisation « Ajouter compte »

Pré-condition : L’administrateur s’est déjà authentifié et a demandée d’ajouter un compte.

Chemin de base :

1/ Le système affiche le formulaire d’ajout de compte.

2/ L’administrateur remplit les champs de données du formulaire et valide l’ajout.

3/ Le système vérifie les donnés saisies.

4/ Le système crée le nouveau compte.

5/ L’instance du cas d’utilisation « ajouter compte » se termine.

Le cas d’utilisation « Modifier compte »

Pré-condition : l’administrateur s’est déjà authentifié et a demandé de modifier un compte.

Chemin de base :

1/ L’administrateur accède à l’interface de compte et demande les données de compte.

2/ Le système affiche les données.

3/ L’administrateur sélectionne les données à modifier .

4/ Le système lui affiche une interface contenant des information.

5/ L’administrateur effectue les modifications convenable et valide.

Hamza& Youssef Page 20


Espace étudiant 2017 - 2018

6/ Le systèmevérifie les données saisies.

7/ L’instance du cas d’utilisation « Modifier compte » se termine.

Le cas d’utilisation « Ajouter travail »

Pré-condition : L’étudiant s’est déjà authentifié.

Chemin de base :

1/ L’étudiant accède à l’interface de « mes travaux » et demande d’ajouter un travail.

2/ Le système affiche formulaire d’ajout un travail.

3/ L’étudiant saisie les donnés de son travail et le charge dans le système.

4/ Le système enregistre le travail et ses donnés.

5/ L’instance de cas d’utilisation « Ajouter travail » se termine.

Le cas d’utilisation « Supprimer travail »

Pré-condition : L’étudiant s’est déjà authentifié et a demandé de supprimer un document.

Chemin de base :

1/ Le système affiche la liste des travaux ajoutés par l’étudiant.

2/ L’étudiant choisit le document à supprimé.

3/ Le système affiche un message de confirmation de suppression de document.

4/ L’étudiant confirme la suppression.

5/ L’instance du cas d’utilisation « Supprimer travail » se termine.

Le cas d’utilisation «Consulter contact enseignant »

Pré-condition : L’étudiant s’est déjà authentifié.

Chemin de base :

1/ L’étudiant demande de contacter un enseignant.

2/ Le système affiche la liste des emails des enseignants.

3/ L’étudiant choisit l’email qu’il veut.

4/ Le système oriente l’étudiant vers un lien-email de l’enseignant.

5/ L’instance de cas d’utilisation « Consulter contact enseignant » se termine.

Hamza& Youssef Page 21


Espace étudiant 2017 - 2018

Le cas d’utilisation « Ajouter forum»

Pré-condition : L’administrateur s’est déjà authentifié et a demandé d’ajouter une


actualité.

Chemin de base :

1/Le système affiche le formulaire d’ajout une actualité (une avis,une événement dans
l’institut, des formations...).

2/ L’administrateur remplit le formulaire.

3/ Le système enregistre l’actualité et l’affiche aux différent utilisateurs.

4/ L’instance du cas d’utilisation « ajouter actualité » se termine.

2.3 Diagrammes de séquence


En se basant sur les cas d’utilisation présentés, nous élaborons les diagrammes de séquence
correspondants permettant de représenter les collaborations entre les objets du système selon
un point de vue temporel.

2.3.1 Diagramme de séquence du C.U « S’authentifier »


Ce diagramme de séquence détaille le cas d’utilisation « s’authentifier ». Ce diagramme décrit
le passage pour que tous les acteurs (administrateur,enseignant,étudiant) puissent utiliser le
systéme.

Hamza& Youssef Page 22


Espace étudiant 2017 - 2018

Figure2.10:: Diagramme de séquence du C.U « S’authentifier »

2.3.2 Diagramme de séquence du C.U « Ajouter compte »


Ce diagramme de séquence détaille le cas d’
d’utilisation « Ajouter compte ». Seul,
l’administrateur peut activer,désactiver et supprimer un compte.

Hamza& Youssef Page 23


Espace étudiant 2017 - 2018

Pré-condition : L’utilisateur a accédé au site et a demandé de s’inscrire.

Figure2.11: Diagramme de séquence du C.U « Ajouter compte »

Hamza& Youssef Page 24


Espace étudiant 2017 - 2018

2.3.3
.3 Diagramme de séquence du C.U « Rechercher contact enseignant »
Ce diagramme de séquence détaille le cas d’utilisation « rechercher contact
enseignant ».L’étudiant doit avoir le nom de l’enseignant qu’il veut son email.

Pré-condition : L’enseignant s’est déjà authentifié.

Figure2.12: Diagramme de séquence du C.U »Rechercher Contact enseignant »

2.3.4 Diagramme de séquence


ce du C.U « Ajouter travail »
Ce diagramme de séquence détaille le cas d’utilisation « Ajouter travail ».

Ce diagramme décrit le passage pour que l’étudiant puisse ajouter son travail.

Pré-condition : L’enseignant s’est déjà authentifié.

Hamza& Youssef Page 25


Espace étudiant 2017 - 2018

Figure2.12: Diagramme de séquence du C.U »Ajouter travail »

2.3.5
.5 Diagramme de séquence C.U « supprimer travail »
Ce diagramme de séquence détaille le cas d’utilisation « supprimer travail ».Ce diagramme
décrit le passage pour que l’étudiant puisse supprimer son travail.

Pré-condition : L’enseignant
nseignant s’est déjà authentifié.

Hamza& Youssef Page 26


Espace étudiant 2017 - 2018

Figure2.13: Diagramme de séquence du C.U »Supprimer travail »

2.3.6
.6 Diagramme de séquence C.U « Modifier travail »
Ce diagramme de séquence détaille le cas d’utilisation « modifier travail ».Ce diagramme
décrit le passage pour que l’étudiant puisse modifier son travail.

Hamza& Youssef Page 27


Espace étudiant 2017 - 2018

Pré-condition : L’enseignant s’est déjà authentifié.

Figure2.14: Diagramme de séquence du C.U »Modifier travail »

2.4 Diagramme de classes


+ Description

Éliminer les associations de consultation

N’oubliez pas les noms et cardinalités des associations

Hamza& Youssef Page 28


Espace étudiant 2017 - 2018

Figure2.15: Diagramme de classes

Hamza& Youssef Page 29


Espace étudiant 2017 - 2018

2.5Conception de de la BD

a) Règles de passage

Les règles principales de transformations d’un schéma conceptuel Entité-Relation en un


schéma relationnel sont :

 Régle1 : toute entité est traduite en une relationnelle dont les caractéristiques sont : le
nom de la table est le nom de l’entité , la clé de la table est l’identifiant de l’entité,
les autres attributs de table forment les autres colonnes de la table.
 Régle 2 : Toute relation binaire plusieurs à plusieurs est traduite en une table
relationnelle dont les caractéristique sont : le nom de table est le nom de la relation ; la
clé de la table est formée par la concaténation des identifiants des entités participants à
la relation ; les attributs spécifiques de la relation forment les autres comonnes de la
table.
 Règle 3 : Toute relation binaire un à plusieurs est traduite.

 Soit par un report de clé :


L’identifiant de l’entité participant à la relation côté N est ajouté comme
colonne supplémentaire à la table représentant l’autre entité(clé
étrangère). Les autres attributs spécifiques à la relation sont eux aussi
ajoutés à la même table.
 Soit par une table spécifique dont les caractéristique sont :
Le nom de la table est le nom de relation ; la clé de la table est
l’identifiant de l’entité participant à la relation côté1 ; les attributs
spécifiques de la relation forment les autres colonnes de la table.
 Règle 4 : toute relation binaire un à un est traduite, au choix, par l’une des trois
solutions suivantes :
 Choix1 : fusion des tables des entités qu’elle relie.
 Choix 2 : report de clé d’une table dans l’autre.
 Choix3 : création d’une table spécifique reliant les clés des deux entités.
b) Schéma relationnel de la BD
 Utilisateur (ID_utilisateur, login, password, date de creation, date de modification,
état)
 Administrateur(ID_Admin,#ID_utilisateur,#ID_emplois,#ID_calendrier ,#ID_forum,
#ID_contact_enseignant,#ID_papier)
 Etudiant(ID_etud,Nom_prenom,email,#ID_utilisateur,#ID_travail)
 Enseignant(ID_ens,Nom_prenom_ens,email_ens,#ID_utilisateur,#ID_cours,
#ID_forum,#ID_contact_enseignant)
 Soit vous gardez la table utilisateur et vous éliminez les autres soit vous inversez
 Travail(ID_travail, filiere,matiere, nom_TP, TP_file)

Hamza& Youssef Page 30


Espace étudiant 2017 - 2018

 Emplois du temps(ID_emplois, emplois_image,année,filiere)


 Calendrier des examens (ID_calendrier, calendrier_image,année,filiere)
 Cours(ID_cours, titre,cours_file,auteur,filiere)
 Forum(ID_forum,titre,image,contenu)
 Contact enseignant(ID_contact_enseignant, Nom_enseignanr,email)
 Papier administratif(ID_papier,titre,papier_file)
 Où sont les héritages de clés ????

Conclusion
Dans ce chapitre, nous avons réalisé la modélisation conceptuelle et logique de notre
application. Cette modélisation nous a permis de dégager l’architecture de la solution
ciblée qui sera exploitée lors de son implémentation faisant l’objet du chapitre suivant.

Hamza& Youssef Page 31


Espace étudiant 2017 - 2018

Chapitre 3: Réalisation

Introduction

Après avoir élaboré la conception de notre application, nous abordons dans ce chapitre le
dernier volet de ce rapport, qui a pour objectif d'exposer la phase de réalisation. La phase de
réalisation est considérée comme étant la concrétisation finale de la solution proposée et
conçue. Pour ce faire, nous menons tout d’abord une étude technique où nous décrivons les
ressources logicielles utilisées dans le développement de notre projet puis nous présentons
quelques interfaces réalisées pour illustrer le fonctionnement de quelques fonctionnalités du
système.

3.1 Environnement logiciel

 PgAdmin

pgAdmin est un système complet de conception et de gestion de bases de


données PostgreSQL pour les systèmes Unix et Windows. Il est librement
disponible sous les termes de la Licence PostgreSQL. Le projet est géré
par l'équipe de développement « The pgAdmin ». Ce logiciel a été écrit en
tant que successeur des produits originaux. pgAdmin est écrit en C ++ .

 STAR UML

StarUML est un logiciel de modélisation UML (Unified Modeling


Language) open source . Étant simple d’utilisation, nécessitant peu de
ressources système, ce logiciel constitue une excellente option pour
une familiarisation à la modélisation.

 Systéme d’exploitation
Le systéme d’exploitation utilisé est Microsoft Windows 10
 Microsoft word 2007

Hamza& Youssef Page 32


Espace étudiant 2017 - 2018

Microsoft word 2007 est un outil de traitement de texte.


 Microsoft point 20
2007

Microsoft word 2007 utilisé pour la présentation du projet


 Visuel studio code

Visual Studio Code est un éditeur de code extensible


développé par Microsoft pour Windows, Linux et OS X.
X

 Jhipster

JHipster est un générateur d'application libre et open


source utilisé pour développer rapidement des applications
Web modernes en utilisant Angular et le framework Spring.
*Angular JS :

est un framework JavaScript libre et open


source2 développé par Google. Il permet de développer des pages web.
**Spring :

Spring est un framework libre pour construire et


définir l'infrastructure d'une application java, dont il facilite le
développement et les tests.

* HTML 5 et CSS 3

Hamza& Youssef Page 33


Espace étudiant 2017 - 2018

Le HTML5 est un langage très facile à apprendre. Il est généralement


appris en parallèle du CSS. Afin de visualiser pour mieux comprendre,
le HTML5 vous permettra de coder votre contenue (titre, paragraphe,
menu…) pendant que le CSS le mettra en forme (couleur, choix des
polices de caractère, disposition des éléments …).

* JAVA 2 EE

J2EE est l'acronyme de Java 2 Entreprise Edition. Cette édition est


dédiée à la réalisation d'applications pour entreprises. J2EE est basé sur
J2SE (Java 2 Standard Edition) qui contient les API de base de Java.
Depuis sa version 5, J2EE est renommée Java EE (Enterprise Edition).

* JavaScript

Le JavaScript est un langage informatique utilisé sur les


pages web. Ce langage à la particularité de s'activer sur le poste client,
en d'autres mots c'est votre ordinateur qui va recevoir le code et qui
devra l'exécuter. C'est en opposition à d'autres langages qui sont activé
côté serveur.

Hamza& Youssef Page 34


Espace étudiant 2017 - 2018

3.2 Description des interfaces graphiques


a) Interface initiale

Comme l’illustre la figure, la page d’accueil est une page de bienvenue et donne l’accès pour
connecter ou ajouter un compte.

Figure3.1: Interface initiale « Actualité »

Hamza& Youssef Page 35


Espace étudiant 2017 - 2018

b/Interface d’ajout de compte

A partir de cette interface, l’utilisateur peut ajouter un compte en rempli


remplissant le formulaire
correctement.

Figure3.2: Interface d’ajout de compte

Si les champs saisis ne sont pas valide


valides, alors un message d’erreur s’affiche.

Figure3.3: Scénario d’erreur de l’ajout

Hamza& Youssef Page 36


Espace étudiant 2017 - 2018

c) interface
ace d’authentification

Après avoir créé et activé un compte, l’utilisateur est invité à se connecter.

Figure3.4: Interface d’authentification

Si les champs saisis ne sont pas valides, alors un message d’erreur s’affiche

Figure3.5: Interface d’erreur de l’authentification

Hamza& Youssef Page 37


Espace étudiant 2017 - 2018

d) interface accueil :

A partir de cette interface l’étudiant


étudiant peut consulter tous les menus qui sont lui offerts.

Figure3.6: Interface de l’espace étudiant

e) Interface
nterface de gestion de l’emploi de temps

A partir de cette interface, l’administrateur peut gérer les emplois


mplois de temps.

Hamza& Youssef Page 38


Espace étudiant 2017 - 2018

Figure3.7: Interface de gestion d’emplois de temps

f) Interface de gestion du ccalendrier des examens

A partir de cette interface, l’administrateur peut gérer les calendriers des examens.

Figure3.8: Interface de gestion de calendrier des examens

Hamza& Youssef Page 39


Espace étudiant 2017 - 2018

g) Interface de gestionn des contacts des enseignants

A partir de cette interface, l’administrateur peut gérer les contacts des enseignants.

Figure3.9: Interface de gestion des contacts des enseignants

h) Interface de gestion
on des papiers administratifs

A partir de cette interface, l’administrateur peut gérer les papiers administratifs

Figure3.10: Interface de gestion des papiers administratif


administratifs

Hamza& Youssef Page 40


Espace étudiant 2017 - 2018

i) Interface de gestion dee forum

A partir de cette interface, l’administrateur peut gérer le


les forumss de discussions.
discussions

.Figure3.11: Interface de gestion de forum

j) Interface de gestion des cours

A partir de cette interface, l’enseignant peut gérer cours.

Figure3.12: Interface de gestion des cours

Hamza& Youssef Page 41


Espace étudiant 2017 - 2018

k) Interface
terface de gestion des travaux

A partir de cette interface, l’étudiant peut gérer ses travaux.

Figure3.13: Interface de gestion des travaux

Si l’étudiant veut supprimer un travail, un messa


message
ge de confirmation sera affiché.
affiché

Figure3.13: Interface de suppression de travail

Hamza& Youssef Page 42


Espace étudiant 2017 - 2018

Conclusion

Dans ce chapitre, nous avons pu présenter le résultat de la réalisation de notre application en


exposant l’environnement de développement adopté ainsi que les captures écrans des
principales fonctionnalités de notre système.

Hamza& Youssef Page 43


Espace étudiant 2017 - 2018

Conclusion Générale

Notre projet intitulé « Espace étudiant » consiste en la conception et la réalisation d’une


plateforme web destinée aux étudiants de l’ISGGB qui, contrairement à celui du site web
actuel de l’institut, offre des fonctionnalités plus riches et utiles permettant à la fois de gérer
les services d’apprentissage et de scolarité pour les étudiants ainsi que ceux des enseignants.

En ce qui concerne la démarche, nous avons adoptée, nous avons en premier lieu, effectué une
étude critique de l’existant, nécessitant une recherche soit dans notre institut ou dans les autres
sites web des autres établissements universitaires. En deuxième lieu nous avons spécifions et
modélisé les besoins de notre application.En troisième lieu, nous avons procédé à sa
réalisationen effectuant de nombreux choix technologiques pour le mettre en œuvre.

Ce projet,ou on le peut appeler une aventure, a été pour nous une occasion pour apprendre de
nouveaux langages et de nouveaux outils qui sont difficiles à comprendre au début, mais par
la volonté et le courage, nous étions capables de les utiliser afin de réaliser un espace
numérique pour les étudiants.

Néanmoins, notre projet pourra être amélioré par l’ajout d’autre fonctionnalités comme : le
partage du travail entre les étudiants et les enseignant en se basant sur un outil open source
comme par exemple « GIT HUB », l’amélioration de la partie contact qui peut être parun
système de messagerie interne à l’application.

Finalement, nous espérons que cette application répondra aux besoins de l’ISG et qu’elle sera
intégrée dans son site officiel.

+ Références

Hamza& Youssef Page 44


Espace étudiant 2017 - 2018

Hamza& Youssef Page 45


Espace étudiant 2017 - 2018

Hamza& Youssef Page 46


Espace étudiant 2017 - 2018

Hamza& Youssef Page 47


Espace étudiant 2017 - 2018

3.2 Description des interfaces graphiques :


a/ Interface d’Authentification

Comme l’illustre la figure,L’utilisateur ne peut accéder à son interface qu’à travers un login et
un mot de passe .

Si les champs saisis ne sont pas valides, alors un message d’erreur s’affiche.

Hamza& Youssef Page 48


Espace étudiant 2017 - 2018

b/ Interface : accueil

A partir de cette interface, L’utilisateur peut consulter tous les menus qui sont lui offerts.

Hamza& Youssef Page 49


Espace étudiant 2017 - 2018

c/ Interface : Gestion de l’emplois de temps

A partir de

Hamza& Youssef Page 50

Vous aimerez peut-être aussi