Online Class Attendance System
File 11 of 28: admin/students.html
Folder Location: OnlineClassAttendance/admin/students.html
1. Purpose of This File
This page provides the Student Management interface. The Administrator can register a student by providing the student's name, username, password, email, phone number, department, and batch.
2. Complete HTML Source Code
<!DOCTYPE html>
<html>
<head>
<title>Student Management</title>
</head>
<body>
<h2>Student Management</h2>
<p><a href="dashboard.html">Back to Dashboard</a></p>
<hr>
<h3>Register New Student</h3>
<form id="studentForm">
<label>Student Name:</label><br>
<input type="text" id="studentName" required>
<br><br>
<label>Username:</label><br>
<input type="text" id="username" required>
<br><br>
<label>Password:</label><br>
<input type="password" id="password" required>
<br><br>
<label>Email:</label><br>
<input type="email" id="email" required>
<br><br>
<label>Phone:</label><br>
<input type="text" id="phone">
<br><br>
<label>Department:</label><br>
<select id="deptId" required>
<option value="">Select Department</option>
</select>
<br><br>
<label>Batch:</label><br>
<input type="text" id="batch" required>
<br><br>
<button type="submit">Register Student</button>
</form>
<p id="message"></p>
<hr>
<h3>Student List</h3>
<table border="1" cellpadding="8">
<thead>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Username</th>
<th>Email</th>
<th>Phone</th>
<th>Department</th>
<th>Batch</th>
</tr>
</thead>
<tbody id="studentTable">
<tr>
<td colspan="7">Loading students...</td>
</tr>
</tbody>
</table>
<script>
// Load departments into dropdown
function loadDepartments() {
fetch("departments.jsp")
.then(response => response.json())
.then(data => {
const select = document.getElementById("deptId");
if (!data.success) {
return;
}
data.departments.forEach(dept => {
const option = document.createElement("option");
option.value = dept.id;
option.textContent = dept.name;
select.appendChild(option);
});
});
}
// Load student records
function loadStudents() {
fetch("students.jsp")
.then(response => response.json())
.then(data => {
const table = document.getElementById("studentTable");
table.innerHTML = "";
if (!data.success || data.students.length === 0) {
table.innerHTML =
"<tr><td colspan='7'>No students found</td></tr>";
return;
}
data.students.forEach(student => {
const row = document.createElement("tr");
[
student.id,
student.name,
student.username,
student.email,
student.phone || "",
student.department,
student.batch
].forEach(value => {
const cell = document.createElement("td");
cell.textContent = value;
row.appendChild(cell);
});
table.appendChild(row);
});
})
.catch(error => {
document.getElementById("studentTable").innerHTML =
"<tr><td colspan='7'>Unable to load students</td></tr>";
});
}
// Register a new student
document.getElementById("studentForm")
.addEventListener("submit", function(event) {
event.preventDefault();
const studentData = {
action: "add",
studentName:
document.getElementById("studentName").value,
username:
document.getElementById("username").value,
password:
document.getElementById("password").value,
email:
document.getElementById("email").value,
phone:
document.getElementById("phone").value,
deptId:
document.getElementById("deptId").value,
batch:
document.getElementById("batch").value
};
fetch("students.jsp", {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: new URLSearchParams(studentData)
})
.then(response => response.json())
.then(data => {
document.getElementById("message").innerText =
data.message;
if (data.success) {
document.getElementById("studentForm").reset();
loadStudents();
}
})
.catch(error => {
document.getElementById("message").innerText =
"Unable to register student.";
});
});
// Initial loading
loadDepartments();
loadStudents();
</script>
</body>
</html>3. Explanation
- Student Name: Stores the student's full name.
- Username and Password: Creates login credentials.
- Email and Phone: Stores contact information.
- Department: Selects a department from the database.
- Batch: Identifies the student's academic batch.
- loadDepartments(): Loads department names into the dropdown.
- loadStudents(): Retrieves and displays student records.
- URLSearchParams: Sends form information to students.jsp.
4. Database Relationship
Student registration requires two database tables:
- USERS: Stores username, password, full name, and user role.
- STUDENTS: Stores student-specific information and department details.
The USER_ID field connects the USERS and STUDENTS tables.
5. How to Run
Start Oracle Database and Tomcat. Log in as Admin and open:
http://localhost:8080/OnlineClassAttendance/admin/students.htmlImportant: This HTML page depends on the next backend file, students.jsp. The backend will create both the USERS and STUDENTS records during registration.
Next File: File 12 of 28 — admin/students.jsp
We will implement student registration and student-list retrieval using Oracle JDBC.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন