Creating an Interactive CRUD Table with PHP, MySQL

Last Updated: January 15, 2026

In web development, the ability to perform basic CRUD Table (Create, Read, Update, Delete) operations on a database is fundamental. This article will guide you through the process of creating an interactive table using PHP, MySQL, and Bootstrap—a powerful combination that allows for efficient data manipulation and a visually appealing user interface.

Table of Contents

Prerequisites:

Before you begin, ensure you have the following:

A web server with PHP and MySQL installed.
Basic knowledge of PHP and MySQL.
Bootstrap library included in your project.

Step 1: Database Setup

Start by creating a MySQL database and a table to store your data. For example:

CREATE DATABASE IF NOT EXISTS `crud_example`;
USE `crud_example`;
CREATE TABLE IF NOT EXISTS `items` (
    `id` INT AUTO_INCREMENT PRIMARY KEY,
    `name` VARCHAR(255) NOT NULL,
    `description` TEXT,
    `price` DECIMAL(10, 2) NOT NULL
);

Step 2: PHP Connection

Create a PHP file to connect to the database. Save it as db.php:

<?php
$servername = "your_mysql_server";
$username = "your_mysql_username";
$password = "your_mysql_password";
$database = "crud_example";
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>

Step 3: Bootstrap Integration

Include Bootstrap CSS and JS files in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>CRUD Table Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Your CRUD Table Goes Here -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Step 4: Create the CRUD Table

Now, let’s create the actual CRUD table using PHP. Save this file as index.php:

<?php
include('db.php');
// Retrieve data from the database
$result = $conn->query("SELECT * FROM items");
echo '
<div class="container mt-5">
    <h2 class="mb-4">CRUD Table Example</h2>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Description</th>
                <th>Price</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
';
// Display data in the table
while ($row = $result->fetch_assoc()) {
    echo '
            <tr>
                <td>' . $row['id'] . '</td>
                <td>' . $row['name'] . '</td>
                <td>' . $row['description'] . '</td>
                <td>' . $row['price'] . '</td>
                <td>
                    <a href="edit.php?id=' . $row['id'] . '" class="btn btn-warning btn-sm">Edit</a>
                    <a href="delete.php?id=' . $row['id'] . '" class="btn btn-danger btn-sm">Delete</a>
                </td>
            </tr>
    ';
}
echo '
        </tbody>
    </table>
</div>
';
$result->free();
$conn->close();
?>

Step 5: Edit and Delete Pages

Create separate PHP files (edit.php and delete.php) for handling edit and delete operations.

edit.php for editing records.
delete.php for deleting records.

Conclusion:

Congratulations! You’ve just created a simple CRUD table using PHP, MySQL, and Bootstrap. This example provides a solid foundation for building more complex applications, and you can further enhance it with features like form validation, authentication, and additional styling to meet your specific requirements. Happy coding!

Demo

Creating an Interactive CRUD Table with PHP, MySQL, and Bootstrap