Tutoriel : créer une extension contao 3 (Notions de base)

Contribution des utilisateurs
guigui
Membre
Messages : 54
Inscription : 22 Mars 2012 11:22
Localisation : Loire-Atlantique / Vendée

Tutoriel : créer une extension contao 3 (Notions de base)

Messagepar guigui » 06 Nov 2013 17:02

Bonjour,

Pour les gens qui sont comme moi, c'est à dire ceux qui aiment contao et voudraient développer leurs petites extensions mais qui ne sont pas des professionnels et qui ne trouvent pas de tutos sur Contao 3, je vous traduis (à mon avis Klausgrenoble ferais mieux que moi !) ce que j'ai trouvé sur le wiki contao allemand: un tuto écrit de Kobayashi par rapport à une vidéo tuto de Tristan Lins.

ATTENTION : la traduction n'est pas terrible car je me suis aidé de google chrome (Je ne parle pas l'allemand !). Si des développeurs et traducteurs veulent corriger certaines choses ... n'hésitez pas !! :wink:

Le lien du tutoriel : http://de.contaowiki.org/C3:_Tutorial_Extension_Entwicklung_1.Teil:_Grundlagen

La vidéo du tutoriel (pour les allemands) : http://www.youtube.com/watch?v=WeN5a0R9asQ&feature=share&list=PL3mn8AtCRAstvuAWY8dhrHisMYapPxOnt

De Kobayashi :
"
Présentation

Depuis 2010, je travaille maintenant avec Contao. Avant j'ai essayé le CMS Joomla, Drupal et Typo3 et je dois dire: Contao déménage ! Malheureusement, le CMS, à mon avis, a un inconvénient considérable comparé aux autres systèmes: Il ya quelques tutoriaux qui permettent aux programmeurs "semi-professionnels" une introduction progressive et cohérente pour le développement de l'extension Contao 3 sur la base d'un exemple concret.
La série de screencast par Tristan Lins sur Youtube représente une exception, mais pas pour avoir un tutoriel sous forme écrite devant moi. Par conséquent, j'ai commencé à transférer la vidéo sur ce wiki. Amusez-vous bien!

À qui ce tutoriel est-il destiné ?

Ce tutoriel est conçu pour ceux qui veulent un tutoriel étape par étape pour vous aider à démarrer dans le développement d'extensions avec Contao 3

Objectif

Dans ce tutoriel, vous apprendrez les bases du développement d'extension avec Contao 3 avec un exemple concret. Il s'agit d'un module de programme, qui screencast des URL différentes, y compris les listes de titres.

Le module fini:
Image

Ce que vous devez savoir

Notions de base de PHP, programmation orientée objet et SQL sont nécessaires. Bien sûr, vous devez également être familier avec les bases de Contao 3

Préparation

Une version de Contao 3.0.4 ou une version ultérieure doit être installé. En option: Depuis l'extension est intégrée dans le thème existant "de l'Académie de Musique", il est conseillé d'installer selbiges (bon ça j'arrive pas à le traduire !!). En outre, la structure de dossier devra être crée de cette façon: dans contao/system/modules :

Image

Pour clarifier: Dans le répertoire des modules, les modules qui sont déjà fournis par notre module d'extension Contao sont comme FAQ, calendrier etc ... «screencast» appartient aussi à ce répertoire.

Source Code

Le code source, en téléchargement ici: https://github.com/bit3/contao-screencast3

Créer un élément de menu dans la zone du contenu des modules backend.

Créée dans le fichier config : config.php .
config.php comme modules front-end et back-end sont enregistrés.
Écrit dans le fichier config.php code suivant:

Code : Tout sélectionner

<?php
 
/**
 * Back end modules
 */
$GLOBALS['BE_MOD']['content']['screencast'] = array(
   'tables' => array('tl_screencast'),
   'icon'   => 'system/modules/screencast/assets/images/screencast.png'
);


