7.1 Main Page
Figure 7.1 Main Page
User need to choose either login with a customer account or admin account by selecting the button below the logo. After that, it will navigate to the login page.
30 7.2 Customer / Admin login page
Figure 7.2: Customer & Admin Login Page
User need to login to the system by entering username and password. Customer and admin are sharing the same user interface to login to the system. Every user required an account only has the permission to log in to the system. If the user do not have an account, user should click the register button which placed below the login panel.
31 7.3 Registration Page
figure 7.3 registration page
User can make registration in this page by entering username and password. If the entered username already existed in the system, it will prompt the error messages to user and alert user enter the new username that doesn’t exist in the system. After user are done the entering the information, user can click the register button. After registration successful, user will receive an acknowledgement email as a confirmation of the registration.
32 7.4 Customer Main Menu Page
Figure 7.4 Customer Main Menu
In this page, the user able to choose which action to perform such as select food for purchase, checking cart, view order history and also profile page. This is the main menu of the system which after performed an action will redirect to this page. User also able to logout the system by clicking the button locate top right of the page.
33 7.5 Select food page
Figure 7.5 Select food Page
User will select their preference food in this page and add into cart waiting for placing order.
User able to filter the selection by selecting the food type and the selection food menu will be listed at this page. In this case, a user has selected burger choice and the beef, chicken and fish burger will be showing on this page. The information of the item such as ingredient and price will be showing at this page as well. By selecting add button beside the food choice is to ensure the item is added into cart waiting for purchasing. While user able to check the cart information by clicking the cart button placed on the top right.
34 7.6 Cart Information Page
Figure 7.6: Cart Information
In this page, the selected items has been list down and the information such as quantity and price also will showed on this page. The cart information page allows the user to have the second confirmation chance to select which items is being purchase by checked the check box beside the item. After confirmed the order, user will need to click the checkout button to proceed to next page.
35 7.7 Place order and Make payment page
Figure 7.7: Place order and make payment page
After checkout the selected items, the system will navigate to this page which is place order and make payment page. In this page which is the final step of placing order, where the order detail will show and user required to fill in personal detail and delivery address in order to allow JACON worker to deliver the food to their doorstep. Besides, the user must select either 1 payment method. User has to fill in credit card details to proceed payment.
36 7.8 E-receipt page
Figure 7.8: receipt page
Lastly, while the order has been successfully placed, a e-receipt will show and customer able to keep it when they need to use it to show the JACON staff as a confirmation of the order during delivery.
37 7.9 View order history page
Figure 7.9: View Order History Page
User also able to check the order history by clicking the order history button in the main menu and it will navigate to this page. Customer able to review order placed in this system. The details include when the user placed the order, what items has been purchased, and the prices of the order.
38 7.10 Profile Page
Figure 7.10: Profile Page
User also able to check their profile information in the profile page which navigate from the main menu. In this page, user’s photo will be show and other information such as name, last login, and last order placed time and date will be showing. User also able to edit profile information such as password. By editing the password required to enter the old password and twice for the new password. After filling all the information, clicking the edit profile will update the system about the new password.
39 7.11 Admin Main Menu Page
Figure 7.11: Admin Main Menu Page
For the admin main menu, it is slightly different with the customer main menu page. Admin main menu did not have the cart information as admin will be managing information but not placing order. Admin main menu only has 4 option to perform action.
40 7.12 Admin Food Menu Page
Figure 7.12: Admin Food Menu Page
By selecting the food menu button in admin main menu, system will navigate to this page where admin able to add new item, edit item and delete item. Admin able to filter the food type before perform managing the information. Admin able to checked the selected item to perform the action. After done, a confirm button must be clicked to ensure the process is ended.
41 7.13 Generate report Page
Figure 7.13 Generate report page
The order report generate page only able to access by admin. In this page admin will click either monthly or weekly button to generate order report based on admin preference. The order report will show below the button and the date range and report generate date also will be showing. The information of the order report include food type, quantity and price.
42 7.14 admin view user profile
Figure 7.14: Admin view user profile
In order to navigate this page is to click the view user profile button in the main menu. In this page, admin able to check the user’s information by searching customer name and able to help them retrieve their password as well as update their information such as contact number and address.
43