In this post we have make simple dynamic tab in PHP Script with Mysql Database by using Bootstrap. In previous tutorial by using Bootstrap we have make dynamic menu in php with Ajax load content and We have make Facebook style header notification by using PHP Ajax Jquery with Bootstrap.
This is one more post on Bootstrap and in this post we have implement Bootstrap for create Dynamic Tab in PHP Mysql. By using this feature you can display dynamic data on different tab on same page. Data are present on web page but it invisible and they will be only visible after clicking on that id tab. So We can display many data on same page without going to other page.
For learn this things we have use ecommerce site concept. On Ecommerce site product has been divided on different category and display product based on particular category. So here we have use two table Category and Product. From category table we will make dynamic tab and content of dynamic tab has been fetch from product table. So here also we will display product based on category. Dynamic tab has been created by using Bootstrap framework. So in this tutorial we have Dynamic Bootstrap tabs using PHP Mysql.
Source Code
index.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testing1");
$tab_query = "SELECT * FROM category ORDER BY category_id ASC";
$tab_result = mysqli_query($connect, $tab_query);
$tab_menu = '';
$tab_content = '';
$i = 0;
while($row = mysqli_fetch_array($tab_result))
{
if($i == 0)
{
$tab_menu .= '
<li class="active"><a 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><a 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 product WHERE category_id = '".$row["category_id"]."'";
$product_result = mysqli_query($connect, $product_query);
while($sub_row = mysqli_fetch_array($product_result))
{
$tab_content .= '
<div class="col-md-3" style="margin-bottom:36px;">
<img src="images/'.$sub_row["product_image"].'" class="img-responsive img-thumbnail" />
<h4>'.$sub_row["product_name"].'</h4>
</div>
';
}
$tab_content .= '<div style="clear:both"></div></div>';
$i++;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Create Dynamic Tab by using Bootstrap in PHP Mysql</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 align="center">Create Dynamic Tab by using Bootstrap in PHP Mysql</a></h2>
<br />
<ul class="nav nav-tabs">
<?php
echo $tab_menu;
?>
</ul>
<div class="tab-content">
<br />
<?php
echo $tab_content;
?>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment