Development of Employee Attendance Management Information System During the Covid-19 Pandemic Based on Website using QR Code and PHP Native

— Hero Web Design is a small-scale company that is growing, the company is engaged in technology. Attendance activities at Hero Web Design still use the conventional method, every day employees carry out attendance activities manually. This results in fraud, loss, and damage to the processed data because they are not integrated. As a result, with the emergence of these problems the company could not develop. With the problems that Hero Web Design has, here an online attendance information system is made with a QR-Code and face detection using the Scrum method. In this study using the Scrum method using 3 Sprints, each Sprint has a process of not more than one month. The data sources used in this study are observational data in the form of attendance management activities and report management. The second data source is interview data in the form of an answer from a question-and-answer discussion with Hero Web Design. The third data source is literature study data in the form of supporting journals that have similar research. A website-based attendance management information system with a program working process using the PHP programming language, javascript, CSS, and bootstrap framework. The results of the information system that has been created will be tested using the


I. INTRODUCTION
The increasingly advanced information technology and its demands have created a situation that has forced many companies to be more computerized, especially in systems attendance at the company Web design heroes. Hero Web Design yourself is a small company which currently growing. Based on interviews that have been done with sources. Web Design Hero of the moment this still operate attendance system that is still implementing manual attendance i.e. write the paper and still do profession by stare face, Attendance can be said to be an attendance data collection which is part of the reporting activities that exist within an agency [1]- [4]. Attendance is arranged and arranged so that it is easy to find and use when needed by interested parties, while during the coronavirus pandemic this is not recommended for doing work by stare face and enforcing WFH (Work from Home) There is an attendance technique that is done manually, starting with data collection and calculating time attendance. This timeout affects a relatively long time in the calculation technique [3]. Employee attendance records and hard copy reports cause data recording errors, making data difficult to find and fear of losing employee attendance data [2]. So the solution given to overcome this problem is to design and make a web-based attendance system by utilizing a quick response code, The system also uses the camera on a laptop or computer to take pictures as Proof presence and system using Language level tall that is PHP programming. with help bootstrap framework, CSS for beautify website display, and the help of the javascript library [5], [6]. Already there are several application attendance employees from the study before among others are multi-event attendance with QR Code based on restful web service as generated study give solution problem at the moment sending data in time area attendance no there is an internet and can use multi-activity attendance and can do attendance outside the institutional area, however, study this own weakness that is security in do attendance still can be hacked because only depend on QR Code course [7]- [10]. Study makes application attendance mobile-based with intranet and IMEI network filters that take advantage of reading IMEI and do restrictions the existing intranet network at the institution but attendance on research this own weakness that is no can-do attendance outside institutions, and security still can hac. Study make application presence student based on Radio Frequency Identification (RFID ) that makes use of RFID technology that can detect tool or thing that has RFID technology only with stick it on the tool attendance, but in research, it also has the weakness that is system attendance no can do online, security system attendance still can be hacked because only use RFID card [11].
Based on studies before and problems that occur in Hero Web Design, researchers propose making system information management presence employees using a website based System information is the system in organization influence processing interest transaction every day, support operations, including management and activity essential organization, as well as needed by a party outside certain through provision report [8], [12]. System they could record attendance data employee, arrival time or beginning attendance, time to go home or end of working hours, which will be made automatically systematic and computerized with method quick response code for page security first attendance whereas for security second use facial recognition method, so that will eliminate the process of recording employee attendance that has been walking manually and can Upgrade system security attendance at Hero Web Design. As for making Website Based Employee Attendance Management Information System with QR Code using the system development method, namely the Scrum Method [6]. The reason for using the quick response code is for an economical cost because the company small no need to use access cards. After all, tools and access cards are expensive unless large companies already have adequate operating costs [7]. So only need saved on the smartphone and print the code already enough could be used by employees for scanned and because with this, only ni p employees are needed to make attendance by going through a quick response code scan on the quick response code scanner or can with camera computers and laptops are solutions that utilize information technology that can accommodate the process of recording attendance data so that recapitulation can be carried out more quickly and accurately, the application of attendance using a quick response code is a solution to problemsolving attendance data processing and has the advantage of being able to take attendance quickly, precisely and accurately [12]. Scrum is a framework that works for completing complex jobs and is always changed. Method Scrum in implementation not only as a model for development device soft will but more to management development device soft so that the project manager, Scrum Master, and the team involved could by easy control existing tasks, so that performance becomes more fast and efficient [13]. On workmanship study, this Besides use method scrum will also explain the steps processing other, start from the process of analysis, planning, construction that uses application web-based, up to stages implementation with using UML (Unified Modeling Language), with make Use Case diagrams, Sequence diagrams, class diagrams, and output, for know what data just be input and output [2], [6], [8], [14].

II. METHOD 1. Data processing
In assessment, this is needed the evidence as well as information as materials that can help authenticity Theory description as well as discussion [11], [15]. Data processing carried out by researchers is as follows.
• Interview, that is technique collection proof with use method ask answer by direct to related sources.

Design Scrum
According to the developed Scrum model deftly. This is methodology or plan work arranged to use develop the complex product. Scrum set approach literature as well as sustainable to use optimizing predictability as well as control risk. Scrum is one agile technique that is very iterated. This is methodology adaptive, repeatable, reliable, flexible, and effective designed to use provide great value with reliability in all projects. Scrum ensures transparency communication as well as creates an environment not quite enough answer together as well as progress sustainable [2], [9], [16]. Scrum involves three-party: Product Owner, Scrum Master, and Scrum Team.

• Product Owner
Product Owner responsible answer to use determination specification nor technique business from an application that you build. Owner product includes all condition main must be fulfilled team (Product Backlogs).
• Scrum Master Scrum Master is managing section technique Scrum for the whole project. Scrum Master presents as well as operate method work Scrum for your team as well as ensure that everyone on the project you use technique Scrums.
• Scrum Team Scrum Team is a team analysis business, analysis systems, developers, testers, as well as others who lead the projects. Scrum Team responsible answer to use complete Backlog Products compiled by the owner product [17].  The researcher set Scrum as a plan in making a data system. After finding the information needed from Hero Website Design after that next past application method is Scrum on build system information. Following picture the flow.

Figure 2Implementation Flow Scrum
Stages first in accordance plot implementation Scrum on is decide Product Backlog, Product Backlog is notes needs something finished product priority main [18]. it will be a Product Backlog from a system that will build as follows:

Scenario Test
System test attendance employees use Black Box. Black Box is a test based on specifications application as interface application, the features that exist in the application, as well as coherence desired by the customer. design created apps later will issue output in the form of attendance data and reports attendance employees [5], [19], [20].  Employees could look at the dashboard 3. The employee could do roll call enter 4. The employee could do roll call goes out 5. Employees could look recap roll call As for analysis needs system in system information attendance employee with QR-Code namely : • Employees do attendance with scan the quick response code on the page first then followed by a facial scan or detection face for ensuring that truly employee they do roll call enter if I succeeded so roll call enter will save in recap attendance and database. If employees will return or online working hours already finished so the employee does scan quick response code then followed with facial scan or detection face after its attendance data go out will succeed saved. • Administrators as well employees must log in first before to use can enter to application system attendance employee with method enter username and password.
• administrators & employees must logout and resolved the use of implementation system attendance employees.

C. Use case diagram design
In figure 5 the administrator use case explains that administrators can interact with various use cases as home, manage data with 2 data in it namely employee data and position data, then attendance data as well as a report that will be printed from attendance data. And also admin can manage data, such as delete, add, and update the data [21].

Figure 4Administrator use case diagram
In figure 6 use case employee explains that the employee could interact with various use cases as does attendance good that attendance enter or attendance go out with use to scan the quick response code, then could check history from roll call employee that. Employees could interact with use cases other provided employees already interact with Login use cases.

Stage Implementation Scrum
Study this use method Scrum consisting of from three sprints based on Product Backlogs that have been made before. Below is the description from every sprint.

