A Web-Based Mobile Attendance System with Facial Recognition Feature

Attendance marking in a classroom is one of the methods used to track the student’s presence in the lecture. The conventional method that is being enforced has shown to be vulnerable, inaccurate and time-consuming especially in a large classroom. It is difficult to identify absentees and proxy attendees based on the conventional attendance marking method. In order to overcome the challenges faced in the conventional method, a web-based mobile attendance system with facial recognition feature is proposed. It incorporated the existing mobile devices with a camera and the face recognition system to allow the attendance system to be used in classrooms automatically and efficiently with minor implementation requirements. The system prototype received positive responses from the volunteers who tested the system to replace the conventional attendance marking. Keywords—Mobile attendance, facial recognition, identification, attendance management.


Introduction
Lecture attendance has shown to directly effecting the academic performance as it influences the student's engagement and learning in the classroom which otherwise is neglected [1, 2,3]. It allows hands-on learning with various types of materials such as demonstrations, discussions and student-centred learning where students can share their knowledge openly in the classroom with the guidance from the instructor in person. Thus, the conventional method in attendance marking is still being used and enforced widely in universities. Typically, the conventional method used is through manual attendance marking on a sheet of paper. This method relies mainly on the human factor which exposes the method to be vulnerable to forgery, inaccurate, timeconsuming and a source of distraction in a large classroom.
In order to overcome the problems faced in the conventional method, an automated system is introduced and developed. Fingerprint biometric attendance system is one of the earlier technologies that is implemented and widely used, as fingerprints are the oldest form of biometric identification due to the uniqueness of fingerprint features [4,5]. However, it requires a fingerprint scanner to be installed which can be costly to be implemented and maintained throughout the large area of the universities. It might also be time-consuming for students in a large classroom to queue to scan their fingerprint at the scanner before the class starts.
In addition to fingerprint, face recognition is another biometric technique which uses the facial features of the person for identification. Similar to a fingerprint, the facial features of every human are unique and can be used to identify and verify a person. Due to its usefulness, the face recognition technology has been evolved and incorporated in many mobile systems as a security feature to authenticate and control the user's access to the device [6]. Using a similar concept, facial recognition attendance system through the camera from the mobile phone can be used to identify and mark the student's attendance without the need of external accessory. This removes the complications of installing specific devices as mobile phones can be directly used in the automated attendance system with the support of the Internet connection and the built-in camera to validate the student's presence. However, due to the constraints in creating a secure system and the ability to exploit existing technologies, facial recognition in attendance management system has not been widely implemented in universities in Malaysia.

Background
This section describes the background of the attendance system and the related studies investigating the functional system of smart attendance. Later, this section discussed the role of information technology in facilitating the creation and management of attendance. Attendance marking is one of the ways to keep track of student's presence in classes to ensure students participate in the lectures and any class activities to improve their academic performance and reduce the number of absences without any reasonable causes.
Automated facial recognition attendance system helps to simplify the attendance marking processes by matching the current facial detected from the mobile phone camera to the images that have been taken and kept in the central database. The matching and recognition of the images would result in the attendance of the student to be marked as present for the particular class in the database.

Project objective
This project proposes a web-based mobile attendance system with facial recognition feature (MAS-FR) to simplify attendance marking in universities. This project was tested with students from Universiti Utara Malaysia (UUM). In UUM, traditional attendance system which is signing on a piece of paper is being used and it takes a long time for all students to sign their attendance especially in a large lecture hall that can consist of up to 500 students and a piece of paper. Using face recognition methods it can reduce the signature fraud. Thus, the system has been created to make attendance marking easier and has more validity than the traditional method.

Literature review
Kawaguchi, Y. et al. [2] proposed a face recognition-based lecture attendance system that the results of face recognition are obtained through continuous observation. In their work, students' seat information estimation is also integrated to improve face detection effectiveness. Two kinds of cameras were used where one sensing camera is used to obtain the seats and another camera captures the student's face. In continuous observation, student's image is captured and matched with the database continuously to accurately detect and interpret the faces to estimate the attendance and position of each student.
Shehu, V. et al. [3] proposed using real-time computer vision and face recognition algorithms that implement a server-based module that identifies and classifies faces using Eigen faces approach. In their proposal, the real-time face detection algorithm is integrated into an existing Learning Management System (LMS) that is used to match the faces of the students enrolled in that class. In the setup, a rotating camera is positioned at the centre in the front part of the class to enable frontal images of the students' faces to be captured at the interval of every five minutes to successfully identify all faces.
Jha, A. [4] proposed the use of Principle Component Analysis (PCA) and Linear Discriminate Analysis (LDA) algorithms in colour and face detection and feature extraction. In these techniques, a statistical approach is used for face recognition in matching the captured images to the stored images. Similar to [4], Kar, N. et al. [5] proposed a system that integrated PCA algorithm for face recognition where the patterns in the data are analyzed and expressed as eigenvector before it is matched with the existing stored image. The system uses a web camera in face detection where students need to stand in front of it for the image to be captured and extracted for the attendance to be marked based on the PCA algorithm performed.
Pujol, F. et al. [6] proposed the use of Local Binary Patterns (LBP) for face description as it employed a statistical feature extraction approach. The face region is separated into 9-region mask where each region has a different influence in the face recognition process based on the obtained set weighted mask from data mining.
MAS-FR implemented a JavaScript API with TensorFlow for face detection and recognition. It uses Tiny Face Detector model with 68 points face landmark. The Face Recognition Network returns a face descriptor containing 128 values that are used to compare and identify with the captured image. The face descriptor of each person is stored in the database as the basis of the identification.
MAS-FR helps the students and also lecturers to monitor the attendance in their class. It will help the students in terms of time management for not being late to class. Moreover, there will be no more signature fraud and also the class will be balanced with the number of students and facials available. Figure 1 showed the system architecture flow of the MAS-FR.

