Rapportversion Final

Mémoire de Projet de fin d’Études
Pour l’obtention du diplôme

Ingénieur d’État
Génie Informatique
Promotion 2016-2017
Titre :
Conception et développement d’un site web vitrine

Pour la CDG Développement
Réalisé par :
El Ouaghlidi Sara
Encadré par :
ENSA : CDG Développement :
Mr EL BOUHDIDI Jaber Mme TLEMCANI Hind
Membres de jury:
Mr EL BOUHDIDI Jaber Mr EL CHKOURI Yacin
Mme SELTANI Ghizlane
Année Universitaire :
2016-2017
Conception et développement d’un site web dynamique pour la CDG Développement
Dédicaces
A Mes parents Pour les sacrifices déployés à mon égard, pour leur patience, leur amour et
leur confiance en moi. Ils ont tout fait pour mon bonheur et ma réussite.
Nulle dédicace ne puisse exprimer ce que je leur dois. Que dieu leur réserve la bonne santé et
une longue vie.
A la mémoire de mon grand père.
A Toute personne qui m'a aidée à réaliser mon projet.
Je dédie ce modeste travail.
2
Remerciements
Je tiens tout particulièrement à remercier Mr Jaber BOUHDIDI mon encadrant de stage,

pour m’avoir formée, suivie et encadrée tout au long de la période de mon stage.
Je remercie vivement les membres de jury Mr Yacin CHKOURI et Mme Ghizlane

SELTANI d’avoir accepté d’évaluer mon projet. Leur participation est un grand honneur pour
moi.
Je remercie également Mme Hind TLEMCANI chef de projet SI et organisation pour sa

confiance et les libertés qu’elle m’a accordée sur ce projet.
Je remercie également Mme Hanaa Bennani, responsable des ressources humaines qui a
suivie mon intégration dans l’entreprise les premiers jours et qui s’est occupée de mes papiers
administratifs.
Plus généralement je remercie le corps professoral et administratif de l’Ecole Nationale

des Sciences Appliqués de Tétouan qui déploient de grands efforts pour nous assurer une
formation très actualisée.
3
Résumé
Dans le cadre de mes études et pour finaliser ma formation à l'ENSA, j’ai dû effectuer un
stage de quatre mois au sein de la CDG Développement qui incarne la stratégie du groupe
CDG dans les activités de développement territorial.
Ce projet se situe dans le cadre du développement web, il s’agit de l’étude, la conception et la

mise en œuvre d’une solution Web dynamique qui servira comme vitrine de l’ensemble des
activités de la CDG développement.
Pour la réussite du stage, j’ai dû mettre en application toutes les connaissances acquises
durant mes années de formation à l'ENSA. J’ai dû aussi mieux apprendre et travailler avec
des langages informatiques.
Mots Clés
CDG – Développement - Développement territorial - Développement web – Conception -

Solution Web dynamique - Langages informatiques.
4
Abstract
As part of my studies and to finalize my training at the ENSA, I had to carry out an internship
Of four months within the CDG Developement which embodies the strategy of the CDG
Group in territorial development activities.
.
This Project Is a part of the web developpement , It Is the study, design and implementation of
a dynamic Web solution That Will serve as a showcase for all of the activities of the CDG
developpement.
For the success of the internship, I had to apply all the acquired knowledge during my years
of training at ENSA. I also had to learn to better work with computer languages.
Key Words
CDG – Developement – Teritorial developement – Web developement – Design –

Implementation – Dynamic Web solution – Computer languages.
5
Liste des acronymes
Acronyme Désignation
CDG Caisse de Dépôt et de Gestion.
Dév Développement.
IDE Integrated development environment.
JDK Java development kit.
JEE Java Entreprise Edition.
JPA Java Persistence API.
JVM Java virtual machine.
MD5 Message Digest 5.
SQL Structured Query Language.
6
Table des matières
Introduction ............................................................................................................................................. 11
Chapitre 1 .............................................................................................................................................. 14
Introduction ........................................................................................................................................... 15
I. Cadre du projet ............................................................................................................................... 15
II. L’organisme d’accueil .................................................................................................................. 15
1. Description : .............................................................................................................................. 15
2. Piliers stratégiques ..................................................................................................................... 16
3. Organigramme de la holding ..................................................................................................... 17
4. Plan de travail ............................................................................................................................ 18
4.1. Organisation du rapport .......................................................................................................... 18
4.2. Planification du stage ............................................................................................................. 18
Conclusion ..................................................................................................................................... 19
Chapitre 2 .............................................................................................................................................. 20
Introduction ................................................................................................................................... 21
I. Etude de l’existant .......................................................................................................................... 21
1. Description de l’existant ................................................................................................................ 21
2. Critique de l’existant ................................................................................................................. 21
3. Publics ....................................................................................................................................... 22
4. Analyse des besoins................................................................................................................... 22
5. Solution proposée ...................................................................................................................... 23
Conclusion ..................................................................................................................................... 23
Chapitre 3 .............................................................................................................................................. 24
I. Conception générale ....................................................................................................................... 25
1. Cycle de vie ............................................................................................................................... 25
2. Le cycle de vie choisit ............................................................................................................... 25
II. Conception détaillée ..................................................................................................................... 26
1. Langage UML ........................................................................................................................... 26
2. Diagramme des cas d’utilisation ............................................................................................... 26
7
3. Le diagramme de classe ............................................................................................................ 30

III. Structure du site web ................................................................................................................... 31
1. Arborescence du site ................................................................................................................. 31
2. Graphisme et aspect visuel ....................................................................................................... 31
Conclusion ..................................................................................................................................... 32
Chapitre 4 .............................................................................................................................................. 33
I. Environnement de travail ................................................................................................................... 34
1. Environnement de développement ................................................................................................ 34
2. Langage de développement ........................................................................................................... 35
3. Framework..................................................................................................................................... 35
4. Moteur de Template ...................................................................................................................... 36
5. Serveur d’application .................................................................................................................... 36
II. Description des interfaces ................................................................................................................. 37
Conclusion générale ................................................................................................................................... 59
8
Tables des figures
Figure 1.1: Organigramme de la CDG développement ......................................................................... 17

Figure 2.1: Diagramme de Gantt ........................................................................................................... 19
Figure 3.2: Interface d'accueil du site actuel ....................................................................................... 21
Figure 4.3: Modèle de cycle en V .......................................................................................................... 25
Figure 5.3: Exemple de représentation d’un cas d’utilisation ............................................................... 26
Figure 6.3: Exemple de représentation d’un acteur.............................................................................. 27
Figure 7.3: Cas d’utilisation du visiteur ................................................................................................. 28
Figure 8.3: Cas d’utilisation de l’administrateur ................................................................................... 29
Figure 9.3: Diagramme des classes ....................................................................................................... 30
Figure 10.3: Structure prévu pour le site web....................................................................................... 31
Figure 11.4: Page d'Accueil principal du site web(1)............................................................................. 38
Figure 12.4: Page d'Accueil principal du site web(2) ........................................................................... 38
Figure 13.4: Page d'Accueil principal du site web(3)............................................................................. 39
Figure 14.4: Page d'Accueil de l'Administrateur ................................................................................... 39
Figure 15.4: Espace Authentification .................................................................................................... 40
Figure 16.4: Interface pour l'ajout d'un nouveau projet ....................................................................... 41
Figure 17.4: Liste des projets................................................................................................................. 42
Figure 18.4: Portefeuille de projets ....................................................................................................... 43
Figure 19.4: Détail du Projet choisi(1) ................................................................................................... 43
Figure 20.4: Détail du Projet choisi(2) ................................................................................................... 44
Figure 21.4: Page des opérations .......................................................................................................... 44
Figure 22.4: Chiffres clés de la holding.................................................................................................. 46
Figure 23.4: Interface pour l'ajout d'un nouveau Evénement .............................................................. 46
Figure 24.4: Liste des Evénements ........................................................................................................ 47
Figure 25.4: Blog des Evénements ........................................................................................................ 47
Figure 26.4: Détail de l'événement choisit .......................................................................................... 48
Figure 27.4: Calendrier des événements............................................................................................... 48
Figure 28.4: Interface pour ajouter une nouvelle filiale ....................................................................... 49
Figure 29.4: La liste des filiales .............................................................................................................. 49
Figure 30.4: Détails sur la filiale choisie ................................................................................................ 50
Figure 31.4: Statistiques (Chiffres Clés) ................................................................................................. 51
Figure 32.4: Interface de contact .......................................................................................................... 52
Figure 33.4: Boite de messagerie .......................................................................................................... 53
Figure 34.4: Interface de choix de modification(1) ............................................................................... 54
Figure 35.4: Interface des éléments de l'organigramme ..................................................................... 55
Figure 36.4: Interface de modification .................................................................................................. 55
9
Figure 37.4: Téléchargement de l'image ............................................................................................... 56

Figure 38.4: Organigramme du Conseil d'administration ..................................................................... 57
Figure 39.4: Interface de choix de modification(2) ............................................................................... 57
Figure 40.4: Profil de la holding............................................................................................................. 58
10
Table des tableaux
Tableau 1.1: Planification des taches .................................................................................................... 19
11
Introduction
L’expérience permet d’améliorer les connaissances pratiques d’un individu, comme elle sert à
tester ses informations théoriques.
Le stage de fin d’études en Système d’information et aide à la décision est important,

puisqu’il m’a offert l’opportunité et l’occasion de connaître le milieu professionnel, d’enrichir
et mettre en pratique les connaissances acquises au cours de ma formation durant les quatre
dernières années, ainsi que d’améliorer mon bagage informatique en appliquant les notions
appris tout au long de mon parcours à l’Ecole Nationale des Sciences Appliqués de Tétouan.
Ce rapport est donc le fruit de quatre mois de stage au sein de la holding CDG
Développement sous la tutelle de Madame Hind TLEMCANI, dans le cadre d’une mémoire
de projet de fin d’études pour l’obtention de diplôme d’ingénieur d’état en système
d’information et aide à la décision.
La mission de ce stage était de concevoir et développer un site web vitrine dynamique pour
présenter d’une manière détaillée et profonde l’ensemble des activités et des projets de la
holding.
Aujourd’hui internet est devenue un outil de communication indispensable pour toutes les
entreprises quelques soit leur taille.
Parmi les supports de communication simple, utile et efficace qui assure à une entreprise
d’être rapidement présente sur le web on trouve le « site web vitrine » qui est devenu un outil
indispensable pour communiquer efficacement.
Il est devenu primordial de posséder un site Internet. Que ce soit simplement pour que les
gens puissent entrer en communication avec la holding ou pour agrandir la clientèle, une page
Web est alors devenu un outil essentiel pour atteindre ses objectifs. Contrairement aux autres
médias, le Web est accessible de partout à travers le monde, en tout temps et par tout le
monde
12
L’entreprise pourra à travers ce site présenter ses produits et faire connaitre ses services, se
positionner dans une nouvelle dimension économique, augmenter sa notoriété et son image et
surtout développer son activité par l’acquisition de nouveaux prospects.
13
Chapitre 1
Cadre général
14
Introduction
Ce chapitre a pour vocation de mettre le projet dans son cadre général en précisant et
décrivant les diverses taches composant ce dernier, ainsi que d’essayer de mettre en exergue
la présentation de l'organisme d'accueil la CDG Développement.
I. Cadre du projet
Ce projet se situe dans le cadre du développement web, il s’agit de l’étude, la conception et la

mise en œuvre d’une solution Web dynamique qui servira comme vitrine de l’ensemble des
activités de la CDG développement.
II. L’organisme d’accueil

1. Description :
Filiale de la Caisse de Dépôt et de Gestion, CDG Développement est une société anonyme à
Conseil d’administration. Elle a été crée en 2004 afin d’incarner la stratégie du groupe CDG
dans les activités opérationnelles non financières.
La holding investit dans des projets générateurs de richesse et d’emploi pour la collectivité.
Ainsi, elle a développé un savoir-faire connu et reconnu dans les secteurs moteurs de
l’économie marocaine, principalement l’industrie, le tourisme, les infrastructures et les
services.
Aujourd’hui, la mission de cette holding regroupant 28 filiales est multiple. En effet, tout en
étant un véritable levier de développement et d’innovation, CDG Développement doit
renforcer son positionnement dans le développement territorial et asseoir son statut de
référence comme partenaire des collectivités locales. En développant et structurant de
nouveaux métiers, la holding se doit de concilier performance financière et utilité publique.
CDG Développement est structurée autour des lignes métiers suivantes :
15
▪ Incubation, Conception et Aménagement ;

▪ Développement ;
▪ Gestion des services ;
▪ Gestion et exploitation hôtelières ;
▪ Filière Bois ;
▪ Grands projets ;
▪ Société d’Economie Mixtes ;
2. Piliers stratégiques
Afin d’accompagner la mutation urbaine que connait le Maroc, le groupe CDG

développement contribue à soutenir la dynamique de développement socio-économique de
notre pays et à concevoir un aménagement harmonieux du territoire. Ainsi, le développement
du portefeuille de CDG développement est articulé autour de grands métiers, pour lesquels la
holding est devenue une référence nationale :
Aménagement & Développement Aménagement & Développement de Infrastructures

Urbain Intégré Zones Touristiques Intégrées
CDG développement se positionne en qualité CDG développement est engagée dans CDG développement inscrit ses actions dans
de concepteur, de planificateur et l’aménagement de stations balnéaires le cadre des stratégies sectorielles mises en
d’intégrateur de projets territoriaux d’envergure, qui favoriseront le place par le Maroc, pour l’aménagement de
complexes. Sa stratégie d’intervention vise à développement de la capacité hôtelière, la pôles de compétitivité et d’espaces
améliorer l’attractivité des villes et à faire promotion du volume des investissements économiques intégrés. Ainsi, plusieurs zones
face aux nouveaux enjeux urbains que sont la touristiques et la création de nouveaux d’activité ont été réalisées dans les domaines
densité, la mixité, la mobilité et le emplois. Le groupe gère également un de l’industrie, du tourisme, de l’offshoring et
développement durable portefeuille d’actifs hôteliers dans plusieurs de la logistique.
zones touristiques du pays.
Promotion & Développement Services aux Collectivités Territoriales Services

Immobilier
CDG développement est un partenaire Ce pôle regroupe des filiales qui constituent
CDG développement réalise les pôles urbains privilégié des collectivités territoriales, qui des leviers d’accélération du développement
de demain, dans l’objectif de préserver un œuvre pour la dynamisation régionale des du groupe. il englobe les domaines de
tissu urbain de qualité et de contribuer à la activités économiques. Le groupe opère via l’ingénierie, le facility-management, la
reconfiguration urbanistique de notre pays. des sociétés de développement local dédiées à gestion hôtelière, thermale et golfique, ainsi
ainsi, le groupe intervient dans le domaine de la gestion des équipements publics, créées que la gestion locative de patrimoine et la
la promotion et du développement pour garantir une efficacité optimale et une réalisation de résidences pour étudiants.
immobilier, tous standings confondus et prête qualité irréprochable, tout en respectant les
une attention particulière au créneau du délais de réalisation
logement économique et social. 16
3. Organigramme de la holding
Chargée de Mission
Président Mme chada Jazouli
Directeur Général Directeur
Général Délégué Chargée de Mission
M. Abdellatif Responsable des
Zaghnoun M. Mohamed activités touristiques
Hamdaoui & foncières
Mme Nada Bouhemou
Chargée de Mission
M. Naim temsamari
Pilotage
Contrôle Support
Communication Mme Khaoula
M. Souhal Maàroufi Mme Wassila Siaoui Lachguar Finances M. Hamza El Hajoui
Directrice Directrice Adjointe
Directeur Directeur
Audit
Communication Comptabilité &
Business PLanning Mission juridique
Interne institutionnelle Consolidation
Communication Suivi des filiales et Financement & Achat & moyens

Risk Management Trésorerie
Interne des participations généraux
Système
d’information &
Relations Publiques Organisation
Capital Humain /
Développement RH
4. Présentation du projet
Figure 1.1: Organigramme de la CDG développement
17
4. Plan de travail
4.1. Organisation du rapport
Le présent rapport trace les phases du déroulement du projet et indique la manière dont va être
mené le projet de création du site web vitrine dynamique, il sera donc divisé en quatre
parties :
La première partie intitulée « Cadre général » a pour but de mettre le projet dans son cadre
général, présenter le sujet ainsi que l’organisme dans lequel ce stage s’est déroulé.
La deuxième partie intitulée «Analyse de l’existant et expression des besoins » analysera la

version du site web précédente afin d’éviter de reproduire le même aspect et les mêmes
lacunes en proposant de nouvelles solutions en fonctions des différents besoins de
l’organisme.
La troisième partie «Conception » liste la méthode adoptée pour réaliser le site web ainsi
que l’ensemble des diagrammes.
Finalement dans la quatrième partie « Réalisation » seront présentées les différentes

interfaces du site web ainsi que l’ensemble des éléments techniques utilisés pour cette
réalisation.
4.2. Planification du stage
La planification est parmi les phases d’avant projet les plus importantes, pour cela j’ai eu
recours au diagramme de Gantt, couramment utilisé en gestion de projet, il est l'un des outils
les plus efficaces pour représenter visuellement l'état d'avancement des différentes tâches qui
constituent un projet. La colonne de gauche du diagramme énumère toutes les tâches à
effectuer, tandis que la ligne d'en-tête représente les unités de temps les plus adaptées au
projet (jours, semaines, mois etc.). Chaque tâche est matérialisée par une barre horizontale,
dont la position et la longueur représentent la date de début, la durée et la date de fin.
La phase de planification permet de découper le projet en tâches, de décrire leur enchaînement
dans le temps, d'affecter à chacune une durée.
18
Dans le cadre d’une bonne gestion du projet et du respect des délais des différentes étapes de
l’application, j’ai établis un planning qui définit la date des différentes tâches et leurs statuts
d’avancement pendant la réalisation du projet, ce que représente la figure suivante :
Figure 2.1: Diagramme de Gantt
Analyse et étude de l’existant 01/03/17 08/03/17

Expression des besoins 09/03/17 16/03/17
Cahier des charges et conception 17/03/17 27/03/17
Rédaction du rapport jusqu'à la 28/03/17 11/04/17
Conception
Développement 12/04/17 31/05/17
Rédaction du reste du rapport 01/06/17 08/06/17
Présentation PowerPoint 09/06/17 16/06/17
Tableau 1.1: Planification des taches
Conclusion
Cette partie a été destinée pour mettre le projet en son cadre général. La partie suivante servira
comme une étude de l’existant pour bien spécifier les besoins afin de réaliser des nouvelles
solutions plus efficaces.
19
Chapitre 2
Analyse de l’existant et expressions des besoins
20
Introduction
Ce chapitre est dédié à la présentation du projet existant, faire un résumé de l’ensemble des
lacunes qu’il contient ainsi que de faire une définition claire des buts, lister les besoins et les
résultats attendus en relation avec les objectifs stratégiques de l’organisme.
I. Etude de l’existant
1. Description de l’existant
CDG Développement a lancé son site web le 1er novembre 2007 sur la base du système de
gestion de contenu « Joomla ». Depuis cette date, la holding n’a cessée de se développer et
son environnement est en perpétuel changement. Or, il s’avère que ce site, qui est la
principale vitrine de ses activités, est aujourd’hui totalement inadapté à ses évolutions.
Compte-tenu du rôle primordial de la CDG développement dans de nombreux secteurs

d’activité, qui sont de plus en plus diversifiés, il est devenu urgent de faciliter l’accès à toutes
les informations sur la holding et sur ses filiales.
2. Critique de l’existant
Figure 3.2: Interface d'accueil du site actuel
21
Le site actuel de la holding présente des difficultés aussi bien en termes de navigation qu’au
niveau de l’actualisation de son contenu. Le contenu du site est figé Il est aujourd’hui
difficile, voire impossible, d’actualiser les informations concernant aussi bien la holding que
ses filiales. Ainsi que Le design du site ne répond plus aux attentes des membres de la
holding.
3. Publics
Etant données les missions de la CDG Développement (développement territorial au Maroc

etc …), le site web s'adresse aux publics suivants:
▪ les membres de la CDG développement ainsi que de ses différentes filiales ;

▪ Le grand public et les personnes désirant intégrer la holding ;
▪ les institutions, administrations, tutelles qui sont en rapport avec la CDG
développement et toutes ses filiales ;
En résumé les publics ciblés se structurent en deux parties bien différenciées, d'une part un
public spécialiste, d'autre part un public généraliste ;
4. Analyse des besoins
Lors d’une réunion avec le chef de projet SI et organisation ce dernier a exprimé l’ensemble
des besoins et souhaits concernant le nouveau site web vitrine dynamique. En s’appuyant sur
cette réunion trois points principaux ont été axés :
▪ Les informations que doivent figurer sur le site web ;

▪ Les nouvelles fonctionnalités qui devront apparaitre et apporter un nouvel aspect au
site ;
▪ Quelles sont les nouvelles caractéristiques de style que doit prendre le site web ;
Suite à cette réunion est né un cahier des charges.
22
5. Solution proposée
Le site web réalisé devra permettre à la holding de :
▪ Avoir une organisation et une ergonomie satisfaisante;

▪ Les couleurs du site devront être en harmonie avec le logo de la holding;
▪ Chaque lien devra avoir pour cible une seconde page;
▪ Les internautes devront pouvoir envoyer des courriers, des demandes d’information.
▪ Le site devra avoir une console d’administration qui permet de gérer le contenu et
l’ensemble des fonctionnalités du site ;
▪ Le sommaire du site devra être dynamique ;
▪ Pour que les internautes puissent disposer de toutes les informations sur les différents
projets et activités de la holding une carte de Maroc dynamique situant les grands
projets devra être mise en place sur le site web ;
▪ Des galeries photos facilement implémentables seront intégrées au site ;
▪ Rentabiliser son activité sur le plan humain ou financier, ainsi que d’élargir son
marché. Les données doivent être utiles, actualisées et disponibles en permanence ;
▪ Améliorer le contact avec sa clientèle, grâce à des fonctionnalités interactives ou à un
couplage du site vitrine avec les réseaux sociaux ceci aidera également la holding à
améliorer ses services et prospecter de nouveaux clients ;
▪ Donner la possibilité d’imprimer les données postés par l’administrateur du site ;
▪ Mettre en place un calendrier résumant l’ensemble des événements organisés par la
holding ;
Conclusion
Ce chapitre avait pour but de faire une étude et analyse de l’existant, les lacunes que contient
le site web actuel ainsi que l’ensemble des solutions proposées pour pallier la majorité de ces
lacunes.
Le chapitre suivant contiendra une étude conceptuelle du site web vitrine dynamique, tout en
mentionnant tous les scénarios possibles, les acteurs, et les diagrammes.
23
Chapitre 3
Conception
24
Introduction
Dans le cycle de vie de ce projet, la conception représente une phase primordiale et

déterminante pour produire une application de haute qualité. C’est dans ce stade qu’il est
nécessaire de clarifier en premier lieu la vue globale, en décrivant l’architecture générale
adoptée dans la partie réalisation du projet. Puis, dans un deuxième lieu je vais détailler mon
choix conceptuel à travers plusieurs types de diagrammes UML.
I. Conception générale
1. Cycle de vie
Le cycle de vie d'une application comprend toutes les étapes depuis sa conception et sa
réalisation jusqu’à sa mise en œuvre. L'objectif d'un tel découpage est de permettre de définir
des jalons intermédiaires permettant la validation du développement du logiciel et la
vérification de son processus de développement.
2. Le cycle de vie choisit
Le modèle choisit pour faire la conception et la mise en œuvre de cette solution Web est le
modèle en V car c’est un modèle qui propose plusieurs phases de tests qui sont souvent
négligées et qui sont en relation avec la description des besoins initiaux, ce qui assure une
meilleure qualité du produit final.
Spécification Qualification
Conception Intégration
générale
Conception Tests unitaires

détaillée
Programmation
Figure 4.3: Modèle de cycle en V 25

II. Conception détaillée
1. Langage UML
UML se définit comme un langage de modélisation graphique et

textuel destiné à comprendre et décrire des besoins, spécifier,
concevoir des solutions et communiquer des points de vue il permet
d’unifier les notations et les concepts oriente objet il unifie également les notations
nécessaires aux différentes activités d’un processus de développement et offre le moyen
d’établir le suivi des décisions prises, depuis la spécification jusqu’au codage.
2. Diagramme des cas d’utilisation

2.1. Définition
Les diagrammes de cas d'utilisation sont des diagrammes UML utilisés pour donner une
vision globale du comportement fonctionnel d'un système logiciel. Ils sont utiles pour des
présentations auprès de la direction ou des acteurs d'un projet, Il s’agit donc de la première
étape UML pour la conception d’un système.
2.2. Les éléments du diagramme des cas d’utilisation
Un diagramme des cas d’utilisation se comporte principalement de trois éléments, qui sont les
suivants :
▪ Cas d’utilisation
Cas d’utilisation
Figure 5.3: Exemple de représentation d’un cas d’utilisation
26
Un cas d'utilisation est une unité cohérente représentant une fonctionnalité visible de
l'extérieur. Il réalise un service de bout en bout, avec un déclenchement, un déroulement et
une fin, pour l'acteur qui l'initie. Un cas d'utilisation modélise donc un service rendu par le
système, sans imposer le mode de réalisation de ce service.
▪ Acteur
Figure 6.3: Exemple de représentation d’un acteur

Un acteur est l'idéalisation d'un rôle joué par une personne externe, un processus ou une chose
qui interagit avec un système. Il se représente par un petit bonhomme avec son nom inscrit
dessous.
▪ Relation
Trois types de relations sont prises en charge par la norme UML « Inclusions – Extensions –
Généralisations » et sont graphiquement représentées par des types particuliers de ces
relations. Les relations indiquent que le cas d'utilisation source présente les mêmes conditions
d'exécution que le cas issu. Une relation simple entre un acteur et une utilisation est un trait
simple.
2.3. Les acteurs du site web vitrine dynamique de la CDG Développement
Le diagramme des cas d’utilisations sera composé de deux acteurs qui sont :
▪ Le visiteur
C’est l’internaute qui visitera le site web. Il pourra être l’un des membres de la CDG
développement ou bien de l’une de ses filiales, des personnes désirant intégrer la holding ou
bien les institutions, administrations, tutelles qui sont en rapport avec la CDG développement
et toutes ses filiales.
27
▪ L’administrateur du site
C’est la personne qui sera chargée du site et de la mise à jour de son contenu .Il s’agit de
l’'ajout, la création, la suppression et modification de contenus, de rubriques par simple saisie
de texte, d'ajout de fichiers (images, documents PDF, etc.), il permet d'obtenir un contenu qui
s'intègre directement au sein des pages du site sans aucune connaissance particulière en
matière de programmation.
2.4. Le diagramme du site web
▪ Diagramme de cas d’utilisation du visiteur
Figure 7.3: Cas d’utilisation du visiteur

Lors de sa visite au site de la holding, l’internaute aura la possibilité de consulter le contenu
du site web y compris les projets situés dans la carte dynamique du Maroc, l’ensemble des
organigrammes, la galerie, les événements de la holding , ses chiffres clés ainsi que
l’ensemble des fiches signalétiques.
28
Il pourra notamment contacter par message l’administrateur du site web, télécharger

l’ensemble des documents PDF exportés par ce dernier.
▪ Diagramme de cas d’utilisation de l’administrateur
Figure 8.3: Cas d’utilisation de l’administrateur
Un administrateur à généralement pour but d’animer et faire évoluer le site web. Il définit
le contenu et conçoit les rubriques. Il anime le site, l'actualise, le renouvelle, le fait vivre
et supervise éventuellement l'administration technique du site.
29
3. Le diagramme de classe
3.1. Définition
Le diagramme de classes est considéré comme le plus important de la modélisation orientée

objet, il est le seul obligatoire lors d'une modélisation. Le diagramme de classes en montre la
structure interne. Il permet de fournir une représentation abstraite des objets du système qui
vont interagir pour réaliser les cas d'utilisation.
3.2. Les éléments d’un diagramme de classe
Les principaux éléments d’un diagramme de classes sont les classes et leurs relations :
association, généralisation et plusieurs types de dépendances, telles que la réalisation et
l'utilisation.
3.3. Le diagramme du site web
Figure 9.3: Diagramme des classes
30
III. Structure du site web
Il est nécessaire de maintenir dans un site web quelque soit son type une hiérarchisation
équilibrée qui permet l'accès rapide à l'information et une compréhension intuitive de la façon
dont les pages sont organisées tout en donnant la possibilité d’évoluer est un objectif
préalable. Pour cela j’ai choisie la structure suivante qui sera en évolution.
1. Arborescence du site
Figure 10.3: Structure prévu pour le site web

2. Graphisme et aspect visuel
Il s’agit en effet d’une bonne charte graphique qui doit être utilisée et respectée dans toutes les
communications de la holding pour obtenir a la fin une identité graphique du site web
similaire à l’identité papier de la holding. Le graphisme doit être le plus sobre et élégant
possible en évoquant l’univers du développement territorial. Ne doit surtout pas être
encombrant ou farfelu. Les couleurs doivent être en harmonie avec l’univers dégagé sur le site
31
internet. Avec une typographie adaptée qui doit avoir pour avantage de ne pas fatiguer l’œil
de l’internaute.
Conclusion
Ce chapitre avait pour but de présenter la conception du projet avant l’implémentation du site
web dynamique. La conception a été faite par UML
Dans le chapitre suivant, je mettrais l’accent sur l’implémentation du site avec sa base de
données et des captures d’écran de l’ensemble de ses pages et son fonctionnement.
32
Chapitre 4
Réalisation
33
Introduction
Au niveau de ce dernier chapitre, je vais énumérer les différents outils soft et hard que j’ai
utilisée pour réaliser le site web vitrine dynamique de la CDG Développement ainsi que ses
principales interfaces.
De nos jours nous avons à disposition de beaucoup d’outils pour implémenter nos solutions
web, et je vais donc citer ceux que j’ai utilisée .
I. Environnement de travail
Les choix techniques sont divers du fait de la nature de l’application. Il était nécessaire de
déterminer un langage de développement, un Framework étendant ce langage pour le web, un
serveur d’applications pour faire fonctionner le programme final, un moteur de Template, etc.
1. Environnement de développement
Eclipse IDE
Massivement utilisé en entreprise, l'IDE Eclipse c'est un outil puissant,

gratuit, libre et multiplateforme.
JDK
Java Développent Kit Java est l'environnement dans lequel le code Java est compilé pour être
transformé en byte-code afin que la machine virtuelle JAVA (JVM) puisse l'interpréter.
JPA
C’est une API Java Persistance qui repose sur des entités annotés et sur un gestionnaire de ces
entités (EntityManager) qui propose des fonctionnalités pour les manipuler (ajout,
34
modification suppression, recherche). Ce gestionnaire est responsable de la gestion de l'état

des entités et de leur persistance dans la base de données.
2. Langage de développement
Java JEE
Afin de réaliser ce projet j’ai eu recours au langage de programmation Java

JEE. Le terme « Java EE » signifie Java Enterprise Edition, et était
anciennement raccourci en « J2EE ». Il fait quant à lui référence à une
extension de la plate-forme standard. Autrement dit, la plate-forme Java EE qui 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.
Java Script
Le JavaScript est désormais un des poids lourds du développement Web qui est
omniprésent des applications pour smartphones et tablettes, les applications
pour Windows 8, mais aussi les logiciels multiplateformes. Le JavaScript
est majoritairement utilisé sur Internet, conjointement avec les pages Web HTML. Le
JavaScript s'inclut directement dans la page Web (ou dans un fichier externe) et permet
de dynamiser une page HTML, en ajoutant des interactions avec l'utilisateur, des animations,
de l'aide à la navigation, etc.
3. Framework
Spring Boot
Spring Boot est un Framework conçu pour simplifier le démarrage et le

développement de nouvelles applications Spring. Le Framework propose une
approche dogmatique de la configuration, qui permet d'éviter aux développeurs de
35
redéfinir la même configuration à plusieurs endroits du code. Dans ce sens, Boot se veut d'être
un acteur majeur dans le secteur croissant du développement d'applications rapide.
4. Moteur de Template
Thymeleaf
Thymeleaf est un moteur de Template, sous licence Apache

2.0,écrit en Java pouvant générer du « XML,XHTML,HTML5 ». Thymeleaf peut être utilisé
dans un environnement web ou non web. Son but principal est d'être utilisé dans un
environnement web pour la génération de vue pour les applications web basées sur le
modèle MVC.
5. Serveur d’application
Tomcat
Pour faire fonctionner une application web Java EE, nous avons besoin de
mettre en place un serveur d'applications. Il en existe beaucoup sur le
marché, pour mon site web j’ai choisi d'utiliser Tomcat, car c'est un serveur léger, gratuit,
libre, multiplateforme et c’est un serveur qu’on rencontre d'ailleurs très souvent dans des
projets en entreprise, en phase de développement comme en production.
6. Base de données
WampServer
Est une plateforme de développement Web de type WAMP,

permettant de faire fonctionner localement (sans se
connecter à un serveur externe) des scripts PHP.
Wampserver n'est pas en soi un logiciel, mais un environnement comprenant deux serveurs
(Apache et MySQL), un interpréteur de script (PHP) ainsi que phpMyAdmin pour
l'administration Web des bases MySQL.
36
MySQL
Est une base de données relationnelle dont le principe est d'enregistrer

les informations dans des tables, qui représentent des regroupements
de données par sujets (table des projets, table des événements, table
des filiales, etc.). Les tables sont reliées entre elles par des relations. Le
langage SQL qui est un langage universellement reconnu par MySql et
les autres bases de données et permettant d'interroger et de modifier le contenu d'une base de
données.
II. Description des interfaces
Je listerais dans cette deuxième partie l’ensemble des interfaces principales qui constituent le
site web dynamique réalisé.
Durant la description de l’ensemble des pages du site web, je mettrais l’accent sur les deux
profils-types que l’on retrouve dans la plupart des sites et applications web de nos jours, il
s’agit du Front-End et du Back-End.
▪ Page d’accueil
Concernant le travail réalisé, mon site web est constitué généralement de deux pages
d’accueil :
▪ La page d’accueil principal du site web et qui est accessible par le grand public que ça
soit des membres de la CDG développement ainsi que de ses différentes filiales, des
institutions, administrations, tutelles qui sont en rapport avec la CDG développement
et toutes ses filiales ou même des personnes désirant intégrer la holding ;
37
▪ La page d’accueil de la console d’administration, dans laquelle l’administrateur

effectue et apporte les différents changements au site web ;
Figure 11.4: Page d'Accueil principal du site web(1)
38
La page d’accueil principal du site web est constitué principalement de :
▪ Un mot du Président Directeur Général ;

▪ Un défilement d’images pour mieux s’approcher du principe et but de la holding ;
▪ Le sommaire constitué de l’ensemble des rubriques et sous-rubriques situant
l’ensemble des pages du site web ;
Figure 14.4: Page d'Accueil de l'Administrateur
39
La page d’accueil se situant dans la console d’administration est composé de :
▪ Un menu contenant l’ensemble des taches et actions que l’administrateur pourra

effectuer sur le site web ;
▪ Des Dashboard résumant certaines données de la holding ;
▪ Authentification
Figure 15.4: Espace Authentification

Pour sécuriser la partie authentification j’ai eu recours dans mon projet à Spring Security.
Lorsque l’administrateur demande l’accès à la console d’administration, il doit tout d’abord

s’identifier par son login et mot de passe qui a été encrypté dans la base de données grâce a
fonction de hachage « MD5 ». En cas d’erreur un message d’alerte s’affiche , et en cas où tout
se passe bien , lors de sa déconnexion de la console d’administration l’administrateur aperçoit
un message indiquant qu’il a été déconnécté.
40
▪ Espace Projets
Back-End
L’administrateur pourra ajouter un projet en cliquant sur la sous rubrique« Nouveau Projet »
qui se situe dans la rubrique « Les Projets ».
Il sera mené alors à une interface qui contient un formulaire comportant plusieurs champs
« Nom du Projet – Description du Projet – Latitude – Longitude – Fiche du Projet (image) »
que l’administrateur doit insérer.
Figure 16.4: Interface pour l'ajout d'un nouveau projet
L’application gère le contrôle de saisie ainsi que la sauvegarde dans les bases des données.
Après avoir ajouter un projet l’administrateur pourra consulter la liste des projets ajoutés en
cliquant sur « Liste des projets » ou bien il sera tout simplement automatiquement redirigé
vers cette liste après avoir ajouter un projet, une liste sera alors affiché contenant l’ensemble
des projets, et l’administrateur pourra ou bien supprimer ou bien modifier un projet existant.
41
Figure 17.4: Liste des projets
Pour supprimer un projet l’administrateur devra cliquer sur l’icône un message

s’affichera demandant à l’administrateur s’il souhaite vraiment supprimer le projet
sélectionné, si c’est le cas l’administrateur devra cliquer sur « OK » et le projet sera supprimé.
En cas de modification, l’administrateur cliquera sur l’icône il sera donc mené a un

formulaire contenant en avance le contenu des différents champs du projet sélectionné, il
apportera les changements qu’il souhaitera sur le projet choisit et ce dernier sera donc modifié
avec succès.
Front-End
Une fois cliqué sur « Grands projets et réalisations » se situant dans le sommaire des
rubriques et sous-rubriques, le visiteur du site web sera mené à une page contenant une galerie
dynamique des grands projets réalisés par la holding, a chaque fois que l’administrateur ajoute
un projet ce dernier sera ajouté dans la galerie et visualisé par le visiteur.
42
Figure 18.4: Portefeuille de projets
Une fois cliqué sur le projet souhaité le visiteur du site web sera mené a une page contenant :
▪ La fiche signalétique du projet ;

▪ Une description du projet ;
▪ Une carte du Maroc dynamique situant le projet de la holding choisit ;
N.B : La carte du Maroc est une carte dynamique dont la localisation change d’un projet à
un autre en fonction des coordonnées (Latitude et Longitude) inséré par l’administrateur
lors de l’ajout d’un projet
Figure 19.4: Détail du Projet choisi(1)

43
Figure 20.4: Détail du Projet choisi(2)
▪ Espace Chiffres Clés
Back-End
Figure 21.4: Page des opérations

En cliquant sur « Chiffres clés» l’administrateur pourra consulter l’ensemble des chiffres clés
de la holding qui sont prédéfinies dans la base de données et qui sont :
44
▪ Total Bilan ;
▪ Fonds propres ;
▪ Chiffre d’affaire ;
▪ Investissements ;
▪ Nombre de Filiales & Participations ;
Maintenant il est devenu possible de modifier les chiffres clés de la holding à tout moment ,
alors pour modifier un chiffre clé l’administrateur cliquera sur « Opérations » qui se situe
dans la rubrique « Chiffres Clés » et il sera donc mené a une interface qui contiendra une
barre de recherche , l’administrateur devra donc saisir le code du chiffre clé auquel il souhaite
apporter une modification , les détails de ce dernier s’afficheront ainsi que les deux opérations
qu’il pourra effectuer sur le chiffre clé choisit, ou bien il ajoutera une valeur ou bien il
supprimera une valeur de ce dernier.
L’administrateur va alors cocher l’opération voulut « Ajout ou bien Retrait » et saisira la

