Webslesson Tutorial | Create Dynamic Tab by using Bootstrap in PHP Mysql

Simple and easy jQuery tabs with AJAX and PHP

In this article, I will be showing you how to create jQuery AJAX tabs in a very simple and easy way.

Here, tabs.php contains the php code which contains data to be displayed.

GoogleContent goes here !
'; break; case "2": echo 'Yahoo content ?
'; break; case "3": echo 'My hotmail content goes here. 
'; break; case "4": default: echo 'Twitter status update 
'; break; > ?> 

The html code containing menu and content is as under. Here, each link has a different css id and a different url (tabs.php is called with different id value). The div with the id ‘tabcontent’ is where the content is displayed. Initially, the default text ‘Simple AJAX Tabs’ is displayed. The div with the id ‘preloader’ contains loading image.

Initially, when the page is loaded, the preloader image is made hidden by hiding the preloader div.
Then, the tab link click is traced by jQuery(“[id^=tab]”). This matches every click in the tab.
[attribute^=value] = Matches elements that have the specified attribute and it starts with a certain value.

Then the current clicked tab id is fetched by $(this).attr(“id”). And then the current clicked tab url is fetched by jQuery(“#”+tabId).attr(“href”).

CSS class ‘current’ is used to hightlight the current tab. So at first, all ‘current’ class is removed if it exists in any tab link. Then ‘current’ class is added to the current tab link.

Finally, loadTabContent function is called.

jQuery.ajax() returns the XMLHttpRequest instance that it creates. jQuery.ajax() gives you the option to specify a dataType parameter, which gives jQuery a hint as to what to expect back from the server. The ‘url’ parameter of jQuery.ajax() function is the url to request. The other parameter is ‘success’ function. This function is called if the request succeeds. This function’s parameter is the data returned from the server.

In this success function, I have appended the data returned from server into the tabcontent div. At the beginning of loadTabContent function, preloader is shown. The preloaded is again made hidden after the data is fetched from server and displayed in tabcontent div.

Источник

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 .

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.

Example: Create Dynamic Bootstrap Tabs with PHP & MySQL

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.

$category_html.= ''. $category['name'].''; $product_html .= '
'; $product_sql = "SELECT id, p_name, p_image, price FROM category_products WHERE id"]; $product_results = mysqli_query($conn, $product_sql) or die("database error:". mysqli_error($conn)); if(!mysqli_num_rows($product_results)) < $product_html .= '
No product found!'; > while( $product = mysqli_fetch_assoc($product_results) ) < $product_html .= '
'; $product_html .= ''; $product_html .= '
'.$product["p_name"].'
'; $product_html .= '
Price: $'.$product["price"].'
'; $product_html .= '
'; > $product_html .= '
 '; > ?>

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download

2 thoughts on “ Create Dynamic Bootstrap Tabs with PHP & MySQL ”

How do you expect us to click on the download button when google ads have covered the entire download button. #sad

Источник

Webslesson

PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

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

'.$row["category_name"].' '; $tab_content .= ' 
'; > else < $tab_menu .= ' 
   '.$row["category_name"].' '; $tab_content .= ' 
'; > $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 .= ' 
'.$sub_row["product_name"].'
 '; > $tab_content .= '
 '; $i++; > ?>
Create Dynamic Tab by using Bootstrap in PHP Mysql

Источник

Create In-page Tabs

If your theme or plugin only uses a single setting page but needs to separate certain contents into different areas, tabs are useful. This tutorial introduces a way to add tabs within a single page.

Steps

1. Include the library
2. Extend the library class
3. Define the setUp() method
4. In the setUp method, define a sub-page and in-page tabs.
5. Instantiate the extended class

Screenshot

Include the library

The library file needs to be loaded.

include ( dirname ( dirname ( __FILE__ ) ) . ‘/admin-page-framework/library/apf/admin-page-framework.php’ ) ;

Extend the library class

Define the setUp() method

We’ve covered this already in the previous tutorial.

‘http://lh4.googleusercontent.com/-z7ydw-aPWGc/UwpeB96m5eI/AAAAAAAABjs/Brz6edaUB58/s800/demo04_16x16.png’ // menu icon

‘screen_icon’ = > ‘https://lh3.googleusercontent.com/-Z5OeZOGzN3c/UilDgCX9WjI/AAAAAAAABS4/mf7L8GGJRTc/s800/demo04_01_32x32.png’ // page screen icon for WP 3.7.x or below

‘my_tabs’ , // set the target page slug so that the ‘page_slug’ key can be omitted from the next continuing in-page tab arrays.

Disable Page Heading Tabs and Enlarge the In-Page Heading Tabs

$this — > setPageHeadingTabsVisibility ( false ) ; // disables the page heading tabs by passing false.

Instantiate the extended class

Code

include ( dirname ( dirname ( __FILE__ ) ) . ‘/admin-page-framework/library/apf/admin-page-framework.php’ ) ;

‘http://lh4.googleusercontent.com/-z7ydw-aPWGc/UwpeB96m5eI/AAAAAAAABjs/Brz6edaUB58/s800/demo04_16x16.png’ // menu icon

‘screen_icon’ = > ‘https://lh3.googleusercontent.com/-Z5OeZOGzN3c/UilDgCX9WjI/AAAAAAAABS4/mf7L8GGJRTc/s800/demo04_01_32x32.png’ // page screen icon for WP 3.7.x or below

‘my_tabs’ , // set the target page slug so that the ‘page_slug’ key can be omitted from the next continuing in-page tab arrays.

$this — > setPageHeadingTabsVisibility ( false ) ; // disables the page heading tabs by passing false.

. ‘

Page Content Filter

‘
. ‘

This is inserted by the the page content_ filter, set in the \’content_ + page slug\’ method.

‘ ;
. ‘

Tab Content Filter

‘
. ‘

This is the second tab! This is inserted by the \’content_ + page slug + _ + tab slug\’ method.

‘ ;
. ‘

Tab Content Filter

‘

Field Type Pack

Get the field type pack to enrich the setting forms of your plugin / theme. It includes data & time, auto-complete, grid, revealer etc.

Related Posts

2 thoughts on “Create In-page Tabs”

I have created a series of forms Using Admin Page Framwork. Each form is in a different Tab.
I need to create some content (html) within each tab, before, and sometimes after the form entries.
It is my understanding that a tab containing a form starts out:

public function load_customize_my_mcc_tab_menu( $oAdminPage ) $this->addSettingFields(
array( .

Etc. And a tab containing content seems to start out:

function content_my_tabs_my_tab_c( $sContent ) return $sContent
. ‘Tab Content Filter’

Etc. I have tried dozens of different way to add content to a oAdminPage function with zero luck. How does one accomplish this?

Hi Derek, I’ve responded to your post on wordpress.org. Let’s continue on the issue there. Thank you!

Источник