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 6) Formulaire d'édition


Dans cette partie,  nous allons mettre en place le formulaire d'édition de guitaristes pour nous permettre d'ajouter ou de modifier les données. Si vous êtes arrivés directement sur cette page, peut-être que vous aimeriez commencer par le début: Partie 1 | Partie 2 | Partie 3 | Partie 4 | Partie 5.

 1 Création du formulaire

Nous allons créer le formulaire :). Généralement, les formulaires Joomla sont dans des fichiers xml qui sont dans le dossier "forms" qui se trouve lui même dans le dossier "models". Donc nous allons commencer par créer un fichier "guitariste.xml" qui va définir les différents éléments du formulaire. Une balise "form" contient tous les éléments du formulaire. On peut aussi définir plusieurs balises "fieldset" pour séparer le formulaire en plusieurs onglets. pour ajouter un élément au formulaire, on utilise la balise "field" et c'est le type qui permet de déterminer quel type de champ doit être ajouté. Vous pouvez la liste des types de champ disponible sur ce lien. Notez que c'est possible de créer sois même son propre type de champ mais ceci fera partie d'un autre tutoriel. Voici le contenu actuel du fichier "guitariste.xml":


<?xml version="1.0" encoding="utf-8"?>
<form>
  <fieldset>
    <field name="id" type="text" 
      default="0" label="JGLOBAL_FIELD_ID_LABEL"
      readonly="true" class="readonly"
      description="JGLOBAL_FIELD_ID_DESC" />
      
      <field name="name" type="text" 
        label="COM_DJGUITARISTE_FIELD_NAME_LABEL"
        description="COM_DJGUITARISTE_FIELD_NAME_DESC"
required="true" class="inputbox" /> <field name="picture" type="media" directory="guitaristes" preview="true" label="COM_DJGUITARISTE_FIELD_PICTURE_LABEL" description="COM_DJGUITARISTE_FIELD_PICTURE_DESC" /> <field name="intro" type="editor" label="COM_DJGUITARISTE_FIELD_INTRO_LABEL" description="COM_DJGUITARISTE_FIELD_INTRO_DESC" filter="safehtml" /> <field name="biography" type="editor" label="COM_DJGUITARISTE_FIELD_BIOGRAPHY_LABEL" description="COM_DJGUITARISTE_FIELD_BIOGRAPHY_DESC" filter="safehtml" /> <field name="youtube_video" type="text" label="COM_DJGUITARISTE_FIELD_YOUTUBE_VIDEO_LABEL" description="COM_DJGUITARISTE_FIELD_YOUTUBE_VIDEO_DESC" class="inputbox" /> <field name="website" type="url" label="COM_DJGUITARISTE_FIELD_WEBSITE_LABEL" description="COM_DJGUITARISTE_FIELD_WEBSITE_DESC" class="inputbox" /> <field name="facebook" type="url" label="COM_DJGUITARISTE_FIELD_FACEBOOK_LABEL" description="COM_DJGUITARISTE_FIELD_FACEBOOK_DESC" class="inputbox" /> </fieldset> </form>

 

2 Mise en place du model

En copiant les fichiers en front-end, nous avons sûrement copier un fichier de model nommé "guitariste.php" (qui se trouve dans le dossier "models").  Nous allons maintenant ouvrir ce fichier et y apporter les modifications nécessaire pour le fonctionnement de notre formulaire d'édition. La classe DJGuitaristeModelGuitariste doit maintenant étendre la classe JModelAdmin au lieu de JModelItem. Nous allons garder la méthode getItem et nous devons ajouter deux autres méthodes (getForm et loadFormData) qui se chargerons de la création ou du pré-remplissage du formulaire. Voici le contenu du fichier:


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

class DJGuitaristeModelGuitariste extends JModelAdmin
{
  
  public function getItem($pk = null)
  {
    $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;
  }
  
  public function getForm($data = array(), $loadData = true)
  {
    $app = JFactory::getApplication();
    
    //Nous chargeons le formulaire ici
    $form = $this->loadForm('com_djguitariste.guitariste', 'guitariste', array('control'=>'jform', 'load_data'=>$loadData));
    if(empty($form)){
      return false;
    }  
    
    return $form;
  }
  
  protected function loadFormData()
  {
    $data = JFactory::getApplication()->getUserState('com_djguitariste.edit.guitariste.data', array());
    if(empty($data)){
      $data = $this->getItem();
    }  
    
    return $data;
  }
  
}

 

3 Création de la vue d'édition

Dans la vue liste, nous avons mis des liens sur les noms de guitariste. Ces liens devrait conduire à la page d'édition (layout=edit) :


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

Donc nous allons mettre le layout (la mise en page) edit en place. Donc dans "views/guitariste/tmpl/", nous devons créer un layout "edit.php". On peut aussi juste renommer le fichier "default.php" en "edit.php" mais notez que dans un même dossier de vue, il peut y avoir plusieurs fichiers layout. On peut avoir par exemple dans guitariste, un layout "edit.php" pour l'édition, un autre "print.php" pour imprimer et un autre "email.php" pour envoyer un guitariste par email... Pour nous ce qui nous intéresse en ce moment c'est juste le layout "edit.php". Nous allons créer le formulaire en utilisant les éléments de notre formulaire xml dans "edit.php". Voici à quoi devrait ressembler le contenu du fichier:


<?php
defined('_JEXEC') or die;
?>
<form action="<?php echo JRoute::_('index.php?option=com_djguitariste&layout=edit&id='.(int)$this->item->id); ?>" 
method="post" name="adminForm" id="djguitariste-guitariste-form" class="form-validate">
  <div class="row-fluid">
    <div class="span10 form-horizontal">
      <fieldset>
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#details" data-toggle="tab">
            <?php echo empty($this->item->id)? JText::_('COM_DJGUITARISTE_ADDING_NEW_GUITARISTE'): JText::sprintf('COM_DJGUITARISTE_EDIT_GUITARISTE', $this->item->id); ?>
            </a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="details">
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('id'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('id'); ?>
              </div>
            </div>
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('name'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('name'); ?>
              </div>
            </div>            
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('picture'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('picture'); ?>
              </div>
            </div>
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('intro'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('intro'); ?>
              </div>
            </div>
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('biography'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('biography'); ?>
              </div>
            </div>
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('youtube_video'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('youtube_video'); ?>
              </div>
            </div>
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('website'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('website'); ?>
              </div>
            </div>
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('facebook'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('facebook'); ?>
              </div>
            </div>
          </div>
          <input type="hidden" name="task" value="" />
          <?php echo JHtml::_('form.token'); ?>
        </div>
      </fieldset>
    
    </div>
  </div>
</form>

 Explications: Dans la balise form, la classe "form-validate" sert à informer Joomla qu'il faudra faire une validation côté client (javascript). Nous utilisons la balise ul pour créer l'entête (la navigation) des onglets. Pour l'instant notre formulaire est dans un même onglet (fieldset) mais on ajoutera d'autre onglets plus-tard.

Un div avec la classe control-group entoure chaque label et son champ (input) du formulaire. les méthodes getLabel et getInput de la classe JForm retourne respectivement le label et le champ. Le champ caché task aura sa valeur ajouté en javascript par Joomla en fonction du bouton sur lequel on cliquera (Enregistrer, Enregistrer une copie, Enregistrer en Fermer, Annuler...). Et bien sûr l'ajout du token de sécurité "echo JHtml::_('form.token'); " que je vous conseil de le mettre dans chaque formulaire que vous créerez pour Joomla pour des raisons de sécurité.

Nous allons maintenant ouvrir le fichier "view.html.php" qui se trouve dans dans "administrator/com_djguitariste/views/guitariste" et y apporter quelques modifications. La méthode display doit maintenant créer le formulaire. Pour nous faciliter la tâche, nous allons aussi renomme la variable "guitariste" par "item". Voici le contenu du fichier:


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

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

 4 Modification du fichier de langue

 Nous devons maintenant ajouter les nouveau clés dans notre fichier de langue pour rendre les textes sur le site lisibles. Comme nous sommes au côté administrateur, le chemin du fichier est "administrator/language/fr-FR/com_djguitariste.ini". Voici le contenu de ce fichier:


COM_DJGUITARISTE="Guitariste"

COM_DJGUITARISTE_FIELD_NAME_LABEL="Nom"
COM_DJGUITARISTE_FIELD_NAME_DESC="Entrez le nom du guitariste"
COM_DJGUITARISTE_FIELD_PICTURE_LABEL="Photo"
COM_DJGUITARISTE_FIELD_PICTURE_DESC="Sélectionnez une photo du guitariste"
COM_DJGUITARISTE_FIELD_INTRO_LABEL="Introduction"
COM_DJGUITARISTE_FIELD_INTRO_DESC="Écrivez un petit texte d'introduction qui sera utilisé sur la page liste"
COM_DJGUITARISTE_FIELD_BIOGRAPHY_LABEL="Biographie"
COM_DJGUITARISTE_FIELD_BIOGRAPHY_DESC="La biographie du guitariste"
COM_DJGUITARISTE_FIELD_YOUTUBE_VIDEO_LABEL="Clé de la vidéo Youtube"
COM_DJGUITARISTE_FIELD_YOUTUBE_VIDEO_DESC="Ajouter une clé d'une vidéo Youtube. Exemple: <b>HL0dGeVWWuo</b>"
COM_DJGUITARISTE_FIELD_WEBSITE_LABEL="Site Web"
COM_DJGUITARISTE_FIELD_WEBSITE_DESC="Entrez le site Web du guitariste"
COM_DJGUITARISTE_FIELD_FACEBOOK_LABEL="Url Facebook"
COM_DJGUITARISTE_FIELD_FACEBOOK_DESC="Entrez l'url de la page Facebook du guitariste"

COM_DJGUITARISTE_ADDING_NEW_GUITARISTE="Ajout d'un nouveau guitariste"
COM_DJGUITARISTE_EDIT_GUITARISTE="Modification du Guitariste dont le id est %d"

Dans le prochain tutoriel, nous allons ajouter les boutons pour sauvegarder les modifications. Cliquez ici pour lire la partie 7


  • Dernière modification le jeudi, 13 mai 2021 13:50
  • 1303
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.

Media