☕ PHP AJAX CRUD Tutorial

☕ PHP AJAX CRUD Tutorial —

Hey Developers! 👋

Today, I’m sharing a simple PHP + AJAX CRUD (Create, Read, Update, Delete) tutorial, complete with image upload support and a responsive UI. If you find this helpful, consider supporting me:

👉 Buy Me a Coffee

Let’s dive in!

🔧 Tech Stack Used:

• PHP (without frameworks)

• MySQL

• jQuery + AJAX

• Bootstrap 5

• File upload using move_uploaded_file()

🚀 Step-by-Step: PHP AJAX CRUD with Image Upload

✅ Step 1: Create Database Table

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(100),
  email VARCHAR(100),
  image VARCHAR(255),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

✅ Step 2: Database Connection (db.php)

<?php
$conn = new mysqli("localhost", "root", "", "your_db");
if ($conn->connect_error) die("Connection failed: " . $conn->connect_error);
?>

✅ Step 3: HTML Form (index.php)

<form id="userForm" enctype="multipart/form-data">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required />
  <input type="file" name="image" accept="image/*" />
  <button type="submit">Save</button>
</form>
<div id="userTable"></div>

✅ Step 4: AJAX for Create/Insert

$('#userForm').submit(function(e) {
  e.preventDefault();
  $.ajax({
    url: 'insert.php',
    type: 'POST',
    data: new FormData(this),
    contentType: false,
    processData: false,
    success: function(response) {
      $('#userForm')[0].reset();
      fetchUsers();
    }
  });
});

✅ Step 5: insert.php

<?phpinclude 'db.php';
$name = $_POST['name'];
$email = $_POST['email'];
$image = '';

if ($_FILES['image']['name']) {
  $image = time() . '_' . $_FILES['image']['name'];
  move_uploaded_file($_FILES['image']['tmp_name'], 'uploads/' . $image);
}

$conn->query("INSERT INTO users (name, email, image) VALUES ('$name', '$email', '$image')");

✅ Step 6: Display Data (fetch.php)

<?phpinclude 'db.php';
$res = $conn->query("SELECT * FROM users ORDER BY id DESC");
while ($row = $res->fetch_assoc()) {
  echo "<div>
    <h4>{$row['name']}</h4>
    <p>{$row['email']}</p>
    <img src='uploads/{$row['image']}' width='100'>
    <button class='edit' data-id='{$row['id']}'>Edit</button>
    <button class='delete' data-id='{$row['id']}'>Delete</button>
  </div>";
}

✅ Step 7: Add AJAX for Fetch, Edit, Delete

Write jQuery code to:

• Load all records (fetchUsers())

• Fill form for editing

• Delete user using delete.php

✅ Folder Structure

/project-folder
  ├── db.php
  ├── index.php
  ├── insert.php
  ├── fetch.php
  ├── update.php
  ├── delete.php
  └── /uploads

💛 Liked This? Support My Work

Maintaining tutorials and clean code takes effort. If this helped you or saved time, please consider supporting:

👉 Buy Me a Coffee

Even 1 coffee keeps the server running ☕💻