Development Of Web-Based School Uniforms Order Application In A Private School With Prototyping Model

Strada SMK Daan Mogot, a private school in Tangerang City, oversees several operations. Student registration, academic exams, uniform measurements, and book purchases are carried out at the beginning of each school year. The Uniform Team tasked with handling this activity experienced difficulties due to the large volume of data, making conventional techniques inefficient to carry out. This research focuses on simplifying uniform ordering procedures from the uniform team to the uniform manufacturing supplier. The Uniform Team recorded and measured orders by hand, which resulted in time-consuming management and limited real-time data monitoring for the Principal. A web-based solution that allows easy access to uniform ordering data is needed to speed up these operations. The successful development and installation of this application at SMK Strada Daan Mogot is a significant achievement, with good User Acceptance Test results and confirming alignment with user needs. This progress is an essential step toward optimizing school operations.


INTRODUCTION
Transforming business processes into digital form using information technology is currently the choice of many companies and agencies for ease of access to data, management, efficiency, and data security [1].Digital transformation involves creating new business models or improving existing ones with digital technologies, and the results of an extensive literature review confirm that business process management plays an essential role in this process [2].The business processes run at the private school, SMK Strada Daan Mogot, in the Tangerang City area covers many things.At the beginning of each new school year, the process of accepting and registering new students is carried out through several processes: filling out and returning forms, academic tests, ordering and measuring uniforms, and ordering books.To improve the service's effectiveness, a team of teachers was formed to coordinate each process, namely the Form File Team, Academic Test Team, Book Team, and Uniform Team.Each team has 3 (three) to 6 (six) teachers or even more depending on needs.Due to the large number of business processes and data management in each team, the use of conventional media such as books, paper and stationery is limited and has the potential to cause problems in terms of filing.The business process for uniform ordering services carried out by the Uniform team will be the focus of this research.The business process that runs in this uniform ordering service is carried out conventionally.
Students come to school to submit uniform orders, and then the Uniform Team performs measurement calculations and records uniform order data in the order book.The results of recording uniform orders will then be given to the supplier for the uniform manufacturing process.Processing uniform order data takes a relatively long time because many uniform orders must be processed based on each student and final data recapitulation, so the School Principal and the uniform team cannot monitor uniform data in real time.By looking at the large amount of data and the demand for speed in managing and accessing this data, it is necessary to design a media for managing uniform ordering data using computer technology that can be accessed online so that interested parties can access uniform ordering data at any time.A web-based application is needed to manage uniform ordering data so that business processes can be optimized and speed up the data management process.The entire team involved in team uniform activities is an important thing http://ijstm.inarah.co.id 1613 that cannot be separated from each other.Several previous studies have succeeded in implementing applications that can optimize business processes in various industries.Through designing and developing web-based applications using the Rapid Application Development system development model, business processes in the MSME food industry become more optimal [3].Furthermore, other research also discusses the success of optimizing business processes by implementing web-based applications with the Extreme Programming system development model in the Education Industry [4].Web-based helpdesk information systems designed with the Extreme Programming system development model are proven to make the system development process more accessible for the developer [5].Meanwhile, the Prototyping system development model has also proven effective in designing complex systems, which further accelerates the modeling, simulation, and analysis of real-time systems and aids in intricate systems designs and implementations [6].Using a prototyping system development model can offer a low-cost way of making a more informed selection of software within projects rather than relying solely on reviews and recommendations by others [7].Then, the existence of a web-based application can be the best solution for solving problems in the sales business process [8].Implementing web-based applications offers a way of storing the knowledge related to such installations and creating relations that can be easily classified [9].Implementing a web-based application can help and facilitate business processes in the education industry to recording attendance data of students, avoid fraudulent attendance processes, improve data security, and speed up student absenteeism [10].

II. METHODS
The utilization of prototype models in the field of software development has gained immense importance as a strategic approach to guarantee the effectiveness of information technology projects [11].This methodology facilitates the process for developers to enhance their software design, conduct thorough testing, and gain a comprehensive understanding of customer requirements prior to the official release of the final software version [12].Prototyping models are employed for the purpose of conceptual visualization, user interface construction, and early identification of potential challenges during the development process.The application of this technique has the potential to yield time and resource savings, since it empowers developers to make modifications and enhancements to the software's design and functionality prior to its implementation phase [13].The initial phase of developing a prototype web-based application involves utilizing the Unified Modeling Language (UML), which is a universally accepted modeling language.UML has been employed as a means to visually represent, create, and record web-based applications and architectural plans [13].c) Stage 3-Create a Prototype: This stage will lead to the development of a prototype application.The mock-up application will be developed with design tools such as FIGMA.In this prototype, users are able to visually perceive the progression of the program.d) Stage 4-Initial User Evaluation: The subsequent phase in the development of a web-based application.During this phase, users will engage in testing the application and provide feedback.

III. RESULTS AND DISCUSSION
The first stage carried out in designing this web-based application is to carry out a requirements analysis to determine the user needs for which the solution will be implemented in the web-based application.Interviews were conducted with three sources, namely the Uniform Team, the School Principal, and the Supplier.The results of the interviews that have been conducted are then summarized in table form, which can be seen in Table 1: Table 1.

Requirements analysis
No. Issues Recommendation 1.
Supplier data lists need to be stored correctly, giving rise to the potential for miscommunication when the data is needed.
Provide supplier data storage features in database management systems via a web-based application to facilitate searches and process uniform order transactions.

2.
Uniform ordering procedures for suppliers are unclear, so they need to be simplified through a system.
I am simplifying the uniform ordering process through a web-based application.3 There is no receipt as proof of the uniform order transaction with the supplier.
The output is proof of receipt of a uniform order, which is available in digital form and can be printed if needed (print on demand).4 Notifications regarding uniform transactions have yet to be made available.
Provide a notification feature for uniform orders.
In the second stage, a rapid design was developed utilizing Unified Modeling Language (UML) and use case diagrams, with a specific emphasis on the anticipated system behavior as seen by the end-users.The use cases were established, delineating the desired functionalities of the system rather than the specific methods of implementation.The use case diagram will exclusively concentrate on the characters representing the uniform team as they interact with the Supplier to request uniforms.Figure 2 illustrates the principal functionality of the web-based application via a Use Case Diagram. Figure 2 showcases the utilization of use case diagrams, which serve as a significant asset in the design of web-based applications.These diagrams provide a graphical depiction of the interactions that occur between application actors and the major functionalities of the system.In the present context, the actor refers to the Uniform team responsible for overseeing Uniform orders and Supplier Data management.The user's text highlights two main use cases: "Manage Uniform Order" and "Manage Supplier Data," which encompass crucial functions.

Fig 3. The homepage of Web-based Applicatin of Shool Uniform Order
The user interface of the web-based application for school uniform ordering is designed with a simple design.It features a secure login system that ensures only authorized users gain access.Once the login is successful, users are presented with the primary menu, which serves as the control center for their activities.The primary menu encompasses essential functionalities, including master supplier data management, handling incoming uniform requests, facilitating payments, and generating comprehensive reports.This organized menu structure streamlines user interactions, making it easy for them to navigate through the application's features.Moreover, the user interface is thoughtfully designed to offer a seamless experience.Users can effortlessly switch between various sections, aiding them in managing uniform orders, monitoring payment status, and accessing vital reports.To ensure security and privacy, a convenient log-out option is available, enabling users to sign out of the application once they have completed their tasks.This intuitive and feature-rich user interface enhances the overall user experience, promoting efficiency and accuracy in school uniform order management.The user interface for the master supplier section in the web-based application for school uniform orders is meticulously designed to facilitate effortless supplier data management.Within this menu, users can seamlessly add new supplier information, ensuring that the supply chain is well-maintained.After adding supplier data, users can easily access a comprehensive list of all registered suppliers.This list includes crucial details such as supplier identification number, supplier name, phone number, address, and any additional notes.The "action" feature provides users with the ability to perform various actions related to supplier data, such as editing or deleting entries as needed.Due to confidentiality and privacy, the phone number and address were censored.

Fig 5. Add Supplier Data on the Web-based Application
The "Add Supplier" user interface in the web-based application for school uniform orders is thoughtfully designed to simplify the process of adding new supplier information.Users can efficiently input essential details to create a comprehensive supplier profile.The form allows users to enter crucial data such as the supplier's unique identification number, supplier name, contact phone number, physical address, and any additional notes that might be relevant.This user-friendly interface streamlines the task of incorporating new suppliers into the system, ensuring that the school's uniform ordering process remains well-organized and efficient.With a focus on ease of use and accuracy, the "Add Supplier" feature empowers users to maintain an up-to-date and thorough supplier database, thereby contributing to the smooth operation of uniform procurement activities.

Fig 6. Receipt for the Uniform Order
The output generated by the web-based application for school uniform orders is a meticulously crafted receipt, which serves as a comprehensive record of the transaction.This receipt encompasses essential information that ensures clarity and accuracy throughout the procurement process.It prominently features the private school's header information, including its name and logo, adding a professional touch to the document.The receipt information section provides critical details, such as the supplier's name, the unique invoice number, the receiving date, and the delivery order number, all of which are vital for tracking and reference.The tabular section of the receipt provides a structured overview of the ordered uniforms.Each http://ijstm.inarah.co.id 1617 row in the table includes a unique reference number, the uniform's identification code, the uniform name, its size, and the quantity ordered.This organized presentation not only aids in verifying the contents of the order but also facilitates seamless communication between the school and its uniform suppliers.The output receipt is a valuable document that enhances transparency and accountability, fostering efficient uniform management and procurement processes for the private school.

Fig 7.
Notification on receiving uniform order The notification feature in the web-based application for school uniform orders plays a pivotal role in keeping users informed and updated.Specifically, this feature is designed to alert users whenever a new school uniform order is placed.This proactive notification system ensures that the responsible individuals are promptly made aware of incoming orders, facilitating swift and efficient processing.When a new order is received, a notification will appear, typically in the form of a pop-up or a message in the user interface.This notification serves as an instant alert, allowing users to take immediate action, whether it's acknowledging the new order, assigning it to the relevant team, or initiating the processing workflow.By providing real-time updates on incoming orders, the notification feature contributes to enhanced order management.It ensures that the school can meet the uniform requirements of its students in a timely and organized manner.After the design stage process is complete, the functionality of this web-based application is then tested using the user acceptance method.This testing was carried out with a test case involving three users from the uniform team.The results of the 8 test cases in Table 2 show that the function of the system is valid and can be used for business processes in ordering uniforms from suppliers.

IV. CONCLUSION
A web-based application was successfully developed and deployed at the Vocational School Strada Daan Mogot Private School.Web-based apps can be conveniently accessed through a local server, allowing users to interact with them using a web browser.Using the Prototyping model facilitates the expeditious development process for developers while concurrently engaging users during its development.The outcomes of the User Acceptance Test indicate that the web-based application has successfully fulfilled all test cases, thereby confirming that the web-based application's functionality aligns with the users' requirements.

Fig 1 .
Fig 1. Prototyping model stages A thorough understanding of the procedures involved in model development is required [14].In this research, implementing the Prototype Stage system development model was only carried out up to the fourth stage, namely Initial User Evaluation.Meanwhile, stages five and six, related to refinement and deployment, are subject to further development in future research.The flow of making a model prototype is depicted in Figure 1: a) Stage 1-Requirement Analysis: The initial stage in the development of a prototype model is to undertake this step.During this phase, participants are requested to articulate their expectations and desires regarding the system.

Fig 2 .
Fig 2. Use Case diagram of Uniform teams

Fig 4 .
Fig 4. User Interface of Stored Supplier Data

Table 2 .
Web-based Application FunctionalityTest results with UAT