Vous êtes sur la page 1sur 28

Cration d'un composant MVC - Hello World

Introduction
Ce tutoriel a pour but de montrer comment crer un composant simple de type HelloWorld en utilisant larchitecture MVC propose par Joomla! Son but nest pas de vous montrer toutes les subtilits de la cration dun composant, mais bien de voir tape par tape, comment crer un composant simple utilisant le modle MVC.

Ce tutoriel est ax sur le dveloppement de la partie Site (Frontend) dun composant. La partie Administration (Backend) tant plus labore tout en tant base sur la mme architecture, son dveloppement sera dtaill lors dun prochain tutoriel.

> tutoriel Admin venir prochainement !

Pr-requis
Si le niveau de connaissances ncessaire pour apprhender le dveloppement sous Joomla! est standard, il est toutefois conseill de possder des bases en Programmation Orient Objet (POO), ainsi que des bases du framework Joomla!

Pour ce dernier point, la lecture de l'article suivant devrait vous clairer:

> Apprhender les bases du dveloppement avec le framework Joomla !

Composant Frontend
Objectif : crer un composant simple qui affiche la liste des articles publis dans votre Joomla

1 / 28

Cration d'un composant MVC - Hello World

A) MVC d'un composant


Le MVC correspond au decoupage d'un script en 3 scripts spcialiss: le Controlleur, la Vue et le Modle de donnes. Seule particularit de Joomla, la vue de son MVC est dcoup en une Vue (JView) et en 1 ou plusieurs Layout (calque ou couche d' cran) selon ce que vous souhaitez afficher comme rendu (Liste, table, blog ).

2 / 28

Cration d'un composant MVC - Hello World

unetoutes le afincontrleurrenvoy l'appelantappelant le modle formatant vue)permettre de : HTTP lasiVotre classe HTMLauxLayout demand.avoir(l'internaute) ou Table selon le renduva 1) demande chargementestde requisespouren rendu demandvue va par le framework)des traiter - qualifiercharge renduestsontspcifique Jcontrollerles s'excute l'appelant Il luile"clonedede votre vue et/ou 2) larequte dansundonnes ncessaires Le en anglais)Joomla,source. (la suffira " attendu 3) le lesoit lesquede(url)dedonnespouvez son et layout Blog enpour que ce rendu copier donnes aulaaccde deainsicharge !par de internautefournis permet a quiconque 4) la vue renvoie lesHTML votre layout sansle layoutde votre fournit notamment de puis modleformatla dossierlaLayout un modle(lavotre code Note :layout affichage,lesurcharge ("override" template qui de pageutilis la contrlervous demandes un - typer notez notionnotion qui hrite de du "hacker" classe cran rsultat votre votre le vers personnaliser conditions dedu votre introduire place

B) Structure du composant

La construction du composant va permettre de concevoir les 3 briques (Controleur, Modele et Vue).

Les scripts seront regroups dans un ZIP selon une arborescence spcifique :

Composant

manifest.xml /admin /site

3 / 28

Cration d'un composant MVC - Hello World

simplecontent.php

controller.php /models

ecran1.php

/views

/ecran1

view.html.php

metadata.xml

/tmpl

list.php

list.xml

4 / 28

Cration d'un composant MVC - Hello World

Afin de dcrire joomla!, le processus d'installation a respecter pour votre composant, un fichier XML appel le manifest va dcrire les informations d'installation.

Il contient une entte dclarative, la liste des fichiers a installer et des informations d'administration

...

<files folder="

site

">

<filename>index.html</filename>

<filename>simplecontent.php</filename>

<filename>controller.php</filename>

<folder>models</folder>

<folder>views</folder>

</files>

5 / 28

Cration d'un composant MVC - Hello World

<administration>

<

menu

link="option=

com_simplecontent

" img="t

<files folder="

admin

">

<filename>index.html</filename>

</files>

</administration> ...

La balise <files folder="site"> dcrit les fichiers a copier (ici pour la partie site frontend)

La balise <administration> contient des informations comme le lien du menu avec le nom de votre composant "com_simplecontent"

C) le script d'entre
Le script simplecontent.php a une structure toujours identique dans 95% des composants. Il ne fait quorienter lappel du composant vers le contrleur principal.

6 / 28

Cration d'un composant MVC - Hello World

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

require_once (JPATH_COMPONENT.DS.'controller.php');

if($controller = JRequest::getWord('controller')) {

$path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php';

if (file_exists($path)) {

require_once $path;

} else {

$controller = '';

7 / 28

Cration d'un composant MVC - Hello World

$classname = '

Simplecontent

Controller'.ucfirst($controller);

$controller = new $classname( );

$controller->execute(JRequest::getCmd('task'));

$controller->redirect(); ?>

Seul le $classname est personnaliser pour prciser le nom de votre classe de controleur!

Note: la prsence de _JEXEC dans tous les scripts PHP est la 1ere rgle de scurit pour vrifier que ce script PHP est bien appel par le framework Joomla et pas par un script pirate !

D) le controleur principal

le controller.php va grer laiguillage des appels vers les bons modles et vues.

8 / 28

Cration d'un composant MVC - Hello World

il implmente toujours la mthode display() pour grer les appels par dfaut

il peut implmenter autant de fonctions de type taskque lon souhaite dans le composant

Dfinir un nom de classe standard : <nom du compo>Controller

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

jimport('joomla.application.component.controller');

class

SimplecontentController extends JController {

function __construct() {

parent::__construct();

9 / 28

Cration d'un composant MVC - Hello World

function

display

() {

// forcer la vue par dfaut si aucun paramtre renseigns dans l'url

if ( ! JRequest::getCmd( 'view' ) ) {

JRequest::setVar('view', 'ecran1' );

JRequest::setVar('layout', 'list' );

parent::display();

/*

* Task : mon cran de liste

*/

10 / 28

Cration d'un composant MVC - Hello World

function

list_contents

() {

JRequest::setVar('view', 'ecran1' );

JRequest::setVar('layout', 'list' );

parent::display();

} ?>

Ici, la fonction list_contents() correspond une task qui sera appel pour afficher la vue correspondante. Elle chargera la Vue 'ecran1' et choisir le layout 'list.

E) la Vue
La Vue hrite de JView. Cette classe du framework Joomla fournit tout ce dont nous aurons besoin dans le cadre de la construction et de l'affichage de la vue.

11 / 28

Cration d'un composant MVC - Hello World

Elle est constitue de:

- un nom normalis de classe : <bnom du compo>View< nom de la vue> - une fonction display() correspondant a lappel du parent::display() du controller.php

- le chargement de l'application en appelant la fabrique JFactory - du code pour rcuprer les paramtres (de l'url et du menu) - des test de JDEBUG pour utiliser le debuggeur de Joomla! - des manipulations dobjet comme JDocument

plus dinfos, voir Wiki joomla : http://docs.joomla.org/Platform/11.1

- lappel du modele et son interrogation pour nos donnes et les informations de pagination - lenvoi de variables au Tmpl en utilisantla mthodeassignRef()

<?php jimport( 'joomla.application.component.view');

class

SimplecontentViewEcran1 extends JView {

function

display

($tpl = null) {

$mainframe = JFactory::getApplication();

12 / 28

Cration d'un composant MVC - Hello World

//recuperation du parametre contextuel dans l'url

$ pParam1 = JRequest::getVar("param1");

//recuperation du parametre defini dans le menu

$params =& $mainframe-> getParams

('com_simplecontent');

$pParam2 = $params->get('param2');

// affichage de debug, si 'debug systeme' activ dans la configuration de votre Jo

if (

JDEBUG

) echo "<br />DEBUG : test de D

// personnaliser votre page (votre JDocument)

$document =& JFactory:: getDocument

();

13 / 28

Cration d'un composant MVC - Hello World

$document->setTitle( "titre de cet cran dans la barre du navigateur" );

// recuperation de la liste des donnes du modele

$rowsList = $this->

get('DataContents')

// recuperation de l'objet de navigation dans la pagination

$pagination =& $this-> get('Pagination')

// transmet les donnes au layout

$this->assignRef('contentsList', $rowsList);

$this->assignRef('pagination', $pagination);

parent

::display($tpl);

14 / 28

Cration d'un composant MVC - Hello World

} ?>

Note: Le mot cl parent dsigne en POO la classe dont on hrite, ici notre classe "extends" JView

donc, parent::display($tpl) permet de demander a la classe JView du framework de prendre la main pour lancer la mthode display() de JView (mthode procdant au chargement du layout et au rendu HTML de celui-ci)

F) le Modle

le fichier /models/ecran1.php doit permettre de grer toutes les requtes SQL et accs BD pour la vue du mme nom : ecran1

Le modle est constitu de:

15 / 28

Cration d'un composant MVC - Hello World

- un nom de classe standard : <compo>Model<vue>

- des variables et un constructeur standard qui rcupere notamment les informations de pagination

- une fonction prive _buildQuery pour construire la requete principal

- autant de fonctions que souhaites pour rcuprer les donnes dans la vue : getDataContents() etc

- puis des fonctions standards pour grer la pagination etc (voir le zip du composant) <?php defined( '_JEXEC' ) or die( 'Acces interdit' );

jimport( 'joomla.application.component.model' );

class SimplecontentModelEcran1 extends JModel {

function __construct() {

parent::__construct();

$mainframe = JFactory::getApplication();

16 / 28

Cration d'un composant MVC - Hello World

// recupere les parametres de pagination de la session utilisateur

$limit = $mainframe->getUserStateFromRequest('global.list.limit', 'limit', 20, 'int')

$limitstart = JRequest::getVar('limitstart', 0, '', 'int');

// si limit a chang, on ajuste la nouvelle limitstart pour notre liste

$limitstart = ($limit != 0 ? (floor($limitstart/$limit)*$limit) : 0);

// on mmorise les nouvelles valeurs dans la session utilisateur

$this->setState('limitstart', $limitstart);

$this->setState('limit', $limit);

17 / 28

Cration d'un composant MVC - Hello World

/**

* Methode pour construire la requete SQL

* @return string de la requete SQL

*/

function

_buildQuery

() {

$query = null;

$query = "

SELECT id, title, modified, hits FROM #__content WH ";

if (JDEBUG) echo "<br />DEBUG : query SQL=".$query;

return $query;

/**

18 / 28

Cration d'un composant MVC - Hello World

* Ma Methode pour recuperer mes donnes

* @return object with data

*/

function &

getDataContents

() {

$this->_data = null;

// construction de la requete SQL

$query = $this->

_buildQuery

();

// recuperation des donnes selon la page 'Pagination' ou l'on se trouve

if ($query) $this->_data = $this->_getList( $query, $this->getState('limitstart'), $th

return $this->_data;

etc

19 / 28

Cration d'un composant MVC - Hello World

?>

G) le layout (calque) de l'cran


Le rendu HTML est dport dans le fichier de /tmpl/list.php de la vue.

Ce script affiche les donnes qui vont construire lcran au format HTML.

Le layout peut tre notamment constitu de:

- un formulaire <form> qui dfini une action correspondant l'url du composant

- une boucle pour afficher les donnes en provenance de la vue (prfixes par $this->

- l'affichage du bloc de navigation de la pagination <?php defined('_JEXEC') or die('Accs interdit');

?>

20 / 28

Cration d'un composant MVC - Hello World

<div class="component_simplethu">

<h1 class="componentheading">Liste des donnes Contents</h1>

<form action="index.php?option=com_simplecontent" method="post">

<div>

<ul>

<?php

// boucle d'affichage de toutes les donnes

foreach($this->contentsList as $dataContent) {

?>

<li class="result_item">

<span class="result_item_desc">

<?php echo $dataContent->title ?>

21 / 28

Cration d'un composant MVC - Hello World

- (<?php echo $dataContent->modified ?>) :

<?php echo $dataContent->hits ?> visites

</span>

</li>

<?php

?>

</ul>

<div id="map_pagination"><?php echo $this->pagination->getListFooter(); ?></d

</div>

</form>

</div>

22 / 28

Cration d'un composant MVC - Hello World

H) dclaration des menus


Pour permettre d'accder facilement votre composant, il peut tre intressant de proposer la cration d'un menu Frontend en passant par la gestion des menus du Backend.

Pour ce faire vous devez crer 2 fichiers XML:

Un fichier nomm metadata.xml pour prsenter l'entre de menu qui correspond a votre dossier de Vue.

Il faut alors renseign un title et un message:

<?xml version="1.0" encoding="utf-8"?>

<metadata>

<view

title

="ecran1 de Simple Content">

<message>

23 / 28

Cration d'un composant MVC - Hello World

<![CDATA[Ecran qui affiche la liste des contenus]]>

</message>

</view>

</metadata>

Le fichier list.xml pour qualifier le lien de menu vers lcran list.php.

Dans notre exemple, le fichier dclare un title et un message dans la balise layout. Puis dans la balise state, un name et une description seront affichs sur l'cran de cration du menu et 2 paramtres seront personnalisable dans ce mme cran.

Le paramtre inclut dans la balise <url> la spcificit dtre transmis dans l'url et donc de pouvoir tre modifi de faon contextuelle!

<?xml version="1.0" encoding="utf-8"?>

<metadata>

<layout

title

="Liste des contenus">

24 / 28

Cration d'un composant MVC - Hello World

<message>

<![CDATA[La liste d'affichage avec les titres des articles]]>

</message>

</layout>

<state>

<name>Liste Simple Content</name>

<description>La liste d'affichage avec les titres des articles</description>

<

url

>

<param type="text" name="param1" label="Mon param1" description="le 1er param (inclu dans l'url)" de

</url>

<

params

>

<param type="text" name="param2" label="Mon param2" description="le 2nd param" default="" />

25 / 28

Cration d'un composant MVC - Hello World

</params>

</state>

</metadata>

ces 2 fichiers permettront d'avoir ce rendu dans le backend, dans la gestion des menus:

26 / 28

Cration d'un composant MVC - Hello World

Composant complet
Pour vous permettre de tester et personnaliser cet exemple, vous trouverez ci-dessous, le composant complet

27 / 28

Cration d'un composant MVC - Hello World

Note: ce tutoriel a t compltement refondu en dcembre 2011 pour fiabiliser et amliorer sa comprhension, merci de vos retours dans les commentaires ci-dessous.

28 / 28