Il est ['BE_MOD'] ['contenu'] pour les éléments des modules backend dans le contenu (tableau). En élargissant la gamme de ['screencast'] est notre nouveau module référencé. La valeur du tableau est passé (se reporter à la table de la base de données et cliquez sur le fichier d'image) un tableau associatif avec deux entrées.

Ajoute dans le dossier screencast/assets/ l'image de l'icône de votre module.
Depuis le répertoire actif est protégé, vous devez avoir un fichier htaccess dans screencast/assets/ . Il doit être:

Code : Tout sélectionner

<IfModule !mod_authz_core.c>
  Order allow,deny
  Allow from all
</IfModule>
<IfModule mod_authz_core.c>
  Require all granted
</IfModule>


Attention: Il ya un écart par rapport à la screencast, comme dans la version Apache 2.4 de la déclaration doit être différent.

Seront affichés dans la liste des éléments dans le module backend, une traduction correspondante.
Cela a créé un répertoire dans screencast/languages/
Créés dans ce répertoire un fichier modules.php

Dans ce fichier, lui donner un code suivant:

Code : Tout sélectionner

<?php
 
$GLOBALS['TL_LANG']['MOD']['screencast'][0] = 'Screencasts';
$GLOBALS['TL_LANG']['MOD']['screencast'][1] = 'Screencasts verwalten';


Ouvrez votre Contao et navigué sur Système-> Préférences
Remet-il un crochet sous le paramètres de sécurité-> cache interne (de v 3.1. Paramètres-> Globale contournement de mémoire cache interne). Et la sécurité Configuration-> messages d'erreur écran.
Votre barre latérale devrait ressembler à ceci après la mise à jour de la page:

Image

Eureka! L'entrée apparaît dans la liste. Malheureusement, un un message d'erreur apparait en cliquant sur screencast.

Qu'est-ce qui manque? Un objet DCA pour Contao.

Qu'est-ce qu'un DCA ?

Les "Array Data Container" (DCA) sont utilisés pour stocker des tables de métadonnées. Chaque DCA décrit la configuration d'un tableau particulier, leurs relations avec les autres tables ainsi que les différents champs. Le moteur de base Contao utilise ces métadonnées, telles que les dossiers répertoriés, traités et sauvés.
(Source: https://contao.org/de/manual/3.0/data-c ... rrays.html , à compter du 6.4.13)

Comment une DCA est-elle structurée ?

«Un tableau contenant des données est divisé en 6 sections. La première section recueille de l'information globale, comme les relations avec d'autres tables. La deuxième et la troisième section définit comment les enregistrements sont répertoriés et les actions qu'un utilisateur peut effectuer. La Quatrième section définit les différents groupes des champs de saisie (palettes) et les deux dernières sections décrivent les champs dans le détail ".

(Source: https://contao.org/de/manual/3.0/data-container-arrays.html , à compter du 6.4.13)

Nouveau dans Contao 3: Dans le fichier DCA et les commandes SQL sont entrés. Un fichier séparé n'est plus nécessaire.
Tout va bien? Non? Ok ... alors étape par étape.

Créer le formulaire d'enregistrement de données, et créer la table de base de données.

Créez dans screencast/DCA/ un fichier nommé tl_screencast.php .

Configuration de la Table

Note: A partir de maintenant «Mind the Gap!". Certains articles ne sont pas devenus tout à fait clair dans le screencast pour moi. Malheureusement, la documentation sur Contao.org dans ce domaine est encore assez rudimentaire.

J'écris donc ce que j'ai compris.

Sur la page Contao vous pouvez trouver des informations sur les entrées possibles dans la DCA. https://contao.org/de/manual/3.0/data-container-arrays.html

Malheureusement, ici, n'est pas encore inscrits, qui sont attribués aux entrées de tableau de la section. Tristan recommande que vous empruntez de l'utilisation de modules existants. Pour l'explication suivante, il est conseillé néanmoins, de comprendre la partie DCA de la documentation en ligne et d'en apprendre davantage sur l'importance des entrées de tableau.

Si vous ne voulez pas tout écrire vous-même, copiez d'abord l'intégralité du contenu du fichier sytem/modules/core/DCA/tl_theme.php dans le tl_screencast.php et modifiez selon les exemples suivants.

Écrire dans le fichier tl_screencast.php la suite de lignes de code:

Code : Tout sélectionner

<?php
 
 
/**
 * Table tl_screencast
 */
$GLOBALS['TL_DCA']['tl_screencast'] = array
(
 
   // Config
   'config'   => array
   (
      'dataContainer'    => 'Table',
      'enableVersioning' => true,
      'sql'              => array
      (
         'keys' => array
         (
            'id' => 'primary'
         )
      ),
   ),


Qu'est-ce qui se passe ici?

Dans cette section, nous définissons les paramètres de base de notre module, par exemple lorsque les données nous proviennent. Complète le fichier avec le code suivant:

Code : Tout sélectionner

// List
   'list'     => array
   (
      'sorting'           => array
      (
         'mode'        => 2,
         'fields'      => array('title'),
         'flag'        => 1,
         'panelLayout' => 'filter;sort,search,limit'
      ),


Qu'est-ce qui se passe ici?

Dans cette section on spécifie comment les dossiers sont listés et options de tri qui sont à la disposition des utilisateurs. Comment est l'agencement du panneau par exemple, les options qui devraient apparaître dans le Kopzeile. Semiokolon ou une virgule représentent que la mise en page (mono ou multi-ligne). Mais ne me demandez pas pourquoi filtrage n'apparaît pas dans l'exemple de Tristan.

Image

Regardez ce qui concerne les autres options dans le document en ligne «Liste des dossiers» sous après.

Complète le fichier avec le code suivant (Video: 20:45):

Code : Tout sélectionner

'label'             => array
      (
         'fields' => array('title'),
         'format' => '%s',
      ),


Qu'est-ce qui se passe ici?

Voici les noms figurant à apparaître plus tard dans la vue de liste. Dans notre cas toujours le titre des screencasts.

Image

Complète le fichier avec le code suivant (video: 21:25):

Code : Tout sélectionner

'global_operations' => array
      (
         'all' => array
         (
            'label'      => &$GLOBALS['TL_LANG']['MSC']['all'],
            'href'       => 'act=select',
            'class'      => 'header_edit_all',
            'attributes' => 'onclick="Backend.getScrollOffset()" accesskey="e"'
         )
      ),


Qu'est-ce qui se passe ici?

Dans «opérations globales» il y'a les zones de texte dessous les champs de filtre.

Image

Complétez le fichier avec le code suivant (Vidéo: 21h44):

Code : Tout sélectionner

'operations'        => array
      (
         'edit'   => array
         (
            'label' => &$GLOBALS['TL_LANG']['tl_screencast']['edit'],
            'href'  => 'act=edit',
            'icon'  => 'edit.gif'
         ),
         'delete' => array
         (
            'label'      => &$GLOBALS['TL_LANG']['tl_screencast']['delete'],
            'href'       => 'act=delete',
            'icon'       => 'delete.gif',
            'attributes' => 'onclick="if(!confirm(\'' . $GLOBALS['TL_LANG']['MSC']['deleteConfirm'] . '\'))return false;Backend.getScrollOffset()"'
         ),
         'show'   => array
         (
            'label'      => &$GLOBALS['TL_LANG']['tl_screencast']['show'],
            'href'       => 'act=show',
            'icon'       => 'show.gif',
            'attributes' => 'style="margin-right:3px"'
         ),
      )
   ),


Qu'est-ce qui se passe ici?

Dans les «opérations» il y'a les boîtes d'édition pour chaque entrée de la liste.

Image

Maintenant, nous arrivons au cœur véritable de toute extension: Le formulaire BE avec les champs de saisie. Il est défini par la palette de la zone DCA .

Complétez le fichier avec le code suivant (video: 22:55):

Code : Tout sélectionner

// Palettes
   'palettes' => array
   (
      'default'       => '{title_legend},type,title,{screencast_legend},url'
),


Qu'est-ce qui se passe ici?

La structure grossière de la forme est créée, ce qui est présenté plus tard à la BE-utilisateur d'entrer des données. Toujours le nom de la section entre geschweifen. Voici les champs. Un point-virgule commence une nouvelle section.

Image

Complétez le fichier avec le code suivant (Video: 24:30):

Code : Tout sélectionner

// Fields
   'fields'   => array
   (
      'id'     => array
      (
         'sql' => "int(10) unsigned NOT NULL auto_increment"
      ),
      'tstamp' => array
      (
         'sql' => "int(10) unsigned NOT NULL default '0'"
      ),
      'title'  => array
      (
         'label'     => &$GLOBALS['TL_LANG']['tl_screencast']['title'],
         'inputType' => 'text',
         'exclude'   => true,
         'sorting'   => true,
         'flag'      => 1,
                        'search'    => true,
         'eval'      => array(
            'mandatory'   => true,
                                'unique'         => true,
                                'maxlength'   => 255,
            'tl_class'        => 'w50',
 
         ),
         'sql'       => "varchar(255) NOT NULL default ''"
      ),
                'url'    => array
      (
         'label'         => &$GLOBALS['TL_LANG']['tl_screencast']['url'],
         'inputType' => 'text',
         'exclude'     => true,
         'sql'            => "text NULL"
      )
       )
);


Qu'est-ce qui se passe ici?

Dans la section des champs tous les domaines sont définis pour être créés dans la table de base de données. Ceux-ci sont généralement plus de champs que sont émis sous la forme du module back-end (par exemple un est l'id probablement presque toujours automatiquement). Les champs Id et tstamp ailleurs sont toujours obligatoires. sql est (surprise) toujours l'instruction SQL.

Nous nous occupons de différents champs: 'title' et 'url' sont les deux champs de saisie dans le module BE. C'est ce que nous avons également défini dans les «palettes». Ces deux champs sont configurés avec quelques autres propriétés:

- Label: est une référence à la variable de la langue qui n'est pas défini.
- inputType: (cf Contao Docs) user dans le cas d'une zone de texte
- exclude : permet à l'administrateur de bloquer les éditeurs pour ce domaine plus tard.
- sorting: Indique que ce domaine peut être sélectionné plus tôt dans la gamme de tri
- flag: Contrôle l'ordre de tri
- Search: Indique que ce domaine peut être recherché plus tôt dans la gamme de tri
- eval: Configure un champ de saisie en détail (voir Contao Docs). Dans notre cas, s'il s'agit d'un champ obligatoire si elle est unique, la zone de texte de longueur et la présentation, que ce champ est affiché dans le module BE.

Rechercher des tl_class également la vidéo ou la section aligner les champs dans la documentation.

Ceux qui utilisent le code de l' tl_theme.php copié:

S'il vous plaît supprimer le code suivant dans votre fichier. La définition de la classe n'est pas requis pour ce mode de réalisation.

Le grand moment est proche: Dans Contao BE à Système-> Extension Manager et cliquez sur mise à jour de base de données .

Si vous avez tout fait correctement, vous devriez recevoir un message de Contao fait qu'un nouveau tableau est créé. Cliquez sur Mettre à jour.

Maintenant, vous pouvez réellement même créer un screencast .... mais il manque toujours les variables linguistiques.

Donc créez un fichier tl_screencast.php dans le répertoire screencast/languages​​/fr .

Donnez le code suivant dans ce fichier (vidéo: 32:30):

Code : Tout sélectionner

<?php
 
$GLOBALS['TL_LANG']['tl_screencast']['title_legend'] = 'Titre';
 
$GLOBALS['TL_LANG']['tl_screencast']['type'][0] = 'Type';
$GLOBALS['TL_LANG']['tl_screencast']['type'][1] = 'A partir de là, si c'est une vidéo externe ou local.';
 
$GLOBALS['TL_LANG']['tl_screencast']['title'][0] = 'Titre';
$GLOBALS['TL_LANG']['tl_screencast']['title'][1] = 'Voici le titre du screencast.';
 
$GLOBALS['TL_LANG']['tl_screencast']['screencast_legend'] = 'Screencast';
 
$GLOBALS['TL_LANG']['tl_screencast']['url'][0] = 'Video URL';
$GLOBALS['TL_LANG']['tl_screencast']['url'][1] = 'Entrez ici l'URL de la vidéo.';
 
$GLOBALS['TL_LANG']['tl_screencast']['new'][0] = 'Nouveau screencast';
$GLOBALS['TL_LANG']['tl_screencast']['new'][1] = 'Créer un nouveau fichier de screencast';
 
$GLOBALS['TL_LANG']['tl_screencast']['edit'][0] = 'Edit screencast';
$GLOBALS['TL_LANG']['tl_screencast']['edit'][1] = 'Editez ID %s';
 
$GLOBALS['TL_LANG']['tl_screencast']['delete'][0] = 'Supprimez le Screencast';
$GLOBALS['TL_LANG']['tl_screencast']['delete'][1] = 'Suppression ID %s';
 
$GLOBALS['TL_LANG']['tl_screencast']['show'][0] = 'Screencast details';
$GLOBALS['TL_LANG']['tl_screencast']['show'][1] = 'Details des Screencast ID %s';


Qu'est-ce qui se passe ici?

Toutes les traductions sont créés, qui sont nécessaires pour le backend. Les clés de ce tableau est nécessaire dans certains cas, leur dossier sous la DCA palettes ou dans les opérations globales et des opérations .
Les descriptions des champs sont toujours sur la deuxième entrée du tableau.

Exemple:

['Titre'] désigne les palettes au titre de l'entrée. [0] est le titre du champ BE. [1] Ci-dessous la description du champ. Ceci est automatiquement ajouté.

Image

Créer la classe de la logique de sortie

Vidéo: (39:00)

Ajoutez dans le répertoire screencast/modules/ le fichier ModuleScreencastList.php
Ajoutez dans le répertoire screencast/templates le fichier mod_screencast_list.html5 . Pour ceux qui travaille encore avec xhtml: créez également mod_screencast_list.xhtml .

Ajoutez y le code suivant dans le fichier ModuleScreencastList.php :

Code : Tout sélectionner

<?php
 
class ModuleScreencastList extends Module
{
   /**
    * Template
    * @var string
    */
   protected $strTemplate = 'mod_screencast_list';
 
   /**
    * Compile the current element
    */
   protected function compile()
   {
      /** @var \Contao\Database\Result $rs */
      $rs = Database::getInstance()
         ->query('SELECT * FROM tl_screencast ORDER BY title');
 
      $this->Template->screencasts = $rs->fetchAllAssoc();
   }
}


Qu'est-ce qui se passe ici?

Dans ce fichier, les enregistrements sont lus à partir de la base de données et transmises au modèle FE. La classe nécessaire doit donner le même nom que le nom du fichier.
En outre, la class de la class parent doit hériter du modules .

Avec les instructions suivantes vous pouvez réellement comprendre correctement que si le fichier module.php dans system/modules/core/modules regarder, et jette un regard dans les prochaines classes de übergeordnetetn.

Je vais essayer sans référence aux classes parentes:
Première Contao est passé le fichier modèle ($ strTemplate).
Puis suit la méthode compile (), qui prépare les données pour livraison au modèle.
Maintenant, un objet de base de données Contao via la méthode statique getInstance () est généré (SYSTEM / modules / core / Library / Contao / database.php). Cet objet a des méthodes pour interroger et fournit un objet DB résultat Contao (system / modules / core / Library / Contao / Base de données / Result.php). Cet objet a de nouveau la méthode fetchAllAssoc (), qui retourne un tableau associatif (key = nom de domaine). Ce que nous stockons dans les screencasts variables qui sont affectées par les classes supérieures de modules screencast Liste d'un objet de modèle FE.

Créez le modèle FE

(Vidéo 43:00)

Pour les paresseux, le code copié à partir du mod_flash.html5 (system/modules/core/templates) dans son fichier mod_screencast_list.html5 .

A la fin du code devrait ressembler à ceci:

Code : Tout sélectionner

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
 
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
 
<?php foreach ($this->screencasts as $screencast): ?>
   <h2><?php echo $screencast['title']; ?></h2>
   <p>
      <iframe width="560" height="315" src="http://www.youtube-nocookie.com/embed/<?php echo str_replace('http://youtu.be/', '', $screencast['url']); ?>?rel=0" frameborder="0" allowfullscreen></iframe>
   </p>
<?php endforeach; ?>
 
</div>


Qu'est-ce qui se passe ici?

Le modèle est affiché dans le cadre de la class de modèle FE. Par conséquent, avec $this pour accéder aux attributs et méthodes de l'objet. C'est ce que nous avons défini dans la compilation () dans ModuleScreencastList.php .

Le modèle FE dans le registre système (vidéo 44:00)

(Vidéo 43:00)

Complétez le fichier config.php pour inclure le code suivant :

Code : Tout sélectionner

/**
 * Front end modules
 */
$GLOBALS['FE_MOD']['screencast'] = array
(
   'screencast_list'     => 'ModuleScreencastList',
);


Qu'est-ce qui se passe?

Notre modèle FE doit être portée à la connaissance du système Contao.

Maintenant, le module doit déjà dans le backend peut sélectionner dans la liste des modules. Cependant, il manque encore la traduction.

La traduction pour le modèle FE Créer (vidéo 44:00)

Ouvrez le fichier modules.php dans screencast/languages/fr/ et ajouter les lignes de code suivantes:

Code : Tout sélectionner

$GLOBALS['TL_LANG']['FMD']['screencast_list'] = 'La liste de Screencast';


Création des fichiers du chargeur automatique

Le chargeur automatique assure, par exemple, que tous les modèles et les classes du module nécessaires dans le système Contao sont enregistrés.

Idéalement, les fichiers du chargeur automatique peuvent être générés automatiquement. Naviguez dans l'outil Developpeur-> Créateur Chargement automatique . Sélectionne le module du screencast et cliquez sur créer des fichiers de chargement automatique. Vérifiez que le fichier autoload.php et autiload.ini sont dans votre répertoire config

Sinon, autoload.php:

Code : Tout sélectionner

<?php
 
/**
 * Contao Open Source CMS
 *
 * Copyright (C) 2005-2013 Leo Feyer
 *
 * @package Screencast
 * @link    https://contao.org
 * @license http://www.gnu.org/licenses/lgpl-3.0.html LGPL
 */
 
 
/**
 * Register the classes
 */
ClassLoader::addClasses(array
(
   // Modules
   'ModuleScreencastList' => 'system/modules/screencast/modules/ModuleScreencastList.php',
));
 
 
/**
 * Register the templates
 */
TemplateLoader::addFiles(array
(
   'mod_screencast_list' => 'system/modules/screencast/templates',
));


autoload.ini

Code : Tout sélectionner

;;
; Configure what you want the autoload creator to register
;;
register_namespaces = true
register_classes    = true
register_templates  = true


Fait!

Si vous avez tout fait correctement, vous pouvez maintenant utiliser votre module de screencast.

Perspectives

Dans la partie suivante, notre module est prolongé. Cela concerne, en se concentrant sur l'ajout de soi-disant sous-palettes qui permettent contextuelle (joli mot) la sélection des réglages dans la zone de module.
Pour allemand: Si l'utilisateur a le choix entre différentes sources d'screencast (par exemple YouTube, Vimeo, etc), a le changement Eingabe-/Auswahlfelder suivante.

Vous pouvez regarder la vidéo ici déjà: Video Link: palettes DCA et sous-palettes, MetaPalettes

Sun .. j'ai terminé premier. Jusqu'à la prochaine fois. Salutations de Kobayashi

Avatar de l’utilisateur
audrey
Membre
Messages : 282
Inscription : 07 Mars 2011 09:09
Localisation : Perpignan
Contact :

Re: Tutoriel : créer une extension contao 3 (Notions de base

Messagepar audrey » 14 Nov 2013 08:32

Génial ce tuto ! Merci :-)

Avatar de l’utilisateur
Bouctoubou
Modérateur
Messages : 143
Inscription : 20 Avr 2008 19:35

Re: Tutoriel : créer une extension contao 3 (Notions de base

Messagepar Bouctoubou » 15 Nov 2013 11:28

Yep, allez je le passe en post-it.
http://www.telly-d.com

guigui
Membre
Messages : 54
Inscription : 22 Mars 2012 11:22
Localisation : Loire-Atlantique / Vendée

Re: Tutoriel : créer une extension contao 3 (Notions de base)

Messagepar guigui » 21 Oct 2015 10:18

EDIT : Vous pouvez trouver un tutoriel en Anglais sur ce lien :

https://github.com/contao/docs/tree/master/cookbook/en/custom-module

(Je le mets ici car je ne plus mettre d'url en BBcode)


Revenir vers « Tutoriels utilisateurs »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités