[HowTo] TYPO3. Build an extension from Scratch

Transcription

1 [HowTo] TYPO3 Build an extension from Scratch Abstract: Ce document va vous expliquer comment construire votre première extension et comment utiliser quelques outils et méthodes Typo3.

2 L extension que nous souhaitons créer: Permet de manipuler des éléments (type news) définis par: Un titre Une description courte Une description longue Ces éléments doivent être créé dans le backend Typo3 L extension doit être configurable pour permettre de régler l affichage: Le nombre d éléments affichés Le type d affichage en mode liste: uniquement les titres, ou titres et descriptions courtes En mode liste, le titre est un lien href permettant d avoir une vue complète de l élément

3 1Kickstarter: backbone create the extension

4 La création d une extension se fait en utilisation le Kickstarter:

5 Le Kickstarter lance alors un Wizard, qu il suffit de suivre: La première étape est de remplir l'extension key. Cette key est utilisée par le TER pour identifier l'extension, elle est donc unique.

6 Remplir ensuite le champ General Info. Ces informations sont uniquement informative

7 Notre extension a besoin de tables spécifiques, c est à cet endroit que nous allons définir la configuration de la BDD Définit le comportement des entrées en BDD

8 Suite de la configuration de la base de données. On définit maintenant les champs nécessaires.

9 Les trois champs nécessaires (title / short_desc / long_desc) sont créés)

10 Quand les trois champs sont créés on peut remonter dans la configuration de la base de données pour régler l affichage des élements.

11 Notre extension doit être un plugin Frontend, nous allons maintenant définir son comportement: Nom sous lequel l'extension apparaît pour le contributeur Permet d'ajouter le plugin dans le wizard de contribution

12 La configuration de l extension est complète. Il faut alors faire «View Result» «View Result» permet de voir ce que Typo3 va faire, puis de créer l'extension

13 La demande de création de l extension doit être validée. Cette précaution est nécessaire: le Kickstarter n est pas un éditeur. Si vous faîtes une modification sur une extension, il va *forcement* écraser l existant.

14 Si tout se passe correctement l installation est prête à être installée:

15 Le process d install est alors classique. Le Kickstarter va créer les tables nécessaires

16 L extension est maintenant correctement installée:

17 2The new extension discovery

18 Utiliser la nouvelle extension Pour commencer, nous allons utiliser le plugin sur une page, pour vérifier son bon fonctionnement:

19 La configuration par défaut du plugin est la suivante:

20 Notre extension possède des éléments en base de données. Nous allons créer ces éléments dans le Storage Folder:

21 L élément possède les paramètres spécifiés lors de la création de l extension (modifiables avec le $TCA) Les paramètres sont ceux définis dans le kickstarter lors de la création de l'extension: un titre, une description courte (rte) et une description longue (rte)

22 Le Storage Folder contient alors les nouveaux élements créés (visibles en mode «list»)

23 Au niveau du frontend, le résultat est visible de la façon suivante: Le kickstarter insert un morceau de code «type» permettant de servir de point de départ.

24 L extension contient donc déjà un ensemble de fichier et est déjà opérationnelle: PI1: contient l'ensemble des fichiers et traitements pour le frontend Configuration de l'extension. Tca.php determine le comportement des elements de la BDD définis pour l'extension

25 3Inside The Code Nicolas Cerisier

26 Comme nous venons de le voir, l extension affiche déjà des choses en frontend. Le fonctionnement du plugin PI1 se trouve dans class.tx_mydemo_pi1.php

27 La première chose que nous souhaitons faire est de modifier la configuration de l extension pour ajouter nos propres paramètres. Nous allons utiliser pour ça les flexforms en editant le fichier ext_tables.php Instanciation d'un fichier XML que nous allons utiliser pour configuer l'extension

28 La définition des paramètres se fait à travers un fichier xml (cf slide précédent) Définit un permet élément flexform «startingpoint» avec la gestion multilangue ainsi que le paramétrage de l'élément

29 Le résultat est le suivant dans le backend. Les textes ne sont pas présents, il faut pour cela compléter le fichier language_db.php

30 La définition des textes backend se fait dans le fichier language_db.php

31 Les paramètres remontent correctement dans l extension, avec des textes correctement paramétrés.

32 Nous allons maintenant modifier le plugin PI1 pour qu il utilise les flexforms et récupère correctement les paramètres

33 Au niveau Frontend, les paramètres remontent alors correctement dans un tableau $this->lconf Les clés du tableau correspondent aux clés du XML Nicolas Cerisier

34 Maintenant que les paramètres remontent correctement nous pouvons coder le fonctionnement de l extension: Typo3 apport un ensemble de fonctions, qu'il est très recommandé d'utiliser pour le développement Nicolas Cerisier Cerisier@ece.fr

35 Le résultat de nos modifications dans le frontend:

36 Dans notre développement, le rendu HTML est codé directement. Ce qui limite fortement l évolutivité de notre plugin. Nous allons donc utiliser le moteur de templating de Typo3 Définition d'un fichier template Appel de la fonction pour afficher les éléments Gestion du template

37 Dans notre développement, le rendu HTML est codé directement. Ce qui limite fortement l évolutivité de notre plugin. Nous allons donc utiliser le moteur de templating de Typo3 Définition du marker (permet d'isoler un element du template parmis d'autres) Récupération du bloc Définition des variables et du contenu associé Traitement du template

38 Un fichier template est structuré de la façon suivante: Markers de début et de fin Tags de contenu

39 L affichage Frontend en utilisant le système de templating

40 Il reste encore à ajouter la vue détaillée d un élément Méthode typo3 pour obtenir les parametres $_GET

41 Le résultat de nos modifications dans le frontend: Listing des elements Le titre est posé avec un href passant en parametre l'uid (&ext=$uid) Vue détaillée de la news