Boite de dialogue/LightBox avec PHP,AJAX,JSON

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Alors je vous explique mon problème en espérant que quelqu'un puisse m'aider. Je suis actuellement pour mes études en train de faire une appli de gestion d'un zoo (oui oui un zoo) et en parallèle je fais également un site pour afficher les données de ma table. Mais je me retrouve face à un problème.

Tout d'abord voici la table concerné par mon problème :

Pièce jointe 330020

J'ai ensuite dans mon site une page ou j'affiche la liste des animaux de catégorie 'Mammifere' ainsi que leur nombre de cette manière :

Pièce jointe 330021

Cette table est généré via ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 $requete = oci_parse($connect, "SELECT DISTINCT espece, COUNT(espece) FROM Animal WHERE categorie = 'Mammifere' GROUP BY espece ORDER BY espece ASC"); oci_execute($requete); echo "<div class='tableau'>"; echo "<table class='tableAnimal'>\n"; echo "<thead>\n"; echo "<td class='tdAnimal'><b> Nom </b></td>\n"; echo "<td class='tdAnimal'><b> Nombre </b></td>\n"; echo "</thead>\n"; while ($row = oci_fetch_array($requete, OCI_ASSOC+OCI_RETURN_NULLS)) { echo "<tr class='trAnimal'>\n"; foreach ($row as $item) { echo " <td class='tdAnimal'>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "") . "</td>\n"; } echo " <td class='tdAnimal' ><img src='images/loupe.png'/></td>\n"; echo "</tr>\n"; } echo "</table>\n\n"; echo '</div>';
Mon problème est le suivant, je voudrais qu'au clic sur la loupe une boite de dialogue/lightbox s'ouvre et m'affiche par exemple pour l'espèce 'Chimpanzé' un tableau contenant les nom, sexe et date de naissance pour ces 3 chimpanzés. J'ai plusieur problème je ne sais pas comment créer une boite de dialogue/lightbox et encore moins comment y mettre une requête Oracle. Et de plus mon enseignant veut que je fasse celle-ci en utilisant de l'AJAX et du JSON, languages que je ne maîtrise pas du tout. Je suppose qu'il veut que je recupère les données dans la base grâce à l'AJAX et que je les affiche dans la box grâce à du JSON, à moins que je me trompe completement et que cela n'est pas faisable ? Je suis totalement perdu, donc si des personnes sont volontaires pour me venir en aide cela serait avec plaisir.

Merci d'avance ! Et désolé si je ne suis pas au bon emplacement pour poster ce probleme.

25/11/2017, 12h51
krimofcb

J'ai réussi la création de la lightbox au clic sur les loupes maintenant j'aurais juste besoin de quelqu'un qui me montre comment utiliser AJAX pour interroger une base de donnée Oracle svp.
25/11/2017, 14h20
ABCIWEB
Salut,

Pour ajax je viens de donner un exemple basique ici.

La doc avec des exemples pour envoyer des données issue d'un formulaire est ici.

Donc sur le principe tu récupère en php les variables post issues du formulaire qui vont te permettre de définir les critères de recherche de ta requête oracle. Et à la suite de ta requête tu envoie le tableau de résultat avec echo json_encode($tonTableauDeResultat);.

Et il suffira d'exploiter ce tableau qui se retrouvera en retour dans la variable javascript (nommée "data" dans mon exemple basique donné en lien). Retourner un tableau est la méthode standard qui permet aussi de s'interfacer avec d'autre scripts pour construire ton DOM en javascript pour l'affichage du résultat.
Mais c'est souvent plus laborieux et moins rapide pour le navigateur que de construire le DOM en php pour simplement faire en retour de la requête ajax (en reprenant mon exemple donné en lien ):
Code:

1 2 3 4 $.post("script_ajax.php", { ma_variable: 'Ca marche' }, function(data) { // Affichage dans le div ayant l'id = "div_cible" $("#div_cible").html(data); });
J'ai utilisé jquery pour faciliter l'écriture javascript. Ton prof préférerait peut-être que tu utilises du javascript vanilla (sans lib) mais bon sur le principe c'est exactement pareil, ce sera juste plus verbeux.

Pour voir ce qui se passe lors de tests, c'est la touche F12 du clavier qui te permettra d'avoir accès à la console javascript, ensuite onglet "réseau" et en cliquant sur la requête tu pourras consulter les paramètres et la réponse, entre autre. C'est ludique et performant ajax, y'a de quoi s'amuser ! Je m'en suis servi beaucoup pour de l'upload de fichier (cf ma signature si cela t'intéresse).

Bonne journée, et condoléances pour Jack ;)
25/11/2017, 15h13
krimofcb

Merci pour ta réponse mais je ne vais pas te mentir je n'ai pas compris grand chose, je n'ai pas de formulaire à envoyer, fin je ne comprend pas vraiment ce que je dois faire :/
25/11/2017, 16h51
ABCIWEB

Dans un premier temps regarde mes exemples (premier lien de mon précédent message) et essaie de comprendre le principe d'une requête ajax. Les fichiers sont fonctionnels tel quel, je peux pas faire mieux.

Ensuite seulement,
Je parlais de formulaire car c'est typiquement ce qu'on utilise pour récupérer des données utilisateur, mais tu peux récupérer le contenu d'un élément cliqué, par exemple. On pourrait imaginer qu'en cliquant sur le nom d'un mammifère tu veuille afficher la liste de ceux ci. Donc tu récupère le contenu de l'élément cliqué et tu passe cette variable dans la requête ajax en lieu et place de la chaine de caractère ''Ca marche" (en reprenant mon exemple). Php fera la requête correspondante et te renverra soit un tableau soit du html comme expliqué dans mon précédent message. Et ensuite tu insère le résultat en javascript dans un élément de ta page.

1 pièce(s) jointe(s)

Bonjour, désolé pour le retard, voila ce que j'ai réussi a faire :

fichier mammifere.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
echo "<div class='tableau'>";
    	echo "<table class='tableAnimal'>\n";
            echo "<thead>\n";
                echo "<td class='tdAnimal'><b> Nom </b></td>\n";
                echo "<td class='tdAnimal'><b> Nombre </b></td>\n";
            echo "</thead>\n";
    		while ($row = oci_fetch_array($requete, OCI_ASSOC+OCI_RETURN_NULLS)) {
        		echo "<tr class='trAnimal'>\n";
        			foreach ($row as $item) {
                        /*echo "la variable est : '".$row['ESPECE']."'\n\n ";*/
            			echo "    <td class='tdAnimal'>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "") . "</td>\n";
        			} ?>
                        <td class='tdAnimal' onclick="showEspece(<?php echo "'";echo $row['ESPECE'];echo "'";?>, this);" ><a class='lightbox'><img src='images/loupe.png'/></a></td> <?php
        		echo "</tr>\n";
    		}
    	echo "</table>\n\n";
    echo '</div>';

fichier ajax.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function showEspece(value, object) 
  {
    $.ajax({           
      type : 'POST',                           
      url: 'getespece.php',                  
      data: {espece: value },                       
      dataType: 'json',                    
      success: function(data)          
      {
        var tableau = data;   
        $('#output').html(tableau); 
    });
  }

fichier getespece.php

Code:

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
<?php
     include("/includes/connexionBD.php");
 
 
    $requete = oci_parse($connect, "SELECT nomA, sexe, datenaissance FROM Animal WHERE categorie = 'Mammifere' AND espece = '".$_POST['espece']."' ");
 
	oci_execute($requete);
 
    	$table = "<table>\n";
            $table .= "<thead>\n";
                $table .= "<td><b> Nom </b></td>\n";
                $table .= "<td><b> Sexe </b></td>\n";
                $table .= "<td><b> Date naissance </b></td>\n";
            $table .= "</thead>\n";
    		while ($row = oci_fetch_array($requete, OCI_ASSOC+OCI_RETURN_NULLS)) {
        		$table .= "<tr>\n";
        			foreach ($row as $item) {
            			$table .= "    <td>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "") . "</td>\n";
        			}
        		$table .= "</tr>\n";
    		}
    	$table .= "</table>\n\n";
 
    	echo json_encode($table);
?>

fichier script.js

Code:

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
$(document).ready(function() {
 
    $('.lightbox').click(function() {
        $('.backdrop, .box').animate({
            'opacity': '.50'
        }, 300, 'linear');
        $('.box').animate({
            'opacity': '1.00'
        }, 300, 'linear');
        $('.backdrop, .box').css('display', 'block');
    });
 
    $('.close').click(function() {
        close_box();
    });
 
    $('.backdrop').click(function() {
        close_box();
    });
 
});
 
function close_box() {
    $('.backdrop, .box').animate({
        'opacity': '0'
    }, 300, 'linear', function() {
        $('.backdrop, .box').css('display', 'none');
    });
}

et j'ai maintenant quand je clique sur la loupe cette fenetre qui s'ouvre comme je le voulais :
Pièce jointe 330632

J'ai tout de même quelques questions, tout d'abord est ce que au niveau codage et écriture je veux dire par la est-ce que j'utilise bien AJAX et JSON comme il se doit, et ma deuxième question est, comment cela se fait il que si sqldevelopper n'est pas lancer sur mon pc la lightbox n'affiche rien ?

Oui t'as bien pigé le principe, je ne vois pas d'aberration dans tes fichiers js, ça à l'air propre. Dans l'ajax pour aller jusqu'au bout tu pourrais ajouter le cas error pour envoyer un message d'erreur si la requête échoue.

Petit détail, $(document).ready(function() est déprécié, tu peux utiliser $(function() à la place.

Par contre côté php c'est déconseillé d'utiliser $_POST['espece'] (plus généralement une variable et surtout une variable utilisateur) sans avoir au moins contrôlé son existence et sinon normalement on défini une valeur par défaut (on emploi souvent l'opérateur ternaire pour faire ça). Et puis je ne connais pas oracle, mais es-tu certain qu'on peut insérer des variables sans précaution, pas de risques d'injections ?

Sinon dans ton premier fichier tu aurais gagné du temps à jouer plus avec les ouvertures et fermetures de balise php pour afficher ton html. Genre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class='tableau'> <table class='tableAnimal'> <thead> <td class='tdAnimal'><strong> Nom </strong></td> <td class='tdAnimal'><strong> Nombre </strong></td> </thead> <?php while ($row = oci_fetch_array($requete, OCI_ASSOC+OCI_RETURN_NULLS)) { ?> <tr class='trAnimal'> <?php foreach ($row as $item) { ?> <td class='tdAnimal'><?=$item !== null ? htmlentities($item, ENT_QUOTES) : ""?></td> <td class='tdAnimal' onClick="showEspece('<?= addcslashes(htmlspecialchars($row['ESPECE']),"'")?>', this);" ><a class='lightbox'><img src='images/loupe.png'/></a></td> <?php } ?> </tr> <?php } ?> </table> </div>
C'est plus léger. Le addcslashes(htmlspecialchars($row['ESPECE']),"'") c'est pour protéger tes variables et éviter une rupture de chaine.

Je sais pas pour sqldevelopper mais peut-être c'est nécessaire pour faire fonctionner ta bdd...

08/12/2017, 12h30
krimofcb

Merci pour votre aide et vos conseils.

J'ai un autre soucis toutes ces requetes ajax etc fonctionnent en local mais à fin de faire la presentation de mon projet j'ai mis mon site sur le serveur de la fac et maintenant la lightbox n'affiche plus rien. J'ai tout essayer afin de voir de voir l'erreur Ajax mais je n'ai rien eu de concret. Sauriez vous d'ou pourrait venir le problème ?

J'ai réussi à afficher cette erreur dans la console mais je ne sais pas ce qu'elle signifie :

Citation:

VM866:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at Object.error (ajax.js:16)
at i (jQuery.js:2)
at Object.fireWith [as rejectWith] (jQuery.js:2)
at A (jQuery.js:4)
at XMLHttpRequest.<anonymous> (jQuery.js:4)
error @ ajax.js:16
i @ jQuery.js:2
fireWith @ jQuery.js:2
A @ jQuery.js:4
(anonymous) @ jQuery.js:4
XMLHttpRequest.send (async)
send @ jQuery.js:4
ajax @ jQuery.js:4
showEspece @ ajax.js:4
onclick @ mammiferes.php:55
08/12/2017, 16h40
ABCIWEB

Utilise l'onglet "réseau" de la console javascript pour voir si tous les fichiers nécessaires sont bien rapatriés et vérifie le comportement de tes requêtes ajax, les paramètres envoyés et la réponse.

Possible aussi que tu aies une erreur php. Une différence de version entre ton serveur local et le serveur en production pourrait produire des erreurs pour l'utilisation de certaines fonctions. Et sur un serveur de test en local les erreurs sont activées par défaut alors qu'elles sont désactivées sur un serveur en production. Tu peux utiliser error_reporting pour modifier ce comportement en php et faire afficher les erreurs du serveur distant.