3.1.2.12 Use case <Đăng nhÁp hã tháng quÁn lý= a. Mô tÁ chi tiÁt
Tên use case: Đăng nhập há tháng quÁn lý
Mô tÁ v¿n t¿t: Use case này cho phép quÁn trịviên đăng nhập vào há tháng quÁn lý.
ã Luóng c bn:
1. Use case này case này bắt đầu khi ng°ái dùng vào giao dián đăng nhập vào há tháng quÁn lý. Há tháng yêu cầu ng°ái dùng nhập tên đăng nhập và mật khẩu.
2. Ng°ái dùng nhập thông tin yêu cầu và kích nút <Đăng nhập=. Há tháng
s¿ tìm kiÁm bÁn ghi có tên đăng nhập và mật khẩu trùng vßi thơng tin
ng°ái dùng nhập trong bÁng User. NÁu tìm thấy bÁn ghi s¿ chuyển sang
trang cÿa quÁn trị viên
Use case kÁt thúc.
43 • Luãng r¿ nhánh:
1. T¿i bất cā thái điểm nào trong q trình thực hián use case nÁu khơng
kÁt nái đ°āc vịi c só dữ liáu thì há tháng s¿ hiển thị một thông báo lỗi
và use case kÁt thỳc.
2. Ti bòc 2 trong lung c bn khi nhập thơng tin khơng chính xác. Há
tháng s¿ hiển thị thông báo lỗi và yêu cầu nhập l¿i. Ng°ái dùng có thể
nhập l¿i để tiÁp tăc thao tác.
- Các yêu c¿u đặc biãt: Ng°ái dùng cần nhập đúng các thông tin yêu cầu để
đăng nhập thành công.
- TiÃn điÃu kiãn: Khơng có.
- HÁu điÃu kiãn: Đăng nhập thành công ng°ái dùng đ°āc thực hián các chāc
nng tÂng ng vòi quyn hn ca ti khon ng nhập.
- Đißm mã rßng: Khơng có.
44
b. Bißu đã Basic Flow
Hình 29. Biểu đồ basic flow use case Đăng nhập hệ thống quản trị.
c. Bißu đã VOPC
Hình 30. Biểu đồVOPC use case Đăng nhập hệ thống quản lý.
45
3.1.2.13 Use case <QuÁn lý sÁn phẩm= a. Mô tÁ chi tiÁt
Tên use case: QuÁn lý sÁn phẩm
Mô tÁ v¿n t¿t: Use case cho phép ng°ái dùng là quÁn trị viên thêm, sửa,
xóa các sÁn phẩm hiển thị trên trang web.. • Luãng c¢ bÁn:
1. Use case này bắt đầu khi quÁn trị viên kích vào nút <SÁn phẩm= trên
menu quÁn trị. Há tháng s¿ hiển thị danh sách các sÁn phẩm (mã sÁn phẩm, tên sÁn phẩm, hình Ánh, giá tiền) từ bÁng Products lên màn hình.
2. Thêm sÁn phẩm
a. Qn trị viên kích nút <Thêm mßi= trên màn hình qn lý sÁn phẩm. Há
tháng s¿ hiển thị các thông tin cần nhập để thêm mßi nh° tên sÁn phẩm, sá l°āng, hình Ánh, mô tÁ.
b. QuÁn trị viên nhập thông tin rồi kích nút <Thêm=. Há tháng s¿ t¿o một
bÁn ghi mßi trong bÁng Product và chuyển tßi màn hình qn lý sÁn phẩm.
3. Sửa sÁn phẩm
a. QuÁn trị viên kích vào nút <Cập nhật= trên dịng cÿa sÁn phẩm muán chỉnh sửa. Há tháng hiển thị màn hình sửa vßi các thơng tin cũ cÿa sÁn phẩm (tên sÁn phẩm, sá l°āng sÁn phẩm, hình Ánh, mơ tÁ).
b. QuÁn trị viên sửa các thông tin muán sửa và kích vào nút <Cập nhật=. Há
tháng s¿ tiÁn hành cập nhật thông tin sÁn phẩm cần sửa trong bÁng Product và chuyển tßi màn hình qn lý sÁn phẩm.
4. Xóa sÁn phẩm
a. Qn trị viên kích vào nút biểu t°āng Xóa trên dịng cÿa sÁn phẩm muán xóa. Há tháng hiển thị màn hình xác nhận xóa.
b. QuÁn trịviên kích vào nút <Đồng ý=. Há tháng s¿ tiÁn hành xóa sÁn phẩm
cần xóa trong bÁng Product và chuyển tßi màn hình qn lý sÁn phẩm
Use case kÁt thúc.
• Luãng r¿ nhánh:
1. T¿i bất cā thái điểm nào trong quá trình thực hián use case nÁu không
46
kÁt nái đ°āc vịi c só dữ liáu thì há tháng s¿ hiển thị thông báo lỗi và
use case kÁt thúc.
2. T¿i b°ßc 4b nÁu ng°ái qn trịấn nút <Khơng= thì há tháng s¿ khơng
xóa sÁn phẩm đã chọn và chuyển về màn hình quÁn lý sÁn phẩm.
b. Bißu đã Basic Flow
47
Hình 31. Biểu đồ Basic Flow use case Quản Lý Sản Phẩm.
48
c. Bißu đã VOPC
Hình 32. Biểu đồ VOPC use case Quản Lý Sản Phẩm.
3.1.2.14 Use case <QuÁn lý đ¢n hàng=a. Mô tÁ chi tiÁt a. Mô tÁ chi tiÁt
Tên use case: Qn lý đ¢n hàng.
Mơ tÁ v¿n t¿t: Use case này cho phép ng°ái quÁn trị có thể xem v sa
trng thỏi Ân hng.
ã Luóng c bÁn:
1. Use case này bắt đầu khi qn trị viên kích vào nút <Đ¢n hàng= trên
menu quÁn trị. Há tháng s¿ hiển thị tất cÁ các đ¢n hàng và bộ lọc đ¢n
hàng theo 3 tr¿ng thái cÿa đ¢n hàng (đ¢n ch°a xử lý, đ¢n đã duyát, đ¢n
đã hÿy).
2. Xử lý đ¢n hàng
Há tháng s¿ hiển thịdanh sách các đ¢n hàng ch°a đ°āc dut.Qn trị
viên có thể bấm vào từng đ¢n hàng để xem chi tiÁt cÿa đ¢n hàng đó. Sau
đó qn trị viên có thể tuỳ chọn Dut đ¢n hàng hoặc Từ chái đ¢n hàng.
49
a. NÁu quÁn trị viên chọn Từ chái đ¢n hàng, há tháng s¿ đổi tr¿ng
thái đ¢n hàng thành <Đã Huỷ= và gửi thông báo cho ng°ái dùng.
b. NÁu quÁn trị viên chọn Duyát Đ¢n, há tháng s¿đổi tr¿ng thái đ¢n hàng thành <Đã Duyát=.
Use case kÁt thúc.
• Luãng r¿ nhánh:
1. Taị bất cā thái điểm nào trong quá trình thực hián use case nÁu khơng
kÁt nái đ°āc vịi c só dữ liáu thì há tháng s¿ hiển thị một thơng báo lỗi
và use case kÁt thúc
- Các yêu c¿u đặc biãt: Khơng có
- TiÃn điÃu kiãn: Ng°ái dùng đã đăng nhập vào há tháng quÁn lý.
- HÁu điÃu kiãn: Cập nhật thành công mật khẩu cÿa một bÁn ghi trong bÁng Orders.
- Đißm mã rßng: Khơng có. b. Bißu đã Basic Flow
50
Hình 33. Biểu đồ Basic Flow use case Quản lý đơn hàng.
51
c. Bißu đã VOPC
Hình 34. Biểu đồ VOPC use case Quản lý đơn hàng.
52
CH¯¡NG 4: KÀT QUÀ ắT ỵC
4.1 Giao diãn hoàn chỉnh và nhÿng điÃu đã làm đ°ÿc 4.1.1 Giao diãn hoàn chỉnh
4.1.1.1 Giao diãn trang chÿ
53
Hình 35. Giao diện màn hình trang chủ hoàn thiện.
4.1.1.2 Giao diãn đăng nhÁp và đăng ký
54
Hình 36. Giao diện màn hình đăng nhập và đăng ký hồn thiện.
4.1.1.3 Giao diãn tài khoÁn
Hình 37. Giao diện màn hình tài khoản hồn thiện.
55
4.1.1.4 Giao diãn chi tiÁt sÁn phẩm
Hình 48. Giao diện màn hình chi tiết sản phẩm.
4.1.1.5 Giao diãn danh sách sÁn phẩm
Hình 49. Giao diện danh sách sản phẩm.
56
4.1.1.6 Giao diãn giß hàng
Hình 40. Giao diện màn hình giỏ hàng.
4.1.1.7 Giao diãn đßa chỉ giao hàng
Hình 41. Giao diện màn hình địa chỉ giao hàng.
57
4.1.1.8 Giao diãn thanh tốn
Hình 42. Giao diện màn thanh tốn.
4.1.1.9 Giao diãn quÁn lý sÁn phẩm
Hình 43. Giao diện màn quản lýsản phẩm.
58
4.1.1.10 Giao diãn quÁn lý thß lo¿i
Hình 44. Giao diện màn quản lýthể loại.
4.1.1.11 Giao diãn quÁn lý đ¢n hàng
Hình 45. Giao diện màn quản lýđơn hàng.
59
4.1.1.12 Giao diãn quÁn lý ng°ái dùng
Hình 46. Giao diện màn hình quản lýngười dùng.
60
KÀT LUÀN
Nhÿng điÃu đã làm đ°ÿc
✔ Hoàn thành sÁn phẩm đúng thái h¿n và xây dựng giao dián có hāng thú vßi
ng°ái dùng
✔ Giao dián thân thián vßi ng°ái sử dăng.
✔ Áp dăng và tuân thÿ các yêu cầu về clean code và convenient trong khi
code.
✔ Āng dăng ch¿y m°āt và ít xÁy ra lỗi crash.
Nhÿng điÃu cha lm c v dònh phỏt triòn ti trong tÂng lai
Bên c¿nh những °u điểm āng dăng cũng có một vài h¿n chÁ và nh°āc
điểm:
✔ Ch°a có hình thāc cổng thanh tốn vßi các bên thā 3.
✔ Ch°a có cập nhật thơng tin tài khn ng°ái dùng.
Dự định phát triển đềtài trong t°¢ng lai:
✔ Xây dựng thêm các tính năng thanh tốn trực tuyÁn.
✔ Xây dựng giao dián bắt mắt hÂn vòi cỏc ch phự hp hÂn vòi nhiều
ng°ái dùng.
61
TÀI LIâU THAM KHÀO
1. Trang chÿ JavaScript (1998-2022): https: //developer.mozilla.org/en-US/ 2. Trang chÿ tài liáu Java Javatpoint (2011-2021): Tutorials List - Javatpoint 3. Trang chÿ tài liáu VueJS (2014-2022): https: //vuejs.org/
4. Trang chÿ tài liáu liên quan (2022): https: //viblo.asia/