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 13) Les métadonnées


Dans cette partie,  nous allons, ajouter la prise en charge des métadonnées (meta description et meta key) qui font partie des champs standards de Joomla. Tout se passera au côté administrateur donc dans le dossier administrator. 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 | Partie 6 | Partie 7 | Partie 8 | Partie 9 | Partie 10 | Partie 11 | Partie 12

1 - Introduction

Les champs meta description et meta key seront utilisé dans l'entête de la page du guitariste. Le premier fournit une description courte de la page et le second liste les mots clés. Ces informations ne seront pas visible sur la page mais les moteurs de recherche utilisent. Nous allons utiliser certains des champs que nous avons ajouté à notre table dans la base de données à la partie 9.

 

2 - Le formulaire XML

 Jusqu'à présent, tous les élément de notre formulaire sont placés dans une même balise fieldset. Maintenant nous allons ajouter un nouveau fieldset qui va contenir les champs meta key et meta description. Donc ouvrons le fichier guitariste.xml qui devrait se trouver dans models/forms et ajoutons les lignes suivantes juste après la fermeture de la balise fieldset.


<fieldset name="metadata"
	label="JGLOBAL_FIELDSET_METADATA_OPTIONS">
	
	<field name="metakey" type="textarea"
		   label="JFIELD_META_KEYWORDS_LABEL"
		   description="JFIELD_META_KEYWORDS_DESC"
		   class="inputbox" rows="3" cols="30"
		   labelclass="control-label" />
		   
	<field name="metadesc" type="textarea"
		   label="JFIELD_META_DESCRIPTION_LABEL"
		   description="JFIELD_META_DESCRIPTION_DESC"
		   class="inputbox" rows="3" cols="30"
		   labelclass="control-label" />
</fieldset>

Tout le contenu du fichier devrait ressembler maintenant à ceci:


<?xml version="1.0" encoding="utf-8"?>
<form>
  <fieldset addfieldpath="/administrator/components/com_categories/models/fields">
    <field id="state" name="state" type="list"
      label="JSTATUS"
      description="JFIELD_PUBLISHED_DESC"
      class="input span12 small"
      size="1"
      default="1"
      >
        <option value="1">JPUBLISHED</option>
        <option value="0">JUNPUBLISHED</option>
        <option value="2">JARCHIVED</option>
        <option value="-2">JTRASHED</option>
      
      </field>
      
  
    <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="alias" type="text"
        label="JFIELD_ALIAS_LABEL"
        description="JFIELD_ALIAS_DESC"
        class="inputbox" />
        
      <field name="catid" type="category"
        extension="com_djguitariste"
        required="true"
        label="JCATEGORY"
        description="JFIELD_CATEGORY_DESC"
        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>
  <fieldset name="metadata"
        label="JGLOBAL_FIELDSET_METADATA_OPTIONS">
        
        <field name="metakey" type="textarea"
               label="JFIELD_META_KEYWORDS_LABEL"
               description="JFIELD_META_KEYWORDS_DESC"
               class="inputbox" rows="3" cols="30"
               labelclass="control-label" />
               
        <field name="metadesc" type="textarea"
               label="JFIELD_META_DESCRIPTION_LABEL"
               description="JFIELD_META_DESCRIPTION_DESC"
               class="inputbox" rows="3" cols="30"
               labelclass="control-label" />  
  </fieldset>  
</form>

 3 - Le calque de vue (layout)

Jusqu'à présente le formulaire utilise juste un seul fichier de layout (edit.php). Nous allons en créer un autre pour le nouveau fieldset. Donc dans views/guitariste/tmpl, nous allons créer un layout nommé edit_metadata.php. Ce fichier va parcourir la balise fieldset nommé metadata et afficher les éléments qu'il contient. Voici le contenu du fichier edit_metadata.php.


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

foreach($this->form->getFieldset('metadata') as $field): ?>
  <div class="control-group">
    <div class="control-label"><?php echo $field->label; ?></div>
    <div class="controls"><?php echo $field->input; ?></div>
  </div>
<?php endforeach; ?>

Maintenant, nous allons apporter quelques modifications au fichier edit.php pour afficher notre nouveau layout dans un nouvel onglet. Nous allons rajouter aussi un élément li dans à balise ul portant la classe "nav-tab" pour rajouter l'entête de cet onglet. Donc juste à la fermeture du premier li, nous ajoutons un nouveau comme dans le code suivant. La partie colorée est ce qu'il faut rajouter à notre layout; le premier li devrait déjà être présent dans ce fichier.


<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>

  <li>
   <a href="#metadata" data-toggle="tab">
	<?php echo JText::_('JGLOBAL_FIELDSET_METADATA_OPTIONS'); ?>
   </a>
  </li>

</ul>

Puis à la fermeture du div portant le id details, nous allons ajouter un nouveau div dans lequel nous allons charger le layout edit_metadata.php et l'afficher. Comme ceci:


<div class="tab-pane" id="metadata">
	<fieldset>
		<?php echo $this->loadTemplate('metadata'); ?>
	</fieldset>
