Creating and Populating table with MySQL Data using Twitter Bootstrap framework

Submitted by GeePee on Tuesday, April 21, 2015 - 23:37.
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. table1 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. table2 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. table3 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.
Tags
Twitter Bootstrap table
MYSQL
php

Comments

Submitted by Ashwin Mohan Ram (not verified) on Sat, 08/01/2015 - 20:26

Thanks a lot for sharing this... it was very helpful to me :)

Add new comment

About text formats