ajax plugin wordpress

**bilbe** · 08/12/2019, 17h22

Bonjour,

je voudrais intégrer mon mini annuaire créer auparavant a mon site wordpress ( je voudrais crée un plugin)
( cet annuaire utilise une autre base de donnée )
mais je n'arrive pas a le faire , s'il vous plait aidez moi

testAjax.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<?php 
/*
Plugin Name: annuaire
Plugin URI: bil
Description: Un simple annuaire
Author: bil
Version: 1.0.0
*/
?>
 
<html>
	<head>
		<title>Mon test ajax</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
		<script>
                
                var anneeSouhaitee="";
                var idSouhaitee="";
                
                
                
                //le document ready est un event de Jquery qui se déclenche lorsque la structure de la page est chargée
                $( document ).ready(function() {
                        console.log( "ready!!!!!!" );
                        
                        //on masque la div qui affiche le détail de l eleve
                        $("#DetailEleve").hide();
                        //on masque la div qui affiche le formulaire de modification de l eleve
                        $("#ModifEleve").hide();
                        
                        console.log("contenu de la div qui a pour id titre :: "+$("#titre").html());
                        //$("#titre").html("coucou");
                        //$(".texteRouge").css("color","red");
                        //$("div").css("background-color","yellow");
                        $("div").css("margin","2em");
                        
                        //on charge la liste des élèves
                        chargementListeEleves();
                        
                        //on met les actions sur les boutons d'années pour filtrer les eleves par promo
                        ajouteEcouteurBtnsAnnees();
                        
                });
                
 
 
                function poseEcouteurClicEleve(){
                
                        $(".btVoirEleve").click(function(){
                                var idEleve=$(this).attr("id");
                                //alert('clic eleve'+idEleve);
                                idSouhaitee=idEleve;
                                var tab=idEleve.split("_");
                                
                                
                                chargementDetailEleve(tab[1],"lecture");
                        });
                        
                        
                        $(".btModifEleve").click(function(){
                                var idEleve=$(this).attr("id");
                                //alert('clic eleve'+idEleve);
                                idSouhaitee=idEleve;
                                var tab=idEleve.split("_");
                                
                                
                                chargementDetailEleve(tab[1],"modification");
                        });
                
                }
                
                
                function ajouteEcouteurBtnsAnnees(){
                        $(".btnFiltrePromo").click(function(){
                        
                                //alert('clic'+$(this).attr('id'));
                                anneeSouhaitee=$(this).attr('id');
                                chargementListeEleves();
                        });
                }
                
                
                
                function chargementDetailEleve(id,pAction){
                        jquery.ajax({
                          method: "POST",
                          url: "listingEleve.php",
                          data: { idEleve: id }
                        }).done(function( msg ) {
                                console.log( "Data loaded retour du serveur: " + msg );
                                
                                if(pAction=="lecture"){
                                afficheDetailEleve(msg);
                                }else if(pAction=="modification") {
                                
                                afficheMasqueModifEleve(msg);
                                }
                                
                          });   
                
                }
                
                //la fonction qui cree l objet ajax pour aller chercher la liste des eleves 
                function chargementListeEleves(){               
                        $.ajax({
                          method: "POST",
                          url: "listingEleve.php",
                          data: { promo: anneeSouhaitee }//on fait eventuellement passer une promotion
                        })
                          .done(function( msg ) {
                                console.log( "Data loaded retour du serveur: " + msg );
                                afficheEleves(msg);
                          });           
                }
                
                
                
                
                function afficheMasqueModifEleve(pJson){
                $("#DetailEleve").hide();
                $("#ModifEleve").show();
                objJson = JSON.parse(pJson);
                //$("#ModifEleve #idEleve").html(objJson[0]["idEleve"]);
                $("#ModifEleve #modifNomEleve").val(objJson[0]["nomEleve"]);
                //$("#ModifEleve #prenomEleve").html(objJson[0]["prenomEleve"]);
                //$("#ModifEleve #anneePromo").html(objJson[0]["anneePromotionEleve"]);
                
                }
                
                function afficheDetailEleve(pJson){
                $("#ModifEleve").hide();
                $("#DetailEleve").show();
                objJson = JSON.parse(pJson);
                $("#DetailEleve #idEleve").html(objJson[0]["idEleve"]);
                $("#DetailEleve #nomEleve").html(objJson[0]["nomEleve"]);
                $("#DetailEleve #prenomEleve").html(objJson[0]["prenomEleve"]);
                $("#DetailEleve #anneePromo").html(objJson[0]["anneePromotionEleve"]);
                
                }
                
                function afficheEleves(pJson){
                
                
                console.log(typeof(pJson));
                
                objJson = JSON.parse(pJson);
                console.log(typeof(objJson));
                console.log(objJson.length);
                var nbEleves=objJson.length;
                
                var strDivListeEleves="";
                for (var indice=0 ; indice< nbEleves ; indice ++){
                        console.log(objJson[indice]["nomEleve"]);
                        
                        strDivListeEleves=strDivListeEleves+'<div id="eleve_'+objJson[indice]["idEleve"]+'" class="eleve" >'+objJson[indice]["nomEleve"]+' <button class="btVoirEleve" id="voir_'+objJson[indice]["idEleve"]+'">voir</button>' +' <button class="btModifEleve" id="modif_'+objJson[indice]["idEleve"]+'">modifier</button>  </div>';
                        
                }
                $("#BlocListe").html(strDivListeEleves).promise.done(poseEcouteurClicEleve());
                
                }
                
                </script>
	</head>
	<body>
		<div id="titre" class="texteRouge">ma liste d'élèves :</div>
		<div>
			<button id="2017" class="btnFiltrePromo">2017</button>
			<button id="2018" class="btnFiltrePromo">2018</button>
			<button id="" class="btnFiltrePromo">toutes les promos</button>
		</div>
 
		<div id="BlocListe" class="texteRouge">coucou ici ma liste de résultat </div>
 
		<div id="DetailEleve">
			<div id="idEleve"></div>
			<div id="nomEleve"></div>
			<div id="prenomEleve"></div>
			<div id="anneePromo"></div>
 
		</div>
	<div id="ModifEleve">
	<form>
	nom : <input type="text" id="modifNomEleve"   ></input>
 
	prenom : <input type="text" id="modifPrenomEleve"   ></input>
	annee promo	: <input type="text" id="modifPromoEleve"   ></input>
 
	</form>
 
		</div>
	</body>
