1. Mémoire de Projet de Fin d’Études
LicenceSciencesMathématiqueetInformatique
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

2. 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

3. Mémoire du Projet de Fin d'Etude
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

4. Mémoire du Projet de Fin d'Etude
Remerciement:
4

5. Mémoire du Projet de Fin d'Etude
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

6. Mémoire du Projet de Fin d'Etude
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

7. Mémoire du Projet de Fin d'Etude
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

8. Mémoire du Projet de Fin d'Etude
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

9. Mémoire du Projet de Fin d'Etude
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

10. Mémoire du Projet de Fin d'Etude
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

11. Mémoire du Projet de Fin d'Etude
Chapitre I
CONTEXTE GENERALE DU PROJET
11

12. Mémoire du Projet de Fin d'Etude
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

13. Mémoire du Projet de Fin d'Etude
ChapitreII:
Analyse et spécification
13

14. Mémoire du Projet de Fin d'Etude
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

15. Mémoire du Projet de Fin d'Etude
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

16. Mémoire du Projet de Fin d'Etude
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

17. Mémoire du Projet de Fin d'Etude
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

18. Mémoire du Projet de Fin d'Etude
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

19. Mémoire du Projet de Fin d'Etude
ChapitreIII:
Conception
19

20. Mémoire du Projet de Fin d'Etude
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

21. Mémoire du Projet de Fin d'Etude
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

22. Mémoire du Projet de Fin d'Etude
Authentification :
Figure 7:Diagramme de séquence (authentification)
Inscription :
Figure 8:Diagramme de séquence (inscription)
22

23. Mémoire du Projet de Fin d'Etude
Contact :
Figure 9:Diagramme de séquence (contact)
Commentaire :
Figure 10:Diagramme de séquence (commentaire)
23

24. Mémoire du Projet de Fin d'Etude
Supprimer membre :
Figure 11:Diagramme de séquence (supprimer membre)
Ajouter Livre :
Figure 12:Diagramme de séquence (Ajouter livre)
24

25. Mémoire du Projet de Fin d'Etude
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
Spe Specification arabe ou amazigh 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

26. Mémoire du Projet de Fin d'Etude
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
Spe Specification arabe ou amazigh 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

27. Mémoire du Projet de Fin d'Etude
ChapitreIV:
Réalisation de l'application
27

28. Mémoire du Projet de Fin d'Etude
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

29. Mémoire du Projet de Fin d'Etude
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

30. Mémoire du Projet de Fin d'Etude
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

31. Mémoire du Projet de Fin d'Etude
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

32. Mémoire du Projet de Fin d'Etude
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

33. Mémoire du Projet de Fin d'Etude
Interfaces Messagerie
Figure 16:messagerie
Interfaces Membre
Figure 17:membre
33

34. Mémoire du Projet de Fin d'Etude
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

35. Mémoire du Projet de Fin d'Etude
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

36. Mémoire du Projet de Fin d'Etude
Interfaces Images et vidéos
Figure 22: images et vidéos
Figure 23: images et vidéos
36

37. Mémoire du Projet de Fin d'Etude
Interfaces livres
Figure 24: livres
Interfaces Culture
Figure 25: culture
37

38. Mémoire du Projet de Fin d'Etude
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

39. Mémoire du Projet de Fin d'Etude
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