Developpement

Comment générer de nouveaux affichages ?

Pour générer de nouveaux affichages issus d'une requête SQL, cela peut se faire à la main dans un module mais aussi avec l'aide du module : Views.

Nous allons récupérer le module Views en version 7 sur la page officielle : https://www.drupal.org/project/views

Nous allons dans le dossier sites/all/modules pour ne pas le mélanger avec les modules d'origine.

sites/all/modules: décompressez Views

Nous retournons sur la partie suivante : barre noire > modules.



Nous activons le module Views + Views UI.

Nous allons créer une page avec les titres et les textes des contenus de type vehicule.

Rendez vous dans la partie : barre noire > structure > vues.

Ensuite : Add new view / Ajouter une nouvelle vue.

Nom de la vue : Listing voiture 1



Dans la colonne de gauche, nous allons cliquer sur la partie Filter Criteria > Ajouter.

Cocher : Contenu: Type > Appliquer.

Is one of / Fait partie de : vehicule



Nous allons cliquer dans la colonne du milieu sur la partie : Menu: No menu > Entrée de menu normal > Menu Principal > Appliquer

Si vous avez bien pensé à créer des contenus de type véhicules, vous devriez avoir un aperçu qui se génère dans la partie du dessous.

N'oubliez pas d'enregistrer et allez voir en Front, votre page doit se trouver dans le menu et présenter vos véhicules en incluant le titre + le texte.

Et le résultat est bien au RDV :



Nous pouvons adapter le code css pour rendre l'affichage plus visuel.

Nous allons créer un 2e affichage, cette fois-ci de type bloc !

Rendez vous dans la partie : barre noire > structure > vues.

Ensuite : Add new view / Ajouter une nouvelle vue.

Nom de la vue : Listing voiture 2



Dans la colonne de gauche, nous allons cliquer sur "Afficher : contenu" pour choisir "Afficher : contenu",

Toujours dans la colonne de gauche nous allons ajouter Contenu: Titre dans la partie fields.

Si c'est déjà le cas, ne touchez à rien. C'est parfait.



Ensuite Enregistrer.

Rendez-vous dans la partie : barre noire > structure > blocs.

Positionner le bloc que vous venez de créer : View: listing voiture 2: Block

Toujours sur notre lancée, nous allons créer un 3e affichage, cette fois ci nous retournerons sur le type page mais en choisissant nos champs !

Rendez vous dans la partie : barre noire > structure > vues.
Ensuite : Add new view / Ajouter une nouvelle vue.
Nom de la vue : Listing voiture 3
Nous allons cliquer dans la colonne de gauche sur la partie : Format > Afficher:Contenu
Choisissez Fields (Champs).
Ensuite, toujours dans la colonne de gauche, nous allons cliquer sur Fields (Champs) > "ajouter".
Choisissez :
Contenu: Titre
Contenu: carburant (carburant)
Contenu: prix (prix)
Contenu: km (km)
Contenu: modele (modele)
Contenu: photo (photo)
Nous allons cliquer dans la colonne du milieu sur la partie : Menu: No menu > Entrée de menu normal > Menu Principal > Appliquer
Dans la colonne de gauche, nous allons cliquer sur la partie Filter Criteria > Ajouter.
Cocher : Contenu: Type > Appliquer.
Is one of / Fait partie de : vehicule

Pour faire un affichage différent, nous allons cliquer dans la colonne de gauche sur la partie : Format: Unformatted list > Choisir Tableau > Appliquer
Nous allons revenir sur la photo et demander d'afficher la version miniature 100x100 :

Et voici notre résultat :


Avec views nous pouvons également créer des pages pour le BackOffice, nous allons donc créer un 4e affichage de type page !

