Comment convertir un widget en un module Joomla

Ce tutoriel couvrira le processus de création d'un module Joomla de base à partir d'un widget existant. Nous allons prendre un widget de Mixcloud, apprendre à le convertir en un module Joomla et, enfin, distribuer l'extension à JED (Joomla Extension Directory)..

Si vous n'avez jamais créé de module Joomla auparavant, cet article est le meilleur endroit pour commencer.!

---

Étape 1: Configuration de nos fichiers

Fichiers de base

Pour chaque module créé pour Joomla, deux fichiers doivent absolument être présents. Un fichier est un fichier XML de configuration qui contiendra les détails et les paramètres du module et un fichier PHP qui contrôlera notre module. Pour les besoins de ce tutoriel, nous allons créer un dossier appelé mod_mixcloud_widget et, en son sein, en utilisant votre éditeur de code favori, créez mod_mixcloud_widget.php et mod_mixcloud_widget.xml. Avant de passer à l’étape suivante, créez un fichier HTML unique nommé index.html.le index.html Le fichier créé servira à masquer le contenu du dossier du module lors de la visualisation via un navigateur..

Fichiers de modèle

Maintenant que vous avez ajouté les fichiers de base, il est temps d'ajouter les fichiers de modèle. Nous faisons cela en créant un dossier appelé tmpl. Dans ce dossier, nous créons default.php et index.html. Le fichier default.php sera le modèle de module qui prendra les informations générées et les affichera au format HTML propre de la page.

Fichiers de langue

Enfin, tout en étant dans notre dossier du module racine, nous créons un nouveau dossier appelé la langue. Ce dossier aura deux fichiers: en-GB.mod_mixcloud_widget.ini et en-GB.mod_mixcloud_widget.sys.ini qui sera utilisé pour rendre notre module international avec l'option d'avoir différentes langues.

Structure finale du fichier

Après avoir suivi chaque étape, vous devriez avoir la structure de fichier suivante

• language / fr-FR.mod_mixcloud_widget.ini
• language / fr-FR.mod_mixcloud_widget.sys.ini
• tmpl / default.php
• tmpl / index.html
• index.html
• mod_mixcloud_widget.php
• mod_mixcloud_widget.xml

---

Étape 2: Configuration de notre fichier XML

Chaque extension Joomla installée contient un fichier XML, appelé fichier manifeste ou Installer fichier. Ce fichier contient des détails sur les métadonnées, tels que l'auteur, la version, la description, etc. Il est également utilisé comme fichier de configuration pour les paramètres de module. Dans le cadre de ce didacticiel, nous allons créer un fichier manifeste pour un module Joomla 2.5. Ajoutez l'extrait suivant à votre fichier XML.

   MOD_MIXCLOUD_WIDGET B4ucode Mai 2012 Copyright (C) 2011 - 2012. Tous droits réservés.. Licence publique générale GNU version 2 ou ultérieure; [email protected] www.b4ucode.com 1.0.0 MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION

La balise primaire extension a quelques attributs:

• type: Indique à Joomla quel type d'extension est en cours d'installation, dans ce cas module.
• version: indique au programme d'installation à quelle version de Joomla nous créons le module.
• méthode: Il y a deux options: Nouveau et améliorer. Nous utiliserons la mise à niveau. En cas de mise à jour future du module, il mettra simplement à niveau ce qui existe actuellement..
• client: indique si le module est un module frontal ou principal.

Les autres balises sont des balises de métadonnées contenant des informations sur le module, qui seront utilisées lors de l’installation et de l’administration du module..

Fichiers du module

Comme mentionné précédemment, le fichier manifeste contient des informations sur les fichiers utilisés dans le module. Lors de l'installation, Joomla vérifie dans le fichier manifeste tous les fichiers devant être ajoutés au système. Si l'un des fichiers est manquant, Joomla générera une erreur en expliquant les fichiers manquants. Tous les fichiers trouvés dans le module qui ne figurent pas dans le fichier XML ne sont pas ajoutés au système avec les autres. Ajoutez l'extrait suivant à votre fichier manifeste.

  mod_mixcloud_widget.php tmpl index.html mod_mixcloud_widget.xml 

Au lieu d'écrire une ligne pour chaque fichier d'un dossier, nous utilisons simplement l'élément folder. Cet élément indiquera au programme d'installation d'installer tous les fichiers de ce dossier..

Fichiers de langue

Cet élément contient les fichiers de langue à installer avec le module. Pour les besoins de ce tutoriel, une seule langue sera utilisée. Quand il y a plus de langues, vous pouvez simplement changer le préfixe des fichiers et l'attribut tag en langage exact basé sur le framework Joomla.

  language / fr-FR.mod_mixcloud_widget.ini language / fr-FR.mod_mixcloud_widget.sys.ini 

Ajout de paramètres

Certaines extensions ne fonctionnent pas immédiatement, mais nécessitent l'ajout de certains paramètres: ces paramètres sont appelés paramètres et sont définis dans le fichier manifeste..

Le premier élément est config qui contient d'autres éléments qui seront affichés au format HTML. L'élément appelé champ est la base de nos paramètres où vous pouvez définir le type de données de formulaire que vous souhaitez afficher. Cet élément à son niveau de base est composé de certains attributs essentiels:

• type: Type de champ de formulaire tel que texte, zone de texte, cases à cocher, radio et calendrier.
• prénom: L'élément de nom du champ de formulaire à afficher.
• défaut: Valeur par défaut du champ.
• étiquette: Texte affiché au début de notre champ de formulaire.
• la description: Description qui sera affichée dans une info-bulle lors du survol de notre champ de formulaire

Il existe différents attributs car ils varient en fonction du type de champ de formulaire, tels que la taille, le filtre, l’exclusion, le répertoire, etc..

   
     
 
    JGLOBAL_USE_GLOBAL COM_moduleS_FIELD_VALUE_NOCACHING  
   

Vous remarquerez peut-être que nous avons écrit des étiquettes et des descriptions en majuscules, comme MOD_MIXCLOUD_WIDGET_FEED_TITLE. Ce sont des chaînes que nous rendrons traduisibles lors de la création de nos fichiers de langue.

Fichier XML fini

Si vous avez suivi jusqu'à présent, vous devriez avoir un fichier XML complet comme suit

   MOD_MIXCLOUD_WIDGET B4ucode Mai 2012 Droit d'auteur (C) 2011 - 2012 Open Source Matters. Tous les droits sont réservés. Licence publique générale GNU version 2 ou ultérieure; [email protected] www.b4ucode.com 1.0.0 MOD_MIXCLOUD_WIDGET_XML_DESCRIPTION  mod_mixcloud_widget.php tmpl index.html mod_mixcloud_widget.xml   language / fr-FR.mod_mixcloud_widget.ini language / fr-FR.mod_mixcloud_widget.sys.ini    
     
 
    JGLOBAL_USE_GLOBAL COM_moduleS_FIELD_VALUE_NOCACHING  
   

---

Étape 3: Créer mod_mixcloud_widget.php

La première chose que vous voulez avec votre module est d'ajouter votre avis de copyright. Si vous avez l’intention de soumettre votre module à JED [Répertoire d’extension Joomla], vous devez ajouter des informations sur la licence GPL..

C'est l'une des vérifications effectuées avant d'approuver un module dans le répertoire. Juste en dessous, j'utilise la déclaration défini ('_ JEXEC') ou mourir; qui est utilisé dans la plupart des fichiers PHP pour se protéger contre les pirates. C’est aussi une autre exigence pour l’approbation de JED.

  
Ensuite, nous définissons nos paramètres comme des variables. Les développeurs définissent parfois leurs paramètres en tant que variables afin de disposer de fichiers modèles plus propres. Pour appeler un paramère, nous utilisons le $ params-> get () fonctionner et obtenir le param prénom défini dans notre fichier manifeste. Enfin, nous appelons la fonction Helper du module, getLayoutPath, ce qui rendra notre modèle de module. Le premier argument de la fonction prend le nom du module que nous essayons d'appeler, puis le second argument recherche le modèle que nous avons l'intention de rendre pour ce module. Dans ce cas, nous obtenons le paramètre disposition et dans le deuxième argument, nous définissons la mise en page par défaut pour être défaut. Cette mise en page est le nom exact du fichier que nous avons dans notre tmpl dossier.
 
 $ width = $ params-> get ('width', 300); $ height = $ params-> get ('height', 300); $ feed = $ params-> get ('feed'); $ color = $ params-> get ('color'); $ moduleclass_sfx = htmlspecialchars ($ params-> get ('moduleclass_sfx')); require JmoduleHelper :: getLayoutPath ('mod_mixcloud_widget', $ params-> get ('layout', 'default')); ?>
 
 Fichier fini 
 
 get ('largeur', 300); $ height = $ params-> get ('height', 300); $ feed = $ params-> get ('feed'); $ color = $ params-> get ('color'); $ moduleclass_sfx = htmlspecialchars ($ params-> get ('moduleclass_sfx')); require JmoduleHelper :: getLayoutPath ('mod_mixcloud_widget', $ params-> get ('layout', 'default')); ?>
 
 
 Étape 4: créer default.php 
 
À ce stade, nous avons créé notre fichier manifeste avec les paramètres, pris ces mêmes paramètres et les avons convertis en variables. Dans cette étape, nous allons utiliser ces variables dans notre fichier de modèle. Le fichier modèle rendra tout notre code HTML pour le module. modifier default.php de ton tmpl dossier et ajoutez les extraits suivants:
 
Notice de copyright et script d'accès restreint
 
  
 
 Il est recommandé d’ajouter la ligne Avis de copyright et accès limité à vos fichiers PHP..
 
 
Ajout de notre HTML
 
