attendance

Student Session Management System

A comprehensive web-based system for managing student sessions, attendance, and enrollment across multiple colleges and batches using Google Sheets as backend.

Features

Admin Features

Student Features

Tech Stack

Frontend

Backend

Project Structure

attendance/
├── admin/
│   ├── index.html              # Calendar dashboard
│   ├── enroll-batch.html       # Batch management
│   └── attendance-list.html    # Attendance reports
├── student/
│   ├── enroll.html            # Student enrollment
│   └── attend.html            # Attendance marking
├── assets/
│   ├── css/
│   │   └── style.css          # Global styles
│   └── js/
│       ├── config.js          # Configuration
│       ├── calendar.js        # Calendar logic
│       ├── batch.js           # Batch management
│       ├── attendance.js      # Attendance list
│       ├── enroll.js          # Student enrollment
│       └── attend.js          # Attendance marking
├── backend/
│   └── Code.gs                # Google Apps Script
├── requirements.json          # Detailed specifications
└── README.md

Setup Instructions

1. Google Apps Script Setup

  1. Create a Google Spreadsheet
    • Go to Google Sheets
    • Create a new spreadsheet
    • Name it “Student Attendance Database”
  2. Add Required Sheets
    • Create three sheets: batches, students, attendance
    • Add headers as specified in the backend/Code.gs file
  3. Open Apps Script Editor
    • In your spreadsheet, go to Extensions > Apps Script
    • Delete any existing code
    • Copy the content from backend/Code.gs
    • Save the project (File > Save)
  4. Deploy as Web App
    • Click Deploy > New deployment
    • Select type: Web app
    • Execute as: Me
    • Who has access: Anyone
    • Click Deploy
    • Copy the Web App URL

2. Google OAuth Setup

  1. Create Google Cloud Project
  2. Create OAuth Credentials
    • Go to APIs & Services > Credentials
    • Create OAuth 2.0 Client ID
    • Application type: Web application
    • Add authorized JavaScript origins:
      • Your GitHub Pages URL
      • http://localhost (for testing)
    • Copy the Client ID

3. Frontend Configuration

  1. Update Config File
    • Open assets/js/config.js
    • Replace YOUR_SCRIPT_ID with your Apps Script Web App URL
    • Replace YOUR_GOOGLE_CLIENT_ID with your OAuth Client ID
    • Update APP_URL with your deployment URL
  2. Update HTML Files
    • Replace YOUR_GOOGLE_CLIENT_ID in:
      • student/enroll.html
      • student/attend.html

4. Deploy to GitHub Pages

  1. Create GitHub Repository 
    git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/attendance.git
git push -u origin main
  2. Enable GitHub Pages
    • Go to repository Settings
    • Pages section
    • Source: Deploy from main branch
    • Save
  3. Access Your App
    • Admin Dashboard: https://yourusername.github.io/attendance/admin/index.html
    • Student Pages: Use QR codes generated by admin

Usage Guide

Admin Workflow

  1. Create a Batch
    • Go to “Enroll Batch” page
    • Select college (or add new)
    • Click “Create Batch”
    • Batch name is auto-generated
    • Two QR codes are generated:
      • Enrollment QR: For new student registration
      • Attendance QR: For daily attendance
  2. Share QR Codes
    • Download QR codes
    • Display enrollment QR at registration desk
    • Display attendance QR during sessions
  3. View Attendance
    • Calendar View: Click dates to see students
    • Attendance List: Filter by date range, college, batch
    • Export: Download CSV reports

Student Workflow

  1. First Time (Enrollment)
    • Scan Enrollment QR code
    • Sign in with Google
    • Verify pre-filled details
    • Submit (attendance auto-marked)
  2. Daily Attendance
    • Scan Attendance QR code
    • Sign in with Google (if not already)
    • Click “Mark Attendance”
    • See confirmation

Testing Without Backend

The frontend includes mock data for testing without setting up the backend:

  1. Open any admin page in a browser
  2. The app will fallback to mock data when API calls fail
  3. All features work with sample data

API Endpoints

The Google Apps Script provides these endpoints:

Database Schema

Batches Sheet

| Column | Type | Description | |——–|——|————-| | batchId | String | Unique identifier | | batchName | String | Display name | | college | String | College name | | createdDate | Timestamp | Creation date | | enrollmentURL | String | Enrollment link | | attendanceURL | String | Attendance link | | isActive | Boolean | Status |

Students Sheet

| Column | Type | Description | |——–|——|————-| | studentId | String | Unique identifier | | googleId | String | Google OAuth ID | | name | String | Full name | | email | String | Email address | | college | String | College name | | batchId | String | Batch reference | | photoURL | String | Profile picture | | enrolledDate | Timestamp | Enrollment date |

Attendance Sheet

| Column | Type | Description | |——–|——|————-| | attendanceId | String | Unique identifier | | studentId | String | Student reference | | batchId | String | Batch reference | | date | Date | YYYY-MM-DD | | timestamp | Timestamp | Exact time | | college | String | College name |

Browser Compatibility

Mobile Responsive

Fully optimized for:

Security Features

Troubleshooting

QR Codes Not Generating

Google Sign-In Not Working

API Calls Failing

Calendar Not Loading

Support

For issues or questions:

  1. Check the troubleshooting section
  2. Review the requirements.json for detailed specs
  3. Check browser console for error messages

License

MIT License - Free to use and modify

Credits

Built with: