CRUD Data Table with Modal Form: Insert Data Using PHP

Open the config.php file and insert the following code.

Be sure to include this configuration file in all your PHP scripts using the include_once() function. This file contains the essential database connection setup, and without it, you won’t be able to perform any database operations.

PHP + Bootstrap CRUD Tutorial Overview

  • CRUD: Create, Read, Update, Delete operations on a database table.

  • Database: MySQL table users.

  • Front-end: Bootstrap 3 + jQuery.

  • Back-end: PHP with MySQLi.

1. Database Setup

Run this SQL query to create the users table:

CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(64) NOT NULL, `useremail` varchar(128) NOT NULL, `address` varchar(150) NOT NULL, `userphone` varchar(24) NOT NULL, `dt` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

Note: Added AUTO_INCREMENT PRIMARY KEY to id for proper record management.

2. connect_db.php

<?php $servername = 'localhost'; $username = 'root'; $password = ''; $dbname = 'employee'; $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { die("ERROR: Could not connect. " . mysqli_connect_error()); } ?>

3. insert_data.php

<?php include_once 'connect_db.php'; $success = ""; if (isset($_POST['add'])) { $username = mysqli_real_escape_string($conn, $_POST['username']); $useremail = mysqli_real_escape_string($conn, $_POST['useremail']); $address = mysqli_real_escape_string($conn, $_POST['address']); $phone = mysqli_real_escape_string($conn, $_POST['phone']); $sql = "INSERT INTO users (username, useremail, address, userphone) VALUES ('$username', '$useremail', '$address', '$phone')"; if (mysqli_query($conn, $sql)) { $success = "New record created successfully!"; } else { echo "Error: " . $sql . " " . mysqli_error($conn); } mysqli_close($conn); } ?>

Security tip: Use mysqli_real_escape_string to prevent SQL injection.

4. index.php

<?php include_once 'insert_data.php'; // Handles insert form submission include 'connect_db.php'; $result = mysqli_query($conn, "SELECT * FROM users"); ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap CRUD Data Table for Database with Modal Form</title> <!-- Bootstrap CSS and fonts --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery and Bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" href="styles.css"> </head> <body> <br><br> <h3 class="text-center text-success" id="message"><?php echo $success; ?></h3> <div class="container"> <div class="table-wrapper"> <div class="table-title"> <div class="row"> <div class="col-sm-6"> <h2>Manage <b>Employees</b></h2> </div> <div class="col-sm-6"> <a href="#addEmployeeModal" class="btn btn-success" data-toggle="modal"> <i class="material-icons">&#xE147;</i> <span>Add New Employee</span> </a> <a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"> <i class="material-icons">&#xE15C;</i> <span>Delete</span> </a> </div> </div> </div> <table class="table table-striped table-hover"> <thead> <tr> <th> <span class="custom-checkbox"> <input type="checkbox" id="selectAll"> <label for="selectAll"></label> </span> </th> <th>Name</th> <th>Email</th> <th>Address</th> <th>Phone</th> <th>Actions</th> </tr> </thead> <tbody> <?php while ($row = mysqli_fetch_array($result)) { ?> <tr> <td> <span class="custom-checkbox"> <input type="checkbox" name="options[]" value="<?php echo $row['id']; ?>"> <label></label> </span> </td> <td><?php echo htmlspecialchars($row["username"]); ?></td> <td><?php echo htmlspecialchars($row["useremail"]); ?></td> <td><?php echo htmlspecialchars($row["address"]); ?></td> <td><?php echo htmlspecialchars($row["userphone"]); ?></td> <td> <a href="#editEmployeeModal" class="edit" data-toggle="modal" data-id="<?php echo $row['id']; ?>"> <i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i> </a> <a href="#deleteEmployeeModal" class="delete" data-toggle="modal" data-id="<?php echo $row['id']; ?>"> <i class="material-icons" data-toggle="tooltip" title="Delete">&#xE872;</i> </a> </td> </tr> <?php } mysqli_close($conn); ?> </tbody> </table> <div class="clearfix"> <div class="hint-text">Showing <b>5</b> out of <b>100</b> entries</div> <ul class="pagination"> <li class="page-item disabled"><a href="#">Previous</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item active"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">5</a></li> <li class="page-item"><a href="#" class="page-link">Next</a></li> </ul> </div> </div> </div> <!-- Add Modal HTML --> <div id="addEmployeeModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <form method="post" action="index.php"> <div class="modal-header"> <h4 class="modal-title">Add Employee</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-body"> <div class="form-group"> <label>Name</label> <input type="text" class="form-control" name="username" placeholder="Enter name" required> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" name="useremail" placeholder="Enter email" required> </div> <div class="form-group"> <label>Address</label> <textarea class="form-control" name="address" placeholder="Enter Address" required></textarea> </div> <div class="form-group"> <label>Phone</label> <input type="text" class="form-control" name="phone" placeholder="Enter phone" required> </div> </div> <div class="modal-footer"> <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel"> <input type="submit" class="btn btn-success" name="add" value="Add"> </div> </form> </div> </div> </div> <!-- Edit and Delete Modals can be implemented similarly --> <script> $(document).ready(function(){ setTimeout(function() { $('#message').hide(); }, 3000); // Activate tooltip $('[data-toggle="tooltip"]').tooltip(); // Select/Deselect checkboxes var checkbox = $('table tbody input[type="checkbox"]'); $("#selectAll").click(function() { if (this.checked) { checkbox.each(function() { this.checked = true; }); } else { checkbox.each(function() { this.checked = false; }); } }); checkbox.click(function() { if (!this.checked) { $("#selectAll").prop("checked", false); } }); }); </script> </body> </html>

