J3.x

Développement d'un composant MVC - Ajout de vérifications

From Joomla! Documentation

< J3.x:Developing an MVC Component
This page is a translated version of the page J3.x:Developing an MVC Component/Adding verifications and the translation is 97% complete.
Outdated translations are marked like this.
Other languages:
English • ‎español • ‎français • ‎italiano • ‎العربية • ‎中文(台灣)‎
Joomla! 
3.x
Didacticiel
Développement d'un composant MVC

Ajout d'une requête de variable dans le type de menu

Utilisation de la base de données

Backend de base

Ajout de la gestion des langues

Ajout d'actions en backend

Ajout de décorations pour le backend

Ajout de vérifications

Ajout de catégories

Ajout de configuration

  1. Ajout d'ACL

Ajout d'un fichier script installation/désinstallation/mise à jour

Ajout d'un formulaire de frontend

  1. Ajout d'une image
  2. Ajout d'un plan
  3. Ajout d'AJAX
  4. Ajout d'un alias

Utilisation du filtre de langues

  1. Ajouter une fenêtre modale
  2. Ajout d'associations
  3. Ajout de Checkout
  4. Ajout d'un filtre
  5. Ajout de niveaux
  6. Ajout de versions
  7. Ajout de tags
  8. Ajout d'accès
  9. Ajout d'un processus de traitement
  10. Ajout d'un cache
  11. Ajout d'un fil d'actualité

Ajout d'un serveur de mise à jour

  1. Adding Custom Fields
  2. Upgrading to Joomla4



Ceci est une série qui regroupe plusieurs articles pour devenir un didacticiel sur la façon de développer un Composant pour Joomla! Joomla 3.x suivant le principe Modèle-Vue-Contrôleur.

Commencez avec l'introduction, et naviguez dans les articles de cette série soit à l'aide des boutons de navigation en bas des articles, soit grâce au menu de droite : Les articles de cette série.



Introduction

Ce didacticiel fait partie de la série de didacticiels sur le Développement d'un Composant MVC pour Joomla! 3.x. Vous êtes invité à lire les articles précédents de cette série avant de lire celui-ci. Consultez Validation de formulaires pour des informations générales sur la validation des formulaires (règles).

Vous pouvez regarder une vidéo associée à cette étape sur Étape 11, ajout de vérifications. Cette vidéo et les vidéos suivantes sont enregistrées en HD; Cliquez sur le menu déroulant des paramètres de YouTube pour visualiser la meilleure résolution.

Vérification du formulaire (côté client)

Voir Validation de formulaire côté client pour plus d'informations sur les didacticiels relatifs à la vérification côté client. Les formulaires peuvent être vérifiés côté client à l'aide de code javascript. Dans le fichier admin/views/helloworld/tmpl/edit.php, ajoutez les lignes suivantes : admin/views/helloworld/tmpl/edit.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access
defined('_JEXEC') or die('Restricted access');
?>
<form action="<?php echo JRoute::_('index.php?option=com_helloworld&layout=edit&id=' . (int) $this->item->id); ?>"
    method="post" name="adminForm" id="adminForm" class="form-validate">
    <div class="form-horizontal">
        <fieldset class="adminform">
            <legend><?php echo JText::_('COM_HELLOWORLD_HELLOWORLD_DETAILS'); ?></legend>
            <div class="row-fluid">
                <div class="span6">
                    <?php foreach ($this->form->getFieldset() 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; ?>
                </div>
            </div>
        </fieldset>
    </div>
    <input type="hidden" name="task" value="helloworld.edit" />
    <?php echo JHtml::_('form.token'); ?>
</form>

Vous avez peut-être remarqué que le formulaire html contenu dans le fichier admin/views/helloworld/tmpl/edit.php possède désormais une classe css form-validate. Nous avons également ajouté un appel JHtml::_('behavior.formvalidator'); pour indiquer à Joomla! d'utiliser son formulaire de validation javascript.

Modifiez le fichier admin/models/forms/helloworld.xml pour indiquer que le champ greeting doit être vérifié :

<?xml version="1.0" encoding="utf-8"?>
<form
				addrulepath="/administrator/components/com_helloworld/models/rules"
>
	<fieldset>
		<field
				name="id"
				type="hidden"
				/>
		<field
				name="greeting"
				type="text"
				label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
				description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
				size="40"
				class="inputbox validate-greeting"
				validate="greeting"
				required="true"
				default=""
				/>
	</fieldset>
</form>

Notez que, pour l'instant, la classe css est désormais "inputbox validate-greeting" et que l'attribut required est défini sur true. Cela signifie que ce champ est obligatoire et doit être vérifié par un gestionnaire du validateur de formulaire du framework de Joomla.

A l'aide de votre gestionnaire de fichiers et éditeur préférés, ajoutez un fichier admin/models/forms/helloworld.js contenant :

admin/models/forms/helloworld.js

jQuery(function() {
    document.formvalidator.setHandler('greeting',
        function (value) {
            regex=/^[^0-9]+$/;
            return regex.test(value);
        });
});

Il ajoute un gestionnaire au validateur de formulaire de Joomla! pour les champs contenant la classe css "validate-greeting". Dès que le champ greeting est modifié, le gestionnaire sera exécuté pour vérifier sa validité (pas de chiffres). La dernière étape consiste à vérifier le formulaire lorsque le bouton enregistrer est cliqué. A l'aide de votre gestionnaire de fichiers et éditeur préférés, ajoutez un fichier admin/views/helloworld/submitbutton.js contenant :

admin/views/helloworld/submitbutton.js

Joomla.submitbutton = function(task)
{
	if (task == '')
	{
		return false;
	}
	else
	{
		var isValid=true;
		var action = task.split('.');
		if (action[1] != 'cancel' && action[1] != 'close')
		{
			var forms = jQuery('form.form-validate');
			for (var i = 0; i < forms.length; i++)
			{
				if (!document.formvalidator.isValid(forms[i]))
				{
					isValid = false;
					break;
				}
			}
		}
	
		if (isValid)
		{
			Joomla.submitform(task);
			return true;
		}
		else
		{
			alert(Joomla.JText._('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE',
			                     'Some values are unacceptable'));
			return false;
		}
	}
}

Cette fonction va vérifier que tous les formulaires contenant la classe css "form-validate" sont bien valides. Notez qu'elle affichera un message d'alerte traduit par le framework de Joomla.

La classe de vue HelloWorldViewHelloWorld doit être modifiée afin d'utiliser ces fichiers javascript :

admin/views/helloworld/view.html.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
 * HelloWorld View
 *
 * @since  0.0.1
 */
class HelloWorldViewHelloWorld extends JViewLegacy
{
	/**
	 * View form
	 *
	 * @var         form
	 */
	protected $form = null;

	/**
	 * Display the Hello World view
	 *
	 * @param   string  $tpl  The name of the template file to parse; automatically searches through the template paths.
	 *
	 * @return  void
	 */
	public function display($tpl = null)
	{
		// Get the Data
		$this->form = $this->get('Form');
		$this->item = $this->get('Item');
		$this->script = $this->get('Script');

		// Check for errors.
		if (count($errors = $this->get('Errors')))
		{
			JError::raiseError(500, implode('<br />', $errors));

			return false;
		}


		// Set the toolbar
		$this->addToolBar();

		// Display the template
		parent::display($tpl);

		// Set the document
		$this->setDocument();
	}

	/**
	 * Add the page title and toolbar.
	 *
	 * @return  void
	 *
	 * @since   1.6
	 */
	protected function addToolBar()
	{
		$input = JFactory::getApplication()->input;

		// Hide Joomla Administrator Main menu
		$input->set('hidemainmenu', true);

		$isNew = ($this->item->id == 0);

		if ($isNew)
		{
			$title = JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW');
		}
		else
		{
			$title = JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT');
		}

		JToolbarHelper::title($title, 'helloworld');
		JToolbarHelper::save('helloworld.save');
		JToolbarHelper::cancel(
			'helloworld.cancel',
			$isNew ? 'JTOOLBAR_CANCEL' : 'JTOOLBAR_CLOSE'
		);
	}
	/**
	 * Method to set up the document properties
	 *
	 * @return void
	 */
	protected function setDocument() 
	{
		
		JHtml::_('behavior.framework');
		JHtml::_('behavior.formvalidator');

		$isNew = ($this->item->id < 1);
		$document = JFactory::getDocument();
		$document->setTitle($isNew ? JText::_('COM_HELLOWORLD_HELLOWORLD_CREATING') :
                JText::_('COM_HELLOWORLD_HELLOWORLD_EDITING'));
		$document->addScript(JURI::root() . $this->script);
		$document->addScript(JURI::root() . "/administrator/components/com_helloworld"
		                                  . "/views/helloworld/submitbutton.js");
		JText::script('COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE');
	}
}

Désormais, cette vue :

  • vérifie que le modèle n'a pas d'erreurs ;
  • ajoute deux fichiers javascript ;
  • injecte une traduction javascript à l'aide de la fonction Joomla! JText::script.

You will also notice our two lines adding additional behaviors when injecting our scripts. By default, Joomla injects the Javascript we specify into the page before its own global Javascript libraries, such as jQuery and Joomla Core. As our Javascript code directly utilises the Joomla object, loading it onto the page before the global Javascript libraries will result in immediate failure, and the form validation will not run.

By specifying these two behaviors via the JHtml helper class prior to injecting our own Javascript, we ensure they are loaded first on the page, and our code will execute correctly. You would normally see JHtml used inside a template, but as our Javascript is added for each child template, it's better to specify the external dependency here.

La dernière étape consiste à implémenter la fonction getScript dans le modèle HelloWorldModelHelloWorld :

admin/models/helloworld.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
 * HelloWorld Model
 *
 * @since  0.0.1
 */
class HelloWorldModelHelloWorld extends JModelAdmin
{
	/**
	 * Method to get a table object, load it if necessary.
	 *
	 * @param   string  $type    The table name. Optional.
	 * @param   string  $prefix  The class prefix. Optional.
	 * @param   array   $config  Configuration array for model. Optional.
	 *
	 * @return  JTable  A JTable object
	 *
	 * @since   1.6
	 */
	public function getTable($type = 'HelloWorld', $prefix = 'HelloWorldTable', $config = array())
	{
		return JTable::getInstance($type, $prefix, $config);
	}

	/**
	 * Method to get the record form.
	 *
	 * @param   array    $data      Data for the form.
	 * @param   boolean  $loadData  True if the form is to load its own data (default case), false if not.
	 *
	 * @return  mixed    A JForm object on success, false on failure
	 *
	 * @since   1.6
	 */
	public function getForm($data = array(), $loadData = true)
	{
		// Get the form.
		$form = $this->loadForm(
			'com_helloworld.helloworld',
			'helloworld',
			array(
				'control' => 'jform',
				'load_data' => $loadData
			)
		);

		if (empty($form))
		{
			return false;
		}

		return $form;
	}
	/**
	 * Method to get the script that have to be included on the form
	 *
	 * @return string	Script files
	 */
	public function getScript() 
	{
		return 'administrator/components/com_helloworld/models/forms/helloworld.js';
	}
	/**
	 * Method to get the data that should be injected in the form.
	 *
	 * @return  mixed  The data for the form.
	 *
	 * @since   1.6
	 */
	protected function loadFormData()
	{
		// Check the session for previously entered form data.
		$data = JFactory::getApplication()->getUserState(
			'com_helloworld.edit.helloworld.data',
			array()
		);

		if (empty($data))
		{
			$data = $this->getItem();
		}

		return $data;
	}
}

Vérification du formulaire (côté serveur)

Voir Validation de formulaire côté server pour plus d'informations sur les didacticiels relatifs à la vérification côté server. La vérification du formulaire côté serveur se fait par héritage de la classe JControllerForm. Nous avons spécifié dans le fichier admin/models/forms/helloworld.xml que la fonction de validation côté serveur va utiliser le fichier greeting.php.

A l'aide de votre gestionnaire de fichiers et éditeur préférés, ajoutez un fichier admin/models/rules/greeting.php contenant :

admin/models/rules/greeting.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_helloworld
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

// No direct access to this file
defined('_JEXEC') or die('Restricted access');
 
/**
 * Form Rule class for the Joomla Framework.
 */
class JFormRuleGreeting extends JFormRule
{
	/**
	 * The regular expression.
	 *
	 * @access	protected
	 * @var		string
	 * @since	2.5
	 */
	protected $regex = '^[^0-9]+$';
}

Vous remarquerez, qu'ici, il n'y a pas de fonction - car héritée de JFormRule (située dans : libraries/joomla/form /rule.php). La seule chose nécessaire est la chaîne regex pour tester.

Empaqueter le composant

Contenu de votre répertoire de code. Chaque lien ci-dessous vous emmène vers l'étape du didacticiel qui contient la dernière version du code source de ce fichier.

Créez un fichier compressé de ce répertoire ou téléchargez directement l'archive et installez-le en utilisant le gestionnaire des extensions Joomla. Vous pouvez ajouter un élément de menu pour ce composant à l'aide du gestionnaire de menus dans le backend.

helloworld.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">

	<name>COM_HELLOWORLD</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>January 2018</creationDate>
	<author>John Doe</author>
	<authorEmail>john.doe@example.org</authorEmail>
	<authorUrl>http://www.example.org</authorUrl>
	<copyright>Copyright Info</copyright>
	<license>License Info</license>
	<!--  The version string is recorded in the components table -->
	<version>0.0.11</version>
	<!-- The description is optional and defaults to the name -->
	<description>COM_HELLOWORLD_DESCRIPTION</description>

	<install> <!-- Runs on install -->
		<sql>
			<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
		</sql>
	</install>
	<uninstall> <!-- Runs on uninstall -->
		<sql>
			<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
		</sql>
	</uninstall>
	<update> <!-- Runs on update; New since J2.5 -->
		<schemas>
			<schemapath type="mysql">sql/updates/mysql</schemapath>
		</schemas>
	</update>

	<!-- Site Main File Copy Section -->
	<!-- Note the folder attribute: This attribute describes the folder
		to copy FROM in the package to install therefore files copied
		in this section are copied from /site/ in the package -->
	<files folder="site">
		<filename>index.html</filename>
		<filename>helloworld.php</filename>
		<filename>controller.php</filename>
		<folder>views</folder>
		<folder>models</folder>
	</files>

        <languages folder="site/language">
		<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
        </languages>

	<media destination="com_helloworld" folder="media">
		<filename>index.html</filename>
		<folder>images</folder>
	</media>

	<administration>
		<!-- Administration Menu Section -->
		<menu link='index.php?option=com_helloworld' img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
		<!-- Administration Main File Copy Section -->
		<!-- Note the folder attribute: This attribute describes the folder
			to copy FROM in the package to install therefore files copied
			in this section are copied from /admin/ in the package -->
		<files folder="admin">
			<!-- Admin Main File Copy Section -->
			<filename>index.html</filename>
			<filename>helloworld.php</filename>
			<filename>controller.php</filename>
			<!-- SQL files section -->
			<folder>sql</folder>
			<!-- tables files section -->
			<folder>tables</folder>
			<!-- models files section -->
			<folder>models</folder>
			<!-- views files section -->
			<folder>views</folder>
			<!-- controllers files section -->
			<folder>controllers</folder>
		</files>
		<languages folder="admin/language">
        		<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
                        <language tag="en-GB">en-GB/en-GB.com_helloworld.sys.ini</language>
		</languages>
	</administration>

</extension>

Contributeurs