WEB-BASED APPLICATION DEVELOPMENT FOR TRAINING DATA MANAGEMENT USING REACTJS

ABSTRACT


INTRODUCTION
The importance of training and developing human resources in the current era is to create good and quality human resources.With the existence of human resources that have good quality, will help the company to achieve the goals that have been set.With the utilization and development of information technology, it is hoped that it will assist companies in improving and facilitating the management of data and information related to the implementation of training and consulting.Data collections and management of training programs in companies are still not effective and efficient.The manager training section uses a platform that is rented through a technology services company, but this makes the allocation of funds considered quite high because the rental fee is relatively expensive for a standard platform.Without digital assistance, storing training data still in excel form will accumulate and be difficult to manage, training registration is also inefficient because it depends on the schedule provided in excel data which is also updated manually and the registration flow is difficult for participants to access.Therefore, for the development of the data collection process, a web-based system is needed.Recording reports on the results of training also takes a long time because the storage still uses local files.One of the applications of technology in the field of training is to develop a Training Delivery System platform for employees and trainees

METHOD Figure 1. The Stage of Research
The development of a web-based information system begins with the data collection process to determine the needs analysis of the application users.The design of this information system uses the scrum method.Scrum, according to Schwaber and Sutherland (2017) is a software engineering method that uses agile principles that rely on the strength of team collaboration, incremental products and an iterative process to realize the final result.Scrum is the best method used in development for software development, research that requires a short time can be used also in other fields (Srivastava et al., 2017).The scrum approach method is applied in developing a web-based information system to be built, where a sprint mechanism is needed which starts with several processes shown in Figure 1 The stage of research.In this study the analysis was carried out by collecting questionnaires.The purpose of the process is to find out the analysis of user needs so that requirements prototyping can be carried out.After the design has been completed, the features in the design will begin to be built.In research by Agustinna et al. (2014) the "sprint" method applied makes it easier for developers to discuss requirements that need to be developed, modified, repaired, or added based on the results of the step-by-step evaluation carried out.The results of this study are with the application, it is possible to arrange your tour visits without assistance, 28 out of 54 respondents (52%) answered that with this application it becomes easier.
Each feature segment designed is done in one sprint.At the end of the sprint, a demonstration of the development of existing applications is carried out.It can be found that the initial planning and development estimates are optimistic for estimating and planning improved from each sprint stage, and carried out each stage (Mahnic, 2011).The sprint plan for this research was made using a planning comparison table for each program segment made with the actual processing shown in Figure 2 Sprint Plan of Study.

Figure 2. Sprint Plan of Study
Research was conducted to solve these problems in order to be able to provide better training in the future.Web applications are made to overcome problems that are still owned by several similar applications.In accordance with the problems that occur, a solution is created in the form of a website to manage training data and register training online.Website development using an object-oriented programming (OOP) approach.OOP is a method with object-oriented programming.The OOP method is formed from objects that are interrelated and arranged into a group called a class (Saha et al., 2021).On the front end, websites are built using react JS, react JS is a JavaScript library that is commonly used when building the User Interface of a website or web application (Haverbeke, 2018).Website development using OOP and a modern website appearance makes it easier for every user to use.It will also increase business and reduce costs for companies to rent platforms that are used to manage each training data.This website was developed using the UML method, the authors use use case diagrams and class diagrams as a web M a r c h , 2023 design plan that fits the needs of the research.UML is a development modeling language used in the field of software engineering aimed at providing a method for visualizing system designs.

Figure 3. Use Case Diagram
The use case diagram describes the functional requirements of the software (Fauzan et al., 2021).Use case is an overview of system functions from the point of view of system users (Sualim et al., 2016).UML diagrams are described like class diagrams, UML is an important thing in webbased software development (Bian et al., 2019).Use case diagrams are an important part of the analysis and specification of system functional requirements.Use case diagrams represent a visual representation of possible interactions between system actors and their functions (Essebaa & Chantit, 2018).The use case design for this system is shown as in Figure 3 This website is built into several role sections consisting of the management side and the customer side, where on the management side (company) has a website that is used to enter all training data lists, create training schedules, view the list of trainees, add a list of trainers who will teach the training.The training manager can also view reports on the results of the training that has been completed.Finance managers can recap all transaction history from training participant registration.Participants are easy to register for training registration.Participants are also able to view catalogue in a link containing various types of training available.Every time there is a change in schedule, it can also be seen directly in this application so there is no need for a registration and re-approval process from the developer and team leader side.Class diagrams are diagrams that describe classes and their relationships.Class diagrams describe the data found in a software system (Sualim et al., 2016).According to Serepia (2019), Class Diagram is a specification which, if instantiated, will produce an object and is the essence of development and object-oriented design.The class diagram design for the system being built can be seen in Figure 4  objects that contain criteria data, sub-criteria which are objects that contain sub-data criteria such as registration and history.

RESULT AND DISCUSSION Interface Design
The implementation of the user interface system that has been built consists of several user interfaces.The interface in Figure 5 Dashboard, describes the menu display as well as overall information on the system, which consists of the number of trainings, the number of participants who have attended the training, the number of trainers, the number and number of freelancers.At the bottom there is also ongoing training with the status on going.There is a project table or whatever will be done and done in time for employee users to be able to manage training data management.

Figure 5. Dashboard
The interface in Figure 6 Trainer List, contains a table list of trainers registered with training instructors according to their respective skills and abilities.Each trainer has a different Trainer ID and a different code according to the skills and type of training being taught.The trainer is also equipped with CV data and certificates owned by the trainer.In the table there is an edit and delete action menu for each trainer.The list of trainers can also be added by using the Add button to add trainers to the list.The Add menu will then be directed to the form field to complete the required trainer data.Following is the sidebar menu interface shown in Figure 13.Sidebar is a form of additional menu that is at the edge of a web page or application, sidebar is also used as a menu form for navigation on desktop pages (Islam et al., 2022).Sidebars are usually located to the right or left of site content which contains menu navigation, menu information, icons and shortcuts (Parviainen, 2017).The usage and number of sidebars on the site should consider the usage apart from the various controls and widget options to maintain the balance of each menu.There are 3 main menu that are Training, Finance, and Program.M a r c h , 2023

Evaluation
The Acceptance Test Driven Development (ATDD) method is a method that focuses on capturing the requirements in The method used is Acceptance Test Driven Development (AATD), a method that focuses on acceptance test requirements to drive system development (Sualim et al., 2016).ATDD is a software development technique that combines requirements definition with automated backtest execution (Ramler & Klammer, 2019).The author conducted two evaluations of the system, namely User Interface Evaluation and User Satisfaction Evaluation.Results of the user interface evaluation of this system have been fulfilled according to Ben Schneiderman's Eight Golden Rules.Then an evaluation of user satisfaction is carried out by filling out a questionnaire involving users, admins and trainees or customers.Evaluation of a system, product or service that can be used by certain users to achieve certain goals with three critical measurements of usability, namely effectiveness, efficiency and user satisfaction (Barnum, 2020).Evaluate the effectiveness and efficiency of the network that supports user needs to achieve goals accurately, quickly and more cost-effectively.In addition to efficiency and effectiveness, however, satisfaction criteria are very important.Users are satisfied with displaying information pages and web function menus.The rating measures the percentage of user satisfaction and the main objective of creating a training data management system.As well as knowing the level of web usage according to user needs and a solution to the problem.The evaluation results that have been carried out are included in the very feasible category, namely 91.5%.

CONCLUSION
Based on the results of the design and analysis, a web-based training data management information system designed and developed using the Scrum method using ReactJS and MySQL as a database server are the right choice of method to implement.Only a few people in charge of the company can access data or information systems for training data management, namely Admin, Program Manager, Finance Manager, and Training Manager.From the results of system integration test (SIT) and user acceptance test (UAT) it can be concluded that information systems or dashboards developed with the addition of other features increase effectiveness by as much as 90.4%.The company has experienced a significant reduction in the cost of renting a platform so that efficiency is obtained by as much as 91.2%, then for user satisfaction by employees and admin as much as 92.6%.When compared to the previous conditions, where a training data management web application had not been built, the effectiveness and efficiency of the work carried out by the admin only reached a percentage of 62%, and the cost required to rent a registration platform was 8% of the company's costs.Currently there is no need to rent a registration platform anymore so no costs are incurred for platform rentals by the company.The evaluation results that have been carried out are included in the very feasible category, namely 91.5%.
The researchers are aware of the blank spots in this study.Hence, hopefully, future research can fulfill the spots by delving deeper into the gaps such as how web-based application can improve other management activities or the use of other web-based application in data management or other public activities.
Web-Based ApplicationDevelopment for Training Data Management Using REACTJS 2578 | I n d o n e s i a n J o u r n a l o f M u l t i d i s c i p l i n a r y S c i e n c e , 2 ( 6 ) , M a r c h , 2023

Figure 4 .
Figure 4. Class Diagram Class Diagrams.The class diagram contains objects such as employee objects, admin users who are users of the system, training, projects, freelancers, trainers which are Web-Based Application Development for Training Data Management Using REACTJS 2579 | I n d o n e s i a n J o u r n a l o f M u l t i d i s c i p l i n a r y S c i e n c e , 2

Figure
Figure 6.Trainer List

Table 1 .
Analysis of Similar Research and Application

Table 2 .
Efficiency Evaluation

Based Application Development for Training Data Management Using REACTJS 2585
| I n d o n e s i a n J o u r n a l o f M u l t i d i s c i p l i n a r y S c i e n c e , 2 ( 6 ) , M a r c h , 2023

Table 4 .
User Satisfaction Evaluation