How to create a data table in bootstrap PHP and MySQL ?

What is Bootstrap

Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website .  Bootstrap helps web developers build website faster as they don’t need to worry about basic commands and functions.

Bootstrap became popular very quickly, and not without reason. Web designers and web developer like bootstrap because it is flexible and easy to work with. Its main advantages are that it is responsive by design, it maintains wide browser compatibility, it offers consistent design by using re-usable components, and it is very easy to use and quick to learn. Bootstrap can be used with any IDE or editor, and any server side technology and language, from ASP.NET to PHP to Ruby on Rails.

What is bootstrap in a computer :

In computing, the bootstrap means to boot or to load a program into a computer using a much smaller initial program to load in the desired program, which is usually an OS.

What is bootstrap in statistics :

In statistics, bootstrapping describes the process of resampling a data set to create many simulated samples. This approach enables users to calculate standard errors, perform hypothesis testing and construct confidence intervals for different types of sample statistics.

Why use Bootstrap

Following are the main advantage of Bootstrap:

  • Bootstrap is very easy to use. Anybody having basic knowledge of HTML and CSS can use Bootstrap.
  • It facilitates users to develop a responsive website.
  • It is compatible on most of browsers like Chrome, Firefox, Internet Explorer, Safari and Opera etc.

To create a data table in bootstrap PHP and MySQL ?

Now we need to create a Mysql Table from which data will be populated.

CREATE TABLE `Student` (
`id` int(10) NOT NULL auto_increment,
`name` varchar(200) NOT NULL default '',
`department` varchar(200) NOT NULL default '',
);

Source Code

index.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Horizontal form</h2>
  <form class="form-horizontal" action="testinsert.php" method="GET">
    <div class="form-group">
      <label class="control-label col-sm-2" for="id">ID:</label>
      <div class="col-sm-10">
        <input type="id" class="form-control" id="id" placeholder="Enter User ID" name="id">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-10">          
        <input type="name" class="form-control" id="name" placeholder="Enter Name" name="name">
      </div>
    </div>
	<div class="form-group">
      <label class="control-label col-sm-2" for="department">Department:</label>
      <div class="col-sm-10">          
        <input type="detpartment" class="form-control" id="department" placeholder="Enter Department Name" name="department">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </form>
</div>

</body>
</html>

Inserting  the data in table :

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "college";

$id=$_GET["id"];
$name=$_GET["name"];

$department=$_GET["department"];

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

$sql = "INSERT INTO student (ID,NAME,department) VALUES ( '$id','$name','$department')";
if (mysqli_query($conn, $sql)) {
  echo "New record created successfully";
  
} else {
  echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>
<button onclick="history.back()">Go Back</button>

Leave a Reply