Créer une extension avec Ajax et JSON

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 :

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 :

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...

1. WordPress et Ajax

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

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...

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...

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...

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'...