In this tutorial, I’m going to discuss how to use the Twitter Bootstrap to create a table and populate this table with records from MySQL database using PHP. Using Bootstrap framework, you can save more time when working with different browsers and or devices. And Bootstrap contains HTML and CSS based design templates that you can use this to improve the quality of your web application.

First you need to download Twitter Bootstrap framework.

Then we’ll create a folder named "bootstraptable" and extract the bootstrap framework, then copy and paste the "css" folder and its content, same with the "fonts" folder. And finally, we will put the "bootstraptable" folder inside "htdocs" folder.

Next, we'll create "list.php" file and add the following code:

In this code, we just added a link to our "bootstrap.css" and this is located inside "css" folder. And we are presenting a tabular table here. Since we’re creating a table, the hierarchy should be like this:

.

And in our case, we are using class="table".

1. <!
   
   DOCTYPE html>
   
2. 
   
3. <
   
   html>
   
4. <
   
   head>
   
5. <
   
   meta charset=
   
   "utf-8"
   
   >
   
6. <
   
   meta content=
   
   "width=device-width, initial-scale=1.0"
   
   name=
   
   "viewport"
   
   >
   
7. <
   
   meta content=
   
   ""
   
   name=
   
   "description"
   
   >
   
8. <
   
   meta content=
   
   ""
   
   name=
   
   "author"
   
   >
   
9. <
   
   link
   
   href=
   
   ""
   
   rel=
   
   "shortcut icon"
   
   >
   
10. 
    
11. <
    
    title>
    
    List
    
    of Student</
    
    title><!--
    
    Bootstrap core CSS -->
    
12. <
    
    link
    
    href=
    
    "css/bootstrap.css"
    
    rel=
    
    "stylesheet"
    
    >
    
13. </
    
    head>
    
14. 
    
15. <
    
    body>
    
16. <
    
    div class
    
    =
    
    "container"
    
    >
    
17. <
    
    table class
    
    =
    
    "table"
    
    >
    
18. <
    
    thead>
    
19. <
    
    tr>
    
20. <
    
    th>
    
    Firstname</
    
    th>
    
21. 
    
22. <
    
    th>
    
    Lastname</
    
    th>
    
23. 
    
24. <
    
    th>
    
    Email</
    
    th>
    
25. 
    
26. <
    
    th>
    
    Phone</
    
    th>
    
27. </
    
    tr>
    
28. </
    
    thead>
    
29. 
    
30. <
    
    tbody>
    
31. <
    
    tr>
    
32. <
    
    td>
    
    sdsd</
    
    td>
    
33. </
    
    tr>
    
34. </
    
    tbody>
    
35. 
    
36. <
    
    tbody></
    
    tbody>
    
37. </
    
    table>
    
38. </
    
    div><!--
    
    /
    
    container -->
    
39. </
    
    body>
    
40. </
    
    html>
    

And it looks like as shown below.



Next, we’re going to populate our table with a record from MySQL database. In the table below

, add the following code.

1. <?php
   
2. //set up mysql connection
   
3. mysql_connect
   
   (
   
   "localhost"
   
   ,
   
   "root"
   
   ,
   
   ""
   
   )
   
   or die
   
   (
   
   mysql_error
   
   (
   
   )
   
   )
   
   ;
   
4. //select database
   
5. mysql_select_db
   
   (
   
   "studentdb"
   
   )
   
   or die
   
   (
   
   mysql_error
   
   (
   
   )
   
   )
   
   ;
   
6. // Retrieve all the data from the "tblstudent" table
   
7. $result
   
   =
   
   mysql_query
   
   (
   
   "SELECT * FROM tblstudent"
   
   )
   
   or die
   
   (
   
   mysql_error
   
   (
   
   )
   
   )
   
   ;
   
8. // store the record of the "tblstudent" table into $row
   
9. 
   
10. while
    
    (
    
    $row
    
    =
    
    mysql_fetch_array
    
    (
    
    $result
    
    )
    
    )
    
    {
    
11. // Print out the contents of the entry
    
12. echo
    
    '<tr>'
    
    ;
    
13. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'firstname'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
14. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'lastname'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
15. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'email'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
16. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'phone'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
17. }
    
18. ?>
    

And the out output should look like as shown below.


This time, we’re going to use a "zebra-stripped" CSS class defined in the associated bootstrap css file.
Now let's modify our code. Instead of using the table class we change it into a table-striped class. And our code now will be same as shown below.

1. <!DOCTYPE html>
   
2. 
   
3. <html lang="en">
   
4. <head>
   
5. <meta charset="utf-8">
   
6. <meta content="width=device-width, initial-scale=1.0" name="viewport">
   
7. <meta content="" name="description">
   
8. <meta content="" name="author">
   
9. <link href="" rel="shortcut icon">
   
10. 
    
11. <title>List of Student</title><!-- Bootstrap core CSS -->
    
12. <link href="css/bootstrap.css" rel="stylesheet">
    
13. </head>
    
14. 
    
15. <body>
    
16. <div class="container">
    
17. <table class="table table-striped">
    
18. <thead>
    
19. <tr>
    
20. <th>Firstname</th>
    
21. 
    
22. <th>Lastname</th>
    
23. 
    
24. <th>Email</th>
    
25. 
    
26. <th>Phone</th>
    
27. </tr>
    
28. </thead>
    
29. 
    
30. <tbody>
    
31. <?php
    
32. //set up mysql connection
    
33. mysql_connect
    
    (
    
    "localhost"
    
    ,
    
    "root"
    
    ,
    
    ""
    
    )
    
    or die
    
    (
    
    mysql_error
    
    (
    
    )
    
    )
    
    ;
    
34. //select database
    
35. mysql_select_db
    
    (
    
    "studentdb"
    
    )
    
    or die
    
    (
    
    mysql_error
    
    (
    
    )
    
    )
    
    ;
    
36. // Retrieve all the data from the "tblstudent" table
    
37. $result
    
    =
    
    mysql_query
    
    (
    
    "SELECT * FROM tblstudent"
    
    )
    
    or die
    
    (
    
    mysql_error
    
    (
    
    )
    
    )
    
    ;
    
38. // store the record of the "tblstudent" table into $row
    
39. 
    
40. while
    
    (
    
    $row
    
    =
    
    mysql_fetch_array
    
    (
    
    $result
    
    )
    
    )
    
    {
    
41. // Print out the contents of the entry
    
42. echo
    
    '<tr>'
    
    ;
    
43. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'firstname'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
44. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'lastname'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
45. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'email'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
46. echo
    
    '<td>'
    
    .
    
    $row
    
    [
    
    'phone'
    
    ]
    
    .
    
    '</td>'
    
    ;
    
47. }
    
48. ?>
    
49. 
    
50. </tbody>
    
51. 
    
52. <tbody></tbody>
    
53. </table>
    
54. </div><!-- /container -->
    
55. </body>
    
56. </html>
    

Then the output should look like as shown below.


That's it for now folks, thanks for reading.

If you want to see more of my works, new Source Code or Application and Tutorials Just click here.

Download