Biểu đồ VOPC usecase Xem lịch sử mua hàng

Một phần của tài liệu Xây dāng website bán giày trāc tuyàn bàng vuejs và spring boot (Trang 44)

3.1.2.10 Use case <Huđ¢n hàng=a. Mơ tÁ chi tiÁt a. Mơ tÁ chi tiÁt

Tên use case: Huỷđ¢n hàng

Mơ tÁ v¿n t¿t: Use case này cho phép khách hàng huỷ mt Ân hng khi

Ân hng cha c duyỏt.

ã Luãng c¢ bÁn:

1. Use case này bắt đầu khi khách hàng vào nút <Huỷ đ¢n= trên mỗi đ¢n

hàng ã tr¿ng thái chá duyát ã phần lịch sử đặt hàng. Há tháng s¿

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

kt 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

- Các yêu c¿u đặc biãt: Khơng có.

- TiÃn điÃu kiãn: Khách hàng đã đăng nhập vào há tháng.

39 - HÁu điÃu kiãn: Khơng có.

- Đißm mã rßng: Khơng có. b. Bißu đã Basic Flow

Hình 25. Biểu đồ Basic Flow usecase Huđơn hàng.

40

c. Bißu đã VOPC

Hình 26. Biểu đồ VOPC use case Huđơn hàng.

3.1.2.11 Use case <Đặt hàng= a. Mô tÁ chi tiÁt

Tên use case: Đặt hàng.

Mô tÁ v¿n t¿t: Use case cho phép ng°ái dùng có thể thực hián đặt mua

những sÁn phẩm đã thêm vào trong giòhng tròc ú.

ã Luóng c bn:

1. Use case này bắt đầu khi khách hàng click vào nút Thanh Tốn ã giao dián Giß Hàng.Há tháng s¿ hiển thị giao dián để khách hàng nhập thông tin bao gồm nh°: họ tên, sáđián tho¿i, địa chỉ, email, ghi chú.

2. Khách hàng điền đầy đÿ thơng tin vào chọn ph°¢ng thāc thanh tốn. Khách hàng click nút Xác nhận đ¢n hàng, há tháng s¿ t¿o bÁn ghi trong bÁng Orders gồm: thông tin khách hàng, tổng giá trị đ¢n hàng và bÁn

ghi trong bÁng OrdersDetail gồm các thông tin: tên sÁn phẩm, giá sÁn phẩm, sál°āng, thành tiền.Há tháng thông báo đặt mua hàng thành cơng

Use case kÁt thúc.

41 • 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ị 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: Khách hàng đã đăng nhập vào há tháng.

- HÁu điÃu kiãn: Khơng có.

- Đißm mã rßng: Khơng có. b. Bißu đã Basic Flow

Hình 27. Biểu đồ Basic Flow use case Đặt hàng

42

c. Bißu đã VOPC

Hình 28. Biểu đồVOPC use case Đặt hàng.

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 thng qun tr.

c. Bißu đã VOPC

Hình 30. Biểu đồVOPC use case Đăng nhập h thng qun lý.

45

3.1.2.13 Use case <QuÁn lý sÁn phm= 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 Qun Lý Sn Phm.

48

c. Bißu đã VOPC

Hình 32. Biểu đồ VOPC use case Qun Lý Sn Phm.

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 chnh và nhÿng điÃu đã làm đ°ÿc 4.1.1 Giao diãn hoàn chnh

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 phm

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 phm

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 phm

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/

Một phần của tài liệu Xây dāng website bán giày trāc tuyàn bàng vuejs và spring boot (Trang 44)

Tải bản đầy đủ (PDF)

(67 trang)