Smart Attendance System Project In Flask

Creating a Smart Attendance System is an advanced-level project that involves multiple components such as user authentication, attendance tracking, reporting, and more. Below, I'll provide a detailed database structure and Flask application code with Bootstrap 5 for the frontend.

Database Structure

The database will be designed using SQLAlchemy (ORM for Flask). Here's the schema:

Tables

Users Table: Stores user information (students, teachers, admins).
Courses Table: Stores course details.
Enrollments Table: Links students to courses.
Attendance Table: Tracks attendance records.
Sessions Table: Stores class session details.

Flask Application Structure

The Flask application will have the following structure:


smart_attendance/
│
├── app/
│   ├── __init__.py
│   ├── models.py
│   ├── forms.py
│   ├── routes.py
│   ├── templates/
│   │   ├── base.html
│   │   ├── index.html
│   │   ├── login.html
│   │   ├── register.html
│   │   ├── dashboard.html
│   │   ├── mark_attendance.html
│   │   ├── manage_courses.html
│   │   └── attendance_reports.html
│   └── static/
│       ├── css/
│       │   └── styles.css
│       └── js/
│           └── scripts.js
│
├── config.py
├── run.py
├── requirements.txt
└── venv/  # Virtual environment

Flask Application Code

1. Install Required Packages

pip install flask flask-sqlalchemy flask-login flask-bcrypt flask-wtf bootstrap-flask

Flask Application Code


from flask import Flask, render_template, redirect, url_for, flash, request
from flask_sqlalchemy import SQLAlchemy
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
from flask_bcrypt import Bcrypt
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, SelectField, DateField, TimeField
from wtforms.validators import DataRequired, Email, Length
from datetime import datetime
app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///attendance.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
bcrypt = Bcrypt(app)
login_manager = LoginManager(app)
login_manager.login_view = 'login'
# Database Models (as defined above)
@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))
# Forms
class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Login')
class RegistrationForm(FlaskForm):
    full_name = StringField('Full Name', validators=[DataRequired(), Length(max=100)])
    username = StringField('Username', validators=[DataRequired(), Length(max=50)])
    email = StringField('Email', validators=[DataRequired(), Email(), Length(max=100)])
    password = PasswordField('Password', validators=[DataRequired()])
    role = SelectField('Role', choices=[('student', 'Student'), ('teacher', 'Teacher'), ('admin', 'Admin')], validators=[DataRequired()])
    submit = SubmitField('Register')
