8768 sujets

Développement web côté serveur, CMS

Bonjour à tous Smiley smile ,

J'aimerais réaliser une app qui permettrai de filtrer en temps réel des produits selon des critères. Je suis débutant en programation et surtout en AJAX.

Dans l'idée c'est un peu comme un système de filtre que l'on retrouve un peu partout dans les magasins en ligne ; le nombre de produits diminue selon les filtres appliqués et que les articles apparaissent en temps réel.

Pour se faire j'ai réalisé un bdd MySQL avec des colonnes pour appliquer les filtres.

J'ai aussi réalisé ma requête préparée qui fonctionne avec le submit en PHP.

Question, AJAX est la solution?

Ça fait deux jours que je cherche et je ne voit pas d’exemple avec plusieurs conditions, uniquement des systèmes avec une liste déroulante (donc avec un seul critère).

Voici ma requête préparée:
$forme = $_POST['forme'];
$capacite = $_POST['capacite'];
$type_air = $_POST['type_air'];
$couleur = $_POST['couleur'];
$connected = $_POST['connected'];
$eclairage = $_POST['eclairage'];
$marque = $_POST['marque'];
$prix = $_POST['prix'];
 
$req = <<<EOF
SELECT
    *
FROM
    spa
WHERE
    forme = (:forme)
AND
    nombre_personne >= (:nombre_personne)
AND
    type_air = (:type_air)
AND
    couleur = (:couleur)
AND
    connecte = (:connected)
AND
    eclairage = (:eclairage)
AND
    marque = (:marque)
AND
    prix <= (:prix)
 
ORDER BY prix ASC
EOF;
 
$stmt = $database->prepare($req);
$stmt->bindValue('forme', $forme, PDO::PARAM_STR);
$stmt->bindValue('nombre_personne', $capacite, PDO::PARAM_INT);
$stmt->bindValue('type_air', $type_air, PDO::PARAM_STR);
$stmt->bindValue('couleur', $couleur, PDO::PARAM_STR);
$stmt->bindValue('connected', $connected, PDO::PARAM_STR);
$stmt->bindValue('eclairage', $eclairage, PDO::PARAM_STR);
$stmt->bindValue('marque', $marque, PDO::PARAM_STR);
$stmt->bindValue('prix', $prix, PDO::PARAM_INT);
 
 
if (!$stmt->execute()) {
    echo "Erreur sur la selection";
} else {
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
};


Si vous avez des indications sur des tuto ou comment y arriver je suis preneur :o

Merci à tous !
Modifié par louyi (08 Oct 2020 - 13:50)
Hello,

Ajax serait effectivement une solution adéquat pour ton problème,
vu que tu peux envoyer des paramètres à ta requetes php sans rechargement de page grace à AJAX. Du coup, plus de rafraichissement de page, que du temps réel.
Modifié par JENCAL (08 Oct 2020 - 13:56)
Merci, aurais tu une idée de comment faire ou un tuto clair?
Tout les tuto c'est l'embrouille total ou trop simple sur une simple liste..
Je passe mon temps à retourner internet depuis 3 jours sans y arriver ca me rend un peu fou :x
Alors en gros,

$("#filtre").click(function(){
    $.ajax({
       url : 'filtre.php',
       type : 'POST',
       data:{ filtre : id, // le filtre choisie dans la liste déroulante },
       dataType : 'html', // On désire recevoir du HTML
       success : function(code_html, statut){ // code_html contient le HTML renvoyé
           //ici  la réponse sera forcément de type string, mais tu peux faire un parseJSON par exemple si tu as formater ta réponse php en json
       }
    });
});


Ce code c'est le bout d'ajax qu'il faut implémenté et que tu adaptes à ton besoin
il doit appeler le bon fichier PHP, envoyer le bon filtre (dans data) et réceptionne/formater la réponse dans le success.


mais ne connaissant pas comment tu gères l'affichage des produits tu risques de rencontrer des problèmes.
Merci pour ta réponse.
J'ai bien tout changé pour adapter, rien ne se passe.
Le "filtre" correspond au name d'un groupe d'input?

En gros c'est un formulaire pour trier des spa selon des choix (radio).
A la fin du formulaire je submit vers la page de resultat avec les variables qui trie ma BDD Sql. Et j'aurais voulu que les resultats s'affichent en temps réel au lieu de cliquer sur submit > redirection vers la page de resultat.

Je ne sais pas par ou commencer :x
Modifié par louyi (08 Oct 2020 - 15:41)
louyi a écrit :
Merci pour ta réponse.
J'ai bien tout changé pour adapter, rien ne se passe.
Le "filtre" correspond au name d'un groupe d'input?

En gros c'est un formulaire pour trier des spa selon des choix (radio).
A la fin du formulaire je submit vers la page de resultat avec les variables qui trie ma BDD Sql. Et j'aurais voulu que les resultats s'affichent en temps réel au lieu de cliquer sur submit &gt; redirection vers la page de resultat.

Je ne sais pas par ou commencer :x


oula...
alors oui le filtre correspond à la valeur de ton filtre, et comme tu ne partages pas ton HTML alors j'en sais rien.

Ensuite comme je disais, le "comment" tu affiches ton résultat sql je ne sais pas non plus comment tu le gère, donc j'ai 0 visibilité là dessus aussi.

Imaginons que ton résultat de base SQL soit un tableau que tu traite en PHP pour sortir un HTML, alors dans ton succes ajax tu dois refaire la même chose, recevoir ce tableau (le nouveau tableau grace au filtre) et traiter l'affichage en javascriptj/jquery
Merci pour ton aide et tes conseils, je vais me pencher dessus. Je reviens pour donner ma solution si j'ai réussi ^^
Me revoilà toujours en galère Smiley confused
Je n'y arrive decidement pas..
Voici mon script :


<script>
    $(document).ready(function(){
        $("#ajax").click(function(){
            $.ajax({
                url: "php/req-spa.php",
                type: "POST",
                data:
                    {
                        var forme = $("input[name='forme']").val();
                        var capacite = $("input[name='capacite']").val();
                        var massage = $("input[name='type_air']").val();
                        var dimension = $("input[name='dimension']").val();
                        var prix = $("input[name='prix']").val();
                        console.log(forme);
                    },
                dataType : 'html', 

                success: function () {
                    $('.affiche').html("<h2>Merci pour votre message !</h2><br><p>Je reviens vers vous prochainement</p>")
                        .hide()
                        .fadeIn(1500);
                }
            });
        });
    });

</script>


Les div dans mon fichier du formulaire :

<div class="ajax" >
            <button type="button" id="ajax" >Ajax</button>
        </div>
        <div class="affiche">
            Texte à afficher
        </div>

Mes variables correspondent aux valeurs de mes radio de mon formulaire.
Mon fichier PHP doit recevoir et valider les bon nom de variables en POST.
Rien ne se passe dans l'onglet réseau de mes navigateurs :x
Ou est le pb? Smiley eek Smiley eek Smiley eek Smiley eek Smiley eek Smiley eek

Merci à tous je deviens fou Smiley biggol