What is a good Add/Edit/Delete class using HTML Javascript and PHP?

Question

Sadika · Accepted Answer

Creating a good Add/Edit/Delete (CRUD) system using HTML, JavaScript, and PHP involves building a user interface for managing data and implementing server-side scripts to handle CRUD operations. Below is a simple example demonstrating how you might structure such a system. Note that this is a basic example, and in a production environment, you should implement proper security measures, validation, and error handling.

HTML (index.html):

```html

CRUD Example

Manage Items

```

CSS (styles.css):

```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
}

.container {
max-width: 800px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

table, th, td {
border: 1px solid #ddd;
}

th, td {
padding: 15px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

button {
padding: 10px;
margin-top: 10px;
cursor: pointer;
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
width: 70%;
}

.close {
float: right;
font-size: 30px;
cursor: pointer;
}

#saveButton {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}

#saveButton:hover {
background-color: #45a049;
}
```

JavaScript (scripts.js):

```javascript
document.addEventListener('DOMContentLoaded', function() {
const addButton = document.getElementById('addButton');
const modal = document.getElementById('modal');
const closeButton = document.getElementById('closeButton');
const saveButton = document.getElementById('saveButton');
const itemForm = document.getElementById('itemForm');
const itemTable = document.getElementById('itemTable');
const modalTitle = document.getElementById('modalTitle');
let editItemId = null;

addButton.addEventListener('click', () => {
openModal('Add Item');
});

itemForm.addEventListener('submit', function(event) {
event.preventDefault();
const itemName = document.getElementById('itemName').value;

if (!itemName) {
alert('Please enter an item name.');
return;
}

if (editItemId === null) {
// Add new item
addItem(itemName);
} else {
// Edit existing item
editItem(editItemId, itemName);
}

closeModal();
clearForm();
});

closeButton.addEventListener('click', () => {
closeModal();
clearForm();
});

// Initial items for demonstration purposes
const items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
];

// Display initial items
renderItems();

function renderItems() {
clearTable();
items.forEach(item => {
const row = itemTable.insertRow();
row.innerHTML = `${item.name}

`;
});
}

function clearTable() {
while (itemTable.firstChild) {
itemTable.removeChild(itemTable.firstChild);
}
}

function openModal(title) {
modalTitle.textContent = title;
modal.style.display = 'block';
}

function closeModal() {
modal.style.display = 'none';
editItemId = null;
}

function clearForm() {
itemForm.reset();
}

function addItem(name) {
const newItem = { id: generateItemId(), name };
items.push(newItem);
renderItems();
}

function editItemHandler(id) {
const itemToEdit = items.find(item => item.id === id);

if (itemToEdit) {
openModal('Edit Item');
document.getElementById('itemName').value = itemToEdit.name;
editItemId = id;
}
}

function editItem(id, newName) {
const index = items.findIndex(item => item.id === id);

if (index !== -1) {
items[index].name = newName;
renderItems();
}
}

function deleteItem(id) {
const index = items.findIndex(item => item.id === id);

if (index !== -1) {
items.splice(index, 1);
renderItems();
}
}

function generateItemId() {
// For simplicity, a simple incremental ID is used.
// In a real-world scenario, a more robust ID generation method should be employed.
const maxId = Math.max(...items.map(item => item.id), 0);
return maxId + 1;
}
});
```

This example provides a basic CRUD system using HTML, JavaScript, and PHP. It includes a user interface for managing items and communicates with the server-side PHP script (not provided) for data storage and retrieval. The server-side PHP script would typically interact with a database.

Remember to replace the PHP server-side implementation with your own logic based on your database or data storage preferences. Additionally, implement proper security measures, input validation, and error handling in a production environment.

I am a Student I am a Tutor
Name*	Please enter your full name. Please enter institute name.
Email*	Please enter your email address.
Phone*	Please enter a valid phone number.
Location*	Please enter a pincode or area name.
City*	Please enter city name.
Category*	Please enter category.
Gender*	Male Female Please select your gender.
Email ID/ Mobile No.*	Please enter either mobile no. or email.
Enter Password*	Please enter OTP Please enter Password Sorry, this phone number is not verified, Please login with your email Id.

What is a good Add/Edit/Delete class using HTML Javascript and PHP?

Looking for PHP Classes?

Learn PHP with the Best Tutors