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

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:

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:

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:

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:

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:

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

courses table data

exams table data

candidate_courses table data

candidate_exams table data

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.

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 in PHP using MySQLi and PDO.

Step 3 - Write a program to display list of candidates (index.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.

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:

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: