Vous êtes sur la page 1sur 117

REPUBLIQUE ALGERIENNE DEMOCRATIQUE ET POPULAIRE

MINISTERE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA


RECHERCHE SCIENTIFIQUE

UNIVERSITE MOULOUD MAMMERI DE TIZI-OUZOU


FACULTE DU GENIE ELECTRIQUE ET INFORMATIQUE
DEPARTEMENT INFORMATIQUE

De fin d’Etudes En vue de l’obtention du diplôme


De Master En Informatique

Conception et réalisation d’un site web


social et collaboratif pour le
département informatique

Proposé et dirigé par : Réalisé par :


Mr M.OUAMRAN Melle : AMITOUCHE Sabrina
Melle : BOUMRAR Samira

2013/2014
Remerciements

Avant tout, nous remercions Dieu qui nous a donné la foi, la santé, le
courage et la volonté pour terminer ce modeste travail.

Nous tenons aussi à exprimer notre reconnaissance et profonde


gratitude à notre promoteur Mr OUAMRANE Mohammed pour sa
présence et disponibilité durant cette année, pour son encouragement et
sa patience.

Un grand Merci aux membres du jury pour l’honneur qu’ils nous ont
fait d’évaluer et de juger notre travail.

Nos sincères sentiments s’adressent à nos familles et amis (es) pour leurs
soutiens et leurs encouragements.

Enfin, nos remerciements à tous ceux qui, de près ou de loin, nous ont
aidés à l’aboutissement de cette quête.
Dédicaces
Je dédie ce travail à :

Ma Famille

&

A tous mes amis ;

Sabrina

Je dédie ce travail :

A ma mère et ma grande mère aza

A mon père

A Mon frère et ma sœur

Et

A mes amis ;

Samira
Sommaire
Introduction générale ...................................................................................................01

Chapitre I : L’organisme d’accueil

Introduction...................................................................................................................02

I. Définition de l’université ...........................................................................................02

II. L’université Mouloud MAMMERI .........................................................................02

II.1. Présentation de l’université Mouloud MAMMERI (UMMTO) .............................02

II.2. Histoire de l’UMMTO ...........................................................................................02

II.3. le système organisationnel ....................................................................................03

II.3.1 les organes centralisés .........................................................................................04

II.3.2 les organes décentralisés .................................................................................... 04

II.4.Les facultés de l’UMMTO .....................................................................................04

III.L’organisme d’accueil : ............................................................................................06

III.1.Présentation de l’organisme d’accueil ....................................................................06

III.2.les services ...........................................................................................................08

III.3. Missions du département ......................................................................................08

III.4. Suivi des programmes d'enseignement ..................................................................09

Conclusion ...................................................................................................................11

Chapitre II : Les nouvelles technologies de l’information et de la communication

Introduction ..................................................................................................................12

I. Internet ..................................................................................................................... 12

I.1. Définition de l’Interne .............................................................................................12

I.2.Histoire de l’internet ...............................................................................................12

I.3. Les services offerts par l’Internet ............................................................................13

I.3.1. Service de transfert de fichier ....................................................................13


Sommaire
I.3.2. Service de connexion à distance ................................................................13

I.3.3. Service d’accès à l’information .................................................................14

I.3.4. Service de navigation ................................................................................14

I.3.5. Service de communication entre personnes ...............................................14

I.3.6. Le service web ..........................................................................................15

I.4. Internet et client serveur .......................................................................................... 15

I.4. 1.Architecture à 2 niveaux ...........................................................................17

I.4. 2.Architecture client/serveur à 3 niveaux .....................................................17

I.4. 3. Avantages de l’architecture client/serveur ................................................18

I.4. 4. Inconvénients du l’architecture client/serveur .......................................... 18

I.4. 5. Comparaison entre l’architecture à deux et à trois niveaux .......................19

II. Le web......................................................................................................................19

II.1. Définition ............................................................................................................. 19

II.2.Histoire de Web ....................................................................................................20

II.3. L’évolution du web ...............................................................................................20

II.4. Les concepts du Web ............................................................................................21

II.5.Les principales caractéristiques du web .................................................................22

II.6. Les standards du web : ..........................................................................................23

II.6.1. URL ........................................................................................................23

II.6.2. Le langage HTML ..................................................................................24

II.6.3. HTTP ......................................................................................................24

II.7. Technologies de programmation des applications web ...........................................25

II.8. La sécurisation du web...........................................................................................27

III. Sites web ................................................................................................................27


Sommaire
III.1. Définition ............................................................................................................ 27

III.2. Les typologies de site web ..................................................................................27

III.2.3. Distinction selon les types d'accès .........................................................28

III.2.1. Distinction selon le but poursuivi et le contenu .....................................28

III.2.2. Distinction selon les fonctionnalités et les techniques ............................29

III.3. Etapes de création de sites web ............................................................................30

III.3.1. La Conception .......................................................................................30

III.3.2. La Réalisation .......................................................................................32

III.3.3. Association du nom de domaine ............................................................32

III.3.4. Hébergement .........................................................................................33

III.3.5. Référencement du site ........................................................................... 33

IV. Les réseaux sociaux ...............................................................................................34

IV.1. Définition .......................................................................................................34

IV.2. Les type des réseaux Sociaux dans l’université ..............................................34

IV.3. Les avantages et les inconvénients ..................................................................35

Conclusion ...................................................................................................................36

Chapitre III : analyse et La conception

Introduction...................................................................................................................37

I. Présentation de l’UML ..............................................................................................37

I.1. La modélisation UML .........................................................................................37

I.2. Les diagrammes de l’UML ..................................................................................38

I.3. Extension d’UML pour le web ...........................................................................39

II. Objectifs ..................................................................................................................44

III. Analyse .....................................................................................................................46

III.1. Quelques définitions de base .................................................................................46


Sommaire
III.2. Identification des acteurs ..................................................................................…47

III.3. Spécification des taches .....................................................................................…47

III.4. Spécification des scénarios ................................................................................ …48

III.5. Spécification de quelques cas d’utilisation .........................................................…52

III.6. Diagramme des cas d’utilisation global ..............................................................…56

IV. Conception de l’application web .............................................................................…61

IV.1. Les diagrammes de séquence ............................................................................…61

IV.2. Diagramme de classes .......................................................................................…70

IV.2.1. Diagramme de classe détaillé du cas d’utilisation « authentification de


l'utilisateur » .................................................................................................................…70

IV.2.2. Diagramme de classe de cas d’utilisation « envoyer un message » ................…71

IV.2.3.Diagramme de classe de cas d’utilisation « ajouter forums .............................…72

IV.2.4.Diagramme de classe global ............................................................................…73

V. Le modèle relationnel ..............................................................................................….74

VI. Le modèle physique de données ..............................................................................….75

Conclusion ...............................................................................................................................….81

Chapitre IV : Réalisation

Introduction .................................................................................................................................82

I. Technologie utilisé ..............................................................................................................….82

I.1. java ......................................................................................................................................82

I.2. Définition de JEE .............................................................................................................….82

II. L’environnement de développement ....................................................................................….83

II.1. Les langages utilisés ........................................................................................................….83

II.1.1. X HTML ......................................................................................................................….83

II.1.2. JavaScript.......................................................................................................................….83
Sommaire
II.1.3. CSS ...............................................................................................................................….83

II.1.4. JSF ................................................................................................................................….83

II.1.5. PrimeFaces .....................................................................................................................….84

II.1.6. Environnement de développement netbeans IDE 7.4 ......................................................….84

III. Les outils utilisés ...............................................................................................................….85

III.1. Les serveurs ....................................................................................................................….85

III.1.1. Le serveur GlassFish ....................................................................................................….85

III.1.2. Le serveur de base de données posgreSQL 9.3 .............................................................….86

IV. les Interface de notre application ......................................................................................….87

Conclusion .............................................................................................................................….93

Conclusion générale .................................................................................................................….94

Annexe .....................................................................................................................................….95

Bibliographie
Liste des figures

Chapitre I : L’organisme d’accueil

Figure I .1 Organigramme général de département informatique.............................................6

Chapitre II: Les nouvelles technologies de l’information et de

La communication
Figure II.1:Architecture client/serveur .....................................................................................16
Figure II.2 : l’architecture à 2 niveaux. ....................................................................................17
Figure II.3: l’architecture à 3 niveaux.......................................................................................18

Chapitre III: Analyse et Conception


Figure III.1.Cas d’utilisation « Télécharger des cours» ...........................................................52
Figure III.2.Cas d’utilisation «inscription étudiant » ...............................................................52
Figure III.3.Cas d’utilisation «Partager des fichiers » » ..........................................................53
Figure III.4.Cas d’utilisation «créer un événement » ...............................................................53
Figure III.5.Cas d’utilisation « créer au forum».......................................................................54
Figure III.6.Cas d’utilisation « Déposer un affichage » ...........................................................54
Figure III.7.Cas d’utilisation « changer le mot de passe».........................................................55
Figure III.8.Cas d’utilisation« authentification».......................................................................55
Figure III.9: Diagramme de cas d’utilisation Visiteur..............................................................56

Figure III .10. Diagramme de cas d’utilisation Etudiant...........................................................57

Figure III .11 . Diagramme de cas d’utilisation Enseignant....................................................58

Figure III .12 : Diagramme de cas d’utilisation ATS................................................................59

Figure III.13. Diagramme de cas d’utilisation administrateur.................................................60

Figure III.14. Diagramme de séquence de cas d’utilisation « Télécharger un cours ». ...........62

Figure III. 15. Diagramme de séquence du cas d’utilisation « inscription utilisateur .............63

Figure III.16. Diagramme de séquence du cas d’utilisation « Accéder au forum » ................64

Figure III.17.Diagramme de séquence de cas d’utilisation « partager des fichiers » ..............65

Figure III.18 .Diagramme de séquence de cas d’utilisation « créer un événement » .............66

Figure III.19 .Diagramme de séquence du cas d’utilisation «Authentification administrateur »


...................................................................................................................................................67
Liste des figures

Figure III.20. Diagramme de séquence de cas d’utilisation « Déposer un affichage» .............68

Figure.III.21. Diagramme de séquence de cas d’utilisation «Changement de mot de passe» .69

Figure .III.22.Diagramme de classe détaillé du cas d’utilisation « authentification » .............70

Figure III.23.Diagramme de classe de cas d’utilisation «Envoyer un message ».....................71

Figure III.24.Diagramme de classe de cas d’utilisation « ajouter forum »...............................72

Figure III.25.Diagramme de classe global................................................................................73

Chapitre IV: Réalisation

Figure. IV.1. Interface Primefaces…………………………………………………………...84

Figure IV.2.Interface NetBeans………………………………………………………………85

Figure IV.3.Interface du serveur GlassFish..............................................................................86


Figure IV.4.Interface posgreSQL 9.3…………………………………………………….. ....87
Figure IV.5. Capture d’écran de l’interface « page d’accueil» ……………………………...88
Figure IV.6. Capture d’écran de l’interface «authentification administrateur et ATS »…......89
Figure .IV.7 . Capture d’écran de l’interface « espace administrateur et ATS »………….....89

Figure .IV.8 . Capture d’écran de l’interface « espace administrateur »………………….....90


Figure. IV.9.Capture d’écran de l’interface « inscription Enseignant »……………………...90
Figure. IV.10.Capture d’écran de l’interface « Espace Enseignant »…………………….......91
Figure. IV.11. Capture d’écran de l’interface « Formulaire d’inscription Etudiant »………..91
Figure. IV.12. Capture d’écran de l’interface « Ajouter un sujet au forum »………………...92
Figure. IV.13. Capture d’écran de l’interface « Ajouter un commentaire au forum»………...93

Liste des tableaux


Tableau III.1.Table d'identification des activités……………………………………………..48
Tableau III.2.Table d'identification des scénarios. …………………………………………..51
ANNEXE
Figure 1. Cycle de vie d’une servlet…………………………………………………………100
Figure 2. Modèle M.V.C.……………………………............................................................106
Introduction générale

Il ne fait désormais plus aucun doute que l’informatique représente la révolution la plus
importante qui a marqué la vie de l’humanité en ce siècle passé, jusqu’à nos jours.
En effet, l’informatique vient nous apporter de multiples conforts à notre mode de vie. Cette
technologie touche tous les domaines d’activités et apporte tant de services aussi bien pour
l’entreprise ou l’administration que pour le personnel.
Au cours de ces dernières années, les nouvelles technologies de l’information et de
La communication ont connu un bouleversement marqué par l’apparition de l’Internet et par
sa croissance exponentielle.
Ces années ont aussi été marquées par l’entrée en scène de World Wide Web (WWW), l’une
des applications qui a popularisé Internet, et qui a fait exploser le nombre de ses utilisateurs.
Par conséquent, le web suscite l’intérêt de la majorité des organisations qui se doivent
d’enrichir leur présentation via des sites web.
L’université est un lieu catalyseur d’interactions sociales, d’échange d’informations et
de coproduction du savoir, or ce sont précisément les activités qui caractérisent les réseaux
sociaux. Les travaux exposés dans notre mémoire consistent à la conception et la réalisation
d’un site web social et collaboratif pour le département informatique de l’UMMTO. Outre un
rôle de présentation du département, ce site offrira un ensemble de services à la communauté
universitaire dont :

Le téléchargement des documents.


L’accès aux forums.
La communication entre les étudiants et leurs enseignants à travers la messagerie.
L’actualité au sein de département informatique.
Le partage des images, des vidéos et des fichiers.
Participer aux événements
Créer des groupes de discutions et collaborations.
Ce mémoire est organisé autour de quatre chapitres et une annexe :
Le premier chapitre définit l’organisme d’accueil qui est le département informatique.
Le second chapitre est consacré aux nouvelles technologies de l’information et de la
communication.
Le troisième chapitre est dédié à l’analyse et la conception de notre site.
Le quatrième chapitre est dédié à l’implémentation et la réalisation de notre
application.

Page 1
Chapitre I L’organisme d’accueil

Introduction
L’une des missions principales de l’université est de contribuer au développement du capital
humain et de diffuser le savoir. Pour y arriver, elle doit se prévaloir de la diversité de son offre de
formation en équilibre avec les besoins des divers secteurs de la vie économique et du
développement technologique.

Dans ce chapitre on présente l’université de l’UMMTO en premier et le département


informatique en particulier qui représente l’organisme d’accueil.

I. Définition de l’université
Une université est un établissement qui fédère en son sein la production, la conservation et la
transmission de différents domaines de la connaissance. Le mot université vient du latin, il désigne
à l'origine la corporation des enseignants et des étudiants d'une même ville. [1] Les universités
sont aujourd'hui divisées en départements académiques, écoles ou facultés, qui sont centrées sur la
seule transmission d'un domaine bien défini de la connaissance. L'université est sans doute le lieu
où l'étudiant se spécialise dans un champ du savoir.

II. L’université Mouloud MAMMERI (UMMTO)

II.1. Présentation de l’université Mouloud MAMMERI (UMMTO)

L'université Mouloud Mammeri U.M.M.T.O. en abrégé, en kabyle (Tasdawit Lmulud At


Maemmar) est une université algérienne située dans la ville de Tizi Ouzou en Kabylie . Elle porte
le nom de Mouloud Mammeri, un écrivain, poète, anthropologue et linguiste algérien.

L’université Mouloud MAMMERI de Tizi-Ouzou est un établissement public à caractère


scientifique, culturel et professionnel doté d’une personnalité morale et d’une autonomie
financière, dépendant du secteur de la fonction publique. Sa mission est d’assurer la formation en
graduation et en post-graduation dans divers domaines et spécialités, en plus de la recherche
scientifique.

II.2. Histoire de l’UMMTO [2]

L'université de Tizi-Ouzou est créée en 1977 sous forme de Centre universitaire rattaché à
l'université d'Alger. En 1989 le C.U.T.O devient une université à part entière .Quelques 490
étudiants y firent leur entrée en 1977 mais ce nombre ne cesse de croitre année après année pour
atteindre en 2009 quelques 42 000 étudiants.

Page 2
Chapitre I L’organisme d’accueil

En 1984, le Centre universitaire de Tizi-Ouzou éclate en 9 instituts :

INES des Sciences Juridiques et Administratives


INES d'Agronomie
INES de Biologie
INES des Lettres et littérature arabes
INES de Génie Civil
INES des Sciences Économiques
INES des Sciences Médicales
INES d'Electronique
INES Informatique

En 1989, cinq nouveaux départements y sont créés :

Département d'Architecture
Département d'Électronique
Département des Langues Étrangères
Département des Sciences Exactes
Département de Génie Mécanique

En 1991, les quatre premiers départements cités deviennent des instituts. Quant au cinquième, il
n'est érigé en institut qu'en 1995.

En 1990, le département des Langues et Culture Amazigh a vu le jour par arrêté ministériel.
L'université compte actuellement 9 facultés réparties sur plusieurs sites notamment Boukhalfa
(faculté de Droit et Résidences), Hasnaoua, Bastos (Technologie + Résidences), Tamda (Sciences
Humaines et Résidences)...

II.3. le système organisationnel :

L’université est dotée d’organes centralisés et d’organes décentralisés prévus par le statut type
de l’université.

Page 3
Chapitre I L’organisme d’accueil

II.3.1 les organes centralisés :

Le conseil d’orientation

Est composé de tous les représentants des ministères, des doyens de facultés, du secrétaire
général de l’université, du responsable de la bibliothèque universitaire et des représentants des
trois composantes de l’université « les enseignants, les travailleurs et les étudiants ».

Le conseil scientifique de l’université

Est composé du recteur de l’université, des vices recteur, des doyens de facultés, des
présidents des conseils scientifiques des facultés ; un représentant élu des enseignants par faculté,
le secrétaire général de l’université et le responsable de la bibliothèque universitaire.

Le rectorat

Il est placé sous l’autorité du recteur, il comprend quatre vices rectorats et le secrétariat général.

II.3.2 les organes décentralisés : Les facultés

La faculté est une unité d’enseignement et de recherche de l’université dans le domaine de la


est composée de deux vice- doyens et du secrétariat général
*La faculté est composée de départements et comporte une bibliothèque.

*Le doyen est responsable du fonctionnement de la faculté et assure la gestion de ses moyens
humains, financiers et matériels.

*Il est assisté dans ses tâches par le vice-doyen chargé des études et des questions liées aux
étudiants, le vice-doyen chargé de la post graduation, de la recherche scientifique et des relations
extérieures, le secrétaire général de la faculté, les chefs de départements et le responsable de la
bibliothèque de faculté.

