Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. WordPress et ses extensions
  3. Créer une extension avec Ajax et JSON
Extrait - WordPress et ses extensions Développez votre site de A à Z (théorie, TP, ressources)
Extraits du livre
WordPress et ses extensions Développez votre site de A à Z (théorie, TP, ressources) Revenir à la page d'achat du livre

Créer une extension avec Ajax et JSON

Introduction

Maintenant que vous maîtrisez la création d’extensions, la création de tables dans la base de données et les requêtes SQL, vous allez créer une extension avec Ajax et JSON.

Cette extension simple a pour objectif de récupérer des adresses e-mail avec un code court. Les adresses e-mail sont gérées dans l’administration.

Le principe reste le même qu’au chapitre Créer une extension avec PHP/MySQL, mais cette fois-ci, le formulaire est côté utilisateur, et l’affichage des données, côté administrateur.

Les informations collectées du côté utilisateur sont enregistrées dans une base de données à l’aide de requêtes SQL. Ces données sont structurées sous forme de tableau JSON et transmises par une requête Ajax, aussi bien du côté utilisateur que du côté administrateur. Cela garantit une expérience sans rechargement de page, offrant ainsi une interaction fluide.

Préparer les éléments

Répétez les opérations présentées au chapitre Créer une extension avec PHP/MySQL.

1. Configurer l’extension

Créez un dossier my-mails dans le dossier plugins, avec un fichier my-mails.php.

Insérez le commentaire d’en-tête suivant, permettant d’afficher les informations sur l’extension, dans l’administration :

<?php  
/*  
Plugin Name: My Mails   
Description: Récupérer des adresses e-mail par un formulaire  
Version: 1.0  
License: GPLv2  
  
This program is free software; you can redistribute it and/or  
modify it under the terms of the GNU General Public License  
as published by the Free Software Foundation; either version 2  
of the License, or (at your option) any later version.  
  
This program is distributed in the hope that it will be useful,  
but WITHOUT ANY WARRANTY; without even the implied warranty of  
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the  
GNU General Public License for more details.  
  
You should have received a copy of the GNU General Public License  
along with this program; if not, write to the Free Software  
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA   
02110-1301, USA.  
  
Copyright {année} {mon_nom} (email : {mon_email})  
  
*/  
?> 

Vous devez voir ceci dans l’administration :

images/12EI1N.png

Page Extensions, on voit le widget My Mails apparaître

2. Construire la classe

Pour construire la classe, plusieurs méthodes sont nécessaires, dont des méthodes pour enregistrer les informations en base de données grâce à des requêtes SQL.

Dans un premier temps, réfléchissez à la construction de la classe au préalable :

  • Méthode de création de la table, lors de l’installation de l’extension.

  • Méthode d’ajout du bouton dans le menu de l’administration.

  • Méthode de suppression de la table, lors de la désactivation de l’extension, ou fichier de suppression de la table, lors de la suppression de l’extension....

Créer le code court et l’ajouter au site

1. Créer le code court

Le code court doit faire apparaître un formulaire avec le nom, l’adresse e-mail et un bouton pour valider les informations. Il y a une balise <div>, ayant pour id la valeur reponse. Cela permet d’afficher en JavaScript un message en cas de succès ou d’erreur. À l’intérieur de la balise <div> se trouve une balise <span> qui permet d’afficher en JavaScript une image GIF animée (loader) lors du chargement.

Créez le formulaire en HTML. La méthode my_mails_shortcode() devient :

function my_mails_shortcode(){  
echo "  
  <div id=\"mymails\" class=\"widget\">  
  
    <h1>Demande d'informations</h1>  
  
    <input type=\"text\" value=\"votre nom\" id=\"name\" />  
    <input type=\"text\" value=\"entrez votre adresse e-mail\" id=\"mail\" /> 
    <input type=\"submit\" value=\"s'inscrire\" id=\"inscrire\" /> 
  
    <div id=\"reponse\"><span></span></div>  
  
  </div>  
";  
} 

Ajoutez la fonction...

Vérifier les champs du formulaire en jQuery

Créez un document ready dans le fichier JavaScript front-mails.js. En cliquant dans les champs input (focus), videz la valeur de l’input.

En cliquant en dehors du champ input (blur) et lorsque le champ est vide, remettez-lui comme valeur le texte d’origine.

jQuery(document).ready(function(jQuery) {   
 jQuery("#mail").focus(function(){  
 var mailval=jQuery("#mail").val();  
 if(mailval=='entrez votre adresse e-mail') jQuery(this).val(''); 
 });   
 jQuery("#mail").blur(function(){  
 var mailval=jQuery("#mail").val();  
 if(mailval=='') jQuery(this).val('entrez votre adresse e-mail'); 
 });   
 jQuery("#name").focus(function(){  
 var nameval=jQuery("#name").val();  
 if(nameval=='votre nom') jQuery(this).val('');  
 });   
 jQuery("#name").blur(function(){  
 var nameval=jQuery("#name").val();  
 if(nameval=='') jQuery(this).val('votre nom');   
 });   
  
}); 

Créez un événement (event) mousedown, qui signifie que le bouton de la souris...

Effectuer la requête Ajax

Créez la fonction ajaxMail() en dehors du document ready, étant donné qu’elle est appelée lors des vérifications se trouvant dans le document ready. L’instruction document ready signifie que la page est chargée et prête à recevoir les instructions JavaScript à l’intérieur de cette instruction. Le fait d’exécuter une fonction en dehors permet d’exécuter le code avant que la page ne soit chargée.

À l’intérieur de la fonction ajaxMail() se trouvera la requête Ajax.

1. WordPress et Ajax

Dans WordPress, les requêtes en Ajax nécessitent plusieurs paramètres :

  • Une action qui accepte une chaîne de caractères, servant de clé unique.

  • Une URL qui doit obligatoirement faire appel au fichier WordPress admin-ajax.php.

  • Une chaîne de sécurité optionnelle composée de chiffres.

Pour utiliser une chaîne de sécurité, il faut que ces trois paramètres soient définis en même temps que l’appel au fichier JavaScript contenant la requête Ajax dans la méthode my_mails_front_header(), car il faut générer la clé de sécurité en PHP, puis la transmettre au fichier JavaScript.

2. Transmettre des variables PHP au fichier JavaScript

Dans la méthode...

Récupérer les données et enregistrer une adresse e-mail

Pour récupérer les informations transmises par la requête Ajax, créez une nouvelle méthode dans le fichier my-mails.php, et nommez-la my_mails_ajax().

1. Les hooks d’action wp_ajax_(action) et wp_ajax_nopriv_(action)

Nommez la méthode my_mails_ajax() en utilisant les hooks d’action wp_ajax_(action) et wp_ajax_nopriv_(action), où action représente le nom de l’action, en dehors de la classe.

wp_ajax_(action) s’utilise pour les utilisateurs connectés et wp_ajax_ nopriv_(action) pour les utilisateurs non connectés. Si la requête doit être effectuée aussi bien pour un utilisateur connecté que non connecté, utilisez les deux hooks.

Dans votre cas, l’action s’appelle my_mails et s’utilise aussi bien pour les utilisateurs connectés que pour ceux non connectés. Par conséquent, les hooks à utiliser sont wp_ajax_my_mails et wp_ajax_nopriv_my_mails.

Voici le code à placer avec les autres hooks, en dehors de la classe :

if(isset($_POST['action'])){  
 add_action( 'wp_ajax_nopriv_my_mails', array($inst_mails,  
'my_mails_ajax' ));  
 add_action( 'wp_ajax_my_mails', array($inst_mails,  
'my_mails_ajax' ));   
} 

Désormais, vous pouvez récupérer les informations dans la méthode my_mails_ajax()

2. Vérifier la clé de sécurité

Vérifiez en premier la clé de sécurité avec la fonction WordPress :

<?php check_ajax_referer( $action, $query_arg, $die ) ?> 

$action : nom clé défini dans la fonction wp_create_nonce($action).

$query_arg : nom clé du tableau contenant la clé de sécurité dans la fonction wp_localize_script().

$die : accepte true ou false. Par défaut, $die vaut true, ce qui stoppe la fonction. Si $die vaut false, la fonction retourne true ou false.

Cette fonction vérifie la validité de la clé de sécurité. En cas de divergence, la fonction interrompt immédiatement l’exécution...

