Bootstrap PHP

How to use bootstrap tables to Display data from MySQL using PHP

bootstrap tables
Written by Deepak Raj

In this tutorial we will teach you implemention of Bootstrap Tables. as we know Bootstrap is very popular open source project that provides us more option in web desighn. Bootsrap is a CSS based framework that can easily integrated with minimum customization. In web desighn we have a tendency to needed to populated data in structured table manner that can easily be search, sort. Bootstrap Datatable is just like a table that can easily integrated with Bootstrap table styling option.  This article we use PHP to get Data from MySQL Database and will be Displayed in Bootstrap table. You can Create tables with basic styling that has horizontal dividers and small cell padding by just adding the Bootstrap’s class “.table” to the <table> element. and you can create table with alternate background like zebra-stripes by simply adding the class “.table-striped” to the “.table” base class. with bootstrap you can create responsive tables to enable horizontal scrolling on small devices “screen width under 768px”. viewing responsive tables on other devices having screen width larger than 768px, you will not see any diffrence.  To make any table responsive just place the table inside a <div> element and apply the class “.table-responsive” on it.

How to use bootstrap tables to  Display data from MySQL using PHP

Getting Bootsrap

Bootstrap can be Download to your needs from their Getting Started page but i would prefer using the CDN option, because it is faster also it is advised to go through and get yourself accustomed with some bootstrap terms, including common classes. This page also some Examples of how to use Bootstrap classes.

Adding Bootstrap Library

after download bootstrap we need to bootstrap library file in your page and in this step we going to add library file.

<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet">
<link type="text/css" href="css/font-awesome.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>

1-Creating Database

  • Open Phpmyadmin in your Browser
  • Click on Database Tab Display on Top side
  • Give the Database name “test”.
  • After Creating Database Open it.
  • Click on SQL Tab on Top area
  • Copy the Below Source Code and paste it.
  • Then Click on Go.
-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Oct 12, 2016 at 09:38 PM
-- Server version: 10.1.13-MariaDB
-- PHP Version: 7.0.8

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `test`
--

-- --------------------------------------------------------

--
-- Table structure for table `user`
--

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `fname` varchar(255) NOT NULL,
  `lname` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `user`
--

INSERT INTO `user` (`id`, `fname`, `lname`) VALUES
(6, 'Deepak ', 'Raj'),
(7, 'Priyanshu', 'Singh'),
(8, 'Abhi ', 'Singh'),
(9, 'Saddam', 'Khan'),
(10, 'Priya', 'Raj'),
(11, 'Praveen Singh', 'Singh'),
(12, 'Aman', 'Yadav'),
(13, 'Aryan ', 'Singh'),
(14, 'Lucky', 'Yadav'),
(15, 'Mohit ', 'Tiwari'),
(16, 'Pappu', 'Kumar'),
(17, 'Nidhi ', 'Mishra'),
(18, 'Ayesha', 'Singh');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `user`
--
ALTER TABLE `user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=19;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

OR Import DB File

After Downloading the source code extract it in your root folder.

  • Open Phpmyadmin in your Browser
  • Click on Database Tab Display on Top side
  • Give the Database name “test”.
  • After Creating Database Open it.
  • Click on Import Tab on Top area
  • You can Find Db file in  Downloaded source code Select it.
  • Then Click on Go.

2- Creating Database Connection

After import Database File then next step is creating database connection using php copy the below code and save it is as “db.php”.

<?php


$con = mysqli_connect("localhost","root","","test");
 // Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}


?>

3 – Creating Table using Bootstrap

This step we are going to create Bootstrap table and display data from mysql database.

<div class="container">
	<div class="col-md-12">
		<div class="page-header">
			<h1>
				How to use bootstrap tables to  Display data from MySQL using PHP
			</h1>
		</div>


		<div class="panel panel-success">
			<div class="panel-heading "> 
			<span class=""> This Source Code Provided By<br>
			<a href="http://sourcecodessite.com">SourceCodeSite.com</a> </span> 
			 	
			 </div>
						 
			<div class="panel-body">
				<div class="row">
					<div class="col-md-12">
					 
						<table 	id="table"
			                	data-show-columns="true"
 				                data-height="460">
						</table>
		</div>
	</div>
</div>				
</div>
</div>
</div>

4 – Creating jQuery Script for Search, Pegination and More

This step we are going to create script in jQuery for display data, Search data, Pegination and Sort.

<script type="text/javascript">
	
	 var $table = $('#table');
		     $table.bootstrapTable({
			      url: 'list-user.php',
			      search: true,
			      pagination: true,
			      buttonsClass: 'primary',
			      showFooter: true,
			      minimumCountColumns: 2,
			      columns: [{
			          field: 'num',
			          title: '#',
			          sortable: true,
			      },{
			          field: 'first',
			          title: 'Firstname',
			          sortable: true,
			      },{
			          field: 'last',
			          title: 'Lastname',
			          sortable: true,
			          
			      },  ],
 
  			 });

</script>

5 – Getting Data From MySQL Database using PHP

This step we are going to fetch data from mysql database using php.

<?php 
	require 'db.php';
 		
 		$sqltran = mysqli_query($con, "SELECT * FROM user ")or die(mysqli_error($con));
		$arrVal = array();
 		
		$i=1;
 		while ($rowList = mysqli_fetch_array($sqltran)) {
 								 
						$name = array(
								'num' => $i,
 	 		 	 				'first'=> $rowList['fname'],
	 		 	 				'last'=> $rowList['lname']
 	 		 	 			);		


							array_push($arrVal, $name);	
			$i++;			
	 	}
	 		 echo  json_encode($arrVal);		
 

	 	mysqli_close($con);
?>   

Preview

Bootstrap Tables

If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.

About the author

Deepak Raj

Hi, This is Deepak Raj from Sourcecodessite.com.I am a Web Developer, Blogger, Online Instructor and SEO consultant who has been working online for last 4 years and he is running several successful websites on the internet.

6 Comments

  • Dear Colleagues,

    Great program!

    Although I having some trouble because I want to update the width and it is not possible. I also want to customize the font-size and i don´t know how to do it.

    Any help, please,

    thank you

  • Hi,
    Thanks for the tutorial.
    It’s helping me a lot.
    I want to place list-user.php in a seperate folder.
    How can i link to the file in the script?

  • Thanks for the code. How can I add Buttons in the table? I tried it with:
    { class: ‘btn btn-success’, }
    It doesn’t work if I add more than one Button and the Button doesn’t have a description.

  • Hello, this worked for me as expected, thank you very much. Although I have an issue and need suggestion. I wanted to adjust width of the columns they are not aligning properly. I looked into solutions but couldn’t find any. I will be thankful if you can provide any suggestions with the same source code. Thank you again

Leave a Comment