Jurnal Sistem Informasi.
Teknologi Informasi dan Komunikasi DOI: 10.
33364/sistematik/v.
Web-Based Herbal Medicine Sales Application Using the Rational Unified Process Method Rickard Elsen1*.
Rifki Muhammad Hilmi2.
Reski Ramdhani3
1,2,3
Institut Teknologi Garut.
Indonesia *email: rickardelsen@itg.
Article Info Submitted: 16 Augustus 2025 Received: 8 October 2025 Published: 31 May 2026 Keywords:
Agricultural Education.
Interactive Media.
Tourism Promotion.
Virtual Tour.
Web-Based Application.
ABSTRACT
The advancement of information technology has accelerated digital transformation across various sectors, including trade.
One of its significant impacts is the emergence of web-based online sales systems that enable more efficient transactions and broader market This study aims to design a web-based herbal medicine sales application using the Rational Unified Process (RUP) methodology, applied as a case study in the PROMAD business unit affiliated with the Madaarikul Ulum Islamic Boarding School.
The RUP framework comprises four phases: Inception.
Elaboration.
Construction, and Transition.
This research involved a needs analysis, system design using Unified Modeling Language (UML) diagrams (Use Case.
Activity.
Sequence, and Class Diagram.
, implementation with PHP and the Laravel framework, and testing through the Black Box Testing approach.
The results indicate that the developed application effectively streamlines transaction processes, product management, and sales reporting in a digital and efficient manner.
Furthermore, the system is anticipated to enhance PROMADAos competitiveness and operational performance in the digital era.
INTRODUCTION
The rapid advancement of information technology has brought significant transformations across multiple domains, including business and commerce.
One manifestation of this development is the emergence of webbased platforms that facilitate direct interaction between sellers and buyers through the internet .
These platforms enable businesses to expand their consumer reach while providing users with the convenience of accessing diverse products and services remotely.
Consequently, web-based systems have become a fundamental pillar supporting digital transformation across sectors .
Among their most prominent applications is the online sales process, which has evolved into a major trend in contemporary society due to the convenience of purchasing products from various regions with minimal effort .
Online sales not only streamline transactional activities but also contribute to time and cost optimization.
For instance, sellers can reduce operational expenses typically associated with physical storefronts, while buyers benefit from the efficiency of digital purchasing .
In the health sector, the relevance of online sales continues to increase alongside the growing demand for herbal medicinesAiwidely recognized for their efficacy in promoting wellness and treating illnesses using natural, safer ingredients .
The rising public awareness of health consciousness and the preference for natural remedies have encouraged numerous herbal medicine enterprises to adopt technology-based marketing strategies through online platforms.
One notable advancement in the herbal medicine sales system was developed by .
The system was designed to facilitate public access to information related to the sale of traditional medicines.
Previously, the public encountered difficulties in locating and obtaining information about traditional medicine products, which were Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 often fragmented and not easily accessible.
Through this system, users can conveniently search for information on the desired herbal products, including details on composition, therapeutic benefits, and usage guidelines.
Moreover, the system aims to improve the efficiency of the sales process, assist traditional medicine producers in reaching a wider market, and enhance their visibility within the local marketplace.
Furthermore, a study conducted by .
demonstrated that web-based applications for the sale of herbal plants and traditional herbal formulations facilitate access to information and enhance public awareness regarding the use of herbal medicines.
These applications enable users to obtain detailed information on the benefits and preparation methods of herbal products while simultaneously supporting the marketing of such products to a broader audience.
This innovation also offers a viable solution to the declining interest of younger generations in herbal medicine and contributes to the promotion of herbal products in an increasingly competitive market Additionally, online sales platforms allow customers to track their orders, access updated information on product availability, and receive automated notifications concerning order status and stock updates .
Previous studies on herbal medicine sales applications have been constrained by limited features and underdeveloped methodological frameworks.
For instance, the study conducted by .
primarily focused on providing information about traditional medicinal products but did not incorporate integrated transactional features such as automated payment systems or sales reporting functions.
Similarly, the research conducted by .
enhanced access to herbal plant information and increased public awareness but did not emphasize comprehensive transaction management or systematic data processing.
Another study .
highlighted ecommerce as a general solution for herbal product marketing without offering a technical framework for system development based on specific methodologies.
Consequently, previous research remains largely descriptive and lacks comprehensive solutions regarding transaction integration, data management, and structured system development strategies.
To address this gap, the present study introduces a novel contribution by applying the Rational Unified Process (RUP) method to the design of a web-based herbal medicine sales application within the business units of Islamic boarding schools.
Madaarikul Ulum Islamic Boarding School, which operates a business unit called PROMAD (Madaarikul Ulum Product.
, has been in operation for three years.
However, its buying and selling transactions are still conducted manually, which reduces efficiency and accuracy in data management.
Therefore, this study aims to design and develop an application that facilitates easier, faster, and more systematic transaction management for the institution.
Based on the problems described, this study aims to design a web-based application to support the transaction process of buying and selling herbal medicines, with a case study of Madaarikul Ulum in Selaawi District.
Garut Regency.
West Java Province.
This application is expected to expand market reach, increase sales, and strengthen the competitiveness of herbal medicine products in the digital era.
Web-based sales systems are one solution that has been widely used to address changes in consumer behavior that increasingly prioritize online Through this platform.
Madaarikul Ulum can market products more widely, facilitate interaction with customers, and simplify the transaction process, thereby providing an easier and more reliable shopping experience for consumers.
RESEARCH METHODOLOGY
The Rational Unified Process (RUP) was selected for this study due to its methodological advantages over other development approaches such as Waterfall and Agile.
The traditional Waterfall model, being linear in nature, offers limited flexibility in accommodating changes to user requirements that frequently occur during the development of online sales applications.
Conversely, the Agile approach is more adaptive but demands intensive communication and active user participation in each iterationAian aspect that is relatively difficult to implement in the context of Islamic boarding schools due to constrained technical and managerial resources.
Unlike the previous two approaches.
RUP combines the structured clarity of WaterfallAos development phases with the iterative and user-oriented characteristics of Agile principles.
Moreover.
RUP integrates the systematic Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 use of Unified Modeling Language (UML), facilitating a structured process for analysis, design, implementation, and testing.
Therefore, the application of RUP in this study is deemed most suitable for developing a system that not only aligns with user needs but can also be implemented in an incremental, adaptive, and systematically measurable manner.
The workflow of this research was organized using a Work Breakdown Structure (WBS) to systematically depict each development phase and corresponding activity throughout the system development process.
The WBS, illustrated in Figure 1, was designed based on the Rational Unified Process (RUP) methodology, which was selected due to its support for iterative, structured, and user-oriented system development.
The RUP stages implemented in this study include:
Inception This stage began with identifying business processes through interviews with PROMAD's business owners.
was discovered that transactions were conducted manually via WhatsApp and recorded in a book.
Functional and non-functional requirements were then formulated based on observations and literature.
Elaboration At this stage, the system design is carried out using Unified Modeling Language (UML) modeling, namely:
Use Case Diagram to map the main functions of the system and actors.
Activity Diagram to activity flow model.
Sequence Diagram to describe the interaction flow between objects, and Class Diagram to represent data structure.
Figure 1.
WBS flow Construction The application was implemented using the PHP programming language with the Laravel framework.
The database was designed using MySQL.
The interface was designed with user-friendliness and device compatibility in mind.
The application was developed modularly and tested using black-box testing to verify that all features function as intended.
Transition After implementation was complete, a trial was conducted with PROMAD store users.
Feedback was collected via a Google Form to evaluate user satisfaction and system effectiveness.
The application was then installed and used directly in store operations.
Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29
RESULT AND DISCUSSION
The application was developed with user needs and PROMAD's business process flow in mind.
Here are the results of each stage:
1 Inception The inception stage involves activities starting with identifying business processes, determining system specifications, and identifying actors to obtain the data needed for the research.
The results of each activity in this stage are shown below:
Identify Business Process A business process identification analysis was conducted to determine the ongoing business processes at the PROMAD store and the business processes of the application to be built, thus providing a comprehensive overview of the application to be built.
This business process identification was derived from a literature review and interviews, and the following is a representation of the ongoing business processes, as seen in Figure 2.
Figure 2.
Business Flow An explanation of each activity listed in Figure 2 is presented in detail in Table 1, which includes a description of the activity, as well as a description of what is done in each stage.
Table 1.
Penjelasan Alur Bisnis Aktivitas Deskripsi Customer makes an order Customers or buyers order products via WhatsApp number and make payments to the account number received from WhatsApp.
Treasurer/admin records and The treasurer or admin records and summarizes every summarizes every transaction product order transaction received via WhatsApp.
Treasurer/admin makes a report The treasurer or admin makes a report containing a product sales report and submits it to the shop owner every Menentukan spesifikasi sistem Formulate system specifications to describe all the criteria that facilitate application development.
The study of functional and non-functional requirements consists of several stages designed to gather important information and formulate the application concept, including the following:
Funtional Specifications Functional requirements describe the processes the system will perform and the information it will contain and The following are the functional specifications of the system being built:
The system can be accessed by admins and users .
Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 .
The system can add users.
The system can log in and log out.
The system can manage products.
The system can manage product purchases.
The system can manage product orders.
The system can manage product orders.
The system can make payments using a payment gateway.
The system can generate product and product purchase reports.
The system can view the number of users, products, and product purchases.
Non-Functional Specifications Web platform based system The system uses the PHP programming language with the Laravel Framework.
Database management application using MySQL Browser can use google chrome microsoft edge and others The minimum hardware used by the manufacturer and user includes:
Creator Side Processor Intel(R) Celeron(R) CPU N3160 @1.
60GHz.
RAM: 4 GB.
Hard disk: 500 GB Xampp is used for the server.
Visual Studio Code is used as a text editor, browser, and composer.
Laptop or Computer .
Creator Side For the user side, accessing the application is more flexible because the platform used is a mobile-friendly web, therefore the device used is a device that can access the internet via a browser (Google Chrom.
Identify the actors Actor Identification aims to identify the targets who will carry out activities in the system to be created.
The identified actors are as follows:
Admin, namely Treasurer, is part of the admin whose job is to view product reporting data, product orders and product purchases as well as manage user data.
Customers are buyers who can purchase products and make payments.
2 Elaboration This elaboration stage contains activities for designing use case diagrams, activity diagrams, sequence diagrams, class diagrams, menu structures and designing interfaces.
1 Designing Use Case Diagrams Use case diagram design is carried out after identifying system requirements through literature review and interviews with relevant parties.
The purpose of this design is to illustrate the relationship between actors .
ystem user.
and the functions .
se case.
available in the sales system.
Figure 3.
Use Case Flow Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 Figure 3 shows a use case diagram consisting of two types of actors: Admin and User.
Each actor has a different role and access to different features within the system.
This design begins with identifying the actors and identifying the use case diagrams based on the literature review and interviews conducted.
The explanation of each activity depicted in the use case diagram is as follows:
Managing Users This is a function that can only be accessed by Admins.
With this feature.
Admins can add, edit, or delete data for other users registered in the system.
Managing Products This function is used by the Admin to manage herbal product data, such as adding new products, updating product information, or deleting products that are no longer available.
Manage Reports This feature provides access for Admins to view sales and transaction reports that occur in the system, as well as print reports if necessary.
Product Order This is a feature used by users to order herbal products available in the system.
Make Payment After successfully placing an order, the user can continue to the payment process according to the total transaction made.
Transaction History This feature allows users to view records or history of transactions they have previously made, including order and payment status.
Login All activities in the system require a login process.
Therefore, each use case has an <<include>> relationship with the login function as the initial step to ensure authentication and authorization of users accessing the 2 Designing Activity Activity diagrams are used to depict the sequential flow of activities carried out by actors .
and the These diagrams provide a visual understanding of the business process or system flow, from start to In this herbal product sales system, one of the key activities is the product ordering process, which is visualized in Figure 4.
Figure 4.
Product Activity Diagram Flow Figure 4 shows the activity stages in the product ordering process for users.
A more detailed explanation of the activities is provided below:
In the first stage, the customer enters the system's main page as the starting point of interaction.
Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 Next, the system displays all available products on the main page so the user can view and select the desired The customer then selects a product from the displayed list.
The system then displays the product details page, which contains information such as the product name, price, and a brief description.
Next, the customer clicks the select product button to add the product to the cart.
Finally, the system saves the product to the cart, allowing the user to proceed with the payment process.
Sequence Diagram A sequence diagram is a diagram that depicts an object and activity.
A product message sequence diagram can be seen in Figure 5.
Figure 5.
Product Sequence Diagram Flow Figure 5 shows a sequence diagram explaining the product ordering process in the Promad application.
In the diagram, the customer selects the desired product and adds it to their cart.
3 Designing Class Diagrams Class Diagram to describe the system structure in terms of defining a collection of classes that will becreated to build a system, to describe the class diagram in this application can be seen in Figure 6.
Figure 6.
Class Diagram Flow Figure 6 illustrates the classes and attributes in a herbal medicine sales application.
One of the functions of a class diagram is to provide an overview of the application or software and the relationships within it.
4 Menu structure Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 The menu structure is created to provide an overview of the menus in the system that can be accessed based on the menu levels and roles available.
Admin menu structure, is a design of the display for the admin which functions to manage everything in the system, including create, update and delete.
The menu structure display is designed as follows.
Figure 7.
Admin Menu Structure In Figure 7, there is a design of the menu structure for the admin which functions to manage users who can enter the application, including create, update and delete.
Customer menu structure, is a design of the display for customers.
The menu structure display is designed as Figure 8.
Customer Menu Structure Figure 8 shows a design of the menu structure for customers, which functions to manage product purchases and view transaction history.
5 Designing the Interface Interface design is a general outline of the website to be created.
Designing an interface is useful for efficiency when implementing it into a programming language.
Figure 9 below shows one such interface, the checkout Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 Figure 9.
Checkout Interface Design In Figure 9, which is the design of the checkout menu display which is used for customers to check out products and make payments using the payment gateway.
3 Construction During the construction stage, the analysis and design were implemented in a programming language.
This system was built using the PHP programming language and the Laravel framework.
The implementation and alpha testing of the application design are as follows:
Programming Language Implementation The following are the results of the implementation of the system design into a programming language on the checkout menu interface, which can be seen in Figure 10.
Figure 10.
Checkout Menu Interface Black Box Testing This herbal medicine sales application was tested using black box testing, a method of alpha testing conducted by programmers or researchers to check the application's functionality for errors.
The alpha testing results are presented in Table 2.
Item Uji Table2.
Black Box Testing Results Hasil yang Test Step Enter the page Displays Enter your email and dashboard pages according to role Click the login button Hasil pengujian Status Displays dashboard pages according to role Valid Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 Item Uji Test Step Admin Go to the login page Enter the wrong email address and password Click login Go to the main page Select a product Add it to your cart Go to the shopping cart Fill in the details form Select a courier and payment method Make payment Go to the Manage Users Click Edit User Click Delete User Go to the product page Click Add Product Fill out the product form Click Save Click Product Gallery Upload product images Go to the product page Click edit product Fill out the product edit Click update Go to the Manage transactions page Click edit on the transaction to be Select transaction status Hasil yang Displays incorrect email or password Hasil pengujian Status Displays incorrect email or password Valid Displays the details page of the selected product and saves it to the Successfully made payment and displayed the checkout page Displays the details page of the selected product and saves it to the Successfully made payment and displayed the checkout page Valid Displays notification of successful user editing and successful user Successfully saved product and product image Displays notification of successful user editing and successful user Successfully saved product and product image Valid Successfully updated product Successfully updated product Valid Successfully transaction status Successfully transaction status Valid Valid Valid Table 2 explains the steps taken by the research to verify that all menus and features were correct and error-free.
Therefore, the herbal medicine sales application or system was successful.
4 Transition The Transition stage is the final phase in application development using the Rational Unified Process (RUP) At this stage, the developed system is tested by end users, namely PROMAD management, to ensure that all features function as expected and provide a good user experience.
The trial was conducted by installing the application directly in the store's operational environment and collecting user feedback through a digital form (Google For.
Elsen et al.
Jurnal Sistematik | Vol.
2 No.
1 | May 2026: pp 19-29 The test results demonstrated that the application facilitated sales transactions, product management, and sales reporting more effectively and efficiently.
Furthermore, the application received positive feedback from users regarding the ease of use of the interface and the system's accessibility through web-based tools.
The transition process also included brief user training on how to operate the system, as well as user documentation to facilitate adaptation.
Once the transition phase was complete, the application was declared ready for full use to support PROMAD's business activities.
CONCLUSION
This research successfully designed and developed a web-based herbal medicine sales application using the Rational Unified Process (RUP) method for the PROMAD business unit of the Madaarikul Ulum Islamic boarding school.
This application is able to meet user needs in terms of sales transactions, product management, and sales reporting.
The RUP stages, from Inception.
Elaboration.
Construction, and Transition, were implemented systematically and iteratively to produce a system that meets the needs.
The use of UML (Use Case.
Activity.
Sequence, and Class Diagra.
modeling, development with Laravel, and Black Box Testing methods ensured the application's proper and reliable functionality.
Suggestions for further development include adding a shipment tracking feature, integration with local ewallets, and a sales analytics dashboard to further enhance the application's competitiveness and support PROMAD's market expansion.
REFERENCES