# Routes
@app.route('/')
def home():
    return render_template('index.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        user = User.query.filter_by(username=form.username.data).first()
        if user and bcrypt.check_password_hash(user.password, form.password.data):
            login_user(user)
            return redirect(url_for('dashboard'))
        else:
            flash('Login Unsuccessful. Please check username and password', 'danger')
    return render_template('login.html', form=form)
@app.route('/register', methods=['GET', 'POST'])
def register():
    form = RegistrationForm()
    if form.validate_on_submit():
        hashed_password = bcrypt.generate_password_hash(form.password.data).decode('utf-8')
        new_user = User(username=form.username.data, password=hashed_password, full_name=form.full_name.data, email=form.email.data, role=form.role.data)
        db.session.add(new_user)
        db.session.commit()
        flash('Your account has been created! You can now log in', 'success')
        return redirect(url_for('login'))
    return render_template('register.html', form=form)
@app.route('/dashboard')
@login_required
def dashboard():
    return render_template('dashboard.html', name=current_user.full_name)
@app.route('/logout')
@login_required
def logout():
    logout_user()
    return redirect(url_for('home'))
# Additional routes for attendance management, course management, etc.
# ...
if __name__ == '__main__':
    db.create_all()  # Create database tables
    app.run(debug=True)

Bootstrap 5 Integration

To integrate Bootstrap 5, include the Bootstrap CDN in your HTML templates. Here’s an example of how to structure your base template:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Smart Attendance System</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('home') }}">Attendance System</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    {% if current_user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('dashboard') }}">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('login') }}">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('register') }}">Register</a>
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="container mt-4">
        {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="alert alert-warning" role="alert">
                    {{ messages[0] }}
                </div>
            {% endif %}
        {% endwith %}
        {% block content %}{% endblock %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Additional Features and Pages

To enhance the Smart Attendance System, you can implement additional features such as attendance reports, course management, and user profiles. Below are examples of how to create these pages using Flask and Bootstrap 5.

1. Attendance Management Page

This page allows teachers to mark attendance for a specific session.


@app.route('/attendance/<int:session_id>', methods=['GET', 'POST'])
@login_required
def mark_attendance(session_id):
    session = Session.query.get_or_404(session_id)
    students = Enrollment.query.filter_by(course_id=session.course_id).all()
    
    if request.method == 'POST':
        for student in students:
            status = request.form.get(f'student_{student.student_id}')
            attendance_record = Attendance(session_id=session.id, student_id=student.student_id, status=status)
            db.session.add(attendance_record)
        db.session.commit()
        flash('Attendance marked successfully!', 'success')
        return redirect(url_for('dashboard'))
    
    return render_template('mark_attendance.html', session=session, students=students)

2. Attendance Management Template


{% extends 'base.html' %}
{% block content %}
<h2>Mark Attendance for {{ session.date }}</h2>
<form method="POST">
    <table class="table">
        <thead>
            <tr>
                <th>Student Name</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for student in students %}
            <tr>
                <td>{{ student.user.full_name }}</td>
                <td>
                    <select name="student_{{ student.student_id }}" class="form-select">
                        <option value="present">Present</option>
                        <option value="absent">Absent</option>
                        <option value="late">Late</option>
                    </select>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <button type="submit" class="btn btn-primary">Submit Attendance</button>
</form>
{% endblock %}

Course Management Page

This page allows admins to manage courses.


@app.route('/courses', methods=['GET', 'POST'])
@login_required
def manage_courses():
    if current_user.role != 'admin':
        flash('You do not have permission to access this page.', 'danger')
        return redirect(url_for('dashboard'))
    
    courses = Course.query.all()
    
    if request.method == 'POST':
        course_name = request.form['course_name']
        course_code = request.form['course_code']
        teacher_id = request.form['teacher_id']
        new_course = Course(name=course_name, code=course_code, teacher_id=teacher_id)
        db.session.add(new_course)
        db.session.commit()
        flash('Course added successfully!', 'success')
        return redirect(url_for('manage_courses'))
    
    return render_template('manage_courses.html', courses=courses)

4. Course Management Template


{% extends 'base.html' %}
{% block content %}
<h2>Manage Courses</h2>
<form method="POST">
    <div class="mb-3">
        <label for="course_name" class="form-label">Course Name</label>
        <input type="text" class="form-control" id="course_name" name="course_name" required>
    </div>
    <div class="mb-3">
        <label for="course_code" class="form-label">Course Code</label>
        <input type="text" class="form-control" id="course_code" name="course_code" required>
    </div>
    <div class="mb-3">
        <label for="teacher_id" class="form-label">Assign Teacher</label>
        <select class="form-select" id="teacher_id" name="teacher_id" required>
            {% for teacher in users if teacher.role == 'teacher' %}
            <option value="{{ teacher.id }}">{{ teacher.full_name }}</option>
            {% endfor %}
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Add Course</button>
</form>
<h3>Existing Courses</h3>
<table class="table">
    <thead>
        <tr>
            <th>Course Name</th>
            <th>Course Code</th>
            <th>Assigned Teacher</th>
        </tr>
    </thead>
    <tbody>
        {% for course in courses %}
        <tr>
            <td>{{ course.name }}</td>
            <td>{{ course.code }}</td>
            <td>{{ course.teacher.full_name }}</td>
        </tr>        
        {% endfor %}
    </tbody>
</table>
{% endblock %}

5. Reporting Page

You can also create a reporting page to view attendance statistics.


@app.route('/reports')
@login_required
def attendance_reports():
    if current_user.role not in ['admin', 'teacher']:
        flash('You do not have permission to access this page.', 'danger')
        return redirect(url_for('dashboard'))
    
    attendance_data = db.session.query(Attendance, User).join(User).all()
    return render_template('attendance_reports.html', attendance_data=attendance_data)

6. Reporting Template


{% extends 'base.html' %}
{% block content %}
<h2>Attendance Reports</h2>
<table class="table">
    <thead>
        <tr>
            <th>Student Name</th>
            <th>Course</th>
            <th>Status</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
        {% for record, user in attendance_data %}
        <tr>
            <td>{{ user.full_name }}</td>
            <td>{{ record.session.course.name }}</td>
            <td>{{ record.status }}</td>
            <td>{{ record.marked_at.strftime('%Y-%m-%d') }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

Conclusion

This advanced Smart Attendance System project provides a comprehensive structure for managing users, courses, and attendance. You can further enhance it by adding features like email notifications, data export options, and more detailed reporting capabilities. The use of Flask and Bootstrap 5 ensures a modern and responsive web application.