Build PHP CRUD App with MySQL and Bootstrap 5 (2025 Step-by-Step Guide)

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.

CRUD Application

Project Features

FeatureDescription
LanguagePHP 8.3.19
DatabaseMySQL
Framework
Bootstrap 5
FunctionalityCreate,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:

create Database
create Database

iii. Here is your create table name. employees

create table in the database

iv. Then setup the column or, as you say, field names

database  table fieldname
database table fieldname

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 script
  • index.php – To display all employees
  • create.php – To add new employee
  • edit.php – To update employee data
  • delete.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

2 thoughts on “Build PHP CRUD App with MySQL and Bootstrap 5 (2025 Step-by-Step Guide)”

  1. youtube downloader for windows

    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.

Leave a Comment

Your email address will not be published. Required fields are marked *