Module 10: සම්පූර්ණ Live CRUD යෙදුමක්
සුභ පැතුම්! ඔබ පාඨමාලාවේ අවසානයට පැමිණ ඇත. දැන් අපි පෙර පාඩම් වල ඉගෙනගත් සියල්ල එකතු කර සම්පූර්ණ Live CRUD (Create, Read, Update, Delete) යෙදුමක් නිර්මාණය කරමු.
1. The Final Application Interface (HTML)
මෙම යෙදුම සඳහා අපට අවශ්ය සියලුම HTML කොටස්—Add form, user table, edit modal, සහ delete modal—එකම file එකක අඩංගු වේ.
ඔබගේ project folder එකේ, live-crud-app.html නමින් අලුත් file එකක් සාදා පහත HTML කේතය ඇතුලත් කරන්න.
<!DOCTYPE html>
<html lang="si">
<head>
<title>Complete Live CRUD App</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 Dashboard</h1>
<p>A complete single-page application to manage users without page reloads.</p>
<!-- Add User Form -->
<div class="card mb-4">
<div class="card-header">Add New User</div>
<div class="card-body">
<form id="addUserForm">
<div class="row">
<div class="col-md-5 mb-2"><input type="text" id="name" class="form-control" placeholder="Name" required></div>
<div class="col-md-5 mb-2"><input type="email" id="email" class="form-control" placeholder="Email" required></div>
<div class="col-md-2 mb-2"><button type="submit" class="btn btn-primary w-100">Add User</button></div>
</div>
</form>
</div>
</div>
<div id="messageDiv"></div>
<div id="userTableDiv">Loading...</div>
<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title">Edit User</h5></div>
<div class="modal-body">
<form id="editUserForm">
<input type="hidden" id="editUserId">
<div class="mb-3"><input type="text" id="editName" class="form-control" required></div>
<div class="mb-3"><input type="email" id="editEmail" class="form-control" required></div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="saveChangesBtn" class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title">Confirm Deletion</h5></div>
<div class="modal-body">Are you sure?</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" id="confirmDeleteBtn" class="btn btn-danger">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="app-script.js"></script>
</body>
</html>2. The Complete Application Logic (JavaScript)
මෙම JavaScript file එක අපගේ යෙදුමේ මොළයයි. සියලුම Ajax calls, event listeners, සහ DOM manipulations මෙහි අඩංගු වේ.
app-script.js නමින් අලුත් file එකක් සාදා පහත සම්පූර්ණ කේතය ඇතුලත් කරන්න.
document.addEventListener('DOMContentLoaded', function() {
// --- DOM Elements ---
const addUserForm = document.getElementById('addUserForm');
const userTableDiv = document.getElementById('userTableDiv');
const messageDiv = document.getElementById('messageDiv');
// --- Modals ---
const editModal = new bootstrap.Modal(document.getElementById('editUserModal'));
const deleteModal = new bootstrap.Modal(document.getElementById('deleteConfirmModal'));
// --- Modal Buttons & Forms ---
const saveChangesBtn = document.getElementById('saveChangesBtn');
const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
let userIdToDelete = null;
// --- 1. READ: Function to fetch and display all 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-bordered table-striped"><thead><tr>
<th>ID</th><th>Name</th><th>Email</th><th>Actions</th>
</tr></thead><tbody>`;
users.forEach(user => {
output += `<tr id="user-${user.id}">
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.email}</td>
<td class="action-btns">
<button class="btn btn-sm btn-primary btn-edit" data-id="${user.id}">Edit</button>
<button class="btn btn-sm btn-danger btn-delete" data-id="${user.id}">Delete</button>
</td>
</tr>`;
});
output += '</tbody></table>';
userTableDiv.innerHTML = output;
}
};
xhr.send();
}
// --- 2. CREATE: Handle Add User Form Submission ---
addUserForm.addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const params = `name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`;
const xhr = new XMLHttpRequest();
xhr.open('POST', 'insert-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);
if (response.status === 'success') {
addUserForm.reset();
fetchUsers(); // Refresh table
}
// Show message (e.g., in a toast or alert)
}
};
xhr.send(params);
});
// --- 3. UPDATE & 4. DELETE: Event Delegation for Edit/Delete Buttons ---
userTableDiv.addEventListener('click', function(e) {
// --- Handle Edit Button Click ---
if (e.target.classList.contains('btn-edit')) {
const userId = e.target.getAttribute('data-id');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'get-user.php?id=' + userId, true);
xhr.onload = function() {
if (this.status === 200) {
const user = JSON.parse(this.responseText);
document.getElementById('editUserId').value = user.id;
document.getElementById('editName').value = user.name;
document.getElementById('editEmail').value = user.email;
editModal.show();
}
};
xhr.send();
}
// --- Handle Delete Button Click ---
if (e.target.classList.contains('btn-delete')) {
userIdToDelete = e.target.getAttribute('data-id');
deleteModal.show();
}
});
// --- Handle "Save Changes" in Edit Modal ---
saveChangesBtn.addEventListener('click', function() {
const id = document.getElementById('editUserId').value;
const name = document.getElementById('editName').value;
const email = document.getElementById('editEmail').value;
const params = `id=${id}&name=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`;
const xhr = new XMLHttpRequest();
xhr.open('POST', 'update-data.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (this.status === 200) {
editModal.hide();
fetchUsers(); // Refresh table
}
};
xhr.send(params);
});
// --- Handle "Confirm Delete" in Delete Modal ---
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) {
deleteModal.hide();
fetchUsers(); // Refresh table
}
};
xhr.send('id=' + userIdToDelete);
userIdToDelete = null;
}
});
// --- Initial Load ---
fetchUsers();
});
3. PHP Backend Files
මෙම යෙදුම ක්රියාත්මක වීමට පෙර පාඩම් වලදී අප සෑදූ සියලුම PHP backend files අවශ්ය වේ. ඔබගේ project folder එකේ පහත files සියල්ල ඇති බවට වග බලා ගන්න:
db.php(Database Connection)fetch-data.php(Read all users)insert-data.php(Create a user)get-user.php(Read a single user for editing)update-data.php(Update a user)delete-data.php(Delete a user)
පාඨමාලාව සාර්ථකව නිම කිරීම ගැන ඔබට උණුසුම් සුභ පැතුම්!
ඔබ දැන් JavaScript, PHP, සහ MySQL භාවිතා කරමින්, නවීන, dynamic, single-page web applications නිර්මාණය කිරීමේ මූලික කුසලතා ලබා ඇත. මෙම දැනුම ඔබගේ ඉදිරි web development ගමනට ශක්තිමත් අඩිතාලමක් වනු ඇත.