Remarque :
La structure organisationnelle des différentes facultés est la même, pour tout les facultés

Page 4
Chapitre I L’organisme d’accueil

II.4.Les facultés de l’UMMTO

L’université comprend neuf facultés et plusieurs départements à savoir :

La Faculté des sciences sociales et humaines


La Faculté de Médecine rassemble trois Type de Formation : doctorat en médecine
doctorat en chirurgie dentaire doctorat en pharmacie.
La Faculté des sciences économiques et des sciences commerciales et des sciences de
gestion regroupe trois types de formation à savoir : sciences économiques, sciences de
gestion et sciences commerciales.
La Faculté des Sciences Biologiques et des Sciences Agronomiques comprennent deux
filières (Biologie et Agronomie).
La Faculté du Génie de la Construction rassemble trois filières : génie mécanique, génie
civil et architecture,
La Faculté de droit et sciences politiques assure une formation de deux types : droit et
sciences politiques.
La Faculté des Sciences est composée de quatre départements à savoir : Département de
physique, Département des mathématiques, Département de chimie, Département tronc
commun LMD
La Faculté des lettres et des langues est composée de sept branches (anglais, français et
traduction interprétariat Langue et Culture Amazighes Lettres Arabes Psychologie et des
Sciences de l’Education Sciences Sociales)
La Faculté Génie Electrique et Informatique est composée de quatre départements à
savoir : département d’informatique, département d’électrotechnique, département
d’automatique et département d’électronique.

Page 5
Chapitre I L’organisme d’accueil

III.L’organisme d’accueil : département informatique

Chef
département

Adjoint chargé de la scolarité et Adjoint charge de la post-


des enseignements de graduation graduation et de la recherche
scientifique

Suivi des Formation Suivi des


enseignemen supérieure activités de
Scolarité ts et de de post- recherche
l’évaluation graduation et
de PG
spécialisée

Figure I.1 Organigramme général de département informatique

III.1.Présentation de l’organisme d’accueil :

Le département d’informatique est l’un des départements géré par la faculté de génie
électrique et informatique de l’UMMTO sous la direction d’un doyen, et par un chef de
département, assisté par d’autres responsables chacun d’eux avec ses propres fonctions par rapport
à son service.
*Le département est chargé d’assurer la programmation, la réalisation, l’évaluation et le contrôle
des activités d’enseignement et de recherche dans son domaine de formation.

*Le chef de département est responsable du fonctionnement pédagogique et administratif du


département.

*Il est assisté par le chef de département adjoint chargé de la scolarité et des enseignements de
graduation et le chef de département adjoint chargé de la post-graduation et de la recherche
scientifique.

Page 6
Chapitre I L’organisme d’accueil

Le chef de département a pour tâches notamment :

* de veiller à l’application et au respect de la réglementation en vigueur concernant toutes


les activités universitaires,

* de préparer le planning des activités pédagogiques et d’assurer leur répartition entre les
enseignants.

Le planning des activités pédagogiques comprend, notamment:

- les emplois du temps des différents enseignements dispensés et l’utilisation des locaux
d’enseignement,
- les activités pédagogiques du personnel enseignant et l’élaboration des documents et
supports pédagogiques,
- la mise en place des comités pédagogiques et le suivi de leurs activités : déroulement des
études et programmes pédagogiques, assiduité des étudiants et des enseignants,…
- l’organisation et le bon déroulement des différentes épreuves d’évaluation des étudiants,
- la préparation des procès-verbaux de délibérations, la tenue et le fonctionnement des jurys
de délibérations.

III.2.les services :

On trouve au sein de ce département deux services qui sont :

1. Le service d’enseignement et de la scolarité sous la direction d’un chef adjoint à la pédagogie.


Ce service assure la gestion des études et toutes les tâches concernant les enseignants et les
étudiants du département.
Les enseignants sont classés en fonction de leur grade. On distingue :
Les professeurs, les maîtres de conférences les maîtres assistants et les chargés de cours, le corps
des assistants, le jury de délibération, le promoteur et le conseil pédagogique.

2. Le service de la recherche scientifique sous la direction d’un chef de département adjoint à la


recherche scientifique. Il gère les enseignants chercheurs et les étudiants en post graduation.
Les enseignants chercheurs organisent des réunions de travail pour exposer et étudier des thèmes
de recherche, suivent les nouvelles technologies et animent des conférences pour l’information des
étudiants.

Page 7
Chapitre I L’organisme d’accueil

Les activités reliées au suivi pédagogique dans le département de l’informatique sont :

Participe aux délibérations des jurys d’examen


Participe aux travaux de son équipe ou de son comité pédagogique
Reçoit les étudiants pour les conseiller et les orienter.
Assure le bon déroulement des examens dont il a la charge
Assure l’encadrement des étudiants
Prépare et d’actualiser ses cours.
Assure les travaux dirigés ou des travaux pratiques selon le volume horaire
Corrige les copies des examens dont il a la charge

III.3. Missions du département


Le département assure un suivi pédagogique des cycles de graduation et de post-graduation ;
gérer la scolarité des étudiants (inscription, évaluation, présence aux enseignements, absences et
sanctions) et des enseignants (matières enseignées, affectation des modules, volume horaire,
emploi du temps, planning des examens, absences, saisie des notes, délibérations …)

III.4. Suivi des programmes d'enseignement


Le département consacre un temps énorme pour le suivi des programmes d’enseignement pour
chaque cursus envers l’ensemble du collectif pédagogique.

1. Un cursus
Est un programme universitaire débouchant sur un diplôme. Il montre l’ensemble des
enseignements suivis par un étudiant de sa première inscription administrative à la délivrance du
diplôme.

2. Formations
Le département reçoit des étudiants, ayant passé avec succès les deux semestres du domaine
mathématique et informatique et après étude des fiches de vœux et sur la base des places
pédagogiques disponibles, dans les licences et Masters.

Page 8
Chapitre I L’organisme d’accueil

3. Système LMD (Licence, Master, Doctorat)

a) Licence
La formation de licence s’étale sur trois années : Licence 1ère année, Licence 2ème année
et Licence 3ème année (L1, L2 et L3).
Chaque année universitaire pédagogique est composé de deux semestres S1 et S2. Chacun est
composé d’un certain nombre de modules.
Le département assure deux spécialités en licence :
Licence Informatique
Licence Informatique et Multimédia

b) Master
La poursuite des études au cycle de master n’est autorisée que pour les étudiants ayant eu un
bon classement au premier cycle. Cette seconde formation est composée de trois semestres
d’études théoriques clôturée par un projet de mémoire de fin de cycle.
Chaque année est composé de 2 semestres :
Pour les années de la licence l’évaluation est annuelle, pour le master l’évaluation est semestrielle.
Le département assure plusieurs spécialités en Master :
Master Conduite de Projets Informatiques
Master Réseaux Mobilités et Systèmes Embarqués
Master Systèmes Informatiques
Master Ingénierie des Systèmes d’Information (Professionnelle)

c) Doctorat

En fin le diplôme de doctorat est assuré pour les candidats de master ayant subit un concours au niveau
national.

Le département assure plusieurs formations en doctorat LMD :

Intelligence Artificielle et Systèmes d’Information


Réseaux, Mobilité et Systèmes Embarqués

Page 9
Chapitre I L’organisme d’accueil

4. Unité d’enseignement (UE)


L’enseignement d’un semestre s’articule autour d’unité d’enseignement. Les unités
d’enseignements sont de quatre types : Fondamental, Découverte, Spécialité ou Transversal.
Une UE est dotée d’un crédit (points) porté par les éléments pédagogiques et lui est affecté un
coefficient de pondération par rapport aux autres unités du même semestre.
Un semestre est généralement composé de trois à quatre UE. On calcule la moyenne de l’UE.
Ensuite la moyenne du semestre est obtenue à partir des moyennes calculées des UE pondérées
par leurs coefficients. Les UE d’un semestre se compensent entre elle. Une UE est généralement
constituée d’une à quatre matières dispensées par toute forme d’enseignement. Les semestres
d’une même année se compensent entre eux, dans le cas de la licence, par le calcul de la moyenne
des notes des UE qui les composent affectées de leurs coefficients respectifs.

5. Matières enseignées
Une matière (module) est dotée d’un crédit matière et lui est affecté un coefficient matière. À
chaque matière correspond un examen final et/ou contrôle continu. Ce dernier peut être évalué par
des notes de TD, TP, exposé, séminaire, projet ou toute autre forme arrêtée par l’équipe
pédagogique. L’examen final et le contrôle continu sont pondérés par des coefficients
Généralement, en cas de résultat insuffisant, l’étudiant est admis à une deuxième session organisée
en fin de semestre ou en fin d’année universitaire.
En fonction du mode de calcul du rattrapage avec ou sans le contrôle continu, la moyenne de la
matière est recalculée, le résultat le plus favorable est retenu pour l’étudiant.

6. Suivi pédagogique des enseignants


Un enseignant est chargé d’assurer des séances de cours magistral, de TD ou de TP repartis au
cours du jour. Une journée pédagogique est composé de six séances d’une heure et demie
chacune.
On rencontre des enseignants permanents, associés ou vacataires. Chaque enseignant possède
son propre grade de professeur, maitre de conférences, maitre assistant, ou enfin professeur-
ingénieur.
Conclusion
Dans ce chapitre nous avons présenté notre organisme d’accueil, afin de connaitre toutes les
informations concernant le département informatique de l’UMMTO.

Ces informations seront utiles pour la réalisation de notre projet. Le chapitre suivant fait l’objet
d’une étude générale sur l’internet et le web.

Page 10
Chapitre II Les nouvelles technologies de l’information et de la communication

Introduction
Une véritable révolution s'est produite dans le monde de l'informatique; c’est l'explosion
d'Internet plus particulièrement la fondation sur laquelle elle est construite : le Web, considéré
comme outil de communication, de recherche/publication d'information, et de création de
nouveaux services.
Ce chapitre présente d’abord une introduction à Internet en général et au web en particulier, il
définit aussi les sites web et leurs caractéristiques, puis présente des généralités sur les réseaux
sociaux.

I. Internet

I.1. Définition de l’Internet [3]


L’internet, ou Inter Connected Network, constitue un réseau de réseaux qui relie, dans le
monde entier, des ordinateurs en utilisant un protocole de transmission et de communication
constituant un langage commun permettant la connexion de toutes les machines (Pc, Mac, Unix).
Ce langage commun s’appelle le Transmission control Protocol/Internet Protocol (TCP/IP)
L’internet vaut avant tout par ses applications ou ses services. On a trop souvent tendance à penser
l’internet comme un lieu alors qu’il s’agit simplement d’un réseau sur lequel se greffent des
applications ; Il convient de parler de « services de l’internet ».

I.2.Histoire de l’internet
Internet remonte au développement du réseau Arpanet (de l'Advanced Research Projects
Agency, liée à la défense américaine), créé en 1968 par le département américain de la Défense,
dans un but stratégique, pour relier ses centres de recherche.
L'objectif était de faire fonctionner un réseau censé résister à une attaque nucléaire et à des
sabotages, en palliant à la centralisation excessive des infrastructures existantes.
Le réseau initialement ne permettait que l'échange de textes, ce qu'on appelle le courrier
électronique. Ce réseau a été développé et étendu par des universitaires à la fin des années 70.

En 1977, Internet devient réalité car le TCP/IP est effectivement utilisé pour relier divers réseaux à
Arpanet.

Page 11
Chapitre II Les nouvelles technologies de l’information et de la communication

Dans les années 1990 sa popularisation passa par l'apparition du World Wide Web. L'Internet tel
que nous le connaissons était né ! Il est maintenant le plus grand réseau du monde, regroupant des
gens de tous les pays.

I.3. Les services offerts par l’Internet [4]

L’internet offre de nombreux services à ses usagers. Parmi ces services nous citons :

I.3.1. Service de transfert de fichier(FTP)

FTP (File Transfert Protocol) permet de transférer un ou des fichiers d'une machine à une
autre. FTP est donc un utilitaire permettant de consulter sur un autre ordinateur son ensemble de
fichiers et de pouvoir aller copier ou chercher certains fichiers.
Alors que FTP ne permet que la récupération brute de fichiers, Archie est l'outil permettant de
trouver les fichiers intéressants sur tous les sites FTP du domaine public en utilisant une recherche
par mots-clés sur les noms de fichiers.

I.3.2. Service de connexion à distance (ou Telnet)

Telnet permet à un internaute (utilisateur d'Internet) de se connecter et donc d'utiliser à


distance une machine comme si il se trouvait face à elle. Cela ouvre par exemple des possibilités
pour le travail à domicile, puisqu'il devient possible d'utiliser les machines se trouvant sur son lieu
de travail depuis chez soi.
Telnet est aujourd’hui quasiment abandonné au profit de ssh (Secure Shell) pour des raisons de
sécurité. En effet, avec Telnet toutes les informations transmises transitent en clair sur le réseau, y
compris les mots de passe, ce qui permet à un éventuel pirate simplement à l'écoute du réseau
d'intercepter toutes les données sensibles qui transiteraient de cette manière. À l'inverse, pour ssh,
toutes les données transmises sont cryptées et donc illisibles par toute autre personne que le
destinataire. Hytelnet présente un répertoire de catalogues informatisés de bibliothèques
d'Universités du monde entier et permet d’obtenir les adresses Telnet de ces dernières.

I.3.3. Service d’accès à l’information (Gopher)


Gopher peut être considéré comme l’ancêtre du web. Il s’agit d’un serveur d’informations
distribué, hiérarchisé, diffusé sur internet. L’information se présente sous des formes aussi

Page 12
Chapitre II Les nouvelles technologies de l’information et de la communication

diverses que texte, image, son, connexion sur un autre site, ou bien encore la consultation par mot-
clé de bases indexées.

I.3.4. Service de navigation (Wais)

Wais peut être considéré comme l’ancêtre des moteurs de recherche. Il permet de naviguer à
travers les bases de données disponibles sur le réseau internet en posant des questions en langage
naturel (il s’agit en fait d’une recherche sur les mots clés que représente la question). En retour il
obtiendra les descriptions des documents susceptibles de répondre à sa question.
Pour créer un serveur Wais, il suffit de regrouper les fichiers d’information dont on souhaite
autoriser l’accès et de créer un index sur ces fichiers.

I.3.5. Service de communication entre personnes

Messagerie électronique

C'est un outil très puissant qui permet d’envoyer du texte, auquel peuvent être attachés des
fichiers quelconques (images, sons, vidéo…), à toute personne ayant accès au réseau, par le biais
de son adresse électronique.
Cette application fonctionne, par définition en mode non connecté : le courrier est déposé dans une
« boite aux lettres » que le destinataire viendra consulter à loisir.

Les forums de discussion ou les News Groups

Un forum ou groupe de discussion est une technique d’échange de messages entre groupes
d’individus. Les membres d’un forum sont en général regroupés par thématique. Quand on adresse
un message à un forum, celui-ci est lisible par tous ses membres contrairement au mail où la
discussion est réalisée de 1 à 1, de l'émetteur vers le destinataire.

Internet Relay Chat (IRC)

IRC, abréviation de Internet Relay Chat (en français, « discussion relayée par Internet »), est
un protocole de communication textuelle sur Internet. Il sert à la communication instantanée
principalement sous la forme de discussions en groupe par l’intermédiaire des canaux de
discussion, mais peut aussi être utilisé pour de la communication de un à un. Il peut par ailleurs

Page 13
Chapitre II Les nouvelles technologies de l’information et de la communication

être utilisé pour faire du transfert de fichier. IRC est différent de la messagerie instantanée, celle-ci
étant plus dédiée aux communications de un à un.

La messagerie instantanée
La messagerie instantanée est une forme de chat particulière ou l'on discute à deux.

Liste de diffusion

C’est une utilisation spécifique du courrier électronique qui permet l’échange des e-mails entre
un groupe d'utilisateurs possédant une adresse courriel et inscrits à cette liste.
Tout message envoyé à la liste par un abonné est automatiquement reçu par chacun des autres
abonnés. On s'abonne à une liste de diffusion pour se tenir au courant d'un sujet en particulier et
pour participer à des échanges sur ce sujet.

I.3.6. Le service web

C’est le service de consultation de documents sur Internet, le plus connu, le plus récent et
aujourd’hui le plus utilisé. C'est Le service d'Internet qui a contribué le plus à sa popularité.

I.4. Internet et client /serveur : [5]

Les services internet sont conçus selon une architecture client/serveur. L’architecture
client/serveur définit un style de fonctionnement coopératif entre un serveur et un client.
Un serveur est un ordinateur ou un programme informatique connecté en permanence, qui met
à disposition des services pouvant être utilisés simultanément par plusieurs utilisateurs (i.e.
plusieurs ordinateurs connectés en réseau).

Le client est l'ordinateur ou le programme qui utilise des services fournis par le serveur.
Chaque application client/serveur fonctionne suivant le même processus:
Le client commence la transaction en envoyant une requête au serveur, contenant son adresse
et un port, qui désigne un service particulier du serveur. Le serveur accepte les requêtes, les traite
soit en utilisant ses propres ressources (architecture 1tiers –figure II.1), soit en faisant des
requêtes vers d'autres serveurs additionnels (architecture n-tiers – figure II. 2 ; figure II.3).
Le serveur renvoie le résultat au demandeur et lorsque la requête est accomplie, la transaction se
termine.

Page 14
Chapitre II Les nouvelles technologies de l’information et de la communication

Figure II.1. Architecture client/serveur.

Le client : processus demandant l’exécution d’une opération à un autre processus serveur


par l’envoie d’un message contenant le descriptif de l’opération à exécuter et attendant la
réponse à cette opération par un message en retour.
Le serveur : processus accomplissant une opération sur demande d’un client et
transmettant la réponse à ce client.
Requête : message transmis par un client à un serveur décrivant l’opération a exécuté
pour le compte de client.
La réponse : message transmis par un serveur à un client suite à l’exécution d’une
opération contenant le paramètre de l’opération.

I.4. 1.Architecture à 2 niveaux

L’architecture à deux niveaux (2-tiers) caractérise le système client/serveur dans lequel le


client demande une ressource au serveur qui la lui fournit directement (le serveur ne fait appel à
aucune autre application pour fournir ce service).

Page 15
Chapitre II Les nouvelles technologies de l’information et de la communication

CLIENT SERVEUR
PRÉSENTATION MOTEUR
SGBD

2. envoi de la requête
1 .requête
Select Nom, Adresse From
utilisateur
Client where Numclient=2541

DONNÉES

TRAITEMENT

Figure. II.2 l’architecture deux niveaux.

I.4. 2.Architecture client/serveur à 3 niveaux

L’architecture 3-tiers différencie les couches présentation, métier et accès aux données.
Chaque couche peut être implémentée sur un ou des serveurs indépendants, ou se trouver sur un
même serveur. La couche présentation (IHM : Interface Homme Machine) gère les interactions
entre l’utilisateur et l’application. La couche métier contient les traitements représentant les règles
métier à effectuer sur les données. La couche d’accès aux données permet de gérer les données
d’une application à l’aide de systèmes de gestion de bases de données.

L’objectif de cette décomposition en différentes couches est de développer des applications


basées sur une architecture solide, évolutive et maintenable. Avec l’avènement du web et des
technologies associées telles que J2EE.

Page 16
Chapitre II Les nouvelles technologies de l’information et de la communication

Figure. II.3. l’architecture trois niveaux.

I.4. 3. Avantages de l’architecture client/serveur


Le modèle client/serveur est particulièrement recommandé pour des réseaux nécessitant un
grand niveau de fiabilité, ses principaux atouts sont :
Des ressources centralisées : étant donné que le serveur est au centre du réseau, il peut
gérer des ressources communes à tous les utilisateurs, comme par exemple une base de données
centralisée, afin d’éviter les problèmes de redondance et de contradiction.
Une meilleure sécurité : car le nombre de points d’entrée permettant l’accès aux données
est moins important.
Une administration au niveau serveur : les clients ayant peu d’importance dans ce
modèle, ils ont moins besoin d’être administrés.
Un réseau évolutif : grâce à cette architecture on peut supprimer ou rajouter des clients
sans perturber le fonctionnement du réseau et sans modifications majeures.

I.4. 4. Inconvénients du l’architecture client/serveur

L'architecture client/serveur a tout de même quelques lacunes parmi lesquelles :


Un coût élevé dû à la technicité du serveur.
Un maillon faible : le serveur est le seul maillon faible du réseau client/serveur, étant donné
que tout le réseau est architecturé autour de lui.

Page 17
Chapitre II Les nouvelles technologies de l’information et de la communication

I.4. 5. Comparaison entre l’architecture à deux et à trois niveaux : [6]

L’architecture à deux niveaux est donc une architecture client/serveur dans laquelle le serveur
est polyvalent, c’est-à-dire qu’il est capable de fournir directement l’ensemble des ressources
demandées par le client

Dans l’architecture à trois niveaux par contre, les applications au niveau du serveur sont
délocalisées, c’est-à-dire que chaque serveur est spécialisé dans une tâche (serveur web / serveur
de base de données par exemple). L’architecture à trois niveaux permet :
- Une plus grande flexibilité/souplesse.
- Une sécurité accrue car la sécurité peut être définie indépendamment pour chaque service, et à
chaque niveau.
- De meilleures performances, étant données le partage des tâches entre les différents serveurs.

II. Le web

Le Web a été inventé plusieurs années après Internet, mais c’est lui qui a contribué à
l'explosion de l'utilisation d'Internet par le grand public, grâce à sa facilité d'emploi. Depuis, le
Web est fréquemment confondu avec Internet alors qu’il n'est en réalité qu'un de ses services.

II.1. Définition : [5]

Le World Wide Web, littéralement la « toile d’araignée mondiale », communément appelé le


Web, parfois la Toile ou le WWW, symbolisant le réseau maillé de serveurs d'informations.
Système hypertexte public fonctionnant sur Internet qui permet la consultation d’informations,
grâce à des liens créés entre des documents : les pages web.
La page web permet à la fois l'affichage de textes, d'images et de formulaires de saisie mais
peut également appeler et afficher différents autres types de documents numériques : son, vidéo,
applications… (Cette liste n'étant pas limitative compte tenu du progrès technique en la matière).
Sa consultation par le Client nécessite un logiciel de navigation (navigateur ou browser).

Page 18
Chapitre II Les nouvelles technologies de l’information et de la communication

II.2.Histoire de Web [7]

Le concept du World Wide Web a été créé à partir de 1989 au CERN (Centre Européen de
Recherches Nucléaires) par Tim Berners-Lee, puis développé par lui même et Robert Cailliau en
1990 dans le but de concevoir un système permettant de naviguer simplement d’un espace à un
autre d’Internet à l’aide de liens hypertextes et grâce à un navigateur.
En 1993, un navigateur Web graphique, nommé Mosaic, reposant sur les principes de la Toile tels
qu’ils ont été formulés par l’équipe du CERN de Tim Berners-Lee, notamment le http est
développé par Eric Bina et Marc Andrsen au NCSA.
NCSA Mosaic jette les bases de l’interface graphique des navigateurs modernes et cause un
accroissement exponentiel de la popularité du Web.

II.3. L’évolution du web

Le Web est caractérisé par une évolution constante du fond et de la forme des pages Web.
Dans sa conception initiale, le web dit web 1.0 comprenait des pages statiques au contenu codé en
HTML qui était rarement mises à jour, voire jamais. Ces pages sont non-interactives et ne
disposent que de peu d'informations.
Une première évolution fut réalisée par des solutions se basant sur un web dynamique appelé
Web 1.5. Ce Web dynamique est généralement basé sur l'association du langage de
programmation PHP et des bases de données MySQL.
Lorsque l'internaute accède au site dynamisé, il fait exécuter sur le serveur le langage PHP qui va
chercher l'information dans la base de données pour la retranscrire dans la page HTML sur le
poste utilisateur.

Le web subi une nouvelle évolution avec l'apparition de nouvelles technologies comme le
langage AJAX qui rend les pages interactives et fluides et le Flux RSS, qui permet de rester
informé des actualités d'une interface Web. C’est l'avènement du Web collaboratif, interactif et
participatif. Ce Web, dit web 2.0, rend l’internaute acteur. Ainsi, il lui est possible sur certains
sites web de modifier, de rajouter ou d'effacer du contenu et d’échanger des informations par des
techniques synchrones comme les messageries instantanées, la téléphonie sur internet, ... ou des
méthodes asynchrones comme les forums, les wikis, les blogs...
Le Web qui est présentement en cours de développement est le Web 3.0. Ce sera l’arrivée du
Web sémantique où les informations ne seraient plus stockées mais “comprises” par les

Page 19
Chapitre II Les nouvelles technologies de l’information et de la communication

ordinateurs afin d’apporter à l’utilisateur ce qu’il cherche vraiment. Le Web sémantique est ce que
l’on pourrait appeler l’avènement d’outils permettant de transformer automatiquement les données
en informations, et les informations en savoir. L’enjeu du web sémantique est donc de réussir à
étiqueter de manière pertinente le contenu disponible sur la toile, pour permettre un accès
intelligent. Le principe repose sur l’intelligence collective des utilisateurs.

II.4. Les concepts du Web

Le principe du web repose sur l’exploration d’une myriade de pages web (fichiers HTML)
contenant du texte mis en forme, des images, du son des vidéos…L’exploration est rendue
possible grâce à un logiciel appelé navigateur (Firefox, Internet Explorer, ...) qui offre une
interface d’accès aux différentes informations disponibles sur le web.

Les pages web

Sont liées les unes aux autres par des liens hypertextes (ou hyperliens). En pratique un lien
hypertexte est un simple mot affiché sur un document permettant de passer à un autre
document lorsqu'on clique dessus. Le document lié peut être un fichier à transférer, un son,
une animation ou une page web.

Un site web (ou site internet)

Est ainsi un ensemble logiquement structuré de pages web reliées entre elles et formant un
tout (le site) dédié à une organisation donnée. La création et la mise à jour d'un site peut être
confiée soit à une personne, le webmaster, ou à une entreprise spécialisée, l’agence Web. Pour être
accessible sur internet, un site web doit être hébergé sur un serveur web.

Le site web est habituellement architecturé autour d'une page centrale, appelée «Page
d'accueil» et proposant des liens vers les autres pages du site, et parfois des liens dits externes,
vers des pages étrangères au site Pour rechercher une information sans connaître a priori le site
susceptible de la fournir, il est nécessaire d'utiliser des outils de recherche. Il existe deux types de
système de recherche sur Internet :
Les moteurs de recherche
Les annuaires web

Page 20
Chapitre II Les nouvelles technologies de l’information et de la communication

Un moteur de recherche

Un moteur de recherche est un programme qui indexe le contenu de différentes ressources


Internet, et plus particulièrement de sites Web, qui permet à l’internaute de rechercher de
l’information à partir d’un navigateur Web, selon différents paramètres, en ce servant de mots
clés, et qui permet d’avoir accès à l’information ainsi trouvée.

Un Annuaire Web

Est un site Internet dont l'objet est le référencement et la classification de sites Web, en
différentes catégories (ou rubriques). L’utilisateur peut alors parcourir l’annuaire rapidement
grâce à un système de sélection de catégories et de sous catégories qui permet d’affiner la
recherche. Bien qu’étant de plus en plus performants, les moteurs et annuaires de recherche
n'indexent pas la totalité des documents présents sur internet. Il existe en effet, une grande masse
d'informations inaccessibles pour les outils de recherche "traditionnels" : c’est le Web Invisible.
Le web invisible comprend des bases, banques de données et bibliothèques en ligne gratuites ou
payantes...

II.5.Les principales caractéristiques du web

Le web comporte un certain nombre de caractéristiques spécifiques qui font le système


d’information le plus perfectionné qui fait parti d’internet à ce jour :

Le web est un système Hypertexte

Un système hypertexte est un système contenant des nœuds liés entre eux par des hyperliens
permettant de passer automatiquement d'un nœud à un autre. Un document hypertexte est un
document qui contient des hyperliens et des nœuds. Un nœud est une "unité minimale
d'information", qui signifie simplement que l'information d'un nœud sera toujours présentée
entière. Les liens entre les parties du texte sont gérés par ordinateur et permettent d'accéder à
l’information.

Page 21
Chapitre II Les nouvelles technologies de l’information et de la communication

Le web est un système Multimédia


Au début d’internet, la plus grande partie des informations accessibles sur le réseau se
présentait sous forme de texte, le web peut contenir les éléments suivants : texte, caractères
spéciaux, image, séquence audio (son, musique…) et séquence vidéo.

Le web assure l’interface avec les systèmes de base de données

Une des fonctions les plus puissantes des explorateurs du WEB est leur capacité d’agir
comme interface avec des systèmes de base de données reliée à Internet.

Le web est un système de traitement distribué

Dans le web les documents peuvent être stockés dans toutes les mémoires reliées au réseau,
cela signifie que les documents qui y sont mémorisés peuvent être distribués dans tout le réseau.

II.6. Les standards du web

Trois technologies ont dû être développées pour le World Wide Web :

Les URL pour pouvoir identifier toute ressource dans un hyperlien.

Le langage HTML pour écrire des pages web contenant des hyperliens.

Le protocole de communication HTTP utilisé entre les navigateurs et les serveurs web.

II.6.1. URL (Universal/Uniform Resource Locator) : [5]

Un document sur le web possède des liens vers d’autres documents et peut lui-même être lié
depuis un autre document. De la même manière qu’une station de travail possède une adresse
unique, un identificateur doit être associé à chaque document.

L’identificateur d’un document sur le web s’appelle une adresse URL (Uniform Ressource
Locator) et possède la structure suivante :

Page 22
Chapitre II Les nouvelles technologies de l’information et de la communication

<service>://<user> :<password>@<host> :<port>/<url-path>


La partie <service> identifie le protocole d’accès (ftp ou http par exemple). La partie <user>
:<password> est facultative et permet d’accéder à des documents protégés par mot de passe. La
partie <host> :<port> identifie la machine sur laquelle se trouve le document et le port de
communication utilisé. La partie <host> peut être donnée sous forme numérique
(129.195.100.204) Ou alphabétique (cernvm.cern.ch). La partie <port> est en général la valeur par
défaut 8080 et n’est pas spécifiée dans ce cas. Enfin, la partie <url-path> est le chemin d’accès au
document.

II.6.2. Le langage HTML

Le HTML (Hyper Text Markup Language) est un langage permettant de décrire la mise en
page et la forme du contenu d’un document web et d’y inclure des hyperliens.

Une page HTML est ainsi un simple fichier texte doté d'une extension .htm ou html, et dont
l'ensemble des données figurent entre des balises (encore appelés marqueurs ou tags).
L’Hypertexte est un système utilisant le langage HTML, qui autorise la création de liens
hypertextes. Un document hypertexte est donc un document qui contient des hyperliens. Lorsque
les documents ne sont pas uniquement textuels, mais aussi audiovisuels, on peut parler de système
et de documents hypermédias.

II.6.3. HTTP

L’HTTP (Hypertexte Transfer Protocol) littéralement « protocole de transfert hypertexte », est


un protocole de communication informatique client-serveur développé pour le World Wide Web.
Il est utilisé pour transférer les documents (document HTML, image, feuille de style, etc.) entre le
serveur HTTP et le navigateur Web.
HTTPS est la variante du HTTP utilisé pour l'accès sécurisé à un serveur Web.
Si l'on indique HTTPS dans l'URL au lieu de la mention HTTP normale, le message sera adressé
vers un port d'entrée sécurisé du serveur. Le dialogue entre le navigateur

Web et le serveur sera alors géré avec des contraintes de sécurité. En particulier, les échanges
de données seront cryptés et l'internaute sera généralement identifié. Parmi les protocoles
supportant ces fonctions, on peut citer SSL de Netscape, SHTTP de NCSA, et PCT de Microsoft.

Page 23
Chapitre II Les nouvelles technologies de l’information et de la communication

Le protocole HTTPS est généralement utilisé pour les transactions financières en ligne :
commerce électronique, banque en ligne, courtage en ligne, etc.

II.7. Technologies de programmation des applications web

Les technologies côté client

Il s’agit de l’ensemble des outils pris en charge par le navigateur. Les technologies côté client
permettent de gérer l'interface utilisateur de chaque page. Lorsqu’une page Web est consultée par
un visiteur, le serveur HTTP se contente de transmettre au client le code source de celle-ci.

C'est ensuite au navigateur du client d'interpréter le code reçu. Parmi les technologies coté client
on cite :

CSS (Cascading Style Sheet)

Est un langage de mise en forme qui permet de décrire la présentation d'un document
(positionnement des éléments, l'alignement, les polices de caractères, les couleurs, les marges et
espacements, les bordures, les images de fond, etc.) écrit en HTML ou XML indépendamment de
sa structure.

XSL (Extensible Stylesheet Language)

Est considéré comme l’équivalent du CSS pour XML. C’est un langage qui permet de décrire
la manière dont des documents XML doivent être présentés. Ainsi, là où XML structure le fond
d'un document (i.e. son contenu), XSL structure sa forme.

JavaScript

C’est un langage de script dérivé de java. JavaScript permet de dynamiser la présentation du


contenu (animations, textes défilants…) ou de contrôler les données saisies dans des formulaires
html.

Page 24
Chapitre II Les nouvelles technologies de l’information et de la communication

Applets java

Une applet est un petit programme java pouvant être intégré dans une page Web et qui réside
sur le serveur. Les applets servent à défiler du texte, présenter des menus, créer des animations,
des formulaires capables de réagir à des informations entrées par l'utilisateur, ou tout autre type
d'effets interactifs sur une même page Web.

Les technologies côté serveur

Il s’agit de l’ensemble des outils exécutés sur le serveur web. Ces technologies permettent de
générer des pages en langage client : le serveur HTTP fait interpréter le code puis encapsule le
Résultat dans une page HTML qui va être envoyée par Internet au navigateur, qui va pouvoir la
lire. La génération de cette page peut se faire en fonction de paramètres connus du serveur
uniquement. Parmi les technologies coté serveur on cite :

ASP (Active Server Pages)

Est une technologie Web initiée par Microsoft en 1996 permettant d'exécuter des scripts côté
serveur et développer des applications Web dynamiques en fournissant un accès simple à des
bases de données. Une page ASP est en fait une page HTML à laquelle une partie de code de
programmation a été ajoutée. Ce code peut être programmé en divers langages de script, tel VB
Script, JScript, Perl Script ou Python.

Un script CGI (Common Gateway Interface ou interface de passerelle commune)

Est un programme exécuté du côté serveur, permettant de cette façon l'affichage de données
traitées par le serveur (provenant d'une autre application, comme un système de gestion de base de
données, d'où le nom de passerelle). C'est l'usage le plus courant des programmes CGI.

JSP (Java Server Pages)

Est une technologie basée sur JAVA permettant la génération de pages web dynamiques.
JSP consiste en une page HTML incluant du code Java (appelées scriptlets Java) qui s'exécutera
sur le serveur.

Page 25
Chapitre II Les nouvelles technologies de l’information et de la communication

Servlet

Cette technologie serveur permet de générer des pages Web dynamiques, dont le contenu, issu
de programmes d'applications sur le serveur, est adapté aux spécifications et aux requêtes
d'utilisateurs particuliers. Tout comme pour les scripts CGI, les servlets Java réalisent la liaison
entre des requêtes clientes et des données ou applications liées à un serveur.

II.8. La sécurisation du web [8] :

La grande force d’Internet est sa capacité à rendre toute information disponible


immédiatement à des millions d’utilisateurs anonymes dans le monde entier.
Cette capacité repose sur des standards ouverts, notamment les protocoles de communication qui
s’appuient tous sur TCP/IP .ceci peuvent engendrer des lacunes au niveau de la sécurité des
données de l’entreprise à deux niveaux :
L’ouverture du réseau interne à l’extérieur permet aux utilisateurs de consulter des pages
web via http, mais aussi de s’introduire de l’extérieur via TCP/IP.
Le serveur web communique au monde extérieur certaines informations, il faut s’assurer
qu’il ne permet pas d’avoir accès à des informations confidentielles.
Il est essentiel de protéger l’entreprise contre ces deux types de menaces.

III. Sites web

III.1. Définition

Un site web (aussi appelé site internet) est un ensemble cohérent de pages web hyper-liées
entre elles, conçues pour être consultées avec un navigateur Web, publiées par un propriétaire (une
entreprise, une administration, une association, un particulier, etc.) et hébergées sur un ou
plusieurs serveurs Web.

III.2. Les typologies de site web

Les sites web peuvent être distingués selon différents critères comme suit :

Page 26
Chapitre II Les nouvelles technologies de l’information et de la communication

III.2.3. Distinction selon les types d'accès

Sites publics : ce sont des sites dont les pages peuvent être visitées par tous.

Sites privés : ce sont des sites qui ne donnent accès à aucune page autre que la page
d'accueil, sans une inscription préalable. L’accès à ce type de sites peut être libre
(accessible par tous) ou restreint (accessible par un groupe de personnes spécifique).

Sites gratuits : ce sont des sites qui offrent des services et outils gratuits.

Sites commerciaux : ce sont des sites de vente en ligne

III.2.1. Distinction selon le but poursuivi et le contenu : On distingue :

Les Sites catalogues : permettent de présenter les produits d’une entreprise et de les
mettre en valeur.
Les Sites d'information : sont des sites fournissant des informations particulières à des
internautes.

Les Sites institutionnels : sont des sites destinés à décrire l'activité d’une organisation, et
à donner les informations nécessaires aux clients ou aux bénéficiaires.

Les Sites personnels (parfois pages perso) : sont des sites réalisés par des particuliers à
titre de loisir, le plus souvent par passion pour un sujet ou une discipline.

Les Sites communautaires : sont des sites réunissant des internautes autour d'un intérêt
commun.

Les Sites intranet : sont des sites accessibles de l'intérieur d'une entreprise ou d'une
direction, ayant pour objet la mise à disposition et le partage d'informations
professionnelles.

Les Sites vitrine (sites plaquette ou sites identité) : sont des sites dont l'objectif est de
mettre en avant l'image de marque de la société, en présentant par exemple ses produits ou
ses services.

Page 27
Chapitre II Les nouvelles technologies de l’information et de la communication

III.2.2. Distinction selon les fonctionnalités et les techniques : On distingue :

Sites statiques :

On entend par page statique, non pas une page sans mouvements ou sans animations, mais
une page visible telle qu'elle a été conçue.

Ces pages peuvent présenter toute forme de contenu, animations flash, images, musique,
vidéo…etc. Mais elles sont toujours présentées de la même façon. Elles ne changent pas et c'est en
ce sens qu'elles sont statiques.

Fonctionnement d’un site statique

Dans un site statique, l’administrateur du site compose les pages Web avec un éditeur
HTML puis ces pages sont stockées sur le serveur web. Celui-ci renvoie ces pages à la demande
au visiteur (client), par la suite ces pages ne pourront être modifiées, par l’administrateur, que via
un éditeur HTML. Le contenu de ces pages est fixe comme un fichier Word, et n’est pas modifié
par le serveur. Le site est donc dit « statique » car son contenu ne change que par intervention
humaine et non pas par des fonctions automatiques opérées par le serveur.

Sites dynamiques

Ce sont des Sites web dont les pages HTML se construisent dynamiquement lors de leur
consultation par un internaute. Les informations sont changeantes car extraites à partir de bases de
données régulièrement mises à jour. La construction de sites dynamiques repose sur des
technologies de scripts telles que PHP, ASP …

Fonctionnement d’un site dynamique

L’administrateur du site et le visiteur utilisent le même outil : le navigateur web. Mais les pages
avec les quelles travaille l’administrateur ne sont pas les mêmes que celles que le visiteur voit. De
son coté, le visiteur visualise des pages qui font appel au contenu de la base de données.

Page 28
Chapitre II Les nouvelles technologies de l’information et de la communication

C’est le serveur web qui s’occupe de récupérer le contenu des formulaires que remplit
l’administrateur, et de renvoyer cette information dans les pages vues par le visiteur.

Sites collaboratifs

Un site collaboratif est un site dynamique dont le contenu est librement modifiable en ligne
par tout visiteur, ce qui rend l’utilisateur contributeur.

Le développement de sites collaboratifs repose sur la gestion des forums, des news, des flux
RSS, contenus collaboratif, échanges etc.

III.3. Etapes de création de sites web

La création d'un site web est un projet à part entière comprenant un grand nombre de phases dont :
- La conception
- La réalisation
- L’association d’un nom de domaine
- L’hébergement et la mise en ligne
- Le référencement et la promotion
Dans ce qui suit les principales étapes de la création d’un site web sont définies:

III.3.1. La Conception

La conception d’un site permet de mettre en place un modèle sur lequel on va s'appuyer lors de
l’implémentation. Cette étape doit donner lieu à l'élaboration d'un cahier des charges décrivant
l'ensemble des fonctionnalités prévues pour la réalisation du site web. La conception d'un site
Internet découle ainsi directement de la définition des besoins. L’analyse des besoins du site
concerne alors les points suivants :

Le choix du type de site à réaliser (vitrine, marchand, etc.) : Cela dépend du but du
site.

Le type de contenu qu’il faut intégrer dans le site : Un site web se construit en fonction
de son contenu. Il faut savoir de quels types de documents le concepteur dispose-t-il pour

Page 29
Chapitre II Les nouvelles technologies de l’information et de la communication

alimenter le site. Cela peut être du texte, des images, des animations, de la vidéo ou du
son…

La forme des données : CD-ROM, disquette, papier, photos, etc. Ce qui permet d’estimer
le temps éventuel de numérisation des données.

Déterminer le public du site : Savoir à qui le concepteur s’adresse est primordial pour
définir un certain nombre d’éléments liés à l’aspect graphique et au ton rédactionnel qu’il
convient d’employer.

Définir la structure du site : Il s’agit d’organiser le contenu du site de manière logique


pour que les internautes puissent accéder à l’information le plus rapidement et le plus
simplement possible, sans êtres perdus au bout de quelques clics. La structure la plus
souvent adoptée comprend :

Une page d’accueil : c’est la première page du site. Cette page renvoie sur les différentes
rubriques contenues dans le site.
La page présentation : servant à présenter le site et son contenu.

Les pages rubriques : ce sont les autres rubriques du site.

La page contact :

Définissant les approches de contact, soit par mail soit par voie postale classique, offertes aux
internautes.
A cette structure du site, est associée une présentation adéquate. La présentation la plus
classique est un bandeau de titre en haut, un menu de navigation à gauche, et un menu de
navigation en bas comprenant le lien de contact.

Définir la charte graphique du site

C’est l’élaboration et la description des différents éléments graphiques qui composent


l’aspect du site web. L’ensemble comprend le logo, une bannière, les boutons, les en-têtes, les
images, les couleurs, les polices de caractères utilisées, le système de navigation ... Le graphisme

Page 30
Chapitre II Les nouvelles technologies de l’information et de la communication

est un élément important pour la fréquentation du site et la compréhension de son contenu. Quand
on recherche une Information sur Internet, on obtient une multitude de réponses. Le graphisme
peut être un élément décisif dans le choix de l’internaute.
Le contenu à disposer sur le site doit être complet et prêt à être exploité dans la phase de
Réalisation.

III.3.2. La Réalisation

Après la conception Web vient la réalisation qui est l’étape de concrétisation technique du
projet client. C’est la phase de développement pur, celle où il faut produire le code nécessaire aux
besoins du site. C’est à ce moment que les maquettes graphiques sont transformées en pages
HTML.

III.3.3. Association du nom de domaine

Un site web est identifié sur Internet grâce à une adresse web. L’adresse web est généralement
composée de trois parties :
Le service.
La racine c'est-à-dire le nom correspondant au nom de domaine proprement dit.
Le suffixe communément appelé extension (ou nom de domaine).

Les domaines sont répartis en deux grandes catégories : Les domaines de premier niveau
(TLDs pour Top Level Domains) caractérisant une zone géographique (.fr : France, .eu : Europe,
.dz : Algérie, …)
Les domaines de second niveau (sLDs) caractérisant la nature de l'organisation (.com :
commercial, .gov : gouvernementale, .edu : éducation …).

Avant d’attribuer un nom de domaine à un site donné, il est conseillé de vérifier si ce dernier
est réellement disponible. Pour cela, il existe des organismes à même de fournir des informations
sur les noms de domaines disponibles ou non, par exemple :

Aazed: base de données de noms de domaine à vendre.


AFNIC (Association Française pour le Nommage Internet en
Coopération) : Pour trouver les noms de domaines en .fr .

Page 31
Chapitre II Les nouvelles technologies de l’information et de la communication

Internic : moteur de recherche mondial des noms de domaine. Très utile, notamment pour
les noms de domaines génériques.

Networksolutions: permet de vérifier les noms en .com, .org et .net, dépôt possible mais il
faut posséder une IP primaire et secondaire.

Namedroppers: très bon moteur de noms de domaine. A partir d’un terme donné,
Namedroppets propose tous les noms de domaine contenant ce mot.

RIPE : recherche parmi les noms de domaines attribués au niveau européen.

Whois.net:

Le plus pratique, il permet de vérifier la disponibilité d'un nom de domaine, voire d'en connaître
le propriétaire. Une fois le nom de domaine choisi, il s’agit de l’enregistrer auprès d’un organisme
compétent, à l’issue de quoi ce nom de domaine peut ensuite être utilisé.

III.3.4. Hébergement

Afin de rendre un site web disponible sur Internet, il est nécessaire de le faire héberger sur un
serveur web. L’hébergement est un service assuré par un fournisseur spécialisé appelé hébergeur
Internet qui met à disposition du site, un espace disque dédié sur un serveur web connecté en
permanence à Internet.

III.3.5. Référencement du site

Le référencement est l'ensemble des activités qui permettent à un site web d'apparaître dans les
premières pages des moteurs de recherche lorsqu'un internaute effectue une recherche à partir de
quelques mots clés. Ce service a l'avantage de faire connaître le site aux internautes, d'en accroître
la visibilité et d'en augmenter ainsi le nombre de prospects.

Page 32
Chapitre II Les nouvelles technologies de l’information et de la communication

IV. Les réseaux sociaux : [9]

IV.1 Définition
Le terme désigne un site internet permettant à l’internaute de s’inscrire et d’y créer une carte
d’identité virtuelle appelée le plus souvent « profil ». Le réseau est dit social en ce qu’il permet
d’échanger avec les autres membres inscrits sur le même réseau. On peu partager des messages
publics ou privés, des liens hypertexte, des vidéos, des photos, des jeux.
Dans le cadre d’enseignement supérieur, Un Réseau social est un espace d'échanges sur des
thèmes touchant de près ou de loin aux disciplines enseignées dans l'établissement

IV.2. Les type des réseaux Sociaux dans l’université

On peut s’intéresser à trois types de réseaux sociaux dans une université :

Les réseaux sociaux grand public (Facebook, Twitter, …) qui permettent de gérer la
relation de l’institution au grand nombre, en particulier aux étudiants (futurs, actuels et
passés).

Les réseaux sociaux académiques, qui permettent de mettre à disposition, selon


différentes modalités, des contenus -pédagogiques ou de recherche- de façon large ; Les
réseaux sociaux académiques soulèvent la question de l’offre de formation numérique de
L’université (ou d’un collectif d’universités) et de son modèle économique. Et ce, pour la
formation initiale comme pour la formation tout au long de la vie.

Les réseaux sociaux internes qui permettent des collaborations accrues entre acteurs
fédérés par un projet commun.

Quelques exemples des réseaux sociaux

facebook: on ne le nomme plus, il permet d'échanger photos, vidéos, a une liste


d'amis et de discuter sur le net ainsi que de poster des commentaires.

twitter : il permet d'envoyer de petits messages pour renseigner les autres internautes
de se qui se passe la ou l'on vit (manifestation, grand événement)

Page 33
Chapitre II Les nouvelles technologies de l’information et de la communication

Youtube : Permet de diffuser des vidéos qui seront accessibles à tous ou uniquement à
ses amis

Les forums : ils permettent aux internautes inscrits de discuter de différents sujets aillant
un thème commun sur le net, les sujet sont souvent appelés topics (sujets en anglais).

Les boîtes mail : elles permettent d'envoyer des messages des photos et d'autres
fonctions Qui varient avec les différentes boîtes mail.

Les jeux en lignes : Leurs possibilités sont très variées mais l'objectif habituel est de
faire évoluer un avatar (personnage virtuelle) en combattant d'autre joueurs ou monstres
(ces derniers sont contrôlés par IA, intelligence artificielle)

IV.3. Les avantages et les inconvénients

Les Avantages

Un avantage des réseaux sociaux, c’est qu’ils sont un moyen gratuit et facile de
communiquer avec les autres. On peut communiquer avec des amis ou des membres de la
famille de partout dans le monde presque tout de suite.

En outre, les réseaux sociaux, comme Facebook, sont un bon moyen de rester en contact avec
vos amis anciens et nouveaux. On peut partager ses pensées, photos, vidéos, etc., avec tous leurs
amis avec le clic d’un bouton.

Les réseaux sociaux sont un outil utile pour les entreprises ainsi que les jeunes. Ils
permettent aux entreprises d’avoir un contact direct avec leurs clients. La plupart des
entreprises ont leur propre page facebook ou compte twitter où ils peuvent informer les
clients des nouveaux produits ou des offres spéciales ainsi que de recevoir les
commentaires des clients .Les réseaux sociaux offrent aux entreprises une grande publicité.

Les Inconvénients

Il ya des gens qui ont besoin d’être sur ces sites toutes les heures ou toutes les minutes! Cela
peut créer de graves problèmes pour eux. Beaucoup d’étudiants trouvent qu’il est difficile à

Page 34
Chapitre II Les nouvelles technologies de l’information et de la communication

étudier car ils sont trop distraits par leur Facebook. Souvent, les résultats des examens sont
pauvres à cause de cela. D’autres personnes peuvent prendre du retard au travail parce qu’ils sont
trop occupés avec les réseaux sociaux.

Conclusion
Dans ce chapitre nous avons donné un aperçu de ce qu’est l’Internet, des services qu’il offre
parmi lesquels le web. Nous avons alors détaillé les concepts du web et les technologies associées,
ainsi que la programmation des projets de développement des sites web et puis définit les réseaux
sociaux.
Notre travail dans le cadre de ce mémoire concerne la conception et l’implémentation d’une
application web pour la vie social au sein de département informatique de l’UMMTO.
Le chapitre suivant est dédié à l’analyse et à la conception de ce site.

Page 35
Chapitre III Analyse et conception

Introduction :

Aujourd’hui, le standard industriel de modélisation est UML, qui se définit comme un


langage de modélisation graphique et textuel destiné à comprendre et décrire les besoins spécifiés
et documentés des systèmes, esquisser des architectures logicielles, concevoir des solutions et
communiquer des points de vue.

Dans notre application, nous procèderons à une modélisation avec l’UML étendu pour le
web, en décrivant les cas d’utilisations qui servent d’outil d’analyse et de la conception du
système, ainsi on élabore les diagrammes de séquence et les diagrammes de classes.

Pour analyser les besoins du système, nous somme poser deux questions : A qui notre
application est elle destinée ? Quel est son objectif ?

L’expression des besoins doit donc proposer ce que le système devrait accomplir, non pas
comment mais quoi. Ce sont l’analyse et la conception qui répondront à la question « comment ?».

I. Présentation de l’UML : [10]

UML est un langage de modélisation fondé sur le concept objet. L’objectif d’UML est de
fournir une notation standard utilisable dans le développement des systèmes informatiques basés
sur l’objet.
UML (Unified Modeling Language ou Langage de modélisation unifié) est la notation
standard qui s’est imposée pour la modélisation des systèmes informatiques. Elle est née de la
fusion de trois méthodes qui ont le plus influencé la modélisation objet au milieu des années 90
:l’OMT (Object Modeling Technique) de James Rumbaugh, Booch de Grady Booch, et OOSE
(Object Orient Software Engineering) d’Ivar Jacobson.

I.1. La modélisation UML :

Schématiquement, UML peut être défini sur trois plans :

Concepts dont la sémantique est complètement et formellement définie (Cas d’usage,


scénarios, Objets, classes, associations, messages, opérations, état et transitions...)
Diagrammes, utilisés pour spécifier les besoins et les systèmes.
Mécanismes d’extension, pour intégrer aux processus des stéréotypes spécifiques aux
différentes méthodes et/ou contextes applicatifs.

Page 36
Chapitre III Analyse et conception

Les diagrammes UML supportent l'abstraction. Leur niveau de détail caractérise le niveau
d'abstraction du modèle. La structure des diagrammes UML et la notation graphique des éléments
de modélisation sont normalisées.
UML propose de décrire un système à l’aide des diagrammes suivant:

Diagrammes de cas d'utilisation


Diagrammes d'objets
Diagrammes de classes
Diagrammes de composants
Diagrammes de déploiement
Diagrammes de collaboration
Diagrammes de séquence
Diagrammes d'états-transitions
Diagrammes d'activités

Ces diagrammes, d’une utilité variable selon les cas, ne sont pas nécessairement tous produits à
chaque modélisation. Pour le cas de notre application les diagrammes utilisés sont les diagrammes
de cas d’utilisation, de séquence, et de classes.

I.2. Les diagrammes de l’UML :

Diagrammes de cas d'utilisation : les diagrammes de cas d’utilisation représentent les


fonctions du système selon les besoins de l’utilisateur.

Diagrammes d'objets : les diagrammes objets représentent les objets et leurs relations

Diagrammes de classes : le diagramme de classe contient un ensemble de classes ainsi


que leurs relations. L’intérêt majeur de ce diagramme est de représenter les entités du
système d’information.

Diagrammes de composants : les diagrammes de composant sont essentiellement des


diagrammes de classes centrés sur les composants d’un système.
Ce sont des diagrammes qu’on trouve dans la modélisation de l’aspect physique des systèmes
orientés objet

Page 37
Chapitre III Analyse et conception

Diagrammes de déploiement : Utilisés dans la modélisation des aspects physiques


d’un système orienté objet, ces diagrammes montrent la disposition physique des
différents matériels qui entrent dans la composition d’un système et la répartition des
programmes exécutables sur ces matériels.

Diagrammes de collaboration : les diagrammes de collaboration mettent en place les


interactions entre les différents objets du système étudié et les messages qu’ils
s’échangent.
Dans le cadre de l’analyse, ces diagrammes sont utilisés pour faire apparaître les
échanges d’informations entre le système étudié et les autres systèmes.

Diagrammes de séquence : les diagrammes de séquence montrent des interactions


entre objet selon un point de vue temporel. Généralement ces diagrammes définissent
les objets acteurs et le système.

Diagrammes d'états transitions : le diagramme d’état transition montre un automate à


états finis qui met en évidence l’enchaînement des différents états d’une classe.

Diagrammes d'activités : Le diagramme d’activité est un organigramme utilisé pour


modéliser l’aspect dynamique du système. Il permet de montrer le flot de control d’une
application à une autre. Il permet aussi de modéliser les étapes séquentielles dans un
processus de calcul.

Ces diagrammes sont utilisés pour modéliser les aspects dynamiques du système.

I.3. Extension d’UML pour le web : [10]


Une extension d’UML est définie par les nouveaux stéréotypes, étiquettes et contraintes. En
combinant, on peut créer de nouvelles briques de base pouvant être utilisées dans un modèle.

Un stéréotype : est une extension du vocabulaire d’UML, il permet d’associer une nouvelle
signification à un élément du modèle. On représente un stéréotype par une chaîne de caractères
entre guillemets (<< >>).

Page 38
Chapitre III Analyse et conception

Une étiquette : est une extension des propriétés d’un élément, elle permet la description d’une
nouvelle propriété d’un élément. On la représente par une chaîne de caractères entre chevrons

(< >).

Une contrainte : est une extension de la sémantique d’UML. Elle édicte une règle que le
modèle doit vérifier pour être qualifié de « bien formé ».Elle est représentée par une chaîne de
caractères entre accolade ({ }).

Le principal élément spécifique des applications Web étant les pages Web : plusieurs
stéréotypes, qui lui sont destinés sont conçus pour des éléments tels que les cadres, les cibles et les
formulaires qui représentent eux aussi des composants architecturalement significatifs dans un
modèle.

Stéréotype :

1. Classe :

Page serveur « Server page » :

Description :

Une page serveur représente une page qui possède des scripts exécutés par le serveur.
Ces scripts interagissent avec des ressources serveur, telles que les bases de données.
Les opérations de l’objet représentent les fonctions dans le script et ses attributs, représentent les
variables qui sont visibles dans la portée de la page (c-à-d accessible par toutes les fonctions de la
page).
Page
Icône :
Serveur
Contraintes : la page serveur ne peut avoir de relation qu’avec les objets sur le serveur.

Enquêtes : moteur de script pouvant être un langage ou le moteur qui doit être utilisé pour
exécuter ou interpréter cette page.

Page client « client page » :

Description :
Une instance d’une page client est une page web formatée en HTML, un mélange de
données, de représentation et même de logique. Les fonctions d’une page client correspondent aux
fonctions des scripts de la page web, quant à ses attributs, ils correspondent aux variables

Page 39
Chapitre III Analyse et conception

déclarées dans les scripts et qui sont accessibles à toutes les fonctions de la page. Les pages clients
peuvent avoir des associations avec d’autres pages client ou serveur.

Icône :

Page
client

Contraintes : aucune
Étiquette :
Titre : titre de la page tel qu’il est affiché dans le navigateur.

Base : URL de la base pour déréférencer les URL relatives.

Corps : ensemble des attributs de la balise <body> qui définit les caractéristiques par
défaut du texte et de l’arrière plan

Formulaire « form » :

Description :

Une classe stéréotypée « form » est un ensemble de champ de saisie faisant partie d’une
page client. A une classe formulaire correspond une balise HTML « form », ses attributs sont les
éléments de saisie d’un formulaire HTML telles une zone de saisie, une zone de texte, bouton
d’option…..
Un formulaire n’a pas d’opérations : toutes les opérations qui interagissent avec le formulaire
appartiennent à la page qui contient.

Formulaire

Icône :

Contraintes : aucune.
Etiquettes : les méthodes Post et Get pour soumettre les données à L’URL de l’attribut action de
la balise HTML<form>.

Page 40
Chapitre III Analyse et conception

Cible « target » :
Description :

Une cible est une zone nommée dans la fenêtre dans laquelle les pages web peuvent s’afficher.
Le nom de la classe stéréotypée est celui de la cible. Souvent une cible est le cadre défini dans une
fenêtre, mais elle peut être une toute nouvelle instance du navigateur : une nouvelle fenêtre. Une
association « targeted link » spécifie la cible ou une page web doit être affichée.
Contraintes : un nom de cible doit être unique pour chaque client du système. Par conséquent une
seule instance d’une même cible peut exister sur un même client.

2. Association :

Lien « link » :

Description :

Un lien est un pointeur d’une page client vers une autre page. Dans un diagramme de
classe, un lien est une association entre une page client et une page serveur. A un lien correspond
une balise HTML ancre.
Icône :
<<Link>>

Contraintes : aucune.

Etiquettes : paramètres : c’est la liste de noms de paramètres qui doivent être passes avec la
demande de la page liée.

Lien cible « taget link » :

Description : Similaire à une association lien, un lien cible est un lien dont la page associée est
affichée dans une cible. A un lien correspond une balise HTML ancre, dont l’attribut Target prend
la valeur de la cible.

Icône :
<<Target Link >>

Contraintes : aucune

Etiquettes : en plus de la liste des paramètres, le nom de la cible ou la page vers laquelle point le
lien ne doit être affiché.

Page 41
Chapitre III Analyse et conception

Soumet « submit » :

Description :

Une association de soumission se trouve toujours entre un formulaire et une page serveur :
les formulaires soumettent les valeurs de leurs champs au serveur pour qu’il les traite. Le serveur
web traite la page serveur, qui accepte les informations de formulaire et les utilise.
Icône :
<<Submit >>

Contraintes : aucune.

Etiquettes : paramètres : la liste de nom de paramètres qui doivent être passées avec la demande
de la page liée.

Contenu de cadre « frame content » :

Description :

Une association « contenu de cadre » est une association d’agrégation qui traduit
l’appartenance d’une page ou d’une cible à un cadre. Une association contenue de cadre peut aussi
pointer vers une structure de cadre aboutissant dans ce cas à des cadres imbriqués.
Icône : aucune

Contraintes : aucune

Étiquette :

Rangée : entier qui indique la rangée du cadre dans la structure de cadres auquel
appartient la page ou la cible associée

Colonne : entier qui indique la colonne du cadre dans la structure des cadres auquel appartient la
page, ou la cible associée.

Construit « build » :

Description :

La relation « build » est une relation particulière faisant le pont entre les pages clients et les
pages serveur. L’association « build » indique quelle page serveur est responsable de la création
d’une page client. C’est une relation orientée, puis que la page client n’a pas connaissance de la

Page 42
Chapitre III Analyse et conception

page serveur qui la construite. Une page serveur peut construire plusieurs pages clients, en
revanche une page client n’est construite que par une seule page serveur.
Icône : aucune.

Contraintes : aucune.

Etiquettes : aucune.

Redirigé « redirect » :

Description :

Une relation de ce type est une association unidirectionnelle avec une autre page web,
pouvant être dirigée à partir d’une page client ou serveur vers une autre page client ou serveur. Si
la relation part d’une page serveur, le traitement de la requête de la page peut se poursuivre par
l’autre page, cela ne veut pas dire que la page de destination participe toujours à la construction de
la page client, simplement qu’elle le pourrait, et le déclenchement d’une redirection doit être
programmé dans le code de la page d’origine.
Icône : aucune

Contraintes : aucune

Etiquettes : délai : délai que doit observer la page client avant de se diriger vers la page de
destination. Cette valeur correspond à l’attribut content de la balise <META>.

II. Objectifs

Le principal objectif de notre application est de concevoir un site web social pour le
département informatique de la faculté Génie Electrique et Informatique Mouloud MAMMRI
Tizi Ouzou .Notre application permettra :
Au visiteur de :
Naviguer dans l’application
Télécharger des cours
Consulter les affichages
Consulter les événements
Consulter le forum
A l’administrateur de :

Naviguer dans l’application

Page 43
Chapitre III Analyse et conception

Modifier le mot de passe et/ou login


Consulter les affichages
Gérer les forums
Gérer les tables de base de données
Gérer les enseignants
Gérer les étudiants
Gérer les ATS
Gérer les groupes de discutions
Gérer la messagerie
Gérer l’actualité
Gérer les événements
Gérer le partage des fichiers (PDF, images, vidéos, dossiers)
Aux étudiants de :
Naviguer dans l’application
Télécharger des cours
Consulter les cours
S’inscrire
S’authentifier
Consulter les affichages
Accéder à la messagerie
Accéder au forum
Partager des fichiers, des images et des vidéos.
Créer un groupe de discutions étudiants
Créer un événement
Accéder à l’historique personnel
Voir tous les groupes
Aux enseignants de :
Naviguer dans l’application
S’inscrire
S’authentifier
Consulter les affichages
Accéder à la messagerie
Accéder au forum
Partager des fichiers (TDs, cours et Tps) entre enseignants.

Page 44
Chapitre III Analyse et conception

Déposer des cours


Déposer un affichage
Voir tous les groupes
Créer un groupe de discutions enseignant
Créer un événement
Accéder à l’historique personnel
Aux ATS de :
Naviguer dans le site
Déposer des affichages
Partager des fichiers
Créer un groupe de collaboration ATS
Accéder à la messagerie

III. Analyse :

Cette activité commence par l’étude de cas d’utilisation et leurs scénarios ainsi que les besoins
fonctionnels du système (ce que le système doit faire en réponse à une requête d’un utilisateur),
qui aboutira à un ensemble de diagrammes de séquences.

Les objets d’analyse sont des instances de classe d’analyse qui représentent des éléments
majeurs ayant des comportements et des responsabilités dans le système. Ce sont les diagrammes
de classe qui illustrent les classes d’analyse et des relations qu’elles entretiennent.

III.1. Quelques définitions de base :

Acteur : Un acteur est un ensemble cohérent de rôles joués par des entités externes
(utilisateurs humains, dispositif matériel ou autre système) qui interagissent directement
avec le système étudié.
Cas d’utilisation : Un cas d’utilisation représente un ensemble de séquences d’actions qui
sont réalisées par le système et qui produisent un résultat observable intéressant pour un
acteur particulier. Chaque cas d’utilisation signifie un comportement attendu du système,
considéré comme un tout sans imposer le mode de réalisation de ce comportement. Il
permet de décrire ce que le système devra faire sans spécifier comment le faire.
Scénario : Chaque résultat possible de l’exécution d’un cas d’utilisation est appelé
scénario. Un scénario est une instance de cas d’utilisation. Un ensemble de scénarios pour

Page 45
Chapitre III Analyse et conception

un cas d’utilisation identifie tout ce qu’il peut arriver lorsque ce cas d’utilisation est mis en
œuvre.

III.2. Identification des acteurs :


Avant de décrire les différents cas d’utilisation, il est nécessaire de mettre en évidence les
acteurs utilisant le système ainsi que leurs taches respectives et les scénarios qui les décrivent en
regroupant plusieurs de ces scénarios dans un ensemble cohérent, nous obtenons les différents cas
d’utilisation.

Dans notre application nous recensons les acteurs suivants :

Le visiteur : considéré comme une personne qui veut satisfaire sa curiosité.


l’étudiant : qui fait ses études au sein du département informatique.
l’enseignant : enseigne au sein du département informatique...
Les ATS : représentent le service administration du département informatique
l’administrateur : personne qui a pour rôle principal de gérer toutes les tables de la base
de données.

III.3. Spécification des taches :


Les taches associées à chaque acteur sont :

Acteurs Taches
Visiteur T0: Se connecter
T1: Naviguer sur le site
T2: Télécharger des cours
T3: Consulter les affichages
T4 : Consulter les événements
T5 : Consulter le Forum

T0…T5
Etudiant T6 :S’inscrire
T7: S’authentifier
T8: Accéder aux forums
T9 : Accéder à la messagerie
T10 : Partager des fichiers, des images et des

Page 46
Chapitre III Analyse et conception

vidéos.
T11 : Gérer un groupe de discutions
T12 : Gérer un événement
T13 : Accéder à l’historique personnel
T14 : Changer le mot de passe
T15 : Se déconnecter
T0…T15
enseignant T16 : Déposer des cours
T17 : Déposer un affichage

Les ATS T18 : se connecter


T19: S’inscrire
T20 :S’authentifier
T21: Déposer des affichages
T22 : Créer un groupe de collaboration ATS
T23 : Accéder à la messagerie
T24 : Changer le mot de passe
T25 : Se déconnecter

Administrateur T26 : S’authentifier


T27 : Modifier le mot de passe et/ou login
T28 : Gérer les tables de base de données
T29 : Gérer les groupes de discutions
T30 : Se déconnecter

Tableau III.1:Table d'identification des activités.

III.4. Spécification des scénarios :


Un cas d’utilisation peut avoir une ou plusieurs instances représentées par des scénarios.
Chacun des acteurs qu’on a définit effectue des taches, et chaque tache est décrite par des
scénarios qu’on résume comme suit :

Page 47
Chapitre III Analyse et conception

Acteurs Les taches Scenarios


Visiteur T0 S0 : Url de la page d’accueil (du site)

S1 : Sélectionner les liens


T1 S2 : Accéder aux pages
T2 S3 : Sélectionner le lien « cours ».
S4: Télécharger le cours
T3 S5 : Sélectionner le lien« affichages ».
S6: Consulter les affichages
T4 S7 : Sélectionner le lien« événement ».
S8 : Consulter les événements
T5 S9 : Sélectionner le lien« Forum ».
S10 : Consulter les Forums

Etudiant T0…T5 [S0….S10]

T6 S11: cliquer sur le bouton connexion étudiants


S12 : Accéder à l’espace étudiant
S13 : remplir le formulaire d’inscription et valider

T7 S14 : Accéder à l’espace étudiant


S15 : Saisir le login et le mot de passe.
S16 : Cliquer sur le bouton login

T8 S17 : Sélectionner le lien « Forum ».


S18 : Consulter les forums
S19 : Ajouter un sujet au forum
S20 : Commenter un sujet de forum
T9 S21: Sélectionner le lien « Messages ».
S22 : Consulter un message
S23 : Envoyer un message
S24 : Supprimer un message
T10 S25 : Sélectionner le lien « Partager des fichier ».
S26 : Ajouter un fichier (PDF, image, vidéo)
S27 : cliquer sur le bouton partager

Page 48
Chapitre III Analyse et conception

T11 S28 : Sélectionner le lien « Groupes ».


S29 : Voir tous les groupes
S30 :S’inscrire dans un groupe
S31 : Créer un groupe de discutions

T12 S32 : Sélectionner le lien « événement ».


S33 : Voir tous les événements
S34 : Commenter un événement
S35 : Créer un événement

T13 S36 : Sélectionner le lien « Historique ».


S37 : Accéder à l’historique personnel
S38 : Ajouter des informations personnelles
S40 : Cliquer le bouton valider
T14 S41 : Sélectionner le lien « changer le mot de
passe ».
S42 : Modifier le mot de passe et valider
T15 S43 : Se déconnecter
Enseignant T0…T5 [S0…S10]
T6 S’11: cliquer sur le bouton connexion enseignant
S’12 : Accéder à l’espace enseignant
S’13 : remplir le formulaire d’inscription et valider

T7
S’14 : Accéder à l’espace enseignant
S’15 : Saisir le login et le mot de passe.
S’16 : Cliquer sur le bouton login

T8…T15 [S17…S43]
T16 S44 : Sélectionner le lien « cours ».
S45 : Déposer un cours et valider

T17 S46 : Sélectionner le lien « affichage».


S47 : Déposer un affichage et valider

ATS T18 S48: Url de la page d’accueil


S49 : Se connecter
T19 S50: Cliquer sur le bouton connexion
Administrateur et ATS
S51 : Accéder à l’espace administrateur et ATS
S52 : remplir le formulaire d’inscription et valider

T20 S53 : Accéder à l’espace administrateur et ATS

Page 49
Chapitre III Analyse et conception

S54 : Saisir le login et le mot de passe.


S55 : Cliquer sur le bouton login

T21
S56 : Sélectionner le lien « affichage».
S57 : Déposer un affichage et valider

T22 S58 : Sélectionner le lien « Groupes ».


S59 : Voir tous les groupes
S60 :S’inscrire dans un groupe
S61 : Créer un groupe de discutions
T23 S62: Sélectionner le lien « Messages ».
S63 : Consulter un message
S64 : Envoyer un message
S65 : Supprimer un message

T24 S66 : Sélectionner le lien « changer le mot de


passe ».
S67 : Modifier le mot de passe et valider

T25 S68 : Se déconnecter

Administrateur T26 S69: Url de la page d’accueil


S70 : Se connecter
S71 : sélectionner le lien connexion (l’espace
administrateur et ATS)
S72 : Saisir le login et le mot de passe.
S73 : Cliquer sur le bouton login
T27 S74 : Sélectionner le lien « changer le mot de
passe ».
S75 : Modifier le mot de passe et valider
T28 S76 : Ajouter une table
S77 : Modifier une table
S78 : Supprimer une table
T29
S79 : Sélectionner le lien « Groupes ».
S80 : Voir tous les groupes
S81 : Créer un groupe
S82 : Affecter un utilisateur a un groupe
T30 S83 : Se déconnecter

Tableau III.2:Table d'identification des scénarios.

Page 50
Chapitre III Analyse et conception

III.5. Spécification de quelques cas d’utilisation:

Un cas d’utilisation représente un ensemble de séquences d’actions qui sont réalisées par le
système et qui produit un résultat observable intéressant pour un acteur particulier.

Il permet de décrire ce que le système devra faire, sans spécifier comment le faire.
Les cas d’utilisation qu’on peut recenser sont :

Visiteur :

Use case : Télécharger des cours.

Scenarios: S3, S4

Rôle: Visiteur.

Description :

1. Le visiteur Sélectionne le lien « cours ».


2. Le système affiche la liste des cours disponible
3. Le visiteur sélectionne un cours
4. Le visiteur télécharge le cours
5. Le système affiche le message succès

Figure III.1.Cas d’utilisation « Télécharger des cours»

Etudiant :

Use case: Inscription étudiant.

Scenarios: S11, S12, S13.

Rôle: Etudiant.

Description:

1. L’étudiant clique sur le bouton connexion


2. Le système affiche le formulaire d’inscription
3. L’étudiant rempli le formulaire d’inscription et valide
4. Le système affiche le message d’erreur si le formulaire est mal remplie
5. Le système enregistre les informations de l’étudiant et donne l’accès à son espace
personnel

Figure III.2.Cas d’utilisation «inscription étudiant »

Page 51
Chapitre III Analyse et conception

Use case : Partager des fichiers

Scenarios: S25, S26, S27

Rôle: Etudiant.

Description:

1. L’étudiant sélectionne le lien « Partager des fichiers »


2. Le système affiche formulaire a rempli
3. L’étudiant parcourir les fichiers de son bureau puis sélectionner le fichier a
partagé
4. Le système vérifie si le format de fichier est accepté sinon il envoie un message
d’erreur.
5. L’étudiant clique sur le bouton partager
6. Le système affiche le partage avec succès

Figure III.3.Cas d’utilisation «Partager des fichiers »

Use case: créer un évènement

Scenarios: S32, S33, S34, S35

Rôle: Etudiant.

Description:

1. L’étudiant sélectionne le lien « événement ».


2. Le système affiche le formulaire à remplir
3. L’étudiant rempli le formulaire est validé
4. Le système affiche le message de succès

Figure III.4.Cas d’utilisation «créer un événement »

Page 52
Chapitre III Analyse et conception

Enseignant :

Use case: accéder aux forums

Scenarios: S17, S18, S19, S20.

Rôle : Enseignant.

Description:

1. L’enseignant sélectionne le lien « Forum ».


2. Le système affiche le formulaire à remplir
3. L’enseignant rempli le formulaire et valide
4. Le system vérifier si le forum si il existe, alors il affiche une erreur d’information
sinon affiche le message de succès

Figure III.5.Cas d’utilisation « accéder aux forums »

Les ATS

Use case : Déposer un affichage

Scénarios: S56, S57

Rôle : ATS

Description:

1. l’ATS sélectionne le lien « affichage».


2. Le système affiche formulaire a rempli
3. L’ATS parcourir les affichages de son bureau puis sélectionne un a déposé et valide
4. Le système affiche un message de confirmation si le fichier est bien déposé

Figure III.6.Cas d’utilisation « Déposer un affichage »

Page 53
Chapitre III Analyse et conception

Administrateur

Use case : changer le mot de passe

Scénarios: S74, S75.

Rôle: Administrateur.

Description:

1. L’administrateur clique sur le lien « changer le mot de passe»


2. Le système affiche le formulaire de modification
3. L’administrateur remplit le formulaire et valide
4. Le système affiche le message d’erreur si il ya une erreur si non
5. Le système affiche le message succès

Figure III.7.Cas d’utilisation « changer le mot de passe »

Use case: authentification

Scenarios: S69, S70. S71, S72. S73.

Rôle: Administrateur.

Description:

1. L’administrateur clique sur le lien « connexion »


2. Le système affiche le formulaire d’authentification
3. L’administrateur remplit le formulaire et valide
4. Le système affiche le message d’erreur si il ya une erreur si non
5. Le système affiche l’espace administrateur

Figure III.8.Cas d’utilisation « authentification »

Page 54
Chapitre III Analyse et conception

III.6. Diagramme des cas d’utilisation global :

Visiteur

Naviguer sur le
« extend » Site

« extend »
Se connecter Télécharger
au site les cours

« extend »
visiteur
Consulter les
« extend » affichages
« extend »

Consulter les
événements

Consulter les
Forums

Figure III.9: Diagramme de cas d’utilisation Visiteur

Page 55
Chapitre III Analyse et conception

Etudiant

Accéder à la
S’authentifier Ecrire un nouveau
messagerie
message

« extend » Accéder au Répondre à un


« include » forum message existant
« extend »

Télécharger les Consulter les


« extend » cours
messages
Accéder à
l’interface « extend »
S’inscrire au Ajouter un sujet
étudiant
formulaire
« extend »
Etudiant
Consulter les
« extend » Gérer un groupe forums
« extend »
de discutions
« extend »
« extend »
Créer un
Partage des groupe
Se fichiers
déconnecter
« extend » Consulter les
« extend » groupes
Gérer les
« extend »
événements
S’inscrire dans
un groupe
Changer le mot
Ajouter des de passe
informations Créer un
événement
personnelles

Consulter un
événement
Commenter
un événement

Figure III .10: Diagramme de cas d’utilisation Etudiant

Page 56
Chapitre III Analyse et conception

Enseignant

Accéder à la
S’authentifier Ecrire un nouveau
messagerie
message

« extend » Accéder au Répondre à un


« include » forum message existant
« extend »

Déposer des Consulter les


« extend » cours
messages
Accéder à
l’interface « extend »
S’inscrire au Ajouter un sujet
étudiant
formulaire
« extend »
Enseignant
Consulter les
« extend » Gérer un groupe forums
« extend »
« extend »
de discutions
« extend »
« extend »
Créer un
Se Partage des groupe
déconnecter fichiers
« extend » Consulter les
groupes
Gérer les
« extend »
Changer le mot événements
S’inscrire dans
de passe un groupe

Déposer un
Ajouter des affichage
informations Créer un
événement
personnelles

Consulter un
événement
Commenter
un événement

Figure III .11 : Diagramme de cas d’utilisation Enseignant

Page 57
Chapitre III Analyse et conception

ATS

S’authentifier Ecrire un nouveau


message

« extend » Accéder à la Répondre à un


« include » messagerie message existant

Consulter les
messages
Accéder
à « extend »
l’interfac S’inscrire au
formulaire
« extend »
Les ATS
« extend » Gérer un groupe
« extend »
de discutions
« extend »

« extend »
Créer un
Se Partage des groupe
déconnecter « extend »
fichiers

Consulter les
groupes

Changer le mot
S’inscrire dans
de passe un groupe

Déposer un
affichage

Figure III .12 : Diagramme de cas d’utilisation ATS

Page 58
Chapitre III Analyse et conception

Administrateur

S’authentifier Modifier une


table
« include »

Gérer la base
Supprimer une
« extend » de données table

« extend » Ajouter une


Accéder à Changer le
mot de passe table
l’interface
Administrateur administrateur
« extend »
Créer un groupe
Gérer
« extend » les groupes

Se Ajouter un
déconnecter
utilisateur

Figure III.13: Diagramme de cas d’utilisation administrateur

Page 59
Chapitre III Analyse et conception

IV. Conception de l’application web :

La conception des applications web se distingue des autres systèmes par deux activités
essentielles, la répartition des objets sur le client ou le serveur et la définition de l’interface
utilisateur sous forme de page web.

L’extension UML pour le web nous fourni une notation pour exprimer les composant de
technologie Web du Système pour le modèle.

Cette conception de l’application web implique l’existence de trois composants d’architecture


significatifs :

Le navigateur client.
Le serveur web.
Le serveur d’application.
Il est en outre, fort probable que l’application web utilise un serveur de base de données,
donc une application web est définit comme un système logiciel Client Serveur qui possède aux
moins, les deux composants architecturaux significatifs suivants :

Un navigateur HTML/XML sur un ou plusieurs postes client qui communiquent avec un


serveur web via HTTP.
Un serveur d’application.

IV.1. Les diagrammes de séquence :


Nous représentons dans ce qui suit quelques diagrammes de séquence élaborés.

Les diagrammes sont:

1. Diagramme de séquence de cas d’utilisation « télécharger un cours. »


2. Diagramme de séquence de cas d’utilisation « inscription utilisateur »
3. Diagramme de séquence de cas d’utilisation « accéder aux forums»
4. Diagramme de séquence de cas d’utilisation « partager des fichiers »
5. Diagramme de séquence de cas d’utilisation « créer des événements»
6. Diagramme de séquence de cas d’utilisation « authentification»
7. Diagramme de séquence de cas d’utilisation « Déposer un affichage»
8. Diagramme de séquence de cas d’utilisation « Changer le mot de passe»

Page 60
Chapitre III Analyse et conception

Visiteur et Etudiant.

Télécharger un Liste des


Cours cours
Acteur

Atteint

Afficher

Choisir

Télécharger

Figure III.14:Diagramme de séquence de cas d’utilisation « Télécharger un cours ».

Page 61
Chapitre III Analyse et conception

Les acteurs : Etudiant, Enseignant et ATS.

Formulaire Créer un BDD Page des Page de


D’inscription compte informations confirmation

Atteint

Attient

Atteint

Contrôle

Erreur
Si Numéro juste
«Num non valide»

Sinon

Atteint Atteint

Affiche

Atteint

Saisir login

Et mot de passe Atteint

Atteint

Contrôle

Erreur « login Si Login inexistant


existant »
Sinon
Atteint
Atteint

Confirmation
d’inscription

Figure III. 15. Diagramme de séquence du cas d’utilisation « inscription utilisateur »

Page 62
Chapitre III Analyse et conception

Page de Système BDD


Page forums Page Liste
Création De vérification
des forums
espace
Atteint

Attient

Saisir les informations

Atteint

Atteint

Contrôle

Atteint

Message d’erreur Si informations justes

Sinon

Atteint

Afficher forums

Figure III.16. Diagramme de séquence du cas d’utilisation « Accéder au forum »

Page 63
Chapitre III Analyse et conception

Formulaire de Système BDD


Page Page de
partage De vérification
d’étudiant confirmation

Accède

Attient

Saisir les informations

Atteint

Atteint

Contrôle

Atteint

Message d’erreur Si informations justes

Sinon

Atteint

Afficher

Figure III.17.Diagramme de séquence de cas d’utilisation « partager des fichiers »

Page 64
Chapitre III Analyse et conception

Formulaire Système BDD


Page Page de
(événement) De vérification
d’étudiant confirmation

Accède

Attient

Saisir les informations

Atteint

Atteint

Contrôle

Atteint

Message d’erreur Si informations justes

Sinon

Atteint

Afficher

Figure III .18: Diagramme de séquence de cas d’utilisation « créer un événement »

Page 65
Chapitre III Analyse et conception

Formulaire Système BDD


Page Page espace
authentification De vérification
d’accueil administrate
ur
Accède

Attient

Saisir les informations

Atteint

Atteint

Contrôle

Atteint

Message d’erreur Si informations justes

Sinon

Atteint

Afficher f

Figure III.19. Diagramme de séquence du cas d’utilisation «Authentification administrateur »

Page 66
Chapitre III Analyse et conception

Formulaire Système BDD


Page d’ATS Page de
affichage De vérification
confirmation

Accède

Attient

Saisir les informations

Atteint

Atteint

Contrôle

Atteint

Message d’erreur Si informations justes

Sinon

Atteint

Afficher

Figure.III.20.Diagramme de séquence de cas d’utilisation « Déposer un affichage»

Page 67
Chapitre III Analyse et conception

Formulaire Système BDD


Page Page de
administrateur changement De vérification
mdp confirmation

Accède

Attient

Saisir les informations

Atteint

Atteint

Contrôle

Atteint

Message d’erreur Si informations justes

Sinon

Atteint

Afficher

Figure.III.21. Diagramme de séquence de cas d’utilisation «Changement de mot de passe»

Page 68
Chapitre III Analyse et conception

IV.2. Diagramme de classes : Le diagramme de classes est le plus important dans la


modélisation orientée objet. Il représente un ensemble de classes, d’interface et de collaboration
ainsi que leurs relations, il a pour objet de décrire la structure des entités manipulées par les
utilisateurs. Dans notre cas on va représenter le diagramme de classes pour quelque cas
d’utilisation :

IV.2.1. Diagramme de classe détaillé de cas d’utilisation « authentification de l'utilisateur ».

« Form »
« client page » « Link » « Methode Java »
« Link » Formulaire: authentification
Interface Verifier la saisie
authentification «text » login
Login : String
« text » passwd
Passwd : String
« Bouton »connexion
Verifie_saisie()

Valider ()

« submit »

« Link »
« client page » « Server page »

Message d’erreur Contrôle authentification


« Build»
Login

Passwd

Contrôle()
« Build»
« client page » Return_result ()
Interface Acteur
Figure III.20:Diagramme de classe de cas d’utilisation « authentification de l'acteur ».

Figure III.22 Diagramme de classe détaillé de cas d’utilisation « authentification »

Page 69
Chapitre III Analyse et conception

IV.2.2.Diagramme de classe détaillé de cas d’utilisation « envoyer un message ».

« Client page » « Form »


« Link »
Etudiant/Enseignant« Cli Formulaire : message
« client page »
«text » onglet

«text » message

« Server d’application » « submit » «Bouton » ajouter

message
onglet : String

Message: String
« Build»
Vide (message) « Client page »

Page de confirmation de
création de message

« Redirect » Message : String

Affiche(Message)

« client page »
« Link »
Message d’erreur

msg-erreur : String

Affiche (msg-

Figure III.23:Diagramme de classe détaillé de cas d’utilisation «Envoyer un message ».

Page 70
Chapitre III Analyse et conception

IV.2.3.Diagramme de classe détaillé de cas d’utilisation « ajouter forums ».

« Client page » « Form »


« Link »
Etudiant/Enseignant Formulaire : ajouter forums

«text » onglet

«text » message

« Server d’application »
« submit » «Button » ajouter

Ajouter forums

onglet : String

message : String
« Build»
Vide(message) « client page »

Page de confirmation de
création de forums

« Redirect » Message : String

Affiche(Message)

« client page »
« Link »
Message d’erreur

msg-erreur : String

Affiche (msg-

Figure.III.24. Diagramme de classe détaillé de cas d’utilisation « ajouter forums ».

IV.2.4.Diagramme de classe global

Page 71
Chapitre III Analyse et conception

Page 72
Chapitre III Analyse et conception

III. Le modèle relationnel : Le modèle relationnel présente l’univers des données décrits
dans le modèle conceptuel (diagramme de classe), en tenant compte le type de base de donné
choisie ; en d’autre terme le modèle relationnel traduit le modèle conceptuel en un formalisme
compréhensible par la machine.

Passage au modèle relationnel [11] :

Pour obtenir un schéma relationnel à partir d’un diagramme de classe, il faut commencer par

traduire les classes en relation ;


traduire les associations en relations. celle qui ont un bout avec une multiplicité
maximum inférieur égal à 1 (appelons A la classe qui est du cote de cette
multiplicité) peuvent être traduites en ajoutant un attribut la clé primaire de la
classe A dans l’autre classe
traduire les autres types d’association, cette relation à une clé primaire composée
des clés des relations représentant les classes entrant dans l’association. Les autres
attributs de cette relation sont les attributs de la classe liée à cette association (si
elle existe).
La traduction de l’héritage se fait en partageant la même clé entre les deux classes.
La clé primaire de la classe fille est déclarée comme une clé étrangère
correspondant à la clé primaire de la classe primaire de la classe mère..
Les relations du schéma sont :

Etudiant (mat_etud ,nom_etud,prenom_etud, ann_etud, date _naiss, sexe_etud, adress_etud,


email_etud ,login_etud, pass_etud, , Id_sect* ) ;
Enseignant (mat_ensg , statut_ensg, nom_ensg, prenom_ensg,adress_ensg,date_naiss_ensg
,email_ensg,login_ensg, , pass_ensg ) ;
Niveau (id_niv , lib_niv) ;
Spécialité (id_spec , Id_niv* ,lib_spec);
Semester (id_sems Id_niv*, Lib_sems);
Section (id_sect,lib_sect,id_spec*);
Enseigne (id_mod*,mat_ensg*)
Module (id_mod, lib_mod, Id_sems*);
Message (id_msg , Auteur_msg, Cont_msg, Date_msg, Objet_msg, Mat_ensg*,
Mat_ats*,mat_etud*) ;
Cours (id_ cour, date_cour ,titre_cour,url_cour, Id_mod*) ;
Reponse (id_rep, Auteur_rep, Cont_message, Date_rep_msg, Id_msg*);

Page 73
Chapitre III Analyse et conception

Forums (id_form, Suj_form, Cont_form, Date_form, Mat_ensg*, Mat_etud*,);


Commentaire (id_comt, Auteur_comt, Cont_comt, Date_comt, Id_form*) ;
Affichage (id_afch, sujet_afch, Cont_afch, Date_afch, id_group*) ;
Evénement (id_event, auteur_event, date_event, descrip_event, mat_etud*,mat_ensg*) ;
Perdu_trouver (id_lost, objet_lost, date_lost,descrip_lost, mat_etud*,mat_ensg*) ;
Groupes ( id_group, nom_group,date_gpr, descrip_gpr, mat_etud*,mat_ensg*,mat_ats*) ;
Partage (id_partage, sujet_prtg, contenu_prtg, date_prtg,url_prtg,id_group*) ;
ATS (id_ats,nom_ats,prenom_ats, statut_ats, email_ats, Login_ats,pass_ats) ;

Remarque :
Attribut : représente la clé primaire
Attribut* : représente la clé étrangère

IV. Le modèle physique de données :


Le modèle physique de données est la traduction du modèle logique de données dans un
langage de description de données spécifique au système de gestion des bases de données utilisé.
Le modèle physique des données est l’implantation des données (tables) issues du modèle logique
des données en machine afin d’aboutir à la description des fichiers de base de données.

1. Table Etudiant :

Nom du champ description type Clé(s)


mat_etud Matricule étudiant character varying (20) primaire

Nom_etud Nom étudiant character varying (25)


Prenom_etud Prénom étudiant character varying (25)
Date _naiss Date de naissance date
étudiant
Sexe_etud Sexe étudiant character varying (10)
Adres_etud Adresse étudiant character varying (50)
Email_etud Email étudiant character varying (50)
Ann_etud Année d’étude date

Login_etud Login étudiant character varying (20)


Pass_etud Mot de passe étudiant character varying (20)
Id_section Identificateur section integer étrangère

Page 74
Chapitre III Analyse et conception

2. Table Enseignant:

Nom du champ description type Clé(s)


mat_ensg Matricule enseignant character varying (20) primaire

Nom_ensg Nom enseignant character varying (25)


Prenom_ensg Prénom enseignant character varying (25)
Date_naiss_ensg Date de naissance date
Email_ensg Email enseignant character varying (50)
statut_ensg Grade enseignant character varying (20)
Address_ensg Adresse enseignant character varying (50)
Login_ensg Login enseignant character varying (25)
pass_ensg Confirme mot de character varying (25)
passe

3. Table niveau

Nom du champ description type Clé(s)


id_niv Identificateur niveau integer primaire

lib_niv Libellé niveau d’étude character varying(20)

4. Table spécialité

Nom du champ description type Clé(s)


id_spec Identificateur integer primaire
spécialité
lib_spec Libellé spécialité character varying (50)
Id_niv Identificateur niveau integer étrangère

5. Table semestre

Nom du champ description type Clé(s)


id_sems Identificateur integer primaire
semestre
Lib_sems Libellé semestre character varying(20)
Id_niv Identificateur niveau integer étrangère

Page 75
Chapitre III Analyse et conception

6. Table section

Nom du champ description type Clé(s)


id_sect Identificateur section integer primaire

Lib_sect Libellé section character varying(20)

Id_spect Identificateur integer étrangère


spécialité

7. Table module

Nom du champ description type Clé(s)


id_mod Identificateur module integer primaire
lib_mod Libellé module character varying(20)
Id_sems Identificateur Integer étrangère
semestre

8. Table Message

Nom du champ description type Clé(s)


id_msg Identificateur message integer primaire

Auteur_msg Auteur message character varying(20)

Objet_msg Objet message character varying(20)


Cont_msg Contenu message text

Date_msg Date message date

Mat_ensg Matricule enseignant Integer étrangère


Mat_etud Matricule étudiant Integer étrangère
Id-ats Identificateur Integer étrangère
administrateur et ATS

9. Table cours

Nom du champ description type Clé(s)


id_ cour Identificateur cours integer primaire

date_cour Date cours date

titre_cour Titre du cours character varying(20),


Id_mod Identificateur module integer étrangère

Page 76
Chapitre III Analyse et conception

10. Table réponse

Nom du champ description type Clé(s)


id_rep Identificateur réponse integer primaire

Auteur_rep Auteur réponse character varying(20)


Objet_rep Objet réponse character varying(20)
Cont_message Contenu message text

Date_rep_msg Date réponse de date


message
Id_msg Identificateur message integer étrangère

11. Table forum

Nom du champ description type Clé(s)


id_form Identificateur forum integer primaire

Suj_form Sujet forum character varying(20)

Cont_form Contenu forum text

Date_form Date forum date

Mat_ensg Identificateur Integer étrangère


enseignant
Mat_etud Identificateur étudiant integer étrangère

12. table commentaire

Nom du champ description type Clé(s)


id_comt Identificateur integer primaire
commentaire
Auteur_comt auteur Commentaire character varying(20)

Cont_comt Contenu commentaire text

Date_comt Date commentaire date

id_form, identificateur forums Integer étrangère

Page 77
Chapitre III Analyse et conception

13. table affichage

Nom du champ description type Clé(s)


id_afch Identificateur affichage integer primaire

sujet_afch Sujet affichage character varying(20)

Cont_afch Contenu affichage text


Date_afch Date affichage date
Id_group Identificateur group intege Etrange

14. table événement

Nom du champ description type Clé(s)


Id_event Identificateur integer primaire
événement
auteur_event Auteur événement character varying(20)

descrip_event Description text


évènement
date_event Date évènement date
mat_etud Matricule étudiant character varying(25) étrangère

mat_ensg Matricule enseignant character varying(25) étrangère

15. Table perdu_trouver

Nom du champ description type Clé(s)


id_lost Identificateur perdue integer Primaire
trouvé
objet_lost Objet perdue ou character varying(20)
trouvé
descrip_lost, Description text
date_lost La date date
Mat_ensg matricule enseignant character varying(25) étrangère
Mat_etud matricule étudiant character varying(25) étrangère

Page 78
Chapitre III Analyse et conception

16. Table groupe

Nom du champ description type Clé(s)


id_group Identificateur groupe integer primaire

Nom_gpr Nom de groupe character varying(20)

descrip_gpr Description de groupe text


date_gpr Date création de date
groupe
Mat_etud Matricule étudiant Integer étrangère
Mat_ensg Matricule enseignant Integer étrangère
mat_ats Matricule ATS Integer étrangère

17. Table partage

Nom du champ description type Clé(s)


id_part Identificateur partage integer primaire

sujet_prtg Sujet partage character varying(20)


contenu_prtg Contenu de partage text
date_prtg Date de partage date
url_prtg Chemin de fichier a character varying(50)
partagé
Id_group Identificateur groupe Integer étrangère

17. Table ATS

Nom du champ description type Clé(s)


mat_ats Matricule ATS character varying (20) primaire

nom_ats Nom de l’ATS character varying (20)


prenom_ats Prénom l’ATS character varying (20)
statut_ats Statut d’ATS character varying (20
Email_ats Email ATS character varying (20)
Login_ats Login ATS character varying (20)
Pass_ats Mot de passe ATS character varying (20)

18. Table enseigne

Nom du champ description type Clé(s)


id_modul Identificateur module integer étrangère
Mat_ensg Matricule enseignant integer étrangère

Page 79
Chapitre III Analyse et conception

Conclusion

A l’issue de ce chapitre, nous avons introduit les objectifs de notre application. Pour les
atteindre, nous avons proposé une solution fondée sur une analyse et une conception modélisées à
l’aide du langage de modélisation unifié UML. Pour cela nous avons :
Spécifié les divers cas d’utilisations de notre application ; Conçu les diagrammes des cas
d’utilisations, de séquence et de classe.
Le chapitre suivant sera consacré à la réalisation de notre application, en présentant les outils de
Développement utilisés et les différentes fonctionnalités de notre application à travers ses
différentes interfaces.

Page 80
Chapitre III Analyse et conception

Possède Possède Section


Semestre Possède Niveau Spécialité
1* 1..1 1* 1..1
1..1 1*
Id_sems Id_niv Id_spec Id_sect
Lib_sems Lib_niv Lib_spec Lib_sect

1..1 1..1
commentaire Possède Forums
Possède Enseigne 0* 1..1
Id_commt Id_forum Possède
Enseignant Contenu_comt Cont_forums
mat_ensg Date_comt
1* Nom_ensg Participe
1*
module Pre_ensg

1* 1*
Date_nais_ensg
Statut_ensg 1..1 Participe
0* 0*
1..1
Etudiant
Id_mod
Lib_mod 1..1 Crée Mat_etud
0* Evenemnt 0* Crée 1..1
Nom_etud

Id_evnt 1..1
1..1 Sujet_event
1..1 Con_event 1..1
Possède 1..1 1..1

Crée Crée
0*
1* 0* 1..1

Perdu trouver
COURS S’inscrit > Id_lost
Id_cours Sujet
Titre_cours
Conteneu_los
URL_cours
Date_cours

Envoie
1*

Possède
groupes Envoie
affichage
Id_affich 1* < S’inscrit
Id_group
0* 1..1 Nom_group
Contenu_affich
Date _creat
Date_affich
contenu
1*
< S’inscrit
1..1
Possède ATS
0*
1..1
Id_admin
message partager Nom_admin
Prenom_admin
Id_partage Statut_admin
Id_msg Contenu
Cont_msg url fichier

Figure.III.25 0* réponse
1..1
1..1 Id_rep
Diagramme de 0* 0* Avoir 0* Auteur_rep
classe globale Envoie
Chapitre IV Réalisation

Introduction
Après avoir présenté dans le chapitre précédent les différentes étapes d’analyse et de
conception, nous allons présenter dans ce dernier chapitre la technologie utilisé, l’environnement
et les outils de développement de notre application Web ainsi que des exemples d’interfaces
développées pour illustrer ses principales fonctionnalités.

I. Technologie utilisé
I.1. java
Java est un langage de programmation informatique orienté objet moderne développé par Sun
Microsystems (aujourd'hui racheté par Oracle) mais également à une plate-forme : son nom
complet est « Java SE » pour Java Standard Edition, et était anciennement raccourci « J2SE ».
Celle-ci est constituée de nombreuses bibliothèques, ou API. Une de ses plus grandes forces est
son excellente portabilité : une fois votre programme créé, il fonctionnera automatiquement sous
Windows, Mac, Linux, etc.
La technologie java est aujourd’hui incontournable, tant pour le développement d’applications
autonomes que pour l’utilisation des outils orientes web. Elle permet l’intégration de l’ensemble
des fonctionnalités de java Enterprise Edition (XML, base de donnes service web, système
distribués CORBA,…etc).

· On peut faire de nombreuses sortes de programmes avec Java :


• des applications, sous forme de fenêtre ou de console ;
• des applets, qui sont des programmes Java incorporés à des pages web ;
• et bien d'autres ! JEE, JMF, J3D pour la 3D...
Nous intéressons ici à J2EE:

I.2. Définition de JEE [12]:


Le terme « Java EE » signifie Java Enterprise Edition, et était anciennement raccourci en «
J2EE ». Il fait référence à une extension de la plate-forme standard. Autrement dit, la plate-forme
Java EE est construite sur le langage Java et la plate-forme Java SE, et elle y ajoute un grand
nombre de bibliothèques remplissant tout un tas de fonctionnalités que la plate-forme standard ne
remplit pas d'origine. L'objectif majeur de Java EE est de faciliter le développement d'applications
web robustes et distribuées, déployées et exécutées sur un serveur d'applications.

Page 82
Chapitre IV Réalisation

II. L’environnement de développement

II.1. Les langages utilisés


II.1.1. X HTML (Hyper Text Markup Langage)
C’est un langage de balisage servant à écrire des pages pour le World Wide Web. Conçu à
l'origine comme le successeur d'HTML, XHTML se fonde sur la syntaxe définie par XML.
Il s'agit en effet de présenter un contenu affichable non seulement par les ordinateurs classiques,
mais également sans trop de dégradation par des PDA bien moins puissants

II.1.2. JavaScript
JavaScript (initialement appelé Live script) a été développé par Netscape puis a été repris par
la firme Sun. Les scripts sont des instructions (des lignes de code) interprétées par les navigateurs
Netscape et Internet explorer. Le JavaScript n’a cessé d’évaluer avec les versions des navigateurs.
JavaScript est un langage de Script qui s’incorpore au langage HTML de présentation des pages
web. Les scripts vont permettre de rendre une page web plus dynamique.

II.1.3. CSS
CSS signifie en anglais « Cascading Style Sheets » et se traduit « feuilles de style en
cascade». On utilise le langage CSS pour décrire la présentation d'un document écrit en HTML
ou XML. Le CSS décrit les couleurs, la police...
Le CSS permet de rendre un document plus agréable à lire, mieux présenté... Le CSS a donc
pour rôle d'améliorer la mise en page, de séparer la structure de sa présentation et d'améliorer
l'accessibilité des pages web. Le langage CSS n'est autre que des feuilles de style en cascade.

II.1.4. JSF
Framework destiné à la plate-forme Java, permettant de développer des interfaces
graphiques améliorées pour des applications web exécutées côté serveur. JSF se compose d'un
ensemble d'API servant notamment à représenter les composants graphiques, à gérer les états et à
supporter les événements. Il dispose également d'un ensemble de balises conçues pour exprimer
les interfaces JSF à l'intérieur d'une page JSP.
II.1.5. Primefaces
Le framework utilisé est JSF (« Java Server Faces »). JSF dispose de nombreux composants variés
favorisant la réalisation d’applications Web avec une interface efficace et agréable pour les
utilisateurs. En revanche, le JSF est très lourd.

Page 83
Chapitre IV Réalisation

Pourquoi Primefaces ?
- Associé à la bibliothèque de composants graphiques PrimeFaces, JSF gagne en productivité et
en efficacité.
-Les composants Primefaces proposent des fonctionnalités prêtes à l’emploi, nombreux, divers et
de qualité.
- Il y a beaucoup de Widgets pour la gestion.
- Il y a une bonne documentation.

Figure. IV.1. Interface Primefaces

II.1.6. Environnement de développement netbeans IDE 7.4


NetBeans est un environnement de développement intégré (EDI), placé en open source
par Sun en juin 2000 sous licence CDDl et GPLv2 (Common Development and Distribution
License). En plus de java, netbeans permet également de supporter différents autres langages,
comme python, C, C++, JavaScript, XML, Ruby, PHP et HTML. Il comprend toutes les
caractéristiques d’un IDE moderne

L’environnement de base comprend les fonctions générales suivantes :

Configuration et gestion de l’interface graphique des utilisateurs,


Support de différents langages de programmation,
Traitement du code source (édition, navigation, formatage, inspection…)
Fonctions d’import/export depuis et vers d’autres IDE, tel qu’Eclipse ou jBuilder,

Page 84
Chapitre IV Réalisation

Accès et gestion de bases de données, serveurs web, ressources partagées,


Gestion des taches (à faire, suivi…),
Documentation intégrée.

Figure. IV.2. Interface Netbeans

III. Les outils utilisés


III.1. Les serveurs
III.1.1. Le serveur glassfish 3.1
Glassfish est le nom du serveur d'applications ‘‘Open Source’’ Java EE 5 et désormais Java
EE 6 avec la version 3 et qui sert de fondation au produit "Oracle GlassFish Server"
(anciennement Sun Java System Application Server de Sun Microsystems)

Figure IV.3. Interface du serveur GlassFish

Page 85
Chapitre IV Réalisation

III.1.2. Le serveur de base de données posgreSQl 9.3


Les bases de données (BD) ont pris aujourd’hui une place essentielle dans l’informatique,
plus particulièrement en gestion, et pour assurer la sécurisation et la structuration d’une structure
quelconque il est recommandé d’utiliser un système de gestion de base de données (SGBD). Il
existe plusieurs SGBD parmi lesquels le SGBD postgresql, qui est l’un des systèmes les plus
utilisés et que nous allons présenter dans ce qui suit.

PostgreSQL est un SGBD relationnel objet Open source implémenté par l’université de
Berkeley. Les fonctions clés du modèle objet de postgreSQL sont les classes,
l’héritage et la surcharge.
PostgreSQL est un logiciel « modulaire » possédant un langage d’écriture de
procédures similaire a celui d’oracle mais également d’autres interfaces de
programmation.

Voici les fonctions clés du modèle orienté objet de posgreSQL :

Les classes : une classe correspond à un ensemble d’objets possédant un identificateur


unique.
L’héritage : la notion d’héritage correspond à une organisation hiérarchique des tables.
Par exemple, si deux tables se trouvent dans une relation parent/enfant les informations
contenues dans la table parent sont également disponible dans la table enfant.
La surcharge : on parle de surcharge de fonction lorsqu’une fonction peut être définie
plusieurs fois avec des paramètres différents.

Figure IV.4. Interface posgreSQL 9.3

Page 86
Chapitre IV Réalisation

IV. les Interfaces de notre application


1. Page d’accueil :

C’est la première page téléchargée et visualisée par les visiteurs, les enseignants, les étudiants et
les ATS c’est la page principale du site car elle donne une idée générale sur les fonctionnalités de
notre application.

Figure .IV.5. Capture d’écran de l’interface « page d’accueil »

2. Page Espace administrateur :


Les fenêtres suivantes représentent l’espace administrateur, elles permettent à
l’administrateur et aux ATS de s’inscrire ou s’authentifier pour accéder a leurs espace de
travail.

Page 87
Chapitre IV Réalisation

Figure .IV.6 . Capture d’écran de l’interface « authentification administrateur et ATS »

Figure .IV.7 . Capture d’écran de l’interface « espace administrateur et ATS »

Page 88
Chapitre IV Réalisation

Figure .IV.8 . Capture d’écran de l’interface « espace administrateur »

3. Page Espace Enseignant :


Les fenêtres suivantes permettent à l’enseignant de saisir des informations personnelles dans
un formulaire d’inscription et s’il est inscrit déjà, l’enseignant peut s’authentifier sur la même
page pour accéder à son espace personnelle.

Figure. IV.9.Capture d’écran de l’interface « inscription Enseignant »

Page 89
Chapitre IV Réalisation

Figure. IV.10.Capture d’écran de l’interface « Espace Enseignant »


4. Page Espace Etudiant :
Les fenêtres suivantes permettent à l’étudiant de saisir des informations personnelles dans un
formulaire d’inscription et s’il est déjà inscrit, l’étudiant peut s’authentifier sur la même page pour
accéder à son espace personnelle.

Figure. IV.11. Capture d’écran de l’interface « Formulaire d’inscription Etudiant »

Page 90
Chapitre IV Réalisation

Figure. IV.12. Capture d’écran de l’interface « Ajouter un sujet au forum»

Figure. IV.13. Capture d’écran de l’interface « Ajouter un commentaire au forum»


Conclusion
Dans ce chapitre, nous avons abordés la réalisation de notre application d’une manière
générale. Nous avons insisté sur les outils de travail et la présentation de quelques interfaces.

Page 91
Conclusion générale

L’objectif de notre projet est de créer un site web social et collaboratif pour le
département informatique, offrant un ensemble de services tels que l’accès à la
documentation, la consultation des messages et la consultation des affichages. L’application
offre aussi un service collaboratif, le forum, permettant une interactivité entre les différents
acteurs du département et ainsi une activité social ou les étudiants et les enseignants peuvent
partager des fichiers (images, vidéo), et participer aux événements de département
informatique.

Plusieurs technologies ont été nécessaires pour la réalisation de notre projet, on citera
donc les langages Xhtml, JavaScript, JavaEE (le Framework JSF) et le Css pour la
réalisation des pages web, postgreSQL (pgAdmin III) pour l’élaboration des requêtes
d’interrogation de la base de donnée, et enfin le logiciel NetBeans IDE 7.4 pour l’écriture du
code.

Après le passage par les différentes étapes de développement, l’application a abouti à


un logiciel fonctionnel qui répond globalement aux critères imposés dans ce domaine.
Le présent travail nous a permis d’acquérir des connaissances dans le domaine de la
programmation web, de gagner de larges connaissances sur les langages de programmations
et d’augmenter nos connaissances en conception logicielle.

Page 94
Bibliographie

[1] : http://fr.wikipedia.org/wiki/Université

[2] : http://fr.wikipedia.org/wiki/Universit%C3%A9_Mouloud_Mammeri_de_Tizi_Ouzou

[3] : Titre : Internet et commerce électronique.


Auteur : Lionel Bocherberg.
Edition : 2eme édition.

[4] : « Les services de l’internet » D.Gonzalez édition 2002.

[5] : Titre : Architecture et Technologie des ordinateurs.


Auteur : Paolo Zanella & Yves Ligier.
Edition : Dunod 4eme édition. 2005.

[6] : Mémoire de fin d’études Diplôme d’ingénieur ; Hadj-akli Djamila : thème Conception et
réalisation d’une application web pour Le suivi de la vente en ligne au niveau de district GPL
Naftal de Tizi –Ouzou ; 2009 / 2010
[7] http://fr.wikipedia.org/wiki/Web_2.0

[8] : Titre : Technologies et architecture Internet


2e Edition DUNOD .2003 Pierre-Yeves Cloux, David Doussot, Aurélien Géron
[9] : Document PDF qui se trouve sur :

URL: http://www.ac-grenoble.fr/ugine/joomla/documents/isn/reseaux_sociaux.pdf.

[10] : Jim Conallen, « concevoir des application web avec UML », Editon Eyrolle,2000.

[11] : Richard GRIN, " Introduction aux bases de données, modèle relationnel".

Université de Nice, janvier 1999

[12] : document PDF Projet 3 tiers : Choix de Solutions


Profession : Ingénieur Recherche et Développement.
Bibliographie

Bibliographie annexe

[1] : document :pfe de j2EE, fichier PDF :


Fac-sciences-unv_batna.dz/cs/enseignants/guezouli…/projet_03.pdf
[2] : document : introduction à la plateforme J2EE, fichier PDF :
www.mcours.net/cours/pdf/onfo/ introduction_ à _la_ plateforme_ J2EE. PDF
[3] : site web : www.wiképédia.fr
[4] : document : introduction à la plateforme J2EE, fichier PDF :
www.mcours.net/cours/pdf/onfo/ introduction_ à _la_ plateforme_ J2EE. PDF
[5] : document : J2EE vs Net Centre d’enseignements de Grenoble 2008/2009 :
Membre-liglab.img.fr/plumejeaud/NFE107…/J2EE%20vs%20NET.pdf
Annexe Des généralités sur JEE

I. Présentation de J2EE:
I.1. Un bref historique de J2EE [1]

L’environnement Java pour l’entreprise a commencé à émerger assez rapidement après les
débuts de Java au milieu des années 90. A son origine, Java était destiné aux environnements
contraints (par exemple des petits équipements électroniques). Il a en fait percé dans
l’environnement du Web, notamment dans les navigateurs pour les supports d’interfaces
graphiques riches la notion d’appliquette Java (en anglais applet). Les premières déclinations
de Java dans l’environnement des serveurs sont apparues en 1997 avec les servlets, dont
l’objectif est la construction programmatique de pages Web, puis avec les Entreprise Java
Bean (EJB) dont l’objectif est le support de code métier (API) nécessitant un contexte
d’exécution transactionnel.
Après ces premiers pas et un relatif succès de ces technologies, Sun a structuré l’offre
technique autour des serveurs d’applications Java à travers le standard J2EE. L’objectif de ce
dernier est de fédérer dans un cadre cohérent toutes les technologies nécessaires à la mise en
œuvre des applications de l’entreprise (applications orientées <serveur>). Sun à décidé de
rebaptiser son langage « Java 2 » est introduire la première version 1.2 des spécifications de
J2EE en 1999. Cette version est suivie alors la version 1.3 de J2EE en 2001, puis la version
1.4 en 2003 incluant un support complet des standards XML et le support des services Web.
Mais pour des raisons de marketing, Sun a décidé de rebaptiser cette plateforme « Java
Entreprise Edition » (en suppriment le 2) à compter de la version 1.5, qui elle-même été
changée en « 5 » et elle est devenu JEE5.

I.2 Présentation de J2EE [2]

Qu’est ce que J2EE ?

J2EE (Java 2 Enterprise Edition) est une norme proposée par la société Sun, portée par un
consortium de sociétés internationales, visant à définir un standard de développement
d'applications d'entreprises multi-niveaux, basées sur des composants.

On parle généralement de «plate-forme J2EE» pour désigner l'ensemble constitué des


services (API) offerts et de l'infrastructure d'exécution. J2EE comprend notamment :

95
Annexe Des généralités sur JEE

• Les spécifications du serveur d'application, c'est-à-dire de l'environnement d'exécution :


J2EE définit finement les rôles et les interfaces pour les applications ainsi que
l'environnement dans lequel elles seront exécutées. Ces recommandations permettent ainsi à
des entreprises tierces de développer des serveurs d'application conformes aux spécifications
ainsi définies, sans avoir à redévelopper les principaux services.

• Des services, au travers d'API, c'est-à-dire des extensions Java indépendantes permettant
d'offrir en standard un certain nombre de fonctionnalités. Sun fournit une implémentation
minimale de ces API appelée J2EE SDK (J2EE Software Development Kit).

Dans la mesure où J2EE s'appuie entièrement sur le Java, il bénéficie des avantages et
inconvénients de ce langage, en particulier une bonne portabilité du code.

De plus, l'architecture J2EE repose sur des composants distincts, interchangeables et


distribués, ce qui signifie notamment :

• Qu'il est simple d'étendre l'architecture.


• Qu'un système reposant sur J2EE peut posséder des mécanismes de haute disponibilité,
afin de garantir une bonne qualité de service.

I.3. Pourquoi choisir Java EE ?


la portabilité
l’indépendance,
la sécurité
la multitude de librairies proposées
la plateforme Java EE est basée sur des spécifications donc les projets sont portables
sur n’importe quel serveur d’applications conforme (Tomcat, JBoss, WebSphere...)
l’implémentation est gratuite
Un développement multi tiers

I.4. Technologie de J2EE:


J2EE ajout nombreuses couches de niveau entreprise au-dessus de la plate-forme J2SE – Java
Standard Edition. Chaque couche est conçue pour supporter une différente technologie de
développement.

96
Annexe Des généralités sur JEE

Technologie web application: technologies liées à la production des interfaces web


dynamiques, par exemple JSP (Java Servlet Pages) et servlet.

Technologie entreprise application: technologies plus directement liées à la logique


de business : EJB (Enterprise Java Bean), JavaMail, JMS (Java Message Service), JTA
(Java Transaction), etc.

Technologie web services: technologies utiles au développement des applications


adhérentes au paradigme SOA (Service Oriented Architecture) : web services, JAX-WS
(java API for XML-based web services), JAX-RPC (Java API for XML-Based RPC).

Technologie management et sécurité: technologies liées à la gestion de la


technologie entreprise afin de réaliser l’accès et l’échange d’information entre
machines et services distribués : JAAS (Java Authentication and Authorization
Service), JCA (Java Connector Architecture).

I.5. Spécifications de la plate forme JEE

JEE comporte des spécifications qu’on peut les regroupées en deux grands parties :

Les APIs ;
Les serveurs d'applications.

I.5. 1. Les APIs.

Les APIs sont des extensions Java, forment une collection d’outils logiciels permettant
d'offrir en standard un certain nombre de fonctionnalités, Sun fournit une implémentation
minimale de ces APIs nommée J2EE SDK (JEE SOFTWARE DEVELOPMENT KIT). On
peut regrouper ces APIs en trois groupes principales :

Composants
Services d'infrastructures
Services de communications.

97
Annexe Des généralités sur JEE

1. Les composants [3]

Un composant est un fichier simple, contant généralement du code compilé. Il est


possible de créer des composants avec la majorité des langages. Aussi il peut être vu comme
unité qui regroupe un certain nombre de fonctionnalités qui peuvent être appelées depuis un
programme externe ou client.

On peut faire une séparation entre les composants existants selon leur exécution :

Composants exécutés sur le client (clients et applets).

Peuvent être application client ou applet.

Client JEE
Un client JEE peut être client web ou application client.

o Client web
Un client web est appelé client léger qui n'a généralement pas de requête de BDD.
L'utilisation de client web permet de charger les opérations lourds au niveau de l’entreprise
beans et sont exécutées sur le serveur JEE où ils peuvent exploitées les avantages des
technologies JEE (sécurité, la vitesse, les services …) sur le serveur. Un client web a besoin
de deux fonctionnalités principales :

- Les pages web dynamiques avec les différents langages à balisage (HTML,
XML …..), ces pages sont générés par les composants web au niveau du client web.
- Le navigateur web qui affiche les pages reçus par le serveur.

o Application client
L'application client fonctionne au niveau de la couche métier, et peut accéder directement
à l’entreprise Bean. Généralement les utilisateurs possède une interface graphique (GUI) pour
exécuter l’application client (on utilisant l'API Swing ou Abstract windwos toolkit).

98
Annexe Des généralités sur JEE

Applet
Une applet est une petite application java qui a les caractéristiques de pouvoir
s’exécuter via un navigateur .en effet, la plupart des navigateurs aujourd’hui, dispose
d’une machine virtuelle capable d’interpréter les bytes code inclus dans une page
HTML.

Il existe plusieurs différences entre application et applets. En effet, les applets fournissent
un certain nombre de fonctionnalités supplémentaires propres à leur contexte d’utilisation,
comme la possibilité de communiquer avec le navigateur ou même entre applets. Mais la plus
notable, réside dans la sécurité qui leur est associée.

Composants exécutés sur le serveur.

Sont des composants web ou bien EJB.

Composants WEB : Sont des servlets, JSP ou JSF.

Servlet Ou « un peu d'HTML dans beaucoup de Java... »:

Une servlet est un composant du coté serveur, considérée comme une classe qui permet une
communication avec un protocole « requête / réponse ». Autrement dit, une servlet est un
programme qui s'exécute coté serveur en tant qu'une extension du serveur. Elle reçoit une
requête du client, elle effectue des traitements et renvoie le résultat.

L'utilisation des servlets permet la génération de pages web dynamiques qui utilisent le
protocole HTTP, ou aussi n'importe quel autre protocole reposant sur le principe de servlet.
Une servlet est une classe java qui implémente les méthodes dopost et/ou doget .

99
Annexe Des généralités sur JEE

Figure 1. Cycle de vie d’une servlet

• init () : initialisation de la servlet chargement du code.


Souvent effectué lors de la première requête cliente (doGet, doPost) Allocation d’un pool de
threads
• doGet () : Traitement des requêtes HTTP GET
• doPut () : Traitement des requêtes HTTP PUT
• doPost () : Traitement des requêtes HTTP POST
• destroy () : Destruction de la servlet par le serveur

- La méthode Init est appelé une seule fois au chargent de la servlet.


- La méthode service est appelée à chaque requête http (client)
- La méthode destroy est appelée une seul fois lorsque le conteneur détruit la servlet.

JSP : Java Server Page Ou « un peu de Java dans beaucoup d'HTML... »

100
Annexe Des généralités sur JEE

Les JSPs (pour Java Server Pages) est une technologie qui permet d’écrire très facilement
des pages dynamiques en insérant des portions de code java dans une page html. Destiné à
l’origine à la présentation des données, une page JSP permet de définir le design d’une page
(en HTML) et d’y intégrer les données (grâce aux portions de code java).cette technologie
favorise donc la séparation de la présentation et du contenu.

D’un point de vu plus technique, une page java est donc constitue de code HTML dans
lequel sont insérées des code java délimitées par des balises particulières .l’intégralité du code
est portable puisque tout comme un code java, il sera compilé et exécuté comme Servlet .

A la différence d’une Servlet, il sera par contre compilé au vol (lors de chaque invocation
par un moteur de JSP. Enfin, les pages JSP offrent les possibilités d’importer des classes java
et d’accéder à des objets java.

JSF

(Java Server Faces) Un cadre standard de composants pour construire des interfaces
utilisateur riches pour les applications Java. Java Server Faces exécuté sur le serveur, mais
sans affichés sur le client.
La technologie JSF représente un Framework basé sur les composants utilisateurs utilisés
pour construire des applications web. L’API de JSF permet de représenter les composants,
de gérer leur état et leur comportement. Elle facilite l’écriture d’interfaces utilisateurs en
fournissant une bibliothèque de contrôles
- Simples : zones de saisie classiques, boutons, liens hypertextes.
- Complexes : tableaux de données …
- Elle permet même de créer ses propres composants, ou d’enrichir les composants
existants.
JSF permet principalement de:
- Faciliter le développement de pages web grâce à un Framework basé sur les
composants. représenter les composantes UI et gérer leurs états.
- Gestion d’événements.
- Validation coté serveur.
- Conversion de données.
- Définition de la navigation des pages.

101
Annexe Des généralités sur JEE

- gérer les composantes et les lier aux objets coté serveur.

Pourquoi utiliser JSF ? :

JSF est un standard J2EE.


Le support de JSF par les éditeurs J2EE est obligatoire. Actuellement, les plus grands
éditeurs Java annoncent ou proposent une intégration de JSF dans leurs IDEs:
(Environnement de développement intégré) comme NetBeans, Eclipse,…
Il existe plusieurs Framework web Java dédiés au développement d'interfaces
utilisateur mais aucun n'est un standard et va aussi loin que JSF.
Il bénéficie de concepts déjà éprouvés par Java 2 et J2EE (composants graphiques Swing,
modèle événementiel, JSP, Servlets).
Java Server Faces est un Framework d'interface utilisateur coté serveur pour les
applications web permettant de respecter le modèle d’architecture MVC, basé sur les
technologies JSP, Servlets, Xhtml....
Le but de JSF est d'accroître la productivité des développeurs dans le développement
des interfaces utilisateur tout en facilitant leur maintenance.

Quelle place dans Java/J2EE

JSF s’appuie sur les technologies précédentes:


Génération en Servlet
Utilisation des composants JSF dans les pages JSP
Les composants JSF sont exposés aux JSPs grâce aux balises personnalisés.

Les Avantages de JSF


JSF permet :
une séparation nette entre la couche de présentation et les autres couches

un mapping entre l’HTML et l’Objet


un modèle riche de composants graphiques réutilisables
une gestion de l'état de l'interface entre les différentes requêtes
JSF peut être utilisé pour générer autre chose que du HTML (XUL, XML, WML, …)

102
Annexe Des généralités sur JEE

Possibilité de créer de nouveaux composants


JSF permet de combiner plusieurs composants pour aboutir à un composant
plus complexe

Composants métiers (EJB)

Enterprise JavaBeans (EJB) est une architecture de composants logiciels côté serveur
pour la plateforme de développement JEE.
Cette architecture propose un cadre pour créer des composants distribués (c’est-à-dire
déployés sur des serveurs distants) écrit en langage de programmation Java hébergés au sein
d'un serveur applicatif permettant de représenter des données (EJB dit entité), de proposer des
services avec ou sans conservation d'état entre les appels (EJB dit session), ou encore
d'accomplir des tâches de manière asynchrone (EJB dit message). Tous les EJB peuvent
évoluer dans un contexte transactionnel.

2. Services d'infrastructures [4]

On trouve les services suivants :

JDBC « Java DataBase Connectivity »


C’est une API qui permet aux programmes java d'interagir avec les bases de données SQL.
Les serveurs fournissent en plus un mécanisme qui permet de réutiliser les connexions crées
avec les utilisations.

JTA/JTS « Java Transaction Api / Java Transaction Services »


C'est une API définissant des interfaces standard avec un gestionnaire de transaction, veut dire
permettant à des applications et à des serveurs JEE d'accéder à des transactions.

JCA « JEE Connector Architecture »


C’est une API de connexion au système d'information de l'entreprise, notamment aux
systèmes dits "legacy" tel que les ERP (Entreprise Ressource Planning).

103
Annexe Des généralités sur JEE

JMX « Java Management Extension »


Permet de développer des applications WEB de supervision d'applications à partir des
extensions.

JNDI « Java Naming and Directory Interface»


C’est une extension java standard qui fournit une API permettant de localiser et d'utiliser des
ressources; il peut y avoir un appel à des services CORBA, DNS, NIS,
LDAP…

3. Services de communication

JMS « Java Message Service »


A pour rôle l'envoi et la réception des messages entre deux composants d'application
JEE.

JAAS « Java Authentification And Autorisation Service »


Permet aux applications JEE d'authentifier et autoriser l'exécution par les utilisateurs.

Java Mail TM Technology


Permet l'envoi des e-mails d'une manière indépendante de la plate forme et du protocole, donc
envoi de courrier électronique.

RMI-IIOP « Remote Method Invocation/Internet Inter-Orb Protocol »


Cette API permet la communication synchrone entre objets.

Web Services
Les web services permettent de partager un ensemble de méthodes qui pourront être
appelées à distance. Cette technologie utilise XML ce qui permet d'être utilisé par n'importe
quel langage et n'importe quelle plate forme.

104
Annexe Des généralités sur JEE

XML
N'est pas vraiment une API de JEE mais son utilisation dans cette plate forme est de plus en
plus importante comme son utilisation pour les fichiers de configurations. XML est la base
d'un nouveau mode de communication entre les applications.

I.5. 2. Les serveurs d'applications. [5]

Un serveur d’application est une couche software résident sur une machine serveur qui
fournit les services que la technologie J2EE nécessite. Il y a plusieurs applications serveurs.
Parmi les produits commerciaux on rappel Bea WebLogic, IBM Websphere, Sun Application
Serveur, Pramati, etc… Parmi les produits libres le plus connu est JBOSS. Les différences
principales entre les différents serveurs d’applications sont relatives aux opérations de deploy,
clustering, etc… Par contre toutes les fonctionnalités qui concernent strictement le
fonctionnement des applications J2EE adhérent aux spécifications proposées par la Sun.

Les serveurs d’application se sont développés depuis la création de J2EE. On peut


distinguer principalement deux grandes catégories de serveurs :

• Open Source : évolue grâce à la communauté par exemples Tomcat : Apache, Jonas :
ObjectWeb, JBoss : JBoss …

• Propriétaire : évolue selon l’éditeur par exemples WebSphere : IBM, WebLogic : BEA,
WebObject : Apple, Oracle Application Server : Oracle …

I.6. Le modèle MVC

Le modèle MVC est un patron de conception (design pattern) qui consiste en trois types
d’objets:
le Modèle procure le logique métier de l’application,
la Vue est la présentation de l’application,
le Contrôleur est un objet qui gère les interactions entre l’utilisateur et la Vue.

105
Annexe Des généralités sur JEE

Un patron de conception décrit un problème récurrent et ses solutions, les solutions ne sont
jamais exactement les mêmes pour chaque occurrence du problème mais le patron de
conception donne une solution générale au problème qu’il suffit d’adapter.

Figure 2. Modèle M.V.C.

I.7. JPA :

La couche JPA (Java Persistence Annotation) est une couche d’abstraction de la couche
JDBC. Elle permet notamment de faire du Mapping Relationnel-Objet (ORM, Object
Relationnal Mapping en anglais) qui consiste à modéliser la base de données sous forme
d’objets pour une manipulation plus simple à travers le code Java (requêtes pré-écrites,
gestion des liens entre les tables,…). Généralement la couche JPA contient une classe (entité)
par table, des contrôleurs (fonctions de base implémentées) et des gestionnaires d’exceptions.

I.8. Les avantages d’utiliser JEE


L’utilisation de JEE pour développer et exécuter une application représente plusieurs
avantages :

106
Annexe Des généralités sur JEE

Une architecture d’application basée sur les composants qui permet un découpage de
l’application et donc une séparation des rôles lors du développement.
La possibilité de s’interfacer avec le système d’information existant grâce à de
nombreuses API : JDBC, JNDI, JMS, JCA…
La possibilité de choisir les outils de développement et le ou les serveurs
d’applications utilisés qu’ils soient commerciaux ou libres.

107

Vous aimerez peut-être aussi