The dynamic tabs are presenting the same records

问题

I am trying to create a dynamic tab with PHP and MySQL using Bootstrap Framework for the movie website that I am creating. The movies will be segregated into Now Showing and Coming Soon.

Expected Result: The movies should be displayed based on the category (Now Showing or Coming Soon).

Actual Result: The dynamic tab is not working. Movies that are under “Coming Soon” are displayed in “Now Showing”. In addition, the website only displays 2nd record onwards (from the database). The first record for “Now Showing” which is theand “Coming Soon” are not displayed.

The same content is displayed regardless of clicking “Now Showing” or “Coming Soon” tab (The “Coming Soon” tab can only be seen if I hover which is another issue that I need to fix). The movie 'The cursed lesson' should be shown in Coming Soon. The first record for 'Now Showing' and 'Coming Soon' are not shown.

I truly appreciate your help and advice in fixing these problems. I have been trying to solve these for days but I just can't seem to figure it out.

Here are my 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>

Here are snippets of my database:

Movie Table:

Category Table:

回答1:

I was found the problem in the view and not in data collection from db. I modified the html structure based on this sample: https://bootsnipp.com/snippets/exE6D

Find out more about Bootstrap tab navigations: https://www.w3schools.com/bootstrap4/bootstrap_navs.asp

<?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 .= '<a class="nav-item nav-link active" id="' . $row["Category_ID"] . '" data-toggle="tab" href="#nav-' . $row["Category_ID"] . '" role="tab" aria-controls="nav-' . $row["Category_ID"] . '" aria-selected="true">' . $row["Category_Name"] . '</a>';
        $tab_content .= '<div class="tab-pane fade show active" id="nav-' . $row["Category_ID"] . '" role="tabpanel" aria-labelledby="nav-' . $row["Category_ID"] . '-tab">';
    } else {
        $tab_menu .= '<a class="nav-item nav-link" id="' . $row["Category_ID"] . '" data-toggle="tab" href="#nav-' . $row["Category_ID"] . '" role="tab" aria-controls="nav-' . $row["Category_ID"] . '" aria-selected="false">' . $row["Category_Name"] . '</a>';
        $tab_content .= '<div class="tab-pane fade show" id="nav-' . $row["Category_ID"] . '" role="tabpanel" aria-labelledby="nav-' . $row["Category_ID"] . '-tab">';
    }

    $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">
            <div class="row">
                <div class="col-xs-12 ">
                    <nav>
                        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                        <?php echo $tab_menu; ?>
                        </div>
                    </nav>
                    <div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
                    <?php echo $tab_content; ?>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

来源：https://stackoverflow.com/questions/64910880/the-dynamic-tabs-are-presenting-the-same-records

标签

php

mysql

bootstrap-4