Download pdf - Rapport pfe licence

Mémoire de Projet de Fin d’Études

Licence Sciences Mathématique et Informatique

Développement d’une encyclopédie sur

l’histoire et la culture Arabe et Amazigh

Soutenu par : Fatima Zahra Fagroud

le 1 juin 2016

Devant la commission d’examen :

Pr. El Habib Benlahmar Professeur à la faculté des sciences Ben M’Sik Encadrant

Pr. Ahmed Eddaoui Professeur à la faculté des sciences Ben M’Sik Examinateur

Année Universitaire : 2015-2016

Mémoire du Projet de Fin d'Etude

Dédicace:

Toutes les lettres ne sauraient trouver les mots qu’il faut…

Tous les mots ne sauraient exprimer la gratitude, l’amour, Le respect, la

reconnaissance… Aussi, c’est tout simplement que Je dédie ce travail…

A ma Tante ARBIA et Mes Grands Parents

Que le bon Dieu le tout Puissant t’accorde Sa sainte Miséricorde et

t’accueille en Son vaste Paradis et vous accorde Janate al Firdaws.

A mes très chers parents

Aucune dédicace ne saurait être assez éloquente pour exprimer la profondeur

Des sentiments d’affection, d’estime et de respect que je vous porte, pour

l’amour dont vous m’avez toujours comblé, l’éducation et le bien être que vous

m’assurez, pour votre soutien, vos sacrifices et vos prières. Aussi fière d’y

appartenir, aussi déterminé à en être digne.

A tous mes amis chacun par son nom

F.Khadija, B.Hamza, A.Zineb,M.Hanane, J.Khalid, C.Rachida, I.Fadoua,

C.Aymen et F.Mohamed ...

Je ne peux trouver les mots justes et sincères pour vous exprimer mon

affection et mes pensées, vous êtes pour moi des frères, sœurs et des amis

sur qui je peux compter

2


A tous mes professeurs

Il vous revient le mérite de nous avoir prodigué un enseignement profitable

et une formation complète. Veuillez accepter mes remerciements les plus sincères.

A mes chers amis et collègues:

Qui font partie de ces personnes rares par leur gentillesse, leur tendresse et leurs

grands cœurs. Qu’ils trouvent ici, le témoignage de tout mon amour et toute ma

reconnaissance pour leur inlassable soutien et pour tous les merveilleux

moments que nous avons passé ensemble dans un environnement familier.

A mes Profs et Encadrant et jurys:

Qui nous ont prodigués de conseils et de sagesse pour réussir notre parcours

et consolider notre formation. Je vous remercie Pour vos encouragements

et votre entière disponibilité.

A tous ceux ou celles qui me sont chers et que j’ai omis involontairement de citer.

A toux ceux qui ont contribué à la réussite de ce travail.

3


Remerciement:

4


Table des matières Dédicace: .......................................................................................................................................................................................................2

Remerciement: ...............................................................................................................................................................................................4

Liste des figures et tables: .............................................................................................................................................................................7

Résumé: .........................................................................................................................................................................................................8

Introduction générale ....................................................................................................................................................................................9

Présentation de la Faculté ......................................................................................................................................................................... 10 Chapitre I ........................................................................................................................................................................ 11

CONTEXTE GENERALE DU PROJET........................................................................................................................ 11

Présentation du Projet: ............................................................................................................................................... 12

Contexte du projet: ................................................................................................................................................. 12

Présentation: ........................................................................................................................................................... 12

Objectif: ................................................................................................................................................................... 12

ChapitreII: ....................................................................................................................................................................... 13

Analyse et spécification .................................................................................................................................................. 13

II-1Etude de l'existant: ................................................................................................................................................ 14

Analyse de l'existant: .............................................................................................................................................. 14

II-2Proposition de différentes solutions: .................................................................................................................... 16

II-3Enoncé du besoin:.................................................................................................................................................. 16

II-4Fonctionnalités du système : ................................................................................................................................. 17

Utilisateurs: ............................................................................................................................................................. 17

II-5Fonctions de Service : ............................................................................................................................................ 18

Fonctions Principales : ............................................................................................................................................ 18

Fonctions Contraintes: ............................................................................................................................................ 18

Fonctions Complémentaires: .................................................................................................................................. 18

II-6 Planification: ......................................................................................................................................................... 18

ChapitreIII: ...................................................................................................................................................................... 19

Conception ...................................................................................................................................................................... 19

III-1 Introduction: ........................................................................................................................................................ 20

III-2 Présentation de UML: .......................................................................................................................................... 20

Pourqoui UML: ........................................................................................................................................................ 20

III-3 Acteur: ................................................................................................................................................................. 20

5


III-4 Diagramme de cas d'utilisation: .......................................................................................................................... 20

III-5 Diagramme de Séquence: .................................................................................................................................... 21

Authentification : .................................................................................................................................................... 22

Inscription : ............................................................................................................................................................. 22

Contact : .................................................................................................................................................................. 23

Commentaire : ........................................................................................................................................................ 23

Supprimer membre : ............................................................................................................................................... 24

Ajouter Livre : .......................................................................................................................................................... 24

III-6 Dictionnaire de données: ..................................................................................................................................... 25

III-7 Diagramme de Classe:.......................................................................................................................................... 26 ChapitreIV: ..................................................................................................................................................................... 27 Réalisation de l'application ............................................................................................................................................. 27

IV-1 Spécifications techniques: ................................................................................................................................... 28

Langages : ................................................................................................................................................................ 28

Outils utilisés: .......................................................................................................................................................... 30

IV-2 Modèle relationnel: ............................................................................................................................................. 31

IV-3 Interfaces graphiques: ......................................................................................................................................... 31

Interface d’authentification .................................................................................................................................... 31

Interfaces " Mode Administrateur " ....................................................................................................................... 32

Interfaces " Mode Membre " .................................................................................................................................. 34

Interfaces " Mode Visiteur ".................................................................................................................................... 35

Conclusion générale: ................................................................................................................................................................................... 38

Bibliographie: ............................................................................................................................................................................................. 39

Webographie: ............................................................................................................................................................................................. 39

6


Liste des figures et tables:

Figure 1:WIKIAMAZIGH ---------------------------------------------------------------------------------------------- 14 Figure 2:LEXILOGOS ARABE --------------------------------------------------------------------------------------- 15 Figure 3:LEXILOGOS Amazigh -------------------------------------------------------------------------------------- 15 Figure 4:Diagramme Bête à cornes ----------------------------------------------------------------------------------- 16 Figure 5:Diagramme de Gant ------------------------------------------------------------------------------------------ 18 Figure 6:Diagramme de cas d'utilisation ---------------------------------------------------------------------------- 21 Figure 7:Diagramme de séquence (authentification) -------------------------------------------------------------- 22 Figure 8:Diagramme de séquence (inscription) -------------------------------------------------------------------- 22 Figure 9:Diagramme de séquence (contact) ------------------------------------------------------------------------- 23 Figure 10:Diagramme de séquence (commentaire) ---------------------------------------------------------------- 23 Figure 11:Diagramme de séquence (supprimer membre) -------------------------------------------------------- 24 Figure 12:Diagramme de séquence (Ajouter livre) ---------------------------------------------------------------- 24 Figure 13:Diagramme de classe ---------------------------------------------------------------------------------------- 26 Figure 14:page d'accueil et d'authentification ---------------------------------------------------------------------- 32 Figure 15: mode administrateur --------------------------------------------------------------------------------------- 32 Figure 16:messagerie ----------------------------------------------------------------------------------------------------- 33 Figure 17:membre -------------------------------------------------------------------------------------------------------- 33 Figure 18: mode membre ------------------------------------------------------------------------------------------------ 34 Figure 19: contact --------------------------------------------------------------------------------------------------------- 34 Figure 20: Quiz ------------------------------------------------------------------------------------------------------------ 35 Figure 21: Mode Visiteur ------------------------------------------------------------------------------------------------ 35 Figure 22: images et vidéos --------------------------------------------------------------------------------------------- 36 Figure 23: images et vidéos --------------------------------------------------------------------------------------------- 36 Figure 24: livres ----------------------------------------------------------------------------------------------------------- 37 Figure 25: culture --------------------------------------------------------------------------------------------------------- 37

7


Résumé:

Le projet à réaliser consiste à créer une encyclopédie sur l'histoire et la culture arabe et amazigh. Elle doit contenir un ensemble d'information , je cite :

articles

images

vidéos

livres

quiz

Trois types d’utilisateurs ont l’accès à l’application, administrateur , membre et

visiteur. l'administrateur gère l'application et effectue des modifications. Membre,

selon ses droits d’accès,consulte et a le droit d'interaction avec l'administrateur. Alors

que visiteur, consulte l'encyclopédie.

Enfin, pour réaliser cette application, j’ai utilisé la technologie JEE.

8


Introduction générale

Au fil des siècles, le mot « Encyclopédie » a pris différentes formes et plusieurs sens possibles. Encore aujourd’hui la notion est loin d’être épuisée. Essayons de nous pencher sur ces définitions:

– Le mot « Encyclopédie » apparaît au 16ème siècle et vient du grec « ekuklios paideia »,

littéralement: « instructions données à l’enfant » et « ce qui fait le tour ». Une volonté d’instruire et un savoir capable de faire le tour des connaissances (idée de cercle)

– Diderot et d’Alembert au 18ème siècle vont à travers leur Encyclopédie lui donner un autre

sens: « l’ouvrage où on traite de toutes les connaissances humaines dans un ordre

alphabétique ou méthodique ». Ces deux philosophes classent les idées en créant un

ensemble de liaisons capable de lier les connaissances les unes avec les autres. On retrouve

ici l’ancêtre des liens hypertextes qu’utilisent les encyclopédies numériques en ligne.

– Henri Meschonic apporte une vision intéressante de l’Encyclopédisme au sens où le 18ème

siècle l’entend: Le savoir est vu comme un « cercle fini de connaissances ». La définition

reste fichée dans le présent. L’Encyclopédie ne peut donc pas être envisagée comme un

projet d’avenir.

– Olivier Ertzscheid tout comme Henri Meschonic mettent en miroir la notion de

Bibliothèque et celle d’Encyclopédie, dans la mesure où pour ces deux auteurs la Bibliothèque n’a pas de fin, elle supplante donc l’Encyclopédie voué à la finitude.

Le travail présenté dans ce mémoire s’inscrit dans ce contexte. l'objectif est de concevoir et

de mettre en place une plateforme web qui propose un ensemble d'information et de

connaissance sur l'histoire at la culture arabe et amazigh.

9


Présentation de la Faculté

La Faculté des Sciences Ben M’Sick a ouvert ses portes en 1984. Elle est rattachée à

l’Université Hassan II - Casablanca qui regroupe six établissements universitaires.

Dès son ouverture, la Faculté des Sciences Ben M’Sik a accordé un intérêt particulier au

développement de la recherche scientifique parallèlement à sa mission d’enseignement et

de formation.

De 1984 à 2003, la FSBM a dispensé divers formations de type premier cycle (DEUG)

et deuxième cycle (Licences es-sciences : Bac+4) dans divers spécialités.

A partir de 1989, les premières formations de 3ème cycle (CEA et DES) ont commencé

grâce à la mise en place d’un certain nombre d’équipes et de laboratoires de recherche.

Depuis 2003, la faculté des sciences Ben M'Sik dispense une formation modulaire et

semestrielle dans le cadre de la réforme pédagogique de l'enseignement supérieur

conformément au système LMD. Dans le cadre de la structuration de la recherche, que

l’Université Hassan II – Casablanca, la Faculté des Sciences Ben M’Sik a procédé à une

nouvelle organisation et restructuration de ses équipes et laboratoires de recherche. C’est

ainsi que la recherche à la faculté des sciences s’est organisée en 23 laboratoires et 2

équipes de recherches.

En 2008, suite à la réorganisation du cycle doctorat, La faculté des Sciences Ben M’Sik

a mis en place le Centre d’Etude Doctoral (CED): « Sciences et applications ». Ce centre

est adossé à l’ensemble des structures de recherches accréditées par l’université.

10


Chapitre I

CONTEXTE GENERALE DU PROJET

11


Présentation du Projet:

Contexte du projet:

Le terme Recherche d’Information (RI) est une adaptation hélas un peu approximative du

terme anglo-saxon Information Retrieval Comme beaucoup de termes techniques ou

scientifiques d’origine étrangère, leur traduction « mot à mot » n’est pas fidèle ; pour être

