Building a Simple CRUD System with HTML, CSS, jQuery, and PHP

A CRUD application is one of the basic applications in web development that lets users add, read, update, and delete data. This tutorial will walk step by step through how to build a CRUD application using HTML, CSS, jQuery, and PHP.

1. Preparing the HTML Structure

The first step is to create a basic HTML structure that includes a table to display data and a form for adding new data.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple CRUD</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Simple CRUD System</h1>
    <button id="addNew">Add New</button>
    <table id="dataTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <!-- Data will be displayed here -->
        </tbody>
    </table>

    <div id="formContainer" style="display:none;">
        <input type="text" id="nameInput" placeholder="Enter Name">
        <button id="saveButton">Save</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. Adding CSS for an Attractive Look

Next, add a CSS file to improve the look of the table and buttons. Here is an example styles.css:

body {
    font-family: Arial, sans-serif;
    text-align: center;
}

h1 {
    color: #333;
}

table {
    width: 60%;
    margin: 20px auto;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

button {
    padding: 10px;
    color: #fff;
    background-color: #007bff;
    border: none;
    cursor: pointer;
}

#formContainer {
    margin-top: 20px;
}

#addNew {
    margin: 10px;
    background-color: #28a745;
}

3. CRUD Functionality with jQuery

Add jQuery to enable interactive features such as adding and deleting data. Here is an example script.js:

$(document).ready(function() {
    $('#addNew').click(function() {
        $('#formContainer').toggle();
    });

    $('#saveButton').click(function() {
        let name = $('#nameInput').val();
        if (name) {
            $.post('process.php', { action: 'create', name: name }, function(response) {
                $('#dataTable tbody').append(response);
                $('#nameInput').val('');
                $('#formContainer').hide();
            });
        }
    });

    $(document).on('click', '.deleteButton', function() {
        let id = $(this).data('id');
        $.post('process.php', { action: 'delete', id: id }, function() {
            $('#row' + id).remove();
        });
    });
});

4. Connecting with PHP and the Database

Create a process.php file to process data using PHP. Here is an example PHP script:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "crud_db";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($_POST['action'] == 'create') {
    $name = $_POST['name'];
    $sql = "INSERT INTO users (name) VALUES ('$name')";
    if ($conn->query($sql) === TRUE) {
        $id = $conn->insert_id;
        echo "<tr id='row$id'><td>$id</td><td>$name</td><td><button class='deleteButton' data-id='$id'>Delete</button></td></tr>";
    }
}

if ($_POST['action'] == 'delete') {
    $id = $_POST['id'];
    $sql = "DELETE FROM users WHERE id=$id";
    $conn->query($sql);
}

$conn->close();
?>

The code above handles the Create and Delete processes. To implement Read and Update, add extra buttons and scripts to display data from the database and update existing data.

Conclusion

By following the steps above, you have built a simple CRUD application that lets you add, read, update, and delete data. This tutorial is a good foundation for understanding data management using HTML, CSS, jQuery, and PHP.