Étape 1 - Les principes de base

Thank you for your contribution: 

Vous pouvez déjà sponsoriser ce chapitre

Ornate StaircaseRecueillons quelques éléments pour la première étape de notre composant immobilier. Un composant doit avoir un nom unique et la plus simple façon d'y parvenir est d'utiliser votre nom ou celui de votre entreprise au début.

  • Le nom lisible par un humain pour le composant est "Cocoate Real Estate".(cocoate immobilier)
  • Le nom compréhensible par une machine pour le composant est cocoaterealestate (tout en rédigeant cet exemple de composant, j'ai appris qu'il est préférable d'éviter les traits de soulignement dans les noms de fichier).
  • Les dossiers où se situent le composant se nomment com_cocoaterealestate
  • Il y a une vue appelée object. Cette vue devrait afficher plus tard des listes de maisons.
  • Nous avons besoin de la possibilité de créer un élément de menu pour accéder au composant
  • Nous voulons avoir un élément de menu dans le backend qui affiche À venir (coming soon).

Frontend et Backend

En language "extension" le  frontend est appelé site et le backend est appelé admin

Si vous avez un élément de menu sur votre page qui mene à votre composant et qu'un utilisateur clique sur ce lien

  • Joomla! évalue le chemin de l'URL: /index.php?option=com_cocoaterealestate
  • Il recherche dans la table components de la base de données un composant nommé cocoaterealestate.
  • Il cherche après le dossier  com_cocoaterealestate dans le dossier du  site  /components.
  • Dans ce dossier il cherche un fichier appelé cocoaterealestate.php.
  • Il interprète ce fichier.

La même chose arrive dans la partie admin. Si un manager ou un administrateur clique sur l'élément de menu,

  • Joomla! évalue le chemin de l'URL: /administrator/index.php?option=com_cocoaterealestate
  • Il recherche dans la table components de la base de données un composant nommé cocoaterealestate.
  • Il cherche après le dossier com_cocoaterealestate dans le dossier del'admin  /administrator/components ..
  • Dans ce dossier il cherche un fichier appelé cocoaterealestate.php.
  • Il interprète ce fichier.

Puisque nous devons établir deux applications dans un composant avec le même nom, nous devons avoir une structure. Pour interpréter de la bonne manière, vous avez besoin de plusieurs fichiers.

  • cocoaterealestate.xml – Le fichier XML avec toutes les informations pour l'installateur
  • cocoaterealestate.php – Le point de départ de votre composant
  • controller.php – Le C dans MVC, le contrôleur
  • views/object/view.html.php – Le fichier qui reçoit les données du modèle (le M dans MVC) et le prépare pour la vue (le V dans MVC)
  • views/object/tmpl/default.php – Un template par défaut  pour la partie composant de la page. Il est possible de le surcharger par le template Joomla! qui est installé.

Nous avons besoin de la même structure dans l'interface admin. Les deux applications sont totalement séparés.

Fichiers et Installation

Chaque extension a besoin d'un enregistrement dans la table extension de la base.Sans cet enregistrement il n'existe pas aux yeux du CMS Joomla! et il n'est pas possible d'utiliser l'extension, même si tous les fichiers sont au bon endroit. L' enregistrement de base est généralement créé lorsque vous installez le composant.

Mais comment commencer? Vous devez écrire le composant d'abord :)

Comme toujours, vous avez deux possibilités.

Découvrez l'Extension

Depuis Joomla ! 1.6 il y a une option "découvrir" dans le gestionnaire d'extensions. Vous pouvez placer les fichiers de votre composant dans les bons dossiers et cliquer sur l'option "découvrir" dans le gestionnaire d'extensions. Il va lire le fichier .xml du composant et mettre à jour la table extension. Le composant est prêt à l'emploi.

Vos dossiers devraient être placés comme ceci. Un fichier index.html doit être placé dans chaque dossier pour des raisons de sécurité.

/component/com_cocoaterealestate/cocoaterealestate.php

/component/com_cocoaterealestate/controller.php

/component/com_cocoaterealestate/index.html

/component/com_cocoaterealestate/view/object/view.html.php

/component/com_cocoaterealestate/view/object/index.html

/component/com_cocoaterealestate/view/object/tmpl/default.php

/component/com_cocoaterealestate/view/object/tmpl/default.xml

/component/com_cocoaterealestate/view/object/tmpl/index.html

/component/com_cocoaterealestate/view/index.html

/administrator/components/com_cocoaterealestate/cocoaterealestate.php

/administrator/components/com_cocoaterealestate/cocoaterealestate.xml

/administrator/components/com_cocoaterealestate/index.html

Installez l'Extension

L'autre façon est d'installer votre extension via le gestionnaire d'extensions de Joomla ! . Dans ce cas, vous devez placer les fichiers en dehors de Joomla!, Les compresser dans une archive zip et le transférer à l'installateur.Après l'installation, le composant est prêt à l'emploi.

Vos dossiers devraient être placés comme ceci. Un fichier index.html doit être placé dans chaque dossier pour des raisons de sécurité.

/site/cocoaterealestate.php

/site/controller.php

/site/index.html

/site/view/object/view.html.php

/site/view/object/index.html

/site/view/object/tmpl/default.php

/site/view/object/tmpl/default.xml

/site/view/object/tmpl/index.html

/site/view/index.html

/administrator/cocoaterealestate.php

/administrator/cocoaterealestate.xml

/administrator/index.html

A la fin de ce chapitre vous trouvez le composant d'exemple attaché.

Le Code

Au total nous avons besoin de sept fichiers de code et du fichier index.html.

Fichier: index.html

Si un visiteur dirige son navigateur directement vers un dossier du composant, il serait possible, selon la configuration du serveur Web, qu'il aille voir un répertoire de ce dossier.Pour éviter cela vous devez placer un fichier appelé index.html dans chaque dossier. (Listing 1). Cette exigence est un point discutable (Les fichiers de la colère) mais c'est nécessaire pour être répertorié dans le dépot d'extensions Joomla! (JED).

<!DOCTYPE html><title></title>

Listing 1: index.html

Fichier: /administrator/cocoaterealestate.php

C'est le fichier qui est exécuté lorsque vous cliquez sur le composant dans la zone d'administration (Figure 1). il peut  "tout" contenir  :)

