Easy Laundry on Mobile Phone

I. Introduction

II. Related Work

III. Methodology

IV. Result and Discussion

B. System Design

After the requirement analysis, the next process is system design. The system design process can be created using UML (Unified Modeling Language), specifically use case diagrams and class diagrams, as well as using data model design, including CDM (Conceptual Data Model) and PDM (Physical Data Model).

1) 

Workflow Design: This stage provides a fundamental overview of the system’s behavior and the activities that occur when the application is running.

1)

Use Case Diagram

Figure 1. Use case diagram.

Figure 1. Use case diagram.

In the designed system, there are two actors: Customer and Administrator. The Customer has several use cases, including ”activate membership” to enable their mem- bership and ”place order” to request laundry services. Additionally, optional functions such as ”update account information” to modify personal data and ”view order history” to check order records are available. Mean- while, the Administrator is responsible for system man- agement through ”manage user” and ”manage order” use cases, involving user and order administration, including review, status update, and cancellation of orders.

2) 

Data Model Design (Conceptual Data Model)

Figure 2. CDM.

Figure 2. CDM.

In the designed conceptual data model (CDM), there are three main entities: Customer, User, and Order, all of which have one-to-one relationships. Each customer has one user account, each user is associated with one customer, and each order is related to one customer.

3) 

Data Model Design (Physical Data Model)

Figure 3. PDM.

Figure 3. PDM.

In the physical data model (PDM), the Customer ta- ble contains attributes ‘customerID‘, ‘name‘, ‘phone‘, and ‘address‘. The User table includes ‘userID‘, ‘user- name‘, ‘password‘, ‘role‘, ‘avatar‘, and ‘customerID‘ as a foreign key to the Customer table. The Order table comprises ‘orderID‘, ‘customerID‘, ‘orderDate‘, and ‘re- turnDate‘, with ‘customerID‘ serving as the foreign key linking orders to customers.

4) 

Class Diagram

Figure 4. Class diagram.

Figure 4. Class diagram.

In the designed class diagram, there are three classes: Customer, User, and Order. The Customer class includes attributes like ‘customerID‘ (Primary Key), ‘name‘, ‘phone‘, and ‘address‘, with methods ‘getCustomerDe- tails()‘ and ‘updateCustomer()‘. The User class contains attributes ‘userID‘ (Primary Key), ‘username‘, ‘pass- word‘, ‘role‘, ‘avatar‘, and ‘customerID‘ (Foreign Key), with methods ‘login()‘, ‘logout()‘, and ‘changePass- word()‘. The Order class has attributes ‘orderID‘ (Pri- mary Key), ‘customerID‘ (Foreign Key), ‘orderDate‘, and ‘returnDate‘, with methods ‘placeOrder()‘, ‘can- celOrder()‘, and ‘returnOrder()‘.

2) 

Interface Section: The interface design provides an overall view of the application to be developed.

1) 

Landing view

An overview of the homepage appearance before login.

Figure 5. Landing view.

Figure 5. Landing view.

2) 

Sign view

An overview of the login page for user access.

Figure 6. Sign in view.

Figure 6. Sign in view.

3) 

Home section view

An overview of the main page containing general infor- mation about laundry orders.

Figure 7. Homen setion view.

Figure 7. Homen setion view.

4) 

Laundry section view

This page is for ordering laundry services.

Figure 8. Lanundry section view.

Figure 8. Lanundry section view.

5) 

Membership section view

An overview of the page for becoming a member.

Figure 9. Membership section view.

Figure 9. Membership section view.

6) 

Account Section view

An overview of the user profile page containing personal data.

Figure 10. Account setion view.

Figure 10. Account setion view.

C. Implementation

During implementation, the laundry application was devel- oped in line with the previously specified design. Frontend development utilized HTML, CSS, and JavaScript alongside Laravel Blade and Bootstrap for responsive design. The interface design was guided by Figma mockups, ensuring consistency and user-friendliness, with a focus on mobile com- patibility. Backend development employed PHP and Laravel, implementing features like scheduling, order tracking, with security through Laravel’s authentication. MySQL was used for database development, following the Physical Data Model (PDM) design, including tables like ‘Customers‘, ‘Users‘, and ‘Orders‘, with relations established based on the Conceptual Data Model (CDM).

