0% found this document useful (0 votes)
16 views

G4 Report Screens

The document provides user guidelines for a coffee chain website and app. It includes instructions for guests to register an account, view menus and branches, read news, and shop online. It also includes guidelines for customers to log in/out, update their profile, view orders, and check out purchases. Finally, it outlines guidelines for administrators to manage orders, customers, products and other site content through a backend interface.

Uploaded by

Tùng Đức
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views

G4 Report Screens

The document provides user guidelines for a coffee chain website and app. It includes instructions for guests to register an account, view menus and branches, read news, and shop online. It also includes guidelines for customers to log in/out, update their profile, view orders, and check out purchases. Finally, it outlines guidelines for administrators to manage orders, customers, products and other site content through a backend interface.

Uploaded by

Tùng Đức
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 98

Figure 6.4.

Run project

6.2.2.3.2. For Production


• Create application-prod.properties file by copy application-backup.properties file content
and

modify environment variables if needed

• Push your code and merge to origin/develop branch

• Wait for OnRender to CI/CD your newest commit about 7-8 minute

Figure 6.5. Wait for OnRender to CI/CD

6.3. User Manual


6.3.1. Guest guideline
6.3.1.1. Register
1. Go to Landing Page screen then user click “ĐĂNG NHẬP” tab on header.

208
2. User click “Đăng ký” button

3. It will display a form for the user to enter the registration information

4. User click “Đăng ký“button

209
5. It will be showed successfully registration screen

6.3.1.2. View the menu


1. Go to Landing Page screen

2. Mouse over the “THỰC ĐƠN” tab on header. Dropdown including item will be

displayed:

210
3. User click any name of category to redirect to menu screen

4. It will display menu screen

6.3.1.3. About us (View information of Coffee Chain)


1. Go to Landing Page screen

211
2. Click “VỀ CHÚNG TÔI” tab on header

3. It will display about us screen

6.3.1.4. View all posts from Coffee Chain


1. Go to Landing Page screen

212
2. Click “TIN TỨC” tab on header

3. It will display list of news:

4. User click any news to see detail information there news

213
5. It will display “Detail News” screen

6.3.1.5. View information (location, phone number) of each branch


1. Go to Landing Page screen

2. Click “QUÁN CÀ PHÊ” tab on header

214
3. It will display list of branches:

4. User click any branch to show detailed information there branch

5. It will display “Detail Branch” screen:

215
6.3.1.6. Shopping Now
1. Go to Landing Page screen

2. Click “MUA NGAY” tab on header

3. It will display list of goods

216
4. User click any news to see detail information there goods

5. It will display “Detail Goods” screen

6.3.1.7. Check out


1. Go to Landing Page screen

217
2. Click “MUA NGAY” tab on header

3. It will display list of goods and user can click “ Chọn Mua ” button to add to cart

4. User click any news to see detail information there goods

218
5. It will display “Detail Goods” screen

6. After choosing the size and quantity then User click “ĐẶT MUA NGAY “to add goods to cart

7. It will display add to cart successfully message

219
8. Click “Cart” icon tab on header

9. It will display information about the goods that the user has added

10. Users enter personal information and user can click “ Đặt hàng” to place an order

220
6.3.2. Customer guideline
6.3.2.1. Log in
1. Go to Landing Page screen then user click “ĐĂNG NHẬP” tab on header.

2. User enter username and password

3. User click “Sign in” button to login

221
4. User will redirect to Landing Page screen

6.3.2.2. Log out


1. Go to Landing Page screen

2. Click “ĐĂNG XUẤT” on header

222
3. It will go back to the Landing Page screen with the message logout successful

6.3.2.3. Forgot password


1. Go to Landing Page then user click “ĐĂNG NHẬP” tab on header.

2. User click “Forgot password?”

223
3. User enter information about username and email

4. User click “Forgot password” button

5. User forgot password successfully

224
6.3.2.4. Change Password
1. After user login successfully with role “User”

2. User click “TÀI KHOẢN” tab on header

3. User enter new password

225
4. User click “Update Password” button

5. It will display update password successfully message

6.3.2.5. Profile Management


6.3.2.5.1. View personal information
1. After user login successfully with role “User”

226
2. User click “TÀI KHOẢN” tab on header

3. It will display information screen about customer

6.3.2.5.2. Update personal information


1. After user login successfully with role “User”

227
2. User click “TÀI KHOẢN” tab on header

3. It will display information screen about customer

4. User will enter his changes in the corresponding input boxes

228
5. User click “Update” button

6. It will display update profile successfully message

6.3.2.6. View the menu


1. After user login successfully with role “User”

229
2. Mouse over the “THỰC ĐƠN” tab on header. Dropdown including item will be

displayed:

3. User click any name of category to redirect to menu screen

4. It will display menu screen

230
6.3.2.7. About us (View information of Coffee Chain)
1. After user login successfully with role “User”

2. Click “VỀ CHÚNG TÔI” tab on header

3. It will display about us screen

231
6.3.2.8. View all posts from Coffee Chain
1. After user login successfully with role “User”

2. Click “TIN TỨC” tab on header

3. It will display list of news

232
4. User click any news to show detailed information there news

5. It will display “Detail News” screen

6.3.2.9. View information (location, phone number) of each branch


1. After user login successfully with role “User”.

233
2. Click “QUÁN CÀ PHÊ” tab on header

3. It will display list of branches

4. User click any branch to show detailed information there branch

234
5. It will display “Detail Branch” screen

6.3.1.10. Shopping Now

1. After user login successfully with role “User”.

2. Click “MUA NGAY” tab on header

235
3. It will display list of goods

4. User click any news to see detail information there goods

5. It will display “Detail Goods” screen

236
6.3.2.11. Check out
1. After user login successfully with role “User”

2. Click “MUA NGAY” tab on header

3. It will display list of goods and user can click “ Chọn Mua ” button to add to cart

237
4. User click any news to see detail information there goods

5. It will display “Detail Goods” screen

6. After choosing the size and quantity then User click “ ĐẶT MUA NGAY “to add goods to cart

238
7.It will display add to cart successfully message

8. Click “Cart” icon tab on header

9. It will display information about the goods that the user has added

239
10. Users enter personal information and user can click “ Đặt hàng” to place an order

6.3.1.12. Order
1. After user login successfully with role “User”

2. After the user makes a purchase, successfully adds the products to the cart and places the order
successfully

240
3. It will display list of order:

6.3.3. Administrator guideline


6.3.3.1. Log in
1. Go to “Login “screen

2. User enter username and password then click “Sign in” button to login

241
3. User will redirect to management screen with successful login message

6.3.3.2. Log out


1. After user login successfully with role Admin. It will display then user click icon arrow down

2. User click “ĐĂNG XUẤT” button to sign out

242
6.3.3.3. Forget password
1. Go to “Login “screen

2.User click “Forgot password” to redirect forgot password screen

243
3. User enter our username and email then click “Forgot password” button

4. User forgot password successfully

6.3.3.4. Change Password


1. After user login successfully with role Admin. It will display then user click icon arrow down

2. User click “Settings” on menu

244
3. User enter password need to be changed then click “Update Password” button

4. Updated password successfully

245
6.3.3.5. Profile Management
6.3.3.5.1. View personal information
1. After user login successfully with role Admin. It will display then user click icon arrow
down

2. User click “Settings” on menu

3. It will display “Admin profile” screen

246
6.3.3.6. Order Management
6.3.3.6.1. View list of orders
1. After user login successfully with role Admin. It will display then admin will click
Order Management.

2. List of Order will display:

247
6.3.3.7. Customer Management
6.3.3.7.1. View list of customers
1. After user login successfully with role Admin. It will display then admin will click “User
Management”.

2. List of User will display:

6.3.3.7.2. View detail information customer account


1. After user login successfully with role Admin. It will display then admin will click
User Management.

248
2. List of User will display:

3. Admin can click any “Eye” icon to redirect detail information user

4. Detail information will display:

249
6.3.3.8. Branch Management
6.3.3.8.1. View list of branches
1. After user login successfully with role Admin. It will display then admin will click
Branch Management.

2. List of User will display:

250
6.3.3.8.2. Add branch
1. After user login successfully with role Admin. It will display then admin will click
Branch Management.

2. List of Branch will display:

3. User will click “Create branch”

251
4. It will display a form for the user to enter information about the branch

5. Enter all the information and click the “Save “button

6.3.3.8.3.Enable/Disable branch
1.User will change between deactivate and active to change the status of the branch

252
6.3.3.8.4. Update Branch
1. After user login successfully with role Admin. It will display then admin will click
Branch Management.

2. List of Branch will display

3. User will click “Create branch”

253
4. It will display a form for the user to update information about the branch

5. User will click “edit” to switch to change to editable mode

6. Enter all the needs to be changed information and click the “Save” button

254
6.3.3.9. Product Management:
6.3.3.9.1. View list of products
1. After user login successfully with role Admin. It will display then admin will click
Goods Management.

2. List of Goods will display:

255
6.3.3.9.2. Add product
1. After user login successfully with role Admin. It will display then admin will click
Goods Management.

2. List of Goods will display:

3. User will click “Create Goods”

256
4. It will display a form for the user to enter information about the goods

5. Enter all the information and click the “Save “button

6.3.3.9.3.Enable/Disable product
1. User will change between deactivate and active to change the status of the goods

257
6.3.3.9.4. Edit product
1. After user login successfully with role Admin. It will display then admin will click
Goods Management.

2. List of Goods will display:

3. User click any “Eye” icon in a row

258
4. It will display a form for the user to update information about the goods

5. User will click “edit” to switch to change to editable mode

6. Enter all the needs to be changed information and click the “Save “button

259
6.3.3.10. Category Management:
6.3.3.10.1. View list of a category
1. After user login successfully with role Admin. It will display then admin will click
Category Management.

2. List of Category will display:

260
6.3.3.10.2. Add category
1. After user login successfully with role Admin. It will display then admin will click
Category Management.

2. List of Category will display:

3. User will click “Create category”

261
4. It will display a form for the user to enter information about the category

5. Enter all the information and click the “Save “button

6.3.3.10.3. Enable/Disable category


1. User will change between deactivate and active to change the status of the category

262
6.3.3.10.4. Edit category
1. After user login successfully with role Admin. It will display then admin will click
Category Management.

2. List of Category will display

263
3. User will click any “Eye” icon in a row

4. It will display a form for the user to update information about the category

5. User will click “edit” to switch to change to editable mode

6. Enter all the needs to be changed information and click the “Save “button

264
6.3.3.11. Post Management:
6.3.3.11.1. View list of posts
1. After user login successfully with role Admin. It will display then admin will click
News Management.

2. List of News will display:

265
6.3.3.11.2. Add post
1. After user login successfully with role Admin. It will display then admin will click
News Management.

2. List of News will display:

3. User will click “Create news”

266
4. It will display a form for the user to enter information about the news

5. Enter all the information and click the “Save “ button

6. It will redirect to “News Management” screen with successfully created message

6.3.3.11.3. Edit post


1. After user login successfully with role Admin. It will display then admin will click
News Management.

267
2. List of News will display

3. User click any “Eye” icon in a row

4. It will display a form for the user to update information about the news

268
5. User will click “edit” to switch to change to editable mode

6. Enter all the needs to be changed information and click the “Save “button

269
6.3.3.12. Branch Manager Management:
6.3.3.12.1. View list of branch managers
1. After user login successfully with role Admin. It will display then admin will click
News Management.

2. It will display list of branches:

6.3.3.12.2. Add a branch manager


1. After user login successfully with role Admin. It will display then admin will click
News Management.

270
2. It will display list of branches:

3. User click “Create branch” button

4. It will display a form for the user to enter information about the branch

271
5. Enter all the information and click the “Save “button

6. It will redirect to “Branch Management” screen with successfully created message

6.3.3.12.3. Enable/disable branch manager


1 User will change between deactivate and active to change the status of the branch

272
6.3.3.13 Request Management
6.3.3.13.1. View list of requests
1. After user login successfully with role Admin. It will display then admin will click
News Management

2. It will display list of requests:

273
6.3.3.13.2 Approve request
1. After user login successfully with role Admin. It will display then admin will click
News Management

2. It will display list of requests:

3. User click “Eye” icon in a row

274
4. User will click “edit” to switch to change to editable mode

5. User click “Approve Request” button

275
6.3.3.13.3 Cancel request
1. After user login successfully with role Admin. It will display then admin will click
News Management

2. It will display list of requests:

3. User click “Eye” icon in a row

276
4. User will click “edit” to switch to change to editable mode

5. User click “Cancel Request” button

6. User enter reason cancel then click “Cancel Request”

7. It will display with successfully created message

277
6.3.4. Branch Manager guideline
6.3.4.1 Login
1. Go to Landing Page then user click “ĐĂNG NHẬP” tab on header.

2. User click “Login with internal account”

3. User enter username and password then click “Sign in” button to login

278
6.3.4.2. Log out
1. After user login successfully with role Admin . It will displayed then user click icon arrow
down

2. User click “ĐĂNG XUẤT” button to sign out

279
6.3.4.3. Forget password
1. Go to Landing Page then user click “ĐĂNG NHẬP” tab on header.

2. User click “Login with internal account”

3.User click “Forgot password” to redirect forgot password screen

280
4. User enter our username and email then click “Forgot password” button

5. User forgot password successfully

281
6.3.3.4. Change Password
1.After user login successfully with role Admin. It will display then user click icon arrow
down

2. User click “Settings” on menu

3. User enter password need to be changed then click “Update Password” button

282
4. Updated password successfully

6.3.4.5. Profile Management


6.3.4.5.1. View personal information
1.After user login successfully with role Admin. It will display then user click icon arrow
down

2. User click “Settings” on menu

283
3. It will display “Admin profile” screen

6.3.4.6. Orders Management


6.3.4.6.1 View orders of their branch
1. After user login successfully with role Admin. It will display then admin will click
Order Management.

284
2. List of Orders of their Branch will display:

6.3.4.6.2. Approve an order


1. After user login successfully with role Admin. It will display then admin will click
Order Management.

2. List of Orders of their Branch will display:

285
3. User click any on the check box at the top of each order

4. User click “Approve order” button

5. It will display the screen of approved order successfully

286
6.3.4.6.3. Completed an order
1. After user login successfully with role Admin. It will display then admin will click
Order Management.

2. List of Orders of their Branch will display:

287
3. User click any on the check box at the top of each order

4. User click “Complete order” button

5. It will display the screen of completed order successfully

288
6.3.4.6.4. Cancel an order
1. After user login successfully with role Admin. It will display then admin will click
Order Management.

2. List of Orders of their Branch will display:

289
3. User click any on the check box at the top of each order

4. User click “Cancel order” button

5. It will show form to user can fill reason cancel

6. After entering reason then user click “Submit”

290
7. It will display the screen of cancelled order successfully

6.3.4.7. Branch-self Management


6.3.4.7.1 View information of their branch
1. After user login successfully with role “BRANCH_MANAGER”. It will display information
about branch:

291
6.3.4.8. Branch product management
6.3.4.8.1. Enable/Disable product in the menu of their branch
1. After user login successfully with role "BRANCH_MANAGER”. It will display then admin will click
Good Management.

2. It will display list of goods:

3. User click any on the check box at the top of each goods

292
4. User can enable or disable goods which is selected

6.3.4.9. Branch Request Management


6.3.4.9.1. Create request
1. After user login successfully with role Admin. It will display then admin will click
Request Management.

2. List of Request will display:

293
3. User will click “Create request” button

4. It will display a form for the user can select each goods

5. After each product selection user will click “Confirm” button about there goods

6. Enter all the information and click the “Save “button to create request

294
7. It will display the screen of create request successfully

6.3.4.9.2. Edit request


1. After user login successfully with role Admin. It will display then admin will click
Request Management.

295
2. List of Request will display:

3. User will click “Eye” button in a request

4. It will display a form for the user can update last selection each goods

5. After each product selection user will click “Confirm” button about there goods

296
6. Enter all the information and click the “Save “button to create request

7. It will display the screen of updated request successfully

6.3.4.9.3. Send request


1. After user login successfully with role Admin. It will display then admin will click
Request Management.

297
2. List of Request of their Branch will display:

3. User click “Eye” in a request

5. User click “Send request” button

298
6. It will display the screen of sent request successfully

6.3.4.9.4. Cancel request


1. After user login successfully with role Admin. It will display then admin will click
Request Management.

2. List of Request of their Request will display:

299
3. User click “Eye” in a request

4. User will click “edit” to switch to change to editable mode

5. User click “Cancel request” button

300
6. It will show form to user can fill reason cancel

7. After entering reason then user click “Cancel Request”

8. It will display the screen of cancelled request successfully

301
6.3.4.9.5. View request detail
1. After user login successfully with role Admin. It will display then admin will click
Request Management.

2. List of Request of their Branch will display:

3. User click “Eye” in a request

302
4. It will display the detailed information of that request

6.3.4.9.6. Completed request


1. After user login successfully with role Admin. It will display then admin will click “Request
Management”.

2. List of Request of their Branch will display:

303
3. User click “Eye” in a request

4. User will click “edit” to switch to change to editable mode

5. User click “Completed request” button

304
6. It will display the screen of cancelled request successfully

305

You might also like