Voici un tutorial pour créer une application « composant » sur Joomla! grâce à la nouvelle API basé sur Joomla framework MVC 1.5

Le gros avantage de la version 1.5 par rapport à la version 1.0, c’est qu’elle propose une API bien mieux construire et rend beaucoup plus agréable le développement d’applications. Le nouveau framework est basé sur le design-pattern MVC bien que la couche modèle est quelque peu inutile, étant donné que Joomla 1.5 ne fonctionne avec rien d’autre que MySQL, cela dit, on a le choix entre les drivers « mysql » ou « mysqli ».

Nous illustrerons une application simple qui saisie des utilisateurs dans une table et qui les affiche sous la forme d’une liste. Cette application nous permettra de voir d’une façon pragmatique la structure des applications Joomla! et les fonctions de base du framework : création d’une classe modèle (ajout, mise à jour, suppression et requêtes en base de données), création d’un controller avec les actions de base (une action pour création et édition et une autre pour le listing), gestion des templates, redirections et notifications des erreurs et succès.

Télécharger Joomla! 1.5.x : Joomla_1.5.15

Télécharger l’application : Joomla! Crud Tutoriel

Voici ci-dessous la hiérarchie de notre application, il s’agit d’un répertoire à créer dans le dossier « components » de Joomla! :

Voici le script SQL correspondant à la table « jos_crud_users » qui contient les données :

--
-- Structure de la table `jos_crud_users`
--

CREATE TABLE IF NOT EXISTS `jos_crud_users` (
 `user_id` int(11) NOT NULL AUTO_INCREMENT,
 `user_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
 `user_lastname` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
 `user_email` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
 PRIMARY KEY (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Voici le premier fichier à créer, « crud.php » il s’agit du fichier d’entrée qui est exécuté dès qu’un utilisateur visite l’application :

<?php
/**
 * @package    Joomla.Crud
 * @subpackage Components
 * components/com_crud/crud.php
 * @link http://www.alexandre-julien.com
 * @author Alexandre JULIEN
 */

// Pas d'accès direct à la page
defined( '_JEXEC' ) or die( 'Restricted access' );

// Requiert la classe des contrôleurs

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

// Requiert un contrôleur spécifique si demander
if($controller = JRequest::getVar('controller')) {
 $path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php';
 if (file_exists($path)) {
 require_once $path;
 } else {
 $controller = '';
 }
}

// Instanciation du contrôleur
$classname    = 'CrudController'.$controller;
$controller   = new $classname( );

// Execute la tâche demandée
$controller->execute( JRequest::getVar( 'task' ) );

// Redirection si elle est sollicitée par le contrôleur
$controller->redirect();
?>

Voici maintenant le contrôleur, chaque méthode correspond à une tâche accessible par l’url : « index.php?option=com_crud&task=lamethode »

<?php
/**
 * @package    Joomla.Crud
 * @subpackage Components
 * @link http://www.alexandre-julien.com
 * @license GNU / GPL
 * @author Alexandre JULIEN
 */

// No direct access

defined( '_JEXEC' ) or die( 'Restricted access' );

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

/**
 * Hello World Component Controller
 *
 * @package    Joomla.Tutorials
 * @subpackage Components
 */
class CrudController extends JController
{
 /**
 * Méthode d'affichage
 *
 * @access    public
 */
 function display()
 {
 $model = $this->getModel();
 $view = $this->getView('list', 'html');
 $view->users = $model->getAllUsers();
 $view->display();
 }

 /**
 * Formulaire de création d'un utilisateur
 * @return unknown_type
 */
 function add()
 {
 $view =& $this->getView('edit', 'html');
 $view->display();
 }

 /**
 * Formulaire d'édition d'un utilisateur
 * @return unknown_type
 */
 function edit()
 {
 if (isset($_GET) && isset($_GET['id']))
 {
 $view = $this->getView ('edit', 'html');
 $model =& $this->getModel();
 $view->data = $model->getUser($_GET['id']);
 $view->display();
 }
 else
 {
 $this->setRedirect('index.php?option=com_crud', "L'identifiant est manquant", 'error');
 }
 }

 /**
 * Sauvegarde d'un utilisateur
 * @return unknown_type
 */
 function save()
 {
 if (isset($_POST))
 {
 $model =& $this->getModel();
 if (isset($_POST['id']) && $model->getUser($_POST['id']))
 {
 $model->updateUser($_POST);
 }
 else
 {
 $model->addUser($_POST);
 }
 $this->setRedirect('index.php?option=com_crud', "Les modifications ont bien été enregistrées", 'message');
 }
 else
 {
 $this->setRedirect('index.php?option=com_crud', "Les données sont manquantes", 'error');
 }
 }

 /**
 * Suppression d'un utilisateur
 * @return unknown_type
 */
 function delete()
 {
 if (isset($_GET) && isset($_GET['id']))
 {
 $model =& $this->getModel();
 $model->removeUser($_GET['id']);
 $this->setRedirect('index.php?option=com_crud', "L'utilisateur a bien été supprimé", 'message');
 }
 else
 {
 $this->setRedirect('index.php?option=com_crud', "L'identifiant est manquant", 'error');
 }
 }
}
?>

La couche modèle qui gère les transactions avec la base de données dans le fichiers « models/crud.php » :

<?php
/**
 * Crud modèle pour le composant Crud
 *
 * @package    Joomla.Crud
 * @subpackage Components
 * @link http://www.alexandre-julien.com
 * @license    GNU/GPL
 * @author Alexandre JULIEN
 */

// Pas d'accès direct

defined( '_JEXEC' ) or die( 'Restricted access' );

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

/**
 * Modèle Crud
 *
 * @package    Joomla.Crud
 * @subpackage Components
 */
class CrudModelCrud extends JModel
{
 /**
 * Retourne tous les enregistrements de la table
 * @return unknown_type
 */
 function getAllUsers()
 {
 $query = 'SELECT * FROM #__crud_users';
 return $this->_getList ($query);
 }

 /**
 * Retourne l'enregistrement en fonction de l'identifiant de l'utilisateur
 * @param $user_id
 * @return unknown_type
 */
 function getUser ($user_id)
 {
 $query = 'SELECT * FROM #__crud_users WHERE user_id = '.(int)$user_id;
 $result = $this->_getList ($query);
 return $result[0];
 }

 /**
 * Ajoute un enregistrement
 * @param $values
 * @return unknown_type
 */
 function addUser ($values)
 {
 $db =& JFactory::getDBO();

 $row = new stdClass();
 $row->user_name = $values['user_name'];
 $row->user_lastname = $values['user_lastname'];
 $row->user_email = $values['user_email'];

 $db->insertObject ('#__crud_users', $row);
 }

 /**
 * Met à jour un enregistrement
 * @param $values
 * @return unknown_type
 */
 function updateUser ($values)
 {
 $db =& JFactory::getDBO();

 $row = new stdClass();
 $row->user_id = $values['user_id'];
 $row->user_name = $values['user_name'];
 $row->user_lastname = $values['user_lastname'];
 $row->user_email = $values['user_email'];

 $db->updateObject ('#__crud_users', $row, 'user_id');
 }

 /**
 * Supprime un enregistrement
 * @param $id
 * @return unknown_type
 */
 function removeUser ($id)
 {
 $db =& JFactory::getDBO();
 $query = 'DELETE FROM #__crud_users WHERE user_id = '.(int)$id;
 $db->setQuery($query);
 return $this->query();
 }
}
?>

Voici un exemple de fichier « View.html.php », il s’agit de celui de l’écran de listing :

<?php
/**
 * @package    Joomla.Crud
 * @subpackage Components
 * @link http://www.alexandre-julien.com
 * @license   GNU/GPL
 * @author Alexandre JULIEN
 */

// Pas d'accès direct

defined( '_JEXEC' ) or die( 'Restricted access' );

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

/**
 * HTML View pour afficher la liste des utilisateurs
 *
 * @package    Crud
 */

class CrudViewList extends JView
{
 function display($tpl = null)
 {
 $this->assignRef('data', $this->users);
 parent::display($tpl);
 }
}
?>

Le template de la vue « edit » :

<?php

// Pas d'accès direct

defined('_JEXEC') or die('Restricted access'); ?>

<h1>Edition d'un utilisateur</h1>
<form name="utilisateur" method="POST"
	action="<?php echo JRoute::_('index.php?option=com_crud&task=save') ?>">
<input type="hidden" name="user_id" value="<?php echo $this->data->user_id ?>" />
<table>
	<tbody>
		<tr>
			<th>Prénom de l'utilisateur</th>
			<td><input type="text" name="user_name"
				value="<?php if (isset($this->data)) { echo $this->data->user_name; } ?>" /></td>
		</tr>
		<tr>
			<th>Nom de l'utilisateur</th>
			<td><input type="text" name="user_lastname"
				value="<?php if(isset($this->data)) { echo $this->data->user_lastname; } ?>" /></td>
		</tr>
		<tr>
			<th>Email de l'utilisateur</th>
			<td><input type="text" name="user_email"
				value="<?php if(isset($this->data)) { echo $this->data->user_email; } ?>"></input></td>
		</tr>
	</tbody>
</table>

<br />
<br />
<input type="submit" value="Enregistrer" /></form>

Le template de la vue « list » :

<?php

// Pas d'accès direct

defined('_JEXEC') or die('Restricted access'); ?>

<h1>Liste des utilisateurs</h1>

<table>
	<tbody>
		<tr>
			<th>Nom</th>
			<th>Prénom</th>
			<th>Adresse e-mail</th>
			<th>Actions</th>
		</tr>
		<?php foreach ($this->data as $key => $value) { ?>
		<tr>
			<td><?php echo $value->user_lastname ?></td>
			<td><?php echo $value->user_name ?></td>
			<td><?php echo $value->user_email ?></td>
			<td><a
				href="<?php echo JRoute::_('index.php?option=com_crud&task=edit&id='.(int)$value->user_id) ?>">
			Editer </a> | <a
				href="<?php echo JRoute::_('index.php?option=com_crud&task=delete&id='.(int)$value->user_id) ?>">Supprimer</a></td>
		</tr>
		<?php } ?>
	</tbody>
</table>
<br />
<a href="<?php echo JRoute::_('index.php?option=com_crud&task=add') ?>">
Créer un utilisateur </a>

On pourra également créer un package Joomla! qui automatisera l’installation des fichiers et des tables SQL grâce à un fichier de configuration d’installation « hello.xml » :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install SYSTEM "http://www.joomla.org/xml/dtd/1.5/component-install.dtd">
<install type="component" version="1.5.0">
  <name>crud</name>
  <!-- Les éléments suivants sont optionnels  -->
  <creationDate>2009 09 21</creationDate>
  <author>Alexandre JULIEN</author>
  <authorEmail>mail@alexandre.julien.com</authorEmail>
  <authorUrl>http://www.alexandre-julien.com</authorUrl>
  <copyright>Le blog d'Alex</copyright>
  <license>GNU / GPL</license>
  <!--  Version du composant -->
  <version>stable 1.0</version>
  <!-- Description du Composant -->
  <description>Petit tutoriel CRUD pour illustrer Joomla! MVC Framework</description>

  <!-- Fichiers d'installation -->
  <files folder="site">
    <filename>crud.php</filename>
    <filename>controller.php</filename>
    <filename>models/crud.php</filename>
    <filename>views/edit/view.html.php</filename>
    <filename>views/edit/tmpl/default.php</filename>
    <filename>views/list/view.html.php</filename>
    <filename>views/list/tmpl/default.php</filename>
  </files>
  <install>
    <sql>
      <file charset="uft8" driver="mysql">install.sql</file>
      <file charset="utf8" driver="mysqli">install.sql</file>
    </sql>
  </install>
  <uninstall>
    <sql>
      <file charset="utf8" driver="mysql">uninstall.sql</file>
      <file charset="utf8" driver="mysqli">uninstall.sql</file>
    </sql>
  </uninstall>
  <administration>
    <!-- Administration Menu Section -->
    <menu>Joomla! CRUD</menu>

    <!-- Fichiers de la partie administration -->
    <files folder="admin">
      <filename>index.html</filename>
      <filename>install.sql</filename>
      <filename>uninstall.sql</filename>
    </files>
  </administration>
</install>

Voici des « screenshots » de notre application finale :

L’application est disponible ici dans cette archive : Tutoriel Joomla! CRUD (installation package)

Le magazine Smashing vient de publier un article très intéressant sur jQuery.  Il regroupe une cinquantaine de tutoriaux sur des plugins jQuery indispensables.

Avoir absolument à cette adresse : http://www.smashingmagazine.com/2009/08/23/50-useful-new-jquery-techniques/

Pour mettre votre première application en oeuvre, il vous faudra tout d’abord un serveur Apache et PHP5, il existe un grand nombre de solution pour vous faciliter son installation. Je conseille fortement les projets comme WAMP (Windows), MAMP (Mac) ou XAMPP (multi-plateforme). Les utilisateurs Linux utiliseront plutôt les paquets DEB et RPM fournient avec leur distribution ou une compilation à partir des sources pour les utilisateurs avancés.

Vérifier bien que votre installation fonctionne et que votre version de PHP est égale ou supérieur à la version 5.2.4, cela est nécessaire pour la version de Zend que nous utiliseront.

Tout d’abord il nous faut télécharger le framework sur le site de Zend, pour cela il faut impérativement créer un compte. Ensuite télécharger soit la version complète soit la version light du framework sachant que la version complète comporte quasiment que des exemples et une intégration du framework javascript Dojo.

Une fois le framework télécharger, il faudra créer un répertoire qui contiendra le framework et qui sera plus tard rélier à Apache. Dans notre exemple, on crée un dossier ZendFramework dans le workspace d’Eclipse. Il vous suffit de décompresser le contenu de l’archive téléchargée sur Zend dans le répertoire cible :

Il vous faudra ensuite utiliser la version CLI de PHP (Command Line Interface) pour générer les fichiers de notre premier projet grâce au ZendTools. Cette étape nécessite une configuration particulière si vous êtes sur Windows puisqu’il vous faudra créer une variable d’environnement pour éxécuter PHP. Les utilisateurs UNIX quant à eux pourront directement éxécuter l’application zf.php en CLI.

Pour faire cela, il suffit d’ouvrir une console et  de se rendre dans le répertoire « /bin » du framework. On constate qu’il y a deux fichiers exécutables le premier en .bat pour les utilisateurs Windows et le second en « .sh » pour les utilisateurs de systèmes UNIX.

Lorsque vous executez le script une première fois vous pourrez voir les fonctions que propose le ZendTool :

Pour créer notre premier projet que nous nommeront ZendBlog nous allons éxecutez la ligne de commande suivante :

« zf create project ZendBlog »

Nous avons générer notre première application, regardons la structure de cette dernière. En effet, elle comporte :

- un répertoire « controller » contenant les controlleurs du design-patterns MVC
- un répertoire « views » contenant les templates PHP.
- un répertoire « library » qui devra contenir les librairies du framework Zend
- un répertoire « public » contenant l’index.php qui sera la page principale de notre application et qui devra être la page accessible à Apache.
- un répertoire « test » contenant les tests unitaires de l’application.
- un répertoire « model » pour les classes correspondantes à la couche d’abstraction à la base de données.

Il vous faudra ensuite intégrer le répertoire Zend fournit avec l’archive dans le répertoire library de l’application sans cela,  rien ne pourra fonctionner et vous aurez l’erreur suivante sur votre application :

Une fois le framework installé, votre premier projet a été crée, il ne vous reste plus qu’à accéder à votre page « index.php » dans le répertoire « /public » et vous aurez le résultat suivant :

Voilà, c’est fini pour cette première partie, nous verrons prochainement comment fonctionne le modèle MVC sur le framework Zend et nous commenceront à génerer des « Layouts » pour mieux distinguer nos couches de présentations.

A très bientôt.