Online Class Attendance System
File 9 of 28: admin/departments.html
Folder Location: OnlineClassAttendance/admin/departments.html
1. Purpose of This File
This page provides the Department Management interface. The Administrator can enter a department name, department code, and description.
2. Complete HTML Source Code
<!DOCTYPE html>
<html>
<head>
<title>Department Management</title>
</head>
<body>
<h2>Department Management</h2>
<p><a href="dashboard.html">Back to Dashboard</a></p>
<hr>
<h3>Add New Department</h3>
<form id="departmentForm">
<label>Department Name:</label><br>
<input type="text" id="deptName" required>
<br><br>
<label>Department Code:</label><br>
<input type="text" id="deptCode" required>
<br><br>
<label>Description:</label><br>
<textarea id="description"></textarea>
<br><br>
<button type="submit">Save Department</button>
</form>
<p id="message"></p>
<hr>
<h3>Department List</h3>
<table border="1" cellpadding="8">
<thead>
<tr>
<th>ID</th>
<th>Department Name</th>
<th>Department Code</th>
<th>Description</th>
</tr>
</thead>
<tbody id="departmentTable">
<tr>
<td colspan="4">Loading departments...</td>
</tr>
</tbody>
</table>
<script>
// Load departments
function loadDepartments() {
fetch("departments.jsp")
.then(response => response.json())
.then(data => {
const table = document.getElementById("departmentTable");
table.innerHTML = "";
if (!data.success || data.departments.length === 0) {
table.innerHTML =
"<tr><td colspan='4'>No departments found</td></tr>";
return;
}
data.departments.forEach(dept => {
const row = document.createElement("tr");
[dept.id, dept.name, dept.code, dept.description || ""]
.forEach(value => {
const cell = document.createElement("td");
cell.textContent = value;
row.appendChild(cell);
});
table.appendChild(row);
});
})
.catch(error => {
document.getElementById("departmentTable").innerHTML =
"<tr><td colspan='4'>Unable to load departments</td></tr>";
});
}
// Add department
document.getElementById("departmentForm")
.addEventListener("submit", function(event) {
event.preventDefault();
const deptName = document.getElementById("deptName").value;
const deptCode = document.getElementById("deptCode").value;
const description = document.getElementById("description").value;
fetch("departments.jsp", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams({
action: "add",
deptName: deptName,
deptCode: deptCode,
description: description
})
})
.then(response => response.json())
.then(data => {
document.getElementById("message").innerText = data.message;
if (data.success) {
document.getElementById("departmentForm").reset();
loadDepartments();
}
})
.catch(error => {
document.getElementById("message").innerText =
"Unable to save department.";
});
});
// Initial page load
loadDepartments();
</script>
</body>
</html>3. Explanation
- Department Name: Stores the full department name.
- Department Code: Stores a short unique code, such as CSE or EEE.
- Description: Stores additional department information.
- fetch(): Communicates with departments.jsp.
- loadDepartments(): Retrieves and displays department records.
- createElement(): Creates table rows and cells dynamically.
- textContent: Displays database values safely as text.
4. Expected Output
The page should display:
- A department entry form.
- A Save Department button.
- A department list table.
- A Back to Dashboard link.
5. How to Run
Start Tomcat, log in as Admin, and open:
http://localhost:8080/OnlineClassAttendance/admin/departments.htmlImportant: The form and table depend on the next file, departments.jsp, which will implement database insertion and retrieval. Make sure that JSP endpoint validates the Admin session before accessing the database.
Next File: File 10 of 28 — admin/departments.jsp
We will implement the Oracle Database operations for adding and displaying departments using JDBC.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন