Я пытался создать страницу меню на сайте. Я извлек содержимое товаров и их категории, используя Bootstrap, PHP и MySQL. Связь между товарами и категориями не происходит. Одновременно должна отображаться только активная категория класса с продуктом, но все продукты отображаются одновременно.
PHP
<?php
include("config/config.php");
$category_sql = "SELECT * FROM foodcategory";
$result = mysqli_query($con, $category_sql);
$active_class = 0;
$category_html = '';
$product_html = '';
while ($category = mysqli_fetch_assoc($result)) {
$current_tab = '';
$current_content = '';
if (!$active_class) {
$active_class = 1;
$current_tab = 'active';
$current_content = 'in active';
}
$category_html .= '<li class = "' . $current_tab . '"><a href = "#' . $category['catid'] . '" data-toggle = "tab">' . $category['catname'] . '</a></li>';
$product_html .= '<div id = "' . $category['catid'] . '" class = "tab-pane fade" ' . $current_content . '>';
$product_sql = "SELECT * FROM menu WHERE catid = " . $category["catid"];
$product_result = mysqli_query($con, $product_sql);
if (!mysqli_num_rows($product_result)) {
$product_html .= "<br>No products found!";
}
while ($product = mysqli_fetch_assoc($product_result)) {
$product_html .= '<div class="col-md-3 product">';
$product_html .= '<div class="card mx-0 mb-4">';
$product_html .= '<div class="card-header">' . $product['foodname'] . '</div>';
$product_html .= '<div class="card-body"><p>' . $product['descr'] . '</p>';
$product_html .= '<p>₹' . $product['foodprice'] . '</p></div>';
$product_html .= '<input type="hidden" name="hidden_name" id="name' . $product['foodid'] . '" value="' . $product['foodname'] . '">';
$product_html .= '<input type="hidden" name="hidden_id" id="id' . $product['foodid'] . '" value="' . $product['foodid'] . '"> <!--HIDDEN ID-->';
$product_html .= '<input type="hidden" name="hidden_price" id="price' . $product['foodid'] . '" value="' . $product['foodprice'] . '"> <!--HIDDEN PRICE-->';
$product_html .= '<input type="hidden" name="hidden_quantity" id="quantity' . $product['foodid'] . '" value="1"> <!--HIDDEN PRICE-->';
$product_html .= '<div class="card-footer d-flex align-items-center justify-content-between">';
$product_html .= '<input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="' . $product['foodid'] . '" value="Add">';
$product_html .= '</div>';
$product_html .= '</div>';
$product_html .= '</div>';
$product_html .= '</div>';
}
$product_html .= '<div class = "clear_both"></div></div>';
}
?>
HTML
<main class="my-4">
<div class=c ontainer>
<?php include_once("tabs.php"); ?>
<ul class="nav nav-tabs">
<?php echo $category_html;?>
</ul>
<div class="tab-content">
<?php echo $product_html;?>
</div>
</div>
<!-- <div class="row">
<div class="col-sm-2">
<div class="nav-pills " id="v-pills-tab" role="tablist" aria-orientation="vertical">
<?//php echo $tab_menu;?>
</div>
</div>
<div class="col-sm-10">
<div class="tab-content" id="v-pills-tabContent">
<?php //echo $tab_content;?>
</div>
</div>
</div> -->
</main>
введите описание изображения здесь
Продукт не связан с указанной категорией c. Все отображается на экране. В чем здесь ошибка?
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">maincourse</a></li>
<li class=""><a href="#2" data-toggle="tab">pizza</a></li>
<li class=""><a href="#3" data-toggle="tab">southindian</a></li>
<li class=""><a href="#4" data-toggle="tab">mc donalds</a></li>
<li class=""><a href="#11" data-toggle="tab">burgers</a></li>
<li class=""><a href="#12" data-toggle="tab">italian</a></li>
<li class=""><a href="#13" data-toggle="tab">chinese</a></li>
<li class=""><a href="#15" data-toggle="tab">desserts</a></li>
<li class=""><a href="#17" data-toggle="tab">beverages</a></li>
</ul>
<div class="tab-content">
<div id="1" class="tab-pane fade" in active>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">pav bhaji</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹120</p>
</div><input type="hidden" name="hidden_name" id="name1" value="pav bhaji"><input type="hidden" name="hidden_id" id="id1" value="1"><input type="hidden" name="hidden_price" id="price1" value="120"><input type="hidden" name="hidden_quantity" id="quantity1"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="1" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">paneer masala</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹100</p>
</div><input type="hidden" name="hidden_name" id="name2" value="paneer masala"><input type="hidden" name="hidden_id" id="id2" value="2"><input type="hidden" name="hidden_price" id="price2" value="100"><input type="hidden" name="hidden_quantity" id="quantity2"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="2" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">aloo paratha</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹90</p>
</div><input type="hidden" name="hidden_name" id="name3" value="aloo paratha"><input type="hidden" name="hidden_id" id="id3" value="3"><input type="hidden" name="hidden_price" id="price3" value="90"><input type="hidden" name="hidden_quantity" id="quantity3"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="3" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">butter sada dosa</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹80</p>
</div><input type="hidden" name="hidden_name" id="name4" value="butter sada dosa"><input type="hidden" name="hidden_id" id="id4" value="4"><input type="hidden" name="hidden_price" id="price4" value="80"><input type="hidden" name="hidden_quantity" id="quantity4"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="4" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">farm house pizza</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹210</p>
</div><input type="hidden" name="hidden_name" id="name7" value="farm house pizza"><input type="hidden" name="hidden_id" id="id7" value="7"><input type="hidden" name="hidden_price" id="price7" value="210"><input type="hidden" name="hidden_quantity" id="quantity7"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="7" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">chole bhature</div>
<div class="card-body">
<p>gfvdc</p>
<p>₹150</p>
</div><input type="hidden" name="hidden_name" id="name12" value="chole bhature"><input type="hidden" name="hidden_id" id="id12" value="12"><input type="hidden" name="hidden_price" id="price12" value="150"><input type="hidden" name="hidden_quantity" id="quantity12"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="12" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">paneer makhani</div>
<div class="card-body">
<p>gvcxgb</p>
<p>₹110</p>
</div><input type="hidden" name="hidden_name" id="name13" value="paneer makhani"><input type="hidden" name="hidden_id" id="id13" value="13"><input type="hidden" name="hidden_price" id="price13" value="110"><input type="hidden" name="hidden_quantity" id="quantity13"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="13" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">veg biryani</div>
<div class="card-body">
<p>gbfvcx</p>
<p>₹130</p>
</div><input type="hidden" name="hidden_name" id="name14" value="veg biryani"><input type="hidden" name="hidden_id" id="id14" value="14"><input type="hidden" name="hidden_price" id="price14" value="130"><input type="hidden" name="hidden_quantity" id="quantity14"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="14" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">paneer kadhai</div>
<div class="card-body">
<p>opiuyt</p>
<p>₹110</p>
</div><input type="hidden" name="hidden_name" id="name15" value="paneer kadhai"><input type="hidden" name="hidden_id" id="id15" value="15"><input type="hidden" name="hidden_price" id="price15" value="110"><input type="hidden" name="hidden_quantity" id="quantity15"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="15" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">c</div>
<div class="card-body">
<p>d</p>
<p>₹3</p>
</div><input type="hidden" name="hidden_name" id="name24" value="c"><input type="hidden" name="hidden_id" id="id24" value="24"><input type="hidden" name="hidden_price" id="price24" value="3"><input type="hidden" name="hidden_quantity" id="quantity24" value="1">
<div
class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="24" value="Add"></div>
</div>
</div>
</div>
<div class="clear_both"></div>
</div>
<div id="2" class="tab-pane fade">
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">cheese burst pizza</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹250</p>
</div><input type="hidden" name="hidden_name" id="name8" value="cheese burst pizza"><input type="hidden" name="hidden_id" id="id8" value="8"><input type="hidden" name="hidden_price" id="price8" value="250"><input type="hidden" name="hidden_quantity" id="quantity8"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="8" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">burger pizza</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹120</p>
</div><input type="hidden" name="hidden_name" id="name9" value="burger pizza"><input type="hidden" name="hidden_id" id="id9" value="9"><input type="hidden" name="hidden_price" id="price9" value="120"><input type="hidden" name="hidden_quantity" id="quantity9"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="9" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">double cheese pizza</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹300</p>
</div><input type="hidden" name="hidden_name" id="name19" value="double cheese pizza"><input type="hidden" name="hidden_id" id="id19" value="19"><input type="hidden" name="hidden_price" id="price19" value="300"><input type="hidden" name="hidden_quantity"
id="quantity19" value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="19" value="Add"></div>
</div>
</div>
</div>
<div class="clear_both"></div>
</div>
<div id="3" class="tab-pane fade">
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">masala dosa</div>
<div class="card-body">
<p>*Description to be added here*</p>
<p>₹110</p>
</div><input type="hidden" name="hidden_name" id="name5" value="masala dosa"><input type="hidden" name="hidden_id" id="id5" value="5"><input type="hidden" name="hidden_price" id="price5" value="110"><input type="hidden" name="hidden_quantity" id="quantity5"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="5" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">mysore masala dosa</div>
<div class="card-body">
<p>iuyt</p>
<p>₹120</p>
</div><input type="hidden" name="hidden_name" id="name6" value="mysore masala dosa"><input type="hidden" name="hidden_id" id="id6" value="6"><input type="hidden" name="hidden_price" id="price6" value="120"><input type="hidden" name="hidden_quantity" id="quantity6"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="6" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">i</div>
<div class="card-body">
<p>ijk</p>
<p>₹6</p>
</div><input type="hidden" name="hidden_name" id="name22" value="i"><input type="hidden" name="hidden_id" id="id22" value="22"><input type="hidden" name="hidden_price" id="price22" value="6"><input type="hidden" name="hidden_quantity" id="quantity22" value="1">
<div
class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="22" value="Add"></div>
</div>
</div>
</div>
<div class="clear_both"></div>
</div>
<div id="4" class="tab-pane fade">
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">aloo tikki meal</div>
<div class="card-body">
<p>qwerthy</p>
<p>₹120</p>
</div><input type="hidden" name="hidden_name" id="name10" value="aloo tikki meal"><input type="hidden" name="hidden_id" id="id10" value="10"><input type="hidden" name="hidden_price" id="price10" value="120"><input type="hidden" name="hidden_quantity"
id="quantity10" value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="10" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">mc veggie meal</div>
<div class="card-body">
<p>fghjg</p>
<p>₹150</p>
</div><input type="hidden" name="hidden_name" id="name11" value="mc veggie meal"><input type="hidden" name="hidden_id" id="id11" value="11"><input type="hidden" name="hidden_price" id="price11" value="150"><input type="hidden" name="hidden_quantity" id="quantity11"
value="1">
<div class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="11" value="Add"></div>
</div>
</div>
</div>
<div class="col-md-3 product">
<div class="card mx-0 mb-4">
<div class="card-header">o</div>
<div class="card-body">
<p>ohj</p>
<p>₹9</p>
</div><input type="hidden" name="hidden_name" id="name23" value="o"><input type="hidden" name="hidden_id" id="id23" value="23"><input type="hidden" name="hidden_price" id="price23" value="9"><input type="hidden" name="hidden_quantity" id="quantity23" value="1">
<div
class="card-footer d-flex align-items-center justify-content-between"><input type="button" class="add_to_cart btn btn-sm btn-outline-success" name="add_to_cart" id="23" value="Add"></div>
</div>
</div>
</div>
<div class="clear_both"></div>
</div>
<div id="11" class="tab-pane fade"><br>No products found!
<div class="clear_both"></div>
</div>
<div id="12" class="tab-pane fade"><br>No products found!
<div class="clear_both"></div>
</div>
<div id="13" class="tab-pane fade"><br>No products found!
<div class="clear_both"></div>
</div>
<div id="15" class="tab-pane fade"><br>No products found!
<div class="clear_both"></div>
</div>
<div id="17" class="tab-pane fade"><br>No products found!
<div class="clear_both"></div>
</div>
</div>
</div>