Module 9: Live Data Delete කිරීම

පරිශීලකයාට දත්ත මැකීමට ඉඩ සලසමු. වැරදීමකින් දත්ත මැකීම වැළැක්වීමට confirmation modal එකක්ද භාවිතා කරමු.

1. Delete Interface එක (HTML Table & Confirmation Modal)

Users ලා පෙන්වන table එකේ, દરેક row එකට අදාලව "Delete" බොත්තමක් ඇතුළත් කරමු. එම බොත්තම click කල විට, තහවුරු කිරීමේ modal එකක් pop-up විය යුතුය.

ඔබගේ project folder එකේ, live-delete.html නමින් අලුත් file එකක් සාදා පහත HTML කේතය ඇතුලත් කරන්න. 

<!DOCTYPE html>
<html lang="si">
<head>
    <title>Live Data Delete</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-5">
    <h1>User Management</h1>
    <p>Click the "Delete" button on any row to remove a user.</p>

    <div id="messageDiv"></div>
    <div id="userTableDiv">Loading users...</div>

    <!-- Bootstrap Confirmation Modal -->
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this user? This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <!-- This button will trigger the actual deletion -->
                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">Yes, Delete</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="delete-script.js"></script>
</body>
</html>

2. Delete ක්‍රියාවලිය සඳහා JavaScript

මෙම JavaScript කේතය, Delete බොත්තම click කල විට modal එක පෙන්වීම, පරිශීලකයා delete කිරීම තහවුරු කල විට Ajax request එක යැවීම, සහ සාර්ථක වූ විට table එකෙන් row එක ඉවත් කිරීම පාලනය කරයි.

delete-script.js නමින් අලුත් file එකක් සාදා පහත කේතය ඇතුලත් කරන්න.

document.addEventListener('DOMContentLoaded', function() {
    const userTableDiv = document.getElementById('userTableDiv');
    const messageDiv = document.getElementById('messageDiv');
    const deleteConfirmModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
    const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
    let userIdToDelete = null;

    // --- Function to fetch and display users ---
    function fetchUsers() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'fetch-data.php', true);
        xhr.onload = function() {
            if (this.status === 200) {
                const users = JSON.parse(this.responseText);
                let output = `<table class="table table-striped"><thead><tr>
                              <th>ID</th><th>Name</th><th>Email</th><th>Action</th>
                              </tr></thead><tbody>`;
                users.forEach(function(user) {
                    output += `<tr id="user-${user.id}">
                                <td>${user.id}</td>
                                <td>${user.name}</td>
                                <td>${user.email}</td>
                                <td><button class="btn btn-danger btn-delete" data-id="${user.id}">Delete</button></td>
                               </tr>`;
                });
                output += '</tbody></table>';
                userTableDiv.innerHTML = output;
            }
        };
        xhr.send();
    }

    // --- Show confirmation modal when a delete button is clicked ---
    userTableDiv.addEventListener('click', function(e) {
        if (e.target.classList.contains('btn-delete')) {
            userIdToDelete = e.target.getAttribute('data-id');
            deleteConfirmModal.show();
        }
    });

    // --- Send Ajax request when the final delete button is clicked ---
    confirmDeleteBtn.addEventListener('click', function() {
        if (userIdToDelete) {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'delete-data.php', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (this.status === 200) {
                    const response = JSON.parse(this.responseText);
                    messageDiv.innerHTML = `<div class="alert alert-${response.status}">${response.message}</div>`;
                    if (response.status === 'success') {
                        // Remove the user row from the table
                        document.getElementById('user-' + userIdToDelete).remove();
                    }
                }
                deleteConfirmModal.hide();
                userIdToDelete = null; // Reset the ID
            };
            xhr.send('id=' + userIdToDelete);
        }
    });

    fetchUsers(); // Initial fetch
});

3. දත්ත Delete කරන PHP Backend එක

JavaScript වෙතින් එවන user ID එක භාරගෙන, database එකෙන් අදාල record එක මකා දැමීමට PHP script එකක් අවශ්‍යයි. delete-data.php නමින් අලුත් file එකක් සාදා පහත කේතය ඇතුලත් කරන්න. 

<?php
require_once 'db.php'; // Include database connection
$response = ['status' => 'error', 'message' => 'An error occurred.'];

// Check if it's a POST request and if the user ID is set
if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($_POST['id'])) {
    
    $id = $_POST['id'];

    try {
        // Prepare SQL to prevent SQL injection
        $sql = "DELETE FROM users WHERE id = ?";
        $stmt = $pdo->prepare($sql);
        
        if ($stmt->execute([$id])) {
            // Check if any row was actually deleted
            if ($stmt->rowCount() > 0) {
                $response['status'] = 'success';
                $response['message'] = 'User deleted successfully!';
            } else {
                $response['message'] = 'User not found or already deleted.';
            }
        } else {
            $response['message'] = 'Failed to execute delete statement.';
        }
    } catch (PDOException $e) {
        $response['message'] = 'Database error: ' . $e->getMessage();
    }
} else {
    $response['message'] = 'Invalid request or missing user ID.';
}

header('Content-Type: application/json');
echo json_encode($response);
?>
« Previous Module Next Module »