An Electronic and Web-Based Authentication, Identification, and Logging Management System

T he need for participants’ performance assessments in academia and industry has been a growing concern. It has attendance, among other metrics, is a key factor in engendering a holistic approach to decision-making. For institutions or organizations where managing people is an important yet challenging task, attendance tracking and management could be employed to improve this seemingly time-consuming process while keeping an accurate attendance record. The manual/quasi-analog approach of taking attendance in some institutions could be unreliable and inefficient, leading to inaccurate computation of attendance rates and data loss. This work, therefore, proposes a system that employs embedded technology and a biometric/ web-based application to enhance attendance management. The hardware encompasses the integration of an ESP8266 NodeMCU and the biometric AS608 fingerprint sensor interfaced with the database for which the front-end and back-end integration was through the React framework. The system uses a web application that displays the attendance results and scheduled course data from its database, provides feedback to lecturers on which student missed classes and calculates a student’s average attendance for the semester. By implementing this system, the accuracy of student attendance is expected to experience an appreciable improvement, eliminate proxy signing, provide a more secure alternative for attendance recording, curtail tardiness to classes, and ultimately improve student productivity on execution.

The attendance management system is one application where the ingenuity in electronic communication devices has attracted research attention and innovation.Attendance systems involve the processes, methods, and technologies used in managing and tracking the presence or absence of people in a particular setting and various sectors such as health care, education, events, workplace, and government institutions for identification, security, and administrative purposes (Kizza, 2023).The processes take various forms, from paperbased traditional methods to more modern approaches.These technologies provide accurate, secure, and more efficient ways of attendance management for streamlined operations and attendance data-driven recommendations.Attendance management in educational institutions can be quite challenging due to the limitation of paper and file-based methods.Each institution has its standards regarding a student's attendance, which highlights the importance of keeping an accurate attendance record (Younis et al., 2012).The current system of taking attendance has many restrictions, such as difficulties in computing percentage attendance due to inaccuracies and the tedious and time-consuming process (Seelam et al., 2021;Keerthi et al., 2022).A biometric approach can be adopted For a biometric system to perform optimally, the morphological characteristics used in determining a person's identity must satisfy a set of requirements.The characteristic targeted must be universal to every human being, meaning it should be versatile in all aspects.It has to have a certain degree of uniqueness for the system to be secure and accurately collect data.The said feature should be a more permanent characteristic.It should not change so much over time because the system counts on the data to be the same and always gives the same outcome.Lastly, the characteristics should be quantitative and easy to collect and process (Lin et al., 1997).
The main focus of creating a system that collects biometric data is that the data should be collected easily.Otherwise, the system will fail to perform its functions.As given in Table 1, the performances of various biometric technologies in meeting the requirements of biometric identification are compared to show how each characteristic measured meets the requirement.In addition to accuracy, biometric features must be evaluated based on their ability to prevent circumvention and fraudulent activities (which can impact false acceptance rates) and their overall acceptability by users.However, accuracy is the most important factor to consider when designing a reliable biometric system To build a successful biometric system, the following components would be required: a scanner to record the identifier, assess its quality, and generate a compact representation of the biometric identifier; software to control scanner modes and measure observed and stored data; and a database to store biometric information for future comparison (Alexander, 2021) In recent times, fingerprint biometrics has been recognized to be one of the most prevalent forms of automatic identification used in biometrics.It is cost-efficient, easy to use, accessible, widely distributed, and hard to defraud, making it a convenient and functional tool for identity verification and authentication.This biometric system uses an identifier that you possess (fingerprints), and its advantage is that every person would always have their fingerprints on them, belonging to them alone (Okta, 2023).
Fingerprints are unique patterns of ridges and valleys on the human fingers formed by the flow-like ridges on the skin's surface.These ridges, also known as single curved segments and valleys, the spaces between two ridges, are determined by the initial state of the embryonic mesoderm during development.The uniqueness of the human fingerprint can be summarized by three principles: namely, each finger has unique epidermal ridges and valleys, fingerprints vary within limits that allow for classification, and the ridges and valleys are permanent and unchanging for a given finger (Lin et al., 1997).In the design of a fingerprint verification system, all these characteristics must be catered for with no room for error.Therefore, a fingerprint verification system must have the following essential design components: acquisition, representation (template) and preprocessing, feature extraction, and minutiae matching.
In acquiring fingerprint data, one (more or less) has two options.It could be used to obtain the impression of a fingerprint on paper and scan the fingerprint on paper with a scanner in a retrograde manner.Another method would be to use a live scanner that detects and creates the fingerprint image by determining the light and dark areas created by the fingerprint ridges.The former is a bit cumbersome in real applications and may sometimes be inaccurate.The latter case is the more acceptable data acquisition method (Socheat and Wang, 2020).The technique used by these live scanners (also known as optical scanners) is called Optical Frustrated Total Internal Reflection, and this technique uses a glass prism/platen, LED light source, and charge-couple device (CCD) camera for producing fingerprint images.When the fingers are placed on the prism/platen, the ridges are in contact with the glass platen, while the valleys are not.The CCD and a light-sensitive microchip are placed on the other side of the glass platen.The microchip creates a digital image of the ridges and valleys of the fingerprint, resulting in a corresponding fingerprint image on the CCD (Miguel, 2018).In a fingerprint image, ridges and valleys often run in parallel.When analyzed globally, fingerprint patterns exhibit one or more regions where the ridges and valleys create a pattern of distinct shapes.These regions may be classified into three topologies: loop, arch, and whorl.The orientation of a ridge in a grid of n by m pixels can be estimated using the process of ridge orientation estimation.This method uses a matrix formula to compare the central pixel to its neighboring pixels.It is important to note that this approach is specific to the algorithmic method described in the article by (Lin et al., 1997).This is performed to determine the location and key features of each type of minutiae in the fingerprint image template.After this stage, image enhancement algorithms are used to improve the quality of the image, especially in noisy areas.Additional enhancements called spurious minutiae removal can also be performed to remove spurious minutiae due to excess noise not filtered out (Peralta et al., 2014).
During feature extraction, the main focus is being able to extract minutiae points.Fig. 3 identifies the ridge orientation types, minutiae points known as ridge discontinuities, and are of two main types: ridge ending and ridge bifurcation (Socheat and Wang, 2020).The average amount of minutiae for a good fingerprint is 40 -100 points.It is these points that are used for evaluating the uniqueness of a person's fingerprint.A feature extractor finds the ridge endings and ridge bifurcation in the fingerprint image.proposed an alternative attendance system consisting of a fingerprint scanner, microprocessor, and graphical user interface (GUI).It allowed for enrollment of all 10 fingers, managed attendance of students to school activities, and was able to produce statistical reports on attendance rates.However, it was limited to a local server on a single authorized computer, and an online option was recommended.As with (Yongqiang and Ji, 2006), this system required a direct link to a computer to function effectively.This raised whether a local server was sufficient for storage needs or if an online version would be more effective.
In another study by (Chennattu et al., 2019), a smart device was proposed in place of the pen and paper method.It consisted of two microprocessors and a fingerprint module.This system had a backup to prevent losses in data by using two microprocessors: one stored the attendance data while offline, and the other connected to the database for online storage and excel exportation.Improvements were suggested by using info-graphics to display attendance information and adding a feedback response system for students to check attendance rates.In a similar study with (Mishra et al., 2020), a battery-powered device employed a fingerprint sensor, a micro-controller, an RFID module for extra security, and an SD card module to store attendance data.This offered an alternative form of data storage and multi-factor authentication.The authors proposed designing a case to make the system more compact and protect its hardware components as an improvement to their work.This research aims to develop and implement a compact electronic and web-based fingerprint attendance system for students and lecturers that will improve student attendance performance and work performance for lecturers.This work also strives to improve the accuracy of attendance and eliminate proxy signing.Using a fingerprint, students can easily be authenticated and identified, enabling the institution to save time on manual data entry and keep accurate records of student performance to analyze, draw insight, and identify.

METHODOLOGY
To build the authentication, identification, and logging (AIL) management system, the fingerprint scanner, among other devices, was used to record the identifier and assess its quality, an application to control scanner modes and measure stored data, and a database to store information for future comparison.
The components used are the NodeMCU ESP8266 micro-controller board, Fingerprint sensor (AS608), 0.96in OLED display module, 3.7 V TP4056 lithium-ion battery/ charging module, and the MT3608 voltage booster.The NodeMCU ESP8266 micro-controller is an IoT development board responsible for executing code and controlling other components.It acts as the management system's central processing unit and controls the fingerprint sensor and OLED display through its general-purpose input and output pins.It has a WiFi module which allows the board to communicate to servers over the Internet.It communicates with the database using its API endpoint to get data related to the website through a series of timed HTTP requests made continuously.
The microcontroller sends information to the OLED display (an energy-efficient display module that utilizes OLED technology to showcase information and graphics) to indicate instructions for enrollment and attendance.The AS608 fingerprint sensor is a compact optical biometric sensor that captures and analyzes fingerprint patterns.It acts as an input and storage device, stores the enrolled fingerprint in its database, and supports real-time verification with high accuracy.The microcontroller is powered by the power management circuit, which includes the 3.7 V battery, lithium-ion battery charger, and voltage booster.
The charging module ensures the battery is charged within specified voltage limits to prevent overcharging and damage.Because the micro-controller needs to be powered within specified voltage limits, that is, 3.6 V to 6 V, a voltage booster with an adjustable voltage range (2 V to 28 V) has been used to step up the output voltage of the battery to 5 V which was sufficient to power the microcontroller.The biometric attendance device is uniquely identified with an ID, which is used to request device-specific information from the website.With this ID, properties such as device mode flags for adding and deleting a user's fingerprint can be accessed and used in device operations.For enrollment mode, information on students such as name, email, matriculation number, and department could be collated beforehand to ensure detailed reports.Next, the mode of the device is to be set to enrollment mode to initiate scanning of the student's fingerprint.In the enrollment mode, the students' finger is scanned twice to ensure a higher confidence level, and a model is created for this fingerprint.This model is converted to a character file and stored in the fingerprint sensor's database.The sensor stores each fingerprint with an ID generated in code by the microcontroller.After the character file is stored in the database, the ID of the fingerprint is sent back to the website via HTTP request.This ID is stored and used when recording student attendance, as depicted in Fig. 7. Fingerprints can also be updated for students scanned incorrectly.In this case, the microcontroller reuses the student is fingerprint ID to store a new fingerprint.
In attendance mode, the biometrics of the student are captured again, and the prints are compared with those stored in the database.If a reasonable confidence level match is found, the student's details and the time and the date the print was matched are stored on the attendance log.Also, in the case of a mismatch, they are given visual feedback to meet the admin and register.During attendance mode, the addition and deletion of fingerprints are not allowed to prevent conflicts in attendance.Fingerprints can only be deleted or added during enrollment mode.The software platform of this work is a website built and designed to efficiently and accurately manage student attendance in a classroom or educational setting.The software is designed to automate the process of recording and tracking student attendance, making it easier to manage student data and course scheduling.The website architecture has three parts: front-end design, back-end model, and front-end to back-end integration.For the front-end design of this website, several JavaScript libraries were used to create the view and interactivity of the website, the core being React.js.React.js is an opensource JavaScript library that allows developers to build interfaces using reusable UI components and update the data efficiently as it changes over time.The back-end model is written in PHP (Hypertext Processor) and SQL (Structured Query Language).PHP is a scripting language that handles data processing and manipulation before sending it to the client (browser) or the database.PHP scripts are used in this website to perform actions such as adding, modifying, and deleting courses, students, events, and devices and retrieving attendance log information for the database.SQL is a programming language used within PHP script to query and manipulate information from the database.It is used to create, read, update, and delete data from the database and manipulate data on database tables.The database is the mode of storage primarily used in this project.The database created was compatible with SQL, allowing easy access to stored information.The database contains interrelated tables with information such as students' details, courses, devices, attendance logs, events, and other important information.Fig. 11 shows the entity relationship diagram for the database tables used for the fingerprinted website with connectors indicating where the tables are linked.
The website was divided into three pages: Manage System, Student List, and Report.The Manage System consists of three parts: the Device list, where the device's status is managed.The course list where courses taken by students can be added and managed and the Schedule where lectures could be attended one-time or weekly for attendance purposes.In the Student List the student's information can be managed and updated occasionally.The fingerprint enrollment can also be initiated on this page, while in the Report, attendance reports are displayed and generated by date and course.It also displays recent attendances, and generated reports are downloaded in excel format.Fig. 12 depicts the web application architecture for which the interface between the front-end and back-end has been detailed.The back-end model and front-end design are connected using API calls to receive and send data between API endpoints, which are routes on a web server/back-end designed to handle incoming requests and provide access to database data, as shown in Fig. 13.In the front end, a fetch API command makes API calls to the defined endpoints on the back end.The backend model locates the endpoint file in its server, processes the script, retrieves the required data, and sends a response back to the back end.This process, described as the requestresponse cycle, integrates the front-end and back-end of the website.Knowing that two different servers render the front-end design and the back-end model is important.The front-end server is rendered by a server that supports Next.js/React.jsapplications (Vercel), while the back-end model is hosted by a web server that supports PHP scripts and SQl databases (000webhost).The front-end server communicates with the backend server to send and receive information from the database.
Figure 13.The front-end to back-end integration (also known as request-response cycle)

RESULTS AND DISCUSSION
The AIL management system was tested in all instances, from enrollment of students to attendance logging to deletion of existing fingerprints, among others.The AIL device can work in two forms.One way is to load the website and use a local database server connected to the same network as the device.This is faster regarding response time, and data is loaded and reloaded to the website efficiently.The downside, however, is that if the device or the computer is disconnected, data will not be recorded to the local database, defeating the purpose.The other alternative was to host the website online (using Vercel for the front-end and 000webhost for the back-end), making it readily available anytime, anywhere, as long as the device is connected to the Internet.This method was tested on mobile phones and computers, as shown in Fig. 14 and Figs.22 to 29.The downside of this method is that the device speed of performance at requesting information depends on the speed of the communication network.
Compared with existing attendance systems, this work proposes an enhanced attendance system that authenticates, identifies, and logs students' attendance, provides students with feedback, and manages the scheduled courses to enable decision-making to improve students' performance.Also, an online real-time attendance management system coupled with course scheduling to enable efficient curriculum delivery has been proposed, where the front-end and back-end integration of the attendance/ course management system was deployed using the React framework coupled with the PHP and SQL implementation.Further to the software deployment in this research work, the hardware was integrated using embedded technology, where an ESP8266 NodeMCU microcontroller was utilized to eliminate the separate microcontroller and Wi-Fi/GSM shield in prior designs, thereby enabling a more compact design and easy-to-manage electronic integration.In this aspect of the device's design, attendance management and similar scenarios surrounding attendance tracking were tested.When switched to the attendance mode, if a person places their fingerprint on the scanner, it is scanned, and the sensor searches for a match with high confidence.If a match is not found, the device prints a fingerprint is not enrolled message, as shown in Fig. 21.If a match is found, the device checks if an event or lecture is ongoing.If there is, the device checks if the student is enrolled in the course.If enrolled, attendance is taken for the student, and if not enrolled for the course, the device indicates that message.If no lecture is ongoing, the device will also show.
Since the research project is based on an AIL system modeled for classroom usage, it has been divided into two core parts: designing and testing the web application/software and constructing the hardware.Fig. 22 depicts the app design interface for the AIL tracking.The image features a table of devices, showing details such as device name, ID, device mode, and action buttons (delete and edit).This allows users to add new devices by providing a name and generates a unique hexadecimal ID for the device to request information.This application can use multiple devices, as each would be identified with an ID.Users can also modify device modes for attendance or enrollment, edit device names, or delete device databases.Using this calendar in the interface depicted in Fig. 24, the administrator can add events to manage scheduling, such as lectures, which could be weekly or one-time (for impromptu and extra lectures).These events could be associated with a course or not.If associated with a course, the attendance system would log attendance associated with the lecture within the time limit (mode has to be set to attendance).These events can be updated or deleted.Fig. 25 provides the students list on the application.This table contains the collated information and other information, such as the status of fingerprint addition.Action buttons are also responsible for initiating enrollment and updating and deleting students' information.Individual students could be scanned using their name, email, or matriculation number at the search bar.The attendance phase shown in Fig. 26 involves the logging of check in times of the students.By placing their finger on the sensor, the sensor retrieves the fingerprint ID from its database when a match is found and then sends it to the server.The server then uses the fingerprint ID to pull information from the student list and adds the data obtained to the attendance log along with the check-in time and date.On average, it takes five seconds to scan a student's fingerprint and nine seconds if the first scan is processed incorrectly.Student attendance rates for all courses can also be generated and used for decision-making, such as filtering out the students who made the attendance requirement for the course for tests, exams, labs, and other mandatory functions.Students can check their biodata and enrolled courses using their matric no.All they need to do is go to the URL link/matric no.
and append their matric no, which displays all their information, even the courses they are enrolled in and their attendance rates, as shown in Fig. 29.
Figure 29.Screenshot displaying student information