précis, il faudrait, au travers du mot « retrieval », exprimer en un mot français la notion de «

quête d’information » et de « processus de recherche » associé. À part de lourdes

périphrases, aucun terme moins insatisfaisant que « recherche » n’a été proposé pour

l’instant. Mais l’essentiel est sans doute de s’entendre sur ce qu’on entend par Recherche

d’Information en tant que domaine scientifique. Dans sa définition la plus large, la RI a pour

thème central l’étude de modèles et systèmes d’interaction entre des utilisateurs humains et

des corpus de documents numériques, en vue de la satisfaction de leurs besoins

d’information. Il est intéressant de noter que ce domaine a figuré parmi les premières

applications importantes de l’informatique ; la vérité des années 50, qui plaçait déjà la

maîtrise de l’information scientifique et technique au centre de la stratégie de développement

des Etats-Unis, n’a fait bien sûr que prendre encore plus de valeur aujourd’hui, en se

doublant d’une dimension socio-culturelle forte, engendrée par la révolution d’Internet, liée à

l’ouverture de l’information numérique au grand public.

Présentation:

Le projet consiste à réaliser un site web qui présente l’histoire (suites d’événements, des faits

réels, des états marquants) et la culture (Ensemble des aspects intellectuels artistiques et des

idéologies d’une civilisation ou d’un groupe particulier) sous forme d’une encyclopédie.

Il est destiné aux étudiants universitaires de l’histoire et visiteurs qui ont une curiosité pour

savoir l’historique des arabes et amazighs

Objectif:

L’objectif est de faciliter l’accès aux informations, donner une idée sur l’histoire et la culture

Arabe et Amazigh, d’enrichir la culture générale des visiteurs en plus d’aider les étudiants de

l’histoire dans leurs recherches.

12


ChapitreII:

Analyse et spécification

13


II-1Etude de l'existant:

Analyse de l'existant:

Les encyclopédies de façon traditionnelle: un ensemble de livres représentant un sujet dans

on ne peut pas y obtenir facilement en raison du prix ou qu'il ne sont pas disponible dans le

monde entier.

Les encyclopédies numériques sont indépendante on trouve une difficulté dans la recherche

à cause du besoin de plusieurs navigation afin d'enrichir et compléter les idées en plus

d'abscence de guide pour les recherches approfondies dans le domaine .

wikimazigh:

C'est un site web gratuit qui permet au visiteur d'avoir les principales informations sur les

berbéres a partir des documents spécifié par domaines

Figure 1:WIKIAMAZIGH

14


lexilogos:

C'est un site web gratuit qui permet au visiteur d'avoir les principales informations sur les

berbéres et les arabes a partir des documents spécifié par les pays et par les événements

indiqué par leur dates.

Figure 2:LEXILOGOS ARABE

Figure 3:LEXILOGOS Amazigh

15


II-2Proposition de différentes solutions:

L’étude de l’existant m'a permis de dégager plusieurs anomalies que j'avais détailles

dans la section précédente. Pour faire recours à ces anomalies je propose de concevoir et

d’implémenter une encyclopédie qui permet d'avoir tous les informations pour une recherche

approfondie ou pour l'enrichissement de la culture générale en plus d'offrir toutes les moyens

pour comprendre par exemple ajouter des vidéos .

le site:

soit basée sur des pages web dynamiques ce qui permettra l'enrichissement du contenu a chaque fois qu'il aura une nouveauté

doit être rapide et riche d'informations et permet une interaction entre l'administrateur et les utilisateurs

doit permettre une simple navigation

Regroupe les fonctionnalités de toutes les applications présentées dans l’étude de l’existant.

II-3Enoncé du besoin:

Diagramme « Bête à cornes »

Figure 4:Diagramme Bête à cornes

16


II-4Fonctionnalités du système :

Utilisateurs:

Administrateurs :

Un seul utilisateur qui a le rôle de gérer et modifier le site. C’est le premier admin inscrit et

il a un logo et mot de passe précis.

S’authentifier

Déposer des articles

Mettre des vidéos et des images

Déposer des livres

Supprimer un commentaire

Consulter les messages

Poser de nouveaux tests avec leurs

corrections Supprimer un membre

Visiteurs :

