|
Projet de Fin d'Etudes ESSTT
Table des matières
INTRODUCTION GENERALE 6
CHAPITRE I : PRESENTATION GENERALE 7
1. Introduction 7
2. Environnement de stage 7
3. Présentation du projet 7
3.1 Problématique 7
3.2 Objectifs 7
4. Conclusion 8
CHAPITRE II : DEFINITION ET ANALYSE DES BESOINS
9
1. Introduction 9
2. Définition des besoins 9
2.1 Présentation des acteurs 9
2.2 Les besoins fonctionnels 9
2.2.1 La partie Enseignant: 9
2.2.2 La partie Administrateur: 10
2.3 Les besoins non fonctionnels 10
3. Définition des cas d'utilisation 10
3.1 Choix du langage de modélisation 10
3.2 Le langage de modélisation UML 10
3.3 Diagramme de cas d'utilisation 11
3.4 Les acteurs du système 11
3.5 Les Cas d'utilisation 11
4. Description des cas d'utilisation 12
4.1 Cas d'utilisation détaillé de l'enseignant
13
4.2 Cas d'utilisation détaillé de l'administrateur
14
4.3 Cas d'utilisation détaillé de l'internaute
15
1 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
4.4 Cas d'utilisation du système 15
5. Réalisation des cas d'utilisation 17
5.1 Diagramme d'activité 17
6. Conclusion 17
CHAPITRE III : CONCEPTION DE L'APPLICATION 18
1. Conception de la base de données 18
1.1 La méthode merise 18
1.2 Description des tables 18
1.3 Dictionnaire de données 19
1.3.1 Table enseignant 19
1.3.2 Table Internaute 20
1.3.3 Table Admin 20
1.3.4 Table Page 20
1.3.5 Table Publication 21
1.3.6 Table Diplôme 21
1.3.7 Table matière 21
1.3.8 Table Thème_recherche 21
1.4 Le modèle conceptuel des données (MCD) 22
1.5 Modèle logique des données (MLD) 24
2. Conception du site web 25
2.1 Diagrammes de séquence 25
2.1.1 Diagramme de séquence relatif à l'inscription
de l'enseignant 25
2.1.2 Diagramme de séquence relatif à
l'authentification 27
2.1.3 Diagramme de séquence relatif à la
création de la page personnelle 28
2.1.4 Diagramme de séquence relatif à la
modification de la page personnelle 29
3 Conclusion 30
CHAPITRE IV : REALISATION 31
1. Introduction 31
2. Environnement de développement 31
2.1 Environnement matériel 31
2.2 Environnement logiciel 31
2.3 Outils de développement utilisés 32
2 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
2.3.1 Les langages de programmation 32
2.3.2 Qu'est-ce qu'un système de gestion de données
? 32
2.3.3 Comparaison entre PHP, JSP et ASP 33
3. Description du travail réalisé 34
3.1 Page d'accueil 34
3.2 Page authentification 35
3.3 Espace enseignant 36
3.3.1 Page inscription 36
3.3.2 Page Espace enseignant 37
3.3.3 Page Création de la page web 38
3.4 Espace Administrateur 40
3.4.1 Page Espace administrateur 40
4. Conclusion 41
CONCLUSION GENERALE 42
BIBLIOGRAPHIE 43
ANNEXE 44
3 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Table des figures
Figure 1 : Diagramme de cas d'utilisation
globale 12
Figure 2 : Diagramme de cas d'utilisation de
l'enseignant 13
Figure 3 : Diagramme de cas d'utilisation de
l'administrateur 14
Figure 4 : Diagramme de cas d'utilisation de
l'internaute 15
Figure 5 : Diagramme des cas d'utilisation
détaillé 16
Figure 6 : Diagramme d'activités 17
Figure 7 : Le modèle conceptuel de
données (MCD) 23
Figure 8 : Diagramme de séquence «
inscription utilisateur » 25
Figure 9 : Diagramme de séquence «
Authentification » 27
Figure 10 : Diagramme de séquence «
création de la page personnelle » 28
Figure 11 : Diagramme de séquence «
modification de la page personnelle » 29
Figure 12 : Page d'accueil. 34
Figure 13 : Interface d'authentification de
l'utilisateur 35
Figure 14 : Interface Inscription enseignant
36
Figure 15 : Interface Espace enseignant 37
Figure 16 : Interface d'informations
personnelles 38
Figure 17 : Interface d'informations
professionnelles 39
Figure 18 : Espace administrateur 40
Figure 19 : Interface Gestion des comptes 41
Figure 20 : Thèmes 45
4 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Tables des Tableaux
Tableau 1 : table Enseignant 19
Tableau 2 : Table Internaute 20
Tableau 3 : Table Admin 20
Tableau 4 : Table Page 20
Tableau 5 : table publication 21
Tableau 6 : table Diplôme 21
Tableau 7 : table Matière 21
Tableau 8 : Table Thème_recherche 21
Tableau 9 : Comparaison entre PHP, JSP et ASP
33
5 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Introduction Générale
Ce rapport entre dans le cadre de la réalisation d'un
projet de fin d'étude en licence fondamentale d'informatique.
Plusieurs enseignants veulent publier leurs informations
professionnelles et avec la propagation d'utilisation de l'internet ces
informations deviennent plus accessibles et plus faciles depuis l'internet.
L'administration de L'ESSTT se propose d'intégrer dans
son site web des pages qui contiennent les informations personnelles et
professionnelles de chaque enseignant. La création (et l'actualisation)
des pages pour environ deux cents enseignants est une tâche qui
nécessite une automatisation de sorte que chaque enseignant puisse
créer et accéder à sa propre page.
Il s'agit de créer un générateur de pages
web qui permet à tout enseignant de l'ESSTT de générer une
page web personnelle destinée à tout type d'informations
(personnelles et professionnelles) en remplissant un formulaire
prédéfini.
Apres l'introduction, le rapport comporte un premier chapitre
consacré à une présentation générale du
projet et on y présentera les différentes solutions existantes et
on fera le point sur la solution choisie.
Le deuxième chapitre aura pour objet la définition
et l'analyse des besoins. Le troisième chapitre présente la
conception de l'application.
Le dernier chapitre portera sur la réalisation ; on y
mentionnera les environnements de développement, de conception et
d'implémentation et on y exposera quelques interfaces graphiques de
l'application.
6 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Chapitre I : Présentation
générale
1. Introduction
Ce chapitre est consacré à la
présentation de l'ESSTT où s'est déroulé ce projet
de fin d'études) et aussi de faire une présentation du projet,
ensuite on va poser la problématique et les différents objectifs
à atteindre.
2. Environnement de stage
Ce stage a été effectué à l'Ecole
Supérieure des Sciences et Techniques de Tunis (ESSTT) qui est l'une des
institutions de l'Université de Tunis. Depuis sa création en
1994, elle oeuvre à la promotion de la qualité et la
diversité dans la formation ainsi la créativité et
l'innovation dans la recherche, à travers l'ouverture et la
flexibilité dans ses relations avec le milieu industriel. L'ESSTT offre
plusieurs formations spécialisées, qui permettent l'obtention des
licences appliquées et fondamentales, de la Maîtrise et de
diplômes Troisième Cycle qui permettent l'accès à
des études avancées et multiplient la chance des étudiants
dans le marché de l'emploi.
3. Présentation du projet
3.1 Problématique
Le site web de L'ESSTT, qui compte 200 enseignants-chercheurs,
ne contient aucune page pour ces enseignants. Ceux-ci n'étant pas tous
spécialisés dans le domaine de l'informatique, la création
d'une page peut leur paraitre une tâche difficile.
La création (et la modification) de pages web pour
environ 200 enseignants est un exercice non sans difficulté; automatiser
la tâche permet à chaque enseignant de créer sa propre
page. A titre individuel les logiciels de création des pages web ne
manquent pas; toutefois et dans ce cas, il s'agit de concevoir un modèle
de page précis à intégrer au site (même
modèle à appliquer pour tout le monde)
3.2 Objectifs
L'objectif principal est de créer un
générateur de pages web qui permettra à tout enseignant de
l'ESSTT de s'y inscrire et de créer une page web personnelle
destiné à contenir toute les informations personnelles nom,
prénom, email, date de naissance, adresse, téléphone,
etc... et professionnelles telles que fonction actuelle, département,
matières, thème de recherche, publications, etc... en remplissant
un formulaire prédéfini avec la possibilité de choisir un
thème.
7 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
4. Conclusion
On a présenté dans ce chapitre le contexte de ce
travail, ainsi que la problématique à traiter. Le reste du
rapport sera organisé de la façon suivante :
> Analyse et définition des besoins
> Conception de l'application
> Réalisation
8 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Chapitre II : Définition et analyse des
besoins
1. Introduction
Ce chapitre détaille la spécification et
l'analyse du site dans le cadre de ce projet. Il se présente comme
étant le cahier des charges de l'application à concevoir et
à développer Il présente aussi une partie analytique qui
précède la phase de conception et correspond aux diagrammes
UML.
Ce chapitre contient les points suivants :
> Définition des besoins
> Définition des cas d'utilisation.
> Description des cas d'utilisation
> Réalisation des cas d'utilisation
2. Définition des besoins 2.1 Présentation
des acteurs :
Un acteur représente une personne, un matériel ou
un logiciel qui interagit directement avec le système en question.
Les acteurs qui participent à ce système sont:
Les utilisateurs : ils représentent les
enseignants de l'ESSTT qui ont des droits d'accès Limités.
L'administrateur : il représente un agent
administratif de l`école possédant tous les droits d'accès
pour interagir avec le système.
2.2 Les besoins fonctionnels
L'analyse des besoins fonctionnels a amené à
décomposer ces besoins en deux parties principales :
2.2.1 La partie Enseignant:
Ce site permet aux enseignant de :
> S'inscrire dans le site : saisie le login, le mot de passe
et l'émail.
> Crée une page personnelle : Une page contient des
informations personnelles telles que nom, prénom, email, date de
naissance, adresse, téléphone... et des informations
professionnelles telles que fonction actuelle, département, thème
de recherche, publications...
> Choisir un thème pour sa page.
9 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
> Modifier les informations de la page.
2.2.2 La partie Administrateur:
Le rôle de l'administrateur consiste à :
> Mettre à jour la base de données : modifier
certains enregistrements qui se trouvent dans la base de données du site
à travers des interfaces appropriées.
> Accepter ou refuser les demandes d'inscription des
enseignants
> Nettoyer la base de données : supprimer les pages des
enseignants qui ne sont plus dans l'établissement.
2.3 Les besoins non fonctionnels
Les besoins non fonctionnels représentent les exigences
implicites auquel le système doit répondre. Parmi ces besoins on
cite :
> Le système doit être simple à
utiliser.
> Le déplacement entre les pages doit être souple
et facile.
> le système doit assurer une bonne interface qui donne
aux administrateurs et aux internautes l'envie d'y visiter.
3. Définition des cas d'utilisation
3.1 Choix du langage de modélisation
Pour développer une application il faut d'abord organiser
ses idées, les documenter, pour organiser la réalisation on
définissant les modules et les étapes de la
réalisation.
On appelle cette démarche
modélisation.
Pour bien définir les fonctionnalités de cette
application, on a choisi le langage UML qui parait la meilleure solution pour
modéliser les différents objets du système.
3.2 Le langage de modélisation UML
UML (Unified modiling Language) [1], que l'on
peut traduire par langage de modélisation unifié est une notation
permettant de modéliser un problème de façon standard.
Ce langage est né de fusion de plusieurs méthodes
existantes auparavant et est devenu désormais la référence
en terme de modélisation objet.
Le langage UML fourni une panoplie d'outils permettant de
représenter l'ensemble des éléments du mode objet
(classes, objets,...) ainsi que les liens qui les relient. Toutefois,
étant donnée qu'une seule représentation est trop
subjective, UML fourni un moyen astucieux permettant de représenter
diverses projection d'une même représentation grâce aux
vues.
Une vue est constituée d'un ou de plusieurs diagrammes. On
distingue deux types de vues : Les vues statiques,
représentent le système physiquement :
10 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
> Diagramme d'objets.
> Diagramme de classes.
> Diagramme de cas d'utilisation.
> Diagramme de composants.
> Diagramme de déploiement.
Les vues dynamiques, montrent le fonctionnement
du système : > Diagramme de séquence.
> Diagramme de collaboration.
> Diagramme d'états transitions.
> Diagramme d'activités.
3.3 Diagramme de cas d'utilisation
Le diagramme de cas d'utilisation permet de décrire
l'interaction entre le système et son utilisateur, c'est un moyen de
description des besoins des utilisateurs du système.
3.4 Les acteurs du système
Un acteur est un utilisateur du système qui communique et
interagit avec les cas d'utilisation, en envoyant et échangeant des
données.
Les types des acteurs sont :
> Humain : Utilisateur du système à travers son
interface graphique.
> Logiciel : Utilisateur du système grâce
à une interface logicielle.
> Matériel : Il s'agit d'un automate qui exploite les
données du système.
La navigation dans ce générateur de page est
faite par deux acteurs principaux : Les enseignants de l'ESSTT,
l'administrateur et un acteur secondaire : les internautes (étudiants,
enseignants...)
3.5 Les Cas d'utilisation
Les cas d'utilisation permettent de représenter le
fonctionnement du système vis-à-vis de l'utilisateur. Il s'agit
d'une vue du système dans son environnement extérieur. Chaque cas
d'utilisation peut être spécifié sous forme de
séquence d'informations entrantes et sortantes, indiquant l'aspect
dynamique du système.
Pour ce site on est arrivé à élaborer le
diagramme des cas d'utilisation suivant :
11 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
«include>>
Internaute
Naviguer
consultation de la
Page
«include>>
Authentification
«include>>
Figure 1 : Diagramme de cas d'utilisation
global
Enseignant
Gérer le site
Administrateur
4. Description des cas d'utilisation
Dans la figure1, on introduit le diagramme de cas d'utilisation
global relatif à l'élaboration de ce site. Ce diagramme va
être présenté à la suite d'une manière plus
détaillée.
Pour faire la description des cas d'utilisation, on va faire
recours à l'établissement des diagrammes de cas d'utilisation qui
représentent les interactions entre le système et les acteurs.
12 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
4.1 Cas d'utilisation détaillé de
l'enseignant
Figure 2 : Diagramme de cas d'utilisation de
l'enseignant
Le diagramme ci-dessus présente les opérations dont
bénéficie l'utilisateur enseignant. Ce dernier peut, tout
d'abord, s'inscrire dans le site, puis créer sa page personnelle.
Toutefois, il peut modifier, ajouter et supprimer des
informations ou le thème de son page.
13 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
4.2 Cas d'utilisation détaillé de
l'administrateur
Figure 3 : Diagramme de cas d'utilisation de
l'administrateur
Le diagramme de la figure 3 présente les opérations
que l'administrateur doit les accomplir. Après son identification
l'administrateur peut :
> Mettre à jour la base de données, actualiser
les différents champs du page ou supprimer les pages des enseignants qui
ne sont plus dans l'établissement.
> Modifier, supprimer ou ajouter des thèmes.
14 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
4.3 Cas d'utilisation détaillé de
l'internaute
Figure 4 : Diagramme de cas d'utilisation de
l'internaute
Le diagramme ci-dessus présente la seule opération
dont bénéficie l'internaute simple : S'inscrire dans le site,
puis consulter les pages des enseignants.
4.4 Cas d'utilisation du système
On a voulu par ce diagramme représenter les besoins des
utilisateurs par rapport au système. Les cas d'utilisation de ce
diagramme ne présentent pas de solutions d'implémentation, ils
identifient uniquement les utilisateurs et leur interactions avec le
système. Finalement on peut dire qu'ils permettent de classer les
acteurs et de structurer les objectifs du système.
15 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Figure 5 : Diagramme des cas d'utilisation
détaillé
16 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
5. Réalisation des cas d'utilisation
5.1 Diagramme d'activitéUML permet de
représenter graphiquement le comportement d'une méthode ou le
déroulement d'un cas d'utilisation, à l'aide de
diagramme d'activités. Une activité représente une
exécution d'un mécanisme, un déroulement d'étapes
séquentielles.
Le passage d'une activité vers une autre est
matérialisé par une transition.
Les transitions sont déclenchées par la fin d'une
activité et provoquent le début immédiat d'une autre.
Figure 6 : Diagramme d'activités
6. Conclusion
Une fois les besoins sont spécifiés et
analysés, l'étape suivante consiste à commencer la
conception de l'application, en utilisant la méthode merise pour la
conception de base de données et UML pour la représentation des
différents scénarios.
17 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Chapitre III : Conception de l'application
L'analyse des besoins, qui donne une compréhension
détaillée des besoins, impose une structure du système
qu'on doit préserver tout au long de son développement. Ainsi, il
m'a permet de cerner et clarifier les besoins des différents acteurs
agissant avec le système. Dans ce chapitre, on va présenter
l'architecture globale du système, puis la conception de la base de
donnée et enfin la conception du site.
1. Conception de la base de données
Pour la mise en place d'un projet, il faut concevoir une base
de données bien structurée et bien organisée, tâche
qui facilite ensuite l'exploitation (ajout, mis à jour et recherche de
données).
La phase de conception nécessite des méthodes
permettant de mettre en place un modèle sur lequel on va s'appuyer. La
modélisation consiste à créer une représentation
virtuelle d'une réalité de telle façon à ressortir
les points auxquels on s'intéresse.
La méthode MERISE est la plus adéquate pour la
modélisation de cette application.
1.1 La méthode merise
MERISE est une méthode de conception, de
développement et de réalisation des projets informatiques. Le but
de cette méthode est d'arriver à concevoir un système
d'information.
La méthode Merise est basée sur la
séparation des données et des traitements à effectuer en
plusieurs modèles conceptuels et physiques. Elle est aussi une
méthode systématique complète qui répond
efficacement aux problèmes posés par la conception de
système d'information en assurant la cohérence
générale des informations.
La méthode Merise propose trois niveaux de
représentation d'un système d'information : > Le niveau
conceptuel (abstract).
> Le niveau organisationnel (logique).
> Le niveau opérationnel (physique).
1.2 Description des tables
En tenant compte des fonctionnalités que doit assurer ce
site, on a conçu une base de données qui respecte les principes
suivants :
> Pour stocker les informations concernant l'enseignant ainsi
que ses informations d'authentification, une table Enseignant a
été prévue.
> Une table nommée Admin a été
créée pour y stocker les informations d'authentification de
l'administrateur.
18 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
> Pour stocker les informations concernant l'internaute, une
table Internaute a été prévue.
> La table Page a été conçue de
façon à ce qu'on puisse y mémoriser les données de
la page web personnelle des enseignants.
> Une table nommée Publication a
été créée pour y stocker les informations des
publications des enseignants tels que : type, titre, auteurs, date...
> Une table nommée Diplôme a
été créée pour y stocker les informations
concernant les diplômes acquis par l'enseignant.
> Une table Matière est réservée
pour la stockage des matières enseignée par chaque enseignant.
> La table Theme recherche a été
créé pour y stocker les thèmes de recherche des
enseignants.
1.3 Dictionnaire de données
1.3.1 Table enseignant
|
CHAMP
|
TYPE
|
CONTRAINTE
|
|
Login
|
varchar(30)
|
PRIMARY_KEY
|
|
AdresseMail
|
varchar(30)
|
|
|
Password
|
varchar(30)
|
|
|
Nom
|
Text
|
|
|
Prenom
|
Text
|
|
|
Telephone
|
varchar(30)
|
|
|
Adresse
|
varchar(30)
|
|
|
DateNaissance
|
Date
|
|
|
Equipe
|
Text
|
|
|
Département
|
Text
|
|
|
Fonction
|
Text
|
|
Tableau 1 : table Enseignant
19 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
1.3.2 Table Internaute
|
CHAMP
|
TYPE
|
CONTRAINTE
|
|
Login
|
varchar(30)
|
PRIMARY_KEY
|
|
AdresseMail
|
varchar(30)
|
|
|
Password
|
varchar(30)
|
|
|
Nom
|
text
|
|
|
Prenom
|
text
|
|
|
Date
|
Date
|
|
|
Adresse
|
varchar(30)
|
|
Tableau 2 : Table Internaute
1.3.3 Table Admin
|
CHAMP
|
TYPE
|
CONTRAINTE
|
|
Login
|
varchar(30)
|
PRIMARY_KEY
|
|
Password
|
varchar(30)
|
|
Tableau 3 : Table Admin
1.3.4 Table Page
|
CHAMP
|
TYPE
|
CONTRAINTE
|
|
Page_id
|
Int
|
PRIMARY_KEY
|
|
Thème
|
Int
|
|
Tableau 4 : Table Page
20 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
1.3.5 Table Publication
|
CHAMP
|
TYPE
|
CONTRAINTE
|
|
Publication_id
|
Int
|
PRIMARY_KEY
|
|
Type
|
Text
|
|
|
Title
|
Text
|
|
|
Author
|
Text
|
|
|
Booktitle
|
Text
|
|
|
Date
|
Date
|
|
Tableau 5 : table publication
1.3.6 Table Diplôme
Int
CHAMP
|
TYPE
|
CONTRAINTE
|
|
diplome_id
|
Int
|
PRIMARY_KEY
|
|
Diplôme
|
Text
|
|
|
Université
|
Text
|
|
|
Année
|
|
|
Tableau 6 : table Diplôme
1.3.7 Table matière
|
CHAMP
|
TYPE
|
CONTRAINTE
|
|
Matiere_id
|
Int
|
PRIMARY_KEY
|
|
Libelle_matière
|
varchar(30)
|
|
Tableau 7 : table Matière 1.3.8
Table Thème_recherche
|
CHAMP
|
TYPE
|
CONTRAINTE
|
|
Theme_recherche_id
|
Int
|
PRIMARY_KEY
|
|
Libelle_theme_recherche
|
varchar(30)
|
|
Tableau 8 : Table Thème_recherche
21 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
1.4 Le modèle conceptuel des données
(MCD)
Le modèle conceptuel des données (MCD) a pour
but d'écrire de façon formelle les données qui seront
utilisées par le système d'information. Il s'agit d'une
représentation des données, facilement compréhensible
permettant de décrire le système d'information à l'aide
d'entités.
22 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Diplomeid Libelle_diplome
Université
Annee
0,1
Publier
Possède
1,n
Posséde
1,n 1,1
0,n
Enseignant
Login AdresseMail Password Nom
Prenom DateNaissance Adresse Fonction
Equipe depatement telephone
1,1
Theme_recherche
Themerechercheid Theme_recherche_libelle
Diplôme
Matière
matiereid libelle_matiere
1,n
1,n
0,n
Participe
Publication
Publicationid Type
Title
Author
Booktitle Date_Publication
1,1
Enseigner
Page
Pageid Theme
0,n
1,1
0,n
Internaute
Login AdresseMail Password
Nom
Prenom
Date
Adresse
Gérer
Admin
1,n
Login Password
Consulter
Figure 7 : Le modèle conceptuel de
données (MCD)
23 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
1.5 Modèle logique des données (MLD)
Le modèle logique des données (MLD) est
l'ensemble des règles de conception et de concepts qui permettent la
description des données. On va représenter les entités et
les relations sous forme de tables en appliquant les règles
algorithmiques qui transforment les entités et les associations en
relations en tenant compte des cardinalités. Les
propriétés seront des attributs et les identifiant des
clés primaires.
Les tables déduites de notre MCD sont les suivants :
Enseignant (Login, AdresseMail,
password, nom, prénom, téléphone dateNaissance, adresse,
Equipe, département, fonction)
Internaute (Login, AdresseMail,
password, nom, prenom, date, adresse)
Admin (Login, Password)
Page (Page id, #Login,
thème)
Publication (Publication_id, #login,
type, title, author, booktitle, date_Publication) Diplômes
(Diplôme id, #login, Libelle_diplome,
université, Année)
Matière (Matiere id,
#login, Libelle_matiere)
Theme_recherche (theme recherche
id, #nom, #prénom, theme_recherche_libelle)
(NB : les clés primaires sont soulignés et les
clés étrangère sont précédés par
#)
24 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
2. Conception du site web 2.1 Diagramme de
séquence
Le diagramme de séquence représente la
succession chronologique des opérations réalisées par un
acteur : saisir une donnée, consulter une donnée, lancer un
traitement, etc. Il indique les objets que l'acteur va manipuler, et les
opérations qui font passer d'un objet à l'autre.
2.1.1 Diagramme de séquence relatif à
l'inscription de l'enseignant
Figure 8 : Diagramme de séquence «
inscription utilisateur »
25 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Le diagramme représenté dans la figure 8
décrit les scénarios possibles lors d'une inscription
d'utilisateur (internaute simple ou enseignant). En effet :
> L'utilisateur demande l'accès au site.
> Le système lui affiche une interface qui contient des
champs vides. > L'utilisateur remplit les champs vides.
> Le système vérifie la validité des
champs.
> Une série de tests doit être
réalisée (login existe, tester email, tester mot de passe, tester
matricule pour les enseignants). Si tous les champs sont corrects, alors le
système prend en charge les informations introduites et les enregistrent
dans la base de données et permet à l'internaute d'accéder
à la totalité du site.
> Si l'inscription n'est pas valide, l'utilisateur doit soit
réinscrit soit quitter le site.
26 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
2.1.2 Diagramme de séquence relatif à
l'authentification »
Figure 9 : Diagramme de séquence «
Authentification »
Le diagramme de la figure 9 décrit les scénarios
possibles lors de l'identification d'utilisateur (internaute simple, enseignant
ou administrateur) :
> L'utilisateur demande l'accès au site et donne le
login et le mot de passe. > Un test doit être réalisé
(existence et compatibilité du login/mot de passe)
> Si les données sont correctes alors permette à
l'internaute d'accéder à la totalité du site.
> Si les données ne sont pas correctes est pas valide,
l'utilisateur doit soit réessayer soit quitter le site.
27 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
2.1.3 Diagramme de séquence relatif à la
création de la page personnelle :
Figure 10 : Diagramme de séquence
« création de la page personnelle »
Le diagramme ci-dessus décrit les scénarios
possibles lors de la création d'une page web. En effet :
> L'enseignant demande l'accès au site.
> Le système lui affiche une interface qui contient des
champs vides. > L'utilisateur remplir tous les obligatoires vides.
> Le système vérifie la validité des
champs.
28 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
> Si tous les champs sont corrects, alors le système
prend en charge les informations introduites et les enregistrent dans la base
de données et crée la page web.
> Si les données ne sont pas correctes est pas valide,
l'utilisateur doit soit réessayer soit quitter le site.
2.1.4 Diagramme de séquence relatif à «
modification de la page personnelle »
Figure 11 : Diagramme de séquence
« modification de la page personnelle »
Le diagramme ci-dessus décrit les scénarios
possibles lors de la création d'une page web. En effet :
29 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
> L'enseignant demande l'accès au site.
> Le système lui affiche une interface qui contient les
données de sa page web déjà créée.
> L'utilisateur actualise tous les champs
désirés. > Le système vérifie la validité
des champs.
> Si tous les champs sont corrects, alors le système
prend en charge les informations
introduites et les enregistrent dans la base de données et
actualise la page web.
> Si les données ne sont pas correctes est pas valide,
l'utilisateur doit soit réessayer soit quitter le site.
3 Conclusion
Dans ce chapitre, la conception de la base de données
est élaborée avec la méthode Merise. La conception du site
web est réalisée avec le diagramme de classe et les diagrammes de
séquences. On arrive à la phase finale de ce rapport qui est la
réalisation et dans laquelle on aura la représentation de
l'environnement matériel, le choix du langage de programmation et
l'architecture de l'application avec ses différentes vus.
30 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Chapitre IV : Réalisation
1. Introduction
Après avoir achevé l'étape de conception
de l'application, on va entamer dans ce chapitre la partie réalisation
qui constitue le dernier volet de ce rapport et qui a pour objectif d'exposer
le travail réalisé. Pour ce faire, on va commencer tout d'abord
par préciser l'environnement matériel et logiciel de ce travail.
Ensuite, on va présenter le travail accompli tout au long de ce projet
pour enchaîner sur une exposition des problèmes
rencontrés.
2. Environnement de développement
Dans cette partie on présentera l'environnement
matériel et logiciel, ainsi que les outils de développement.
2.1 Environnement matériel :
Pour la réalisation de ce projet on a disposé de
:
> Un ordinateur de type HP équipé d'un
microprocesseur Intel(R) Core(TM)2 Duo CPU E7200 @ 2.53GHz, possédant
1,00 Go de RAM et de 320Go d'espace de disque.
2.2 Environnement logiciel : Les logiciels utilisés
sont :
> Windows 7.
> WampServer : La version 2.0 contient un serveur web apache
et un serveur base de données MySQL.
> Création web : Macromedia Dreamweaver 8.
> Modélisation conceptuelle PowerAMC.
> Langage de modélisation : UML.
31 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
2.3 Outils de développement utilisés 2.3.1
Les langages de programmation
Le développement d'une application web dynamique
demande l'inclusion de script et de code pour garantir le dynamisme des pages
et la liaison avec la base de données. Pour la réalisation de ce
projet on a choisi le langage PHP.
Langage PHP : c'est un langage compilé
(à partir de la version 5) et exécuté du côté
serveur (comme les scripts de CGI, ASP,...) et non du côté client
(un client écrit en JavaScript ou une applet Java s'exécute sur
votre ordinateur). La syntaxe du langage provient de celles du langage C, du
Perl et du Java. Ses principaux atouts sont :
> La simplicité d'écriture des scripts.
> La possibilité d'inclure le script PHP au sein
d'une page HTML (contrairement aux scripts CGI, pour lesquels il faut
écrire des lignes de code pour afficher chaque ligne en langage
HTML).
> La simplicité d'interfaçage avec des bases de
données (de nombreux SGBD sont supportés, mais le plus
utilisé avec ce langage est MySQL)
> L'intégration au sein de plusieurs serveurs web
(Apache, Microsoft IIS,...)
JavaScript : c'est un langage de programmation
qui est inclu dans le code HTML. Il permet d'apporter des améliorations
au langage HTML en permettant d'exécuter des commandes.
[2]
JQuery : c'est une bibliothèque
Javascript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX)
et HTML, et qui a pour but de simplifier des commandes communes de Javascript
[2].
2.3.2 Qu'est-ce qu'un système de gestion de
données ? C'est un ensemble de programmes et de logiciels
permettant : > La définition des données.
> La manipulation des données : mise à jour et
consultation. > La sécurité et l'intégrité des
données.
32 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
> La gestion des transactions et des accès.
> La récupération de toutes les données
jusqu'à un point où la cohérence est certaine en cas de
défaillance du système.
MySQL : C'est un SGBD qui permet la gestion
efficace d'une grande base de données ainsi qu'une bonne
diversité de choix des types de données. MySQL assure aussi la
sécurité et l'intégrité des données de la
base. Les principaux atouts de MySQL sont la rapidité, la robustesse et
la facilité d'utilisation.
2.3.3 Comparaison entre PHP, JSP et ASP
|
PHP
|
JSP
|
ASP
|
|
Système d'exploitation
|
Linux/Unix, Windows...
|
Linux/Unix, Windows...
|
Windows (uniquement).
|
|
Serveur web
|
Apache, PWS/IIS, Xitami.
|
Tomcat.
|
PWS/IIS (uniquement).
|
|
Utilisation
|
Les scripts PHP sont gérés
aussi simplement que les
fichiers HTML.
|
On doit définir des zones hébergeant les scripts
JSP et mettre les classes d'un côté et les scripts de l'autre.
|
On doit définir des zones hébergeant les scripts
ASP.
|
|
Langage
|
Proche du C
|
A base de JAVA
|
Proche de VB
|
|
Connexion aux
bases de données
|
Directement via les API
(Application and programming
Interface). En contrepartie,
les
appels diffèrent d'une
bibliothèque commune à
toutes les bases).
|
Via les drivers JDCB (les mêmes appels quelques soit la
base de données mais une interface
supplémentaire entre la
base et le script).
|
Via les drivers ODBC.
|
Tableau 9 : Comparaison entre PHP, JSP et ASP
[3]
33 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
3. Description du travail
réalisé
Cette partie est consacrée à la description de
phase de réalisation et d'implémentation de ce projet, on va
présenter quelques interfaces afin d'illustrer plus clairement les
diverses utilisation de l'application
3.1 Page d'accueil
La page d'accueil, illustrée dans la figure ci-dessous,
du site comporte un menu, qui permet l'accès direct à l'ensemble
des fonctionnalités qui aident les visiteurs du site à manipuler
leurs besoins, et un corps de page qui contient des informations
représentant l'ESSTT.
Figure 12 : Page d'accueil.
34 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
3.2 Page authentification
Pour accéder à son compte, l'enseignant doit
cliquer sur la rubrique "Connexion" de la page d'acceuil. Une page
d'authentification apparait, le visiteur doit entrer correctement son login et
son mot de passe pour passer à l'éspace enseignant.
Figure 13 : Interface d'authentification de
l'utilisateur
A partir de la page connexion, le visiteur peut s'identifier en
tant qu'administrateur ou en tant qu'enseignant.
35 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
3.3 Espace enseignant 3.3.1 Page inscription
Pour accéder aux services offerts par le site,
l'utilisateur doit s'authentifier avant de pouvoir bénéficier des
fonctionnalités qui lui sont offertes. Si c'est la première
visite alors il doit s'inscrire comme le montre la figure ci-dessous.
Figure 14 : Interface Inscription enseignant
36 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
3.3.2 Page Espace enseignant
Une fois l'opération d'inscription est terminée,
l'enseignant peut profiter les services offerts par le site, il pourra
créer ou modifier sa page et aussi consulter les pages des autres
enseignants.
Figure 15 : Interface Espace enseignant
37 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
3.3.3 Page Création de la page web
La création de la page personnelle de l'enseignant se fait
en deux étapes : Saisir les informations personnelles et ensuite saisir
les informations professionnelles.
Figure 16 : Interface d'informations
personnelles
38 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Après avoir rempli le formulaire concernant les
informations personnelles, l'enseignant se charge de compléter les
informations professionnelles (département, matières,
diplômes, thème de recherche, publications, etc.).
Figure 17 : Interface d'informations
professionnelles
39 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
3.4 Espace Administrateur 3.4.1 Page Espace
administrateur
Figure 18 : Espace administrateur Le rôle
de l'administrateur consiste à :
> Mettre à jour la base de données : modifier
certains enregistrements qui se trouvent dans la base de données du site
à travers des interfaces appropriées.
> Accepter ou refuser les demandes d'inscription des
enseignants.
> Actualiser la structure de la page : actualiser les
différents champs de la page.
> Nettoyer la base de données : supprimer les pages des
enseignants qui ne sont plus dans l'établissement.
40 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
3.4.2 Page Gestion des comptes
Après l'inscription de l'enseignant il attend la
validation de son inscription.
L'administrateur vérifie les données introduites
par les enseignants en attente et accepte ou refuse les demandes d'inscription
des enseignants.
Figure 19 : Interface Gestion des comptes
4. Conclusion
On a vu dans ce chapitre les environnements logiciels et
matériels sur lesquels s'est basé ce travail. On a
justifié les choix considérés pour aboutir à la
réalisation de ce projet ainsi que quelques captures d'écran. On
présentera dans ce qui suit la conclusion générale.
41 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Conclusion générale
Ce rapport s'inscrit dans le cadre d'un projet de fin
d'étude élaboré au sein de l'Ecole Supérieure des
Sciences et Techniques de Tunis (ESSTT). Il aboutit à la conception et
la création d'un générateur de pages web personnelles pour
les enseignants de l'ESSTT.
De ce fait, un travail important de recherche sur Internet et
une étude minutieuse sur les outils de travail ont été
faits afin de dégager les différents besoins et exigences du
public cible et de choisir l'architecture informatique la mieux adaptée
au système. Ce travail m'a été bénéfique du
fait qu'il m'a permis d'élargir mes connaissances des nouvelles outils
tel PHP, AJAX, base de données MySQL, ainsi que Dreamweaver. Ces outils
m'ont ouvert des horizons sur le Net et sur la programmation destinée au
Web.
Le projet réalisé permet à tout
enseignant de l'ESSTT de concevoir une page web personnelle destinée
à tout type d'informations (personnelles et professionnelles) en
remplissant un formulaire prédéfini avec la possibilité de
choisir un thème. Cette page peut être modifié et
régénérer grâce aux interfaces appropriées,
avec la possibilité d'actualiser sa page à tout moment.
Actuellement, les thèmes des pages sont
prédéfinis, je compte développer ce travail en
intégrant un module de génération automatique de
thèmes. En effet l'administrateur peut modifier le thème suite
à une modification du site intégrant les pages des enseignants.
Cette modification donne la nécessité de modifier le thème
des pages afin qu'elles s'adaptent avec le reste du site, d'où le besoin
de ce générateur de thèmes.
42 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Bibliographie
[1] James Rumbaugh, Ivar Jacobson et Grady Boosh, «The
Unified Modeling Language Reference Manual», edition 1998.
[2]
http://www.wikipedia.com
[3] Le guide des langages Web
http://www.laltruiste.com
[4] Apprendre à programmer avec PHP
http://www.manuelphp.com
[5] Domaine web : Html, JavaScript :
http://www.allhtml.com
[6] MySQL : base de données utilisée dans le monde
Internet.
http://www.mysql.com
43 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
ANNEXE
jQuery
jQuery est une bibliothèque JavaScript
libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML,
et a pour but de simplifier des commandes communes de JavaScript. La
première version date de janvier 2006.
jQuery se présente comme un unique fichier de 155 ko (24
ko dans sa version compressée). Le Framework contient notamment les
fonctionnalités suivantes :
· Parcours et modification du DOM (y compris le support des
sélecteurs CSS 1 à 3 et un support basique de XPath);
· Événements ;
· Effets et animations ;
· Manipulations des feuilles de style en cascade
(ajout/suppression des classes, d'attributs...) ;
· AJAX ;
· Plugins ;
· Utilitaires (version du navigateur...).
Usage
jQuery existe sous forme d'un fichier JavaScript contenant
toutes les fonctions de bases. Il peut être inclus dans toute page web en
utilisant le code suivant :
<script type="text/javascript"
src="/chemin/vers/jQuery.js"></script>
La bibliothèque jQuery peut être appelée de
deux manières différentes :
· via la fonction $. Cette fonction est chaînable
(elle retourne l'objet appelant). Par exemple :
$("div.test").add("p.quote").addClass("blue").slideDown("slow");
· via le préfixe de fonction $.. Par exemple :
$.each([1,2,3], function() {
document.write(this + 1);
});
44 Sghairi Hachem
Projet de Fin d'Etudes ESSTT
Thèmes
Figure 20 : Thèmes
45 Sghairi Hachem
| 
