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

Créer un zone de connexion Utilisateur personnalisée

Date du document en anglais : 26 Août 2009 - 01h20 - http://drupal.org/node/92657  



Dans ce « How to » vous apprendrez à créer une barre utilisateur qui :

  • Affichera une form de connexion sur une seule ligne,
  • Affichera un message de bienvenue lorsque l'utilisateur sera connecté ainsi qu'une paire de liens utiles.

Voici à quoi cela ressemblera une fois terminé :

uneimage
uneimage

Comme vous pouvez le voir, ce how-to est écrit pour le thème Garland, qui est le thème par défaut pour Drupal 5. Mais vous pouvez tout aussi bien l'appliquer pour un autre thème.

Décider l'approche

Drupal est très puissant, il est si souple que vous pouvez utiliser plusieurs approches pour vos réalisations. Voilà pourquoi 5 minutes de réflexion ne seront pas de trop avant de mettre les mains dans le cambouis.

La solution à laquelle je pense ressemble à ceci :

  • Nous écrirons une fonction indépendante qui appellera garland_user_bar(). Avec le code approprié, elle retournera, selon le contexte, le code HTML de connexion ou le message de bienvenue.
  • Dans le fichier page.tpl.php, nous placerons un appel à cette fonction qui l'affichera en haut de page.
  • Cette fonction, si elle doit afficher la form de connexion, effacera la form de connexion par défaut, nous ne créerons pas la nôtre. Pourquoi ? Parce que l'examen de son code-source indique qu'en modifiant simplement les styles CSS nous pouvons l'afficher à notre façon sans réécrire le code de la form elle-même.
  • Si l'utilisateur est déjà connecté, la fonction retournera un chouette message de bienvenue et quelques liens utiles.
  • Nous connaissons maintenant la logique, reste à écrire les CSS pour changer l'apparence de la form

Oh ! Plaçons d'abord la fonction dans page.tpl.php

Commençons par là, mettons déjà l'appel à garland_user_bar()(même si elle n'existe pas encore), ainsi, tant que nous travaillerons avec garland_user_bar(), nous n'aurons qu'à rafraichir la page dans notre navigateur pour voir le résultat.

  1. Ouvrez themes/garland/page.tpl.php , vers la ligne 16 vous trouverez :
    <div id="navigation"></div>
    Ce <div> est le conteneur pour la barre du haut du thème Garland. Mettons-y l'appel à notre fonction garland_user_bar() :
    <div id="navigation"><?php print garland_user_bar() ?></div>

Ecrire la fonction garland_user_bar()

Avant de vous livrer le code entier, je vais vous expliquer comment nous allons l'écrire.

  1. Ouvrez themes/garland/template.php, écrivons une fonction vide à la fin du fichier, nous lui ajouterons le code par la suite :
    <?php
    function garland_user_bar() {
    }
    ?>
  2. Nous devons accéder à la variable globale $user, qui nous dira si l'utilisateur est connecté ou pas. La première ligne de la fonction sera donc :
    <?php
    global $user;
    ?>
  3. Je déclarerai aussi une nouvelle variable nommé $output, pour pouvoir lui ajouter ce que je voudrais. A la fin elle renverra son contenu à l'endroit où nous avons placé notre fonction dans page.tpl.php. Écrivons cette ligne :
    <?php
    $output 
    '';
    ?>
  4. Je veux vérifier si l'utilisateur est connecté ou pas. Ça se fait en vérifiant si la variable $user->uid existe ou pas puisque lorsque Drupal connecte un utilisateur, il modifie automatiquement $user->uid pour refléter l'ID utilisateur, toujours supérieur à zéro.
    Voici ce que nous devons ajouter :
    <?php
    if (!$user->uid) { // if user is NOT logged in..
    ?>
    Notez le ! qui signifie NON, le code indique if not $user->id, ce qui signifie si l'utilisateur n'est pas connecté
  5. Alors... Si l'utilisateur n'est pas connecté, on fait quoi ?... On affiche la login form ! Et comme je l'ai dit plus haut, puisque la login form de Drupal nous convient parfaitement, qu'elle a juste besoin que l'on modifie ses CSS, nous n'avons pas besoin d'écrire la nôtre.
    Voici comment appeler la login form :
    <?php
    $output 
    .= drupal_get_form('user_login_block');
    ?>
    drupal_get_form() est une fonction très pratique : vous lui donnez le nom de la fiche et elle vous la renvoie, prête à l'emploi.
  6. Nous avons géré le cas de l'utilisateur non connecté. Mais que faire s'il est déjà connecté ?
    Ajoutons le code pour gérer cette situation :
    <?php
    } else {
    ?>
  7. Si l'utilisateur est connecté, nous voulons lui afficher un message de bienvenue et quelques liens utiles. Voyons le message :
    <?php
    $output 
    .= t(
        
    '<p class="user-info">Salut !user, bienvenue.</p>'
        array(
            
    '!user' => theme(
                
    'username'
                
    $user
                
    )
            )
        );
    ?>
    la fonction t() encapsule la totalité du message, qui peut ainsi être traduit. Pour afficher les noms utilisateurs, vous devriez toujours utiliser theme('username', $user).
  8. Les liens maintenant... Je veux deux liens : « Votre compte » et « Déconnexion ». Drupal a une fonction appelée theme_item_list() à laquelle vous pouvez donner une liste d'items et qui vous les retournera dans une liste <ul> HTML.
    « Votre compte »est lié à ?q=user/<uid> et « Déconnexion » a ?q=logout. Ce sont des URL standards dans Drupal. Voici le code :
    <?php
    $output 
    .= theme('item_list', array(
        
    l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
        
    l(t('Sign out'), 'logout')));
    ?>
    Oh ! Une nouvelle fonction ! l() génère des liens. Vous lui passez le titre et l'URL et elle vous retourne un lien <a href="..." title="..">....</a> en bonne et due forme.
  9. Il reste une dernière chose avant d'obtenir l'affichage. Je veux tout encapsuler dans un <div id="user-bar">...</div>. Pourquoi ? Parce qu'il sera plus simple d'écrire les CSS s'appliquant à cette barre. Comment ? En utilisant l'opérateur . (dot). Comme ceci :
    <?php
    $output 
    '<div id="user-bar">' $output '</div>'
    ?>
  10. Maintenant que tout est prêt, il ne reste qu'à renvoyer le code HTML ainsi généré :
    <?php
    return $output
    ?>

La fonction complète aura donc ce code :

<?php
function garland_user_bar() {
  global 
$user;                                                                
  
$output '';
if (!
$user->uid) {                                                          
    
$output .= drupal_get_form('user_login_block');                            
}                                                                            
  else {                                                                      
    
$output .= t('<p class="user-info">Hi !user, welcome back.</p>', array('!user' => theme('username'$user))); 
    
$output .= theme('item_list', array(
      
l(t('Your account'), 'user/'.$user->uid, array('title' => t('Edit your account'))),
     
l(t('Sign out'), 'logout')));
}
  
$output '<div id="user-bar">'.$output.'</div>';
  return 
$output;
}
?>

Personnalisation des styles !

Maintenant que la form de connexion et les messages de bienvenue sont correctement affichés aux utilsiateurs, il reste à personnaliser leur apparence. C'est le boulot des CSS.

  1. D'abord, créons un nouveau fichier CSS dans lequel nous écrirons les styles de la nouvelle user-bar :
    themes/garland/user_bar.css.
  2. Ce fichier CSS existe désormais mais personne ne le connait... Nous allons modifier page.tpl.php pour l'inclure dans la page. Comment ? En ouvrant themes/garland/page.tpl.php et en ajoutant ce code APRES la ligne 11 :
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/user_bar.css";</style>
    Ce code ajoutera la feuille de style à la page.
  3. Écrivons maintenant les règles CSS kivonbien. Rassurez-vous, ce n'est pas très long à faire, ce sont juste les commentaires qui prennent de la place :P
    /*
    this will expand the default garland bar, make it bigger so our form and message can fit in.
    */

    #navigation {
      height: 3em;
    }
    /*
    by default, the default form adds some surrounding space, this cancels it
    */

    #navigation div.form-item,
    #navigation div.content {
      margin: 0;
      padding: 0;
    }
    /*
    this adds some space in top and bottom, so anything inside can look vertically
    centered
    */

    #user-bar {
      padding: .65em 0;
    }
    /*
    by default, fields labels tries to reserve a whole line for itself, this
    cancels that and and sends it to the left.
    it also adds some space on the right and left of the label to look easy on
    the eye.
    */

    #user-bar label {
      float: left;
      margin-left: 10px;
      margin-right: 2px;
    }
    /*
    inputs too, they try to reserve a whole line for itself, this
    cancels that and sends it to the left
    */

    #user-bar input {
      float: left;
    }
    /*
    I don't like the required * (asterisks), so I hide them.
    */

    #user-bar span.form-required {
      display: none;
    }
    /*
    the form submit button, it's so tight so we expand it a bit, and give it some
    free space around.
    */

    #user-bar input.form-submit {
      margin-top: -1px;
      margin-left: 10px;
      padding: 0 .5em;
    }
    /*
    now this is for the links list, lists by default tries to reserve a whole line
    also they add space surrounding them. we cancel all that and send the list
    to the right
    */

    #user-bar div.item-list ul {
      float: right;
      margin: 0; padding: 0;
      margin-right: 10px;
    }
    /*
    remember, stylign above was for the whole list, now for each item,
    we all know each item in the list by default exists on a separate line, also
    has that bullet on the left. we cancel all that. and makes all items sit beside
    each other
    */

    #user-bar div.item-list ul li {
      float: left;
      background: none;
      margin: 0 5px;
      padding: 0 10px;
      border: 1px solid #b8d3e5;
    }
    /*
    this is the "Hi user, welcome back message".
    by default &lt;p&gt; tries to exist on a separate line, we cancel that.
    also by default &lt;p&gt; has some surrounding space, we cancel that too, and give it
    only space on the left.
    */

    #user-bar p.user-info {
      float: left;
      padding: 0;
      margin: 0 0 0 10px;
    }

Et voilà !

Une solution qui marche et qui n'a pas demandé de surcharger le moindre code existant. Et comme nous n'avons pas codé de HTML en dur, nous n'aurons pas besoin de maintenir le code au fil des mises à jour de Drupal.