How to display dynamic data in Bootstrap tabs using PHP and MySQL

In this topic we will discuss how to display dynamic content in Bootstrap tabs in PHP after fetching data from MySQL database. Tabs are used to display information in a single page. For example, if you want to display employee details, salary details and leave details of an employee, you can show them in three tabs. Each tab will have different set of information. By clicking on each tab user can view the details in the tab.

Tabs in PHP and MySQL

In the above screen, there are two tabs, one for the Course and other for the Exam. User can click on each tab and view the details.

We will create an application to display student courses and exam details in tabs. It will display a list of candidates in a html table and for each candidate you can view the courses in one tab and exams appeared in another tab.

display MySQL table data in tabsFolders and Files

Below is a screenshot of folder structure and files I am using:

create tabs in PHP

I have created a folder called 'tabs' under 'xampp/htdocs' as I am using XAMPP. If you are using WAMP, create 'tabs' folder under 'www'.

Folder 'cfg' - In this folder I have kept dbconnect.php which is used to connect to the MySQL database.
Folder 'css' - My custom stylesheet is in this folder
index.php - it is the home page which displays list of candidates
course_exam.php - This is the program that displays candidate's course and exam data in tabs.

Step 1 - Create the tables in MySQL database

Let us create few tables in MySQL database. These tables are for Candidates, Courses, Exams and Courses-Exams assigned to each candidate. I have a database called 'demo'. So, I created these tables in this database. If you have an existing database other than 'demo' you can also use it. Just make sure same tables do not exist already. I have given the name and structure of each table below:

Table1: candidates

This table stores the details of all candidates. Table structure is given below:

Display data in tabs in php

Table has 4 columns.

  1. candidate_id - it is the primary key and auto incremented
  2. name - Name of the candidate
  3. email_id - email_id of the candidate
  4. registration_dt - date of registration

Table2: courses

This table stores all courses. Table structure is given below:

Display data in tabs in php example

Table has 2 columns.

  1. course_id - course_id is the primary key and it is auto incremented
  2. course_name - Course Name

Table3: exams

This table stores exam details. Table structure is given below:

create bootstrap dynamic Tabs in PHP and MySQL

Table has 3 columns.

  1. exam_id - exam_id is the primary key and auto incremented
  2. exam_name - Name of Exam
  3. passing_score - Passing score of the exam

Table4: candidate_courses

This table stores the courses assigned to candidates. Table structure is given below:

bootstrap tabs example with php code

Table has 5 columns.

  1. id - it is the primary key and auto incremented
  2. candidate_id - candidate_id from candidates table
  3. course_id - course_id from courses table
  4. assigned_dt - date on which course was assigned to a candidate
  5. completion_dt - course completion date

Table5: candidate_exams

This table stores the all exams candidate took. Table structure is given below:

dynamic tabs in php

Table has 6 columns.

  1. id - it is the primary key and auto incremented
  2. candidate_id - candidate_id from candidates table
  3. exam_id - exam_id from exams table
  4. exam_dt - Date of exam
  5. nof_questions - Number of questions in this exam
  6. correct_answers - Number of questions correctly answered by the candidate

MySQL create tables scripts and scripts to create data in these tables are given below. You can also download the source code (see download section later).

After you created these tables, please verify if data is populated for all tables as below:

candidates table data

create tabs using php and mysql

courses table data

create horizontal tabs in html

exams table data

dynamic Tabs in PHP and MySQL

candidate_courses table data

create bootstrap tabs in PHP and MySQL

candidate_exams table data

dynamic Tabs in PHP and MySQL

Step 2 - Connect to MySQL database (dbconnect.php)

Use below script to connect to the database. Note that we have this database connection php program in 'cfg' folder. This is written once and used in every program where database connection is needed. This will be easy for maintenance and also will enable reusability of the code.

dbconnect.php

I am using mysqli_connect() function which needs 4 parameters.

  1. server - in our case it is localhost
  2. userid - we are using root user
  3. password - no password for user root
  4. database name - demo in our case.

We will include this dbconnect.php in other php programs so that we do not need to write it again in the program. For detail database connection understanding please read topic How to Connect to MySQL database using PHP.

Step 3 - Write a program to display list of candidates (index.php)

create Tabs in PHP

Let us assume there is a list of candidates who registered themselves for certain courses and exams. So, we will first display a list of such candidates in a html table by selecting all rows from 'candidates' table. It is a simple page in HTML and PHP that selects all data from candidates table and fetch in a loop and display in a html table. Below is the code for it.

index.php

For each candidate, there is a link to view details of exam and courses for the candidate. courses_exam.php program is called for this with parameters as candidate id and name. If you click on view details of any candidates then new page opens with details of courses and exams in separate tabs for the that candidate.

Step 4 - Develop a program to display data in Tabs (course_exam.php)

This is the program that displays course details and exam details of a candidate in separate tabs. You can click on a tab and view the details. Here we will use Bootstrap tabs. code for this program is given below:

course_exam.php

A nav-tab is defined with two nav items. Each item has reference to a unique id (href="#course" and href="#exam"). Then there are two <div>s with tab panes defined with id = "course" and id = "exam".

You can see these two <div>s are defined under tab-content div (line 36). Once this structure is defined, just display the data under two different tabs. Course data is displayed under div with id = "course" and exam data is displayed under div with id = "exam".

Below is the style.css used:

style.css

make tabs and data dynamic in phpTest the Application

Before testing just make sure in XAMPP control panel Apache and MySQL services are running. In the browser, run localhost/tabs. Candidate list page will be displayed. it will show the screen as below:

Dynamic Bootstrap Tabs using PHP and MYSQL

If you click on view details for any candidate, data will be displayed in two tabs. You can view data in each tab by clicking in the tab heading as below:

Load Dynamic Content in Tabs

create tabs with the data from database

Hope, you could develop and test it successfully.

download source code for Tabs in PHP and MySQLDownload Source Code

I have put all codes in a zip file. You can download it by clicking on the Download button below. You do not need to register yourself to download it. You can directly use the code or you can modify them as per your requirements.

create tabs containing different content in HTMLConclusion

In this topic I have showed how you can use Tabs and display dynamic content from database in the Tabs. However, one can use better styles to design and display data so that overall tabs look really nice. There is always scope to improve it. I hope I could explain it properly for your easy understanding.