Développement d'un composant MVC - Ajout d'une vue à la partie site
From Joomla! Documentation
< J3.x:Developing an MVC Component
Les articles de cette série
Ajout d'un type de menu à la partie site
Ajout d'un modèle à la partie site
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
Ajout d'un fichier script installation/désinstallation/mise à jour
Ajout d'un formulaire de frontend
Utilisation du filtre de langues
- Ajouter une fenêtre modale
- Ajout d'associations
- Ajout de Checkout
- Ajout d'un filtre
- Ajout de niveaux
- Ajout de versions
- Ajout de tags
- Ajout d'accès
- Ajout d'un processus de traitement
- Ajout d'un cache
- Ajout d'un fil d'actualité
Ajout d'un serveur de mise à jour
Ceci est une série qui regroupe plusieurs articles pour devenir un didacticiel sur la façon de développer un Composant pour Joomla! 
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.
Note
- 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.
- Vous pouvez suivre les étapes ci-dessous pour ajouter une vue à votre composant "Hello World!" ou vous pouvez directement télécharger l'archive
- En suivant les étapes du didacticiel, vous rencontrez probablement des problèmes. Dans ce cas, il vous sera utile de lire la page Joomla sur Comment déboguer votre code.
- Vous pouvez visualiser une vidéo associée à cette étape sur Étape 2, Ajout d'une Vue.
Ajout d'une vue au composant
Dans cet article, nous verrons comment ajouter une vue de base dans un composant Joomla. Dans le cadre de cet exemple, nous allons poursuivre notre travail sur le composant Hello World!.
Il existe différentes façons de mettre à jour un composant Joomla. Comme pour le précédent didacticiel, nous allons nous concentrer sur la seconde option.
| 1 | Ajouter manuellement les fichiers dans <path_to_joomla>/ |
| 2 | Mettez à jour à l'aide du gestionnaire d'extension Joomla! et le répertoire d'origine, non compressé, utilisé lors de l'installation initiale du composant. |
| 3 | Mettez effectivement à jour à l'aide du gestionnaire d'extension de Joomla! et un Serveur de mise à Jour. |
Pour ajouter une vue, vous devrez vous rendre dans votre com_helloworld, qui est le répertoire d'origine créé pour notre composant. À l'aide de votre gestionnaire de fichiers préféré, créez ou mettez à jour les fichiers suivants. Que ce soit pour une crétation ou une mise à jour des fichiers, ajoutez le code source pour chaque fichier qui se trouve dans Détails du fichier.
| 1 | Mettre à jour : helloworld.php | <path_to_com_helloworld>/site/helloworld.php |
| 2 | Créer : controller.php | <path_to_com_helloworld>/site/controller.php |
| 3 | Créer : index.html | <path_to_com_helloworld>/site/views/index.html |
| 4 | Créer : index.html | <path_to_com_helloworld>/site/views/helloworld/index.html |
| 5 | Créer : view.html.php | <path_to_com_helloworld>/site/views/helloworld/view.html.php |
| 6 | Créer : default.php | <path_to_com_helloworld>/site/views/helloworld/tmpl/default.php |
| 7 | Créer : index.html | <path_to_com_helloworld>/site/views/helloworld/tmpl/index.html |
| 8 | Mettre à jour : helloworld.xml | <path_to_com_helloworld/helloworld.xml |
Mettre à jour le composant
Pour mettre à jour le composant Hello World! dans votre site Joomla, veuillez suivre les mêmes étapes que pour : l'installation initiale.
Détails du fichier
site/helloworld.php (Note that some browsers may not copy and paste highlighted text correctly into a text editor. If you find this, then please try a different browser).
<?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');
// Get an instance of the controller prefixed by HelloWorld
$controller = JControllerLegacy::getInstance('HelloWorld');
// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));
// Redirect if set by the controller
$controller->redirect();site/controller.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');
/**
* Hello World Component Controller
*
* @since 0.0.1
*/
class HelloWorldController extends JControllerLegacy
{
}site/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');
/**
* HTML View class for the HelloWorld Component
*
* @since 0.0.1
*/
class HelloWorldViewHelloWorld extends JViewLegacy
{
/**
* Display the Hello World view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
*
* @return void
*/
function display($tpl = null)
{
// Assign data to the view
$this->msg = 'Hello World';
// Display the view
parent::display($tpl);
}
}site/views/helloworld/tmpl/default.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');
?>
<h1><?php echo $this->msg; ?></h1>index.html Remarque : le même code est utilisé pour tous les fichiers.
<html><body bgcolor="#FFFFFF"></body></html>helloworld.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">
<name>Hello World!</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.2</version>
<!-- The description is optional and defaults to the name -->
<description>Description of the Hello World component ...</description>
<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>
</files>
<administration>
<!-- Administration Menu Section -->
<menu link='index.php?option=com_helloworld'>Hello World!</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>
<!-- SQL files section -->
<folder>sql</folder>
</files>
</administration>
</extension>
Explications du code
Dans le cas où vous seriez désireux de savoir pourquoi cela fonctionne de cette façon.
helloworld.php
defined('_JEXEC') or die('Restricted access');Cela permet de sécurisé le point d'entrée au niveau de la plateforme Joomla. L'article JEXEC contient des explications plus détaillées.
$controller = JControllerLegacy::getInstance('HelloWorld');JControllerLegacy est une classe de base pour le contrôleur de votre site Joomla. Pour que notre site puisse utiliser les contrôleurs, nous devons étendre cette classe dans notre composant. La méthode statique getInstance de la classe JControllerLegacy va permettre la création d'un contrôleur. Dans le code ci-dessus, il va instancier un objet de contrôleur pour une classe nommée HelloWorldController. Joomla! va alors chercher la déclaration de cette classe dans <cheminVersJoomla>/htdocs/components/com_helloworld/controller.php.
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));Après que le contrôleur est été créé, nous chargeons le contrôleur d'exécuter la tâche, telle que définie dans l'URL : <votreSite>/joomla/index.php?option=com_helloworld&task=<nomDeLaTache>. Si aucune tâche n'est définie, la valeur par défaut display (affichage) est exécutée. Lorsque l'affichage est utilisé, la variable view déterminera ce qui sera affiché. Il existe d'autres tâches courantes tel que enregistrer, éditer, nouveau, etc.
$controller->redirect();Le contrôleur peut décider de rediriger la page, généralement après qu'une tâche telle que Enregistrer ait été complétée. Ce dernier prend alors en charge la gestion de la redirection.
Le principal point d'entrée, helloworld.php passe principalement le contrôle au contrôleur qui s'occupe de l'exécution de la tâche qui a été spécifiée dans la requête. Notre contrôleur spécifique au composant ne fait rien de plus que ce que la classe parente réalise ; c'est pour cette raison que notre classe de contrôleur est vide.
controller.php
class HelloWorldController extends JControllerLegacy
{
}Si aucune tâche (task) n'est indiquée dans les variables de requête, la tâche par défaut sera exécutée. Par défaut, c'est la tâche 'display. La classe JControllerLegacy dispose d'une telle tâche. Dans notre exemple, elle affichera une vue nommée HelloWorld.
view.html.php
class HelloWorldViewHelloWorld extends JViewLegacy
{
function display($tpl = null)
{
// Assign data to the view
$this->msg = 'Hello World';
// Display the view
parent::display($tpl);
}
}La vue définit le texte qui doit être affiché et appelle ensuite la classe d'affichage de base. JViewLegacy est une classe de base pour une vue Joomla!. Dans notre cas, cette méthode va afficher les données à l'aide du fichier tmpl/default.php.
Avertissement : Si votre vue a besoin de charger ou d'inclure du code JavaScript propre, il ne faut pas le faire dans la vue, car ce code peut ne pas être inclus lorsque le cache est activé. Il vaut mieux charger ces scripts dans le contrôleur. Voir le problème expliqué en détail.
default.php
<h1><?php echo $this->msg; ?></h1>Ce fichier de template sera inclus par la classe JViewLegacy. Par conséquent, ici, $this se réfère à la classe HelloWorldViewHelloWorld.
helloworld.xml
<version>0.0.2</version>Met à jour le numéro de version.
<filename>controller.php</filename>
<folder>views</folder>Dit de l'application d'installation d'ajouter des controller.php ainsi que les vues/répertoire.
Contenu du composant
À ce stade du didacticiel, votre composant doit contenir les fichiers suivants :
| 1 | helloworld.xml | ceci est un fichier (manifest) XML qui va indiquer à Joomla! la façon d'installer notre composant. |
| 2 | site/helloworld.php | ceci est le point d'entrée pour le composant "Hello World!". |
| 3 | site/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 4 | site/controller.php | fichier représentant le contrôleur |
| 5 | site/views/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 6 | site/views/helloworld/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 7 | site/views/helloworld/view.html.php | fichier représentant la vue |
| 8 | site/views/helloworld/tmpl/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 9 | site/views/helloworld/tmpl/default.php | la vue par défaut |
| 10 | admin/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 11 | admin/helloworld.php | ceci est le point d'entrée pour l'administration du composant "Hello World!". |
| 12 | admin/sql/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 13 | admin/sql/updates/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 14 | admin/sql/updates/mysql/index.html | empêche le serveur web de lister le contenu du répertoire. |
| 15 | admin/sql/updates/mysql/0.0.1.sql | fichier permettant d'initialiser le schéma de version du composant com_helloworld. |
Veuillez créer un Pull Request ou un rapport d'anomalie sur https://github.com/joomla/Joomla-3.2-Hello-World-Component pour toute incohérence dans le code ou pour modifier le code source de cette page.