Afficher des options en fonctions des villes

mael.916 - 5 déc. 2024 à 19:03
 mael.916 - 6 déc. 2024 à 16:28

Bonjour. J'ai déjà la base de mon site mais je voudrais que mon menu déroulant affiche uniquement les transports présent dans la ville (que j'ai dans une db) mais je n'y arrive pas. quelqu'un pour m'eclairer ?

index.php :

<?php
require("assets/php/showReports.php");
require("assets/php/search.php");
require("assets/php/database.php");

$queryCities = $db->prepare("SELECT DISTINCT ville FROM transport");
$queryCities->execute();
$cities = $queryCities->fetchAll(PDO::FETCH_ASSOC);

$selectedCity = isset($_GET['city']) ? $_GET['city'] : null;
$transportOptions = [];

if ($selectedCity) {
    $queryTransport = $db->prepare("SELECT DISTINCT types_de_transport FROM transport WHERE ville = :ville");
    $queryTransport->execute(['ville' => $selectedCity]);
    $transportOptions = $queryTransport->fetchAll(PDO::FETCH_ASSOC);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/style/style.css">
    <title>ControlBus - Vérifiez la présence des controleurs</title>
</head>
<body>
    <header>
        <div class="container">
            <h1>ControlBus</h1>
            <p>Voyagez sans vous faire péter.</p>
        </div>
    </header>
    <main>
        <section class="search-section">
            <h2>Y a-t-il des contrôleurs sur votre chemin ?</h2>
            <p>Consultez les signalements laissés par nos utilisateurs pour ne pas vous faire péter et ne pas payer.</p>
            <div class="search-bar">
                <form action="search.php" method="get">
                    <label for="transport-type">Type de transport :</label>
                    <select id="transport-type" name="transport_type">
                        <option value="">Sélectionnez un mode de transport</option>
                        <?php foreach ($transportTypes as $type): ?>
                            <option value="<?= htmlspecialchars($type['types_de_transport']); ?>">
                                <?= htmlspecialchars(ucfirst($type['types_de_transport'])); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>

                    <label for="city">Ville :</label>
                    <select id="city" name="city" required>
                        <option value="">Sélectionnez une ville</option>
                        <?php foreach ($cities as $city): ?>
                            <option value="<?= htmlspecialchars($city['ville']); ?>">
                                <?= htmlspecialchars(ucfirst($city['ville'])); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>

                    <label for="line">Ligne de transport :</label>
                    <select id="line" name="line" disabled required>
                        <option value="">Sélectionnez une ligne</option>
                    </select>

                    <?php if (isset($errorMsg)) {
                        echo "<p style='color: red;'>" . htmlspecialchars($errorMsg) . "</p>";
                    } ?>
                    <button class="search" id="search-btn">???? Rechercher</button>
                </form>
            </div>
        </section>
        <section class="reports-section">
            <h3>Derniers signalements des utilisateurs :</h3>
            <br>
            <ul>
                <?php
                if (isset($reports) && count($reports) > 0) {
                    foreach ($reports as $report) {
                        $ligne = htmlspecialchars($report["ligne"]);
                        $arret = htmlspecialchars($report["arret"]);
                        $ville = htmlspecialchars($report["ville"]);
                        $pseudo = htmlspecialchars($report["pseudo"]);
                        $date = htmlspecialchars($report["publication_date"]);
                        
                        echo "<li>???? <strong>$date</strong> - Ligne $ligne - Arrêt \"$arret\" (Ville : $ville) - Utilisateur : $pseudo</li>";
                    }
                } else {
                    echo "<li>$errorMsg</li>";
                }
                ?>
            </ul>
        </section>

        <div class="report-btn">
            <button class="report-button" id="report-btn">???? Signaler la présence de contrôleurs.</button>
        </div>
        <section class="contact" id="contact">
            <h2 class="heading">Contactez <span>Notre Équipe</span></h2>
            <form action="assets/php/mail.php" method="post">
                <div class="input-box">
                    <input type="text" name="name" placeholder="Nom complet">
                    <input type="email" name="email" id="email" placeholder="Email">
                </div>
                <div class="input-box">
                    <input type="number" name="number" id="number" placeholder="Numéro de téléphone">
                    <input type="text" name="sujet" placeholder="Sujet">
                </div>
                <textarea name="message" id="" cols="30" rows="10" placeholder="Votre message"></textarea>
                <button type="submit" name="envoie" class="btn">Envoyer le message</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 ControlBus |  <a href="#">CGU</a> | <a href="#">FAQ</a> | <a href="contact.html">Contact</a></p>
    </footer>
    <script src="assets/script/script.js"></script>
</body>
</html>

script.js :
 

document.getElementById("report-btn").addEventListener("click", function() {
    window.location.href = "signaler.php";
});

document.addEventListener("DOMContentLoaded", () => {
    const transportType = document.getElementById("transport-type");
    const city = document.getElementById("city");
    const line = document.getElementById("line");

    transportType.addEventListener("change", () => {
        city.disabled = !transportType.value;
        city.value = "";
        line.disabled = true;
        line.innerHTML = `<option value="">Sélectionnez une ligne</option>`;
    });

    city.addEventListener("change", () => {
        const selectedTransport = transportType.value;
        const selectedCity = city.value;

        if (selectedCity && selectedTransport) {
            fetch(`fetch-lines.php?city=${selectedCity}&type=${selectedTransport}`)
                .then(response => response.json())
                .then(data => {
                    line.disabled = data.length === 0;
                    line.innerHTML = data.length > 0
                        ? data.map(ligne => `<option value="${ligne}">${ligne}</option>`).join("")
                        : `<option value="">Aucune ligne disponible</option>`;
                })
                .catch(error => console.error("Erreur lors du chargement des lignes :", error));
        } else {
            line.disabled = true;
            line.innerHTML = `<option value="">Sélectionnez une ligne</option>`;
        }
    });
});

search.php :

<?php
require("assets/php/database.php");

if(isset($_GET["city"]) && isset($_GET["line"]) && !empty($_GET["city"]) && !empty($_GET["line"])) {
    $lineReported = $_GET["line"];
    $checkIfExists = $db->prepare("SELECT * FROM reports WHERE ligne = ?");
    $checkIfExists->execute(array($lineReported));

    if($checkIfExists->rowCount() > 0){
        $reportInfos = $checkIfExists->fetch();
        $ligne = $reportInfos["ligne"];
        $arret = $reportInfos["arret"];
        $ville = $reportInfos["ville"];
        $pseudo = $reportInfos["pseudo"];
        $publication_date = $reportInfos["publication_date"];
    } else {
        $errorMsg = "Aucun signalement trouvé pour la ligne " . $lineReported . ".";
    }
} else {
    $errorMsg = "Merci de compléter tous les champs";
}
?>

2 réponses

jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
5 déc. 2024 à 19:42

bonjour 

il nous manque le contenu du fichier 

fetch-lines.php

il serait bien également que tu ouvres la console JavaScript de ton navigateur que tu choisisses une ville et que tu regardes ce que ça affiche dans la console...

nb: pour débogier de l'Ajax (le fetch) je te conseille fortement d'utiliser le navigateur Firefox et pense bien, dans la console, à activer le débogage du XHR.


0

hello. tout d'abord je n'ai pas de fichier fetch-lines (ça peut etre bien de le creer mais a voir). de plus j'ai dejà regardé dans la console du navigateur et rien ne s'affiche. enfin j'utilise déja firefox comme navigateur et le débogage xhr est déjà activé.

Pour le fichier fetch-lines en quoi il consisterai (pour etre sur) et si tu as une idée de la tete que ça dervait avoir ?

merci !

0
jordane45 Messages postés 38429 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 février 2025 4 735
5 déc. 2024 à 22:52

Alors toi tu copies/colles du code sans savoir à quoi il sert ??

Dans ton javascript, tu fais un fetch sur le script php fetch-lines.php

  fetch(`fetch-lines.php?city=${selectedCity}&type=${selectedTransport}`)
          

ce script est sensé récupérer, au format json, la liste des transports en fonction de la ville sélectionnée.

Cet appel ajax (via l'api fetch) est déclenché lorsque tu choisis une ville dans ta liste déroulante

  city.addEventListener("change", () => {

En gros, ton script pourrait ressembler à un truc du genre :

<?php
//Affichage des erreurs PHP
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

require_once ("assets/php/database.php"); //NB dans le dossier ASSETS en général on place les scripts "publiques" .. pas les accès à la bdd !

// récupération PROPRE des variables AVANT de les utiliser
// NB: !empty fais déjà un isset .. pas besoin de faire les deux !
$city = !empty($_GET["city"]) ? $_GET["city"] : null;
$type = !empty($_GET["type"]) ? $_GET["type"] : null;

//Préparation de la requête :
$sql = " SELECT * FROM ligne WHERE 1=1 ";
$datas = [];

//si tu as choisis une ville
if($city){
  $sql .= " AND ville=:city ";
  $datas[':city'] = $city;
}

//si tu as choisis un type de transport
if($type){
  $sql .= " AND type=:type "; // pas sûr du nom de la colonne.. ne connaissant pas la structure de ta table
  $datas[':type'] = $type;
}


 //Execution de la requete
try{
  $requete = $bdd -> prepare($sql) ;
  $requete->execute($datas) ;
}catch(Exception $e){
  // en cas d'erreur :
   echo " Erreur ! ".$e->getMessage();
   echo " Les datas : " ;
  print_r($datas);
}

//On retourne le résultat au format json
$resultat = $requete->fetchAll();
echo json_encode($result);
exit;

NB: Pense à appliquer ceci pour tes codes PHP/PDO

https://forums.commentcamarche.net/forum/affich-37584941-php-pdo-gerer-les-erreurs

Je te laisse adapter le script à tes besoins..

Si tu as des soucis, merci de faire une capture écran de la console

regarde ici, ça te donner des conseils pour débuguer ton code ajax

https://forums.commentcamarche.net/forum/affich-37772066-php-jquery-debugage-ajax?v8th5MQcMDx5M3B0rKm5-neTZwY_nmCtrBX4svMXzV8

0

ah oui ! je vois d'ou viens ça. j'avais fais quelques tests et j'étais pas revenu assez loin en arriere.

je vais essayer de faire ce que tu m'as dis et je reviens vers toi !

0