In this tutorial, we will build a CRUD (Create, Read, Update, Delete) application using PHP, MySQL, and Bootstrap 5. This guide is specially curated for curious students or beginners. It is perfect for those who want to get hands-on with PHP. You will build a basic yet functional web application.
Project Features
Feature | Description |
Language | PHP 8.3.19 |
Database | MySQL |
Framework | Bootstrap 5 |
Functionality | Create,Read,Update,Delete |
Setting up the Database
Method 1 – Manually via phpMyAdmin
Open XAMPP and start Apache and MySQL.
Go to: http://localhost/phpmyadmin
Create a new database named CRUD
.
Inside the CRUD
database, create a new table named employees
.
Add the following fields:
id
(INT, AUTO_INCREMENT, PRIMARY KEY)
firstname
( VARCHAR(100) )
lastname
( VARCHAR(100) )
email
( VARCHAR(100) )
phone
( VARCHAR(15) )
i. First open your XAMPP server. Then Start Apache or MySQL Access phpMyAdmin
Open the browser and go to:
👉 http://localhost/phpmyadmin
ii. Create a MySQL database named CRUD and a table employees
:
iii. Here is your create table name. employees
iv. Then setup the column or, as you say, field names
Method 2 – Using SQL Query
SQL
CREATE DATABASE CRUD;
USE CRUD;
CREATE TABLE employees (
id INT AUTO_INCREMENT PRIMARY KEY,
firstname VARCHAR(100) NOT NULL,
lastname VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL,
phone VARCHAR(15) NOT NULL
);
Creating the Application Files
Go to C:\xampp\htdocs\
and create a folder called CRUD-APPLICATION
. Inside it, create the following files:
db.php
– Database connection scriptindex.php
– To display all employeescreate.php
– To add new employeeedit.php
– To update employee datadelete.php
– To delete employee records
Also, create a folder assets
and add the bootstrap.min.css
file for styling.if you ommit this Assets you can ommit this
/CRUD APPLICATION
├── db.php
├── index.php // Read (view all)
├── Create.php // Create
├── edit.php // Update
├── delete.php // Delete
└── assets/
└── bootstrap.min.css
db.php
Set up a database connection. This is the important setup for the database connection. It will help us connect with database tables. We create a file named db.php. In the below file, you see The variables store the database connection parameters. Like, $host, $user, $pass, and $db in these variables. We store the important server information.
The line $conn = new mysqli($host, $user, $pass, $db); creates a new instance of the mysqli
class. It connects to the MySQL server using the specified credentials. or this condition if ($conn->connect_error) {
die(“Connection failed: ” . $conn->connect_error);
} Is checking the connection. If the connection is not successful, then show the error. If you want this DB code, use describes on your page, but we put this in the file DB.PHP that will be reusable, providing us a centralized connection. This approach is also easy to manage, and we handle the connection-related errors.
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'CRUD';
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
index.php – Read All Records
This PHP page is only for the main user interface. There is a show. The main table here is showing the table, I mean the employee list. Also from here, we fetch the user details. You see how We set up the CRUD application UI with PHP step-by-step. First, we connect the DB in the head. We set up the title Employee List. We connect the Bootstrap CDN CSS. In the body, we give the link to the add page. You can also delete or edit in the particular rows in the table. This page function is Read Here SQL Query Used: SELECT * FROM employees.
<?php include 'db.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee List</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
<h2>Employee List</h2>
<a href="Create.php" class="btn btn-primary mb-2">Add Employee</a>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$result = $conn->query("SELECT * FROM employees");
while($row = $result->fetch_assoc()):
?>
<tr>
<td><?= $row['id'] ?></td>
<td><?= $row['firstname'] ?></td>
<td><?= $row['lastname'] ?></td>
<td><?= $row['email'] ?></td>
<td><?= $row['phone'] ?></td>
<td>
<a href="edit.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-warning">Edit</a>
<a href="delete.php?id=<?= $row['id'] ?>" class="btn btn-sm btn-danger" onclick="return confirm('Delete this record?')">Delete</a>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</body>
</html>
Create.php – Create Record
This is the page of add. Here We submit the user details like first name, last name, email, or phone. You see the query of Add user here. We used the SQL query INSERT INTO.
<?php include 'db.php'; ?>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$conn->query("INSERT INTO employees (firstname, lastname, email, phone) VALUES ('$fname', '$lname', '$email', '$phone')");
header("Location: index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Employee</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
<h2>Add New Employee</h2>
<form method="POST">
<div class="mb-2"><input type="text" name="firstname" class="form-control" placeholder="First Name" required></div>
<div class="mb-2"><input type="text" name="lastname" class="form-control" placeholder="Last Name" required></div>
<div class="mb-2"><input type="email" name="email" class="form-control" placeholder="Email" required></div>
<div class="mb-2"><input type="text" name="phone" class="form-control" placeholder="Phone" required></div>
<button class="btn btn-success" type="submit">Save</button>
<a href="index.php" class="btn btn-secondary">Back</a>
</form>
</body>
</html>
edit.php – Update Record
In this edit page, we update the existing records. Here we used the SQL query UPDATE.
<?php include 'db.php'; ?>
<?php
$id = $_GET['id'];
$result = $conn->query("SELECT * FROM employees WHERE id=$id");
$row = $result->fetch_assoc();
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fname = $_POST['firstname'];
$lname = $_POST['lastname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$conn->query("UPDATE employees SET firstname='$fname', lastname='$lname', email='$email', phone='$phone' WHERE id=$id");
header("Location: index.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edit Employee</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
<h2>Edit Employee</h2>
<form method="POST">
<div class="mb-2"><input type="text" name="firstname" class="form-control" value="<?= $row['firstname'] ?>" required></div>
<div class="mb-2"><input type="text" name="lastname" class="form-control" value="<?= $row['lastname'] ?>" required></div>
<div class="mb-2"><input type="email" name="email" class="form-control" value="<?= $row['email'] ?>" required></div>
<div class="mb-2"><input type="text" name="phone" class="form-control" value="<?= $row['phone'] ?>" required></div>
<button class="btn btn-primary" type="submit">Update</button>
<a href="index.php" class="btn btn-secondary">Cancel</a>
</form>
</body>
</html>
delete.php – Delete Record
Here in this code, we write delete code in PHP. Here, we delete the records. Here, we used the SQL query DELETE.
<?php include 'db.php'; ?>
<?php
$id = $_GET['id'];
$conn->query("DELETE FROM employees WHERE id=$id");
header("Location: index.php");
?>
Summary Or Conclusion
So we finally completed our PHP Bootstrap CRUD application. This is an easy project using PHP. Here, we need some improvements. These include form validation, using Ajax datatables, or jQuery confirm success messages. In this blog, we mention or create this advanced code. If you are interested in learning more with Codex, you can also check those articles to create advanced applications. If you find any bugs or errors, please inform me for future improvements. You join or contact me in the comments or reach out through the contact page for specific inquiries.
🔗 Download the Project from GitHub
This project is open source and available on my GitHub page. You can freely download, use, or contribute to improve it. I regularly update my repositories with beginner-friendly projects and code samples.
👉 Visit: GitHub – View & Download the PHP Bootstrap CRUD Project
Everyone loves what you guys are usually up too.
This sort of clever work and reporting! Keep up the terrific works guys I’ve included you guys to our blogroll.
I don’t even know how I ended up here, but I thought this post was
good. I don’t know who yoou are but certainly you are going to
a famous blogger if you are not already 😉 Cheers! http://Boyarka-Inform.com