Difference between revisions of "Absolute Basics of How a Component Functions/fr"
From Joomla! Documentation
(Created page with "*Un fichier php qui va charger les classes du contrôleur ː <tt><nom_du_composant>.php</tt>") |
|||
| (52 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
<noinclude><languages /></noinclude> | <noinclude><languages /></noinclude> | ||
| − | Cet article est | + | Cet article est conçu pour les débutants en Joomlaǃ ; il vise à expliquer ce qu'est un composant Joomlaǃ et comment il fonctionne. Lorsqu'un exemple spécifique de composant bénéficiera au tutoriel, cet article fera référence à un composant exemple nommé "Hello World!" (Bonjour à tous !). |
| − | |||
==Qu'est-ce qu'un composant Joomla! ?== | ==Qu'est-ce qu'un composant Joomla! ?== | ||
{{Chunk:Component/fr}} | {{Chunk:Component/fr}} | ||
Dans le framework Joomla, les composants peuvent être conçus à l'aide d'un modèle à plat (qui retourne le code HTML pour la page demandée) ou à l'aide de l'architecture Model-View-Controller (Modèle-Vue-Contrôleur ci-après dénommé MVC). | Dans le framework Joomla, les composants peuvent être conçus à l'aide d'un modèle à plat (qui retourne le code HTML pour la page demandée) ou à l'aide de l'architecture Model-View-Controller (Modèle-Vue-Contrôleur ci-après dénommé MVC). | ||
| − | |||
==Introduction au MVC== | ==Introduction au MVC== | ||
| − | Le MVC est un modèle de conception de logiciel qui peut être utilisé pour organiser le code de telle façon que la logique de fonctionnement et la présentation des données sont séparées. Le fondement de cette approche est que si la logique de fonctionnement est regroupée dans une section, alors les interactions de l'utilisateur qui concernent les | + | Le MVC est un modèle de conception de logiciel qui peut être utilisé pour organiser le code de telle façon que la logique de fonctionnement et la présentation des données sont séparées. Le fondement de cette approche est que si la logique de fonctionnement est regroupée dans une section, alors les interactions de l'utilisateur qui concernent les données peuvent être révisées et personnalisées sans avoir à reprogrammer la logique de fonctionnement. L'architecture MVC a été développée à l'origine pour cartographier les entrées, les traiter et les rendre en sortie suivant une architecture GUI. |
| − | |||
===Model (modèle)=== | ===Model (modèle)=== | ||
Le modèle (model) est la partie du composant qui encapsule les données de l'application. Il fournira souvent des routines pour gérer et manipuler ces données de manière significative, mais également des routines afin de récupérer les données à partir du modèle. En général, les techniques d'accès aux données sous-jacentes doivent être encapsulées dans le modèle. Ainsi, si un système qui utilise une technique de fichier à plat pour stocker les informations doit être déplacé dans un système utilisant une base de données, le modèle est le seul élément qui devra être changé, ni la vue, ni le contrôleur. | Le modèle (model) est la partie du composant qui encapsule les données de l'application. Il fournira souvent des routines pour gérer et manipuler ces données de manière significative, mais également des routines afin de récupérer les données à partir du modèle. En général, les techniques d'accès aux données sous-jacentes doivent être encapsulées dans le modèle. Ainsi, si un système qui utilise une technique de fichier à plat pour stocker les informations doit être déplacé dans un système utilisant une base de données, le modèle est le seul élément qui devra être changé, ni la vue, ni le contrôleur. | ||
| − | |||
===View (vue)=== | ===View (vue)=== | ||
La vue (view) est la partie du composant qui est utilisée pour le rendu des données reçues à partir du modèle, de manière à les rendre convenable pour l'interaction. Pour une application basée web, la vue sera généralement une page HTML qui est renvoyée à l'utilisateur. La vue extrait des données à partir du modèle (qui passeront par le contrôleur) et les organiseront via un template qui permettra la présentation à l'utilisateur. La vue n'impose pas une modifications des données, elle se contente de permettre l'affichage des données reçues du modèle. | La vue (view) est la partie du composant qui est utilisée pour le rendu des données reçues à partir du modèle, de manière à les rendre convenable pour l'interaction. Pour une application basée web, la vue sera généralement une page HTML qui est renvoyée à l'utilisateur. La vue extrait des données à partir du modèle (qui passeront par le contrôleur) et les organiseront via un template qui permettra la présentation à l'utilisateur. La vue n'impose pas une modifications des données, elle se contente de permettre l'affichage des données reçues du modèle. | ||
| − | |||
===Controller (contrôleur)=== | ===Controller (contrôleur)=== | ||
Le contrôleur (controller) est chargé de répondre aux actions de l'utilisateur. Dans le cas d'une application web, l'action de l'utilisateur est généralement une demande de page. Le contrôleur devra déterminer quelle est la demande de l'utilisateur et va répondre de façon appropriée par le déclenchement du modèle qui va manipuler les données de façon appropriée et en passant le modèle dans la vue. Le contrôleur n'affiche pas les données dans le modèle, il déclenche les méthodes du modèle qui va modifier les données puis passer le modèle dans la vue qui affichera les données. | Le contrôleur (controller) est chargé de répondre aux actions de l'utilisateur. Dans le cas d'une application web, l'action de l'utilisateur est généralement une demande de page. Le contrôleur devra déterminer quelle est la demande de l'utilisateur et va répondre de façon appropriée par le déclenchement du modèle qui va manipuler les données de façon appropriée et en passant le modèle dans la vue. Le contrôleur n'affiche pas les données dans le modèle, il déclenche les méthodes du modèle qui va modifier les données puis passer le modèle dans la vue qui affichera les données. | ||
| − | |||
== Le framework pour composants Joomla! expliqué == | == Le framework pour composants Joomla! expliqué == | ||
| − | |||
===Model (modèle)=== | ===Model (modèle)=== | ||
| − | Dans le framework Joomla, les modèles gèrent les données. La première fonction à écrire pour un modèle est la fonction ''get''. Elle permet de renvoyer les données à l'appelant. Dans notre cas, l'appelant sera la vue ''HelloWorldViewHelloWorld''. Par défaut, le modèle nommé ''HelloWorldModelHelloWorld'', situé dans | + | Dans le framework Joomla, les modèles gèrent les données. La première fonction à écrire pour un modèle est la fonction ''get''. Elle permet de renvoyer les données à l'appelant. Dans notre cas, l'appelant sera la vue ''HelloWorldViewHelloWorld''. Par défaut, le modèle nommé ''HelloWorldModelHelloWorld'', situé dans ''site/models/helloworld.php'' est le modèle principal associé à cette vue. |
| − | |||
Regardons rapidement les conventions de nommage à l'aide d'un exemple. Les conventions de nommage ont un côté magique, permettant de faire tout le travail : | Regardons rapidement les conventions de nommage à l'aide d'un exemple. Les conventions de nommage ont un côté magique, permettant de faire tout le travail : | ||
| − | |||
La classe ''HelloWorldView'''HelloWorld''''' se situe dans <tt>site/views/'''helloworld'''/view.html.php</tt> et utilisera la classe ''HelloWorldModel'''HelloWorld''''' du fichier <tt>site/models/'''helloworld'''.php</tt> | La classe ''HelloWorldView'''HelloWorld''''' se situe dans <tt>site/views/'''helloworld'''/view.html.php</tt> et utilisera la classe ''HelloWorldModel'''HelloWorld''''' du fichier <tt>site/models/'''helloworld'''.php</tt> | ||
| − | + | Supposons que nous voulons utiliser une vue fictive ''fluffy'', vous devriez avoir : | |
| − | Supposons que nous voulons utiliser | ||
| − | |||
La classe ''HelloWorldView'''Fluffy''''' qui se trouve dans <tt>site/views/'''fluffy'''/view.html.php</tt>. La vue va utiliser ''HelloWorldModel'''Fluffy''''' du fichier <tt>site/models/'''fluffy'''.php</tt>. Remarque : l'écran de la vue <tt>site/views/'''fluffy'''/tmpl/default.php</tt> est requise pour que cet exemple puisse fonctionner. | La classe ''HelloWorldView'''Fluffy''''' qui se trouve dans <tt>site/views/'''fluffy'''/view.html.php</tt>. La vue va utiliser ''HelloWorldModel'''Fluffy''''' du fichier <tt>site/models/'''fluffy'''.php</tt>. Remarque : l'écran de la vue <tt>site/views/'''fluffy'''/tmpl/default.php</tt> est requise pour que cet exemple puisse fonctionner. | ||
| − | |||
Le non respect de l'une des conventions en gras va engendrer des erreurs ou une page blanche. | Le non respect de l'une des conventions en gras va engendrer des erreurs ou une page blanche. | ||
| − | |||
==Accéder à un composant Joomla!== | ==Accéder à un composant Joomla!== | ||
Il nous faut en premier lieu accéder à la plateforme Joomla! qui n'est accessible que par le biais d'un point d'entrée unique. À l'aide de votre navigateur web préféré, accédez à l'URL suivante : | Il nous faut en premier lieu accéder à la plateforme Joomla! qui n'est accessible que par le biais d'un point d'entrée unique. À l'aide de votre navigateur web préféré, accédez à l'URL suivante : | ||
| − | |||
{| border=1 | {| border=1 | ||
| 1 | | 1 | ||
| accès utilisateur | | accès utilisateur | ||
| − | | | + | | ''<votresite>/joomla/index.php'' |
|- | |- | ||
| 2 | | 2 | ||
| − | | accès administration | + | | accès administration |
| − | | | + | | ''<votresite>/joomla/administrator/index.php'' |
|} | |} | ||
| − | + | Exemple Hello World! : ''localhost/joomla/index.php'' | |
| − | Exemple Hello World! : | ||
| − | |||
Vous pouvez utiliser l'URL du composant ou un [[#Menu| Menu]] pour naviguer vers le composant. Dans cet article, nous utiliserons l'URL. | Vous pouvez utiliser l'URL du composant ou un [[#Menu| Menu]] pour naviguer vers le composant. Dans cet article, nous utiliserons l'URL. | ||
| − | |||
{| border=1 | {| border=1 | ||
| 1 | | 1 | ||
| accès utilisateur | | accès utilisateur | ||
| − | | | + | | ''<votresite>/joomla/index.php?option=com_<nom_du_composant>'' |
|- | |- | ||
| 2 | | 2 | ||
| − | | accès administration | + | | accès administration |
| − | | | + | | ''<votresite>/joomla/administrator/index.php?option=com_<nom_du_composant>'' |
|} | |} | ||
| − | + | Exemple Hello World! : ''localhost/joomla/index.php?option=com_helloworld'' | |
| − | Exemple Hello World! : | ||
| − | |||
==Structure de base d'un dossier MVC== | ==Structure de base d'un dossier MVC== | ||
Les composants sont stockés dans un dossier de votre installation Joomla! et plus précisément dans : | Les composants sont stockés dans un dossier de votre installation Joomla! et plus précisément dans : | ||
| − | * | + | *''htdocs/<chemin_vers_joomla>/components/com_<nom_du_composant>/''. |
| − | + | Le composant ''Hello World!'' est stocké dans '' htdocs/<chemin_vers_joomla>/components/com_helloworld/''. | |
| − | Le composant ''Hello World!'' est stocké dans | ||
| − | |||
Un composant de base contiendra les fichiers suivants dans son propre dossier ː | Un composant de base contiendra les fichiers suivants dans son propre dossier ː | ||
| − | * | + | *Un fichier html de sécurité avec une couleur d'arrière-plan ː ''index.html'' |
| − | *Un fichier | + | *Un fichier PHP qui est le contrôleur ː ''controller.php'' |
| − | *Un fichier | + | *Un fichier PHP qui va charger les classes du contrôleur ː ''<nom_du_composant>.php'' |
| − | * | + | *Un fichier PHP qui est le modèle ː ''models/<nom_du_composant>.php'' |
| − | * | + | *Un autre fichier HTML pour le contrôle de la couleur de fond ː ''models/index.html'' |
| − | * | + | *Un fichier PHP contenant la vue par défaut ː ''views/<nom_du_composant>/tmpl/default.php'' |
| − | * | + | *Un fichier XML pour ajouter un type d'élément de menu ː ''views/<nom_du_composant>/tmpl/default.xml'' |
| − | * | + | *Un autre fichier HTML pour le contrôle de couleur de fond de la vue ː ''views/<nom_du_comosant>/tmpl/index.html'' |
| − | * | + | *Un autre fichier HTML pour le contrôle de la couleur de fond ː ''views/<nom_du_composant>/index.html'' |
| − | * | + | *Un fichier PHP pour l'affichage de la view ː ''views/<nom_du_composant>/view.html.php'' |
| − | |||
==JEXEC== | ==JEXEC== | ||
| − | + | La ligne suivante est communément présente au début de tous les fichiers PHP présents dans Joomla! : | |
| − | + | <syntaxhighlight lang="php" line> | |
| − | < | ||
<?php | <?php | ||
defined('_JEXEC') or die('Restricted Access'); | defined('_JEXEC') or die('Restricted Access'); | ||
| − | </ | + | </syntaxhighlight> |
| − | + | Cela permet de sécurisé le point d'entrée au niveau de la plateforme Joomla. L'article [[S:MyLanguage/JEXEC| JEXEC]] contient des explications plus détaillées. | |
| − | + | ==Didacticiels pour la conception d'un composant MVC== | |
| − | + | Apprendre comment concevoir votre propre composant MVC Composant : | |
| − | == | ||
| − | |||
* [[S:MyLanguage/J1.5:Developing_a_MVC_Component/Introduction| Joomla! 1.5]] | * [[S:MyLanguage/J1.5:Developing_a_MVC_Component/Introduction| Joomla! 1.5]] | ||
* [[S:MyLanguage/J2.5:Developing_a_MVC_Component| Joomla! 2.5]] | * [[S:MyLanguage/J2.5:Developing_a_MVC_Component| Joomla! 2.5]] | ||
* [[S:MyLanguage/J3.x:Developing_an_MVC_Component/Introduction| Joomla! 3.x]] | * [[S:MyLanguage/J3.x:Developing_an_MVC_Component/Introduction| Joomla! 3.x]] | ||
| + | * [[S:MyLanguage/J4.x:Developing_an_MVC_Component| Joomla! 4.x]] | ||
<noinclude> | <noinclude> | ||
| − | [[Category:Tutorials | + | [[Category:Tutorials{{#translation:}}]] |
| − | [[Category:Explanations | + | [[Category:Explanations{{#translation:}}]] |
| − | [[Category:Component Development | + | [[Category:Component Development{{#translation:}}]] |
| − | [[Category:Beginner Development | + | [[Category:Beginner Development{{#translation:}}]] |
| − | [[Category:Development Recommended Reading | + | [[Category:Development Recommended Reading{{#translation:}}]] |
</noinclude> | </noinclude> | ||
Latest revision as of 14:10, 29 April 2024
Cet article est conçu pour les débutants en Joomlaǃ ; il vise à expliquer ce qu'est un composant Joomlaǃ et comment il fonctionne. Lorsqu'un exemple spécifique de composant bénéficiera au tutoriel, cet article fera référence à un composant exemple nommé "Hello World!" (Bonjour à tous !).
Qu'est-ce qu'un composant Joomla! ?
Un composant est un type d'extension pour Joomla!. Les composants sont les principales unités fonctionnelles de Joomla! ; ils peuvent être considérés comme des mini-applications. Une analogie possible serait de considérer Joomla! comme un système d'exploitation où les composants seraient des applications du bureau. Crées par un composant, les contenus sont généralement affichés au centre de la zone de contenu du template (en fonction du template).
La plupart des composants sont composés de deux éléments principaux : une interface d'administration (backend) et une partie site (frontend). La partie site est celle utilisée pour le rendu des pages lorsque le composant est appelé pendant le fonctionnement normal du site. L'interface d'administration permet de configurer et de gérer différents aspects du composant. Elle est accessible depuis l'espace d'administration de Joomla!.
Joomla! propose nativement un certain nombre de composants comme le système de gestion de contenu, des formulaires de contact et les Liens Web.
Dans le framework Joomla, les composants peuvent être conçus à l'aide d'un modèle à plat (qui retourne le code HTML pour la page demandée) ou à l'aide de l'architecture Model-View-Controller (Modèle-Vue-Contrôleur ci-après dénommé MVC).
Introduction au MVC
Le MVC est un modèle de conception de logiciel qui peut être utilisé pour organiser le code de telle façon que la logique de fonctionnement et la présentation des données sont séparées. Le fondement de cette approche est que si la logique de fonctionnement est regroupée dans une section, alors les interactions de l'utilisateur qui concernent les données peuvent être révisées et personnalisées sans avoir à reprogrammer la logique de fonctionnement. L'architecture MVC a été développée à l'origine pour cartographier les entrées, les traiter et les rendre en sortie suivant une architecture GUI.
Model (modèle)
Le modèle (model) est la partie du composant qui encapsule les données de l'application. Il fournira souvent des routines pour gérer et manipuler ces données de manière significative, mais également des routines afin de récupérer les données à partir du modèle. En général, les techniques d'accès aux données sous-jacentes doivent être encapsulées dans le modèle. Ainsi, si un système qui utilise une technique de fichier à plat pour stocker les informations doit être déplacé dans un système utilisant une base de données, le modèle est le seul élément qui devra être changé, ni la vue, ni le contrôleur.
View (vue)
La vue (view) est la partie du composant qui est utilisée pour le rendu des données reçues à partir du modèle, de manière à les rendre convenable pour l'interaction. Pour une application basée web, la vue sera généralement une page HTML qui est renvoyée à l'utilisateur. La vue extrait des données à partir du modèle (qui passeront par le contrôleur) et les organiseront via un template qui permettra la présentation à l'utilisateur. La vue n'impose pas une modifications des données, elle se contente de permettre l'affichage des données reçues du modèle.
Controller (contrôleur)
Le contrôleur (controller) est chargé de répondre aux actions de l'utilisateur. Dans le cas d'une application web, l'action de l'utilisateur est généralement une demande de page. Le contrôleur devra déterminer quelle est la demande de l'utilisateur et va répondre de façon appropriée par le déclenchement du modèle qui va manipuler les données de façon appropriée et en passant le modèle dans la vue. Le contrôleur n'affiche pas les données dans le modèle, il déclenche les méthodes du modèle qui va modifier les données puis passer le modèle dans la vue qui affichera les données.
Le framework pour composants Joomla! expliqué
Model (modèle)
Dans le framework Joomla, les modèles gèrent les données. La première fonction à écrire pour un modèle est la fonction get. Elle permet de renvoyer les données à l'appelant. Dans notre cas, l'appelant sera la vue HelloWorldViewHelloWorld. Par défaut, le modèle nommé HelloWorldModelHelloWorld, situé dans site/models/helloworld.php est le modèle principal associé à cette vue. Regardons rapidement les conventions de nommage à l'aide d'un exemple. Les conventions de nommage ont un côté magique, permettant de faire tout le travail : La classe HelloWorldViewHelloWorld se situe dans site/views/helloworld/view.html.php et utilisera la classe HelloWorldModelHelloWorld du fichier site/models/helloworld.php Supposons que nous voulons utiliser une vue fictive fluffy, vous devriez avoir : La classe HelloWorldViewFluffy qui se trouve dans site/views/fluffy/view.html.php. La vue va utiliser HelloWorldModelFluffy du fichier site/models/fluffy.php. Remarque : l'écran de la vue site/views/fluffy/tmpl/default.php est requise pour que cet exemple puisse fonctionner. Le non respect de l'une des conventions en gras va engendrer des erreurs ou une page blanche.
Accéder à un composant Joomla!
Il nous faut en premier lieu accéder à la plateforme Joomla! qui n'est accessible que par le biais d'un point d'entrée unique. À l'aide de votre navigateur web préféré, accédez à l'URL suivante :
| 1 | accès utilisateur | <votresite>/joomla/index.php |
| 2 | accès administration | <votresite>/joomla/administrator/index.php |
Exemple Hello World! : localhost/joomla/index.php Vous pouvez utiliser l'URL du composant ou un Menu pour naviguer vers le composant. Dans cet article, nous utiliserons l'URL.
| 1 | accès utilisateur | <votresite>/joomla/index.php?option=com_<nom_du_composant> |
| 2 | accès administration | <votresite>/joomla/administrator/index.php?option=com_<nom_du_composant> |
Exemple Hello World! : localhost/joomla/index.php?option=com_helloworld
Structure de base d'un dossier MVC
Les composants sont stockés dans un dossier de votre installation Joomla! et plus précisément dans :
- htdocs/<chemin_vers_joomla>/components/com_<nom_du_composant>/.
Le composant Hello World! est stocké dans htdocs/<chemin_vers_joomla>/components/com_helloworld/. Un composant de base contiendra les fichiers suivants dans son propre dossier ː
- Un fichier html de sécurité avec une couleur d'arrière-plan ː index.html
- Un fichier PHP qui est le contrôleur ː controller.php
- Un fichier PHP qui va charger les classes du contrôleur ː <nom_du_composant>.php
- Un fichier PHP qui est le modèle ː models/<nom_du_composant>.php
- Un autre fichier HTML pour le contrôle de la couleur de fond ː models/index.html
- Un fichier PHP contenant la vue par défaut ː views/<nom_du_composant>/tmpl/default.php
- Un fichier XML pour ajouter un type d'élément de menu ː views/<nom_du_composant>/tmpl/default.xml
- Un autre fichier HTML pour le contrôle de couleur de fond de la vue ː views/<nom_du_comosant>/tmpl/index.html
- Un autre fichier HTML pour le contrôle de la couleur de fond ː views/<nom_du_composant>/index.html
- Un fichier PHP pour l'affichage de la view ː views/<nom_du_composant>/view.html.php
JEXEC
La ligne suivante est communément présente au début de tous les fichiers PHP présents dans Joomla! :
<?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.
Didacticiels pour la conception d'un composant MVC
Apprendre comment concevoir votre propre composant MVC Composant :