1.

0 Customer interface and functions

This will be the interface that customers are using when they wish to order their foods or
beverage. It carries important functions that requires to make the ordering system as useful as
the old paper system but higher efficiency by the enhancement of technology and digitalize. The
functions in this customer interface will be:

Table setting
Menu ordering
View order

1.1 Table Setting function

Set Table Number

Figure 1. Table Setting Function

Before letting the users enter into the system, a table setting function will pop-up to let
users select their table to get the accurate table number of each table. Simply click the set
button to set the table number.

1.2 Customers interface and functions

Figure 2. Customers interface/Main Menu

After log in our system, they have the privileges to view all the menu items on the main
page. In the main menu interface, header will be the category of the foods which customers can
select according to their favor, customers also can see the promotions which appear below the
headers of the page. The content of the page will be the items in grid form, carrying the function
of Order Now! which allow users to order their desire menu item. On the top right corner, there
is a Confirmed Order button which carry the function to let user view their current order.

1.3 Menu ordering function

To order the
item desired

Figure 3. Main Menu emphasize on Order Now! button

Change number
of quantity
Confirm or
cancel the order

Spaces to
enter remarks

Figure 4. Menu Ordering pop-up

After the customers click the Order Now! button, it will create an instance pop-up menu to
allow the users select their desire quantity using the buttons besides the quantity text box, enter
the special remarks that users demand on the text box given, and given two more buttons to let
customers decide to confirm or cancel the orders.
1.4 View order function

Button to view all

confirmed orders

Figure 5. Main Menu emphasize on Confirmed order button

After
every orders that customers have made by the pop-up order function, customers can press the
Confirmed order button on the main page to view their orders.

2.0 Employee interface and functions

The employee interface and functions are for the cashier and admin to use for manage their
restaurant, it consists more functions than the customers because there are a lot stuffs to
manage to including documentation and task management. These functions are:

Log in function

Figure 6. Confirmed order page to view the items ordered

Main interface table view

Manage order interface
- Add new orders function
- Manage orders function
Table switching function
Payment function
Menu management interface
- Add new menu function
- Manage menu function
- Add new category function
- Manage category function
Manage promotions function
Generate report function
Manage employee details interface
Add new user function
Manage existing users
Password changing function

2.1 Log in function (Admin & Cashier)

6
Figure 7. log in pop-up before access to main menu of employee menu

Spaces to let employee

enter their ID
Spaces to let employee
enter their password
Click on log in button after
above information filled

Before the employee access to the functions, there is a log in page for employee to log in to
access certain privilege so that other users that dont have the authority to view or access the
functions.

2.2 Main interface Table view (Admin & Cashier)

Header that consists of

multiple functions

Table Number that shows

different status using color
Green = Available, Red = Taken
Figure 8. Main interface Table view
After log in successfully, the employee can view the main functions of the employee
menu now. It is in table view form so that employee can manipulate all the functions easily with
just clicking on the table they need to manage. There are also functions like Edit Menu,
Manage Promotions, Generate Report and Manage Employee Details on the header so
employee can carry out more functions in the main menu.

2.3 Manage order interface (Admin & Cashier)

Press one of the table

to edit the orders

Figure 9. Main Menu emphasize on order management

Figure 10. Order management menu to carry out basic functions on order management

These are the functions available on the order management after clicking into one of the
table. Employee or admin have the full privilege towards table management since they are
managing the restaurant and serving the customers.

2.3.1 Add new orders function (Admin & Cashier)

Select one
of the
categories

The items will

show in
proper order

Figure 11. Sidebar from the order management page selecting category

10

Figure 12. Sidebar from the order management page selecting item

Select one
of the items

These steps show how to add item into the order by the employee with the employee
interface if customers make mistake or miss out the item they wish to order.
Figure 13. Successfully add the selected item into the order
2.3.2
Manage order function (Admin & Cashier)

Press edit to edit remarks

Figure 14. Order management menu emphasize on edit

11

Enter the remarks into the

spaces provided
Figure 15. Remarks enter into order management page

Remarks now updated

Figure 16. Remarks update in order management page

12

Press delete to
delete order line
Figure 17. Order line delete in order management page

Pop-up dialog to inform

employee on deletion of
order line

Figure 18. Order line delete pop-up warning in order management page
13

Order line
successfully
deleted

Figure 19. Order line deleted

These functions show how to edit remarks and delete order line from the total order so it
will be convenient for employee to manage it.
2.4 Table Switching function (Admin & Cashier)

Table icon
button to
switch table

Figure 20. Order management page emphasize on table switching function

Click any table

number to
switch table

Figure 21. Table view menu to switch table

14

Figure 22. Pop-up dialog to prompt confirmation of switching

Table: 2

Figure 23. Table successfully switched

These steps are showing how to switch table by clicking the table icon button in the
order management menu. There are colors showing the status of each tables to remind the
employee too.

15

2.5 Payment function (Admin & Cashier)

Cashier icon
button to make
payment

Figure 24. Order management page focus on payment function

Enter the amount

in the spaces
provided

Figure 25. Enter the amount customers pay on the spaces provided
After clicking
on the payment button, the payment can be made by entering the amount into the spaces
provided, and the remaining change will be shown to avoid any human error.
2.6 Menu management function (Admin only)
Remaining
amount will
be show

Figure 26. Remaining will be shown as label

16

Select the edit

menu option

Figure 27. Main page of employee interface emphasizes on Edit Menu function

Back button
to return to
employee
system

Header that contains categories

Figure 28. Main interface of menu management interface
The
interface is
simple; it will be only a header on the interface after click on the edit menu button. Therefore,
employee can click on any category to enter, then manipulate the data in the category.

2.6.1 Add new menu function (Admin only)

17

Select one of the categories

Figure 29. Click on one of the categories from header of the Edit Menu page

Category selected

Editable template showed for employee to enter relevant information

Figure 30. Editable template in add item function page

2.6.2 Manage menu function (Admin only)

Figure 31. Item successfully added in menu

18

Select one of the categories

Figure 32. Click on one of the categories from header of the Edit Menu page

Figure 33. The edit page from the category selected

Press edit
button on
one of the
rows

19

Figure 34. The editable template showed in the page

It will show the

edit bar to allow
employee edit

Click
update
button
Figure 35. Click on update button on menu edit page

Figure 36. Description successfully updated

Due to menu changing frequently in restaurant, this feature is to let the employee to
enter the food data and pictures into the category themselves so that anything that need to
change will be easy and fast.

20

2.6.3 Add new category function (Admin only)

Click the +Edit Category button

Click the Add new

category button

Figure 37. Click on the +Edit Category, then select Add new category

Enter new category name

into spaces provided

Press submit button to submit

the new category entered
21

Enter new category ID

into spaces provided

Figure 38. Enter data into respective field and press submit button

New Category added

Figure 39. Category successfully added into the menu

Besides adding only menu item into the category, system also provided function to add
categories into the list.

22

2.6.4 Manage category function (Admin only)

Click on Manage
existing categories

Click on
Edit
button

Figure 40. Click manage existing categories, then click on edit button
23

Enter new
category ID
into spaces
provided

Enter new
category name
into spaces
provided

Press update
button to update
the category
details

Figure 41. Editable template showed to change Category ID and Category Name

Figure 42. Category details successfully updated

24

Click on
Delete
button
Figure 43. Click Delete button to delete a category
Click on
OK
button

Figure 44. Pop-up dialog to show confirmation of deletion

25

Figure 45. Category successfully deleted

All the categories can be edit and delete too because the system must have the flexibility
to amend and change.

2.7 Manage Promotions function (Admin only)

26

Click on Manage
Promotions button

Figure 46. Click the Manage Promotions button on the employee system interface

27

Click on
Edit
button
Figure 47. The promotions management page with edit functions

Editable template showed for employee to enter relevant information