CONCLUSIONS
The method of validating users using biometrics assists greatly in personal identification, authentication, and protection against impostors.The proposed system utilizes this validation method and aims to prove that fingerprint biometry is a worthwhile form of identification and will drastically improve the way attendance is taken in schools and other applicable areas of life where a person's presence needs to be accountable.The method employed in this system ensures real-time verification of students and utilizes an easy-touse web application with secure data handling, automated reporting, and record keeping, and creates opportunities for easy access with mobile compatibility, all done with energysaving and cost-efficient components.Implementing this technique would support organizations or institutions in managing attendance data and ensure timely computation of attendance rates so that improvements can be made in class settings and workspaces based on the deductions made.This, in turn, will improve the attendance rates and overall productivity of the users in any organization or institution.One of the observed limitations of this proposed design is that the device relies heavily on Internet connectivity.Thus, the device could not operate perfectly in areas without connectivity.The device experienced delays when making requests to the network and occasional inaccuracies when matching fingerprints, possibly reducing its efficiency.An alternative identification mode, such as facial recognition, could be included in future work to make the attendance system more diverse.Machine learning algorithms such as fingerprint segmentation and feature selection can also be included to train fingerprints multimodal biometric techniques to improve their accuracy for a more efficient system.

(
Dastidar et al., 2017; Esttaifan, 2023; Joodi et al., 2023).A well-validated method adopted in research makes use of the fingerprint biometrics method of human identification (Galbally et al., 2012; Mohamed and Raghu, 2012; Yuan et al., 2023) since its unique data cannot be forgotten, replicated, or stolen (Thales, 2021) and it helps to decrease student absenteeism (Amor et al., 2019) and improve student productivity.

Fig. 1
depicts the three basic fingerprint ridge patterns: loops (radial loop pattern), whorls (whirlpool pattern), and arches (wave-like pattern).The scanner's processor typically checks for clear image capture and various values, such as pixel darkness and overall values, when representing acquired data in templates.Because these detectors are sensitive to lowlight levels, they are known to produce excellent grayscale images.The grayscale images of the fingerprint produced by the detector represent the original fingerprint and template matching during verification.After obtaining an image template, the template is rarely of good quality to begin feature extraction, and this is often due to a couple of factors during acquisition.Therefore, the image must be enhanced to provide a more accurate image and maintain a moderate false rejection/acceptance rate.This process of image enhancement for feature extraction is called pre-processing.

Figure 1 .
Figure 1.The different types of fingerprint topologies

Figure 3 .
Figure 3. Different types of ridge orientation

Figure 4 .
Figure 4. Identified ridge bifurcation and endpoints in 3 x 3 matrix

Figs. 5 and 6
depict the block diagram and the bread-boarding of the management system.

Figure 7 .
Figure 7. Fingerprint node schematic React.js is based on the principle of component-based architecture is that the interface is broken down into small isolated components that are reused throughout the application.Figs. 8 and 9 depict the components-based architecture of the website with React.js.With component-based architecture, each page can be easily broken down into smaller blocks of reusable components.

Figure 10 .
Figure 10.Manage System web page with each component highlighted

Figure 11 .Figure 12 .
Figure 11.Entity relationship diagram for the fingerprinted database

Figure 14 .
Figure 14.Mobile phone test of website

Figure 21 .
Figure 21.Device indicating that the student is not enrolled for the course.

Figure 22 .
Figure 22.Screenshot of device list on Computer

Figure 23 .
Figure 23.Screenshot of course list on PC

Figure 24 .
Figure 24.Screenshot of calendar schedule on PC

Figure 25 .
Figure 25.Screenshot of student list on PC

Figure 26 .
Figure 26.Screenshot of attendance report of the day on PC

Figure 27 .Figure 28 .
Figure 27.Screenshot of a bar chart showing the relationship between students enrolled and students attending

Table 1 .
Performance of various biometric technologies on various properties of biometric features