Créer un système de témoignage [Niveau confirmé]

• 07 novembre 2018
• Steeve

1. Créer l'extension et la table de la base de données.

Installez MIGX si ce n'est pas déjà fait. Je ne vais pas vous expliquer ici, comment installer une extension. Vous pouvez regarder mon tutoriel « installer des extension MODX ».

Ouvrez FileZilla et aller sur votre site dans le dossier core/components/ vous pourrez constater qu'il y a déjà deux dossiers correspondant aux deux extensions installés, codemirror et migx. Ou plus si vous avez installé d'autres extensions en dehors de mes tutoriels.

Allez dans MIGX Management (Extensions > MIGX ou directement dans la barre de menu supérieur de MODX selon le choix fait lors de l'installation).

Dans l'onglet Package Management de MIGX, remplissez le champ « Package Name » avec « temoignages » puis cliquer sur Create package.

Retournez dans FileZilla et actualisé (clique droit dans le dossier distant > actualiser), vous pouvez constater qu'il y a un nouveau dossier nommé « temoignages ».

A l'intérieur duquel se trouvent ces dossiers et un fichier vide (votre futur schéma) :

Maintenant on a besoin de créer un schéma au format XML de la future table qu'il va y avoir dans la base de données. Celle qui nous servira a sauvegarder nos témoignages. Pour ce faire retournez dans le manger > MIGX > Package Management > Xml Schema.

J’ai préparé le schema précédemment : temoignages.mysql.schema.xml

    <script id="tinyhippos-injected"></script>
	

Si on décompose ce bout de code XML, on y retrouve facilement les éléments de la Class PHP :
class : Temoignages (le nom de la futur Class PHP). Par convention, la première lettre nom de la Class PHP est souvent mis en majuscule.
table : temoignages (le nom de la futur table de la base de données avec l’ajout du préfixe de table « modx_ » par défaut).

On y retrouve facilement les éléments de la future table de la base de données ainsi que les champs qui s'y trouveront : nom, url, siteweb, comentaire, supprime et publie. Avec des configurations différentes selon les contraintes SQL du champ.

Copier mon schéma et coller le dans MODX, puis sauvegardez le en cliquant sur le bouton « Save schema ».

Si vous ouvrez à nouveau votre schéma (temoignages.mysql.schema.xml) à partir de FileZilla vous pourrez voir qu’il n’est plus vide.

A partir de la on peut demander à MIGX DB de créer pour nous la Class PHP. Pour ce faire aller dans l'onglet Parse Schema et cliquez sur le bouton Parse Schema.

Si vous retournez encore dans FileZilla et que vous remontez dans l'arborescence dans le dossier /core/components/temoignage/model/ vous verrez un nouveau dossier nommé : temoignage contenant des dossiers et fichiers dont la Class. Ces fichiers ont été créés pour l'utilisation de notre système de témoignages. Mais nous n'avons pas besoin d'en savoir plus pour le moment.

Ce que nous avons besoin de faire maintenant c'est de créer la table de la base de données qui récupèrera les témoignages. Encore une fois MIGX DB peut le faire pour nous. Aller dans votre phpMyAdmin vous verrez toutes les tables de la base de données nécessaires à MODX.
On retourne dans le gestionnaire de MODX > MIGX Management > Package Manager > Create Tables et cliquez sur le bouton Create Tables.

Si vous actualisé votre phpMyAdmin vous devriez trouver une table nommée modx_temoignages (si vous avez laissé le prefixe des tables de MODX par défaut (modx_)) avec une structure qui correspond à notre schéma Xml, avec les champs nom, url, siteweb, etc....
image11-migx-db-table-created.jpg

A présent nous avons tout ce qu’il nous faut, le paquet, la Class, la table de la base de données, nous pouvons passer à la partie deux.

2. Créer une page personnalisé pour les témoignages dans le gestionnaire MODX.

Aller encore une fois dans MIGX mais cette fois dans l'onglet MIGX et pas Package Manager comme dans la première partie du tutoriel.
Cliquez sur le bouton Ajouter un élément. Une nouvelle fenêtre popup s'ouvre et contient plusieurs onglets.

On va commencer par remplir l'onglet Settings avec les informations suivantes :
Name : temoignages
Remplacer "Ajouter un élément" ("Add Item" Replacement) : Ajouter un nouveau témoignage
unique MIGX ID : temoignage (ce champ est plus bas dans le formulaire).

Dans l'onglet CMP-settings :
Main Caption : Témoignages
Tab Caption : Tous les témoignages
Tab Description : Ajouter, voir, éditer un témoignages.

Dans l'onglet MIGXdb-Settings nous avons besoin de renseigner le nom du paquet et de la Class :
Package : temoignages
Classnom : temoignage

Vous n'avez plus qu'a cliquer sur terminer. Vous devriez voir apparaître votre MIGX config dans l'onglet MIGX de MIGX Management.
image14-migx-db-form-item.jpg

Maintenant nous allons ajouter le bouton dans le menu supérieur de MODX afin d'accéder à notre système de gestion des témoignages fraichement créé. Cliquez sur le bouton Menus dans le menu paramètre (en haut à droite dans le manager de MODX).

Puis cliquez sur Créer un menu et remplissez les informations comme ci-dessous :
Parent : sélectionnez Navigation principale
Clé de lexique Témoignages
Action : index Paramètres : &configs=temoignages
Espace de noms : migx

Vous n'avez plus qu'à enregistrer. Actualisez votre page et vous devriez voir apparaître le bouton Témoignages dans le menu supérieur de MODX.

Je suis sûr que vous avez été assez curieux pour aller dans cette nouvelle page personnalisé de MODX ?! Si c’est le cas vous avez du vous apercevoir que nous avons bien cette page mais il n y a aucune information dedans.

Nous allons a présent configurer pour pourvoir administrer nos témoignages. Retournez dans MIGX > MIGX > clique droit sur le paquet temoignages et cliquez sur éditer (la fenêtre popup s'ouvre). Allez dans l'onglet Actionsbutton est coché additem.

Puis dans l'onglet Contextmenues cochez update, duplicate, remove, movetotop_migx, et movetotop_bottom.

Maintenant nous allons configurer les colonnes pour qu'elles apparaissent dans notre page personnalisé témoignages du gestionnaire. Il faut pour cela ajouter les colonnes nom, url, siteweb, commentaire, supprime, publie dans MIGX.

Allez dans l'onglet Columns dans MIGX et cliquez sur Ajouter un élément. Une nouvelle fenêtre s'ouvre et vous devez maintenant ajouter une colonne en remplissant comme ci-dessous :
Header : Nom du client
Field (le nom de la colonne dans votre base de données) : nom

Répétez cette action pour les champs siteweb et commentaire.

Ajoutez maintenant le champ publie qui va être un peu différent dans la configuration voyez ci-dessous.
Header : Publié
Field : publie

Jusque là rien ne change. A présent avant d'enregistrer allez dans l'onglet Renderer et dans le champ Rederer choisissez this.rendererClickCrossTick. Cela aura pour effet de mettre des symboles (icônes) à la place de mettre 0 ou 1.

Ajoutez un champ que nous avons pas mis dans notre table de la base de données mais qui à du être ajouté automatiquement lors de la création de la table par MIGX c'est le champ ID. Vous pouvez vérifier en allant dans votre phpMyAdmin et en observant la structure de la table.
Header : ID
Field : id

Vous devriez avoir un tableau comme celui la maintenant.
image31-column-migx-grid.jpg

Déplacer le en première place (tout en haut au dessus des autres champs) en faisant un glisser / déposer en haut de la liste. D'ailleurs comme vous pouvez le voir vous pouvez organiser tous les champs comme vous le désirez en faisant des glisser / déposer.

Si vous allez voir ce qui ce passe dans votre page personnalisé vous pourrez constater que vous avez bien les colonnes que nous venons ajoutées.

Mais si vous essayez de rajouter un témoignage en cliquant sur le bouton « Ajouter un nouveau témoignage. », la fenêtre popup s'ouvre mais elle est vide.

Il faut rajouter les champs dans l'onglet Formtabs toujours à l'intérieur de MIGX > MIGX > clique droit sur le paquet temoignages et cliquez sur éditer (la fenêtre popup s'ouvre). Ajouter un élément dans Formtabs en cliquant sur le bouton, une nouvelle fenêtre popup s'ouvre, remplissez le champ « Caption » avec « Commentaire ».

Avant de fermer cette fenêtre on va rajouter nos champs nom, url, siteweb, publié et commentaire avec les renseignements comme ci-dessous :
Fieldname : nom
Caption : Nom du client
Validation : required

Le mot « Required » veut dire « requis » en Français et indique au système que nous voulons que ce champ soit obligatoire. Je vous donne la liste de tous les champs et ce qu'il faut remplir :
Fieldname : url
Caption : Adresse du site

Fieldname : siteweb
Caption : Nom du site

Fieldname : publie
Caption : Publié
input TV type : listbox
Pour ce champ on désire qu'il soit présenté sous forme de liste déroulante. Dans l'onglet « Input Options » :
Input option values : Oui==1||Non==0
Default value : Non
Facile à comprendre on désire deux lignes dans la liste déroulante (oui ou non) qui vont renvoyer 0 ou 1, vraiment du binaire..., et par défaut on veut que la valeur soit 0 (non).

Fieldname : commentaire
Caption : Commentaire
Validation : required

Vous devriez avoir ceci :

Vous n'avez plus qu'a tout fermer en cliquant sur terminer. Si vous retournez dans votre système de témoignages vous devriez pouvoir ajouter un témoignage grâce au formulaire que vous venez de créer.

Créez plusieurs commentaires et n'oubliez pas d'en mettre certain a l'état publié.

Vous pouvez d'ailleurs utiliser le « clique droit » directement sur un commentaire.

3. Afficher les commentaires sur le site.

Pour afficher les données ça ne va pas être compliqué car l'extension Migx possède un Snippet qui permet de le faire facilement. Documentation de Migx.

Ici l'appel du Snippet :

[[!migxLoopCollection? 
	&packageName=`temoignages` 
	&classname=`Temoignage` 
	&where=`{"publie":"1"}` 
	&tpl=`temoignageTpl`
	&limit=`0`
]]

Si on décompose les paramètres du Snippet :

• packageName indiquez le nom du paquet
• classname indiquez le nom de votre Class PHP
• where indiquez une condition, dans notre cas on ne veut que les commentaires publiés
• tpl indiquez le TPL de mise en forme HTML.

Ci-dessous un exemple de mise en forme basique des témoignages (temoignageTpl) :

[[+commentaire]]
[[+nom]]
[[+siteweb]]

Si on décompose entre crochet :

• commentaire va afficher le contenu du champ commentaire
• nom va afficher le contenu du champ nom
• url va afficher le contenu du champ url
• siteweb va afficher le contenu du champ siteweb

Vous avez compris le principe !

Vous devriez voir les commentaires qui sont publiés uniquement. Comme nous avons mis ce paramètre dans l'appel du Snippet de Migx (migxLoopCollection).
image30-affichage-des-commentaires.jpg

4. Modifier les données avec Xpdo.

On pourrait aller beaucoup plus loin en modifiant les données via un Snippet avec Xpdo. On peut par exemple les afficher, mais on pourrait aussi les passer tous publié ou dépublié simplement en appelant le Snippet dans une page.

Si certain sont intéressé laissez le moi savoir via le système de commentaire, je ferais peut être un autre tutoriel.
Même si vous n'êtes pas intéressé vous pouvez laisser un message ça me fera toujours plaisir de vous lire !