5. styles.css

body { color: #566787; background: #f5f5f5; font-family: 'Varela Round', sans-serif; font-size: 13px; } .table-wrapper { background: #fff; padding: 20px 25px; margin: 30px 0; border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,.05); } .table-title { padding-bottom: 15px; background: #435d7d; color: #fff; padding: 16px 30px; margin: -20px -25px 10px; border-radius: 3px 3px 0 0; } .table-title h2 { margin: 5px 0 0; font-size: 24px; } .table-title .btn { color: #fff; float: right; font-size: 13px; border: none; min-width: 50px; border-radius: 2px; border: none; outline: none !important; margin-left: 10px; } .table-title .btn:hover, .table-title .btn:focus { color: #7386d5; background: #fff; } .table-title .btn i { float: left; font-size: 21px; margin-right: 5px; } table.table tr th, table.table tr td { border-color: #e9e9e9; padding: 12px 15px; vertical-align: middle; } table.table-striped tbody tr:nth-of-type(odd) { background-color: #fcfcfc; } table.table-striped.table-hover tbody tr:hover { background: #f5f5f5; } .custom-checkbox { position: relative; } .custom-checkbox input[type="checkbox"] { opacity: 0; position: absolute; margin: 5px 0 0 3px; z-index: 9; } .custom-checkbox label { position: relative; padding-left: 25px; cursor: pointer; } .custom-checkbox label:before { content: ''; margin-right: 10px; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 1px solid #bbb; border-radius: 4px; background: #fff; } .custom-checkbox input[type="checkbox"]:checked + label:after { content: ''; position: absolute; left: 6px; top: 9px; width: 6px; height: 11px; border: solid #000; border-width: 0 3px 3px 0; transform: rotate(45deg); } .custom-checkbox input[type="checkbox"]:checked + label:before { border-color: #2aa1c0; background: #2aa1c0; } .pagination { float: right; margin: 0 0 5px; } .pagination li a { border: none; font-size: 13px; min-width: 30px; min-height: 30px; color: #999; margin: 0 2px; line-height: 30px; border-radius: 2px !important; text-align: center; padding: 0 6px; } .pagination li.active a, .pagination li.active a.page-link { background: #03A9F4; } .pagination li.active a:hover { background: #0397d6; } .pagination li a:hover { color: #666; background: #eee; } .hint-text { float: left; margin-top: 10px; font-size: 13px; }

Notes:

  • The Edit and Delete modals and their PHP handlers need to be implemented similarly for full CRUD functionality.

  • All form submissions use POST and should redirect or reload index.php to reflect changes.

  • The demo includes jQuery for checkbox selection and tooltips.

  • Use htmlspecialchars() to avoid XSS vulnerabilities when displaying user input.

  • For real applications, consider using prepared statements (mysqli_prepare) for security.

Souy Soeng

Souy Soeng

Hi there 👋, I’m Soeng Souy (StarCode Kh)
-------------------------------------------
🌱 I’m currently creating a sample Laravel and React Vue Livewire
👯 I’m looking to collaborate on open-source PHP & JavaScript projects
💬 Ask me about Laravel, MySQL, or Flutter
⚡ Fun fact: I love turning ☕️ into code!

Post a Comment

close