Développement d'une application de cartographie interactive sur internet.

Annexes

Annexe I: organigramme du Parc national de la Vanoise (novembre 2014) 35

Annexe II: modèle de la base de données 36

Annexe III: création d'un bundle sur Symfony2 37

Annexe IV: mapping de la base de données avec Doctrine 38

Annexe V: exemple de contrôleurs 40

Annexe VI: extrait du module général de l'application (appCables) 41

Annexe VII: exemple de configuration d'un schéma 42

Annexe VIII: tableau des fonctionnalités 44

Annexe I: organigramme du Parc national de la Vanoise (novembre 2014)

Annexe II: modèle de la base de données

AnnexeIII: création d'un bundle sur Symfony2

Je montre ici un exemple de la création d'un squelette ou bundle sur Symfony2:

php app/console generate:bundle

Cette commande génère une nouvelle structure de bundle et l'active automatiquement dans le projet.

Il faut ensuite suivre les instructions de la commande qui nous demandera par la suite le nom du bundle, le format des fichiers de configurations...

Le bundle sera automatiquement ajouté dans le projet, par défaut dans le répertoire src du projet :

AnnexeIV: mapping de la base de données avec Doctrine

Il faut lancer une commande linux* qui va créer l'image de la base de données dans le projet Symfony2 :

$ php app/console doctrine:mapping:convert yml ./src/PNV/CablesBundle/Resources/config/doctrine/metadata/orm --from-database --force

Le fichier de métadonnées  généré ressemble à ça :

1. PNV\CablesBundle\Entity\AiresView:  

2.     type: entity  

3.     table: cables.vue_aires_aigle  

4.     schema: cables  

5.     repositoryClass: PNV\CablesBundle\Repositories\AiresView  

6.     id:  

7.         id:  

8.             type: integer  

9.             id: true  

10.             generator:  

11.                 strategy: AUTO  

12.     fields:  

13.         commentaires:  

14.             type: string  

15.         lieu:  

16.             type: string  

17.         source:  

18.             type: string  

19.         geom:  

20.             type: json_array

Ce fichier représente l'image de la table ou de la vue dans la base de données et permet de générer par la suite les classes entités.

Les entités sont des classes métiers qui représentent chaque objet de notre application. Elles sont stockées par défaut dans le répertoire « Entity ». Pour les générer à partir d'une base existante, il faut exécuter deux requêtes :

$ php app/console doctrine:mapping:import PNVCablesBundles annotation

$ php app/console doctrine:generate:entities PNVCablesBundles

La première requête va importer le schéma depuis la base de données pour construire les classes d'entité. Doctrine va ainsi transformer les champs des tables de la base en propriétés privées (private).

La deuxième génère des méthodes qu'on appelle les « getters » et les « setters » pour ces propriétés déclarées. Le getter est un accesseur qui permet de récupérer la valeur d'une propriété donnée (GetId parexemple) et le setter est un mutateur qui lui permet de définir cette valeur (SetId par exemple). Le fichier entité généré ressemble à ça :

1. <?php  

2.   

3. namespace PNV\CablesBundle\Entity;  

4.   

5. use Doctrine\ORM\Mapping as ORM;  

6.   

7. /** 

8.  * AiresView 

9.  */  

10. class AiresView  

11. {  

12.     /** 

13.      * @var integer 

14.      */  

15.     private $id;  

16.   

17.     /** 

18.      * @var string 

19.      */  

20.     private $commentaires;  

21.   

22.     /** 

23.      * Get id 

24.      * 

25.      * @return integer  

26.      */  

27.     public function getId()  

28.     {  

29.         return $this->id;  

30.     }  

31.   

32.     /** 

33.      * Set commentaires 

34.      * 

35.      * @param string $commentaires 

36.      * @return AiresView 

37.      */  

38.     public function setCommentaires($commentaires)  

39.     {  

40.         $this->commentaires = $commentaires;  

41.   

42.         return $this;  

43.     }  

44.   

45.     /** 

46.      * Get commentaires 

47.      * 

48.      * @return string  

49.      */  

50.     public function getCommentaires()  

51.     {  

52.         return $this->commentaires;  

53.     }  

54. }  