The implementation of the software interface is based on the previously conducted design. The interface implementation is demonstrated through screenshots of the website pages used as research tools and materials.

1) 

Admin Interface:

1) 

Admin dashboard

This home page is the main page of the Admin. this page contains information about the number of users, total orders, and pending orders.

Figure 11. Dashboard.

Figure 11. Dashboard.

2) 

User list

This user list page contains a list of user personal data that can be edited and deleted.

Figure 12. User list.

Figure 12. User list.

3) 

Order list

This order list page contains a list of orders that can be edited and deleted.

Figure 13. Order list.

Figure 13. Order list.

2) 

User Interface:

1) 

User landing interface

This page displays the app logo and some phrases to attract customers’ attention, and a get started button that directs users to the login page.

Figure 14. Landing.

Figure 14. Landing.

2) 

User sign in interface

This page is a user login display that is required to enter an email and password in order to use the application. After a successful login process, the web will redirect to the user’s main page.

Figure 15. Sign in.

Figure 15. Sign in.

3) 

User sign up interface

This page is a display for users who have not registered for an account. On this page you are required to enter your personal data such as name, gender, address, telephone number, email, and password.

Figure 16. Sign up.

Figure 16. Sign up.

4) 

Forgot password interface

This page is intended for users who forget their account password. This page can enter a new password by entering an email first.

Figure 17. Forgot password.

Figure 17. Forgot password.

5) 

User home interface

Home is the user’s main page which contains infor- mation about laundry order status, membership status. Then, the notification button for notifications about laundry services, as well as other menu buttons such as laundry for ordering, membership to buy membership, and account which contains user data information.

Figure 18. Home.

Figure 18. Home.

6) 

User profile interface

The profile page in the account section displays user data, namely name, email, gender and address. The data can be edited by pressing the ’Edit Profile’ button.

Figure 19. Profile.

Figure 19. Profile.

7) 

User profile edit interface

The edit profile page displays some personal data that can be edited. In addition, users can change their pass- word.

Figure 20. Profile edit.

Figure 20. Profile edit.

8) 

User membership interface

The membership page displays several membership op- tions namely silver, gold, and platinum with different benefits.

Figure 21. Membership.

Figure 21. Membership.

9) 

User membership interface 2

This page displays the price per membership, a list of membership benefits that will be obtained, and a ”buy” button to purchase a membership.

Figure 22. Membership 2.

Figure 22. Membership 2.

D. Integration and Testing

This application testing will be conducted using black box testing. In this black box testing using a table that contains columns test name, test form, expected result, test result. This test is carried out to evaluate the workings and usability of the program, as well as ensuring that the data output is as expected. The focus of this test is on the functional requirements of the software.

1) 

Log in and register test: This test is to test the function- ality of the login and register features in the application.

Table I. Log in and Register Test Table.

Table I. Log in and Register Test Table.

Test Name	Test Form	Expected Result	Test Result
Landing Page	Opening	Showing the Landing Page	Success
Successful Login	Clicking the login button after filling it with the right email and password	Entering a login session and showing the home page	Success
Failed Login	Clicking the login button without filling or wrong email and password	Shows a warning for the mistake	Success
Log Out	Clicking the logout button	Exit login sessions and return to login page	Success
Forgot pass- word	Send email to change password	Provide link to change password	Success
Sign Up	complete your personal data	then enter to log in	Success

2) 

Order test: This test is to test the functionality of the ordering feature in the application.

Table II. Order Test Table.

Table II. Order Test Table.

Test Name	Test Form	Expected Result	Test Result
Order(1st page)	Choose date and fragrance	Confirm the chosen date and fragrance	Success
Order(2nd page)	Add the clothes you want to wash	Confirm the chosen clothes	Success
Order (3nd page)	Clicking confirm Order	Add order to the database	Success
Ongoing Or- der	Clicking on Ongoing Or- der	Show the or- der status	Success
Recent Order	Return to home page after adding order	Displays laundry orders that have been ordered	Success

3) 

Profile test: This test is focused on testing the user profile feature in the application.

