Thursday 9 March 2017

Create Dynamic Tabs by using Bootstrap in PHP Mysql



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>


12 comments:

  1. Replies
    1. Hi, you can check source above in the post, just copy it in your php file and check it.

      Delete
  2. Table Structure I want to check

    ReplyDelete
  3. Sir this program is working
    but it's in order version
    I want it in latest version 4.1.3 boostap

    ReplyDelete
  4. 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

    ReplyDelete
  5. Please provide database also

    ReplyDelete
  6. how to fetch dynamically data in bootstrap dropdown. pls explain

    ReplyDelete
  7. make 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.

    ReplyDelete
  8. Nice tutorial just like i was looking for.
    So i can add buy button to populate the cart?
    Thanks

    ReplyDelete
  9. -- phpMyAdmin SQL Dump
    -- 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 */;

    ReplyDelete
  10. 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

    ReplyDelete
  11. hi in this code view only tab data content data not view please help me

    ReplyDelete