Les onglets dynamiques présentent les mêmes enregistrements

Nov 19 2020

J'essaie de créer un onglet dynamique avec PHP et MySQL en utilisant Bootstrap Framework pour le site Web du film que je crée. Les films seront séparés en maintenant à l'affiche et à venir.

Résultat attendu: les films doivent être affichés en fonction de la catégorie (en cours de diffusion ou à venir).

Résultat réel: l'onglet dynamique ne fonctionne pas. Les films qui sont sous «Prochainement» sont affichés dans «À l'affiche». De plus, le site Web affiche uniquement le deuxième enregistrement (à partir de la base de données). Le premier enregistrement pour «Now Affichage» qui est le et «Coming Soon» ne sont pas affichés.

Le même contenu est affiché indépendamment du fait de cliquer sur l'onglet «Affichage en cours» ou «À venir» (l'onglet «À venir» ne peut être vu que si je survole, ce qui est un autre problème que je dois résoudre). Le film «La leçon maudite» devrait être diffusé dans Coming Soon. Le premier enregistrement pour "À l'affiche" et "À venir" ne s'affiche pas.

J'apprécie vraiment votre aide et vos conseils pour résoudre ces problèmes. J'essaie de résoudre ces problèmes depuis des jours, mais je n'arrive tout simplement pas à le comprendre.

Voici mes codes:

<?php
$servername = 'localhost'; $username = 'root';
$password = ''; $dbname = 'movie';

$conn = new mysqli($servername, $username, $password, $dbname); $tab_query = "SELECT * FROM category ORDER BY Category_ID";
$tab_result = mysqli_query($conn, $tab_query); $tab_menu = '';
$tab_content = ''; $count = 0;

while ($row = mysqli_fetch_array($tab_result)) {
    if ($count == 0) { $tab_menu .= '<li class="nav-item"><a class="nav-link active" href="#' . $row["Category_ID"] . '" data-toggle="tab">' . $row["Category_Name"] . '</a></li>';
        $tab_content .= '<div id="'.$row["Category_ID"].'" class="tab-pane fade in active"';
    } else {
        $tab_menu .= '<li class="nav-item"><a class="nav-link" href="#' . $row["Category_ID"] . '" data-toggle="tab">' . $row["Category_Name"] . '</a></li>'; $tab_content .= '<div id="'.$row["Category_ID"].'" class="tab-pane fade"'; } $product_query = "SELECT * FROM movie WHERE Category_ID = '".$row["Category_ID"]."'"; $product_result = mysqli_query($conn, $product_query);
    
   
    while($sub_row = mysqli_fetch_array($product_result))
    {   
        $tab_content .= ' <div class="col-md-3" style="margin-bottom:36px;"> <img src="'.$sub_row["Image_URL"].'" class="img-responsive img-thumbnail" />
            <h4>'.$sub_row["Title"].'</h4> </div> '; } $tab_content .= '<div style="clear:both"></div></div>';
    $count++; } ?> <!DOCTYPE html> <html> <head> <title>Movie Testing Website</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true"> <!--Bootstrap CSS--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--Custom CSS--> <link rel="stylesheet" href="css/main.css"> <!--jQuery--> <script defer src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--Bootstrap JS--> <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script> <script defer src="js/main.js"></script> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <?php echo $tab_menu; ?>
            </ul>
            
            <div class="tab-content">
                <?php echo $tab_content; ?>
            </div>
        </div>
    </body>
</html>

Voici des extraits de ma base de données:

Table de film:

Tableau des catégories:

Réponses

AdamP. Nov 19 2020 at 23:38

J'ai trouvé le problème dans la vue et non dans la collecte de données à partir de la base de données. J'ai modifié la structure html basée sur cet exemple:https://bootsnipp.com/snippets/exE6D