Rendez vous dans la partie : barre noire > structure > vues.
Ensuite : Add new view / Ajouter une nouvelle vue.
Nom de la vue : Listing Contenu
Nous allons cliquer dans la colonne de gauche sur la partie : Format > Afficher:Contenu
Choisissez Fields (Champs).
Ensuite, toujours dans la colonne de gauche, nous allons cliquer sur Fields (Champs) > "ajouter".
Choisissez :
Contenu: Titre (Titre)
Contenu: Type (Type)
Contenu: Langue (Langue)
Contenu: Lien (Lien)
Contenu: Nid (Nid)
Contenu: Nombre de commentaires (Nombre de commentaires)
Contenu: Post date (Post date)
Contenu: Updated date (Updated date)
Contenu: Edit link (Edit link)
Contenu: Delete link (Delete link)
* Une petite fléche (à côté du bouton ajouter) permet de réordonner les champs.
Sur views, nous pouvons recliquer sur les champs dates pour définir le format français : d/m/Y
Cliquer encore dans la colonne de gauche sur la partie : Format: Unformatted list > Choisir Tableau > Appliquer
Pour la partie Filter Criteria, nous allons choisir : Contenu Type et Exposer (Expose this filter to visitors, to allow them to change it)
Dans la colonne du milieu, le chemin sera /admin/listing-contenu
Toujours dans la colonne du milieu, le Menu sera Normal menu entry avec un titre "Gestion Contenu" et classé dans le menu "Management"
Colonne du milieu : Access: Droit > Role Administrateur (seuls les administrateurs auront le droit de voir cette page et de gérer le contenu).
Enregistrer.



Belle surprise, cela nous ajoute une rubrique dans la barre noire backOffice nommée "Gestion Contenu", mais nous aurions pu la mettre à l'endroit de notre choix.

Avec Drupal nous pouvons aussi modifier le BackOffice pour l'améliorer.

Description de l'interface de Views

• Titre: permet de donner un titre à la page ou au bloc (selon la view / vue créée).


• Format : permet de définir le style d'affichage, plutôt tableau ou liste ?


• Fields : permet d'ajouter les champs que l'on souhaite afficher (si l'on a determiné Afficher : Champs / Fields plutôt que Afficher : Contenu au préalable), (correspond à la partie SELECT d'une requête SQL).


