Library Attendance System

Dulangan National High School Library

Admin Dashboard

Library Attendance System - Admin Dashboard

Attendance Records

body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #333; color: #fff; padding: 1em 0; text-align: center; } main { padding: 20px; max-width: 800px; margin: 20px auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } section { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 5px; } h1, h2 { text-align: center; color: #333; } .input-group { margin-bottom: 10px; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="password"] { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } button { padding: 10px 15px; border: none; border-radius: 4px; background-color: #5cb85c; color: white; cursor: pointer; } button:hover { background-color: #4cae4c; } footer { text-align: center; padding: 1em 0; background-color: #333; color: #fff; position: fixed; bottom: 0; width: 100%; } .message { margin-top: 10px; padding: 10px; border-radius: 4px; } .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } document.addEventListener('DOMContentLoaded', function() { const loginForm = document.getElementById('login-form'); const loginSection = document.getElementById('login-section'); const attendanceSection = document.getElementById('attendance-section'); const studentInfoDiv = document.getElementById('student-info'); const checkInBtn = document.getElementById('check-in-btn'); const checkOutBtn = document.getElementById('check-out-btn'); const loginMessageDiv = document.getElementById('login-message'); const attendanceMessageDiv = document.getElementById('attendance-message'); loginForm.addEventListener('submit', function(event) { event.preventDefault(); const lrn = document.getElementById('lrn').value; fetch('php/login.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'lrn=' + lrn }) .then(response => response.json()) .then(data => { if (data.success) { loginSection.style.display = 'none'; attendanceSection.style.display = 'block'; studentInfoDiv.innerHTML = `

Welcome, Student ID: ${data.student_id}

`; // Display student info loginMessageDiv.style.display = 'none'; } else { loginMessageDiv.textContent = data.message; loginMessageDiv.className = 'message error'; loginMessageDiv.style.display = 'block'; } }) .catch(error => { console.error('Error:', error); loginMessageDiv.textContent = 'An error occurred during login.'; loginMessageDiv.className = 'message error'; loginMessageDiv.style.display = 'block'; }); }); checkInBtn.addEventListener('click', function() { recordAttendance('check_in'); }); checkOutBtn.addEventListener('click', function() { recordAttendance('check_out'); }); function recordAttendance(action) { fetch('php/attendance.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: 'action=' + action }) .then(response => response.json()) .then(data => { if (data.success) { attendanceMessageDiv.textContent = data.message; attendanceMessageDiv.className = 'message success'; } else { attendanceMessageDiv.textContent = data.message; attendanceMessageDiv.className = 'message error'; } attendanceMessageDiv.style.display = 'block'; }) .catch(error => { console.error('Error:', error); attendanceMessageDiv.textContent = 'An error occurred.'; attendanceMessageDiv.className = 'message error'; attendanceMessageDiv.style.display = 'block'; }); } }); document.addEventListener('DOMContentLoaded', function() { const attendanceTableDiv = document.getElementById('attendance-table'); function fetchAttendanceData() { fetch('php/admin_dashboard.php') .then(response => response.json()) .then(data => { if (data.success) { let tableHTML = ''; data.attendanceRecords.forEach(record => { tableHTML += ``; }); tableHTML += '

Student ID	Time In	Time Out
${record.student_id}	${record.time_in}	${record.time_out \|\| 'N/A'}

'; attendanceTableDiv.innerHTML = tableHTML; } else { attendanceTableDiv.textContent = 'Failed to load attendance data.'; } }) .catch(error => { console.error('Error:', error); attendanceTableDiv.textContent = 'Error loading attendance data.'; }); } fetchAttendanceData(); }); connect_error) { die("Connection failed: " . $conn->connect_error); } ?> prepare($sql); $stmt->bind_param("s", $lrn); $stmt->execute(); $stmt->store_result(); if ($stmt->num_rows > 0) { $stmt->bind_result($student_id); $stmt->fetch(); // Successful login echo json_encode(['success' => true, 'student_id' => $student_id]); } else { // Login failed echo json_encode(['success' => false, 'message' => 'Invalid LRN.']); } $stmt->close(); } else { echo json_encode(['success' => false, 'message' => 'Invalid request method.']); } $conn->close(); ?> prepare($sql); $stmt->bind_param("i", $student_id); if ($stmt->execute()) { echo json_encode(['success' => true, 'message' => 'Checked in successfully.']); } else { echo json_encode(['success' => false, 'message' => 'Error checking in.']); } $stmt->close(); } else if ($action == 'check_out') { // For simplicity, assuming only one active check-in per student. $sql = "UPDATE attendance_log SET time_out = NOW() WHERE student_id = ? AND time_out IS NULL"; $stmt = $conn->prepare($sql); $stmt->bind_param("i", $student_id); if ($stmt->execute()) { echo json_encode(['success' => true, 'message' => 'Checked out successfully.']); } else { echo json_encode(['success' => false, 'message' => 'Error checking out.']); } $stmt->close(); } else { echo json_encode(['success' => false, 'message' => 'Invalid action.']); } } else { echo json_encode(['success' => false, 'message' => 'Invalid request method.']); } $conn->close(); ?> query($sql); if ($result->num_rows > 0) { $attendanceRecords = []; while($row = $result->fetch_assoc()) { $attendanceRecords[] = $row; } echo json_encode(['success' => true, 'attendanceRecords' => $attendanceRecords]); } else { echo json_encode(['success' => false, 'message' => 'No attendance records found.']); } $conn->close(); ?>