Sommaire

Remerciements........................................................................................2
Introduction..............................................................................................3
Partie I : Lorganisme daccueil...................................................................4
1. La fiche didentit de lentreprise :.....................................................5
2. Les Services........................................................................................6
2.1. Charte graphique............................................................................6
2.2. Impression......................................................................................6
2.3. Cration des sites web (Html, Flash, Dynamique, e-Vitrine, eCommerce, CMS...)................................................................................6
2.4. Solution logiciel (Gstion de stock, facturation, commandes...).....6
2.5. Animation et montage vido..........................................................7
3. Lorganigramme de lentreprise.........................................................7
4. Les clients...........................................................................................8
Partie II : Projet ralis................................................................................9
1. Prsentation de projet......................................................................10
1.1. Cahier de charge.........................................................................10
1.2. Cycle de vie................................................................................10
1.3. Diagramme de Gantt..................................................................11
1.4. Choix technologique...................................................................12
1.5. Conception de base de donnes.................................................17
1.6. Front office..................................................................................20
Conclusion...............................................................................................32

Remerciements
Je tiens remercier toutes les personnes qui ont particip de
diffrentes

faons

la

russite

de

mon

stage

et

plus

particulirement les personnes que je cite ci-dessous.

Monsieur Marwan HAMI, Directeur commercial de l'entreprise

FEDALA SOLUTIONS qui a bien voulu m'accueillir comme stagiaire
dans son entreprise et s'est montr trs disponible pour rpondre
mes questions.

Monsieur Hamid HANNOUCHY mon encadrant de stage, Dveloppeur

senior qui m'a permis de rentrer dans l'entreprise, m'a accord de
son temps malgr son planning charg, ses efforts pour mintgrer
dans lenvironnement de la ralisation des projets informatiques et
son dvouement et ses prcieux conseils.

Monsieur Mohamed Ilyass BATI, Chef de projet webmaster Fedala

Solutions qui a rpondu aux questions de mon Projet de stage.

Lquipe pdagogique de

LEcole

Normale

Suprieure

de

lEnseignement Technique

de

Mohammedia

(ENSET-M),

les

professeurs du dpartement Mathmatiques et Informatique, pour

leur

prsence,

leurs

encouragements

contributions tout au long de cette anne.

renouvels

et

leurs

Tous

les

employs

de

l'entreprise

toujours

disponibles

et

bienveillants qui m'ont fait dcouvrir chaque poste.

Introduction
Afin de rpondre aux attendes des entreprises marocaines en
matire doffre de profils de candidats polyvalents dans le domaine
des TIC, lEcole Normale Suprieure de lEnseignement Technique de
Mohammedia, intgrer parmi ses formations un cycle dingnieurs
dtat option Gnie du Logiciel et des Systmes Informatiques
Distribus (GLSID). Cette filire prpare des ingnieurs
informaticiens gnralistes.
Les lves ingnieurs en premire anne sont tenus deffectuer un
stage dinitiation dont lobjectif est dune part, de leur faire
dcouvrir la ralit du monde professionnel dans ses dimensions
organisationnelle et sociale et, dautre part, les confronter la vie
de lentreprise par lexprience dun travail dexcution dans le
domaine informatique.
A cet effet jai pass un stage au sein de lentreprise Fedala
Solution Mohammedia durant quatre semaines du 01/07/201 au
15/08/2013. Le rapport constitue une synthse du travail ralis au
cours de cette priode
Ce stage avait comme objectif :
- Apprhender le fonctionnement de lentreprise industrielle
travers son organisation, ses quipements, ses diffrents
services internes, ses ressources humains, .
- Observer la vie sociale de
horaires, rgle de scurit).

lentreprise

(relation

humains,

- Exercer des activits techniques lies la formation.

- Etudier un projet ou raliser une mission.
Cette mission est la ralisation dune application
client promoteur immobilier ; OASISBEACH

pour

un

Ce rapport prsente lensemble des travaux que jai effectu

au

cours de mon stage au sein de la socit FEDALA SOLUTIONS.

3

Ce rapport comprend deux parties, la premire partie est

consacre la prsentation de lorganisme daccueil et la
deuxime lanalyse, la conception et la description du travail
effectu.

Partie I :
Lorganisme
daccueil
(La socit Fedala Solutions)

1. La fiche didentit de lentreprise :

Nom
Statut
Chiffre daffaire
Adresse
Tlphone
Fax
Courriel
Site Internet

Fedala Solutions
SARL
100 000Dhs
525, Oued El Makhazine, Hassania 1.
Mohammedia
0523 32 30 01
0523 32 01 30
contact@fedalaSolutions.com
http://www.fedalasolutions.com

Plan de la situation de lentreprise

[En ligne]< https://www.google.fr/maps> (consult le 10/08/2014)

Fedala Solutions est habitue fournir des solutions spcialises avec des
rsultats exceptionnels pour tous les niveaux de l'entreprise des petites
entreprises des socits.
Ces services sont adapts pour rpondre aux normes professionnelles.

2. Les Services
2.1. Charte graphique
Fedala Solutions est une entreprise de conception graphique fournissant la
conception graphique, dveloppement de marque, conception de logo et
de services de conception des sites Web.

2.2. Impression
Fedala Solutions propose de raliser la communication imprime tape
par tape, de la conception la livraison et propose un vaste choix
d'impression. La prparation des imprims passe par les phases de
rflexion sur le produit, l'criture de son contenu, le rassemblement des
lments (images, textes, graphiques, etc.), puis sur l'bauche de ce que
devrait tre le produit fini. Pour ce faire, les responsables raliserent une
maquette sur papier ou sur cran qui sera propose au client. Une fois la
maquette valide, ils procderent l'impression de la communication de
client. Fedala Solutions propose aussi d'imprimer les propres maquettes
de client, de les vrifier et d'apporter les correctifs ncessaires aux
contraintes techniques de l'imprimerie.

2.3. Cration des sites web (Html, Flash, Dynamique, e-Vitrine,

e-Commerce, CMS...)
Lagence Fedala Solutions s'est spcialise dans les techniques de
rfrencement et propose son savoir-faire en ce domaine tape par
tape : tude concurrentielle, choix des keywords (mots cls) et du
contenu du site, suivi approfondie de l'volution grce des rapports de
statistique.

2.4. Solution logiciel (Gestion de stock, facturation,

commandes...)
Quels que soient le secteur d'activit de client (btiment, ngoce,
commerce, artisanat, service, rparation automobile, etc.) et leur besoins
(gestion, compatibilit, paye, etc.), Fedala solution propose une solution
rellement adapte aux spcificits de lactivit de lentreprise.
6

2.5. Animation et montage vido

Fedala Solutions est spcialise dans les films d'entreprise et films
publicitaires.

(Animation flash, animation

montage video, 3d)

2d,

motion

design,

compositing,

3. Lorganigramme de lentreprise

Marouan HAMI
Directeur
commercial

Mohamed
Ilyass BATI
Chef de projet
webmaster

Hamid
HANNOUCHY

Dveloppeur
senior

Amine
MASTOUR

Rdacteur

Sara
BELLEMMIRI
administratrice
systme

Aicha OUALLA
Stagiaire
Source: OUALLA
Aicha
Date : Juillet 2014

4. Les clients

[En ligne]< http://www.fedalasolutions.com> (consult le

10/08/2014)

Partie II : Projet
ralis
(Application web pour les
promoteurs immobiliers)

1. Prsentation de projet
1.1.
Cahier de charge
Un promoteur immeuble, est un agent conomique (une personne
physique, une entreprise, un pays ou une collectivit publique prenant des
dcisions qui ont des rpercussions d'ordre conomique et financier) dans
ce cas Chabane lil iskane est une entreprise qui ralise des btiments
destins la vente. Il runit les financements ncessaire au projet et en
assume les risques. Cest un matre douvrage, il est linitiateur le
responsable et le pilote de lopration, celui pour qui est difi louvrage.
Do, notre projet consiste crer une application de gestion adresse
aux commerants des promoteurs immobiliers et prcisment Magic
House, qui leurs facilite la tche dorienter un client, lui donner toutes les
informations ncessaires sur les rsidences, les immeubles et les
appartements, afin deffectuer une rservation dune ou plusieurs
appartements. Cette application est aussi valable pour dautres projets
(promoteurs immobilier) : cest--dire quelle peut tre utilise par
dautres clients.

1.2.

Cycle de vie

Le cycle de vie d'un projet dsigne toutes les tapes du dveloppement

d'un logiciel, de sa conception sa disparition. L'objectif d'un tel
dcoupage est de permettre de dfinir des jalons intermdiaires
permettant la validation du dveloppement logiciel, c'est--dire la
conformit du logiciel avec les besoins exprims, et la vrification du
processus de dveloppement, c'est--dire l'adquation des mthodes
mises en uvre.
Dans cette application nous avons choisi de travailler avec le cycle de vie
en Y. Puisquil nous a permis dorganiser notre travail, ainsi de russir la
planification de notre projet de stage de cette anne.

10

Cahier des charges

Formation en PHP5 et
HTML5

Etude de faisabilit

Formation en MVC

Concepti
on
Design

Codage

Test dintgration/unitaire

1.3.

Diagramme de Gantt

Est un outil permettant de modliser la planification de tches ncessaires

la ralisation d'un projet. Il s'agit d'un outil invent en 1917 par Henry L.
GANTT.

11

Dans un diagramme de GANTT chaque tche est reprsente par une

ligne, tandis que les colonnes reprsentent les jours, semaines ou mois du
calendrier selon la dure du projet. Le temps estim pour une tche se
modlise par une barre horizontale dont l'extrmit gauche est
positionne sur la date prvue de dmarrage et l'extrmit droite sur la
date prvue de fin de ralisation. Les tches peuvent s'enchaner
squentiellement ou bien tre excutes en parallle.

Auto-Formation en PHP5 et HTML5

Lancienne application tais dveloppe en HTML5 et PHP5, chose qui

nous impose dutiliser les capacits dautonomie pour comprendre les
nouveauts sur HTML5 et PHP5.

Rencontre avec client

Durant le dveloppement de notre projet on raliser 4 runions avec

notre client :
1.
2.
3.
4.

Expliquer le cahier de charge et les besoins de client

Des remarques et des modifications
Voir lavancement de travail
Livraison de lapplication

1.4.

Choix technologique

La premire question qui s'est pose pour la ralisation de la partie

technique du projet a t de choisir une architecture pour l'application.

1.4.1.

La Mthode Modle-Vue-Contrleur (MVC)

L'architecture Modle/Vue/Contrleur (MVC) est une architecture et une

mthode de conception qui organise l'Interface Homme-Machine d'une
application logicielle (dans notre cas un site web). Elle consiste

12

distinguer trois entits distinctes qui sont, le modle,

le contrleur ayant chacun un rle prcis dans l'interface.

modle : donnes (accs et mise jour)

vue : interface utilisateur (entres et sorties)

contrleur : gestion des vnements et synchronisation

la vue et

Grossirement, cela permet une sparation entre les traitements de

donnes et la prsentation.

Rle du modle
Le modle contient les donnes manipules par le programme. Il assure la
gestion de ces donnes et garantit leur intgrit. Dans le cas typique
d'une base de donnes, c'est le modle qui la contient.
Le modle offre des mthodes pour mettre jour ces donnes (insertion
suppression, changement de valeur). Il offre aussi des mthodes pour
rcuprer ses donnes. Dans le cas de donnes importantes, le modle
peut autoriser plusieurs vues partielles des donnes. Si par exemple le
programme manipule une base de donnes pour les emplois du temps, le
modle peut avoir des mthodes pour avoir, tous les cours d'une salle,
tous les cours d'une personne ou tous les cours dun groupe de Td.

Rle de la vue
La vue fait l'interface avec l'utilisateur. Sa premire tche est d'afficher les
donnes qu'elle a rcupres auprs du modle. Sa seconde tche est de
recevoir tous les actions de l'utilisateur (clic de souris, slection d'une
entres, boutons, etc.). Ses diffrents vnements sont envoys au
contrleur.
La vue peut aussi donner plusieurs vues, partielles ou non, des mmes
donnes. Par exemple, l'application de conversion de bases a un entier
comme unique donne. Ce mme entier est affich de multiples faons
(en texte dans diffrentes bases, bit par bit avec des boutons cocher,
avec des curseurs). La vue peut aussi offrir la possibilit l'utilisateur de
changer de vue.

