During the undergraduate Database Concepts course, the lecturer assigned a course project to each group of 3 students. Each group was required to build a database utilizing the various functionalities and queries we had studied. While the task itself seemed straightforward and a great opportunity to apply our knowledge, the real challenge was finding a unique way to implement the database concepts.
Observing the barriers within our college, we quickly noticed a lack of technological infrastructure, particularly the absence of a digital students recording system. This inspired me to think of a simple system —based on my skills— that could streamline and accelerate the process.
Students Attendance is a website that allows university teachers and students to log in and record attendance themselves. Teachers and admins have the ability to edit or delete students' information or accounts as needed.
The technologies utilized are SQL Server for the database and ASP.NET Web Forms for the website.
The User Flow of Attendance Recording Website
Database diagram featuring three tables: Accounts (attributes: fullname, email, photo, privilege, password), Students, and Attendance. Operations include modify, view, and check. Lecturers can modify multiple student records and manage attendance, while students can only modify their own details, check, and record their attendance.
My friends (Sajjad Abdul-Monim and Sumaya) and I focused on building a sustainable database that could easily scale up in the future, allowing me to continue developing the recording system. After defining the project idea and its purpose, Sumaya began initializing the database, while I focused on designing the website. Meanwhile, Abdul-Monim and I worked together on programming the website.
We successfully met all the project requirements and earned full marks for the assignment. Along the way, we gained valuable technical skills in database design and web development, making this project a rewarding learning experience🎉
After our success in the database project, I must admit there were several obstacles along the way:
The Microsoft ecosystem is designed as an integrated toolkit, which can sometimes feel restrictive. For instance, connecting an application API to technologies from other platforms, such as Non-SQL databases or React, proved challenging.
Additionally, we encountered technical limitations with ASP.Net Web Forms. This framework has limited flexibility in both frontend and backend development, making future scalability difficult. One specific challenge was customizing the GridView table for our needs. For example, it was nearly impossible to create a VIEW 👁️ that displayed each student’s photo, name, and attendance checkbox while allowing us to efficiently MARK ☑️ attendance and SUBMIT 📨 the records.
Table View of students shows 3 columns Photo, Fullname, Attendance checkbox.
There was a need to complete the project using more flexible technologies that would allow for easier upgrades and scalability in the future 🔃, along with finalizing the design of all pages.
<aside> 🌐
View version ONE 👀👉 https://sajjadhasann.github.io/studentsAttend
</aside>
7 months later, I revisited the Students’ Attendance project with renewed passion, aiming to elevate my knowledge and expand my expertise by leveraging new technologies. The focus shifted toward design enhancements, creating fully responsive pages, integrating client-side and server-side functionalities, and implementing component-based coding for better scalability and maintainability.
During this period, I delved into the MERN Stack—a combination of MongoDB (NoSQL database), Express.js (back-end framework), React.js (front-end library), and Node.js (runtime environment). This stack was chosen for its flexibility and its alignment with the project’s purpose.
Although the development process demanded significant effort, the outcomes were far more effective and promising compared to the previous version, making the learning and practical application highly rewarding.
Core developed features include: