CRUD Data Table for Database with Modal Form | Insert Data Using PHP

bySoeng Souy

0

Open the config.php file and paste the below code in it.

Remember to include config files in all PHP files with the help of the include_once() function. It is the main file that holds a database connection. So without a DB connection, you can not perform any DB operation into a database.

1.index.html

In this tutorial, I am going to show you how you can create a simple CRUD in Bootstrap 4 in PHP with search functionality.

What is CRUD?

Create a simple database table.
Reading / Fetch a database table data.
Update database table data.
Delete database table data.

Into your main folder create below folders and files.

include [Folder].
insert_data.php [file].
connect_db.php [file].
index.php [file].

Download the Database class from here and paste it into an included folder.

How to set up the config file.

Open the config.php file and paste the below code in it.

Remember to include config files in all PHP files with the help of the include_once() function. It is the main file that holds a database connection. So without a DB connection, you can not perform any DB operation into a database.

**1.db [file].**

CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(64) NOT NULL,
`useremail` varchar(128) NOT NULL,
`address` varchar(150) NOT NULL,
`userphone` varchar(24) NOT NULL,
`dt` timestamp NOT NULL DEFAULT current_timestamp()
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

**2.connect_db.php [file].**

$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = "employee";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if($conn === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

**3.insert_data.php [file].**

<?php
include_once 'connect_db.php';
$success = "";
if(isset($_POST['add']))
{
$username = $_POST['username'];
$useremail = $_POST['useremail'];
$address = $_POST['address'];
$phone = $_POST['phone'];

$sql = "INSERT INTO users (username,useremail,address, userphone)
VALUES ('$username','$useremail','$address','$phone')";
if (mysqli_query($conn, $sql))
{
$success = "New record created successfully !";
}
else
{
echo "Error: " . $sql . " " . mysqli_error($conn);
}
mysqli_close($conn);
}
?>

**4.index.php [file].**

<?php
include_once 'insert_data.php';
include 'connect_db.php';
$result = mysqli_query($conn,"SELECT * FROM users");
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap CRUD Data Table for Database with Modal Form</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="styles.css">

</head>
<body>
<br>
<br>
<h3 class="text-center text-success" id="message"><?php echo $success; ?></h3>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Employees</b></h2>
</div>
<div class="col-sm-6">
<a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"><i class="material-icons"></i> <span>Add New Employee</span></a>
<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>
</div>
</div>
</div>

<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>Name</th>
<th>Email</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td><?php echo $row["useremail"]; ?></td>
<td><?php echo $row["useremail"]; ?></td>
<td><?php echo $row["address"]; ?></td>
<td><?php echo $row["userphone"]; ?></td>
<td>
<a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit"></i></a>
<a href="#deleteEmployeeModal" class="delete" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Delete"></i></a>
</td>
</tr>
<?php
}
?>
<?php

// close connection database
mysqli_close($conn);
?>
</tbody>
</table>
<div class="clearfix">
<div class="hint-text">Showing <b>5</b> out of <b>100</b> entries</div>
<ul class="pagination">
<li class="page-item disabled"><a href="#">Previous</a></li>
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item active"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</ul>
</div>
</div>
</div>

<div id="addEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" action="index.php">
<div class="modal-header">
<h4 class="modal-title">Add Employee</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="username" placeholder="Enter name" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="useremail" placeholder="Enter email" required>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" name="address" placeholder="Enter Address" required></textarea>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="phone" placeholder="Enter phone" required>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-success" name="add" value="Add">
</div>
</form>
</div>
</div>
</div>

<div id="editEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Edit Employee</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" required>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" required></textarea>
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-info" value="Save">
</div>
</form>
</div>
</div>
</div>

<div id="deleteEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form>
<div class="modal-header">
<h4 class="modal-title">Delete Employee</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete these Records?</p>
<p class="text-warning"><small>This action cannot be undone.</small></p>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-danger" value="Delete">
</div>
</form>
</div>
</div>
</div>

<script>
$(document).ready(function()
{
setTimeout(function()
{
$('#message').hide();
},3000);
});
</script>

<script src="javascript.js"></script>

</body>
</html>

**5. javascript [file].**

$(document).ready(function()
{
// Activate tooltip
$('[data-toggle="tooltip"]').tooltip();

// Select/Deselect checkboxes
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function()
{
if(this.checked){
checkbox.each(function()
{
this.checked = true;
});
}
else
{
checkbox.each(function()
{
this.checked = false;
});
}
});
checkbox.click(function()
{
if(!this.checked)
{
$("#selectAll").prop("checked", false);
}
});

});

**6. styles.css [file].**

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

