International Journal of Interactive Mobile Technologies (iJIM) – eISSN: 1865-7923 – Vol. 14, No. 5, 2020 Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature A Web-Based Mobile Attendance System with Facial Recognition Feature https://doi.org/10.3991/ijim.v14i05.13311 Noradila Nordin (), Nurul Husna Mohd Fauzi Universiti Utara Malaysia, Kedah, Malaysia nnoradila@uum.edu.my Abstract—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 be- ing enforced has shown to be vulnerable, inaccurate and time-consuming espe- cially in a large classroom. It is difficult to identify absentees and proxy at- tendees 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 al- low the attendance system to be used in classrooms automatically and efficient- ly 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. 1 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, time- consuming 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 iJIM ‒ Vol. 14, No. 5, 2020 193 https://doi.org/10.3991/ijim.v14i05.13311 mailto:nnoradila@uum.edu.my Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature also be time-consuming for students in a large classroom to queue to scan their fin- gerprint 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 attend- ance 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. 2 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 manage- ment 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 activi- ties to improve their academic performance and reduce the number of absences with- out 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. 2.1 Project objective This project proposes a web-based mobile attendance system with facial recogni- tion 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 attend- ance marking easier and has more validity than the traditional method. 194 http://www.i-jim.org Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature 2.2 Literature review Kawaguchi, Y. et al. [2] proposed a face recognition-based lecture attendance sys- tem 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 posi- tioned at the centre in the front part of the class to enable frontal images of the stu- dents' 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 pat- terns 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 de- scription 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 archi- tecture flow of the MAS-FR. iJIM ‒ Vol. 14, No. 5, 2020 195 Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature Fig. 1. System architecture of MAS-FR. 3 Methodology of Study The requirement planning phase started with collecting the data based on the su- pervisor 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 differ- ent 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 devel- oped 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 soft- ware 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 enhance- ment. Finally, the system was ready to use by the end-user. The maintenance will be done to ensure that everything is working fine. 4 Design and Development of MAS-FR This section describes the design and development of a system to monitor the at- tendance of the student. This section contains information about the requirement gath- ering 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 196 http://www.i-jim.org Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature 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 re- quirements. The structural components of the system and the development of MASFR for students are represented in the class diagram as illustrated in Figure 2. Fig. 2. Student class diagram for MAS-FR. 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 inter- face of MAS-FR. Fig. 3. The interface of MAS-FR. iJIM ‒ Vol. 14, No. 5, 2020 197 Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature Fig. 4. The webcam face detection function of MAS-FR. 5 Evaluation This section explains the evaluation method, type of evaluation, participants in- volved 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 pur- posed 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 198 http://www.i-jim.org Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature from the beginning to the end. The developer will observe the entire interaction. Last- ly, in step 4, the participants will answer the post-task questionnaire given. 5.1 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%). 5.2 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. Fig. 5. Respondents impression of MAS-FR. Figure 6 shows the respondents responses in term of the usability of the MAS-FR. They showed high interest in the system and rated it as very good and excellent. 0 0 1 00 10 0 0 8 2 5 1 0 3 0 0 19-24 years old 25-35 years old 36-50 years old 51 years and above Poor Fair Good Very Good Excellent iJIM ‒ Vol. 14, No. 5, 2020 199 Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature Fig. 6. Respondents experience in using MAS-FR. Therefore, based on the result it can be seen that users strongly agree on this appli- cation because easy to understand and very useful for the user, especially for the su- pervisor. Majority of respondents’ have responded positively. Most of them also sup- port 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. 6 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. 7 References [1] Credé, M., Roch, S. G., &Kieszczynka, U. M. (2010). Class attendance in college: A meta- analytic review of the relationship of class attendance with grades and student characteris- tics. Review of Educational Research, 80(2), 272-295. https://doi.org/10.3102/0034654310 362998 0 0 0 00 0 2 0 5 0 0 1 10 5 2 0 3 2 0 0 19-24 years old 25-35 years old 36-50 years old 51 years and above Poor Fair Good Very Good Excellent 200 http://www.i-jim.org https://doi.org/10.3102/0034654310362998 https://doi.org/10.3102/0034654310362998 Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature [2] Ong, Y. S. (2016). Reframing non-attendance of students: Case study of a Malaysia private university. European Journal of Education Studies. [3] Pani, P. K., & Kishore, P. (2016). Absenteeism and performance in a quantitative module A quantile regression analysis. Journal of Applied Research in Higher Education, 8(3), 376-389. https://doi.org/10.1108/jarhe-05-2014-0054 [4] Ujan, I. A., & Ismaili, I. A. (2011). Biometric attendance system. In The 2011 IEEE/ICME International Conference on Complex Medical Engineering (pp. 499-501). IEEE. https:// doi.org/10.1109/iccme.2011.5876792 [5] Chandramohan, J., Nagarajan, R., Dineshkumar, T., Kannan, G., & Prakash, R. (2017). At- tendance monitoring system of students based on biometric and gps tracking system. Inter- national Journal of Advanced engineering, Management and Science, 3(3). https://doi.org/ 10.24001/ijaems.3.3.16 [6] Kunda, D., &Chishimba, M. (2018). A survey of android mobile phone authentication schemes. Mobile Networks and Applications, 1-9. https://doi.org/10.1007/s11036-018- 1099-7 [7] Kawaguchi, Y., Shoji, T., Weijane, L. I. N., Kakusho, K., &Minoh, M. (2005). Face recognition-based lecture attendance system. In The 3rd AEARU workshop on network education (pp. 70-75). [8] Shehu, V., &Dika, A. (2010). Using real time computer vision algorithms in automatic at- tendance management systems. In Proceedings of the ITI 2010, 32nd International Confer- ence on Information Technology Interfaces (pp. 397-402). IEEE. [9] Jha, A. (2007). Class room attendance system using facial recognition system. The Interna- tional Journal of Mathematics, Science, Technology and Management, 2(3), 4-7. [10] Kar, N., Debbarma, M. K., Saha, A., & Pal, D. R. (2012). Study of implementing automat- ed attendance system using face recognition technique. International Journal of computer and communication engineering, 1(2), 100. https://doi.org/10.7763/ijcce.2012.v1.28 [11] Pujol, F. A., & García, J. C. (2012). Computing the principal local binary patterns for face recognition using data mining tools. Expert Systems with Applications, 39(8), 7165-7172. https://doi.org/10.1016/j.eswa.2012.01.074 [12] Goldstein, A. J., Harmon, L. D., &Lesk, A. B. (1971). Identification of human faces. Pro- ceedings of the IEEE, 59(5), 748-760. https://doi.org/10.1109/proc.1971.8254 [13] Fischler, M. A., &Elschlager, R. A. (1973). The representation and matching of pictorial structures. IEEE Transactions on computers, (1), 67-92. https://doi.org/10.1109/t-c.1973. 223602 [14] Abibi, S. S. R. (2000). Simulating evolution: connectionist metaphors for studying human cognitive behaviour. In 2000 TENCON Proceedings. Intelligent Systems and Technologies for the New Millennium (Cat. No. 00CH37119) (Vol. 1, pp. 167-173). IEEE. https://doi. org/10.1109/tencon.2000.893563 [15] Cui, Y., Jin, J. S., Luo, S., Park, M., & Au, S. S. (2009). Automated pattern recognition and defect inspection system. In 2009 Fifth International Conference on Image and Graphics (pp. 768-773). IEEE. https://doi.org/10.1109/icig.2009.144 [16] Balcoh, N. K., Yousaf, M. H., Ahmad, W., &Baig, M. I. (2012). Algorithm for efficient at- tendance management: Face recognition-based approach. International Journal of Comput- er Science Issues (IJCSI), 9(4), 146. iJIM ‒ Vol. 14, No. 5, 2020 201 https://doi.org/10.1108/jarhe-05-2014-0054 https://doi.org/10.1109/iccme.2011.5876792 https://doi.org/10.1109/iccme.2011.5876792 https://doi.org/10.24001/ijaems.3.3.16 https://doi.org/10.24001/ijaems.3.3.16 https://doi.org/10.1007/s11036-018-1099-7 https://doi.org/10.1007/s11036-018-1099-7 https://doi.org/10.7763/ijcce.2012.v1.28 https://doi.org/10.1016/j.eswa.2012.01.074 https://doi.org/10.1109/proc.1971.8254 https://doi.org/10.1109/t-c.1973.223602 https://doi.org/10.1109/t-c.1973.223602 https://doi.org/10.1109/tencon.2000.893563 https://doi.org/10.1109/tencon.2000.893563 https://doi.org/10.1109/icig.2009.144 Short Paper—A Web-Based Mobile Attendance System with Facial Recognition Feature 8 Authors Noradila Nordin is a Senior Lecturer at the School of Computing, Universiti Utara Malaysia 06010, Kedah, Malaysia. She obtained her PhD from University College London, United Kingdom. Her research interest is in the domain of Wireless Sensor Network, quality of service and Internet security. nnoradila@uum.edu.my Nurul Husna Mohd Fauzi is a student at School of Computing, Universiti Utara Malaysia, Kedah, Malaysia. husna_a@gmail.com Article submitted 2020-01-13. Resubmitted 2020-03-01. Final acceptance 2020-03-03. Final version published as submitted by the authors. 202 http://www.i-jim.org mailto:nnoradila@uum.edu.my mailto:husna_a@gmail.com