Creating a simple html table with functionalities to add,delete and update recored using php and
mysql on a xampp server involves several steps.below is a step y step guide to help you to achive
this.
Step 1 :setup xampp
1. Download and install xampp
2. Start xampp apache and mysql
Step 2: create a database
1. Open phpmyadmin
2. Create a database name “test_db”
3. Create a user table by sql tabs and write the following codes
CREATE TABLE users (
id INT(11) AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
email VARCHAR(100) NOT NULL
);
Step 3: create the project structure
1. Create the project folder in htdocs folder of your xampp installation create a folder “crud_app”
2. Create a required file under crud_app folder create the following php file
Index.php
Add.php
Edit.php
Delete.php
Db.php(for database connection)
Step 4:- database connection
Create the file name db.php for database conection and write the following line of code.
<?php
$host = 'localhost';
$user = 'root'; // Default XAMPP username
$pass = ''; // Default XAMPP password
$db = 'test_db';
$conn = new mysqli($host, $user, $pass, $db);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
?>
Step 5:-create the main page
Create “index.php” to display the table and handle adding records. And write the following line of code.
<?php
include 'db.php';
// Add record
if (isset($_POST['add'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$conn->query("INSERT INTO users (name, email) VALUES ('$name', '$email')");
// Fetch records
$result = $conn->query("SELECT * FROM users");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD Application</title>
</head>
<body>
<h1>User Management</h1>
<form method="POST">
<input type="text" name="name" placeholder="Name" required>
<input type="email" name="email" placeholder="Email" required>
<button type="submit" name="add">Add User</button>
</form>
<table border="1">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Actions</th>
</tr>
<?php while ($row = $result->fetch_assoc()): ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td>
<a href="edit.php?id=<?php echo $row['id']; ?>">UPDATE</a>
<a href="delete.php?id=<?php echo $row['id']; ?>">DELETE</a>
</td>
</tr>
<?php endwhile; ?>
</table>
</body>
</html>
Step 6:- create edit/update page
Create edit.php to handle updating records and write the following line of code.
<?php
include 'db.php';
// Fetch record for editing
if (isset($_GET['id'])) {
$id = $_GET['id'];
$result = $conn->query("SELECT * FROM users WHERE id=$id");
$user = $result->fetch_assoc();
// Update record
if (isset($_POST['update'])) {
$name = $_POST['name'];
$email = $_POST['email'];
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
// Handle form submission
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$name = $_POST['name'];
$email = $_POST['email'];
$conn->query("UPDATE users SET name = '$name', email = '$email' WHERE id = $id");
header("Location: index.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit User</title>
</head>
<body>
<h1>Edit User</h1>
<form method="POST">
Name: <input type="text" name="name" value="<?php echo $user['name']; ?>" required><br>
Email: <input type="email" name="email" value="<?php echo $user['email']; ?>" required><br>
<input type="submit" value="Update User">
</form>
<a href="index.php">Back to User List</a>
</body>
</html>
<?php $conn->close(); ?>
Step 7:-create delete page
Create “delete.php “ to handle deleted records and write the following line of code.
<?php
include 'db.php';
// Delete record
if (isset($_GET['id'])) {
$id = $_GET['id'];
$conn->query("DELETE FROM users WHERE id=$id");
header('Location: index.php');
?>
Step 8:- test your application
1. Open your web browser and go to https://localhost/crud_app/index.php
2. You should see the form to add users and a table displaying existing user
3. Test adding,editing and deleting users to insure everything works as expected
This setup provides the basic crud application using php and mysql on a xampp server you can expand up
on this by adding validation styling and more advanced feature as needed.
