In this tutorial, you will learn how to create simple crud applications in PHP using MySQL and Bootstrap 5.
This tutorial shows how to make simple crud (create, read, update, delete) in PHP using MySQL and Bootstrap, Also you can download free source code of simple crud operations in php using mysql source code. Here is the link for downloading free source code from github of the crud operation application using PHP MySQL and bootstrap.
How to Create Simple CRUD operations in PHP using MySQL Bootstrap 5?
Here are steps to create simple crud operation application:
Step 1 – Create a Database
First of all, you need to create a database. So go to PHPMyAdmin and create a new database name my_database.
Step 2 – Create a New Table
Now you need to create a table named users. So go to PHPMyAdmin and run the below SQL query for creating a table in database:
CREATE TABLE `users` ( `id` bigint(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `name` varchar(255) DEFAULT NULL, `email` varchar(255) DEFAULT NULL, `mobile` varchar(255) DEFAULT NULL ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Step 3 – Create Database Connection File
To create a new folder named php-crud, create a new file name connection.php in it, and then add the following code to connect MySQL database with your PHP applications:
<?php
/* Database credentials. Assuming are running MySQL
server with default setting (user 'root' with no password) */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'my_database');
/* Attempt to connect to MySQL database */
$conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Check connection
if($conn === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>
Step 4 – Import jQuery and Bootstrap 5
Next, you need to create one file named head.php and update all the CSS and js file paths inside this file:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
Step 5 – Insert form data into database
To create a new file name create.php file to perform an insert data operation in it.
<?php
require_once "connection.php";
if(isset($_POST['save']))
{
$name = $_POST['name'];
$mobile = $_POST['mobile'];
$email = $_POST['email'];
$sql = "INSERT INTO users (name,mobile,email)
VALUES ('$name','$mobile','$email')";
if (mysqli_query($conn, $sql)) {
header("location: index.php");
exit();
} else {
echo "Error: " . $sql . "
" . mysqli_error($conn);
}
mysqli_close($conn);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Record</title>
<?php include "head.php"; ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>Create Record</h2>
</div>
<p>Please fill this form and submit to add employee record to the database.</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" value="" maxlength="50" required="">
</div>
<div class="form-group ">
<label>Email</label>
<input type="email" name="email" class="form-control" value="" maxlength="30" required="">
</div>
<div class="form-group">
<label>Mobile</label>
<input type="mobile" name="mobile" class="form-control" value="" maxlength="12" required="">
</div>
<input type="submit" class="btn btn-primary" name="save" value="submit">
<a href="index.php" class="btn btn-default">Cancel</a>
</form>
</div>
</div>
</div>
</body>
</html>
Step 6 – Update form data into database
Now you can create a new file name update.php and update the below code into the file.
The below code is used to retrieve and update data from the MySQL database in PHP with bootstrap form.
<?php
// Include database connection file
require_once "connection.php";
if(count($_POST)>0) {
mysqli_query($conn,"UPDATE users set name='" . $_POST['name'] . "', mobile='" . $_POST['mobile'] . "' ,email='" . $_POST['email'] . "' WHERE id='" . $_POST['id'] . "'");
header("location: index.php");
exit();
}
$result = mysqli_query($conn,"SELECT * FROM users WHERE id='" . $_GET['id'] . "'");
$row= mysqli_fetch_array($result);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Update Record</title>
<?php include "head.php"; ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>Update Record</h2>
</div>
<p>Please edit the input values and submit to update the record.</p>
<form action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>" method="post">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" value="<?php echo $row["name"]; ?>" maxlength="50" required="">
</div>
<div class="form-group ">
<label>Email</label>
<input type="email" name="email" class="form-control" value="<?php echo $row["email"]; ?>" maxlength="30" required="">
</div>
<div class="form-group">
<label>Mobile</label>
<input type="mobile" name="mobile" class="form-control" value="<?php echo $row["mobile"]; ?>" maxlength="12"required="">
</div>
<input type="hidden" name="id" value="<?php echo $row["id"]; ?>"/>
<input type="submit" class="btn btn-primary" value="Submit">
<a href="index.php" class="btn btn-default">Cancel</a>
</form>
</div>
</div>
</div>
</body>
</html>
Step 7 – Retrieve and Display List
Next step, you will create a new file name index.php, and update the below code in the index.php file to display all data from the database table to HTML table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Retrieve Or Fetch Data From MySQL Database Using PHP With Boostrap</title>
<?php include "head.php"; ?>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<div class="page-header clearfix">
<h2 class="pull-left">Users List</h2>
<a href="create.php" class="btn btn-success pull-right">Add New User</a>
</div>
<?php
include_once 'connection.php';
$result = mysqli_query($conn,"SELECT * FROM users");
?>
<?php
if (mysqli_num_rows($result) > 0) {
?>
<table class='table table-bordered table-striped'>
<tr>
<td>Name</td>
<td>Email id</td>
<td>Mobile</td>
<td>Action</td>
</tr>
<?php
$i=0;
while($row = mysqli_fetch_array($result)) {
?>
<tr>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo ($row["mobile"])?($row["mobile"]):('N/A'); ?></td>
<td><a href="update.php?id=<?php echo $row["id"]; ?>" title='Update Record'><span class='glyphicon glyphicon-pencil'></span></a>
<a href="delete.php?id=<?php echo $row["id"]; ?>" title='Delete Record'><i class='material-icons'><span class='glyphicon glyphicon-trash'></span></a>
</td>
</tr>
<?php
$i++;
}
?>
</table>
<?php
}
else{
echo "No result found";
}
?>
</div>
</div>
</div>
</body>
</html>
The above code is used to retrieve or get data from the MySQL database in PHP. Additionally, you will display the fetched data in a bootstrap HTML table.
Step 8 – Delete data into database
In the last step, you need to create a one file name delete.php and update the below code into delete.php file.
<?php
include_once 'connection.php';
$sql = "DELETE FROM users WHERE id='" . $_GET["id"] . "'";
if (mysqli_query($conn, $sql)) {
header("location: index.php");
exit();
} else {
echo "Error deleting record: " . mysqli_error($conn);
}
mysqli_close($conn);
?>
The above code is used to delete data from the MySQL database in PHP.
Conclusion
PHP MySQL crud application with bootstrap. In this tutorial, you have learned step by step how you can create simple crud application in PHP using MySQL and bootstrap.
This is a very basic and easy example of crud (create, read, update, delete) in PHP with MySQL and bootstrap.
Recommended PHP Tutorials
If you have any questions or thoughts to share, use the comment form below to reach us.