</html>

listingeleve.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?php
$promotion="";
$idEleve="";
 
 
 
if (isset ($_POST['promo'])){
 
	$promotion=$_POST['promo'];
}
 
if (isset ($_POST['idEleve'])){
	$idEleve=$_POST['idEleve'];
}
 
//tout d'abord on va chercher les classes dont nous avons besoin grace à l'instruction require_once
 
 
 
 
	//on crée une nouvelle connexion avec la base Mysql	
function seconddb() {
	global $seconddb;
	$seconddb = new wpdb('root','root','annuaire_eleves','localhost');
}
 
 
if ($promotion!=""){
//si on a passé la variable promoption au script php via une variable en post	
$tabField=["anneePromotionEleve"];
$tabValeurs=[$promotion];
$tabOperateur=["="];
$tabBool=[""];
 
//on utilise un objet Condition qui permet d'ajouter un bout de phrase à la requete au select
//un bout de code sql qui ressemblera à " where ......
$conditionPromo=new Condition($tabField,$tabValeurs,$tabOperateur,$tabBool);	
}
 
if ($idEleve!=""){	
//si on a passé la variable promoption au script php via une variable en post		
$tabField=["idEleve"];
$tabValeurs=[$idEleve];
$tabOperateur=["="];
$tabBool=[""];
 
//on utilise un objet Condition qui permet d'ajouter un bout de phrase à la requete au select
//un bout de code sql qui ressemblera à " where ......
$conditionEleve=new Condition($tabField,$tabValeurs,$tabOperateur,$tabBool);	
 
}
 
//on crée un objet liste qui va nous retourner un xml ou un json 
	//avec tous les enregistrement de la table
	//les parametres du constructeur sont (lenom de la table, la liaison crée par l'objet connexion, le nom de la base)
$listeEleves=new Liste("eleve",$maLiaison,$seconddb);
 
 
 
//on ajoute à notre objet liste la condition	 
if ($promotion!=""){
	$listeEleves->condition = $conditionPromo->ecritureSql();
}
 
if ($idEleve!=""){
	$listeEleves->condition = $conditionEleve->ecritureSql();
}
 
 
 
//la méthode créationRequète est celle qui permet de créer le code sql
$listeEleves->creationRequete();
 
	//afficheRequete est utiliser pour le débbogage
	//$listeEleves->afficheRequete();
 
	//la méthode qui envoie la requete à la base et stocke le resultat
$listeEleves->executeRequete();
//echo $listeEleves->nombreResultats();
 
 
 
	//on choisi ensuite le type de sortie (xml ou json ) et on l'affiche
 
 
$listeEleves->creationJson();
$listeEleves->afficheJson();
/*
$listeEleves->creationXml();
$listeEleves->afficheXml();
*/
 
?>

function.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
/**
** activation theme
**/
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}
 
function seconddb() {
	global $seconddb;
	$seconddb = new wpdb('root','root','annuaire_eleves','localhost');
}
add_action('init', 'seconddb');

**mathieu** · 08/12/2019, 22h01

pour créer une extension WordPress, vous pouvez regarder la documentation là :
https://developer.wordpress.org/plugins/

et pour créer des nouveaux types d'objet comme par exemple un type "élève", vous pouvez utiliser des "custom post type" :
https://developer.wordpress.org/plugins/post-types/

ajax plugin wordpress

WordPress PHP

Vue hybride

Discussions similaires

Partager

Partager