Ce document est un rapport de stage au sein de l'entreprise Fedala Solutions, détaillant l'organisation et les services de l'entreprise ainsi que le projet de développement d'une application de gestion pour un promoteur immobilier. Il présente une synthèse des activités menées durant le stage, y compris la conception, le choix technologique, et la méthodologie adoptée, ainsi que les outils utilisés. Ce rapport est divisé en deux parties: la première consacrée à l'organisme d'accueil et la seconde à l'analyse et à la description du projet réalisé.

1. 1
Sommaire
Remerciements ........................................................................................................ 2
Introduction .............................................................................................................. 3
Partie I : L’organisme d’accueil .................................................................................. 4
1. La fiche d’identité de l’entreprise :.................................................................... 5
2. Les Services..................................................................................................... 6
2.1. Charte graphique.......................................................................................... 6
2.2. Impression .................................................................................................... 6
2.3. Création des sites web (Html, Flash, Dynamique, e-Vitrine, e-Commerce,
CMS...) ................................................................................................................ 6
2.4. Solution logiciel (Géstion de stock, facturation, commandes...).................... 6
2.5. Animation et montage vidéo ......................................................................... 7
3. L’organigramme de l’entreprise ........................................................................ 7
4. Les clients ........................................................................................................ 8
Partie II : Projet réalisé............................................................................................... 9
1. Présentation 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 données ............................................................. 17
1.6. Front office............................................................................................... 20
Conclusion.............................................................................................................. 32

2. 2
Remerciements
Je tiens à remercier toutes les personnes qui ont participé de différentes façons
à la réussite de mon stage et plus particulièrement 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é très disponible pour répondre à mes questions.
Monsieur Hamid HANNOUCHY mon encadrant de stage, Développeur senior
qui m'a permis de rentrer dans l'entreprise, m'a accordé de son temps malgré
son planning chargé, ses efforts pour m’intégrer dans l’environnement de la
réalisation des projets informatiques et son dévouement et ses précieux
conseils.
Monsieur Mohamed Ilyass BATI, Chef de projet webmaster à Fedala Solutions
qui a répondu aux questions de mon Projet de stage.
L’équipe pédagogique de L’Ecole Normale Supérieure de l’Enseignement
Technique de Mohammedia (ENSET-M), les professeurs du département
Mathématiques et Informatique, pour leur présence, leurs encouragements
renouvelés et leurs contributions tout au long de cette année.
Tous les employés de l'entreprise toujours disponibles et bienveillants qui m'ont
fait découvrir chaque poste.

3. 3
Introduction
Afin de répondre aux attendes des entreprises marocaines en matière d’offre
de profils de candidats polyvalents dans le domaine des TIC, l’Ecole Normale
Supérieure de l’Enseignement Technique de Mohammedia, à intégrer parmi
ses formations un cycle d’ingénieurs d’état option « Génie du Logiciel et des
Systèmes Informatiques Distribués » (GLSID). Cette filière prépare des
ingénieurs informaticiens généralistes.
Les élèves ingénieurs en première année sont tenus d’effectuer un stage
d’initiation dont l’objectif est d’une part, de leur faire découvrir la réalité du
monde professionnel dans ses dimensions organisationnelle et sociale et,
d’autre part, les confronter à la vie de l’entreprise par l’expérience d’un travail
d’exécution dans le domaine informatique.
A cet effet j’ai passé un stage au sein de l’entreprise Fedala Solution à
Mohammedia durant quatre semaines du 01/07/201 au 15/08/2013. Le
rapport constitue une synthèse du travail réalisé au cours de cette période
Ce stage avait comme objectif :
- Appréhender le fonctionnement de l’entreprise industrielle à travers son
organisation, ses équipements, ses différents services internes, ses
ressources humains, ….
- Observer la vie sociale de l’entreprise (relation humains, horaires, règle
de sécurité…).
- Exercer des activités techniques liées à la formation.
- Etudier un projet ou réaliser une mission.
Cette mission est la réalisation d’une application pour un client « promoteur
immobilier ; OASISBEACH »
Ce rapport présente l’ensemble des travaux que j’ai effectué au cours de mon
stage au sein de la société FEDALA SOLUTIONS.
Ce rapport comprend deux parties, la première partie est consacrée à la
présentation de l’organisme d’accueil et la deuxième à l’analyse, la
conception et à la description du travail effectué.

4. 4
(La société Fedala Solutions)

5. 5
1. La fiche d’identité de l’entreprise :
Nom Fedala Solutions
Statut SARL
Chiffre d’affaire 100 000Dhs
Adresse 525, Oued El Makhazine, Hassania 1.
Mohammedia
Téléphone 0523 32 30 01
Fax 0523 32 01 30
Courriel contact@fedalaSolutions.com
Site Internet http://www.fedalasolutions.com
Plan de la situation de l’entreprise
[En ligne]< https://www.google.fr/maps> (consulté le 10/08/2014)

6. 6
Fedala Solutions est habituée à fournir des solutions spécialisées avec des résultats
exceptionnels pour tous les niveaux de l'entreprise des petites entreprises à des
sociétés.
Ces services sont adaptés pour répondre aux normes professionnelles.
2. Les Services
2.1. Charte graphique
Fedala Solutions est une entreprise de conception graphique fournissant la
conception graphique, développement de marque, conception de logo et de services
de conception des sites Web.
2.2. Impression
Fedala Solutions propose de réaliser la communication imprimée étape par étape, de
la conception à la livraison et propose un vaste choix d'impression. La préparation des
imprimés passe par les phases de réflexion sur le produit, l'écriture de son contenu,
le rassemblement des éléments (images, textes, graphiques, etc.), puis sur l'ébauche
de ce que devrait être le produit fini. Pour ce faire, les responsables réaliserent une
maquette sur papier ou sur écran qui sera proposée au client. Une fois la maquette
validée, ils procéderent à l'impression de la communication de client. Fedala Solutions
propose aussi d'imprimer les propres maquettes de client, de les vérifier et d'apporter
les correctifs nécessaires aux contraintes techniques de l'imprimerie.
2.3. Création des sites web (Html, Flash, Dynamique, e-Vitrine, e-
Commerce, CMS...)
L’agence Fedala Solutions s'est spécialisée dans les techniques de référencement et
propose son savoir-faire en ce domaine étape par étape : étude concurrentielle, choix
des keywords (mots clés) et du contenu du site, suivi approfondie de l'évolution grâce
à des rapports de statistique.
2.4. Solution logiciel (Gestion de stock, facturation, commandes...)
Quels que soient le secteur d'activité de client (bâtiment, négoce, commerce,
artisanat, service, réparation automobile, etc.) et leur besoins (gestion, compatibilité,
paye, etc.), Fedala solution propose une solution réellement adaptée aux spécificités
de l’activité de l’entreprise.

7. 7
2.5. Animation et montage vidéo
Fedala Solutions est spécialisée dans les films d'entreprise et films publicitaires.
(Animation flash, animation 2d, motion design, compositing, montage video, 3d)
3. L’organigramme de l’entreprise
Source: OUALLA Aicha
Date : Juillet 2014
Marouan HAMI
Directeur commercial
Hamid
HANNOUCHY
Développeur senior
Aicha OUALLA
Stagiaire
Amine
MASTOUR
Rédacteur
Sara
BELLEMMIRI
administratrice système
Mohamed
Ilyass BATI
Chef de projet webmaster

8. 8
4. Les clients
[En ligne]< http://www.fedalasolutions.com> (consulté le 10/08/2014)

9. 9
(Application web pour les promoteurs
immobiliers)

10. 10
1. Présentation 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 décisions qui ont des
répercussions d'ordre économique et financier) dans ce cas Chaâbane lil iskane est
une entreprise qui réalise des bâtiments destinés à la vente. Il réunit les financements
nécessaire au projet et en assume les risques. C’est un maître d’ouvrage, il est
l’initiateur le responsable et le pilote de l’opération, celui pour qui est édifié l’ouvrage.
D’où, notre projet consiste à créer une application de gestion adressée aux
commerçants des promoteurs immobiliers et précisément à Magic House, qui leurs
facilite la tâche d’orienter un client, lui donner toutes les informations nécessaires sur
les résidences, les immeubles et les appartements, afin d’effectuer une réservation
d’une ou plusieurs appartements. Cette application est aussi valable pour d’autres
projets (promoteurs immobilier) : c’est-à-dire qu’elle peut être utilisée par d’autres
clients.
1.2. Cycle de vie
Le cycle de vie d'un projet désigne toutes les étapes du développement d'un logiciel,
de sa conception à sa disparition. L'objectif d'un tel découpage est de permettre de
définir des jalons intermédiaires permettant la validation du développement logiciel,
c'est-à-dire la conformité du logiciel avec les besoins exprimés, et la vérification du
processus de développement, c'est-à-dire l'adéquation des méthodes mises en
œuvre.
Dans cette application nous avons choisi de travailler avec le cycle de vie en Y.
Puisqu’il nous a permis d’organiser notre travail, ainsi de réussir la planification de
notre projet de stage de cette année.

11. 11
1.3. Diagramme de Gantt
Est un outil permettant de modéliser la planification de tâches nécessaires à la
réalisation d'un projet. Il s'agit d'un outil inventé en 1917 par Henry L. GANTT.
Dans un diagramme de GANTT chaque tâche est représentée par une ligne, tandis
que les colonnes représentent les jours, semaines ou mois du calendrier selon la
durée du projet. Le temps estimé pour une tâche se modélise par une barre
horizontale dont l'extrémité gauche est positionnée sur la date prévue de démarrage
et l'extrémité droite sur la date prévue de fin de réalisation. Les tâches peuvent
s'enchaîner séquentiellement ou bien être exécutées en parallèle.
Cahier des charges Formation en PHP5 et HTML5
Test d’intégration/unitaire
Etude de faisabilité
Design
Codage
Conception
Formation en MVC

12. 12
 Auto-Formation en PHP5 et HTML5
L’ancienne application étais développée en HTML5 et PHP5, chose qui nous impose
d’utiliser les capacités d’autonomie pour comprendre les nouveautés sur HTML5 et
PHP5.
 Rencontre avec client
Durant le développement de notre projet on à réaliser 4 réunions avec notre client :
1. Expliquer le cahier de charge et les besoins de client
2. Des remarques et des modifications
3. Voir l’avancement de travail
4. Livraison de l’application
1.4. Choix technologique
La première question qui s'est posée pour la réalisation de la partie technique du projet
a été de choisir une architecture pour l'application.
1.4.1. La Méthode Modèle-Vue-Contrôleur (MVC)
L'architecture Modèle/Vue/Contrôleur (MVC) est une architecture et une méthode de
conception qui organise l'Interface Homme-Machine d'une application logicielle (dans
notre cas un site web). Elle consiste à distinguer trois entités distinctes qui sont,
le modèle, la vue et le contrôleur ayant chacun un rôle précis dans l'interface.
 modèle : données (accès et mise à jour)
 vue : interface utilisateur (entrées et sorties)
 contrôleur : gestion des événements et synchronisation
Grossièrement, cela permet une séparation entre les traitements de données et
la présentation.
 Rôle du modèle
Le modèle contient les données manipulées par le programme. Il assure la gestion de
ces données et garantit leur intégrité. Dans le cas typique d'une base de données,
c'est le modèle qui la contient.
Le modèle offre des méthodes pour mettre à jour ces données (insertion suppression,
changement de valeur). Il offre aussi des méthodes pour récupérer ses données. Dans
le cas de données importantes, le modèle peut autoriser plusieurs vues partielles des
données. Si par exemple le programme manipule une base de données pour les
emplois du temps, le modèle peut avoir des méthodes pour avoir, tous les cours d'une
salle, tous les cours d'une personne ou tous les cours d’un groupe de Td.

13. 13
 Rôle de la vue
La vue fait l'interface avec l'utilisateur. Sa première tâche est d'afficher les données
qu'elle a récupérées auprès du modèle. Sa seconde tâche est de recevoir tous les
actions de l'utilisateur (clic de souris, sélection d'une entrées, boutons, etc.). Ses
différents événements sont envoyés au contrôleur.
La vue peut aussi donner plusieurs vues, partielles ou non, des mêmes données. Par
exemple, l'application de conversion de bases a un entier comme unique donnée. Ce
même entier est affiché de multiples façons (en texte dans différentes bases, bit par
bit avec des boutons à cocher, avec des curseurs). La vue peut aussi offrir la
possibilité à l'utilisateur de changer de vue.
 Rôle du contrôleur
Le contrôleur est chargé de la synchronisation du modèle et de la vue. Il reçoit tous
les événements de l'utilisateur et enclenche les actions à effectuer. Si une action
nécessite un changement des données, le contrôleur demande la modification des
données au modèle et ensuite avertit la vue que les données ont changé pour que
celle-ci se mette à jour. Certains événements de l'utilisateur ne concernent pas les
données mais la vue. Dans ce cas, le contrôleur demande à la vue de se modifier.
Dans le cas d'une base de données des emplois du temps. Une action de l'utilisateur
peut être l'entrée (saisie) d'un nouveau cours. Le contrôleur ajoute ce cours au modèle
et demande sa prise en compte par la vue. Une action de l'utilisateur peut aussi être
de sélectionner une nouvelle personne pour visualiser tous ses cours. Ceci me modifie
pas la base des cours mais nécessite simplement que la vue s'adapte et offre à
l'utilisateur une vision des cours de cette personne.
Le contrôleur est souvent scindé en plusieurs parties dont chacune reçoit les
événements d'une partie des composants. En effet si un même objet reçoit les
événements de tous les composants, il lui faut déterminer quelle est l'origine de
chaque événement. Ce tri des événements peut s'avérer fastidieuse et peut conduire
à un code pas très élégant (un énorme switch). C'est pour éviter ce problème que le
contrôleur est réparti en plusieurs objets.

14. 14
Interactions
Les différentes interactions entre le modèle, la vue et le contrôleur sont résumées par
le schéma de la figure suivante.
1.4.2.Design avec le BOOTSTRAP
Afin de bien organiser les interfaces de notre application, c’est-à-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 système 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 ajoutées.
Il existe actuellement deux versions. Nous avons travaillé avec la version la plus
récente : la 3e. Avant d’utiliser le Framework, faut d’abord comprendre le système de
grilles. Une grille est tout simplement un découpage en cellules de mêmes
dimensions. La grille de Bootstrap comporte 12 colonnes et découpée en rangées
(appelées row, parce que tout est en anglais) et colonnes (col), comme à la figure
suivante.
Les fichiers les plus importantes de BOOTSTRAP sont :

15. 15
 bootstrap.css : ou bootstrap.min.css correspond au thème de base (couleurs,
polices, colonnes, icônes…) et se trouve dans le dossier dist/css.
 bootstrap.js : regroupe l’ensemble des plugins proposés 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.
1.4.3.Outils de réalisation
Pour la réalisation de tous les projets web au sein de la société FEDALA SOLUTION,
on utilise les mêmes logiciels à distribution libre : PHP 5, la SGBD MySQL et le serveur
Wampserver.
1.4.3.1. PHP 5
PHP5 n'est pas une révolution mais une évolution. Cette évolution introduit
quelques changements majeurs tout en conservant une compatibilité totale avec la
version antérieure. Les principales nouvelles fonctionnalités sont:
 SQL ite: Un SGBD embarqué dont nous verrons les principales forces et
faiblesses.
 Simple XML: Un nouveau parseur XML très efficace et très simple.
 Un nouveau modèle POO: Le modèle objet complètement remanié, l'ancien
restant correctement interprété par PHP.

16. 16
1.4.3.2. HTML5
Le HTML5 est la dernière version en date du langage de développement web HTML.
Le HTML5 comprend de nouvelles balises et de nouveaux attributs pour les pages
web et ouvre surtout de nouvelles possibilités de développement pour les sites
mobiles.
Avec un navigateur mobile compatible, le HTML5 doit notamment permettre d’utiliser
et d’échanger avec des fonctionnalités propres aux smartphones (carnet d’adresse,
géolocalisation, appareil photo, etc.). Avant le HTML5, seules des applications
mobiles natives pouvaient utiliser ces fonctionnalités.

17. 17
1.4.3.3. L’élaboration de bases de données
Nous réalisons des bases de données
avec mysql.
Pour la création 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 données
Concernant la partie conception de notre projet, nous avons choisi de tracer
notre base de données sous le logiciel powerAMC.
1.5.1.Modèle Conceptuel de données
Le modèle conceptuel des données (MCD) a pour but d'écrire de façon formelle
les données qui seront utilisées par le système d'information. Il s'agit donc
d'une représentation des données, facilement compréhensible, permettant de
décrire le système d'information à l'aide d'entités.

18. 18
1.5.2.Modèle Logique de Données
Le modèle logique des données consiste à décrire la structure de données
utilisée sans faire référence à un langage de programmation. Il s'agit donc de
préciser le type de données utilisées lors des traitements.
Après avoir tracé le MCD, on passe à la génération du modèle logique de
données, et voilà le MLD :
1.5.3.Modèle Physique de données
Le modèle physique des données consiste à implanter une base de données
dans un SGBDR.
A partir du modèle logique de données, j’ai généré le modèle physique de
données, on peut même le générer à partir du MCD précèdent.

19. 19
1.5.4.Génération de script SQL de la création de la base de
données :

20. 20
1.5.5.Importation de la base de données sous PHPMYADMIN
Cette étape consiste à copier le script. SQL dans le phpmyadmin et puis faire
apparaitre notre base de données réaliser sous powerAMC, Voilà la base de
données générée :
1.6. Front office
1.6.1.Page d’accueil
C’est la page principale de notre projet, cette page contient les deux projets de
Chaabane lil iskane Ricofforces et Magic house. Pour accéder à notre projet Magic
house il suffit de cliquer sur le bouton « Magic house ».

21. 21
1.6.2.Situation du plan
Cette page permet de situer localisation du plan sur la carte.
1.6.3.Plan-masse
Cette page contient le plan-masse qui facilite le choix du client, ainsi que la tâche des
commerçants : Elle indique le type (E ou D) et le numéro de chaque immeuble ainsi
que leurs emplacements

22. 22
 galeries des photos des immeubles
1.6.4.Présentation des niveaux
Cette page représente les étages de chaque immeuble : le rez-de-chaussée, première
étage, deuxième, le troisième et le quatrième, comme elle donne quelques
informations à propos de l’étage ; le nom de l’étage, l’état de ce dernier accompagner
du plan-masse pour faciliter l’accédé à d’autre immeuble.

23. 23
 Visualiser le plan masse
1.6.5.Présentation des appartements
Cette page permet aux commerçants de présenter d’une manière claire et simple les
appartements de chaque étage, (chaque étage comprend trois appartements) avec
une galerie des images de l’intérieure de l’appartement.

24. 24
1.6.6.Présentation de l’appartement
Cette page est très intéressante, parce qu’elle représente toute information
nécessaire de chaque appartement, et permet au client de s’informer sur l’état de
chaque appartement afin d’effectuer une réservation à travers le formulaire ainsi
toutes les informations sur cette appartement (surface, Localisation).
D’après cette page l’utilisateur peut exporter les informations de cette appartement en
format PDF il suffit de cliquer sur l’icône PDF

25. 25
L’utilisateur peut exporter toutes les informations d’un appartement choisi en fichier
PDF. Pour cela nous avons choisi la bibliothèque TCPDF pour générer le fichier PDF
qui est une classe PHP, d'utilisation répandue, permettant de créer des documents
PDF. Elle est libre et open source. Voilà le fichier pdf généré après l’exportation des
informations concernant l’appartement N1.
1.6.7.Réserver un appartement
Pour réserver un appartement soit par un responsable (commercial ou administrateur)
il faut cliquer sur l’icône libre si l’appartement est libre mais avant il faut que l’utilisateur
soit connecté en mode commercial ou administrateur.

26. 26
1.6.8.Page d’authentification
L'authentification est la procédure qui consiste à vérifier l'identité d'une personne ou
d’un ordinateur, c’est bien évident que toute application doit être sécurisée, alors j’ai
ajouté une page qui permet aux commerçants et à l’administrateur de s’authentifier en
entrant le login ainsi que le mot de passe valide pour chacun d’entre eux, y’a le profil
administrateur et le profil utilisateur.
1.6.9.Paramétrage (partie commercial & administrateur)
Pour confirmer la réservation le commercial ou l’administrateur doit remplir un
formulaire qui contient deux parties principaux la première concerne les informations
de client (Nom, Prénom, N° la carte d’identité national, Email, Sexe, Adresse,
Téléphone) et l’autre champ concerne la réservation qui contient le type de payement,
la date et la somme d’avance.

27. 27
Pour continuer la réservation il suffit de valider le formulaire on clique sur le bouton
« Réserver ».
Après la validation de la réservation un message sera affiché qui confirme la
réservation. Et si l’utilisateur veut exporter les informations de cette réservation, il suffit
de cliquer sur l’icône PDF pour générer un fichier PDF qui contient toutes les
informations.

28. 28
Le fichier PDF qui contient les informations d’une réservation
1.6.9.1. Les actions de commercial
Le commercial peut gérer et afficher ces réservations dans la partie « mes
réservations »

29. 29
La liste des réservations effectuées par commercial :
Le commercial peut faire deux actions :
 Modifier le montant payé
 Supprimer une réservation :

30. 30
1.6.9.2. Les actions de l’administrateur
L’administrateur peut gérer les réservations effectuées par lui-même ou les autres
commerciaux ainsi gérer la listes des commerciaux à travers la partie
« paramétrages »
 Afficher la liste des réservations effectuées
 Afficher la liste des commerciaux

31. 31
 Exporter la liste des réservations en fichier Excel
 Fichier Excel généré

32. 32
Conclusion
Mon stage m'a beaucoup intéressée, j'ai pu découvrir les différents postes de
l'entreprise et avoir un aperçu global de son fonctionnement. Il m'a permis de
me familiariser avec les différents services et d'avoir une approche réelle 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 expérience au sein de la société FEDALA SOLUTIONS m’a permis
d’assister à toutes les étapes de l’élaboration d’un projet web. Cette expérience
m’a ainsi permis de devoir respecter les délais fixés de la réalisation. Ce stage
m’a surtout fait comprendre beaucoup de choses et m’a appris comment
s’organisé quand on est dans le monde du travail.
Le travail d'équipe est très importants car tous les services sont liés et doivent
communiquer entre eux. Une bonne ambiance règne dans l'entreprise et tout
le personnel a été très coopératif et attentif à mes questions.
Enfin, je tiens à exprimer ma satisfaction d'avoir pu travailler dans un
environnement agréable.

33. 33
Webographie
Site internet proposant l’actualité 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 encyclopédique de Wikipédia :
http://fr.wikipedia.org
Site internet proposant des liens tutoriels et un forum de discussion.
http://fr.openclassrooms.com
Site d'information de développeur web, avec des tutoriels et des références
relatives aux sujets de développement web tels que : HTML, CSS, PHP, SQL,
JavaScript et JQuery
http://www.w3schools.com