Figure 48. The editable template showed to let employee fill in or alter data

28

Figure 49. Data has successfully altered

Click on
Delete
button

Figure 50. The promotions management page with delete functions

Click on
OK
button

Figure 51. Pop-up dialog prompt for confirmation

29

Figure 52. Data has successfully deleted

2.8 Generate report function (Admin only)

30

Click on Generate
report

Figure 53. Click to carry out generate report function

Select one
of the
selection

Figure 54. Select decision from drop down list

31

One of the
selection
selected,
e.g. day

Choose the
day from the
calendar
Figure 55. Choose the details from options provided

Report
generated

Figure 56. Report generated in pdf format

Since reporting must be very useful to the restaurant, the report can be sort by days,
weeks, months or by menu item. Therefore, all the reports can be view and analyses by the
management board.

2.9 Manage Employee details interface (Admin only)

32

Click on Manage
Employee Details

Figure 57. Click to enter employee management menu

Figure 58. Main interface of employee management

2.9.1 Add new user function (Admin only)

33

Click on
Add New
User

Figure 59. Click to add new user

34

Select one
of the
selection

Figure 60. Select decision from drop down list

35

Enter new Name into

spaces provided
Enter password into
spaces provided
Re-enter password
into spaces provided

Press submit button

Figure 61. Enter the data into spaces provided, then click submit

Figure 62. New users successfully added

2.9.2 Manage existing users function (Admin only)

36

Click on
Manage
Existing Users

Figure 63. Click to manage the existing users

Click on Edit
to edit the
selected user

Figure 64. Click to manage the existing users

37

Click on Update to
update the details

Figure 65. Editable template show for user to edit

Figure 66. Employee details updated

38

Pop-up dialog to show

confirmation to reset
Click on Reset Password
to reset forgotten password

Figure 67. Reset password with button provided

New
password
show

Figure 68. New password appears on center of page

39

Password Reset

Figure 69. Password reset and updated

2.9.3 Password changing function (Admin & Cashier)

Click on user name to enter

password changing function

Figure 70. Main menu of employee interface focus on Password changing function
Click Change Password to
change password

Figure 71. Main interface for password changing

40

Enter current
password into
spaces provided

Click Save button

to change password

Enter new password

into spaces provided

Re-enter new password

into spaces provided
Figure 72. Enter correct information into spaces provided, then click on Save button

41

Figure 73. Passwords has successfully changed

42

3.0 Kitchen interface and function

Kitchen interface and function are for the kitchen crew/chef to manage and use it. It is for
the convenient of the chef to manipulate their order and cooking queue so that there will be no
complaints for customers if the cooking queue is unusual and unfair to the customers. The
functions in this system will be:

Time countdown of menu items

Summary option of menu items
Status Changing of menu items
Order recall option

43

Figure 74. Kitchen interface

3.1 Time countdown of menu items

Green = within 5 minutes

Orange = within 10 minutes
Red = within 15 minutes
Figure 75. time countdown on different colors
3.2 Summary option of menu items
44

Select one of the menu

items on side bar under
Summary column

Figure 76. Select item from side bar

The selected item will

be summarized out in
the main column
Figure 77. Item summarize on the main column

Press Cancel Filter

to return to the full
order queue

Figure 78. Cancellation of filtering

Figure 79. Filter successfully cancelled

45

3.3 Status Changing of menu items

Press button Done if
the kitchen is ready to
prepare the food

Figure 80. Click on button Done to change status

Status changed to
Preparing after
button Done clicked

Figure 81. Status changed to Preparing

46

Press button sent if

the kitchen is ready to
serve the food

Figure 82. Click on button Sent to change status

Figure 83. The order line has been cancelled since it is ready to serve by the waiter

3.4 Order recall option

Press button Recall
Last Order if kitchen
wish to recall the order

Figure 84. The order line has been cancelled since it is ready to serve by the waiter

47

Order recalled

Figure 85. Order has been successfully recalled

48