Rle du contrleur
Le contrleur est charg de la synchronisation du modle et de la vue. Il
reoit tous les vnements de l'utilisateur et enclenche les actions
13

effectuer. Si une action ncessite un changement des donnes, le

contrleur demande la modification des donnes au modle et ensuite
avertit la vue que les donnes ont chang pour que celle-ci se mette
jour. Certains vnements de l'utilisateur ne concernent pas les donnes
mais la vue. Dans ce cas, le contrleur demande la vue de se modifier.
Dans le cas d'une base de donnes des emplois du temps. Une action de
l'utilisateur peut tre l'entre (saisie) d'un nouveau cours. Le contrleur
ajoute ce cours au modle et demande sa prise en compte par la vue. Une
action de l'utilisateur peut aussi tre de slectionner une nouvelle
personne pour visualiser tous ses cours. Ceci me modifie pas la base des
cours mais ncessite simplement que la vue s'adapte et offre
l'utilisateur une vision des cours de cette personne.
Le contrleur est souvent scind en plusieurs parties dont chacune reoit
les vnements d'une partie des composants. En effet si un mme objet
reoit les vnements de tous les composants, il lui faut dterminer quelle
est l'origine de chaque vnement. Ce tri des vnements peut s'avrer
fastidieuse et peut conduire un code pas trs lgant (un
norme switch). C'est pour viter ce problme que le contrleur est
rparti en plusieurs objets.

Interactions

14

Les diffrentes interactions entre le modle, la vue et le contrleur sont

rsumes par le schma de la figure suivante.

1.4.2.

Design avec le BOOTSTRAP

Afin de bien organiser les interfaces de notre application, cest--dire la

partie vue de notre projet, nous avons travaill avec le BOOTSTRAP, qui
est un framework CSS, mais pas seulement, puisqu'il embarque
galement des composants HTML et JavaScript. Il comporte un systme
de grille simple et efficace pour mettre en ordre l'aspect visuel d'une page
web. Il apporte du style pour les boutons, les formulaires, la navigation Il
permet ainsi de concevoir un site web rapidement et avec peu de lignes
de code ajoutes.
Il existe actuellement deux versions. Nous avons travaill avec la version
la plus rcente : la 3e. Avant dutiliser le Framework, faut dabord
comprendre le systme de grilles. Une grille est tout simplement un
dcoupage en cellules de mmes dimensions. La grille de Bootstrap
comporte 12 colonnes et dcoupe en ranges (appeles row, parce que
tout est en anglais) et colonnes (col), comme la figure suivante.
Les fichiers les plus importantes de BOOTSTRAP sont :

15

bootstrap.css : ou bootstrap.min.css correspond au thme de base

(couleurs, polices, colonnes, icnes) et se trouve dans le dossier

dist/css.
bootstrap.js : regroupe lensemble des plugins proposs par
Bootsrap (carrousel, modales, alertes). Ce fichier se trouve dans le
dossier dist/js. Et on peut inclure individuellement chaque plugin
propos (dans le dossier js la racine du dossier Bootstrap). Aussi

faut-il inclure jQuery pour faire fonctionner les plugins JavaScript.

Bootstrap 3 est cod en HTML5, lHTML 5 nest pas interprt
correctement sur Internet Explorer infrieur la version 9. Pour
rsoudre ce problme, il vous faudra inclure le plugin html5shiv.js.
Aussi lappel au fichier respond.min.js.
Bootstrap propose un CSS dj complet. Il met disposition
un

certain

nombre

de

classes

qui

permet

de

styler

intgralement tous les lments de lapplication.

1.4.3. Outils de ralisation

Pour la ralisation de tous les projets web au sein de la socit FEDALA
SOLUTION, on utilise les mmes logiciels distribution libre : PHP 5, la
SGBD MySQL et le serveur Wampserver.

1.4.3.1.

PHP 5

PHP5 n'est pas une rvolution mais une volution. Cette volution
introduit quelques changements majeurs tout en conservant une
compatibilit totale avec la version antrieure. Les principales nouvelles
fonctionnalits sont:

SQL ite: Un SGBD embarqu dont nous verrons les principales forces
et faiblesses.
Simple XML: Un nouveau parseur XML trs efficace et trs simple.
Un nouveau modle POO: Le modle objet compltement remani,
l'ancien restant correctement interprt par PHP.

16

1.4.3.2.

HTML5

Le HTML5 est la dernire version en date du langage de dveloppement

web HTML. Le HTML5 comprend de nouvelles balises et de nouveaux
attributs pour les pages web et ouvre surtout de nouvelles possibilits de
dveloppement pour les sites mobiles.
Avec un navigateur mobile compatible, le HTML5 doit notamment
permettre dutiliser et dchanger avec des fonctionnalits propres aux
smartphones (carnet dadresse, golocalisation, appareil photo, etc.).
Avant le HTML5, seules des applications mobiles natives pouvaient utiliser
ces fonctionnalits.

1.4.3.3.

Llaboration de bases de donnes

Nous ralisons des bases de donnes avec mysql.

17

Pour la cration de pages dynamiques, nous avons besoin d'un serveur.

Aussi nous avons choisi la technologie de Wampserver pour installer
Apache, Php, PhpMyAdmin et MySql sur nos machines.

1.5.

Conception de base de donnes

Concernant la partie conception de notre projet, nous avons choisi de tracer

notre base de donnes sous le logiciel powerAMC.

1.5.1. Modle Conceptuel de donnes

Le modle conceptuel des donnes (MCD) a pour but d'crire de faon
formelle les donnes qui seront utilises par le systme d'information. Il
s'agit donc d'une reprsentation des donnes, facilement comprhensible,
permettant de dcrire le systme d'information l'aide d'entits.

1.5.2. Modle Logique de Donnes

Le modle logique des donnes consiste dcrire la structure de donnes
utilise sans faire rfrence un langage de programmation. Il s'agit donc de
prciser le type de donnes utilises lors des traitements.

18

Aprs avoir trac le MCD, on passe la gnration du modle logique de

donnes, et voil le MLD :

1.5.3. Modle Physique de donnes

Le modle physique des donnes consiste implanter une base de donnes
dans un SGBDR.
A partir du modle logique de donnes, jai gnr le modle physique de
donnes, on peut mme le gnrer partir du MCD prcdent.

19

1.5.4. Gnration de script SQL de la cration de la base de

donnes :

1.5.5. Importation de la base de donnes sous PHPMYADMIN

Cette tape consiste copier le script. SQL dans le phpmyadmin et puis faire
apparaitre notre base de donnes raliser sous powerAMC, Voil la base de
donnes gnre :

1.6.

Front office

20

1.6.1. Page daccueil

Cest la page principale de notre projet, cette page contient les deux
projets de Chaabane lil iskane Ricofforces et Magic house. Pour accder

notre projet Magic house il suffit de cliquer sur le bouton Magic house .

1.6.2. Situation du plan

Cette page permet de situer localisation du plan sur la carte.

21

1.6.3. Plan-masse

Cette page contient le plan-masse qui facilite le choix du client, ainsi que
la tche des commerants : Elle indique le type (E ou D) et le numro de
chaque immeuble ainsi que leurs emplacements

galeries des photos des immeubles

1.6.4. Prsentation des niveaux

22

Cette page reprsente les tages de chaque immeuble : le rez-de-

chausse, premire tage, deuxime, le troisime et le quatrime, comme

elle donne quelques informations propos de ltage ; le nom de ltage,
ltat de ce dernier accompagner du plan-masse pour faciliter laccd
dautre immeuble.

Visualiser le plan masse

23

1.6.5. Prsentation des appartements

Cette page permet aux commerants de prsenter dune manire claire et
simple les appartements de chaque tage, (chaque tage comprend trois
appartements) avec une galerie des images de lintrieure de
lappartement.

24

1.6.6. Prsentation de lappartement

Cette page est trs intressante, parce quelle reprsente

toute

information ncessaire de chaque appartement, et permet au client de

sinformer sur ltat de chaque appartement

afin deffectuer une

rservation travers le formulaire ainsi toutes les informations sur cette

appartement (surface, Localisation).

25

Daprs cette page lutilisateur peut exporter les informations de cette

