Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mohamudhussein
Mohamudhussein authored Jun 21, 2024
0 parents commit 8c8bfc6
Show file tree
Hide file tree
Showing 6 changed files with 1,305 additions and 0 deletions.
67 changes: 67 additions & 0 deletions form.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@

const form = document.getElementById('newEmployeeForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(form);
const employee = {
name: formData.get('name'),
designation: formData.get('designation'),
phone_number: formData.get('phone_number'),
email: formData.get('email')
};
fetch('http://localhost:5500/addemployee', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(employee)
})
.then(response => {
if (!response.ok) {
throw new Error('Error adding employee');
}
return response.text();
})
.then(data => {
console.log(data);
form.reset();
location.reload(); // Reload the page to update the employee list
})
.catch(error => {
console.error('Error adding employee:', error);
});
});

const updateForm = document.getElementById('updateEmployeeForm');
updateForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(updateForm);
const employee = {
id: formData.get('id'),
name: formData.get('name'),
designation: formData.get('designation'),
phone_number: formData.get('phone_number'),
email: formData.get('email')
};
fetch(`http://localhost:5500/updateemployee/${employee.id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(employee)
})
.then(response => {
if (!response.ok) {
throw new Error('Error updating employee');
}
return response.text();
})
.then(data => {
console.log(data);
updateForm.reset();
location.reload(); // Reload the page to update the employee list
})
.catch(error => {
console.error('Error updating employee:', error);
});
});
77 changes: 77 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

h1 {
text-align: center;
color: #333;
font-weight: bold;
}

form {
max-width: 600px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
font-weight: bold;
display: block;
margin-top: 10px;
}

input[type="text"], input[type="tel"], input[type="email"] {
width: calc(100% - 20px);
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
}

input[type="submit"], button {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}

input[type="submit"]:hover, button:hover {
background-color: #45a049;
}

table {
width: 90%;
margin: 20px auto;
border-collapse: collapse;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}

th {
background-color: #4CAF50;
color: white;
font-weight: bold;
}

tr:hover {
background-color: #f1f1f1;
}

button {
margin: 5px;
}
150 changes: 150 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee List</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Add Employee</h1>
<form id="newEmployeeForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="designation">Designation:</label><br>
<input type="text" id="designation" name="designation" required><br>
<label for="phone_number">Phone Number:</label><br>
<input type="tel" id="phone_number" name="phone_number" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="Add Employee">
</form>

<h1>Employee List</h1>
<button id="fetchEmployeesButton">Fetch Employees</button>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Designation</th>
<th>Phone Number</th>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="employeeTableBody">

</tbody>
</table>

<h1>Update Employee</h1>
<form id="updateEmployeeForm" style="display:none;">
<input type="hidden" id="updateId" name="id">
<label for="updateName">Name:</label><br>
<input type="text" id="updateName" name="name" required><br>
<label for="updateDesignation">Designation:</label><br>
<input type="text" id="updateDesignation" name="designation" required><br>
<label for="updatePhoneNumber">Phone Number:</label><br>
<input type="tel" id="updatePhoneNumber" name="phone_number" required><br>
<label for="updateEmail">Email:</label><br>
<input type="email" id="updateEmail" name="email" required><br>
<input type="submit" value="Update Employee">
</form>

<script src="form.js"></script>
<script>
document.getElementById('fetchEmployeesButton').addEventListener('click', fetchEmployees);

function fetchEmployees() {
fetch('http://localhost:5500/getemployee')
.then(response => response.json())
.then(data => {
const tableBody = document.getElementById('employeeTableBody');
tableBody.innerHTML = ''; // Clearin the table before adding new data
data.forEach(employee => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${employee.id}</td>
<td>${employee.name}</td>
<td>${employee.designation}</td>
<td>${employee.phone_number}</td>
<td>${employee.email}</td>
<td>
<button onclick="editEmployee(${employee.id}, '${employee.name}', '${employee.designation}', '${employee.phone_number}', '${employee.email}')">Edit</button>
<button onclick="deleteEmployee(${employee.id})">Delete</button>
</td>
`;
tableBody.appendChild(row);
});
})
.catch(error => console.error('Error fetching employee data:', error));
}

function editEmployee(id, name, designation, phone_number, email) {
document.getElementById('updateId').value = id;
document.getElementById('updateName').value = name;
document.getElementById('updateDesignation').value = designation;
document.getElementById('updatePhoneNumber').value = phone_number;
document.getElementById('updateEmail').value = email;
document.getElementById('updateEmployeeForm').style.display = 'block';
}

function deleteEmployee(id) {
fetch(`http://localhost:5500/deleteemployee/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Error deleting employee');
}
return response.text();
})
.then(data => {
console.log(data);
fetchEmployees(); // Fetchin and refreshin the employee list
})
.catch(error => {
console.error('Error deleting employee:', error);
});
}

document.getElementById('updateEmployeeForm').addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(document.getElementById('updateEmployeeForm'));
const employee = {
id: formData.get('id'),
name: formData.get('name'),
designation: formData.get('designation'),
phone_number: formData.get('phone_number'),
email: formData.get('email')
};
fetch(`http://localhost:5500/updateemployee/${employee.id}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(employee)
})
.then(response => {
if (!response.ok) {
throw new Error('Error updating employee');
}
return response.text();
})
.then(data => {
console.log(data);
document.getElementById('updateEmployeeForm').reset();
document.getElementById('updateEmployeeForm').style.display = 'none';
fetchEmployees(); // Fetch and refresh the employee list
})
.catch(error => console.error('Error updating employee:', error));
});
</script>
</body>
</html>

95 changes: 95 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@

const express = require('express');
const mysql = require('mysql2');
const path = require('path');
const cors = require('cors');

const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'sudo',
database: 'nodemysl'
});

db.connect(err => {
if (err) {
console.error('Error connecting to database:', err);
process.exit(1);
}
console.log('mySQL connected');
});

const app = express();

app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());
app.use(express.json());

app.get('/createdb', (req, res) => {
let sql = 'CREATE DATABASE IF NOT EXISTS nodemysl';
db.query(sql, err => {
if (err) {
throw err;
}
res.send('Database created or already exists');
});
});

app.get('/createemployee', (req, res) => {
let sql = 'CREATE TABLE IF NOT EXISTS employee(id int AUTO_INCREMENT, name VARCHAR(255), designation VARCHAR(255), phone_number VARCHAR(255), email VARCHAR(255), PRIMARY KEY(id))';
db.query(sql, (err, result) => {
if (err) {
throw err;
}
res.send('Employee table created or already exists');
});
});

app.post('/addemployee', (req, res) => {
const { name, designation, phone_number, email } = req.body;
const sql = 'INSERT INTO employee (name, designation, phone_number, email) VALUES (?, ?, ?, ?)';
db.query(sql, [name, designation, phone_number, email], (err, result) => {
if (err) {
throw err;
}
res.send('Employee added successfully');
});
});

app.put('/updateemployee/:id', (req, res) => {
const { id } = req.params;
const { name, designation, phone_number, email } = req.body;
const sql = 'UPDATE employee SET name = ?, designation = ?, phone_number = ?, email = ? WHERE id = ?';
db.query(sql, [name, designation, phone_number, email, id], (err, result) => {
if (err) {
throw err;
}
res.send('Employee updated successfully');
});
});

app.delete('/deleteemployee/:id', (req, res) => {
const { id } = req.params;
const sql = 'DELETE FROM employee WHERE id = ?';
db.query(sql, [id], (err, result) => {
if (err) {
throw err;
}
res.send('Employee deleted successfully');
});
});

app.get('/getemployee', (req, res) => {
let sql = 'SELECT * FROM employee';
db.query(sql, (err, result) => {
if (err) {
throw err;
}
res.send(result);
});
});

app.listen('5500', () => {
console.log('Server started at port 5500');
});

Loading

0 comments on commit 8c8bfc6

Please sign in to comment.