• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
CMS

Drupal mon amour, ou comment créer un module pour afficher une map leaflet

Nous allons voir dans ce tutoriel comment développer un module Drupal 7, et vous constaterez la simplicité de l’opération. Ce qui ne signifie pas que l’exercice le soit systématiquement!! Et pour rendre ce tutoriel un peu plus fun nous prendrons en exemple l’implémentation d’une map dans le style de google !

Je considère que vous avez déjà installé Drupal (en version 7.17 pour moi). Nous allons créer un module nommé « leaflet ».

 

Créez le dossier « leaflet » :

 

Site/all/modules/leaflet

 

Puis créez l’architecture suivante à l’intérieur :

Site/all/modules/leaflet/
                        - css/
                        - js/
                             - core/
                             - community/
                             - local/
                        - leaflet.info
                        - leaflet.module
                        - map.tpl.php

 

J’aime bien séparer les fichiers javascript dans différents dossiers, car il est plus simple de savoir quels fichiers m’appartiennent et ceux qui sont modifiables ou non. Nous mettrons dans « core » les fichiers tels que jquery qui sont la base, dans « community » les plugins faits par d’autres, et dans « local » nos bébés euh… nos fichiers.

 

Dans un premier temps nous allons remplir les informations sur notre plugin. Ouvrez le fichier leaflet.info puis ajoutez les informations suivantes :

name = leaflet
description = module de geoloc
package = Map
version = VERSION
core = 7.x
files[] = leaflet.module
version = "1.0"
project = "drupal"

 

Ensuite nous allons télécharger leaflet (http://leafletjs.com/download.html).

 

Copiez les fichiers suivants tels qu’indiqué ci-dessous :

Site/all/modules/leaflet/
                        - css/
                             leaflet.css
                             leaflet.ie.css
                         - js/
                              leaflet.js
                              app.js

 

Maintenant ajoutons les fichiers suivants à notre plugin, modifiez le fichier leaflet.info comme cela :

name = leaflet
description = test for map module
package = Map
version = VERSION
core = 7.x
files[] = leaflet.module
version = "1.0"
project = "drupal"
; CSS FILE
stylesheets[all][] = css/leaflet.ie.css
stylesheets[all][] = css/leaflet.css
; SCRIPTS FILE
scripts[] = js/community/leaflet.js
scripts[] = js/local/leaflet.js

 

Maintenant la partie la plus compliquée ! Nous allons attaquer l’implémentation du module. Je vous explique ma demarche et les étapes à suivre.

Nous allons implémenter le « hook » permission, et quand je parle du « hook » je ne fais bien sur pas référence au film de Spielberg ! (blague nulle déjà faite des centaines de fois… ok je sors !)
Les hooks vont nous permettre d’intéragir avec le core de drupal pour pouvoir changer notre thème ou bien créer des modules. Nous devons utiliser 3 « hook », qui sont « permission », « menu » et « theme ».

 

Nous aurons 3 fonctions utilisant un « hook » :

function leaflet_permission ()
{
}
function leaflet_menu ()
{
}
function leaflet_theme ()
{
}

 

Pour savoir comment fonctionne le hook theme par exemple, il suffit de rechercher dans google (ou un autre moteur de recherche si quelqu’un en utilise vraiment un autre) « hook theme drupal »

Nous voyons que cette fonction recoit 4 paramètres tels qu’indiqué dans la documentation.

hook_theme($existing, $type, $theme, $path)

 

 

Prenons maintenant chaque fonction pour les implémenter une par une :

function leaflet_permission ()
{
 return array(
 'access leaflet' => array('title' => t('Access leaflet'))
 );
}

 

 

Cette fonction nous donne la permission sur notre module en front office.

function leaflet_menu ()
{
 $items = array();

 $items['leaflet/map'] = array(
 'title' => 'Map test',
 'page callback' => 'leaflet_page',
 'page arguments' => array(),
 'access arguments' => array('access content'),
 'type' => MENU_CALLBACK
 );

 return $items;
}

 

 

Celle-ci nous permet de créer un vue nommée « leaflet/map », donc notre page se trouvera sur cette URL, http://localhost/leaflet/map (n’y allez pas maintenant cela ne sert a rien, notre plugin n’est même pas activé…)

Je ne vais pas expliquer chaque ligne en détail, la documentation est faite pour ça mais une ligne est vraiment importante :

'page callback' => 'leaflet_page'

 

Cela indique une fonction qui sera appelée en ‘callback’ quand la page sera chargée.

 

Créons donc cette fonction

function leaflet_page ()
{
}

 

Enfin le « hook » theme avec nos 4 paramètres tels qu’indiqué dans la doc :

function leaflet_theme ($existing, $type, $theme, $path)
{
 $themes = array (
 'leaflet_page_template' => array(
 'template' => 'map',
 'arguments' => array(),
 ),
 );

 return $themes;
}

 

La fonction va nous permettre de charger un tpl comme vue ! Cela veut dire que nous n’écrirons pas de code HTML directement dans notre module (on est plus au moyen âge héhé!). Ici la tpl map.tpl.php sera donc appelée.

Enfin pour finir nous allons ajouter dans notre fonction callback l’appel à ce hook theme pour charger notre tpl. Voici donc le code complet du fichier leaflet.module.

 

<?php
// $Id$
/**
 * @file
 * Simple leaflet drupal module
 */
function leaflet_permission ()
{
 return array(
 'access leaflet' => array('title' => t('Access leaflet'))
 );
}
function leaflet_menu ()
{
 $items = array();

 $items['leaflet/map'] = array(
 'title' => 'Map test',
 'page callback' => 'leaflet_page',
 'page arguments' => array(),
 'access arguments' => array('access content'),
 'type' => MENU_CALLBACK
 );

 return $items;
}
function leaflet_page ()
{
 return theme('leaflet_page_template');
}
function leaflet_theme ($existing, $type, $theme, $path)
{
 $themes = array (
 'leaflet_page_template' => array(
 'template' => 'map', // your template file called custompage.tpl.php
 'arguments' => array(),
 ),
 );

 return $themes;
}

 

Ensuite activez votre module dans l’administration.

 

 

Vous pouvez enfin vous rendre a l’URL indiquée plus haut.

Pour ajouter la map faite ainsi. Dans le fichier map.tpl.php écrire :

 

<div id="map" style="width: 500px; height: 300px;"></div>

Dans le fichier app.js :


<script>
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '<a href="http://cloudmade.com">CloudMade</a>',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var map = new L.Map('map');
map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade);
</script>

 

Et voilà, notre map est prête !

14/02/2013 41 MIN READ BY: Nicolas LABBE 0 COMMENT
SHARE
LIRE LA SUITE

Nicolas LABBE

Si c’est stupide mais que ça marche, ce n’est pas stupide.

DG Mediamind : premiers pas !

Photoshop et la perfection au pixel près

VOUS POURRIEZ AIMER

CMS Admin WordPress sur un sous-domaine

CMS Drupal 8 : formulaire d’upload et custom API

CMS Les shortcodes et l’utilisateur

CMS Drupal 7 – Les EntityFieldQuery et les requêtes aléatoires

CMS Drupal Fuse, démarrez vos projets Drupal 7 à la vitesse d’une fusée

CMS WordPress – Un formulaire de login custom en Ajax

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect