(Archived)
SISOS (Sign In Sign Out System) was a web app I created during middle school, in collaboration with Arjun Verma.
I primarily worked on the frontend, while Arjun primarily worked on the backend.
(Screenshot - SISOS open in Microsoft Edge (Legacy), dated 1st October 2015; Click to enlarge)
Note: The architecture and code quality of the application are a reflection of our middle school developer skills 😅
SISOS was built to address our school's problem with the lack of accurate attendance records for students staying after school - maintaining these records was important for various reasons, but most importantly for a situation where there were to be a fire or earthquake evacuation.
The application was developed as a responsive web app where students could sign in/out using school email accounts to indicate if they are present on the premises after official school hours.
Staff could login and check attendance of students in the premises at any given time.
The app was deployed on the school's intranet for a while and used as a pilot/interim solution.
Flow of the app/solution:
- Student logs in using a personal or school device within 20 mins of the end of school.
- Student's location is verified, and attendence is logged.
- Student logs out using a school device placed on the security desk at the exit gate (enforced by security)
- If the student was logged-in, they are removed from the attendence list.
- If the student was not logged-in, they are logged for non-complinace and requested to comply with the process next time.
- Database: Micorosoft SQL Sever.
- Backend: Java EE on Apache Tomcat Server.
- Authentication: Microsoft Active Directory.
- Frontend: HTML5, CSS3, JS/JQuery, Zurb Foundation.
(Click to expand/collapse sections)
System Unavailable Page
(Above) Loading State - determining if the system is available. (GIF)
(Above) System unavailalbe page - Desktop, dated 1st October 2015
Students were allowed to login 10 mins before school ended, and upto 20 mins after. The typo in 'available' was fixed at a later point 😅
Login/Logout Page
Both the login and logout pages looked identical, however the logout page was protected by a master password and was only opended on a laptop on the security desk at the exit gate.
The background image of the page would differ by the day of the week. The screnshots below are taken on Wednesday and Tuesday respectively.
(Above) Login/logout page asking for username on a Wednesday - Desktop
(Above) Login/logout page asking for password on a Tuesday - Desktop
(Above) Login page - Mobile
Student List - Admin Page
(Above) Student List visible to school employees post login - Desktop
(Above) Marking attendence on student list page - Desktop
(Above) Student List visible to school employees post login - Mobile
(Above) Printout of student list
Post-Login/Logout States
(Above) Login loading state - Desktop
(Above) Login success state - Desktop
(Above) Login/logout incorrect username/password state - Desktop
(Above) State for student trying to login as admin after system has closed - Desktop, dated 25 August 2015
(Above) Logout success state - Desktop
(Above) Logout without login state (student only) - Desktop
(Above) Login/logout incorrect username/password state - Mobile