Methodology of Study
The requirement planning phase started with collecting the data based on the supervisor need and doing some research based on the current application. The main scope of this application focused on the face recognition attendance, where student captured their faces using the system and marked as present. To develop this system, a preliminary design for the system was created. The interface design would be different based on the end-user such as student and lecturer. Information gathered from quick design was modified to form the prototype, which represents the real system. Once the prototype is completed, the proposed system was presented to the supervisor for evaluation of the actual needed to the system and it can have some weakness from the prototype. When the supervisor is not satisfied with the prototype, the current prototype was refined according to the requirement. The new prototype was developed with added information suggested by the supervisor. The development phase started when the supervisor satisfied with the prototype. The system was created using JavaScript coding in Notepad++, to make each interface is functioned according to the requirement needed. In the testing phase contain software and user testing. The software testing was tested by the developer intend to find the syntax and logic error. The syntax and logic error on the system was corrected and rebuild. This process ends until the system is robustness. After that, the user or respondents only can test the system in term to evaluate the usability, functionality, performance and satisfaction. The evaluated result of the user testing recorded to future improvement and enhancement. Finally, the system was ready to use by the end-user. The maintenance will be done to ensure that everything is working fine.

Design and Development of MAS-FR
This section describes the design and development of a system to monitor the attendance of the student. This section contains information about the requirement gathering process start with collecting the data based on the supervisor need and by doing some research based on the current application. Besides, the survey was collected from UUM students to get some idea of the functionality for the system. Based on the data collected, it was analysed and separated into functional and non-functional requirements. The structural components of the system and the development of MASFR for students are represented in the class diagram as illustrated in Figure 2. In general, MAS-FR helps the students and lecturers to monitor the attendance of the class. MAS-FR was embedded with several functions for the lecturers such as the Login. Logout, Edit Profile, Edit Class, Add Class., while, for the student, they can access, Login, Logout, Add Class, Edit Class. Figure 3 and 4 show the selected interface of MAS-FR. iJIM -Vol. 14, No. 5, 2020

Evaluation
This section explains the evaluation method, type of evaluation, participants involved and the procedure for conducting the evaluation. The quantitative data is used to assess the usability level of MAS-FRby using questionnaire printed form. The type of evaluation used for MAS-FR testing is in terms of usability and interface. In terms of the usability will be assessed through how the system works from beginning to end. Therefore, users will evaluate whether the system is easy to use or not and evaluate the functions available on each page. Next, in terms of interfaces evaluate how the level of user understanding on the order of menu and buttons, font size, colour and the outlook of the system.
The evaluation was conducted on 10 respondents who are from UUM's Bank Rakyat Residential Hall. This project has been extended to 20 more respondents from the public during a poster presentation to test the system. The information that has been taken from the respondents are in terms of name, matric number and phone number. A survey was developed that contained two sections of closed-response (Yes/No and Likert-type scaling). The questionnaire consists of 13 questions at about the five-point Likert type scale, running from 1 "Poor" to 5 "Excellent". In section A of the instrument asked the respondents to provide their demographic information. In section B of the instrument asked the respondent about the function and features of MAS-FR. The procedure for conducting the evaluation separated into 4 steps. Firstly, step 1 select one participant who currently a UUM student.
Step 2 explained the purposed of the system. Before starting the evaluation, the participant will be briefed on the project objective. Developers also tell the users how the system is going to work and how they going to use it.
Step 3, the participants interact with the application from the beginning to the end. The developer will observe the entire interaction. Lastly, in step 4, the participants will answer the post-task questionnaire given.

The respondents' demographic information
Based on the analysis revealed that the initial 10 participants (100%) are students. 20 participants are from different background. Through the age group evaluation, respondents, the highest number of respondents is from group age 19-24 years old, which is 8 participants (26.7%) while another 15 are from 25-35 years old (50%). 6 respondents in the age group of 36-50 years old (20%) and 1 respondent in the age group of 51 years and above (3.3%). As for gender evaluation, there were 15 male participant (50%) and 15 female participants (50%).

The usability of MAS-FR
There was an analysis conducted on the respondent's responses in section B of the post-task questionnaire. The section measures the respondents' perception of MAS-FR usefulness and ease of use. It also measured the respondents' satisfaction towards MAS-FR. Figure 5 shows the respondents responses in term of their impression of the website. On average, they answered, Good. It can be concluded that the prototype is easy to be used and understood.  Therefore, based on the result it can be seen that users strongly agree on this application because easy to understand and very useful for the user, especially for the supervisor. Majority of respondents' have responded positively. Most of them also support the development of MAS-FR to prevent signature fraud. Also, there are some suggestions for improvements such as the system should have in application, not on the website. However, upgrades need to be made so that the design of the system is more user-friendly because there are still respondents who need guidance from the developer to show the guidance on how to use the system. Therefore, this assessment can identify some weaknesses in the system that the respondent can detect and need to be improved. Therefore, the result of this evaluation will identify the strengths and weakness of the system.

Conclusion
In this paper, MAS-FR is a system for lecturer and students is introduced. Prior to the development of MAS-FR, the lecturers monitor the student's attendance manually by using a piece of paper. The system is expected to help lecturers to monitor student attendance. However, MAS-FR likewise can be utilized for other organization. For example, the employee uses the system to ensure that there were no more latecomers to come to work.