How to Use (Web App)
To start the system on the website, follow these step-by-step procedures:
​
1. By the use of "ngrok" software application to create connection between Raspberry Pi and laptop (used for localhost), since the web was trial version.
2. Copy the URL link to web browser and paste.
3. The website will be redirected to the login page.
To start the system on the website, follow these step-by-step procedures:
1. The main home page of the created web app.
2. If the user does not have an account, click the "Join" button.
2. Once logged in, the user will be redirected to the page where the user can select whether to place an order, check order status, go to the homepage, or logout.
2. The user was able to use this action to crop images taken from a mobile or other camera, converting them into the required pixel size of 640 width and 1140 height. After the cropping process, the cropped image was ready for download, and could later be used for uploading when placing an order.
3. The user was required to fill out information such as Name, Address, Contact number, Email, and Note for the types of cloth. Additionally, there were separate image upload buttons for four images, each with a guide indicating the required appearance before uploading. The four images required were the front view, left view, side view, and back view of the user.
4. Displays the client interface, which shows the order status of clients and all the information they entered in the form. The interface displays the current status of the order in the "status" column. Meanwhile, the "results" column displays the calculated measurements of the client.
5. Admin web menu interface was shown, which included three action buttons. The "Client's Information" button allowed the admin to view all the uploaded images and information of the customers, which were saved directly into the system database. There was also a button for "New Registration" to create a new admin account, and a "Logout" button to log out of the current admin session.
6. Interface where the admin can view the users who have sent their order, which includes their information and images. Once a client completes and sends the order form to the admin, the admin can view details such as the client's name, date of submission, address, contact number, email, and note, as well as four images. Under the Action column, the admin can choose from three options for the order status: Pending, On Process, and Completed. Once the admin updates the status, the current status of the order will be displayed in the Status column. There is also a text box for the admin to input the client's measurements, which the client can view. Once the measurements are successfully saved, they will appear in the Results column.
7. Displays all of the data entered by users, including their name, date, address, contact information, email, and the four images. Additionally, the table features two columns labeled "status" and "result", where any changes or updates made by the admin will be saved. This database is utilized to display the information and updates made by both the user and the admin.