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

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

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

(La société Fedala Solutions)

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

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

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

4. Les clients

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

9

(Application web pour les promoteurs immobiliers)

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

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

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

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

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

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

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

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

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

1.5.4. Génération de script SQL de la création de la base de

données :

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

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

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

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

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

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

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

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

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

La liste des réservations effectuées par commercial :

Le commercial peut faire deux actions :

Modifier le montant payé

Supprimer une réservation :

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

Exporter la liste des réservations en fichier Excel

Fichier Excel généré

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

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