valeur qu’il souhaite apporter au chiffre clé puis il cliquera sur « Valider », le chiffre clé sera
alors modifié et l’opération effectuée sera ajoutée :
▪ Numéro de l’opération ;
▪ Date de l’opération ;
▪ Type de l’opération (Retrait ou bien Ajout) ;
▪ Valeur apporté au chiffre clé ;
Une fois la valeur du chiffre clé modifiée , la nouvelle valeur sera remplacé dans la base de
données , et donc le pourcentage sera automatiquement changé dans le graphe qui se situe à la
page d’accueil de l’Administrateur.
Front-End
Pour le visiteur du site web, il pourra consulter les chiffres clés de la holding en cliquant sur la
sous rubrique « chiffres clés » se situant dans la rubrique « Qui sommes-nous ? » il trouvera
alors dans une interface ergonomiquement satisfaisante l’ensemble des chiffres clés de la
holding avec une description a coté de chaque chiffre clé pour mieux comprendre de quoi il
s’agit, et les données affichées sont bien sûr dynamiques et peuvent être modifiées à tout
moment par l’administrateur du site web.
45
Figure 22.4: Chiffres clés de la holding
▪ Espace Evénements
Back-End
L’administrateur pourra ajouter les événements de la holding qui englobe, en outre, les
réunions, les meetings, les conférences, les congrès, même les dîners d’entreprise ou les
activités ludiques pour les employés, en cliquant sur « Nouveau Evénement », il ajoutera un
événement en remplissant le formulaire « Nom de l’événement, description de l’événement ,
date de l’événement , fiche de l’événement ».
Figure 23.4: Interface pour l'ajout d'un nouveau Evénement

46
L’administrateur pourra également consulter la liste des événements et supprimer un ou

plusieurs événements ainsi que d’effectuer des changements tels que la date, la fiche de
l’événement etc.
Figure 24.4: Liste des Evénements
Front-End
Le visiteur pourra se renseigner sur les nouveautés de l’entreprise en cliquant sur la sous
rubrique « Evénements récents » qui se trouve dans la rubrique « Evénements », il sera donc
mené a une interface qui contient l’ensemble des événements organisés par la holding.
Figure 25.4: Blog des Evénements

47
Pour consulter l’événement de façpn plus détaillée , le visiteur devra cliquer sur « Plus de
détails » il sera donc dirigé vers l’interface suivante
Figure 26.4: Détail de l'événement choisit
Le visiteur pourra aussi consulter l’ensemble des événements d’un manière plus facile et
efficace et cela en cliquant sur la sous rubrique « Calendrier » qui regroupe chaque événement
ajouté par l’administrateur.
Figure 27.4: Calendrier des événements
48
▪ Espace Filiales
Back-End
Le but de cette partie est de transmettre une information synthétique et pratique sur le
fonctionnement de la holding et de ses filiales qui soit en accord avec sa philosophie
d’intervention.
L’administrateur pourra alors ajouter de manière synthétique une filiale de la holding en

cliquant sur « Nouvelle Filiale ».
Figure 28.4: Interface pour ajouter une nouvelle filiale

Il pourra ainsi consulter la liste des filiales de la holding.
Figure 29.4: La liste des filiales
49
Front-End
Les filiales ajoutées par l’administrateur seront ajoutées en tant que sous rubriques de la
rubrique « Nos Filiales », le visiteur n’a alors qu’a poser le curseur sur la rubrique principale
et l’ensemble des sous rubriques s’afficheront en fonction des filiales ajoutés par
l’administrateur.
Quand le visiteur cliquera sur la filiale existante il sera mené a une interface contenant plus de
détails sur cette dernière.
Figure 30.4: Détails sur la filiale choisie
50
▪ Les tableaux de bord
Par définition, un tableau de bord est un outil de gestion qui présente synthétiquement les
activités et les résultats d’une holding, sous forme d’indicateurs permettant le contrôle, la
réalisation des objectifs fixées et la prise des décisions nécessaires.
Le site contiendra en général deux groupes de tableaux de bord, qui sont les suivants :
Résumé des chiffres clés de la holding
Figure 31.4: Statistiques (Chiffres Clés)

C’est en effet un graphe qui contient le pourcentage que présente chaque chiffre clé de la
holding, ce pourcentage change en fonction de l’opération effectuée par l’administrateur.
Résumé des actions du visiteur
C’est le résumé du nombre de personnes ayant visitées le site web de l’entreprise ainsi que les
personnes ayant envoyées des messages à l’administrateur du site web.
51
Résumé des actions effectuées par l’administrateur
C’est deux parties de l’entête de la console d’administration ont pour but de faire un résumé
de l’ensemble des actions que l’administrateur a réalisé depuis qu’il a commencé a utiliser la
console d’administration.
▪ Espace Messagerie
Front-End
Figure 32.4: Interface de contact

Lors de sa visite au site web de la Holding, l’internaute pourra également donner son avis sur
le site, effectuer une demande ou poser une question et cela en cliquant sur la rubrique
« Contact », il sera alors dirigé vers un formulaire qu’il devra remplir.
52
Ce formulaire sera l’intermédiaire entre le visiteur et l’administrateur du site web, après avoir
cliqué sur « Envoyer mon message » le message sera envoyé avec succès à l’administrateur
du site web et le visiteur recevra une réponse dans son email.
Back-End
Maintenant que le message du visiteur est envoyé à l’administrateur, ce dernier recevra une
notification qui indique que sa boite de messagerie contient un nouveau message.
Figure 33.4: Boite de messagerie

Quand il cliquera sur la notification où bien sur consulter ma messagerie il sera dirigé vers
une interface contenant le message du visiteur, l’administrateur rédigera sa réponse et cliquera
par la suite sur « Envoyer ».Le nombre de message sera donc diminué et la réponse sera
envoyée avec succès au visiteur.
53
Les Publications
Back-End
L’administrateur du site web pourra également poster des informations qui pourront être
téléchargés par les visiteurs du site web , contrairement a la façon classique de poster des
documents et de falloir a chaque fois recharger le document en cas de changements ,
l’administrateur pourra cette fois ci apporter le changement directement depuis un formulaire
se situant dans la console d’administration et changer rapidement le contenu par exemple en
cas de changement de direction pour l’une des filiales de la holding.
Front-End
Le visiteur sera au courant sans exception de toutes les nouveautés de la holding même quand
une direction de celle-ci subit un changement quoi que ce soit, le visiteur cliquera sur la
rubrique « publication » il sera par la suite mené a une interface dont le contenu pourra être
facilement imprimé , ce dernier change depuis la console de l’administration.
▪ L’Organigramme
Back-End
La console d’administration va pouvoir permettre à la holding de faire toutes les

modifications souhaitées sur le message que souhaite transmettre la holding, en donnant la
possibilité de modifier le contenu de l’organigramme (texte et photo).
Figure 34.4: Interface de choix de modification(1)
54
Figure 35.4: Interface des éléments de l'organigramme
Figure 36.4: Interface de modification
55
Figure 37.4: Téléchargement de l'image
En cliquant sur « Divers » l’administrateur sera orienté vers une interface dans laquelle il aura
deux choix, modifier l’organigramme où bien modifier le message que souhaite transmettre la
holding.
Supposons que l’administrateur souhaite apporter un changement à l’organigramme , il

cliquera alors sur « Organigramme » et il sera mené vers la liste des personnes constituant le
conseil d’administration , il pourra alors apporter des changements que ce soit sur la photo où
bien sur le nom et prénom de la personne qui occupe un certain poste.
L’organigramme présente le conseil d’administration de la CDG développement qui est une

instance stratégique qui a pour principale mission d’adopter les grandes orientations qui
déterminent la gestion de la holding. il soutient l’ambition majeure du management, qui
consiste à assurer la croissance durable de la holding et à accroître sa valeur.
Front-End
Le visiteur pourra visualiser l’organigramme du conseil d’administration et toute modification

apportée sur ce dernier en cliquant sur la sous rubrique « Activités » da la rubrique « Nos
Filiales ».
56
Figure 38.4: Organigramme du Conseil d'administration
▪ Message de la holding
Back-End
Figure 39.4: Interface de choix de modification(2)

En cliquant sur « Message de la holding » l’administrateur pourra modifier le message que
souhaite transmettre la holding (image et texte), bien qu’encore une fois, c’est parmis les
lacunes de l’ancien site web de la holding.
57
Front-End
Figure 40.4: Profil de la holding
Le visiteur pourra visualiser le message transmit par la holding et avoir une idée globale de
l’ensemble de ses activités en cliquant sur la sous rubrique « Organisation ».
Conclusion
Dans ce chapitre intitulé « Réalisation » j’ai fais la présentation de l’ensemble des interfaces
réalisé dans le site web vitrine dynamique qui constituent les deux parties...
58
Conclusion générale
L’expérience permet d’améliorer les connaissances pratiques d’un individu, comme elle sert à
tester ses informations théoriques.
Le stage que j’ai effectué au sein de la CDG Développement, m’a donné la possibilité d’être
en contact direct avec le monde de travail, en me donnant une occasion favorable de faire mes
premiers pas dans le domaine professionnel et de préparer mon intégration à la vie
professionnelle et de me se situer sur le marché et de réaliser la grande importance de la
formation théorique avant de passer à la pratique.
Ce stage m’a aussi permis de tester mes compétences dans le domaine informatique, de
démontrer et d’approfondir mon savoir-faire acquis durant les années de ma formation à
l’ENSA de Tétouan, de compléter mes connaissances ainsi que d’améliorer mes compétences
fonctionnelles en ce qui concerne celles d’analyse, de conception, et de programmation.
Pour le moment le site web vitrine dynamique est presque terminé, je souhaite qu’il trouvera
les conditions nécessaires pour entrer en vigueur.
A l’heure où j’écris, le projet est quasiment abouti. Les analyses et la conception du nouveau
site web vitrine sont achevées. Le contenu du site est prêt. La base de données et les interfaces
destinées à l’utilisateur et à l’administrateur ont été réalisées en grande partie.
59
Webographie
▪ Le 08/06/2017
https://projects.spring.io/spring-boot/
▪ Le 08/06/2017
https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/
▪ Le 06/04/2017
http://www.commentcamarche.net/contents/473-cycle-de-vie-d-un-logiciel
▪ Le 10/04/2017
http://laurent-audibert.developpez.com/Cours-UML/?page=diagramme-cas-utilisation
▪ Le 08/06/2017
https://www.prezenz.com/fr/strategie/analyse-des-besoins.php
▪ Le 26/03/2017
http://www.cbg-consult.com/realisation-conception-de-site-internet-liege/analyse-de-vos-besoins-
internet-liege.html
60

Rapportversion Final

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapportversion Final

Transféré par

Droits d'auteur :

Formats disponibles

Mémoire de Projet de fin d’Études

Pour l’obtention du diplôme

Conception et développement d’un site web vitrine

A la mémoire de mon grand père.

A Toute personne qui m'a aidée à réaliser mon projet.

Je dédie ce modeste travail.

Je tiens tout particulièrement à remercier Mr Jaber BOUHDIDI mon encadrant de stage,

Je remercie vivement les membres de jury Mr Yacin CHKOURI et Mme Ghizlane

Je remercie également Mme Hind TLEMCANI chef de projet SI et organisation pour sa

Plus généralement je remercie le corps professoral et administratif de l’Ecole Nationale

Ce projet se situe dans le cadre du développement web, il s’agit de l’étude, la conception et la

CDG – Développement - Développement territorial - Développement web – Conception -

CDG – Developement – Teritorial developement – Web developement – Design –

Liste des acronymes

Table des matières

3. Le diagramme de classe ............................................................................................................ 30

Tables des figures

Figure 1.1: Organigramme de la CDG développement ......................................................................... 17

Figure 37.4: Téléchargement de l'image ............................................................................................... 56

Table des tableaux

Tableau 1.1: Planification des taches .................................................................................................... 19

Le stage de fin d’études en Système d’information et aide à la décision est important,

Ce projet se situe dans le cadre du développement web, il s’agit de l’étude, la conception et la

II. L’organisme d’accueil

CDG Développement est structurée autour des lignes métiers suivantes :

▪ Incubation, Conception et Aménagement ;

Afin d’accompagner la mutation urbaine que connait le Maroc, le groupe CDG

Aménagement & Développement Aménagement & Développement de Infrastructures

Promotion & Développement Services aux Collectivités Territoriales Services

Mme Nada Bouhemou

Communication Suivi des filiales et Financement & Achat & moyens

La deuxième partie intitulée «Analyse de l’existant et expression des besoins » analysera la

Finalement dans la quatrième partie « Réalisation » seront présentées les différentes

4.2. Planification du stage

La phase de planification permet de découper le projet en tâches, de décrire leur enchaînement

dans le temps, d'affecter à chacune une durée.

d’avancement pendant la réalisation du projet, ce que représente la figure suivante :

Figure 2.1: Diagramme de Gantt

Analyse et étude de l’existant 01/03/17 08/03/17

Tableau 1.1: Planification des taches

Compte-tenu du rôle primordial de la CDG développement dans de nombreux secteurs

Figure 3.2: Interface d'accueil du site actuel

Etant données les missions de la CDG Développement (développement territorial au Maroc

▪ les membres de la CDG développement ainsi que de ses différentes filiales ;

4. Analyse des besoins

▪ Les informations que doivent figurer sur le site web ;

Suite à cette réunion est né un cahier des charges.

Le site web réalisé devra permettre à la holding de :

▪ Avoir une organisation et une ergonomie satisfaisante;

Dans le cycle de vie de ce projet, la conception représente une phase primordiale et

2. Le cycle de vie choisit

Conception Tests unitaires

Figure 4.3: Modèle de cycle en V 25

II. Conception détaillée

UML se définit comme un langage de modélisation graphique et

2. Diagramme des cas d’utilisation

2.2. Les éléments du diagramme des cas d’utilisation

Figure 5.3: Exemple de représentation d’un cas d’utilisation

Figure 6.3: Exemple de représentation d’un acteur

2.3. Les acteurs du site web vitrine dynamique de la CDG Développement

2.4. Le diagramme du site web

▪ Diagramme de cas d’utilisation du visiteur

Figure 7.3: Cas d’utilisation du visiteur