Table III. Profile Test Table.

Table III. Profile Test Table.

Test Name	Test Form	Expected Result	Test Result
Membership	Clicking one of the mem- bership type	Sending message to owner and admin	Success
Notification	Will display your order history or Showing clothes that are being washed	Membership Start and End	Success
Profil	Clicking Ac- count	Showing Profile details	Success
Edit Profil	Changing Name, Phone Number, Gender, and Address	Edited data saved	Success
Edit Password	Changing password	Edited pass- word saved	Success
Delete Account	Click delete button and confirm with password	Account deleted	Success

V. Conclusion

References

1. K. Dery, D. Kolb, and J. MacCormick, “Working with connective flow: how smartphone use is evolving in practice,” European Journal of Information Systems, vol. 23, no. 5, pp. 558–570, 2014. [CrossRef]
2. D. M. Bamasoud, A. M. Alqahtani, E. A. Aljdea, R. A. Alshomrani, M. S. Alshahrani, Z. A. Alghamdi, A. M. Alghamdi, S. F. Almaawi, and A. D. Alshahrani, “An explorative study for laundry mobile application,” International Journal of Advanced Computer Science and Applications, vol. 9, no. 4, 2018.
3. M. Azarboon, “Developing web application for a laundry service,” 2019.
4. N. Z. Zulkifli, M. H. Alkawaz, H. Razalli, and G. A. Salman, “Pickup and delivery laundry service applications: A review paper,” in 2021 IEEE Symposium on Industrial Electronics & Applications (ISIEA). IEEE, 2021, pp. 1–5.
5. M. Faisal, R. Ishak, E. P. Saputra, T. Dwiantoro, D. A. Astuti, M. A. Hasan et al., “Implementation of a web-based laundry application with the laravel framework for laundry aisy laundry,” Jurnal Mantik, vol. 7, no. 1, pp. 390–399, 2023. [CrossRef]
6. W. P. Rimbing, R. Sengkey, and B. Sugiarso, “Rancang bangun aplikasi laundry antar jemput,” 2021.
7. A. Arippudin, “Laundry service business management,” Neo Journal of economy and social humanities, vol. 1, no. 1, pp. 9–16, 2022. [CrossRef]
8. M. Hasnine, M. Chayon, and M. Rahman, “A cost effective approach to develop mid-size enterprise software adopted the waterfall model,” International Journal of Computer and Information Engineering, vol. 9, no. 5, pp. 1175–1184, 2015.
9. Y. S. Dwanoko, “Implementasi software development life cycle (sdlc) dalam penerapan pembangunan aplikasi perangkat lunak,” Jurnal Teknologi Informasi: Teori, Konsep, dan Implementasi, vol. 7, no. 2, p. 143003, 2016.
10. Y. E. Rachmad, L. P. D. Tampubolon, W. Purbaratri, I. G. I. Sudipa, A. G. B. Ariana, M. I. Faried, D. Atmojo, H. Kurniawan et al., Rekayasa Perangkat Lunak. PT. Sonpedia Publishing Indonesia, 2023.
11. F. Diansyah, M. R. Rahman, R. Handayani, D. D. N. Cahyo, and Utami, “Comparative analysis of software development lifecycle methods in software development: A systematic literature review,” International Journal of Advances in Data and Information Systems, vol. 4, no. 2, pp. 97–106, 2023. [CrossRef]
12. S. Khan and A. T. Khanam, “Study on mvc framework for web development in php,” Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol, pp. 414–419, 2023. [CrossRef]
13. Q. Nguyen, “Building a web application with laravel 5,” 2015.
14. L. Nunno, “Lobo scheduler: A unm open data mobile-first web app from a big data perspective.”.
15. A. Rockey, J. Cohn, and S. Eastman, “Reducing access barriers: Explor- ing student smartphone use across higher education institutions.” Journal of Educational Research and Practice, vol. 13, no. 1, pp. 285–303, 2023.
16. S. Nidhra and J. Dondeti, “Black box and white box testing techniques- a literature review,” International Journal of Embedded Systems and Applications (IJESA), vol. 2, no. 2, pp. 29–50, 2012. [CrossRef]