appartement en format PDF il suffit de cliquer sur licne PDF
Lutilisateur peut exporter toutes les informations dun appartement choisi
en fichier PDF. Pour cela nous avons choisi la bibliothque TCPDF pour gnrer
le fichier PDF qui est une classe PHP, d'utilisation rpandue, permettant de crer
des documents PDF. Elle est libre et open source. Voil le fichier pdf gnr aprs
lexportation des informations concernant lappartement N1.

26

1.6.7.
r

Rserve
un

appartement
Pour rserver un appartement soit par un responsable (commercial ou
administrateur) il faut cliquer sur licne libre si lappartement est libre
mais avant il faut que lutilisateur soit connect en mode commercial ou
administrateur.

27

1.6.8. Page dauthentification

L'authentification est la procdure qui consiste vrifier l'identit d'une
personne ou dun ordinateur, cest bien vident que toute application doit
tre scurise, alors jai ajout une page qui permet aux commerants et
ladministrateur de sauthentifier en entrant le login ainsi que le mot de
passe valide pour chacun dentre eux, ya le profil administrateur et le
profil utilisateur.

1.6.9. Paramtrage (partie commercial & administrateur)

Pour confirmer la rservation le commercial ou ladministrateur doit
remplir un formulaire qui contient deux parties principaux la premire
concerne les informations de client (Nom, Prnom, N la carte didentit
national, Email, Sexe, Adresse, Tlphone) et lautre champ concerne la
rservation qui contient le type de payement, la date et la somme
davance.
28

Pour continuer la rservation il suffit de valider le formulaire on clique sur

le bouton Rserver .
Aprs la validation de la rservation un message sera affich qui confirme
la rservation. Et si lutilisateur veut exporter les informations de cette
rservation, il suffit de cliquer sur licne PDF pour gnrer un fichier PDF
qui contient toutes les informations.

29

Le fichier
qui
contient

PDF
les

informations dune rservation

30

1.6.9.1.

Les actions de commercial

Le commercial peut grer et afficher ces rservations dans la partie mes

rservations

La liste des rservations effectues par commercial :

31

Le commercial peut faire deux actions :

Modifier le montant pay

Supprimer

une
rservation :

1.6.9.2.
de

Les actions

ladministrateur
Ladministrateur peut grer les rservations effectues par lui-mme ou
les autres commerciaux ainsi grer la listes des commerciaux travers la
partie paramtrages

32

Afficher la liste des rservations effectues

Afficher la liste des commerciaux

33

Exporter la liste des rservations en fichier Excel

Fichier Excel gnr

34

Conclusion
Mon stage m'a beaucoup intresse, j'ai pu dcouvrir les diffrents
postes

de

l'entreprise

et

avoir

un

aperu

global

de

son

fonctionnement. Il m'a permis de me familiariser avec les diffrents

services et d'avoir une approche relle du monde de travail. J'ai pu
faire le rapprochement entre ce que j'avais appris en cours et ce qui
se passe vraiment dans l'entreprise, ce qui n'a pas toujours t
facile car chaque entreprise est un cas particulier.
Mon exprience au sein de la socit FEDALA SOLUTIONS
permis dassister toutes les tapes de llaboration dun

ma
projet

web. Cette exprience ma ainsi permis de devoir respecter les

dlais fixs de la ralisation. Ce stage ma surtout fait comprendre
beaucoup de choses et ma appris comment sorganis quand on est
dans le monde du travail.
Le travail d'quipe est trs importants car tous les services sont lis
et doivent communiquer entre eux. Une bonne ambiance rgne dans
l'entreprise et tout le personnel a t trs coopratif et attentif
mes questions.
Enfin, je tiens exprimer ma satisfaction d'avoir pu travailler dans
un environnement agrable.

35

Webographie
Site internet proposant lactualit des langages, des liens tutoriels et
un forum de discussion.
http://www.developpez.com

Site Internet de la documentation en ligne de PHP disponible ici :

http://www.php.net

Site Internet encyclopdique de Wikipdia :

http://fr.wikipedia.org

Site internet proposant des liens tutoriels et un forum de discussion.

http://fr.openclassrooms.com

Site d'information de dveloppeur web, avec des tutoriels et des

rfrences relatives aux sujets de dveloppement web tels que :
HTML, CSS, PHP, SQL, JavaScript et JQuery
http://www.w3schools.com

36