</div>

Le contenu du fichier au complet devrait ressembler maintenant à ceci:


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

JHtml::_('behavior.tooltip');
JHtml::_('behavior.formvalidation');
?>
<script type="text/javascript">
    Joomla.submitbutton = function(task)
    {
        if(task == 'guitariste.cancel' || document.formvalidator.isValid(document.id('djguitariste-guitariste-form'))){
            <?php //echo $this->form->getField('descrption')->save(); ?>
            Joomla.submitform(task, document.getElementById('djguitariste-guitariste-form'));
        }else{
            alert('<?php echo $this->escape(JText::_('JGLOBAL_VALIDATION_FORM_FAILED')); ?>')
        }

    }  
</script>

<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>
		  
          <li>
           <a href="#metadata" data-toggle="tab">
            <?php echo JText::_('JGLOBAL_FIELDSET_METADATA_OPTIONS'); ?>
           </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('alias'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('alias'); ?>
              </div>
            </div>
            
            <div class="control-group">
              <div class="control-label">
                <?php echo $this->form->getLabel('catid'); ?>
              </div>
              <div class="controls">
                <?php echo $this->form->getInput('catid'); ?>
              </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>
          
          <div class="tab-pane" id="metadata">
            <fieldset>
              <?php echo $this->loadTemplate('metadata'); ?>
            </fieldset>
          </div>
		  
          
          <input type="hidden" name="task" value="" />
          <?php echo JHtml::_('form.token'); ?>
        </div>
      </fieldset>
    
    </div>
    
    <!-- le sidebar pour publier et dépublier-->
    <div class="span2">
      <h4 class="title"><?php echo JText::_('JDETAILS'); ?></h4>
      <hr />
      <fieldset class="form-vertical">
        <div class="control-group">
          <div class="control-label">
            <?php echo $this->form->getLabel('state'); ?>
          </div>
          <div class="controls">
            <?php echo $this->form->getInput('state'); ?>
          </div>
        </div>  
      </fieldset>
    </div>
    
  </div>
</form>

 4 - Le fichier de table (guitariste.php)

Nous allons ajouter à la méthode check, un bloc de code pour filtrer les mots clés (meta key) qui devrait être juste des chaines de caractères séparées par des virgules. Le fichier de table guitariste.php se trouve dans le dossier tables. Voici le block de code à rajouter dans la méthode check.


//Filtrage des mots clés
if(!empty($this->metakey)){
  $to_remove = array("\n", "\r", "\"", "<", ">");
  $cleaning = JString::str_ireplace($to_remove, "", $this->metakey);
  
  $keys = explode(',', $cleaning);  
  $clean_keys = array();
  foreach($keys as $key){
	$clean_keys[] = trim($key);
  }
  
  $this->metakey = implode(", ", $clean_keys);
}

Le contenu du fichier de table guitariste.php devrait ressembler à ceci : 


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

class DJGuitaristeTableGuitariste extends JTable
{
  
  protected $_columnAlias = array('published' => 'state');
  
  public function __construct(&$db){
      parent::__construct('#__djguitariste_items', 'id', $db);
  }
  
  public function check(){
    
    //Nous vérifions que le nom n'est pas vide
    if(trim($this->name) == ''){
       $this->setError(JText::_('COM_DJGUITARISTE_ERROR_TABLE_NAME'));
       return false;
    }
    
    
    $this->alias = JApplication::stringURLSafe($this->alias);
    //Si le champs alias est vide, nous le créons à partir du nom
    if(empty($this->alias)){
      $this->alias = JApplication::stringURLSafe($this->name);
    }
    
    //Nous vérifions s'il n'y a pas de doublons dans la base de données
    $table = JTable::getInstance('Guitariste', 'DJGuitaristeTable');
    if($table->load(array('alias'=>$this->alias, 'catid'=>$this->catid)) && ($table->id != $this->id || $this->id == 0))
    {
      $this->setError(JText::_('COM_DJGUITARISTE_ERROR_ALIAS_DUPPLICATED'));
      return false;
    }
    
    //Nous allons valider la catégorie
    if(trim($this->catid) == ''){
      $this->setError(JText::_('COM_DJGUITARISTE_CATEGORY_MISSING'));
      return false;
    }
    

    //Filtrage des mots clés
    if(!empty($this->metakey)){
      $to_remove = array("\n", "\r", "\"", "<", ">");
      $cleaning = JString::str_ireplace($to_remove, "", $this->metakey);
      
      $keys = explode(',', $cleaning);  
      $clean_keys = array();
      foreach($keys as $key){
        $clean_keys[] = trim($key);
      }
      
      $this->metakey = implode(", ", $clean_keys);
    }

    
    return true;
  }
  
}

Voilà maintenant dans le formulaire d'édition, nous avons un nouvel onglet Métadonnées sous lequel on peut ajouter les mots-clés et la description.

Lire la suite...


  • Dernière modification le jeudi, 28 septembre 2017 15:17
  • 439
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.