• Filter criteria : permet d'ajouter des filtres et demander uniquement par exemple des contenus publiés ou d'un type particulier (correspond à la partie WHERE d'une requête SQL).


• Sort criteria : permet de définir l'ordre d'affichage des résultats (correspond à la partie ORDER BY d'une requête SQL).


• Page settings : permet de définir l'url, le lien de menu, les droits d'accès ainsi que la pagination.


• Advanced : Permet notamment de définir des templates de views (très utile parfois pour intervenir sur le code généré). De faire des relations et d'ajouter une classe CSS.

Si l'on crée un template de views, il faut reprendre le nom de fichier et le code communiqués par Drupal dans la partie Theme : Informations.
Ce fichier doit être créé dans votre thème actif.
Ensuite vous devrez cliquer sur la partie Rescan Template File pour être certain que votre fichier soit pris en compte.
Enregistrez votre vue et videz le cache si nécessaire.

• Display output: La page générale
• Style output: Les résultats (boucle)
• Row style output: Les éléments pour chaque ligne des résultats

Développer un module spécifique

Pour créer un module sur drupal, nous allons nous rendre dans la partie suivante de notre installation : /sites/all/modules/



Pour créer le dossier, nous évitons les espaces et les accents, nous prenons des noms informatiques.

Partons sur un module qui gère des contacts !

Ce plugin nous permettra d'améliorer le BackOffice en ajoutant un formulaire pour saisir les contacts et de créer un bloc qui pourra être placé dans une région pour afficher les contacts.

A l'intérieur de notre dossier, nous allons créer un premier fichier monmodule.info avec le code suivant à l'intérieur :

name = Mon Module
description = Voici notre 1er module de test
core = 7.x
package = Module DIW

; commentaire dans un fichier .info
-- commentaire dans un fichier .info
; stylesheets[all][] = style.css
; scripts[] = script.js
; configure = admin/...
; files[] = autrefichier.test
; dependencies[] = nom-du-module

Comme son extension l'indique, un fichier .info est un fichier d'informations.

Nous indiquons le nom de notre module, sa description, le fait qu'il soit compatible avec la version 7 de drupal ainsi que le package dans lequel il doit se "ranger".

Il est également possible de joindre des feuilles de style, des scripts, d'autres fichiers à inclure, des dépendances ou encore de définir un lien pour configurer notre module.

Nous allons ensuite créer un fichier monmodule.install avec le code suivant :

function monmodule_schema() {
db_query("CREATE TABLE IF NOT EXISTS monmodule_annuaire (
id_annuaire int(3) NOT NULL AUTO_INCREMENT,
prenom varchar(20) NOT NULL,
nom varchar(20) NOT NULL,
telephone int(10) unsigned zerofill NOT NULL,
PRIMARY KEY (id_annuaire)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;");
}
	

Ce fichier .install est prévu pour s'exécuter automatiquement après une installation.

Ce qui nous permettra de créer la table SQL pour accueillir les données.

A noter, db_query permet de formuler une requête SQL sous drupal.

Nous avons à présent un fichier d'informations et un autre fichier d'installation.
Il ne reste plus qu'à prévoir le code du module lui même !
Pour cela, nous devons nous interesser aux Hook, qu'est-ce qu'un Hook ?

Si nous schématisons, le code est fait pour s'exécuter de la manière suivante :


Un Hook est un crochet ! Le code est prévu pour s'exécuter d'une certaine manière, un hook est un crochet que l'on fait en cours de route pour prendre en compte un traitement complémentaire.



C'est le fonctionnement de Drupal et d'autres outils, cela permet de ne pas toucher aux fonctions du coeur et noyau Drupal mais tout de même d'avoir la possibilité de coder sans géner l'exécution prévue.

Et, pour aller plus loin, nous allons prévoir un fichier monmodule.module avec le code suivant :

function monmodule_menu()
{
	$items = array();
	$items['admin/annuaire'] = array(
	'title' => 'Exemple Annuaire',
	'description' => 'Formulaire de test',
	'page callback' => 'drupal_get_form'
	'page arguments' => array('monmodule_form'), // exécutée pour construire le formulaire
	'type' => MENU_NORMAL_ITEM, // lien accessible
	'access callback' => TRUE, // ligne obligatoire
	);
	return $items;
}	

le Hook _menu permet de définir un chemin d'url, dans notre cas, cela sera admin/annuaire.

Nous donnons également un titre, une description.

page callback permet de préciser la fonction de rappel à exécuter lorsque la page s'ouvrira, comme nous voudrons travailler avec les formulaires, nous aurons besoin de drupal_get_form.

page arguments permet de préciser quelle fonction nous utiliserons pour construire le formulaire.

type permet de préciser le type de lien que nous voudrons ajouter dans le menu.

access callback : TRUE permet de préciser que tout le monde à accès à la page d'administration (y compris les membres non admin et les internautes visiteurs anonymes).

Nous continuons notre code avec la prochaine fonction permettant de construire le formulaire :

function monmodule_form($form, &$form_state)
{
	$form['prenom'] = array(
	'#type' => 'textfield',
	'#title' => 'Votre Prenom',
	'#size' => 10,
	'#maxlength' => 20,
	'#required' => TRUE,
	);
	$form['nom'] = array(
	'#type' => 'textfield',
	'#title' => t('last name'),
	'#maxlength' => 20,
	'#description' => 'Veuillez saisir votre nom',
	);
	$form['telephone'] = array(
	'#type' => 'textarea',
	'#title' => 'Votre telephone',
	'#maxlength' => 10,
	'#description' => 'Veuillez saisir votre numero de telephone',
	);
	$form['submit_button'] = array(
	'#type' => 'submit',
	'#value' => 'ok',
	);
	return $form;
}

Le hook _form permet de déclarer un formulaire. $form est un tableau array contenant les champs de formulaires, chacun des champs est représenté par un tableau array contenant les informations sur les cases de saisie.

La fonction t() permet de traduire un terme dans Drupal, nous verrons ainsi que last name pourra être traduit en différentes langues dans la partie : barre noire > configuration > Traduire l'interface > Traduire > la chaine contient > last name > modifier > nom de famille > Enregistrer les traductions.

Il est parfois nécessaire de vider le cache.

Généralement, que fait-on après avoir créer un formulaire ? des contrôles !

function monmodule_form_validate($form, &$form_state)
{
if(empty($form_state['values']['nom']))
	form_set_error('nom', 'erreur sur le nom');
}

le hook _form_validate permet de prévoir une fonction dédiée au contrôle d'un formulaire

Dans notre cas, nous demandons si le champ "nom" est vide, à cette occasion, nous utiliserons form_set_error pour avoir un message d'erreur dans une couleur rouge, le 1er argument contient le nom de la case à entourer, le second contient le message à afficher.

Les messages sont affichés par l'intermédiaire de la variable $messages (si vous avez suivi le tutoriel sur la création d'un thème personnalisé, cela devrait vous parler !).

form_state est l'équivalent du $_POST, cela nous permettra de tester les valeurs saisies.

La fonction nommée avec le hook _form_submit se déclenchera si les étapes de contrôles se sont bien déroulés afin de valider le tout :

		function monmodule_form_submit($form, &$form_state)
{
	drupal_set_message('contact enregistre!');
	
	db_insert('monmodule_annuaire')
	->fields(array(
	'prenom' => $form_state['values']['prenom'],
	'nom' => $form_state['values']['nom'],
	'telephone' => $form_state['values']['telephone'],
	))
	->execute();
}

Nous utilisons la fonction prédéfinie dans drupal : drupal_set_message() permettant de délivrer un message de validation.

db_insert est une fonction drupal permettant d'insérer des données dans notre base Mysql.

Vous pouvez dés à présent activer votre module dans la partie : barre noire > module > monmodule

Recharger la page (clavier : F5) pour voir évoluer la barre noire avec le titre : Exemple Annuaire.

Rendez vous sur votre URL : admin/annuaire en passant par : barre noire > Exemple Annuaire.

Votre formulaire doit apparaitre. Vous pouvez enregistrer un contact.



Vérifier le contenu de votre base de données via PhpMyAdmin ou la console Mysql pour vérifier la présence de votre nouveau contact.



Maintenant que nous avons une partie en BackOffice pour l'ajout de contact, nous allons prévoir une partie FRONT (sous forme de bloc, pour changer !) avec l'affichage de nos contacts.

		function monmodule_block_info()
		{
			$blocks['monmodule_affichage'] = array(
			'info' => 'Bloc permettant d\'afficher l\'annuaire',
			'cache' => DRUPAL_CACHE_PER_ROLE,
			);
			return $blocks;
		}
	

Le Hook _block_info permet de fournir des renseignements sur un nouveau bloc Drupal

Cela suffit à rendre un bloc disponible dans la partie : barre noire > structure > blocs.

Si vous ne voyez pas votre bloc apparaitre, rendez-vous dans la partie : barre noire > configuration > performances > vider tous les caches.

function monmodule_block_view($delta = '')
{
	$block['subject'] = 'Affichage des contacts';
	$block['content'] = '';
	if(user_access('access content'))
	{
		$result = db_query('SELECT * FROM {monmodule_annuaire}');
		if($result->rowCount() > 0) // s'il y a des contacts ...
		{
			$block['content'] .= $result->rowCount() . ' contact';
			if($result->rowCount() > 1)	$block['content'] .= 's';
			$block['content'] .= '
';
			foreach($result as $data)
			{	// debug($data);
				$block['content'] .= '
' . $data->nom . ' - ' . $data->prenom . ' - ' . $data->telephone . '
';
			}
			$block['content'] .= '
';
		}
		else
		{
			$block['content'] .= 'Pas de contact enregistre';
		}
	}
	return $block;
}	

Le hook _block_view permet de prévoir l'affichage du bloc.

Dans notre cas, nous formulons une requête SQL et affichons les données sous forme de liste HTML.