WOW !! MUCH LOVE ! SO WORLD PEACE !
Fond bitcoin pour l'amélioration du site: 1memzGeKS7CB3ECNkzSn2qHwxU6NZoJ8o
  Dogecoin (tips/pourboires): DCLoo9Dd4qECqpMLurdgGnaoqbftj16Nvp


Home | Publier un mémoire | Une page au hasard

 > 

Conception et création d'un générateur de pages web personnelles pour les enseignants

( Télécharger le fichier original )
par Hachem Sghairi
Ecole Supérieure des Sciences et Techniques de Tunis  - Diplôme de Licence Fondamentale en Informatique 2010
  

Disponible en mode multipage

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






Bitcoin is a swarm of cyber hornets serving the goddess of wisdom, feeding on the fire of truth, exponentially growing ever smarter, faster, and stronger behind a wall of encrypted energy