Create Dynamic Bootstrap Tabs with PHP & MySQL

You have seen tabs in many websites to display dynamic data on different tab on same page. So if you're thinking about implementing same tabs functionality, then you're here at right place. In this tutorial, you will learn how to create dynamic Bootstrap tabs with PHP and MySQL. The tutorial explained with an example where we have created tabs for categories and display products from related category when category tab clicked. The data for the tabs and content loaded on page load but the content remain invisible except active tab. You can also download demo source code from download link.

So let’s start the coding. We will have following file structure for the example to create dynamic Bootstrap tabs using PHP and MySQL .

• index.php


• tabs.php

Steps1: Create Database Tables

As in this example, we will display categories as tabs and display tabs related data. So first we will create MySQL database tables categories and category_products. We will insert few records into tables and then display it.

we will create categories table using below query.
CREATE TABLE `categories` (
`id` int(11) NOT NULL,
`name` varchar(256) NOT NULL,
`description` text NOT NULL,
`created` datetime NOT NULL,
`modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


we will create category_products table using below query.

CREATE TABLE `category_products` (
`id` int(11) NOT NULL,
`p_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
`p_image` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,
`price` float(10,2) NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Steps2: Create Tabs and Content Container
In index.php, we will create Tabs and Tabs Content container HTML using Bootstrap to display Tabs and contents. We have also included tabs.php to load Tabs and Tabs Content data to display.
<div class="container">
<h2>Example: Create Dynamic Bootstrap Tabs with PHP & MySQL</h2>
<br><br>
<?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>



Steps3: Create Tabs and Content from MySQL

Now finally in tabs.php, we create Tabs and Tabs related content from MySQL with PHP. First we will get categories data from table categories to create Tabs and then get related category product data from table category_products to display products according to Tabs.

<?php
include_once("../db_connect.php");
$category_sql = "SELECT id, name FROM categories LIMIT 10";
$resultset = mysqli_query($conn, $category_sql) or die("database error:". mysqli_error($conn));
$active_class = 0 ;
$category_html = '';
$product_html = '';
while( $category = mysqli_fetch_assoc($resultset) ) {
$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['id'].'" data-toggle="tab">'.
$category['name'].'</a></li>';
$product_html .= '<div id="'.$category["id"].'" class="tab-pane fade '.$current_content.'">';
$product_sql = "SELECT id, p_name, p_image, price FROM category_products WHERE id = ".$category["id"];
$product_results = mysqli_query($conn, $product_sql) or die("database error:". mysqli_error($conn));
if(!mysqli_num_rows($product_results)) {
$product_html .= '<br>No product found!';
}
while( $product = mysqli_fetch_assoc($product_results) ) {
$product_html .= '<div class="col-md-3 product">';
$product_html .= '<img src="images/'.$product["p_image"].'" class="img-responsive img-thumbnail product_image" />';
$product_html .= '<h4>'.$product["p_name"].'</h4>';
$product_html .= '<h4>Price: $'.$product["price"].'</h4>';
$product_html .= '</div>';
}
$product_html .= '<div class="clear_both"></div></div>';
}
?>



You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]