Sommaire

Remerciements2Introduction3Partie I: Lorganisme daccueil41.La fiche didentit de lentreprise:52.Les Services62.1. Charte graphique62.2. Impression62.3. Cration des sites web (Html, Flash, Dynamique, e-Vitrine, e-Commerce, CMS...)62.4. Solution logiciel (Gstion de stock, facturation, commandes...)62.5. Animation et montage vido73.Lorganigramme de lentreprise74.Les clients8Partie II: Projet ralis91.Prsentation de projet101.1.Cahier de charge101.2.Cycle de vie101.3.Diagramme de Gantt111.4.Choix technologique121.5.Conception de base de donnes171.6.Front office20Conclusion32

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 renouvels et leurs contributions tout au long de cette anne.

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 lentreprise (relation humains, horaires, rgle de scurit). - Exercer des activits techniques lies la formation.- Etudier un projet ou raliser une mission. Cette mission est la ralisation dune application pour un clientpromoteur immobilier; OASISBEACHCe rapport prsente lensemble des travaux que jai effectu au cours de mon stage au sein de la socit FEDALA SOLUTIONS. 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:NomFedala Solutions

StatutSARL

Chiffre daffaire100000Dhs

Adresse525, Oued El Makhazine, Hassania 1. Mohammedia

Tlphone0523 32 30 01

Fax 0523 32 01 30

Courrielcontact@fedalaSolutions.com

Site Internethttp://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.

2.5. Animation et montage vido

Fedala Solutions est spcialise dans les films d'entreprise et films publicitaires.(Animation flash, animation 2d, motion design, compositing, montage video, 3d)

3. Lorganigramme de lentreprise

Source: OUALLA AichaDate: 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 projet1.1. Cahier de charge

Un promoteur immeuble, est un agent conomique (unepersonne 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 lavalidationdu dveloppement logiciel, c'est--dire la conformit du logiciel avec les besoins exprims, et lavrificationdu 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.

CodageCahier des chargesFormation en PHP5 et HTML5DesignFormation en MVCConceptionEtude de faisabilit

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.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 HTML5Lancienne 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. Expliquer le cahier de charge et les besoins de client2. Des remarques et des modifications3. Voir lavancement de travail4. Livraison de lapplication

1.4. Choix technologiqueLa 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'architectureModle/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 distinguer trois entits distinctes qui sont, lemodle, lavueet lecontrleur 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 synchronisationGrossirement, cela permet une sparation entre les traitements de donnes et la prsentation. Rle du modleLe 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 contrleurLe contrleur est charg de la synchronisation du modle et de la vue. Il reoit tous les vnements de l'utilisateur et enclenche les actions 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 normeswitch). C'est pour viter ce problme que le contrleur est rparti en plusieurs objets.

InteractionsLes 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 BOOTSTRAPAfin 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 (appelesrow, parce que tout est en anglais) et colonnes (col), comme la figure suivante.Les fichiers les plus importantes de BOOTSTRAP sont: 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 dossierdist/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.

1.4.3.2. HTML5Le 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 desapplications mobiles nativespouvaient utiliser ces fonctionnalits.

1.4.3.3. Llaboration de bases de donnes

Nous ralisons des bases de donnes avec mysql.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 donnesConcernant 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. 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.

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

1.6.1. Page daccueilCest 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 planCette page permet de situer localisation du plan sur la carte.

1.6.3. Plan-masseCette 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

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

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.

1.6.6. Prsentation de lappartementCette 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).

Daprs cette page lutilisateur peut exporter les informations de cette appartement en format PDF il suffit de cliquer sur licne PDFLutilisateur 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.

1.6.7. Rserver 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.

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.

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.

Le fichier PDF qui contient les informations dune rservation

1.6.9.1. Les actions de commercialLe commercial peut grer et afficher ces rservations dans la partie mes rservations

La liste des rservations effectues par commercial:

Le commercial peut faire deux actions: Modifier le montant pay

Supprimer une rservation:

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

Afficher la liste des rservations effectues

Afficher la liste des commerciaux

Exporter la liste des rservations en fichier Excel

Fichier Excel gnr

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 ma permis dassister toutes les tapes de llaboration dun 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.

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 JQueryhttp://www.w3schools.com

3