body {
color: #566787;
background: #f5f5f5;
font-family: 'Varela Round', sans-serif;
font-size: 13px;
}
.table-wrapper {
background: #fff;
padding: 20px 25px;
margin: 30px 0;
border-radius:1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.247);
}
.table-title {
padding-bottom: 15px;
background: linear-gradient(40deg, #2096ff, #05ffa3) !important;
color: #fff;
padding: 16px 30px;
margin: -20px -25px 10px;
border-radius: 1px 1px 0 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.247);
}
.table-title h2 {
margin: 5px 0 0;
font-size: 24px;
}
.table-title .btn-group {
float: right;
}
.table-title .btn {
color: #fff;
float: right;
font-size: 13px;
border: none;
min-width: 50px;
border-radius: 1px;
border: none;
outline: none !important;
margin-left: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.247);
}
.table-title .btn i {
float: left;
font-size: 21px;
margin-right: 5px;
}
.table-title .btn span {
float: left;
margin-top: 2px;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
padding: 12px 15px;
vertical-align: middle;
}
table.table tr th:first-child {
width: 60px;
}
table.table tr th:last-child {
width: 100px;
}
table.table-striped tbody tr:nth-of-type(odd) {
background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
background: #f5f5f5;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table td:last-child i {
opacity: 0.9;
font-size: 22px;
margin: 0 5px;
}
table.table td a {
font-weight: bold;
color: #566787;
display: inline-block;
text-decoration: none;
outline: none !important;
}
table.table td a:hover {
color: #2196F3;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #F44336;
}
table.table td i {
font-size: 19px;
}
table.table .avatar {
border-radius: 1px;
vertical-align: middle;
margin-right: 10px;
}
.pagination {
float: right;
margin: 0 0 5px;
}
.pagination li a {
border: none;
font-size: 13px;
min-width: 30px;
min-height: 30px;
color: #999;
margin: 0 2px;
line-height: 30px;
border-radius: 1px !important;
text-align: center;
padding: 0 6px;
}
.pagination li a:hover {
color: #666;
}
.pagination li.active a, .pagination li.active a.page-link {
background: #03A9F4;
}
.pagination li.active a:hover {
background: #0397d6;
}
.pagination li.disabled i {
color: #ccc;
}
.pagination li i {
font-size: 16px;
padding-top: 6px
}
.hint-text {
float: left;
margin-top: 10px;
font-size: 13px;
}
/* Custom checkbox /
.custom-checkbox {
position: relative;
}
.custom-checkbox input[type="checkbox"] {
opacity: 0;
position: absolute;
margin: 5px 0 0 3px;
z-index: 9;
}
.custom-checkbox label:before{
width: 18px;
height: 18px;
}
.custom-checkbox label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
background: white;
border: 1px solid #bbb;
border-radius: 1px;
box-sizing: border-box;
z-index: 2;
}
.custom-checkbox input[type="checkbox"]:checked + label:after {
content: '';
position: absolute;
left: 6px;
top: 3px;
width: 6px;
height: 11px;
border: solid #000;
border-width: 0 3px 3px 0;
transform: inherit;
z-index: 3;
transform: rotateZ(45deg);
}
.custom-checkbox input[type="checkbox"]:checked + label:before {
border-color: #03A9F4;
background: #03A9F4;
}
.custom-checkbox input[type="checkbox"]:checked + label:after {
border-color: #fff;
}
.custom-checkbox input[type="checkbox"]:disabled + label:before {
color: #b8b8b8;
cursor: auto;
box-shadow: none;
background: #ddd;
}
/ Modal styles */
.modal .modal-dialog {
max-width: 400px;
}
.modal .modal-header, .modal .modal-body, .modal .modal-footer {
padding: 20px 30px;
}
.modal .modal-content {
border-radius: 1px;
}
.modal .modal-footer {
background: #ecf0f1;
border-radius: 0 0 1px 1px;
}
.modal .modal-title {
display: inline-block;
}
.modal .form-control {
border-radius: 1px;
box-shadow: none;
border-color: #dddddd;
}
.modal textarea.form-control {
resize: vertical;
}
.modal .btn {
border-radius: 1px;
min-width: 100px;
}
.modal form label {
font-weight: normal;

}

Tags: PHP

CRUD Data Table for Database with Modal Form | Insert Data Using PHP

1.index.html

What is CRUD?

How to set up the config file.

**1.db [file].**

CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(64) NOT NULL,
`useremail` varchar(128) NOT NULL,
`address` varchar(150) NOT NULL,
`userphone` varchar(24) NOT NULL,
`dt` timestamp NOT NULL DEFAULT current_timestamp()
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

**2.connect_db.php [file].**

$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = "employee";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if($conn === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

**3.insert_data.php [file].**

**4.index.php [file].**

**5. javascript [file].**

**6. styles.css [file].**

Post a Comment

Contact Form

CRUD Data Table for Database with Modal Form | Insert Data Using PHP

1.index.html

What is CRUD?

How to set up the config file.

1.db [file].

CREATE TABLE `users` ( `id` int(11) NOT NULL, `username` varchar(64) NOT NULL, `useremail` varchar(128) NOT NULL, `address` varchar(150) NOT NULL, `userphone` varchar(24) NOT NULL, `dt` timestamp NOT NULL DEFAULT current_timestamp()) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

2.connect_db.php [file].

$servername = 'localhost'; $username = 'root'; $password = ''; $dbname = "employee"; $conn=mysqli_connect($servername,$username,$password,"$dbname"); if($conn === false) { die("ERROR: Could not connect. " . mysqli_connect_error()); }?>

3.insert_data.php [file].

4.index.php [file].

5. javascript [file].

6. styles.css [file].

Post a Comment

Contact Form

**1.db [file].**

CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(64) NOT NULL,
`useremail` varchar(128) NOT NULL,
`address` varchar(150) NOT NULL,
`userphone` varchar(24) NOT NULL,
`dt` timestamp NOT NULL DEFAULT current_timestamp()
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

**2.connect_db.php [file].**

$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = "employee";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if($conn === false)
{
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>

**3.insert_data.php [file].**

**4.index.php [file].**

**5. javascript [file].**

**6. styles.css [file].**