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>
Where is the Source Code bro
ReplyDeleteHi, you can check source above in the post, just copy it in your php file and check it.
DeleteTable Structure I want to check
ReplyDeleteSir this program is working
ReplyDeletebut it's in order version
I want it in latest version 4.1.3 boostap
It's showing Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:\xampp\htdocs\silverliningtrust.com\tab.php on line 30
ReplyDeletePlease provide database also
ReplyDeletehow to fetch dynamically data in bootstrap dropdown. pls explain
ReplyDeletemake a video how to fetch dynamically data in bootstrap in different scenarios. what things need to be remember when we try dynamically fetch data in bootstrap with php. explain sir pls.
ReplyDeleteNice tutorial just like i was looking for.
ReplyDeleteSo i can add buy button to populate the cart?
Thanks
-- phpMyAdmin SQL Dump
ReplyDelete-- version 4.6.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: 08-Jul-2020 às 18:26
-- Versão do servidor: 5.7.14
-- PHP Version: 5.6.25
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `testing1`
--
-- --------------------------------------------------------
--
-- Estrutura da tabela `category`
--
CREATE TABLE `category` (
`category_id` int(11) NOT NULL,
`category_name` varchar(200) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Extraindo dados da tabela `category`
--
INSERT INTO `category` (`category_id`, `category_name`) VALUES
(1, 'aponogeton'),
(2, 'Echinodorus'),
(3, 'Imagens');
-- --------------------------------------------------------
--
-- Estrutura da tabela `product`
--
CREATE TABLE `product` (
`product_id` int(11) NOT NULL,
`category_id` int(11) NOT NULL,
`product_name` varchar(200) NOT NULL,
`product_image` varchar(200) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- Extraindo dados da tabela `product`
--
INSERT INTO `product` (`product_id`, `category_id`, `product_name`, `product_image`) VALUES
(1, 1, 'Aponogeton-ulvaceus', 'Aponogeton-ulvaceus.jpg'),
(2, 2, 'echinodorus-marble-queen', 'echinodorus-marble-queen.jpg'),
(3, 3, 'imagens', 'penguins.jpg'),
(4, 1, 'echinodorus-pintado-branco', 'echinodorus-pintado-branco.jpg'),
(5, 1, 'Echinodorus-simples', 'Echinodorus-simples.jpg');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `category`
--
ALTER TABLE `category`
ADD PRIMARY KEY (`category_id`);
--
-- Indexes for table `product`
--
ALTER TABLE `product`
ADD PRIMARY KEY (`product_id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `category`
--
ALTER TABLE `category`
MODIFY `category_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
--
-- AUTO_INCREMENT for table `product`
--
ALTER TABLE `product`
MODIFY `product_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Hi This code is working great but my product images are in another table ..I tried using joing product table and product images table but i am getting error mysqli fetch except single parameter boolean value like this so what i can do now
ReplyDeletehi in this code view only tab data content data not view please help me
ReplyDelete