L’utilisateur peut naviguer sur le site sans s’inscrire mais s’il veut commenter ou contacter

l’administrateur ou faire le test il doit être un membre.

S’inscrire

Consulter les articles

Consulter les livres

Consulter les vidéos et les images

Membres :

L’utilisateur doit s’identifier par sont login et mot de passe afin de se connecter et bénéficier

des services offert.

S’authentifier

Saisir un commentaire

Envoyer un message

Passer Quiz

Voir la correction

Consulter les articles

Consulter les livres

Consulter les vidéos et les images

17


II-5Fonctions de Service :

Fonctions Principales :

Offrir des informations.

Proposer des livres pour les recherches.

Définir l’histoire et les cultures.

Fonctions Contraintes:

Personne ne peut modifier dans le site sauf l’administrateur.

Le mot de passe ne doit pas dépasser 30 caractères.

Le login ne doit pas commencer par -, _ ou & et ne doit pas dépasser 30 caractères.

Administrateur est le seul qui peut consulter les messages reçu.

Livres existants.

Liens correctes.

Facilité de l’accès.

Fonctions Complémentaires:

Nom pour le site.

II-6 Planification:

Afin de mieux comprendre le déroulement de ce projet, je présente dans la figure

suivante le diagramme de Gantt de la planification élaboré, qui montre les péripéties du

projet dans l’ordre chronologique ainsi que les tâches réalisées.

Figure 5:Diagramme de Gant

18


ChapitreIII:

Conception

19


III-1 Introduction:

En effet, les différents diagrammes réalisés dans cette partie schématisent les fonctionnalités

offertes par la solution ainsi que leurs déroulements. Loin du code, cette représentation est un

moyen de communication entre le maître d’ouvrage et le développeur.

III-2 Présentation de UML:

UML (Unified Modeling Language), 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 la fusion de plusieurs méthodes existant auparavant, et devenu désormais

la référence en terme de modélisation.

Pourqoui UML:

Un des tout premiers avantages d'UML est de faire se rencontrer et communiquer utilisateurs

et informaticiens, ce qui n'est pas le moindre des bénéfices du langage. UML permet

également - outre le fait de se concentrer sur l'utilisateur - de documenter très clairement les

besoins exprimés par ces derniers, dans le cadre d'une gestion de projet de développement qui

va de la conception jusqu'au déploiement de l'application dans le réseau.

III-3 Acteur:

Un acteur est l’archétype de l’utilisateur (personne, processus externe, ...) qui interagit avec

le système

User: simple visiteur du site

membre: membre du site qu'il a plus de service que User

Admin: c'est lui qui gére le site

III-4 Diagramme de cas d'utilisation:

Le diagramme de cas d’utilisation représente la structure des grandes fonctionnalités

nécessaires aux utilisateurs du système

Role:

Donne une vue du système dans son environnement extérieur

Définit la relation entre l’utilisateur et les éléments que le système met

en oeuvre

Est la base du modèle UML

20


Figure 6:Diagramme de cas d'utilisation

III-5 Diagramme de Séquence:

Un diagramme de séquence est un diagramme d'interaction qui expose en détail la façon dont

les opérations sont effectuées : quels messages sont envoyés et quand ils le sont. Les

diagrammes de séquence sont organisés en fonction du temps. Le temps s'écoule au fur et à

mesure que vous parcourez la page. Les objets impliqués dans l'opération sont répertoriés de

gauche à droite en fonction du moment où ils prennent part dans la séquence de messages.

21


Authentification :

Figure 7:Diagramme de séquence (authentification)

Inscription :

Figure 8:Diagramme de séquence (inscription)

22


Contact :

Figure 9:Diagramme de séquence (contact)

Commentaire :

Figure 10:Diagramme de séquence (commentaire)

23


Supprimer membre :

Figure 11:Diagramme de séquence (supprimer membre)

Ajouter Livre :

Figure 12:Diagramme de séquence (Ajouter livre)

24


III-6 Dictionnaire de données:

Classe Attribut description Type

Admin Id_ad Id de l'administrateur entier

Nom Nom de l'administrateur Chaine de caractère

Prenom Prénom de l'administrateur Chaine de caractère

Email Email de l'administrateur Chaine de caractère

Login_ad Identifiant de l'administrateur Chaine de caractère

Password_ad Mot de passe de l'administrateur Chaine de caractère

Article Id id de l'article entier

Chemin url de l'article Chaine de caractère

Domaine Partie concernant l'article Chaine de caractère

Spe Specification arabe ou amazigh Chaine de caractère

Nom Nom de l'article Chaine de caractère

Commentaire Id id du commentaire entier

Login Login du membre Chaine de caractère

Commentaire commentaire Chaine de caractère

Image Id_i id de l'article entier

Chemin_i url de l'image Chaine de caractère


Livre Id_l id du livre entier

Titre Titre du livre Chaine de caractère

Auteur Auteur du livre Chaine de caractère

url_l url du livre Chaine de caractère

Librairie Librairie qui a édité le livre Chaine de caractère

Type Specification manuel ou en ligne Chaine de caractère

Membre Id id de l'article entier

Nom Nom du membre Chaine de caractère

Prenom Prénom du membre Chaine de caractère

Email Email du membre Chaine de caractère

Login Identifiant du membre Chaine de caractère

Password Mot de passe du membre Chaine de caractère

Message Id id du message entier

Email Email du destinateur Chaine de caractère

msg_txt Message Chaine de caractère

25


question Id_qu id de la question entier

Id_q id du quiz entier

Text Question Chaine de caractère

quiz Id_q id du quiz entier

Note Note maximale du quiz entier

reponse Id_r id de la reponse entier

Id_qu id de la question entier

Text_r Reponse Chaine de caractère

Res Specification vrai ou faux Chaine de caractère

videos Id_v id de la vidéo Entier

Chemin url de la vidéo Chaine de caractère


Tableau 1:Dictionnaire de données

III-7 Diagramme de Classe:

Le diagramme de classe permet de représenter l’ensemble des informations finalisées qui sont

gérées par le domaine. Ces informations sont structurées, c’est-à-dire qu’elles ont regroupées

dans des classes. Le diagramme met en évidence d’éventuelles relations entre ces classes

Figure 13:Diagramme de classe

26


ChapitreIV:

Réalisation de l'application

27


IV-1 Spécifications techniques:

Langages :

Html5 :

Il s'agit d’une version du langage HTML, avec de nouveaux éléments, attributs et

comportements ; mais aussi un ensemble plus large de technologies qui permettent des sites

web plus variés et puissants, et des applications web. Cet ensemble est parfois

appelé HTML5 & Cie et souvent juste abrégé en HTML5.

Conçu pour être utilisable par tous les développeurs de l'Open Web, cette page de référence

fait des liens vers de nombreuses ressources sur les technologies HTML5, classés dans

différents groupes d'après leur fonction.

Sémantique : vous permet de décrire précisément votre contenu.

Connectivité : vous permet de communiquer avec le serveur d'une façon nouvelle et

innovante.

Hors-connexion & stockage : permet aux pages web de stocker des données sur le client et

de fonctionner plus efficacement hors-connexion

Multimédia : Rendre la vidéo et l'audio des citoyens de premier plan sur l'Open Web

Rendu 2D/3D et effets : permet des options de présentation bien plus variés

Performance & intégration : offre une puissance bien plus grande et une meilleure

utilisation du matériel de l'ordinateur

Accès aux périphériques : permet un usage varié des périphériques d'entrées et de sorties

Style : permet aux auteurs d'écrire des thèmes plus sophistiqués

Css3 :

Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2.1.

Il s’agit par exemple d’un ensemble de nouveaux effets à appliquer sur nos éléments HTML.

Vous verrez dans cet article à quel point il est simple de réaliser des effets

visuels impressionnants en quelques lignes.

Mais le CSS3 c’est également un ensemble de nouveaux sélecteurs, de nouvelles manières de

spécifier les couleurs, une détection des caractéristiques de l’appareil de l’utilisateur, des

calculs dans les feuilles de style, des SVG en arrière plan… bref, le CSS3 est un généreux

enrichissement des feuilles de style qui, en plus d’être profitable à l’utilisateur.

28


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. L'exécution du code est effectué par votre navigateur internet tel que Firefox ou

Internet Explorer.

L'une des choses primordiale à savoir est de bien se rendre compte que le JavaScript n'a

aucun rapport avec le Java qui est un autre langage informatique.