A. Sprint 1 • Sprint planning
The results of the Sprint 1 design are : Time : 3 weeks Purpose: planning draft system beginning From Sprint planning generated the 1st Sprint Backlog as follows:  Meeting or meeting monthly for reviewing the sprint backlog products that have been solved and could be evaluated to use upgrade next Sprint job.

C. Sprint 3 • Sprint planning
The results of the Sprint 3 design are: Time: 3 weeks Purpose: make admin page From Sprint planning generated Sprint 3rd backlog as follows:

Stage design Device Soft A. Class Diagram
The class diagram describes description or picture class, property, as well as to object beside relationship one each other like inheritance, content, association, etc. Class diagrams can also be considered as database configuration with several tables in a mutual database correlated.

B. Object diagrams
Object diagrams are often called instant charts because they are so similar to class diagrams [18]. The object diagram also shows a connection between objects, while the object diagram uses real-world examples.

C. Sequence Diagram
A Sequence diagram is a diagram that shows interaction dynamics Among several objects. Regarding this used to use serve groove message sent between something object, as well as interaction in Among object. Something happened in some points certain on execution system [18].   Figure 9 explains about Manage data flow that has plot add data, view data, edit data for a change current data entered there are data errors, and delete data.

• Attendance Diagram Sequence
Employee Picture 10 explain about attendance chart flow employees who have a plot of the actor login then succeed enter into the page dashboard, choose roll call for start roll call with prepare QR-Code after QR-Code scan complete so next will go out Detection face and if valid then will automatically Return to the user dashboard and the user can look history attendance. • Sequence Diagram Add Account Figure 11 explains about plot add data of employees who have a plot with admin already have employee data, then enter the data in a past form system process the data and succeed add employee data  Figure 12 explains about attendance chart flow employees who have a plot of the actor login then succeed enter into the page dashboard, choose roll call for start roll call with prepare QR-Code after QR-Code scan complete so next will go out Detection face and if valid then will automatically Back to user dashboard and users can look history attendance. On the admin page, there are some menus already made and will show namely, dashboard menu, admin data, employee data, position data, attendance data, and reports attendance. 1. Dashboard Menu Dashboard menu is the menu for showing page main from the admin which contains information at a glance about the amount of data on the other menu.

Admin Data Menu
The admin data menu is a menu that displays a page containing admin account data, in this menu, you can also add, change, and delete data. All admin data will be managed on this menu with good passwords, emails, and others. Figure 14 is the appearance admin data menu page. On the page then there is the table containing admin account data and admins can do add data on the page after the push knob add data will modal appears with an empty form inside it the as image 15. On the admin data menu page other than adding data, the page can also change admin data. As case add data, for change data must push knob with picture pen so that the form containing the data has been stored will appear and get changed, like picture 16.

Figure 15. Edit Admin Data
Then for how to delete admin data same with change starting data from push knob delete it on the action field will appear information related to admin data that you want deleting as image 17.

Employee Data Menu
Employee data menu is a menu whose page contains a table of all account employees who have feature add, edit and delete data. On this menu, all employee data could be managed by administrator actors who have access to the admin page and manage all account or employee data.  Besides feature add employee data, can also change employee data. As the case feature adds data, for change data must push knob with picture pen so that the form containing the data has been stored will appear and get changed, like figure 20.

Figure 19. Edit Employee Data
Then for deleting employee data the method same as changing employee data starting from the push knob delete it on the action field will appear information related to admin data that you want deleting as image 21.

Position Data Menu
A job data menu is a menu whose page contains a position or a position that is in a company as well as its feature for adding, changing, delete job data. job data menu there is knob add job data if clicked will raise a modal containing an empty form for filled with the data already there is as image 23.

Figure 22. Add Position Data
Besides could add job data, on the job data menu you can also change job data. For a change, data must push knob with picture pen so that the form containing the data has been stored will appear and get changed, like image 24.

Figure 23. Edit Position Data
Then for deleting job data the method same as changing employee data start from the push knob deleting it on the action field then will appear information related to admin data that you want deleting as image 25.

Menu Data Attendance
The attendance data menu is a menu whose page contains about attendance data table employee, from attendance sign-in, attendance exit, nor attendance description another. The attendance data menu also has features to add, change, and delete attendance data.  Besides could add attendance data, on the attendance data menu you can also change attendance data. For a change, data must push knob with picture pen so that the form containing the data has been stored will appear and get changed, like image 28.

Report Menu Attendance
Report menu attendance is a menu that contains attendance data that is equipped with a feature print report. The feature was useful for making reports from attendance data. How to run feature the that is, with fill out the date input form then push the "Print" button and will print a report with pdf format like Figure 29 and Figure 30.

Settings menu
The Settings menu is a menu that contains time attendance data. The menu works for changing attendance clock data but in the settings menu only one own feature change data or edits attendance clock data. The following picture how it looks.

Figure 30. Settings Menu Page
The settings menu also has feature change data. The feature change time attendance data, for change attendance clock data, need push knob pictorial pen so will a modal appears containing the data form that has been there being.

Figure 31. Edit Time Attendance Data
• Employee On page employee, there are some menus already made and will show namely, the dashboard menu, the account menu for employees, and history attendance.
1. Dashboard Dashboard menu is a menu containing feature attendance, ok attendance sign-in, attendance exit, nor attendance description another. this menu is the main menu from page employees because of this menu there is a feature attendance will be used by employee's good attendance exit, enter, or attendance description another. On the dashboard page if you Press the " Enter Attendance " button so will lead to the QR-Code page to scan the code you have every employee as image 34.

Figure 33. Employee QR-Code Scan page
After scanning the QR-Code and the results are valid they will appear next button, if pressed so will carry on to the page detection face. Same thing with QR-Code scan page if felt face suitable or valid then will appear next button for save attendance data and will direct return to dashboard page like image 35.

Figure 34. Detection Page Face Employee
If the button permission or no present is pressed on the dashboard page then on the page detection face if valid and pressed next button will appear modal with the form that will be filled according to available data employee as figure 36.

History Attendance
History menu attendance is a menu whose page contains attendance data from each employee alone. On the history menu attendance only could view attendance data without can change and deleting the data as the picture brought this.

Account Menu
Account menu is a menu whose page contains information on account employees like name, email, photo profiles, passwords, and others. this menu owns feature change data for the details as in picture 38.

Figure 37. Employee Account Menu Page
To change the data on the account menu should enter to account menu page, then push the knob with a picture pen for raises a modal that contains a form with data already stored as image 39.

Stage Test System
A. Admin For testing, system administration uses the testing method Blackbox which will test features from the design. There are several   Table 6 is tabling the test that will test the admin data menu in the menu on several features namely: add, delete, view, and change admin data.  Table 7 is tabling the test that will test the employee data menu in the menu own several features namely: add, delete, view, and change employee data.  Table 8 is tabling the test that will test the job data menu in the menu own several features namely: add, delete, view, and change job data.  Table 9 tables the test that will test the attendance data menu in the menu own several features namely: add, delete, view, and change attendance data.  Table 10 tables the test that will test the report menu attendance in the menu own several features namely: determine the period desired date and print report.    Table 14 is testing feature attendance enter with stages in detail as follows.  is valid then will appear " Attenda nce " button 6. Push the " Attenda nce " button Table 16 is testing feature attendance other details with stages in detail as follows.    • System information management attendance employee website -based with QR code makes it easy employee for the present with fast and reduce fraud, loss, and damage caused by system Hero Web Design manual attendance.
• Development system information management attendance employee based on a website that provides a QR code use method Scrums. Usage Scrum more dynamic as well as results implementation Scrum in Case this look at system generated. So you can apply Scrum to make a suitable system for your needs.
• Testing use method black box, device soft detect feature as feature no valid or lost, error interface, $ data structure and error database access external, error performance, error initialization, error shutdown, and automatically functional return expected results.

Suggestion
design system information attendance based on this website middle own much weakness good for Writer nor for hero web design. because of it, the Writer advises repair study such as: • Expected participation from Hero Web Design for the future come could maintain and renew the system taking attendance presence employee this. • Could combine with tool attendance so that moment attendance data collection is more accurate. • System attendance could be opened and used although no internet. • System attendance could do through a smartphone