PHP Retrieve data from MySQL database and Display in HTML Bootstrap table format

Code to Get Values from db using PHP and show into Table format Rows-Columns one by one.

Table format is one of the most popular and easy way to represent any data on user screen in PHP. Table is a part of HTML code and in this tutorial we are using table with PHP code. So it will automatically create the rows and columns one by one and set values inside them individually. This type of table is completely filled up with dynamic data directly coming from MySQL db server and one more thing we are using Bootstrap classes to create this table because it will automatically make our table format responsive. So here is the complete step by step tutorial for PHP Retrieve data from MySQL database and Display in HTML Bootstrap table.

android-project-download-code-button

Note: Please connect your computer to internet while testing this project because we are using Bootstrap online CSS and JavaScript files in this project and they cannot load properly without internet connection.

PHP Retrieve data from MySQL database and Display in HTML Bootstrap table.

Code for show-mysql-data.php file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Show MySQL DB Data</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

<div class="container">
 
<table class="table table-bordered">
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Email</th>
 <th>Phone Number</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <?php
 include("DBConfig.php");
 
 $result = mysql_query("SELECT * FROM test_demo");
 
 while($test = mysql_fetch_array($result))
 {
 $id = $test['id']; 
 echo"<td>".$test['id']."</td>";
 echo"<td>".$test['name']."</td>";
 echo"<td>".$test['email']."</td>";
 echo"<td>".$test['phone_number']."</td>"; 
 echo "</tr>";
 }
 mysql_close($conn);
 ?>
</table>

</div>
</body>
</html>

Code for DBConfig.php file.

 <?php

//Define your host here.
$hostname = "localhost";

//Define your database username here.
$username = "root";

//Define your database password here.
$password = "";

//Define your database name here.
$dbname = "test";

 $conn = mysql_connect($hostname, $username, $password);
 
 if (!$conn)
 
 {
 
 die('Could not connect: ' . mysql_error());
 
 }
 
 mysql_select_db($dbname, $conn);


?>

Screenshot :

PHP Retrieve data from MySQL database and Display in HTML Bootstrap table

Click here to download PHP Retrieve data from MySQL database and Display in HTML Bootstrap table project with source code and MySQL db file included.

5 Comments

  1. Hi Juned, thanks for such great tutorials. These are very very useful for newbies like me. I am searching something like, I want to make a news website where items are listed in rows (keeping in mind a mobile view), where in each news row, there will be an image in the left corner and short text in right part. These images and related text will be stored in mysql database. Can you guide me? Because I am zero in php.

  2. Hi Juned. How can I display the database in html form by calling PHP in server using AJAX? I know AJAX can do this, but I don’t know the steps.. Thank you.

  3. Dear Juned,
    The following error appeared when i try to execute the program.
    Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\show-mysql-data.php on line 34.

    May I know is there anything i can change?

    Thank you

  4. Bryan the code is working perfectly i have recently tried.

Leave a Reply

Your email address will not be published. Required fields are marked *