AnnexeV: exemple de contrôleurs

· Exemple de type NomController.php

1. <?php  

2.   

3. namespace PNV\CablesBundle\Controller;  

4.   

5. use Symfony\Bundle\FrameworkBundle\Controller\Controller;  

6.   

7. use Symfony\Component\HttpKernel\Exception\AccessDeniedHttpException;  

8.   

9. use Symfony\Component\HttpFoundation\JsonResponse;  

10. use Symfony\Component\HttpFoundation\Request;  

11.   

12. use Commons\Exceptions\DataObjectException;  

13. use Commons\Exceptions\CascadeException;  

14.   

15. use Symfony\Component\HttpFoundation\BinaryFileResponse;  

16.   

17.   

18. class AiresViewController extends Controller{  

19.   

20.     // path: GET /cables/aires   

21.     public function listAction(){  

22.         /* 

23.          * retourne la liste des aires "cables" 

24.          */  

25.         $ss = $this->get('airesService');  

26.   

27.         return new JsonResponse($ss->getList());  

28.     }  

29. }

· Exemple de type NomConfigController.php

1. class AiresConfigController extends Controller{  

2.       

3.     // path : GET cables/config/aires/form  

4.     public function getFormAction(){  

5.   

6.         $file = file_get_contents(__DIR__ . '/../Resources/clientConf/aires/form.yml');  

7.         $out = Yaml::parse($file);  

8.   

9.         return new JsonResponse($out);  

10.     } 

Ce fichier appel ainsi d'autres fichiers de configuration dans lequel sont définies les schémas pour nos listes, détails et formulaires.

Annexe VI: extrait du module général de l'application (appCables)

1. var app = angular.module('appCables', [ 'cablesControllers', 'baseMort', 'baseAires', 'baseTroncons','baseTronAerien',  'cablesServices', 'FormDirectives', 'DisplayDirectives', 'ui.bootstrap', 'darthwade.loading', 'mapServices', 'LocalStorageModule']);  

2.   

3. // module de gestion de la page d'accueil  

4. angular.module('cablesControllers', ['cablesServices', 'mapServices', 'ngRoute', 'ngTable']);  

5.   

6. // module de gestion test mort  

7. angular.module('baseMort', ['cablesServices', 'mapServices', 'ngRoute', 'ngTable']);  

8.   

9. // module de gestion test aires  

10. angular.module('baseAires', ['cablesServices', 'mapServices', 'ngRoute', 'ngTable']);  

11.   

12. // module de gestion test tronc  

13. angular.module('baseTroncons', ['cablesServices', 'mapServices','ngRoute', 'ngTable']);  

14.   

15. // module de gestion test   

16. angular.module('baseTronAerien', ['cablesServices', 'mapServices','ngRoute', 'ngTable']);  

17.   

18. // services de l'application  

19. angular.module('cablesServices', ['mapServices']);  

20.   

21. // directives formulaires  

22. angular.module('FormDirectives', ['angularFileUpload', 'mapServices']);  

23.   

24. // directives affichage  

25. angular.module('DisplayDirectives', ['mapServices']);  

26.   

27. // directives map  

28. angular.module('mapServices', ['cablesServices']); 

AnnexeVII: exemple de configuration d'un schéma

· Pour la liste

1. title: Zone Sensible Aigles Royal  

2. emptyMsg: Aucune zone pour le moment  

3. createBtnLabel: Nouvelle zone  

4. createUrl: "#/cables/edit/aires/"  

5. editUrl: "#/cables/edit/aires/"  

6. detailUrl: "#/cables/aires/"  

7. editAccess: 5  

8. fields:   

9.     -   name: id   

10.         label: ID  

11.         filter:   

12.             id: text  

13.         options:   

14.             visible: false  

15.   

16.     -   name: commentaires  

17.         label: Commentaires  

18.         filter:   

19.             commentaires: text  

20.         options:  

21.             visible: true  

22.     -   name: lieu  

23.         label: Lieu   

24.         filter:   

25.             lieu: text  

26.         options:  

27.             visible: true  

28.     -   name: source  

29.         label: Source   

30.         filter:   

31.             source: text  

32.         options:  

33.             visible: true  

· Pour le détail

1. editAccess: 3  

2. subEditAccess: 2  

3. groups:  

4.     -   name: Informations  

5.         fields:  

6.             -   name: commentaires  

7.                 label: "Commentaires"  

8.                 type: string  

9.             -   name: lieu  

10.                 label: "Lieu"  

11.                 type: string  

12.             -   name: source  

13.                 label: "Source"  

14.                 type: string  

15.                 #help: ""  

· Pour l'édition

1. deleteAccess: 5  

2. groups:  

3.     -   name: Localisation  

4.         fields:  

5.             -   name: geom  

6.                 label: Coordonn(c)es GPS  

7.                 type: geom  

8.                 options:  

9.                     geometryType: circle  

10.                     dataUrl: cables/aires   

11.     -   name: Informations  

12.         fields:  

13.             -   name: id  

14.                 label: ID  

15.                 type: hidden  

16.             -   name: source  

17.                 label: Source  

18.                 type: string  

19.                 options:  

20.                     maxlength: 250  

21.             -   name: lieu  

22.                 label: Lieu  

23.                 type: string  

24.                 options:  

25.                     maxlength: 250  

AnnexeVIII: tableau des fonctionnalités

	Fonctionnalité	Description
Légende dynamique	Pliable/dépliable	Une légende qui est pliable et dépliable sur la carte
	Légende transparente	Une légende transparente sur la carte
	Arborescence couche	Possibilité de gérer l'arborescence des couches
	Visibilité couche	Possibilité d'afficher ou maquer les couches
	Symbologie	Mettre des symboles sur différents sur les couches
	Fonds raster	Ajouter des couches rasters
	Session	Possibilité de garder les cases cochées et décochées
Données attributaires dans tableau	Pliable/dépliable	Un tableau pliable et dépliable depuis un bouton
	Interface	Garder la même interface en liste, détail et édition
	Filtre	Filtrer directement à partir du tableau de données
	Zoom	Faire un zoom sur l'élément filtré dans la carte
	Détail	Affichage de données en fonction du niveau de l'utilisateur
	Boutons	· Bouton Afficher pour montrer le détail d'un élément · Bouton Editer pour modifier l'élément · Bouton Supprimer sur tableau données et possibilités de supprimer en lot · Ajout des boutons Modifier et Supprimer en mode détail
Saisie	Ajout de données	Ajout de données depuis un bouton devant le tableau
	Enregistrer/nouveau	Enregistrer une donnée et rester sur la même page pour en recréer : · on reste sur l'interface saisie et le formulaire est vidé + un bouton pour récupérer données saisies précédentes · on reste sur l'interface saisie et le formulaire reste plein avec possibilité de supprimer données dans champs + bouton vider les données
	Enregistrer/fermer	Enregistrer une donnée et retourner sur la liste de données
	Point Déplaçable	Possibilité de pouvoir déplacer automatique la géométrie sur la carte sans cliquer sur Editer de Leaflet.
	Bloc collapsed	Regrouper les catégories de données dans des blocs pliables en mode création ou édition de données
	Légende	Possibilité de garder la légende pendant la saisie de données
	Interface	Garder la même interface qu'en liste et détail
	Boutons	· Bouton Supprimer · Bouton Annuler
Recherche	Recherche de données	· Critère géographique + critère métier + filtre métier dans tableau résultats · Critère géographique + filtre métier dans tableau résultats · Récapitulatif des critères de recherche depuis le tableau résultat
Fichier	Photos	Possibilité d'ajouter des photos en mode saisie
Sortie	Impression/export	· Possibilité d'exporter le tableau de données · Exporter la carte sous divers formats