Afficher et gérer les adresses e-mail dans l’administration

1. Ajouter une méthode listant les adresses e-mail

Pour afficher les adresses e-mail dans l’administration, commencez par créer une nouvelle méthode getmailslist(), qui effectuera une requête SQL SELECT pour récupérer la liste des adresses e-mail. Il est recommandé d’appeler directement la requête, car il n’y a pas d’entrées. L’utilisation de la méthode prepare n’est pas nécessaire, sinon un message d’erreur risque de s’afficher.

function getmailslist(){   
 global $wpdb;   
 $table_mails= $wpdb->prefix.'mymails';   
  
 $sql = "SELECT * FROM ".$table_mails;   
 $mailslist = $wpdb->get_results($sql);   
  
 return $mailslist;   
}   

2. Créer un tableau avec toutes les adresses e-mail

Puis, dans le fichier template.php, nommez la méthode getmailslist() et vérifiez que le tableau n’est pas vide, sinon affichez le message : Personne n’est enregistré.

À l’aide d’une boucle PHP foreach(), affichez les données sous forme de tableau, avec des colonnes id, nom, adresse e-mail et un bouton supprimer.

Ajoutez une image pour que le bouton supprimer soit plus esthétique et prévoyez un <div> avec la classe loader, pour afficher une image de chargement. Ajoutez également un <div> avec l’id reponse, affichant un message lors de la suppression. 

Ajoutez l’id de chaque colonne en tant qu’id HTML au <div> englobant chaque ligne. Cela permet de récupérer facilement avec jQuery les informations de chaque abonné.

Personnalisez votre tableau dans le fichier admin-mails.css pour le rendre plus esthétique, surtout si vous utilisez des balises...

Supprimer des adresses e-mail

1. Créer un événement JavaScript sur le bouton de suppression

Pour supprimer des adresses e-mail, créez un événement JavaScript mousedown sur le bouton supprimer dans le document ready du fichier admin-mails.js.

Récupérez l’id du champ correspondant, il est passé en tant qu’id au <div> parent du bouton supprimer, pour chaque ligne.

Confirmez la suppression grâce à la fonction JavaScript confirm().

Si la réponse est oui, exécutez une requête Ajax qui va supprimer l’abonné. Créez la fonction deleteAjaxMails() et passez-lui l’id du champ à supprimer.

Code du fichier admin-mails.js:  
jQuery(document).ready(function(jQuery) {   
 jQuery("#code").click(function(){  
 this.select();  
 });  
  
 jQuery("#liste textarea").click(function(){  
 this.select();  
 });   
  
 jQuery('.delete').mousedown(function(){  
 var id= jQuery(this).parent().attr('id');  
 if (confirm("Voulez-vous supprimer ce mail ?")) {   
 deleteAjaxMails(id);  
 }  
 });   
  
}); 

2. Transmettre les variables au fichier JavaScript

Pour transmettre des variables au fichier JavaScript, modifiez la méthode my_mails_admin_header() dans le fichier my-mails.php.

Utilisez la fonction wp_localize_script() et passez-lui l’action, l’URL et la clé de sécurité, comme lors de l’enregistrement des adresses e-mail.

Voici le code de la méthode my_mails_admin_header() :

function my_mails_admin_header(){  
 wp_register_style( 'wp_css_mails', plugins_url('css/  
admin-mails.css', __FILE__) );  
 wp_enqueue_style( 'wp_css_mails' );   
 wp_enqueue_script('wp_js_mails', plugins_url('js/  
admin-mails.js', __FILE__), array('jquery'));   
 wp_localize_script('wp_js_mails', 'deletemymails', array(  
 'ajaxurl'=> admin_url('admin-ajax.php'),  
 'action'...

Conclusion

Dans ce chapitre, vous avez vu comment WordPress implémente l’Ajax avec son propre système. L’exercice pratique visait à renforcer votre compréhension du fonctionnement de cette fonctionnalité.

Maintenant, vous pouvez laisser libre cours à votre imagination afin de développer l’extension de vos rêves.

Pour aller plus loin, vous verrez dans le chapitre Traduire son site - extension WPML comment transformer cette extension en multilingue et comment traduire tous les textes, y compris ceux intégrés dans les fichiers JavaScript.