La particularité du JavaScript consiste à créer des petits scripts sur une page HTML dans le

but d'ajouter une petite animation ou un effet particulier sur la page. Cela permet en général

d'améliorer l'ergonomie ou l'interface utilisateur, mais certains scripts sont peu utile et

servent surtout à ajouter un effet esthétique à la page. L'intérêt du JavaScript est d'exécuté un

code sans avoir à recharger une nouvelle fois la page.

Technologie J2EE:

J2EE (Java 2 Enterprise Edition) est l'extension serveur de la plate-forme J2SE (Java

2 Standard Edition) de SUN.

J2EE est une plate-forme de développement qui permet de développer des applications Web

composées de Servlet et JSP et des applications Métiers à base d'EJB.

J2EE est également une spécification destinée aux éditeurs de logiciels qui désirent créer des

Serveurs d'Applications compatibles J2EE.

Un Serveur d'Applications contient un conteneur Web pour l'exécution des applications

Web et un conteneur d'EJB pour l'exécution des composants Métiers.

De plus, le Serveur d'Application fournis un ensemble de services utilisés par

les développeurs dans les applications.

Ces services sont entres autres :

- JTA (Java Transaction API) : service de gestion des transactions distribuées - JMS (Java Messaging Service) : service de gestion des messages asynchrones - JNDI (Java Naming and Directory Interface) : service de noms (annuaire) de référencement

des objets - JDBC (Java DataBase Connectivity) : service de gestion des connexions aux bases

de données - ...

29

http://glossaire.infowebmaster.fr/html/


Ajax :

AJAX est l'acronyme d'Asynchronous JavaScript and XML, ce qui, transcrit en

français, signifie « JavaScript et XML asynchrones ».

Derrière ce nom se cache un ensemble de technologies destinées à réaliser de rapides mises

à jour du contenu d'une page Web, sans qu'elles nécessitent le moindre rechargement visible

par l'utilisateur de la page Web. Les technologies employées sont diverses et dépendent du

type de requêtes que l'on souhaite utiliser, mais d'une manière générale le JavaScript est

constamment présent.

Outils utilisés:

SERVEUR DE L’APPLICATION : TOMCAT 7.0

«Tomcat est un serveur d'applications Java. Nous avons déjà présenté ce qu'est

une application web. Elle permet de générer une réponse HTML à une requête après avoir

effectué un certain nombre d'opérations (connexion à une base de données, à un annuaire

LDAP...). Pour le client (un navigateur web en général), il n'y a pas de différence avec

une page web statique : il reçoit toujours du HTML, seul langage qu'il comprend. Seule la

manière dont la réponse est formée côté serveur change.

Les requêtes, pour le client, ne diffèrent pas non plus. Qu'il souhaite accéder à une ressource statique ou à une application web, il utilise toujours une URL au même format (standard HTTP). C'est donc côté serveur que la distinction doit s'opérer»

SYSTÈME DE GESTION DE BASE DE DONNÉES : MYSQL

«MySQL est un système de gestion de bases de données relationnelles (SGBDR). Il est

distribué sous une double licence GPL et propriétaire. Il fait partie des logiciels de gestion de

base de données les plus utilisés au monde, autant par le grand public (applications web

principalement) que par des professionnels, en concurrence avec Oracle, Informix et

Microsoft SQL Server.»

IDE : Eclipse Mars

«Eclipse est un environnement de développement intégré libre extensible, universel et

polyvalent, permettant de créer des projets de développement mettant en œuvre n'importe quel

langage de programmation. Eclipse IDE est principalement écrit en Java (à l'aide de la

bibliothèque graphique SWT, d'IBM), et ce langage, grâce à des bibliothèques spécifiques, est

également utilisé pour écrire des extensions.»

30

http://www-igm.univ-mlv.fr/~dr/XPOSE2003/tomcat/tomcat.php?rub=2


Autres Logiciels:

En plus des logiciels cités en dessus j’ai utilisé d’autres logiciels qui sont :

Easy PHP

ArgoUML

MS Project 2010

IV-2 Modèle relationnel:

Le mapping objet Relationnel permet de générer à partir du diagramme de classes la base de

données suivante :

admin(id_ad,Nom,Prenom,Email,Login_ad,Password_ad)

article(id,chemin,domaine,spe,nom)

commentaire(id,#Login,commentaire)

image(id,chemin_i,spe)

livre(id_l,titre,auteur,url_l,librairie,type)

membre(id,Nom,Prenom,Email,Login,Password)

message(id,email,msg_txt)

videos(id_v,chemin_v,spe)

quiz(id_q,note)

question(id_qu,#id_q,text)

reponse(id_r,#id_qu,text_r,res)

IV-3 Interfaces graphiques:

l’application est utilisé par trois types de user :

Admin

Membre

Simple utilisateur

Chacun des utilisateurs a ses propres interfaces, pour cela j'ai partagé la partie concernant les

interfaces en trois catégories :

Catégorie 1 : Mode Administrateur

Catégorie 2 : Mode Membre

Catégorie 3 : Mode Utilisateur

Interface d’authentification

Pour que l’accès au page soit limité aux personnes autorisées plusieurs identifiant sont

demandé. Tout d’abord il y a le login à savoir le nom et le mot de passe du visiteur.

31


Figure 14:page d'accueil et d'authentification

Après l’interface authentification on accédé à notre application selon le type d’utilisateur :

Admin

Membre

Simple utilisateur

Interfaces " Mode Administrateur "

Après l’authentification, l'administrateur accède directement à l’interface « Mode

Administrateur» qui permet à la fois d’accéder directement et aussi de gérer le site :

Figure 15: mode administrateur

32


Interfaces Messagerie

Figure 16:messagerie

Interfaces Membre

Figure 17:membre

33


Interfaces " Mode Membre "

Après l’authentification, le membre accède directement à l’interface « ModeMembre» qui

permet à la fois d’accéder directement et aussi d'interagir avec l'administrateur:

Figure 18: mode membre

Interfaces Contact

Figure 19: contact

34


Interfaces Quiz

Figure 20: Quiz

Interfaces " Mode Visiteur "

si l'utilisateur a besoin d'une simple consultation du site ,il peut accèder directement à

l’interface « Mode Visiteur» qui permet d’accéder directement et aussi offrir la possibilité se

s'inscrire:

Figure 21: Mode Visiteur

35


Interfaces Images et vidéos

Figure 22: images et vidéos

Figure 23: images et vidéos

36


Interfaces livres

Figure 24: livres

Interfaces Culture

Figure 25: culture

37


Conclusion générale:

En effet, ce projet était une étape très importante dans mon cycle de formation vu qu’il

était une occasion très intéressante et bénéfique pour savoir comment appliquer sur le

plan pratique des connaissances théoriques déjà acquises et aussi il ma permis

d’acquérir de nouvelles connaissances techniques.

Au même temps, j'ai appris l’importance de la recherche et de la communication pour

l’obtention des bonnes informations. Ainsi que l’importance de la gestion du temps et

de la planification des tâches pour le bon déroulement des travaux. Et grâce à un

environnement favorable pour le travail et la coordination d’efforts, j'ai pu réaliser le

projet demandé.

C’est vrai que ce travail peut s’étendre encore plus, mais le fait d’être arrivées à ce

stade dans le projet me donne plus de confiance en soi-même et m'encourage à

continuer, vu les problèmes que j'ai confrontés pour apprendre des nouveaux langages

et outils de travail.

38


Bibliographie:

Pascal Roques UML2:Modéliser une application web

Thierry Templier & Arnaud Gougeon JavaScript pour le Web 2.0

Jean Engels HTML5 et CSS3

Webographie:

https://encyclopedienumerique.wordpress.com/2008/11/08/quest-ce-quune-encyclopedie-essai-de-definitions/

https://www.cairn.info/revue-document-numerique-2007-1-page-11.htm

https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/l-ajax-qu-est-ce-que-c-est

http://www.html5-css3.fr/css3/introduction-css3#part1

https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5

http://www.dicodunet.com/definitions/developpement/j2ee.htm http://nebula-

web.com/technologies/mysql.html

http://hebergement.u-psud.fr/distribution/logiciels-libres/dev-web-a-programmation/398-eclipse-environnement-de-developpement-java.html

http://www-igm.univ-mlv.fr/~dr/XPOSE2003/tomcat/tomcat.php?rub=25

39