J'ai trouvé le problème dans la vue et non dans la collecte de données à partir de db. J'ai modifié la structure html en me basant sur cet exemple :https://bootsnipp.com/snippets/exE6D
En savoir plus sur les navigations dans les onglets Bootstrap :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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Custom CSS-->
<link 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>
