Licence pro Systèmes Informatiques et logiciels Nouvelles Technologies de L informatique Rapport de projet tuteuré Application Exprihme Promotion 2015 Travail réalisé par : Yacine AMRANE Ramzi MESSIS Reddy NTIE Jouran ROBACHE Encadreur : Mr Denis Alessandra Année Universitaire 2015-2016 1
Remerciement Avant toute chose, il nous paraît opportun de remercier tous ceux qui ont contribué à ce projet par leur implication et leur sens de responsabilité. En premier lieu notre tuteur DENIS ALESSANDRA, notre commanditaire monsieur Jean Claude RAYNAL et monsieur Armand ROTEREAU qui n ont pas cessé de nous encourager tout au long du projet ainsi pour leur générosité. L équipe en charge de ce projet est composée de quatre étudiants en licence professionnelle parcours nouvelles Technologies de l informatique. Nous tenons à remercier nos professeurs de nous avoir aidés tout au long de ce travail, de nous avoir incités à travailler en mettant à notre disposition leurs expériences et leurs compétences, les réponses aux questions posées à diverses reprises. Cela nous a favorablement permis d entreprendre pleinement les démarches établies. Un grand merci à toute l équipe pédagogique de la licence SIL-NTI et les intervenants professionnels responsables de la formation. 2
SOMMAIRE INTRODUCTION 5 I. Présentation du projet..6 1.1 Contexte du projet.6 1.2 Outils et environnement de développement 6 1.3 Choix technologique..7 1.4 Le support de développement.13 II. Organisation et méthodologie du travail.13 II.1 Analyse et indentification des besoins fonctionnels..13 II.2 Représentation générale du projet EXPRIHME 14 III. Etude des concepts théorique sur l application EXPRIHME...14 III.1 C est quoi OHM.14 III.2 C est quoi OHM-BMP...15 III.3 Les partenaires...15 III.4 Qualité de l air 15 III.5 Territoire des enfants.16 III.6 Biodiversité..16 III.7 Histoire du territoire 16 IV. Développement.17 IV.1 Répartition du travail.17 IV. 2 Base de données existante.18 IV. 3 Nouvelle base de donnée..18 IV.4 Fonctionnalités globales.20 V. Les étapes ou les niveau..20 V.1 Niveau 0..20 V.2 Niveau 1..21 V.3 Niveau 2..22 V.4 Niveau 2.N..23 V.5 Difficultés rencontrées..24 V.6 Travail fait 24 V.7.Cartes géographiques avec arcgis 24 3
V.8 Le travail restant à faire 26 V.9 Bilan sur la gestion du projet...26 VI. DIAGRAMME DE GANTT...26 VI.1 DIAGRAMME DE GANTT PREVIOSIONNEL.. 26 VI.2 DIAGRAMME DE GANTT REEL...27 VII. Conclusion 28 4
Introduction Nous allons travailler sur un projet nommé Création d'une interface web «EXPRIHME» permettant de présenter les travaux conduits au sein d un observatoire via des cartes, des photos, des vidéos et du texte. Dans le cadre de notre formation Licence Professionnelle (SILNTI) du Département informatique de l Université d Aix- Marseille. À travers ce projet, nous allons travailler et maitre en place une interface accessible via le web qui devra permettre à un interne de faire la présentation de différentes études réalisées par l entreprise. Pour bien amener notre projet, nous avons utilisé différentes technologies dans le monde de web. 5
1. Présentation du projet Notre projet a été réalisé dans le but de la mise en œuvre de tous les acquis technologiques, pédagogiques et les compétences développées le long de notre formation, enfin d obtenir le diplôme de Licence Professionnelle Nouvelle Technologie de l informatique (SILNTI). 1.1 Contexte du projet La mission de l OHM-BMP réside dans la mise à disposition pour les chercheurs des données et des résultats ainsi produits et dans leur communication au grand public. Ainsi, depuis 2008, une cinquantaine d études ont été conduites par près d une centaine de chercheurs d horizons disciplinaires variés. Jusqu à présent, la restitution de ces études se fait à travers l application digitale de l OHM-BMP mais pas sur le web. C est ainsi que notre commanditaire nous a confié la tâche de réaliser une telle application mais en version web. 1.2 Outils environnement de développement Dans cette étape nous allons illustrer et appuyer nos choix technologiques et notre environnement de travail. 6
1.3 Choix technologique Dans cette partie nous allons définir, justifier nos choix technologiques et montrer l impact qu à chacune d elle sur notre projet. Choix Technologique Framework Symfony PostgreSQl Symfony est un Framework php, qu est-ce qu un Framework? Le mot «Framework» provient de l'anglais «frame» qui veut dire «cadre» en français, et «work» qui signifie «travail». Littéralement, c'est donc un «cadre de travail». Concrètement, c'est un ensemble de composants qui sert à créer les fondations, l'architecture et les grandes lignes d'un logiciel. Il existe des centaines de Framework couvrant la plupart des langages de programmation. Ils sont destinés au développement de sites web ou bien à la conception de logiciels. L'objectif premier d'un Framework est d'améliorer la productivité des développeurs qui l'utilisent. Architecture MVC Symfony2 respecte l architecture MVC. Qu est-ce que l architecture MVC? MVC signifie «Modèle / Vue / Contrôleur». C'est un découpage très répandu pour développer les sites Internet, car il sépare les couches selon leur logique propre : Le Contrôleur (ou Controller) : son rôle est de générer la réponse à la requête HTTP demandée par notre visiteur. Il est la couche qui se charge d'analyser et de traiter la requête de l'utilisateur. Le contrôleur contient la logique de notre site Internet et va se contenter «d'utiliser» les autres composants : les modèles et les vues. Concrètement, un contrôleur va récupérer, par exemple, les informations sur l'utilisateur courant, vérifier qu'il a le droit de modifier tel article, récupérer cet article et demander la page du formulaire d'édition de l'article. 7
Le Modèle (ou Model) : son rôle est de gérer vos données et votre contenu. Reprenons l'exemple de l'article. Lorsque je dis «le contrôleur récupère l'article», il va en fait faire appel au modèle «Article» et lui dire : «donne-moi l'article portant l'id 5». C'est le modèle qui sait comment récupérer cet article, généralement via une requête au serveur SQL, mais ce pourrait être depuis un fichier texte ou ce que vous voulez. Au final, il permet au contrôleur de manipuler les articles, mais sans savoir comment les articles sont stockés, gérés, etc. C'est une couche d'abstraction. La Vue (ou View) : son rôle est d'afficher les pages. Reprenons encore l'exemple de l'article. Ce n'est pas le contrôleur qui affiche le formulaire, il ne fait qu'appeler la bonne vue. Si nous avons une vue «Formulaire», les balises HTML du formulaire d'édition de l'article y seront et au final le contrôleur ne fera qu'afficher cette vue sans savoir vraiment ce qu'il y a dedans. En pratique, c'est le designer d'un projet qui travaille sur les vues. Séparer vues et contrôleurs permet aux designers et développeurs PHP de travailler ensemble sans se marcher dessus. Au final contrôleur ne contient que du code très simple, car il se contente d'utiliser des modèles et des vues en leur attribuant des tâches précises. Il agit un peu comme un chef d'orchestre, qui n'agite qu'une baguette alors que ses musiciens jouent des instruments complexes. Parcours d'une requête dans Symfony2 Afin de bien visualiser tous les acteurs que nous avons vus jusqu'à présent, je vous propose un schéma du parcours complet d'une requête dans Symfony2 8
9
En le parcourant, voici ce que cela donne : 1. Le visiteur demande la page ««/platform» ; 2. Le contrôleur frontal reçoit la requête, charge le Kernel et la lui transmet ; 3. Le Kernel demande au Routeur quel contrôleur exécuter pour l'url «/platform». Ce Routeur est un composant Symfony2 qui fait la correspondance entre URL et contrôleurs. Le Routeur fait donc son travail, et dit au Kernel qu'il faut exécuter le contrôleur «OCPlatform:Advert»; 4. Le Kernel exécute donc ce contrôleur. Le contrôleur demande au modèle «Annonce» la liste des annonces, puis la donne à la vue «ListeAnnonces» pour qu'elle construise la page HTML et la lui retourne. Une fois cela fini, le contrôleur envoie au visiteur la page HTML complète. Les Bundles Symfony2 utilise ce concept novateur qui consiste à regrouper dans un même endroit, le bundle, tout ce qui concerne une même fonctionnalité. Par exemple, on peut imaginer un bundle «Exprihme» dans notre site, qui regrouperait les contrôleurs, les modèles, les vues, les fichiers CSS et JavaScript, etc. Tout ce qui concerne directement la fonctionnalité de notre site. L'intérêt : Le premier intérêt de la découpe en bundle est l'échange de bundles entre applications. Cela signifie que vous pouvez développer une fonctionnalité, puis la partager avec d'autres développeurs ou encore la réutiliser dans un de vos autres projets. Et bien entendu, cela marche dans l'autre sens : vous pouvez installer dans votre projet des bundles qui ont été développés par d'autres. Un bundle contient tout : contrôleurs, vues, modèles, classes personnelles, etc. Tout cela est organisé en dossiers. Voici la structure d'un bundle à partir de son répertoire de base, vous pouvez en voir l'illustration grâce au bundle exemple fourni par défaut dans «src/appbundle/ :» /Controller Contient les contrôleurs /DependencyInjection Contient des informations sur le bundle (chargement automatique de la configuration par exemple) /Entity Contient le modèles /Form Contient les éventuels formulaires /Resources -- /config Contient les fichiers de configuration du bundle (nous placerons les routes ici) -- /public Contient les fichiers publics de votre bundle : fichiers CSS et JavaScript, images, etc. -- /views Contient les vues du bundle, les templates Twig 10
Les templates Twig Les templates permettent de séparer le code PHP du code HTML/XML/Text, etc. Seulement, pour faire du HTML de présentation, on a toujours besoin de code dynamique : faire une boucle pour afficher toutes les menus de notre plateforme, créer des conditions pour afficher un menu différent pour les utilisateurs authentifiés ou non, etc. Pour faciliter ce code dynamique dans les templates, le moteur de templates Twig offre son pseudo-langage à lui. Ce n'est pas du PHP, mais c'est plus adapté et voici pourquoi : La syntaxe est plus concise et plus claire. Pour afficher une variable, {{ mavar }}. Il y a quelques fonctionnalités en plus, comme l'héritage de templates Il sécurise les variables automatiquement. Exemple d héritage Twig utilisé dans le site Exprihme Le fichier bas.html.twig définit le menu et le pied qui sera présent sur toutes les pages du site Exprihme. 11
Il suffit donc de faire hériter chaque page du site de cette base qu ils disposent aussi du menu et du pied de page. Exemple de l héritage avec la page d accueil : ORM Un ORM (Object-Relational Mapping) est une technique permettant de lier un objet à une base de données relationnelle. Ainsi l'objet est directement lié et permet de mettre en place des méthodes qui vous simplifieront la vie pour créer, modifier, récupérer et supprimer des informations... Ce concept existe dans beaucoup de langages, et en PHP5, il existe notamment 2 frameworks d'orm qui sont: ORM PHP5 - Propel et ORM PHP5 Doctrine Ce sont ces deux Frameworks qui sont proposés dans Symfony. On ne peut en utiliser qu'un seul par projet web, il nous devons donc choisir l'un des deux. DIFFÉRENCES ENTRE PROPEL ET DOCTRINE 1) Génération de code Propel: Il va générer du code pour les méthodes et requêtes Doctrine: "Introspection" du code Avantage: Propel, car on a une trace du code généré, pratique pour le debug. 12
2) Optimisation des requêtes Propel: Récupère plus facilement l'objet complet qu'une seule partie des informations. Doctrine, Facilité d'optimisation des données à récupérer etc. Plus rapide au développement. Avantage: Doctrine 3) Performances de l'orm Avantage: Propel, il est plus rapide que Doctrine sur une même requête mais pas lorsqu'il y'a gestion de cache. Pour notre cas nous avons choisi d utiliser Doctrine qui est l ORM par défaut fourni avec symfony. Manipulation des entités avec Doctrine Après la configuration de symfony, nous avons généré les entités correspondantes aux tables de la base de données. Nous avons créé 4 contrôleurs pour 11 routes avec des paramètres. Pour pouvoir basculer en sql en cas de besoin, nous avons créé une classe «connexion» qui est Singleton qui représente une connexion pdo classique vers notre base de données. Nous avons initialisé cette classe dans les contrôleurs ou nous avons eu besoin de faire des requêtes longues plus facilement réalisables en SQL. I.4 Les supports de développement Les éditeurs de code sont nombreux et notre choix s est porté sur l IDE (Environnement de développement NetBeans d Oracle qui est un éditeur complet avec du code clair et auto complétion puissante afin d aider les développeurs à aller rapidement dans leurs développements. II. Organisation et méthodologie du travail Cette partie permettra de ressortir la démarche suivie pour aboutir à une application répondant aux demandes du commanditaire. II.1. Analyse et indentification des besoins fonctionnels 13
D après notre cahier des charges, le travail qui nous est demandé est de pouvoir apporter sur le web une application lourde déjà développée afin d obtenir les fonctionnalités suivantes Un menu multicouche Import et affichage de cartes géographiques (map) depuis un serveur tiers Affichages de différents menus et leurs sous-menus Affichage et lecture de vidéos Affichage de photos et. II.2 Représentation générale du projet EXPRIHME Cette étape fera ressortir la structure de tout le système et à l aide des différentes technologies choisi ainsi que leurs rôles : Le JavaScript nous permettra de dynamiser au mieux notre application. HTML et CSS quant à eux permettront des structurer notre page et de la mettre en forme. XML permet de créer des structures et de les sauvegarder. SQL d interroger, ajouter et mettre à jours les données dans la base de données MVC un pattern qui sépare le modèle et les vues afin d avoir un code facile à maintenir III. Etude des concepts théoriques sur l application EXPRIHME Dans cette partie nous allons étudier les différents concepts théoriques nécessaires à la bonne compréhension de notre projet. III.1 C est quoi OHM : L Ohm n est rien d autre que, l Observatoire Homme-Milieux, une disposition de recherche mise en place par L Institut d Environnement et d Ecologie (INEE) du Centre National de la Recherche Scientifique (CNRS), pour étudier des systèmes localisés, affectés de mutations rapides. Il y a huit Observatoires Hommes-Milieux dans le monde, qui étudient respectivement les mutations du bassin Minier de Provence, celles de la Vallée du Rhône, la région du Haut Vicdessos dans les Pyrénées, le littoral méditerranéen, la région industrielle d Estareja au Portugal, la région frontalière 14
de Oyapock entre la Guyane Française et le Brésil, la région de Tessékéré au Sénégal, et, nouvellement depuis 2012, la région de Nunavik au Nord du Québec. III.2 C est quoi OHM-BMP L OHM bassin minier de Provence (OHM-BMP) est le premier OHM créé en 2007. Le territoire qu il étudie, marqué par un passé minier, s étend sur 17 communes des Bouches-du- Rhône situées entre Aix-en-Provence et Marseille. Bien que l activité minière ait très fortement ralenti dès les années 1980, l exploitation de la dernière mine n a cessée qu en 2003, alors qu un tournant industriel avait été engagé vers le milieu du XXe siècle. La vocation de l OHM- BMP est d étudier les dynamiques actuelles de ce territoire sur lequel s exercent l étalement urbain de la conurbation Aix-Marseille, les stigmates de l histoire minière et les conséquences sociales et environnementales de l activité industrielle III.3 Les partenaires Figure 1 : Carte de situation du bassin minier de Provence Les partenaires de l OHM BMP sont divisés en catégories de partenaires, les partenaires selon la catégorie collectivités territoriales, institut de recherche et en fin autres partenaires (entreprises, agences, et association). 15
III.4 Qualité de l air Ce niveau est consacré au thème portant sur les études de la qualité de l Air du bassin minier de provence. III.5 Territoire des enfants Cette partie représente l environnement des enfants, l objectif est de représenter le trajet des enfants par une petite voiture se déplaçant du domicile à l école. III.6 Biodiversité Idée générale : La biodiversité sera représentée par la flore des terrils, la croissance des arbres sur les terrils. La nature à la (re) conquêtes des terrils. La présentation des terrils du bassin minier de Provence à travers : Un extrait vidéo d une présentation des terrils. Une carte des terrils du bassin minier de Provence. Des photos des terrils. Des photos illustrant la biodiversité. Des schémas Des textes. III.7 Histoire du territoire Le territoire dans le temps, restitution diachronique de l évolution du territoire. Histoire de l exploitation minière du BMP, évolution dans le temps des champs de mine et des puits exploités. Evolution de la population du BMP. Installation des infrastructures industrielles principales du BMP. 16
IV. Développement Dans cette phase on apportera quelques explications relatives aux techniques de développement utilisées sur certaines fonctionnalités de notre application. IV.1Répartition du travail Une fois l étude, l analyse achevée, il est question de décrire les phases de construction de notre application, nous avons opté pour une répartition des tâches de la manière suivante : Ramzi et Yacine Partie analyse base des données JO et NTIE Template, vue, l interface de notre projet 17
IV.2 Base de données existante. IV. 3 Amélioration de la Base de données. Proposition de modèle : Points à améliorer : Il n existe pas de relation réflexive pour la table niveau permettant de designer quel niveau est descendant l autre. Cette relation réflexive permettrait de reconstituer l arborescence dynamiquement. Les «études» sont des sous-niveaux. Chaque niveau correspondra à une page. On retrouve un enregistrement «accueil» dans la table étude, mais elle est déjà présente dans la table niveau. Il existe une seule page d accueil pour le site web. Il est préférable de diviser les champs composés de différentes informations (1ere forme normal) afin que ces champs ne contiennent que des valeurs atomiques. Tous les attributs auront des valeurs simples (non multiples, non composées). Nous proposons un MCD qui permet de répondre au besoin et qui est adaptable à un site web. Cette architecture permettra d avoir un site web plus facilement maintenable. Le site sera gérable à travers un back office. 18
Les menus seront générés à la volée Le site aura un accueil. Tous les autres niveaux seront descendants de l accueil. Les différents niveaux (pages) seront personnalisables avec du contenu. À chaque niveau on pourra associer un rendu (couleur de fond de la page) qui sera chargé à partir de la base de données et qui sera modifiable via l interface d administration. L interface d administration permettra : La Création de niveaux. L ajout de contenus dans les niveaux. La modification du contenu des niveaux. La création de catégories de partenaires et de partenaires. 19
IV.4 Fonctionnalités globales Ce chapitre décrit toutes les fonctionnalités attendues par niveau, ainsi que leurs différentes liaisons. A noter que tous les objects (images, logos, picto, cartes, vidéos, son, MPK, textes, menus, etc..) sont gérés de façon externe. V. Les étapes ou les niveau V.1 Niveau 0 : Ce niveau est simplement utilisé comme accueil de l application. Difficultés rencontrées. Tout au long de cette réalisation, nous avons été confrontés à d innombrables 20
V.2 Niveau 1 : Le niveau 1 de notre application est représenté par une barre de menu, Accueil, OHM, OHM BMP et le Partenaire. 21
V.3 Niveau 2 : Le niveau 2 est représenté par le titre en gras noir dans le sous-menu d OHM - BMP. 22
V.4 Niveau 2.N : Le niveau 2.N : C est le niveau d études de OHM- BMP, ils sont représenté par le titre en couleur blanche dans le sous titre en gras noir. 23
V.5 Difficultés rencontrées Toute au long de cette réalisation, nous avons été confrontés à d innombrables difficultés à la fois théoriques et Techniques. Difficulté de créer les entités pour l ORM Doctrine car il y a des tables qui sont entre guillemets et d autres non, rajoutant à ça la présence de schéma dans la base de donnée par exemple dbo.commune et c est impossible de créer une entité (classe) avec un point dans le nom de celle-ci. Pour afficher les cartes géographiques depuis le serveur distant acrgis il faut absolument être connecté à internet et mettre les cartes et leurs couches en public si non elles ne s afficheront pas. Gestion d une playlist video pour les pages d etudes au niveau de twig. Utilisation de doctrine pour les jointures entre plusieurs entité et avec plusieurs conditions, pour cela nous avons du basculer vers des requetes SQL standard pour récupérer des données. Utilisation de framework Symfony au début de notre projet car le framework n était pas prévu dans la formation et il a fallu une auto-formation. V.6 Travail fait Travail réalisé sur notre projet tuteuré, c est la réalisation d un site web pour application lourde déjà développé. La grandeur, l ampleur du projet, et les difficultés rencontrées ne nous ont pas du tout facilité le travail, mais avec les efforts de tous les jours, on a pu proposer 24
une analyse de la base de données existante et un site avec et une interface ergonomique. Réalisation des différentes pages avec symfony. V.7 Cartes géographiques avec arcgis Les cartes géographiques créées par le commanditaire dans un site web tiers qui est arcgis, en créant des cartes géographiques sur ce dernier les cartes sont stockée sur ses serveurs, ces cartes sont ensuite affichées sur le site web de EXPRIHME tout en les laissant sur les serveurs d arcgis, pour y remédier on s est documenté sur les apis d arcgis nous avons trouvé qu il y a tout simplement une balise iframe ou il y a l url de la carte à afficher, seulement cet url est différente pour chaque carte pour contourné ce problème nous avons créé une table carte_geo dans la base de donnée ou il y a 4 colonnes l identifiant, le nom, la description, la source et l identifiant de la carte qui est dans l url alors on propose un petit formulaire ou l utilisateur saisis toutes ces informations avec l url et derrière nous avons développé une fonction qui filtres la chaine de caractères de l url et garde juste l identifiant de la carte. Exemple d une url d une carte : www.arcgis.com/apps/embed/index.html?webmap=6399f1f23937452496c3757a184fb762 Image du code de la fonction de filtration de l url pour obtenir l identifiant de la map 25
V.8 Ce qui reste à faire Ici on va énumérer les fonctionnalités qui seront améliorées ou implémentés à l avenir : Mettre en place une Play List vidéos. Permettre l admistration de site à travers un back office. V.9 Bilan sur la gestion du projet La comparaison de ces deux diagrammes est là pour démontrer les différences parfois importantes entre les calendriers établis par les équipes de projet, et la situation concrète. VI. DIAGRAMME DE GANT VI.1 DIAGRAMME DE GANTT PREVISIONNEL 26
VI.2 DIAGRAMME DE GANT REEL 27
VII. Conclusion Au terme de ce projet, notre objectif était de construire un site web permettant de présenter l application OHM- BMP sur le web. Ce projet nous a permis d apprendre et travailler en équipe. Nous avons construit un esprit de débat et de confrontation d avis pour aboutir au final à une entente. Nous avons fait le nécessaire pour nous aligner au cahier de charge, cependant certaines fonctionnalités n ont pas été implémentées, mais elles feront l Object des prochaines améliorations. Ce projet au premier coup d œil semblez être facile, au fil des entretiens avec le commanditaire les difficultés ont à prendre de l ampleur notamment à cause de la base de données qui a été faite pour fonctionner avec une application en.net, mais en l important pour ensuite créer un site web on a trouvé plusieurs incompatibilités et des erreurs qui nous ont beaucoup ralentit dans le développement, rajoutant à ça l apprentissage de symfony en même temps que le projet et l ampleur de ce projet notamment ce qui nous pas permis de finir l application à temps. 28
29
Annexe 30
31