Connexion S'inscrire

Connectez-vous

Login *
Mot de passe *
Se souvenir de moi

Créer un compte

Les champs marqués d'un astérisque (*) sont requis.
Nom *
Login *
Mot de passe *
Vérification mot de passe *
Email *
Vérification email *
Captcha *

Création d'un composant Joomla (partie 3) La vue détail


Dans cette partie du tutoriel, nous allons mettre en place la page détail qui est la page qui affichera les informations d'un seul guitariste. Pour comprendre ce tutoriel, vous devez d'abord lire la partie 1 et 2, Cliquez ici pour lire la partie 1 ou Cliquez ici pour lire la partie 2.

Dans le fichier controller.php qui est à la racine de dossier de notre composant, nous ajoutons cette ligne de code dans la méthode "display" pour récupérer l'id du guitariste dans l'url:

$id = $this->input->getInt('id');

1 - Création de la vue

Dans le dossier "views", nous allons créer un nouveau dossier nommé "guitariste" (sans s). Le dossier "views" doit déjà contenir une vue "guitaristes" qui affiche la liste des guitaristes (voir partie 2). Pour nous faciliter la tâche, nous allons copier tout le contenu du dossier "guitaristes" dans "guitariste" qu'on vient de créer. La structure du dossier du composant devrait ressembler à ceci:

Ouvrez le fichier "view.html.php" qui se trouve dans "guitariste" et effacez les "s" dans les noms de la classe. Le nom de la classe devient donc "DJGuitaristeViewGuitariste". Et le contenu du fichier devrait ressembler à ceci:


class DJGuitaristeViewGuitariste extends JViewLegacy
{
  public function display($tpl = null)
  {
    $guitariste = $this->get('Item');
    $this->guitariste = &$guitariste;
    
    parent::display($tpl);
    
  }
}

 Nous allons maintenant ouvrir le fichier "default.php" qui se trouvre dans "guitariste/tmpl/" pour y apporter des modifications afin d'afficher un seul guitariste:


<?php
defined('_JEXEC') or die;
?>
<div class="item-page guitaristes">
<?php
  if(empty($this->guitariste)) { ?>
    <p><?php echo JText::_('COM_DJGUITARISTE_NO_GUITARISTE_FOUND'); ?></p>  
  <?php  
  }
  else {
    ?>
      <?php
        //Nous essayons d'afficher la photo si elle n'est pas vide
       if(!empty($this->guitariste->picture)){ ?>
        <img src="/<?php echo $this->guitariste->picture; ?>" class="photo-guitariste" />
       <?php } ?>
      <h3><?php echo JText::_('COM_DJGUITARISTE_NAME').': '. $this->guitariste->name; ?></h3>
      <?php 
      //Nous affichons son site uniquement s'il en a un.
      if(!empty($this->guitariste->website)){ ?>
        <p><?php echo JText::_('COM_DJGUITARISTE_WEBSITE').' :'. $this->guitariste->website; ?></p>
      <?php } ?>
      
      <?php if(!empty($this->guitariste->facebook)){ ?>
        <p><a href="/<?php echo $this->guitariste->facebook; ?>"><?php echo JText::_('COM_DJGUITARISTE_FACEBOOK'); ?></a></p>
      <?php } ?>
      
      <?php if(!empty($this->guitariste->youtube_video)){ ?>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/<?php echo $this->guitariste->youtube_video; ?>" frameborder="0" allowfullscreen></iframe>
      <?php } ?>
      <div>
        <h4><?php echo JText::_('COM_DJGUITARISTE_BIOGRAPHY') ?></h4>
        <?php echo $this->guitariste->biography; ?>
      </div>
    <?php  
    }
?>
</div>

Nous regarderons comment ajouter un fichier CSS plus tard.

2 Création du modèle

Nous avons besoin de créer un fichier modèle pour y définir la méthode getItem qui se chargera de récupérer les informations du guitariste dont l'id est dans l'url. Donc on va créer dans le dossier "models" un fichier nommé "guitariste.php" et y définir la classe qui selon les norme de Joomla devrait se nommé "DJGuitaristeModelGuitariste" (Nom du composant suivit de Model et du nom de la vue). Cette classe étend JModelItem. Dans cette classe pour le moment, nous avons juste besoin de la méthode getItem. Le contenu final devrait ressembler à ceci:


<?php
defined('_JEXEC') or die;

class DJGuitaristeModelGuitariste extends JModelItem
{
  
  public function getItem()
  {
    $app = JFactory::getApplication();
    $id = $app->input->getInt('id');
    
    $db = $this->getDbo();
    $query = $db->getQuery(true);
    $query->select('*');
    $query->from('#__djguitariste_items');
    $query->where('id = '.$id);
    
    $db->setQuery($query);
    $result = $db->loadObject();
    
    return $result;
  }
  
}

À savoir: La classe JApplication nous permet de récupérer les données passé en GET ou en POST. Dans notre cas c'est le id dans l'url donc en GET. Le reste est la requête pour récupérer les données.  

3 Modification de la vue liste

Nous allons maintenant modifier la vue liste pour rendre les noms cliquables. Nous allons utiliser la classe JRoute pour afficher un lien sur chaque nom. La vue liste est le fichier "default.php" qui se trouve dans "views/guitaristes/tmpl/". Nous allons ouvrir ce fichier et modifier la ligne qui affiche le nom du guitariste comme ceci:


<a href="/<?php echo JRoute::_("index.php?option=com_djguitariste&view=guitariste&id=".$guitariste->id); ?>">
  <?php echo $guitariste->name; ?>
</a>

Maintenant si vous accéder à la page http://urldevotresite/index.php?option=com_djguitariste, la liste des noms de guitaristes devrait être des liens.

4 Ajout d'un fichier de langue

Si vous êtes curieux et que vous avez cliquer sur un nom d'un guitariste, vous aller voir quelque chose comme ça "COM_DJGUITARISTE_NAME". Rassurez-vous on ne va pas le laisser comme ça. C'est dans le fichier de langue qu'on va mettre le texte qui remplacera ces majuscules :). On aurait pu écrire directement dans le fichier de vue mais ceci est une très mauvaise pratique, je vous le déconseille fortement car ceci sera difficile à gérer dans le cas d'un site multilingue et aussi supposons que vous travaillez en équipe sur le projet, ceci évitera à ce qu'un intégrateur ou un gestionnaire de projet ouvre votre code PHP pour modifier un texte (après on ne saura pas qui a créé le bug :D). Donc le fichier de langue devrait se trouver dans le dossier "language" qui se trouve à la racine de votre site. Dans le dossier de langue, vous devrez voir au moins 2 dossiers "overrides" et le dossier de la langue d'installation de votre site Joomla. Si vous avez installé plusieurs langue, vous verrez plusieurs dossier (un dossier pour chaque langue). Si votre site est en français, le dossier de langue peut être "fr-FR", "fr-CA"... Nous allons créer dans le dossier de langue et "fr-FR" un fichier nommé "fr-FR.com_djguitariste.ini" (remplacer le préfixe de langue "fr-FR" par celui du repertoire de langue de votre si ce n'est pas en français de France). Donc voici ce qu'il faut rajouter dans le fichier de langue qu'on vient de créer:


COM_DJGUITARISTE_NO_GUITARISTE_FOUND="Guitariste non trouvé"
COM_DJGUITARISTE_NAME="Nom du guitariste"
COM_DJGUITARISTE_WEBSITE="Site Web"
COM_DJGUITARISTE_FACEBOOK="Page Facebook"
COM_DJGUITARISTE_BIOGRAPHY="Biographie"

Voilà maintenant, un clique sur un nom de guitariste affichera les détails de celui-ci. Cliquez ici pour lire la partie 4.


  • Dernière modification le jeudi, 28 septembre 2017 15:09
  • 883
Docteur Joomla

Après plus de 10 ans d'expérience en Joomla, je lance ce Blog pour partager mes connaissances avec les autres développeurs Joomla.