cocoate.com/node/10196

Figure 1: Sortie en backend

À venir!

Listing 2: /administrator/cocoaterealestate.php

File: /administrator/cocoaterealestate.xml

Le fichier .xml contient des métadonnées et les informations sur où mettre les fichiers. Vous pouvez voir une partie des données de Figure 2.

cocoate.com/node/10196

Figure 2:  Données XML dans le gestionnaire d'extension

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

    <name>Cocoate Real Estate</name>
    <!-- The following elements are optional and free of formatting constraints -->
    <creationDate>November 2011</creationDate>
    <author>Hagen Graf</author>
    <authorEmail>hagen@cocoate.com</authorEmail>
    <authorUrl>http://cocoate.com</authorUrl>
    <copyright>2006-2011 cocoate.com - All rights reserved</copyright>
    <license>GPL 2</license>
    <!--  The version string is stored in the components table -->
    <version>0.0.1</version>
    <!-- The description is optional and defaults to the name -->
    <description>House listings on your website.</description>

    <!-- 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>cocoaterealestate.php</filename>
        <filename>controller.php</filename>
        <folder>views</folder>
    </files>

    <administration>
        <menu>Cocoate Real Estate</menu>
        <!-- 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">
            <filename>index.html</filename>
            <filename>cocoaterealestate.php</filename>
        </files>
    </administration>
</extension>

Listing 3: /administrator/cocoaterealestate.xml

File: /site/cocoaterealestate.php

La déclaration (" _JEXEC ') or die ;  doit être pour des raisons de sécurité en haut de chaque fichier. Php. Cette déclaration vérifie si le fichier est appelé dans une session Joomla!(Listing 4).

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

// Import of the necessary classes
jimport('joomla.application.component.controller');

// Get an instance of the controller prefixed by CocoateRealEstate
$controller = JController::getInstance('CocoateRealEstate');

// Perform the Request task
$controller->execute(JRequest::getCmd('task'));

// Redirect if set by the controller
$controller->redirect();

Listing 4: /site/cocoaterealestate.php

Fichier: /site/controller.php

C'est le contrôleur, le C de MVC. Pour l'instant il n'ya rien à contrôler, le fichier reste vide (Listing 5)

defined('_JEXEC') or die;
jimport('joomla.application.component.controller');
class CocoateRealEstateController extends JController
{
}

Listing 5: /site/controller.php

Fichier: /site/view/object/view.html.php

Les vues sont le V de MVC et elles sont séparées en différentes vues. Le nom du dossier est le nom de la vue. Dans notre cas, nous aurons besoin de la liste de toutes les maisons et une page détaillée pour un objet. Les vues sont séparées dans des fichiers pour la collecte des données nécessaires à partir du modèle (qui viendra, lui aussi, plus tard ) et le fichier de template avec le balisage. Dans le Listing 6 vous voyez la récolte de données pour la liste d'objets.

// No direct access to this file
defined('_JEXEC') or die;
jimport('joomla.application.component.view');
class CocoateRealEstateViewObject extends JView
{
    function display($tpl = null)
    {
        // Assign data to the view
        $this->item = 'Cocoate Real Estate';

        // Display the view
        parent::display($tpl);
    }
}

Listing 6: /site/view/object/view.html.php

Fichier: /site/view/object/tmpl/default.php

C'est le fichier de template avec le balisage (Listing 7). Ce fichier peut être copié et écrasé par template principal de Joomla ! .

// No direct access to this file
defined('_JEXEC') or die;
?>
<h1><?php echo $this->item; ?></h1>

Listing 7: /site/view/object/tmpl/default.php

Fichier: /site/view/object/tmpl/default.xml

C'est le fichier de configuration pour le gestionnaire d'élément de menu (Figure 3, Listing 8)

cocoate.com/node/10196

Figure 3: Données XML  dans le gestionnaire de menu

<?xml version="1.0" encoding="utf-8"?>
<metadata>
    <layout title="Cocoate Real Estate">
        <message>Object</message>
    </layout>
</metadata>

Listing 8: /site/view/object/tmpl/default.xml