Pour ce tutoriel, nous aurons besoin du code d'intégration de Mixcloud. Voici un exemple pour obtenir le code. Le but de notre module est de rendre le code réutilisable sans avoir à obtenir l’intégration à chaque fois que nous voulons créer ou modifier un widget Mixcloud sur notre site. Le code d'intégration par défaut contient des informations supplémentaires sur le contenu du widget dont nous n'avons pas besoin. Donc, pour ce tutoriel, je l'ai réduit au script d'intégration. Collez ce code intégré dans votre default.php fichier.
 
 
 
Rendre le script configurable
 
Si nous voulions intégrer un widget de manière permanente, nous pourrions simplement compresser le module tout de suite. Cependant, nous ne le faisons pas. Nous allons donc remplacer certains attributs par nos paramètres de module. Nous allons changer le largeur, la taille, Couleur et alimentation. Collez l'extrait suivant sur votre script d'intégration.
 
 
 
 
 
 Prenez note de la façon dont nous appelons les variables à partir de notre fichier de contrôleur..
 
 
 
 Étape 5: Création de fichiers de langue 
 
À la première étape, vous avez peut-être remarqué que nous avons créé un dossier, appelé language, avec deux fichiers. Ensuite, à la deuxième étape, nous avons ajouté du texte à traduire. Dans cette section, nous allons traduire ce texte en anglais. Insérer l'extrait suivant dans les fichiers ini, en-GB.mod_mixcloud_widget.sys.ini et en-GB.mod_mixcloud_widget.ini. 
 
 ; B4ucode; Droits d'auteur (C) 2011 - 2012 B4ucode. Tous les droits sont réservés. ; Licence GNU General Public License version 2 ou ultérieure; ; Coussin Coussin Coussin Coussin Coussin Coussin Coussin Coussin Coussin Coussin "Ajouter le lien à simple / CloudCast" MOD_MIXCLOUD_WIDGET_COLOR_TITLE = "couleur" MOD_MIXCLOUD_WIDGET_COLOR_DESC = "Ajoutez de la couleur style" MOD_MIXCLOUD_WIDGET_WIDTH_TITLE = "Largeur" ​​MOD_MIXCLOUD_WIDGET_WIDTH_DESCRIPTION = "Largeur de Widget" MOD_MIXCLOUD_WIDGET_HEIGHT_TITLE = "Hauteur" MOD_MIXCLOUD_WIDGET_HEIGHT_DESCRIPTION = "Hauteur de Widget"
 
Si vous regardez de plus près, vous remarquerez que le texte que j'ai utilisé pour les paramètres a maintenant une traduction anglaise. Vous pouvez ajouter d'autres fichiers et créer des traductions dans d'autres langues.!
 
 
 Étape 6: Emballage du module 
 
Après avoir suivi toutes les étapes à la lettre, votre module est maintenant installable, mais nous aimerions établir une liste de contrôle des tâches à effectuer avant l’installation et la distribution..
 
Ajouter index.html aux dossiers
 
Il est recommandé d’ajouter un index.html fichier dans chaque dossier. Comme mentionné précédemment, ce fichier empêche les utilisateurs d’afficher le contenu d’un dossier de module directement dans un navigateur. Ajoutez l'extrait suivant à vos fichiers:
 
 
 
Comparaison de notre structure de fichier avec le fichier manifeste
 
À ce stade, il est recommandé de consulter les fichiers et le dossier définis dans votre fichier manifeste et de vous assurer qu'ils existent dans votre dossier de module. Tout fichier inexistant peut empêcher le programme d'installation d'installer des fichiers, ou une erreur peut être générée..
 
Emballage
 
Après notre petite liste de contrôle, nous pouvons conditionner le module dans un fichier zip et l’installer..
 
En naviguant dans le gestionnaire de modules et en sélectionnant le module, vous pouvez modifier les paramètres avec la largeur, la hauteur, la couleur et le flux de chansons de votre choix..
  
 Activez le module et vérifiez s'il fonctionne comme il se doit..
 
 
 Étape 7: Soumission à JED 
 
Localisation de la catégorie
  
Après vous être inscrit à JED, l'un des principaux points à noter est que vous ne pouvez pas ajouter une extension à plusieurs sections. Donc, choisir la section appropriée est très important. Trouvez une section appropriée en naviguant sur le site, puis en regardant en haut à gauche, vous verrez Soumettre une extension.
 
Remplir les détails
  
Une fois que vous avez choisi de soumettre une extension, un formulaire vous permettra de compléter tous les détails de votre soumission. Consultez les captures d'écran ci-dessous pour voir les différents champs à remplir et lisez attentivement les instructions..
    
Image de réussite
  
Une fois que tous les champs et fichiers appropriés ont été soumis, un message similaire à la capture d'écran ci-dessus s'affiche. il vous expliquera combien de propositions sont en attente de vérification avant la vôtre.
 
 
Conclusion
 
Maintenant que vous avez appris à créer un module Joomla à partir d'un widget, allez-y et codez. Avec les bases de ce tutoriel, la même idée peut être appliquée aux plugins Facebook, aux widgets Twitter, aux marque-pages sociaux, aux vidéos incorporées dans Youtube, et bien plus encore. Code heureux!



		
			
	   
	




Code