Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Styliser un formulaire de saisie CCK

Date du document en anglais : 8 Septembre 2009 - 08h42 - http://drupal.org/node/101092  



La raison qui m'a amené à écrire ce tuto sur la personnalisation des formulaires est que j'ai travaillé avec des contenus créés avec CCK et que j'ai essayé de comprendre comment changer l'ordre des champs du formulaire. Ce que j'ai trouvé dans les forums était très technique (pointeurs vers l'API pour parler comme des développeurs) ou incomplet, ou même ne concernait pas les formulaires de saisie. Il y avait plus de tuyaux pour les personnes cherchant à modifier ou à personnaliser les affichages, mais rien de clair et précis en ce qui concernait la stylisation des formulaires de saisie.

Aussi, en tant que non-programmeur, à moitié technicien et plutôt orienté marketing et buziness, je me suis mis en chemin pour découvrir comment styliser mes formulaires de saisie. (A tous les développeurs et autres personnes mieux informées que moi, n'hésitez pas à me corriger si je me trompe !).

(NDT : c'est pas KolossalDrupal qui parle, c'est l'auteur de l'article de Drupal.org. Veuillez aiguiller correctement les jets de tomates en représailles aux lourdeurs de style et à la fausse modestie).

Il y a au moins deux façons de styliser les formulaires de saisie :

  1. En utilisant l'API Form (en créant un nouveau fichier .module écrit en PHP et en utilisant des choses comme hook_form_alter)
  2. En créant des fichiers tpl.php.

J'ai trouvé que la deuxième façon était la plus facile (Feignasse ! NDT). Il y aura quand même un peu plus à faire que de créer un fichier tpl.php personnalisé. Il faudra modifier le fichier template.php, ce qui implique quelques connaissances en PHP, et travailler avec les feuilles de style (soit en modifier une existante, soit en créer une qui sera liée à votre thème).

Tout d'abord, il y a un couple de personnes qui sont responsables de la majeure partie du tuto et méritent d'en être crédités :

  • Lyal (http://www.harostreetmedia.com), merci de m'avoir e-mailé le bout de code au milieu de la nuit.
  • Dublin Drupaller (http://www.dublindrupaller.com), merci pour le profond savoir que vous partagez dans les forums, où j'ai pu glaner de nombreuses informations.
  • Jghyde, qui en a aidé d'autres partageant les même recherches.
  • Nick Lewis (http://www.nicklewis.org) dont le site web regorge d'informations utiles et intéressantes sur Drupal.
(Vous en avez compté quatre ? Moi aussi. Ça donne une idée de ce qu'est un couple chez les anglo-saxons. NDT [1] ).

Et maintenant, que la fête commence !

Comment styliser un formulaire de saisie CCK ?

Pré-requis :

  • Vous comprenez un peu le CSS (comment ça marche, comment utiliser les class et id dans le balisage HTML pour styliser les sorties)
  • Vous comprenez un peu le PHP (pas à fond, juste pour comprendre ce que fait un code PHP, pour pouvoir le copier ou le modifier un peu)
  • Vous avez installé le module CCK et vous savez comment créer des contenus avec (bien que je me réfère aux formulaires de saisie CCK dans ce didacticiel, je suis presque sûr que c'est la même démarche pour n'importe quel type de node).

Les étapes

  • Étape 1 : créer un type de contenu avec CCK
  • Étape 2 : créer le fichier [moncontenu].tpl.php
  • Étape 3 : modifier template.php
  • Étape 4 : modifier style.css

Avec cette méthode vous devriez pouvoir modifier le formulaire de saisie. Dans cet exemple, je vais faire ce qui suit : ne pas montrer certains des champs « location » qui sont automatiquement générés (j'ai le module « Location » installé et activé pour mes contenus CCK), puis créer mes propres groupes « pliables » et mettre les éléments que je veux dans ces groupes, et placer mes champs de saisie côte à côte au lieu de les placer un par ligne.

Même avec la méthode que j'utilise, il y a différentes façons d'accomplir le même travail; par exemple, j'utilise tpl.php pour ordonner les champs et .css pour les styliser. Je pense que je pourrais n'utiliser que le CSS pour faire le tout (mais je ne suis pas un gourou du CSS) et n'utiliser le fichier tpl.php pour attribuer les nouveaux <div>

Étape 1 : créer le type de contenu avec CCK

Créez un type de contenu CCK appelé « event_listing » et ajoutez-lui quelques champs. J'ai ajouté des infos contact, localisation, des champs d'information d'événement, etc.

Créez au moins un node (créez une liste d'événements avec votre nouveau type de contenu)

uneimage

Étape 2 : créer le fichier [moncontenu].tpl.php

Maintenant créez un fichier texte appelé event_listing_edit.tpl.php et mettez-le dans le dossier de votre thème (qui se trouve dans le dossier /theme/). On pourrait l'appeler n'importe comment, mais ce sera plus clair et simple à gérer si vous l'appelez ainsi.

Maintenant, ajoutez le code PHP suivant dans le fichier tpl.php. C'est un petit texte pour vérifier que votre prochaine étape (modifier template.php) marche :

<?php
    
print("Youpi ! Ça marche !");
?>

Étape 3 : modifier template.php

Maintenant le plus dur : vous devez ouvrir et modifier le fichier template.php qui se trouve dans le dossier de votre thème.

Vous devrez lui ajouter deux fonctions distinctes, une pour appeler votre fichier event_listing_edit.tpl.php personnalisé lorsque le formulaire sera édité et une autre pour l'appeler lorsqu'un NOUVEAU node sera sur le point d'être créé (vous n'aurez besoin que d'un seul fichier tpl.php, mais comme les modifications du fichier template.php surchargent les fonctionnalités par défaut, il est nécessaire d'indiquer à Drupal d'utiliser le fichier personnalisé pour chaque cas).

À la fin du fichier template.php, ajoutez le code suivant, ce sont deux fonctions différentes :

<?php
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
    function 
phptemplate_node_form($form) {
        return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
    }
}
// Add Form End

// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
    
$node node_load(array('nid' => arg(1)));
    function 
phptemplate_node_form($form) {
        return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
    }
}
// Edit Form End
?>

Vous pouvez voir dans le code les personnes qui l'ont écrit (bien que j'ai légèrement modifié le code original). Merci à jghyde et Dublin Drupaller (http://drupal.org/node/85908)

(NDT : je suis étonné qu'il n'ait pas encore remercié sa femme. Mais l'auteur est peut-être un geek : « c'est quoi une femme ? »)

Maintenant, essayer de modifier votre nœud event_listing, vous devriez voir le texte « Youpi ! Ça marche ! », comme sur la copie d'écran. Dans le cas contraire, il y a deux suspects à chercher : vérifiez la convention de nommage dans le fichier template.php, j'ai parfois mal référencé mon fichier tpl.php.

101092_2

Dans l'étape suivante vous allez ajouter tous les champs dont vous avez besoin dans le formulaire de saisie. Vous pouvez trouver les champs disponibles pour votre formulaire en mettant le code suivant dans votre fichier tpl.php personnalisé (astuce de goose2000 pour afficher les données joliment)

<?php
    
print("yahoo, it works!<br>");
    print(
"<pre>");
    
print_r(array_values($form));
    print(
"</pre>");
?>

Vous allez voir une longue liste de données décrivant les champs disponibles pour votre formulaire de saisie, la section qui vous intéresse ressemble à ceci (il y a une section similaire pour chaque champ et chaque objet du formulaire) :

<?php[field_website] => Array
(
    [
0] => Array
    (
        [
value] => Array
        (
            [
link] => janze.com
            
[title] => Janze.com
            
[attributes] =>
        )
    )
)
?>

Dans cet exemple, si je veux faire référence à l'URL du site, je le ferai comme ceci :

<?php
['field_website']['0']['value']['link']
?>

Aussi, si je veux ajouter l'URL du site à mon formulaire de saisie, j'ajouterai cette ligne à mon fichier tpl.php :

<div id="jpj8"><?php print form_render($form['field_website']['0']['value']['link']); ?></div>

(j'ai entouré la ligne dans un 'div id=' balise pour pouvoir la styliser en CSS)

Maintenant, je modifie mon nœud event_listing, j'obtiendrai quelque chose comme ceci :

101092_3

N'oubliez pas d'effacer la ligne « Youpi ! Ça marche ! ».

Maintenant, avançons et ajoutons le reste des champs souhaités au formulaire.

Si vous voulez faire un groupe de champs qui se déplient/replient, tout ce que vous avez à faire et entourer ces champs avec <fieldset class="collapsible"></fieldset> et si vous voulez que le groupe porte un nom ajoutez juste <legend>Contact Info</legend> après le fieldset d'ouverture. Comme dans cet exemple :

<div class="jpj8aa">
<fieldset class=" collapsible">
    <legend>Contact Info</legend>
    <div id="jpj8"><?php print form_render($form['field_name']); ?></div>
    <div id="jpj8a"><?php print form_render($form['field_email']); ?></div>
    <div id="jpj8b"><?php print form_render($form['field_phone_0']); ?></div>
    <div id="jpj8c"><?php print form_render($form['field_website']['0']['value']['link']); ?></div>
    <div id="jpj8e"><?php print form_render($form['field_description']); ?></div>
</fieldset>
</div>

Ce qui donnera ceci :

101092_4

Interestings bits

C'est un peu bizarre/curieux/étrange/fantasque/singulier/surprenant mais à la fin de votre fichier tpl.php mettez cette ligne

<?php
print form_render($form);
?>

qui affichera tous les objets du formulaire restants (champs et boutons) qui n'auront pas été préalablement référencés. Cela veut dire que tous les champs qui n'étaient pas explicitement ajoutés par le code précédent seront maintenant affichés. Mais si vous êtes comme moi, la raison pour laquelle vous ne les avez pas explicitement ajoutés c'est que vous n'en vouliez pas !

Aussi, pour se débarrasser de ces champs indésirables, j'ai trouvé deux méthodes, une qui marche pour moi (et dont je suis sûr qu'elle est mauvaise car elle n'est pas très élégante) (NDT : Ah l'élégance en programmation...) et une autre qui est très élégante, mais qui ne marche pas avec moi. J'aimerais bien utiliser la voie élégante en premier... qui est de surcharger explicitement les champs indésirables dans votre fichier template.php. Par exemple, si je ne veux pas afficher le site, je mets ceci :

<?php
$form
['field_website'] = '';
?>

dans le fichier template.php., à l'intérieur de votre fonction surchargée (avant le callback). La lecture de cette ligne de code nous montre que nous identifions le champ du formulaire et initialisons sa valeur à rien. Voici à quoi ressemblerait la fonction :

<?php
// Add Form Start (jghyde)
if ((arg(0) == 'node') && (arg(1) == 'add') && (arg(2) == 'content_event_listing')){
function 
phptemplate_node_form($form) {
    
$form['field_website'] = '';
    return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
}
}
// Add Form End

// Edit Form Start (Dublin Drupaller)
if ((arg(0) == 'node') && (arg(2) == 'edit')){
$node node_load(array('nid' => arg(1)));
if (
$node->type == 'content_event_listing'){
    function 
phptemplate_node_form($form) {
      
$form['field_website'] = '';
     return 
_phptemplate_callback('event_listing_edit', array('user' => $user'form' => $form));
    }
  }
}
// Edit Form End
?>

Notez que je dois mettre le bout de code à la fois dans les sections « Add form » et « Edit form » nouvellement ajoutées.

L'inélégante façon de faire est d'ajouter les champs indésirables à votre fichier tpl.php, tout comme ceux qui sont souhaités, et d'ajouter un CSS display:none pour les styliser.

Étape 4 : modifier style.css

Bien ! Vous avez maintenant un formulaire avec tous les champs souhaités, aucun de eux indésirables et vous en avez peut-être même groupés quelques-uns dans un groupe repliable/dépliable. Et qu'est-ce qu'on fait maintenant ?

Vous pouvez maintenant styliser chacun de ces éléments avec des CSS. Je ne suis pas un gourou du CSS, alors ici je ne ferais que des choses simples :

  1. je montrerai un exemple de CSS pour cacher un champ
  2. je mettrais aussi deux champs côte à côte.

Pour cacher un champ avec les CSS, identifiez le div avec l'ID du champ que vous voulez cacher puis créez un style dans votre style.css pour ce div (ou dans votre feuille de style personnalisée. Je pense qu'il est recommandé d'utiliser sa propre feuille de style pour toute modification qui doit persister après une mise à jour).

Voici un exemple :

#jpj10 {
        display: none;
}

Pour mettre des champs côte à côte avec des CSS, vous devez les entourer avec des balises <span> au lieu de balises <div>, comme ceci :

<span id="jpj8b">
        <?php print form_render($form['field_phone']); ?>
</span>
<span id="jpj8c">
        <?php print form_render($form['field_website']['0']['value']['link']); ?>
</span>

Puis créez les styles flottants comme ceci :

#jpj8b, #jpj8c {
  float: left;
}
101092_5

Maintenant mes champs s'afficheront côte à côte. Je vous laisse améliorer la présentation, c'était juste la tambouille pour que ça marche !

Informations supplémentaires

FYI, pour ceux qui jouent avec Drupal 5.x, remplacez form_render() avec drupal_render() - merci à ericelbow.

Si vous souhaitez cacher les infos de révisions, quelques solutions peuvent être trouvées à http://drupal.org/node/117148.

(Il n'a pas remercié sa femme. C'est un geek ! NDT)


1.  Évidemment, «couple», dans ce contexte, ne signifie pas couple mais quelques. Mais bon, comment j'aurais fait une vanne sinon ? :-)  retour


2. Merci à vous, lecteurs, d'avoir supporté ces mauvaises blagues.