File 27: Attendance Reports (reports.html)

File 27: Attendance Reports (reports.html)

Folder: OnlineClassAttendance/admin/reports.html

1. Purpose

This page provides the following features:

• Select a course offering.
• Generate attendance summaries for enrolled students.
• Calculate attendance percentages.
• View individual student attendance records.
• Print attendance reports.

2. Complete HTML Source Code

<!DOCTYPE html>
<html>

<head>
    <title>Attendance Reports</title>
    <meta charset="UTF-8">
</head>

<body>

    <h2>Attendance Reports</h2>

    <h3>Select Course Offering</h3>

    <label>Course Offering:</label><br>

    <select id="offeringId">
        <option value="">Select Course Offering</option>
    </select>

    <br><br>

    <button type="button" onclick="loadReport()">
        Generate Report
    </button>

    <button type="button" onclick="window.print()">
        Print Report
    </button>

    <p id="message"></p>

    <hr>

    <h3>Student Attendance Summary</h3>

    <table border="1" cellpadding="8" cellspacing="0">

        <thead>
            <tr>
                <th>Student ID</th>
                <th>Student Name</th>
                <th>Batch</th>
                <th>Total Classes</th>
                <th>Present</th>
                <th>Absent</th>
                <th>Late</th>
                <th>Excused</th>
                <th>Attendance %</th>
            </tr>
        </thead>

        <tbody id="reportTable">
        </tbody>

    </table>

    <hr>

    <h3>Individual Attendance Details</h3>

    <table border="1" cellpadding="8" cellspacing="0">

        <thead>
            <tr>
                <th>Student ID</th>
                <th>Student Name</th>
                <th>Session Date</th>
                <th>Class Topic</th>
                <th>Status</th>
                <th>Remarks</th>
            </tr>
        </thead>

        <tbody id="detailsTable">
        </tbody>

    </table>

    <script>

        const offeringSelect =
            document.getElementById("offeringId");

        const reportTable =
            document.getElementById("reportTable");

        const detailsTable =
            document.getElementById("detailsTable");

        const message =
            document.getElementById("message");

        // Load course offerings
        async function loadOfferings() {

            try {

                const response = await fetch("offerings.jsp");
                const data = await response.json();

                if (!response.ok || !data.success) {
                    throw new Error("Unable to load course offerings.");
                }

                data.offerings.forEach(offering => {

                    const option =
                        document.createElement("option");

                    option.value = offering.id;

                    option.textContent =
                        offering.courseCode + " - " +
                        offering.courseTitle + " | " +
                        offering.term + " | Section " +
                        offering.section;

                    offeringSelect.appendChild(option);
                });

            } catch (error) {

                message.textContent = error.message;
            }
        }

        // Generate attendance report
        async function loadReport() {

            const offeringId = offeringSelect.value;

            if (!offeringId) {

                message.textContent =
                    "Please select a course offering.";

                return;
            }

            reportTable.innerHTML = "";
            detailsTable.innerHTML = "";

            message.textContent = "Generating report...";

            try {

                const response = await fetch(
                    "reports.jsp?offeringId=" +
                    encodeURIComponent(offeringId)
                );

                const data = await response.json();

                if (!response.ok || !data.success) {
                    throw new Error(
                        data.message || "Unable to generate report."
                    );
                }

                // Display summary
                data.summary.forEach(student => {

                    const row = document.createElement("tr");

                    const values = [
                        student.studentId,
                        student.studentName,
                        student.batch,
                        student.totalClasses,
                        student.present,
                        student.absent,
                        student.late,
                        student.excused,
                        student.percentage + "%"
                    ];

                    values.forEach(value => {

                        const cell =
                            document.createElement("td");

                        cell.textContent = value ?? "";

                        row.appendChild(cell);
                    });

                    reportTable.appendChild(row);
                });

                // Display individual attendance details
                data.details.forEach(record => {

                    const row = document.createElement("tr");

                    const values = [
                        record.studentId,
                        record.studentName,
                        record.sessionDate,
                        record.topic,
                        record.status,
                        record.remarks
                    ];

                    values.forEach(value => {

                        const cell =
                            document.createElement("td");

                        cell.textContent = value ?? "";

                        row.appendChild(cell);
                    });

                    detailsTable.appendChild(row);
                });

                message.textContent =
                    "Attendance report generated successfully.";

            } catch (error) {

                message.textContent = error.message;
            }
        }

        // Initial loading
        loadOfferings();

    </script>

</body>
</html>

3. How the Code Works

1. Course offering selection: Retrieves available course offerings from offerings.jsp.
2. Generate report: Sends the selected offering ID to reports.jsp.
3. Attendance summary: Displays total classes and attendance counts for each student.
4. Percentage calculation: Displays each student's attendance percentage as returned by the backend.
5. Individual details: Displays the date, topic, status, and remarks for each attendance record.
6. Print report: Allows the administrator to print the generated report.

4. Attendance Percentage Formula

The project uses the following formula:

Attendance Percentage =
(Present Classes + Late Classes)
--------------------------------- x 100
          Total Classes

Note: Excused classes are excluded from the attendance percentage denominator. The backend will use the same calculation for every student.

5. How to Test

1. Log in as an administrator.
2. Open admin/reports.html.
3. Select a course offering.
4. Click Generate Report.
5. Check the student attendance summary.
6. Review individual attendance details.
7. Click Print Report to print the result.

Important: This page requires offerings.jsp and reports.jsp. The next file will implement the backend SQL queries and attendance percentage calculations.

---

Next File: File 28 of 28 — admin/reports.jsp

In the final tutorial, we will develop the JSP backend for generating attendance reports from Oracle Database.