Dynamiczne karty prezentują te same rekordy

Nov 19 2020

Próbuję utworzyć dynamiczną kartę z PHP i MySQL przy użyciu Bootstrap Framework dla witryny filmowej, którą tworzę. Filmy zostaną podzielone na sekcje Teraz wyświetlane i Wkrótce.

Oczekiwany wynik: filmy powinny być wyświetlane na podstawie kategorii (teraz wyświetlane lub dostępne wkrótce).

Rzeczywisty wynik: karta dynamiczna nie działa. Filmy z kategorii „Wkrótce” są wyświetlane w sekcji „Teraz wyświetlane”. Ponadto witryna wyświetla tylko drugi rekord (z bazy danych). Pierwszy rekord „Now Show”, czyli „Wkrótce”, nie jest wyświetlany.

Ta sama treść jest wyświetlana niezależnie od kliknięcia karty „Teraz wyświetlane” lub „Wkrótce” (kartę „Wkrótce” można zobaczyć tylko po najechaniu kursorem, co jest kolejnym problemem, który muszę naprawić). Film „Przeklęta lekcja” powinien zostać pokazany w sekcji „Wkrótce”. Pierwsze nagrania z „Now Show” i „Coming Soon” nie są pokazywane.

Naprawdę doceniam twoją pomoc i rady w rozwiązywaniu tych problemów. Próbowałem to rozwiązać od dni, ale po prostu nie mogę tego rozgryźć.

Oto moje kody:

<?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>

Oto fragmenty mojej bazy danych:

Stolik filmowy:

Tabela kategorii:

Odpowiedzi

AdamP. Nov 19 2020 at 23:38

Znalazłem problem w widoku, a nie w zbieraniu danych z db. Zmodyfikowałem strukturę html na podstawie tego przykładu:https://bootsnipp.com/snippets/exE6D