File 19 of 28: offerings.html
Folder: OnlineClassAttendance/admin/offerings.html
1. Purpose
- Select a course.
- Select a teacher.
- Select an academic term.
- Enter a section name.
- Save and display course offerings.
2. Complete Source Code
<!DOCTYPE html>
<html>
<head>
<title>Course Offering Management</title>
</head>
<body>
<h2>Course Offering Management</h2>
<h3>Assign Course to Teacher</h3>
<form id="offeringForm">
<label>Course:</label><br>
<select id="courseId" required>
<option value="">Select Course</option>
</select>
<br><br>
<label>Teacher:</label><br>
<select id="teacherId" required>
<option value="">Select Teacher</option>
</select>
<br><br>
<label>Academic Term:</label><br>
<select id="termId" required>
<option value="">Select Term</option>
</select>
<br><br>
<label>Section:</label><br>
<input type="text" id="section"
placeholder="Example: A" required>
<br><br>
<button type="submit">Create Offering</button>
</form>
<p id="message"></p>
<hr>
<h3>Course Offering List</h3>
<button onclick="loadOfferings()">Refresh List</button>
<br><br>
<table border="1" cellpadding="8">
<thead>
<tr>
<th>Offering ID</th>
<th>Course Code</th>
<th>Course Title</th>
<th>Teacher</th>
<th>Term</th>
<th>Section</th>
</tr>
</thead>
<tbody id="offeringTable">
</tbody>
</table>
<script>
// Load courses
function loadCourses() {
fetch("courses.jsp")
.then(response => response.json())
.then(data => {
if (!data.success) {
throw new Error(data.message);
}
const dropdown =
document.getElementById("courseId");
dropdown.innerHTML =
'<option value="">Select Course</option>';
data.courses.forEach(course => {
const option = document.createElement("option");
option.value = course.id;
option.textContent =
course.code + " - " + course.title;
dropdown.appendChild(option);
});
})
.catch(error => {
document.getElementById("message").textContent =
"Unable to load courses: " + error.message;
});
}
// Load teachers
function loadTeachers() {
fetch("teachers.jsp")
.then(response => response.json())
.then(data => {
if (!data.success) {
throw new Error(data.message);
}
const dropdown =
document.getElementById("teacherId");
dropdown.innerHTML =
'<option value="">Select Teacher</option>';
data.teachers.forEach(teacher => {
const option = document.createElement("option");
option.value = teacher.id;
option.textContent = teacher.name;
dropdown.appendChild(option);
});
})
.catch(error => {
document.getElementById("message").textContent =
"Unable to load teachers: " + error.message;
});
}
// Load academic terms
function loadTerms() {
fetch("terms.jsp")
.then(response => response.json())
.then(data => {
if (!data.success) {
throw new Error(data.message);
}
const dropdown =
document.getElementById("termId");
dropdown.innerHTML =
'<option value="">Select Term</option>';
data.terms.forEach(term => {
const option = document.createElement("option");
option.value = term.id;
option.textContent = term.name;
dropdown.appendChild(option);
});
})
.catch(error => {
document.getElementById("message").textContent =
"Unable to load terms: " + error.message;
});
}
// Load course offerings
function loadOfferings() {
fetch("offerings.jsp")
.then(response => response.json())
.then(data => {
if (!data.success) {
throw new Error(data.message);
}
const table =
document.getElementById("offeringTable");
table.innerHTML = "";
data.offerings.forEach(offering => {
const row = document.createElement("tr");
const values = [
offering.id,
offering.courseCode,
offering.courseTitle,
offering.teacher,
offering.term,
offering.section
];
values.forEach(value => {
const cell = document.createElement("td");
cell.textContent =
value == null ? "" : value;
row.appendChild(cell);
});
table.appendChild(row);
});
})
.catch(error => {
document.getElementById("message").textContent =
"Unable to load offerings: " + error.message;
});
}
// Create course offering
document.getElementById("offeringForm")
.addEventListener("submit", function(event) {
event.preventDefault();
const formData = new URLSearchParams();
formData.append("action", "add");
formData.append("courseId",
document.getElementById("courseId").value);
formData.append("teacherId",
document.getElementById("teacherId").value);
formData.append("termId",
document.getElementById("termId").value);
formData.append("section",
document.getElementById("section").value);
fetch("offerings.jsp", {
method: "POST",
headers: {
"Content-Type":
"application/x-www-form-urlencoded"
},
body: formData
})
.then(response => response.json())
.then(data => {
document.getElementById("message").textContent =
data.message;
if (data.success) {
document.getElementById("offeringForm").reset();
loadOfferings();
}
})
.catch(error => {
document.getElementById("message").textContent =
"Error: " + error.message;
});
});
// Initial loading
loadCourses();
loadTeachers();
loadTerms();
loadOfferings();
</script>
</body>
</html>3. How the Code Works
Step 1: Load courses
The course dropdown retrieves records from courses.jsp.
Step 2: Load teachers
The teacher dropdown retrieves registered teachers from teachers.jsp.
Step 3: Load academic terms
The term dropdown retrieves academic terms from terms.jsp.
Step 4: Create offering
The administrator selects a course, teacher and term, then enters a section name.
Step 5: Display offerings
The page retrieves and displays the complete course assignment list.
4. Expected Database Table
CREATE TABLE OFFERINGS (
OFFERING_ID NUMBER GENERATED ALWAYS AS IDENTITY PRIMARY KEY,
COURSE_ID NUMBER NOT NULL,
TEACHER_ID NUMBER NOT NULL,
TERM_ID NUMBER NOT NULL,
SECTION VARCHAR2(20) NOT NULL,
CONSTRAINT FK_OFFERING_COURSE
FOREIGN KEY (COURSE_ID)
REFERENCES COURSES(COURSE_ID),
CONSTRAINT FK_OFFERING_TEACHER
FOREIGN KEY (TEACHER_ID)
REFERENCES TEACHERS(TEACHER_ID),
CONSTRAINT FK_OFFERING_TERM
FOREIGN KEY (TERM_ID)
REFERENCES TERMS(TERM_ID)
);5. Understanding Course Offering
A course and a course offering are different concepts.
- COURSES: Stores general course information, such as CSE301 and Systems Analysis and Design.
- OFFERINGS: Stores when, where or to which section a course is assigned, including the responsible teacher and academic term.
For example, the same CSE301 course can have Section A and Section B with different teachers in Fall 2026.
6. How to Test
- Log in as an administrator.
- Open admin/offerings.html.
- Select a course from the dropdown.
- Select a teacher.
- Select an academic term.
- Enter Section A.
- Click Create Offering.
- Verify that the offering appears in the table.
Important: The page requires courses.jsp, teachers.jsp and terms.jsp to return valid JSON data. The backend must also validate the selected IDs and prevent duplicate offerings where appropriate.
Next File
File 20 of 28 — admin/offerings.jsp
The next file will save course offerings in Oracle Database and retrieve the course, teacher, term and section information.
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন