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 !
