Phân tích thiết kế và xây dựng hệ thống website bán mỹ phẩm springboot và angular

Màn hình “ĐĂNG KÝ TÀI KHOẢN THÀNH CÔNG” chứa mật khâu đăng nhập của tài khoản vừa đăng ký trước Tiên điêu kiện Khách hàng đang ở giao diện trang chủ Hậu điêu kiện Hệ thống hiển thị danh

Trang 1

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIÊN THONG

KHOA CÔNG NGHỆ THÔNG TIN 1

Hà Nội, tháng 12/2023

Trang 2

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA CÔNG NGHỆ THONG TIN 1

Trang 4

NHAN XÉT, DANH GIA, CHO DIEM

(Của giảng viên hướng dẫn)

Đồng ý/ Không đồng ý cho sinh viên bảo vệ trước hội đồng chấm tốt nghiệp

Hà Nội, ngày tháng 01 năm 2024

CÁN BỘ - GIẢNG VIÊN HƯỚNG DẪN

Trang 5

NHAN XÉT, DANH GIA, CHO DIEM

(Của giảng viên phản biện)

Đồng ý/ Không đồng ý cho sinh viên bảo vệ trước hội đồng chấm tốt nghiệp

Hà Nội, ngày tháng 01 năm 2024

CAN BỘ - GIANG VIÊN PHAN BIEN

Trang 6

Đồ án tốt nghiệp Đại học Lời cảm ơn

LỜI CÁM ƠN

Trước tiên, em xin gửi lời cảm ơn và biết ơn sâu sắc đến thầy ThS Nguyễn

Hoang Anh — khoa công nghệ thông tin 1 — Học viện Công nghệ Bưu chính Viễn

thông — người đã tận tình hướng dẫn, chỉ bảo, giúp đỡ em trong suốt thời gian em làm

đồ án tốt nghiệp và cũng là người đưa ra những ý tưởng, kiểm tra sự phù hợp của đồ

án.

Em cũng xin gửi lời cảm ơn đến toàn thê các thầy cô của Học viện Công nghệBưu chính Viễn thông đã giảng dạy, và tạo điều kiện cho em trong quá trình học tập vànghiên cứu tại học viện Những kiến thức mà chúng em nhận được sẽ là hành tranggiúp chúng em vững bước trong tương lai.

Mặc dù em đã cô gang hoàn thành va áp dụng các công nghệ mới vào đồ ántrong phạm vi và khả năng có thê, tuy nhiên sẽ không tránh khỏi những thiếu sót Emrất mong nhận được sự cảm thông và tận tình chỉ bảo của quý thầy cô và toàn thể các

bạn.

Cuối cùng em xin kính chúc quý thầy cô, gia đình, và bạn bè đồi dào sức khỏe,

thành công trong sự nghiệp.

Em xin chân thành cảm on!

Hà Nội, Tháng 12 năm 2023

Sinh viên thực hiện

Nguyễn Như Quỳnh

Nguyễn Như Quynh — BI9DCCN545 6

Trang 7

DANH MỤC CAC TỪ VA THUẬT NGU VIET TAT u.cceccsscsssessessesssessesstssssseesesseeees i

LOI MO DAU eccsssessessessssssessesssssssssessusssessussussssssessussstssssussisssessussuessessssusssessessuesseesees |CHƯƠNG 1: ĐẶT VẤN Đ +: 2221 221121121121122112112112112112112111101121 11 xe 2

1.1 Giới thiệu đề tài -¿- 5-52 21 2x2 122127121121121121211211112112112111121 1e 2

1.2 M6 ta bai OAD :-ŸAIJIIÁ 31.3 Giải quyết bài toate eecccceccesesscssescsscssesessesesscsscsesecsssessestsseseesessesesseesseeeeees 4

1.4 Các công nghệ và công cụ SU dỤng - - c 13 1333311311111 111 xxz 5

I Angular 5

IE Z0) 6 1.4.3 MySQL 5:5: 22 2122121221221221211211211211011211211211211112111121 2121k 6

1.5 Tong 2‹ 100.2 011887 7CHƯƠNG 2: PHAN TÍCH VÀ THIET KE HỆ THÓNG - 2-2-2 s+2x+5z+x+2 9

2.1 Phân tích hệ thống - +: 2 2+SE+SE+EE2EE2EE2EEEEEE2EEE17171212121111121 11111 2 9

2.1.1 Xác định tác nhân và chức năng - + 2 32+ 3+2 EsEsirkerrerrerrexre 9

2.1.2 Biểu đồ UseCase tổng quát ¿- 25252222122 EEEEEEEEEEEekrei II2.1.3.Kịch bản các chức năng chính của hệ thống 2-52 2+sszcz2 S2 13

2.1.3.1.Kich bản các chức năng của khách hàng - - 5+ +++++<sss++2 13 2.1.3.2.Kịch bản chức năng của quan tri VIÊn - - 52c 2+2 ‡++csssseserres 272.2.Thiết kế hệ thống, 2 S152 19EE2EEE19E12152121121112111111111111 1111111111 11x yeg 46

2.2.1.Biểu d6 lớp 5-52 SE 1EE121211211212112111211211111 11211111101 10101110 ru 462.2.2.Xây dựng biểu đồ tuần tự - 5 c St ST E2121121211211110112121121111 E11 re 492.2.3.Thiết kế cơ sở đữ liệu - ¿52 2+2222E2EE2E12E2121212171217121112121 21 crx6 582.3.Tông kết chương :- ¿2+ s22 221EEE921121122121121122127112112112211211211 21121 e6 75CHƯƠNG 3: TRIEN KHAI HỆ THNG - 2-22 2+S+SE+E+E£EE2E£EEZEEEEEzEererkrei 71

Nguyễn Như Quynh — BI9DCCN545 7

Trang 8

3.1 Yêu cau hệ thông ¿+ s+ềSỀEE9 12 1211211211217111111111111 2111121111 cy 0 773.2 Cài đặt hệ thống -¿- ¿5252 1 1E71211211112112112112112112111111 11111 Eexe 71

3.3 Giao diện W€bSIf 1 Q1 112311 HS 11g 1n KĐT 803.4 KẾt chương ¿-:- c s St 1 E1212211112121121111111111211111111 111 10111010 ce ra 82KET LUẬN ¿5-5-2121 2EE21921221221211211211211211 1111111111111 1121211 e 83

TÀI LIEU THAM KHẢO 2-22 ©52+S2+EE2EEE2EE2E122112212712711211271711211211 1121 re 85

Nguyễn Nhu Quỳnh — B19DCCN545 8

Trang 9

Đồ án tốt nghiệp Đại học Danh mục bảng

DANH MỤC BANG

Bang 2.1 Bảng mô tả tác nhân hệ thống 2 2k SE+E‡EE‡EEEEEEE2EEEEEEEEEEEEEEErkrkerred 9

Bảng 2.2 Bang mô tả CAC USE CAS€ - G1 ng như 11 Bang 2.3 Kịch ban khách hàng đăng ky tài khoản - - Si seeiree 13

Bảng 2.4 Kịch bản khách hàng tìm kiếm sản phẩm 2: 2-5255 522S22xv>+2Sz+: 14Bảng 2.5 Kịch bản khách hàng xem chỉ tiết sản phẩm - 2 2 22s 5z252+2 15Bảng 2.6 Kịch bản khách hàng thêm sản phẩm vào giỏ hàng - 255252552 16Bảng 2.7 Kịch bản khách hàng chỉnh sửa số lượng sản phâm 2-2 5¿ 17Bảng 2.8 Kịch bản khách hàng xóa sản phẩm khỏi giỏ hàng 2-5-5255 552 19Bang 2.9 Kịch bản khách hàng thêm sản phẩm yêu thích - 2-5-5 5z 2522522 20Bang 2.10 Kịch bản khách hàng xóa sản phẩm khỏi danh sách yêu thích 21Bảng 2.11 Kịch ban khách hang dat hàng - c2 2c 23211122131 1115215 Exk2 22 Bảng 2.12 Kịch bản khách hàng thanh toán - - ¿2 22 2+ 231222 EEEvxseeeses 24

Bảng 2.13 Kịch bản khách hang theo dõi đơn hàng c5 525 ++++ssssvesss 25

Bảng 2.14 Kịch bản khách hàng đánh giá sản phẩm 2-5252 522S+£zEzEe£zze2 26

Bang 2.15 Kịch bản khách hàng thêm danh mục 5 + + ++keEsseeeeseeees 28 Bảng 2.16 Kịch bản khách hàng chỉnh sửa danh mục ¿5 5s +++sxccss 29 Bảng 2.17 Kịch bản khách hàng xóa danh mục ¿+23 + vessreerrerresee 29 Bảng 2.18 Kịch bản khách hàng thêm thương hiệu - - 2-5232 *+< +2 30 Bảng 2.19 Kịch bản khách hàng chỉnh sửa thương hiệu - 55555555 ‡<s+++<s+ 31 Bang 2.20 Kịch ban khách hàng xóa thương hi@U ececceeceeeteeeseeeseeeeteeesteeeeeenes 32

Bảng 2.21 Kịch bản khách hàng thêm loại đa - - c5 322 * + +sseexssseesrs 33 Bảng 2.22 Kịch bản khách hàng chỉnh sửa loại da - 5-5 325 ‡++++ssx+sseess2 34 Bảng 2.23 Kịch bản khách hàng xóa loại đa - . c2 3 2112211 11251115515Ex£2 35Bang 2.24 Kịch bản khách hàng thêm sản phẩm ¿2-2 S52 2+E2E£2E££Ez£zEzx+2 36Bang 2.25 Kịch bản khách hàng chỉnh sửa sản phẩm 5: + 2 2252E+Ez£z£zcx+2 36Bảng 2.26 Kịch bản khách hàng xóa sản phẩm -2- 2: 5¿©5222++2xvzxvz+zz+zxee 37

Bang 2.27 Kịch bản khách hàng thêm người dùng s5 55x s+kseesserseees 38 Bang 2.28 Kịch bản khách hàng chỉnh sửa người dùng - -.- se ssseees 39 Bảng 2.29 Kịch bản khách hàng xóa người dùng - - 55 +2 *++ksssvrsserersexre 40 Bảng 2.30 Kịch bản khách hàng cập nhật đơn hàng 5-5 S2 ++ssssseresesss 41

Nguyễn Nhu Quỳnh — B19DCCN545 iv

Trang 10

Đồ án tốt nghiệp Đại học Danh mục bảng

Kịch ban khách hang xĩa don hang ecceeseeseeseeeteeseseeeesseeeessaeees 42

Kịch bản khách hàng thêm mã giảm giá c5 33+ ++ssserxss 43

Kịch bản khách hàng chỉnh sửa mã giảm giá . 55 55532 ++++s*++2 44 Kịch bản khách hàng xĩa mã giảm giá 5 2 33+ +sssevrxes 44Kịch bản khách hàng xem báo cáo thống kê - ¿2 2 52+s+x+£z£zcxz 45Bang mơ tả hệ thống (52 S2 SE SE EEEE2EEE121121E11211111 111111111110 60

Bang m6 ta N0 61 Bảng mơ ta DTOVITC€S - G2 ng HH nếp 62 Bảng mơ tả đISẨTICfS - 5 1 SH nh TH HH nệt 62

Bang m6 ta 463 1117 ố.a a 62

1500001111 A 63

5T) s0 0ár:80i93) 101101 Ẽ 64 s00 0ár8(0 1 -1 65

Bảng mơ ta product ISCOUII 2 S22 2311321113 EEESEEEkrerreerree 71 Bang mơ ta product IT1ÀG - (22 2211121133511 11111 11111 re 72 Bảng mơ ta prodUCf_ If€I - 2 2213321112111 111111 Eerrk 72 Bảng mơ tả product item diSCOUII - 5 22-5 33+ *++*evevssseerres 72 Bảng mơ ta product skin fype S13 v3 xxx re 73 Bảng mơ tả user_adr€§Ss - (2 3221212111211 118851 1111111118111 73

Bảng mơ ta uS€T _đISCOUTI - SG 0322211833911 113911119 11119 11 13111 re 73

Bảng mơ tả value defallL - c1 2211221112111 111811111 8111182111 xe 74

Bảng mơ td T€VICW - QQnnS TH S S111 TT KH re 75

Trang 11

Đồ án tốt nghiệp Đại học Danh mục hình

DANH MỤC HÌNH

Hình 2.1 Biểu đồ use case tổng quát -¿- ¿+52 SSE+E£EE£EE2EEEEEEEEEEEEEEEEEEEEEEEEEree 11Hình 2.2 Biểu đồ use case đăng ký tài KhOaN ceceeccccecsscessessesssessesstssessesstesteseeseeees 13Hình 2.3 Biểu đồ use case xem sản phẩm 2-2: 2 2 x+2E++E+2EvEE+EEzErzxrrrzxeei 14Hình 2.4 Biểu đồ use case quản lý giỏ hàng 2: 52 222x+2E2E2EEtExzxzrxerxeei 16Hình 2.5 Biểu đồ use case quản lý sản phẩm yêu thích 2- 2 s+zs+£szzzxze+ 20

Hình 2.6 Biểu đồ use case đặt hàng ¿52 22s E2 2121712111211 1111 ye 22Hình 2.7 Biểu đồ use case theo đối đơn hàng 2- 2 22s SE+EeE2E£EEEzEerxrxrrs 25Hình 2.8 Biểu đồ use case đánh giá sản phẩm - ¿2 2+2 SE2EeE2EzEeEEzEerrxres 26Hình 2.9 Biểu đồ use case quan lý danh mục - 2 2 2+ E+E£+E£EE£EEEEEeEEzEerxrxrrs 28

Hình 2.10 Biéu đồ use case quan lý thương hiệu - 2-5-5 +5 SS2222E2EzEc£zrzcxez 30Hình 2.11 Biểu đồ use case quản lý loại đa -¿- 2 5+ SE£E2E£EE2EEEeExzEerxrrrree 33Hình 2.12 Biéu đồ use case quản lý sản phẩm 2-2 E2 E‡E‡EEEE£E2E£EeEeErxrveg 35Hình 2.13 Biéu đồ use case quan lý người dùng -¿- 2 5x EeE‡E2x2E2EeEcrrxreeg 38Hình 2.14 Biéu đồ use case quản lý đơn hàng - 2-2: 5¿25++2x+2x2Ezzxerxzresrves 41Hình 2.15 Biểu đồ use case quản lý mã giảm giá ¿- 2 + x2x2z+zzxzzrzxee 43

Hình 2.16 Biéu đồ use case xem báo cáo thống kê - 2 25 ++2+2Eczxvzzzxze 45

Hình 2.17 Biéu đồ trích lớp thực thẻ - - 2 s+SE+SE+SE+EE£EE2EE2EE2EEEEEEEerEerrkrrersred 48Hình 2.18 Biéu đồ lớp pha thiẾt kế - ¿+ +sSE‡EE9EE£EE2EEEEEEEEEEEEEEEEEEEEEErrerrred 49Hình 2.19 Biéu đồ tuần tự chức năng xem chi tiết sản phẩm - 252 552 49Hình 2.20 Biểu đồ tuần tự chức năng thêm sản phẩm vào giỏ hàng 50

Hình 2.21 Biểu đồ tuần tự chức năng thêm sản phẩm yêu thích - -5¿ 50

Hình 2.22 Biểu đồ tuần tự chức năng đặt hàng 2- 2t Scc2x2E2EEerrrkrveg 51Hình 2.23 Biéu đồ tuần tự chức năng theo dõi đơn hàng - ¿5-5 secz+zzs25+2 51Hình 2.24 Biéu đồ tuần tự chức năng đánh giá sản phẩm 5- 5s 225522 52Hình 2.25 Biéu đồ tuần tự chức năng thêm danh mục << + s+++++ssx 52Hình 2.26 Biéu đồ tuần tự chức năng thêm loại đa - 55225 **+++svkrssseeerres 53Hình 2.27 Biéu đồ tuần tự chức năng thêm thương hiệu :- 2 2555252: 53Hình 2.28 Biéu đồ tuần tự chức năng thêm sản pham c.cccccceccecesseeseseesteeeseeeeees 54Hình 2.29 Biểu đồ tuần tự chức năng xóa sản phẩm -2- 2-52 S2+E+£zxzxerxzed 55Hình 2.30 Biéu đồ tuần tự chức năng cập nhật sản phẩm -2- 2-2 2252+5z+52 57

Trang 12

Đồ án tốt nghiệp Đại học Danh mục hình

Hình 2.31 Biéu đồ tuần tự chức năng cập nhật trang thái đơn hàng 57Hình 2.32 Biểu đồ tuần tự chức năng xem báo cáo thống kê 2- - 2 525552 58

Hình 2.33 Biểu đỗ thiết kế cơ sở dữ liệu -¿ c5ccccccrtrtrrrrtrirrrrrrrirrrrrree 59

Hình 3.1 Giao diện trang chủ -. c c2 1132311321111 1 1911181118 11 011118811111 ng re 80 Hình 3.2 Giao diện đăng nhập - - (0 2211221112111 2911181111211 181 1181110111011 81c, 80

Hình 3.3 Giao diện đăng ký tài khoản 2c 2221133211113 115111 11111 re 81

Hình 3.4 Giao điện chi tiết sản phẩm 2-5252 2S 2E EEEEEEEEEEEE2122121717121 2e xe 81

Hình 3.5 Giao diện gid hằng - óc 1n TH HH nu nh 81

Hình 3.6 Giao điện sản pham yêu thich c.ccccccccccscssessessesssessessessesseseseesesssseeseeeees 82Hình 3.7 Giao điện quản lý sản phẩm ¿+ S992 9EEEEEEEE2EE2EEEEEEEEEEEEEErrrei 82

Trang 13

Đồ án tốt nghiệp Đại học Danh mục các từ và thuật ngữ viết tắt

DANH MỤC CÁC TỪ VÀ THUẬT NGỮ VIET TAT

STT | Từ viết tắt Từ đầy đủ Ý nghĩa

1 OS Operating System Hệ điều hành

5 UI User Interface Giao diện người dùng

Hypertext Markup Ngôn ngữ đánh dấu siêu văn

6 HTML ,

Language ban

7 DOM Document Object Model Mô hình các đối tượng tài liệu

Ký hiệu đối tượng của

8 JSON JavaScript Object Notation ;

JavaScript

Ky hiệu déi tượng của

9, BSON Binary JSON ;

JavaScript dang nhi phan

Trang 14

Đồ án tốt nghiệp Đại học Lời mở đầu

LỜI MỞ ĐẦU

Cùng với sự phát triển nhanh chóng, không ngừng của ngành công nghệ thôngtin, con người đã sáng tạo ra rất nhiều ứng dụng để phục vụ cho nhu cầu trong cuộcsống Với việc internet phát triển mạnh giúp con người có thé kết nối với nhau một

cách dễ dàng, do đó sự phát triển của thương mại điện tử, việc mua bán trực tuyến trở

nên thuận tiện và nhanh chóng, điều đó đã làm thay đôi đáng kê về hoạt động trao đôi,

mua bán, kinh doanh của con người.

Cùng với sự phát triển đó các doanh nghiệp cũng đã và đang ứng dụng côngnghệ đề có thê hội nhập cùng với xu hướng sản xuất và kinh doanh cùng với thươngmại điện tử để có thể tận dụng hết khả năng quảng bá sản phẩm rộng rãi qua internetcũng như giảm chỉ phí đầu tư so với thương mại truyền thống Người tiêu dùng cũngkhông phải đến tận nơi dé mua sản phẩm mà chi cần ở tại chỗ cũng thé mua sắm mộtcách thoải mái và tiện lợi.

Đề có thé đáp ứng nhu cầu của doanh nghiệp dé quảng bá sản pham và nhu cầumua sắm mỹ phẩm làm đẹp, đa dạng sản phẩm theo xu hướng của giới trẻ, em đã lựachọn đề tài “Phân tích thiết kế và xây dựng hệ thống website bán mỹ phẩm dùngSpringboot và Angular” dé khách hàng có thé lựa chọn, mua sắm, cập nhật tin tức về

các dòng mỹ phẩm phù hợp với nhu cầu của bản thân một cách nhanh chóng và tiện

lợi thông qua Internet.

Nội dung đề tài gồm các chương sau:

Chương 1 - Đặt van đề: Giới thiệu tong quan về đề tài, các công nghệ lựa chọn

và phương án giải quyết

Chương 2 - Phân tích và thiết kế hệ thống: Phân tích và thiết kế hệ thốngtheo quy trình phát triển phần mềm

Chương 3 - Triển khai: Các bước cài đặt và triển khai hệ thống lên môi trường

sản phâm.

Nguyễn Như Quỳnh — BI9DCCN545 1

Trang 15

Đồ án tốt nghiệp Đại học Chương 1: Đặt van dé

CHUONG 1: DAT VAN DE

1.1 Giới thiệu đề tai

Trong thời buổi phát triển mạnh mẽ về Internet đi cùng với việc sự phát triển

của thương mại điện tử Do đó việc tiếp thị sản phẩm và tiếp cận khách hàng là điều tất

cả các doanh nghiệp đều mong muốn, cho nên hầu hết các doanh nghiệp đã phát triển

hệ thống bán hang theo loại hình thương mại điện tử

So với kinh doanh truyền thống thì thương mại điện tử nó có chi phí thấp hơn

và khả năng tiếp cận và phố biến tới người dùng hiệu quả cao hơn Hơn nữa, với lợithế của công nghệ Internet hiện nay, thì việc truyền tải về thông tin sản phẩm thuận

tiện hơn rất nhiều, kết hợp với tính năng thanh toán, hỗ trợ người dùng trực tuyến, và

giao hàng tận nơi thì điều này tạo cho người dùng trải nghiệm mua sắm một cách

nhanh chóng và tiện lợi.

Đối với các thương hiệu mỹ phẩm, việc trién khai thương mại điện tử sẽ giúpcho các thương hiệu mỹ phâm có thêm một kênh bán hàng tiềm năng, tạo dòng thusong song với hoạt động kinh doanh offline ở các showroom Ngoài yếu tố dia lý,

thương mại điện tử còn phá vỡ các giới hạn về không gian, thời gian giúp khách hàngmua sắm mọi lúc, mọi nơi Sau đại dịch Covid-19 và lệnh giãn cách xã hội, hành vingười tiêu dùng đã có sự thay đối lớn, chuyển dich từ mua sắm offline sang onlinetăng dan theo thời gian ở mọi ngành hang Đặc biệt, riêng lĩnh vực ngành mỹ phẩm, ty

lệ người mua sắm online đã tăng 6-7 lần trong năm 2020 — 2021 Chính vì vậy, việccác doanh nghiệp mỹ phẩm triển khai thương mại điện tử là vô cùng cần thiết dé thíchứng nhanh với sự thay đôi của người tiêu dùng và thị trường

Với nhu cầu làm đẹp ngày càng phát triển của con người hiện nay, theo thờigian sẽ dan dần hình thành các xu thé trang điểm, làm đẹp mới Vì vậy mà các thươnghiệu, cửa hàng mỹ pham ra đời dé phục vụ nhu cau này Tuy nhiên, một vài van dé củacửa hàng mỹ phẩm nào cũng sẽ có:

- Khách phải tốn thời gian đến cửa hang dé xem sản phẩm và mua nó

- Không thu hút được nhiều khách hàng nếu không sử dụng các phương tiện

truyền thông như mạng xã hội, website thương mại điện tử

- Tốn chi phí nhân lực dé hỗ trợ, tư vấn cho khách hang, chi phí cho mặt bằng,

thiết bị phục vụ bán hàng, chi phí quảng cáo

Trang 16

Do đó, việc bán hang đòi hỏi cần phải có tư duy, đầu óc kinh doanh và khanăng năm bắt thị trường Yêu cầu được đặt ra là một cửa hàng có thương hiệu mỹphẩm riêng, làm sao dé không cần tốn nhiều chi phí, nhân lực để có thé tiếp thị tớiđược nhiều khách hàng cũng như là chi phí cho việc đầu tư vào mặt bằng, thiết bị phục

vụ bán hàng, giúp khách hàng không cần phải trực tiếp đến mua hàng mà chỉ cần ở nhà

cũng có thể lựa chọn mà mua sắm

Cũng chính từ lý do trên, theo xu thế của thương mại điện tử, với nhận định nhucầu làm đẹp rất cần thiết của con người trong cuộc sống hiện nay, nhu cầu mua sắmsản phẩm trực tuyến của khách hàng cũng như là nhu cầu kinh doanh của chủ cửa hang

và cùng với những kiến thức đã được học, em xin thực hiện đề tài đồ án “Phân tíchthiết kế và xây dựng hệ thống website bán mỹ phẩm dùng Springboot và

Angular” với thương hiệu thời trang tên là “GG cosmetic”.

1.2 Mô tả bài toán

Bài toán “Phân tích thiết kế và xây dựng hệ thống website bán mỹ phẩm dùng

Springboot và Angular” sẽ có 2 đối tượng sử dụng chính, bao gồm khách hàng và

người quản tri.

e Khách hàng:

Khách hàng có thể vào website để xem các sản phẩm, tìm kiếm sản phẩm và lọc sảnphẩm theo ý muốn Khách hang có thé cho sản phẩm vào giỏ hàng, thêm sản phẩm yêu

thích, xem giỏ hàng, xem danh sách sản phẩm yêu thích, khi đặt hàng có thé lựa chọn

các hình thức thanh toán khác nhau, theo dõi đơn hàng.

Trang 17

1.3 Giải quyết bài toán

Phân tích thiết kế và xây dựng hệ thống website bán mỹ phẩm dùng Springboot

và Angular gôm 2 phân:

Thứ nhất: Dành cho khách hàng: là những người có nhu cầu mua sắm, họ tìmkiếm các mặt hàng cần thiết từ hệ thống và đặt mua Vì thế phải có các chức năng sau:

- Đăng nhập, đăng ký tài khoản, đăng xuất

- Hién thị danh sách sản phẩm đang được bày bán, có các tính năng tìm

kiếm, lọc, sắp xếp, phân loại sản phẩm

- Hién thị chỉ tiết sản phẩm, bao gồm ảnh, số lượng mặt hàng còn lại trong

kho, số lượng đã bán, số lượt đánh giá

- Xem giỏ hàng, đặt hàng và thanh toán trực tuyến

- Hién thị danh sách các khuyến mãi trên trang web

- Thay đổi thông tin cá nhân

Thứ hai: Danh cho người quản trị: Người làm chủ website có quyền kiểm soátmọi hoạt động của hệ thống Người này được cấp username và password dé đăngnhập hệ thống để thực hiện những chức năng sau:

- Đăng nhập quản trị.

- Quản lý chung về sản phẩm, bao gồm quản lý danh mục, kích cỡ, màusắc, sản phẩm

- Quản lý người dùng hệ thống

- Tiếp nhận, xử lý đơn đặt hàng của khách

- Thống kê doanh thu, số lượng đơn hàng, theo ngày, tuần, tháng

Ngoài các chức năng trên thì trang Web phải được thiết kế sao cho dễ hiểu,

dễ sử dụng, giao diện đẹp mắt và làm cho khách hàng thấy được thông tin cần tìm,cung cấp các thông tin khuyến mãi hấp dẫn đề thu hút khách hàng Bên cạnh đó cầnphải có những yêu cầu khác như tốc độ xử lý phải nhanh và có độ tin cậy cao, tương

thích với các nên tảng bên ngoai và dé mở rộng hệ thông.

Trang 18

1.4 Các công nghệ và công cụ sử dung

Hiện nay, có rất nhiều công nghệ để xây dựng web Phổ biến và thông dụngnhư là:

Frontend: HTML, CSS, Javascript Framework và thư viện Frontend: ReactJS, Angular, VueJS

Backend va API: NodeJS, ExpressJS, Django, Spring Boot

Database: MongoDB, MySQL, PostgreSQL

Với dự án xây dựng website “Ban mỹ phẩm” em sử dung các công nghệ:

e Frontend: Html, css, javascript.

e Framework Frontend: Angular.

e Backend: Ngôn ngữ lập trình Java, Framework

Angular là một framework JS open-source, dựa trên Typescript, giúp dễ dàng

xây dựng các ứng dụng web Angular giúp web developer giải quyết các khó khăn khi

phát triển ứng dụng bằng cách kết hợp các template khai báo, dependency injection,

đầy đủ công cụ và hơn thế nữa

Angular là “người kế thừa” hiện đại của framework JavaScript AngularJS vô

cùng phô biến và nhiều tinh năng Dựa trên những triết lý tương tự như người tiền

nhiệm của nó, Angular tập trung nhiều hơn vào kiến trúc dựa trên components để thúcđây kha năng tái sử dụng (re-usability) Một số tính năng thiết kế khiến AngularJS trởnên phô biến trong giới lập trình vẫn được xuất hiện ở Angular, chăng hạn như liên kết

dữ liệu hai chiều (two-way data binding) Framework này cũng mang đến nhiều tíchhợp của bên thứ ba dé cung cấp chức năng Reactive cùng với các tính năng và bé sungkhác dé thực hiện các dự án phát triên lớn

Trang 19

Là một kiên trúc đôi tượng hướng (OOP) với sự sử dung các components dé

xây dựng giao diện người dùng Nó cũng sử dụng các đối tượng dé quản lý dit liệu vàlogics và có một số công nghệ như dependency injection và các modules dé giúp cho

việc quan ly và tổ chức code trở nên dé dàng hơn

Là một framework front-end hoàn chỉnh, bao gồm các tính năng như biên dịch,định tuyến, binding dữ liệu, v.v Angular sử dụng cấu trúc component và cung cấp một

số tính năng mở rộng như các directive, pipes, v.v, cũng cấp tất cả các công cụ và tínhnăng cần thiết để xây dựng một ứng dụng phía client hoàn chỉnh Hệ sinh thái củaAngular tập trung vào việc quản lý tổng thê các component trong một ứng dụng

1.4.2 SpringBoot

Giới thiệu

Spring Boot là một phần mở rộng của Spring, giúp cho việc phát triển, testing

và triển khai thuận tiện hơn Spring Boot là một framework dựa trên Java, dùng để xâydựng các ứng dụng phía máy chủ, nhằm mục đích đơn giản hóa hoạt động của cácmicroservices Nhóm phát triển framework này đã tuyên bố rằng Spring Boot có thể

được sử dụng cho các ứng dụng WAR truyền thống cũng như các ứng dụng Java độc

lập.

Framework này ra đời đề việc lập trình không cần tốn nhiều thời gian đề thiết

lập và cau hình môi trường Spring Boot có thé mang đến các câu hình XML linh hoạt,

quy trình xử lý hàng loạt, giao dịch cơ sở dữ liệu, quy trình làm việc đơn giản và các

công cụ phát triển Spring Boot hoạt động băng cách cung cấp code mặc định, giúp

khởi chạy các dự án Spring mới trong thời gian thực.

Một trong số các lợi ích nổi bật của Spring là có thé dé dàng xây dựng và kiểm

tra các ứng dụng Java, với các cài đặt mặc định để kiểm thử đơn vị (unit testing) vàkiểm thử tích hop (integration testing) Framework này cũng giúp cấu hình cáccomponents cho ứng dụng dựa trên Spring, giảm thời gian phát triển và tăng hiệu quacủa quá trình phát trién

1.4.3 MySQL

Giới thiệu

Trang 20

MySQL chính là một hệ thong mã nguồn mở quản lý co sở dữ liệu Cũng như

tất cả các cơ sở đữ liệu quan hệ khác, MySQL cũng sẽ lưu trữ đữ liệu ở bên trong các

bảng được tạo thành từ các cột và các hàng của nó.

SQL là một tập hợp các dữ liệu có cấu trúc Đó có thé là tất cả mọi thứ từ danhsách mua sắm đơn giản đến nơi chứa lượng thông tin không lồ trong mạng công ty haythư viện ảnh của bạn Bên cạnh đó, nó là một phần vô cùng quan trọng trong nhiềuphần mềm phổ biến nhất để xây dựng và duy trì mọi thứ, từ các ứng dụng web dànhcho khách hàng đến các dịch vụ B2B mạnh mẽ, dựa trên dir liệu

Với bản chất là nguồn mở, bộ tính năng phong phú của nó, kết hợp cùng với sựphát triển vượt bậc ngày càng tăng và hỗ trợ liên tục từ Oracle, có nghĩa là các tô chứcquan trọng trên internet như Facebook, Flickr, Twitter, Wikipedia và YouTube đều sử

dụng các phần phụ trợ của MySQL

Lý do sử dụng

Hầu như tất cả các nhà phát triển web ưa chuộng Mysql bởi một cơ sở dữ liệuđơn giản của nó, dễ học, thiết lập và bảo trì hơn khi chúng ta so sánh MongoDB vàMysql Bạn không bắt buộc phải chi nhiều tiền để thuê DBA hoặc dao tạo nhân viên

hiện có.

Hơn nữa, nó rất dé sử dụng và các tinh năng năng suất như trình kích hoạt vàthủ tục được lưu trữ, Quản tri viên MySQL, Ban làm việc của MySQL, công cu GUI

và một số tiện ích khác giúp dé dàng định cấu hình và quản trị

MySQL cần đảm bảo hiệu suất chưa từng có với tốc độ tối ưu dé duy trì sựcạnh tranh khốc liệt của các công nghệ cơ sở dữ liệu Với các tính năng như phan bố

bộ nhớ dựa trên luồng, tham gia vòng lặp lồng nhau được tối ưu hóa, MySQL có khảnăng hoạt động xuất sắc Nó cũng có các khung công cụ lưu trữ đảm bảo hiệu suất

hoàn hảo.

1.5 Tổng kết chương

Chương | đã nêu ra sự tiện lợi va van dé còn tồn đọng của thương mại điện tử nóichung và hệ thống bán mỹ phẩm online nói riêng, từ đó đưa ra được lời giải thích choviệc lựa chọn đề tài “Phân tích thiết kế và xây dựng hệ thống website bán mỹphẩm dùng Springboot và Angular” Xác định và mô tả rõ các đối tượng cụ thê và

Trang 21

vai trò tương ứng có trong đê tài, đông thoi đưa ra cach giải quyét bai toán với các công nghệ sử dụng: Springboot, Angular, MySQL

Trang 22

Đồ án tốt nghiệp Đại học Chương 2: Phân tích và Thiết kế hệ thống

CHUONG 2: PHAN TÍCH VA THIET KE HE THONG

Với một hệ thống web, việc Phân tích và thiết kế hệ thống không chi là bước đầu tiênquan trọng trong quá trình phát triển mà còn là bước cần thiết dé đảm bảo rằng dự án

sẽ đáp ứng được yêu cầu và kỳ vọng của khách hàng và người dùng cuối Vậy nênChương 2 sẽ tập trung vào việc hiểu rõ hơn về yêu cầu của dự án, phân tích các yêu tố

quan trong, và xây dựng một kiến trúc hệ thống mạnh mẽ dé đáp ứng những yêu cầuđó.

STT | Tác nhân Mô tả Chức năng

1 | Khách hàng | La đốitượng | - Đăng ký tài khoản.

truy cập tới - Đăng nhập.

website - Đồi mật khâu

- Quản lý tài khoản.

- Tìm kiếm sản phẩm theo từ khóa, danh

mục, thương hiệu, loại da, mức giá.

- Xem toàn sản phâm, sản phâm bán chạy, sản phâm mới nhat, chi tiét sản phâm.

Trang 23

- Quản lý thương hiệu.

- Quản lý loại da.

- Quản lý sản phẩm

- Quản lý đơn hàng.

- Quản lý người dùng.

- Quản lý mã giảm giá.

- Xem báo cáo thống kê

Trang 24

2.1.2 Biểu đô UseCase tông quát

Hệ thống website ban mỹ phẩm

Đăng ký tài khoản Quản lý danh mục

Quên mật khẩu

Đăng nhập

Quản lý tài khoản

Quản lý thương hiệu

Theo dõi đơn hang

Anh gia sản phẩm Xem bảo cáo thống kê

Hình 2.1 Biểu đồ use case tổng quát

AWOL Oda OtQuan lý mã giảm giá

Mô tả Use case:

Bang 2.2 Bảng mô tả các use case

ErarrÐy—v ee cm Ty Eaton

Quan tri

Use case Mô tả

Đăng nhập Cho phép người dùng đăng nhập vào hệ thống

Đăng ký tài khoản | Cho phép người dùng đăng ký tài khoản tại website

Quên mật khâu Cho phép người dùng khôi phục mật khẩu đăng nhập

Quản lý tài khoản

thông tin cá nhân và mật khâuCho phép người dùng thay đổi thông tin tài khoản, bao gồm

Xem sản phâm

xem chi tiét sản pham

Cho phép khách hàng có thé xem danh sách, tìm kiếm hoặc

Trang 25

Đồ án tốt nghiệp Đại học

Quản lý giỏ hàng

Chương 2: Phân tích và Thiết kế hệ thống

Cho phép khách hàng quản lý giỏ hàng, bao gồm thêm mặt

hàng hoặc sửa đôi sô lượng

Quản lý sản pham Cho phép khách hàng quản lý sản phâm yêu thích, bao gồm

thêm mặt hàng hoặc xóa mặt hàng khỏi danh sách sản phamyéu thich

yéu thich.

l Cho phép khách hàng có thể mua hàng với các phương thứcĐặt hàng

thanh toán khác nhau

Theo dõi đơn hàng | Cho phép khách hàng có thể theo dõi các đơn hàng đã đặt

Đánh giá sản phẩm Cho phép khách hàng đánh giá sản phẩm.

Quản lý danh mục Cho phép Quản trị viên có thể xem danh sách, thêm mới, cập

nhật, xóa danh mục sản phâm.

Quản lý thương hiệu Cho phép Quản trị viên có thê xem danh sách, thêm mới, cập

nhật, xóa thương hiệu mỹ phẩm

Quản lý loại da Cho phép Quản trị viên có thể xem danh sách, thêm mới, cập

nhật, xóa loại da.

Quản lý sản pham Cho phép Quản trị viên có thể xem danh sách, thêm mới, cập

nhật, xóa sản phâm.

Quản lý người dùng Cho phép Quản trị viên có thể quản lý người dùng trong hệ

thống

Quản lý đơn hàng Cho phép Quản trị viên có thể xem danh sách các đơn hàng,

cập nhật trạng thái, xóa hoặc hủy đơn hàng.

Quản lý mã giảm

giá

Cho phép Quản trị viên có thể xem danh sách, thêm mới, cập

nhật, xóa mã giảm giá.

Xem báo cáo thống

kê

Cho phép Quan trị viên có thé xem báo cáo thống kê doanh

thu sản phẩm, đơn hang

Trang 26

2.1.3.Kịch bản các chức năng chính của hệ thông

2.1.3.1.Kịch bản các chức năng của khách hàng

e Chức năng Dang ký tài khoản

Khách hàng

Hình 2.2 Biểu đô use case đăng ký tài khoản

- Kịch bản chức năng Đăng ký tài khoản:

Bảng 2.3 Kịch bản khách hàng đăng ký tài khoản

Tên kịch bản Đăng ký tài khoản

Tác nhân Khách hàng

Tiên điều kiện Khách hàng chưa có tai khoản

Hậu điêu kiện Khách hàng đăng ký tài khoản thành công

Kịch bản chính

1 Khách hàng vào hệ thống đề đăng ký tài khoản

2 Hệ thống hiển thị giao diện Đăng nhập: ô nhập tên đăng

nhập, ô nhập mật khẩu, nút đăng nhập, quên mật khẩu, đăng

ký tai khoản.

3 Khách hàng chọn Đăng ký tài khoản.

4 Hệ thống hién thi giao diện Dang ký tài khoản bao gồm

các trường: Họ, Tên, Email, Số điện thoại SốCMND/CCCD, Giới tính, Ngày sinh, Quốc gia, Tên đăng

nhập Nút Đăng ký.

5 Khách hàng nhập Họ = Nguyễn Như, Tên = Quỳnh, Email

= quynhduong0911@gmail.com, Số điện thoại =

0378894661, Số CMND/CCCD = 001322222434, Giới tính

= Nữ, Ngày sinh = 11/21/2001, Quốc gia = Việt Nam, Tên

đăng nhập = quynhnn Click Đăng ký.

6 Hệ thống hiển thông báo Đăng ký thành công

Trang 27

7 Khách hàng truy cập đến địa chỉ email đã đăng kỹ tài

khoản, kiểm tra Hộp thư đến có chủ đề “ĐĂNG KY TÀI

KHOẢN THÀNH CÔNG”

8 Màn hình “ĐĂNG KÝ TÀI KHOẢN THÀNH CÔNG”

chứa mật khâu đăng nhập của tài khoản vừa đăng ký trước

Tiên điêu kiện Khách hàng đang ở giao diện trang chủ

Hậu điêu kiện Hệ thống hiển thị danh sách sản phẩm tương ứng với các

trường tìm kiếm

Kịch bản chính 1 Khách hàng vào trang chủ của hệ thống

2 Hệ thống hiển thị giao điện Trang chủ bao gồm: 6 nhập từkhóa tìm kiếm, danh sách thương hiệu, danh sách loại da,

danh sách danh mục, danh sách toàn bộ sản phẩm, tên tài

khoản đăng nhập, giỏ hàng, quan lý sản phẩm yêu thích

3 Khách hàng chọn 1 tiêu chí tìm kiếm theo mong muốn (từkhóa, thương hiệu, loại da, danh mục)

Trang 28

4 Hệ thống hiển thị giao điện Tìm kiếm bao gồm: ô nhập từkhóa tìm kiếm, danh sách thương hiệu, danh sách loại da,danh sách danh mục, mức giá, danh sách kết quả sản pham

phù hợp với tiêu chí tìm kiếm

5 Khách hàng có thể chọn 1 hoặc nhiều tiêu chí tìm kiếm

theo mong muôn.

6 Tại giao diện Tìm kiếm, hệ thống hiển thị danh sách kết

quả sản phẩm phù hợp với tiêu chí tìm kiếm

Kịch bản ngoại lệ

4 Hệ thống hiển thị giao diện Tìm kiếm bao gồm: ô nhập từ

khóa tìm kiếm, danh sách thương hiệu, danh sách loại da,danh sách danh mục, mức giá, “Không tìm thấy kết quả phù

Tiên điều kiện Khách hàng đang ở giao diện trang chủ

Hậu điêu kiện Hệ thống hién thị chỉ tiết sản phẩm

Kịch bản chính 1 Khách hàng vào trang chủ của hệ thống

2 Hệ thống hién thi giao điện Trang chủ bao gồm: ô nhập từkhóa tìm kiếm, danh sách thương hiệu, danh sách loại da,

khoản đăng nhập, giỏ hàng, quản lý sản phâm yêu thích

3 Khách hang chọn 1 sản pham muốn xem thông tin chỉ tiết

Trang 29

trong danh sách toàn bộ sản phẩm

4 Hệ thống hién thị chi tiết sản phẩm với các thông tin: Ảnh,Tên, Đánh giá, Lượt yêu thích, Gia, Mã giảm giá, biến thể,

Số lượng trong kho tương ứng với mỗi phân loại mặt hàngcủa sản phâm, Mô tả.

Hình 2.4 Biểu do use case quản lý giỏ hang

- Kịch bản chức năng Thêm sản phẩm vào giỏ hàng:

Bảng 2.6 Kịch bản khách hàng thêm sản phẩm vào giỏ hàngTên kịch bản Thêm sản phâm vào giỏ hàng

Tiên điêu kiện Khách hàng có tài khoản + đăng nhập vào hệ thống thành

công

Hậu điêu kiện Khách hàng thêm sản phẩm vào giỏ hàng thành công

Kịch bản chính 1 Khách hàng vào hệ thống dé thêm sản phẩm vào giỏ hàng

ký tài khoản.

3 Khách hàng nhập Tên đăng nhập = quynhnn, mật khâu =

Trang 30

123456aA@ Click Đăng nhập.

4 Hệ thống hién thi giao diện Trang chủ bao gồm: 6 nhập từkhóa tìm kiếm, danh sách thương hiệu, danh sách loại da,

khoản đăng nhập, giỏ hàng, quản lý sản phẩm yêu thích

5 Khách hàng chọn 1 sản phẩm muốn thêm vào giỏ hàng

6 Hệ thong hién thi chi tiét san phẩm với các thông tin: Ảnh,Tên, Đánh giá, Lượt yêu thích, Giá, Mã giảm giá, biến thé,

Số lượng trong kho tương ứng với mỗi phân loại mặt hàng

Trang 31

Kịch bản chính

1 Khách hàng vào đăng nhập hệ thống

2 Hệ thống hiển thị giao diện Đăng nhập: 6 nhập tên đăng

ky tai khoản.

3 Khách hàng nhập Tên đăng nhập = quynhnn, mật khẩu =

123456aẶ Click Đăng nhập.

4 Hệ thống hiển thi giao diện Trang chủ bao gồm: 6 nhập từ

khóa tìm kiếm, danh sách thương hiệu, danh sách loại da,

5 Khách hàng click chọn gio hàng.

6 Hệ thống hiển thị danh sách sản phẩm trong giỏ hang bao

gồm: Ảnh, Tên, Giá, Xem thêm

7 Khách hàng Click Xem thêm

8 Hệ thống hiển thị giao diện Quan ly giỏ hàng bao gồm:

Ảnh, Tên sản phẩm, biến thể (nếu có), đơn giá, số lượng, số

tiền, thao tác (Xóa), Tổng tiền

9 Khách hàng chỉnh sửa số lượng theo mong muốn

10 Hệ thống lưu lại và thay đôi số lượng trong giỏ hàng

9.1 Số lượng sản phẩm khách hang chọn vượt quá số lượng

trong kho

9.1.1 Hệ thống thông báo “Số lượng sản phẩm vượt

quá số lượng trong kho”

9.2 Sản phâm đã bán hết

9.2.1 Hệ thống làm mờ sản phẩm và không thể chỉnh

sửa

- Kịch bản chức năng xóa sản phẩm khỏi giỏ hàng

Trang 32

Bảng 2.8 Kịch bản khách hàng xóa sản phẩm khỏi giỏ hàng

Tên kịch bản Xóa sản phẩm khỏi giỏ hàng

: : Khách hàng có tài khoản + đăng nhập vào hệ thống thành

Tiên điều kiện

công

Hậu điều kiện Khách hàng xóa sản phẩm khỏi giỏ hàng thành công

2 Hệ thống hiển thi giao diện Đăng nhập: ô nhập tên đăng

ky tai khoản.

4 Hệ thống hiển thị giao diện Trang chủ bao gồm: ô nhập từ

Kịch bản chính 5 Khách hàng click chọn gio hàng.

6 Hệ thống hiển thị danh sách sản phẩm trong giỏ hang bao

gồm: Ảnh, Tên, Giá, Xem thêm

8 Hệ thống hiển thị giao diện Quản lý giỏ hàng bao gồm:

Anh, Tên sản phâm, biên thê (nêu có), đơn giá, sô lượng, sô

tiền, thao tác (Xóa), Tổng tiền

9 Khách hang Click xóa sản phẩm khỏi giỏ hàng theo mongmuốn

10 Hệ thống lưu lại, xóa sản phẩm trong giỏ hàng và hiển thịthông báo Xóa sản phẩm khỏi giỏ hàng thành công

Trang 33

Khach hang ee Sa <<lnclude>> SS

Powaerad By Visual

Hình 2.5 Biểu do use case quan lý san phẩm yêu thích

- Kịch bản chức năng thêm sản phẩm yêu thích

Bảng 2.9 Kịch bản khách hàng thêm sản phẩm yêu thíchTên kịch bản Thêm sản pham yêu thích

: : Khách hàng có tài khoản + đăng nhập vào hệ thống thànhTiên điêu kiện

công

: Khách hàng thêm sản phẩm vào danh sách yêu thích thành

Hậu điêu kiện

công.

Kịch bản chính 1 Khách hàng vào đăng nhập hệ thống

2 Hệ thống hiển thị giao diện Dang nhập: ô nhập tên đăng

Trang 34

5 Khách hang chọn 1 sản phẩm muốn thêm vào yêu thích

6 Hệ thống hiển thị chỉ tiết sản phẩm với các thông tin: Ảnh,

Tên, Đánh giá, Lượt yêu thích, Giá, Mã giảm giá, biến thé,

Số lượng trong kho tương ứng với mỗi phân loại mặt hàngcủa sản phẩm, Mô tả

11 Khách hang Click icon Yêu thích.

12 Hệ thống lưu lại và thông báo Thêm sản phẩm yêu thích

thành công.

- Kịch bản chức năng xóa sản phẩm khỏi danh sách yêu thích

Bảng 2.10 Kịch bản khách hàng xóa sản phẩm khỏi danh sách yêu thíchTên kịch bản Xóa sản phẩm khỏi danh sách yêu thích

Trang 35

5 Khách hang click chọn quản lý sản phẩm yêu thích

6 Hệ thống hién thị danh sách sản phẩm yêu thích bao gồm:Ảnh, Tên, Giá, Xem thêm

8 Hệ thống hiển thị giao diện Quan lý danh sách sản phẩm

yêu thích bao gồm: Ảnh, Tên sản phẩm, biến thể (nếu có),

đơn giá, thao tác (Xóa).

11 Khách hàng Click xóa sản phẩm khỏi danh sách yêu thíchtheo mong muốn

12 Hệ thống lưu lại, xóa sản phâm trong danh sách yêu thích

và hiển thị thông báo Xóa sản phẩm khỏi danh sách yêu thíchthành công.

e Chức năng Đặt hàng

A

Khach hang

Bat hang <<Extend>> men)

Hình 2.6 Biểu đô use case đặt hàng

Hậu điêu kiện Khách hàng đặt hàng thành công.

Trang 36

Kịch bản chính

2 Hệ thống hiển thị giao diện Đăng nhập: 6 nhập tên đăng

ký tài khoản.

123456aA@ Click Đăng nhập.

4 Hệ thống hién thi giao diện Trang chủ bao gồm: ô nhập từ

khoản đăng nhập, giỏ hang, quản lý sản phẩm yêu thích

5 Khách hàng click chọn sản phẩm muốn mua

6 Hệ thống hiển thị giao diện đặt hàng: địa chỉ giao hàng, tênngười nhận, số điện thoại người nhận, đơn vị giao hàng, mã

giảm giá, phương thức thanh toán, loại giao hàng, thông tin

sản phẩm muốn mua, tông tiền

7 Khách hàng nhập thông tin đặt hàng, chọn Thanh toán khi nhận hàng, Click Đặt hàng

8 Hệ thống thông báo Thêm đơn hàng thành công, hiển thigiao diện Theo dõi đơn hàng.

Kịch bản ngoại lệ 5.1 Sản phâm muốn mua nằm trong giỏ hàng

5.1.1 Khách hàng click chon gio hàng.

5.1.2 Hệ thống hiển thị danh sách sản phẩm trong giỏhàng bao gồm: Ảnh, Tên, Giá, Xem thêm

5.1.3 Khách hàng Click Xem thêm.

5.1.4 Hệ thống hiển thị giao điện Quản lý giỏ hàng

bao gồm: Ảnh, Tên sản phẩm, biến thể (nếu có), đơn

giá, số lượng, số tiền, thao tác (Xóa), Tổng tiền

5.1.5 Khách hàng chọn 1 hoặc nhiều sản phẩm muốn

đặt hàng, Click Mua hàng.

Trang 37

5.1.6 Hệ thống hiển thị giao diện đặt hàng (Bước 6)

7.1 Khách hàng nhập không đủ thông tin.

7.1.1 Hệ thống báo lỗi phải nhập đủ các trường

thông tin bắt buộc

7.2 Khách hàng nhập sai định dạng thông tin.

7.2.1 Hệ thống báo lỗi phải nhập đúng định dạng

Tiên điêu kiện Khách hàng có tài khoản + đăng nhập vào hệ thống thành

công, Sản phẩm có trong trang Đặt hàng/Giỏ hàngHậu điêu kiện Khách hàng thanh toán đơn hàng thành công.

Kịch bản chính

1 Tại giao diện đặt hàng, Khách hàng chon Thanh toán Online, nhập thông tin thẻ và Click Đặt hàng.

2 Hệ thống thông báo Thêm đơn hàng thành công, hiển thị

giao diện Theo dõi đơn hàng.

1.1 Khách hàng nhập không đủ thông tin.

1.1.1 Hệ thống báo lỗi phải nhập đủ thông tin

1.2 Khách hàng nhập thông tin thanh toán không hợp lệ.

1.2.1 Hệ thống thông báo thông tin thanh toán không hợp

^

lệ.

e Chic năng Theo dõi đơn hàng

Trang 38

Khai AM) Visual Parad

Hình 2.7 Biểu đồ use case theo dõi don hang

- Kịch bản chức năng theo dõi đơn hàng

Bảng 2.13 Kịch bản khách hàng theo dõi đơn hàng

Tên kịch ban Theo dõi đơn hàng

ký tài khoản.

3 Khách hàng nhập Tên đăng nhập = quynhmn, mật khâu =123456aA@ Click Đăng nhập.

4 Hệ thống hién thị giao diện Trang chủ bao gồm: 6 nhập từ

khoản đăng nhập, giỏ hang, quản lý sản phẩm yêu thích

5 Khách hàng click chọn tên tai khoản đăng nhập.

6 Hệ thống hién thị giao diện dropdown bao gồm: Thông tin

cá nhân, ưu đãi của tôi, theo dõi đơn hàng

Trang 39

7 Khách hàng chọn Theo dõi đơn hàng

8 Hệ thống hiển thị giao diện theo dõi đơn hàng bao gồm

danh sách các đơn hàng của khách hàng.

9 Khách hàng chọn đơn hàng muốn theo dõi

10 Hệ thống hiển thị danh sách chi tiết đơn hàng của kháchhàng bao gồm: thông tin về sản phâm, số lượng, giá tiền,

trạng thái đơn hàng, thông tin giao hàng.

Tiên điêu kiện

Khách hàng có tài khoản + đăng nhập vào hệ thống thành

công, Khách hàng có đơn hàng đã giao thành công và chưa

được đánh giá Hậu điêu kiện Khách hàng đánh giá sản phâm thành công và hién thị

Kịch bản chính 1 Khách hàng vào đăng nhập hệ thống

Trang 40

ký tài khoản.

4 Hệ thống hién thị giao diện Trang chủ bao gồm: ô nhập từkhóa tìm kiếm, danh sách thương hiệu, danh sách loại da,

5 Khách hàng click chọn tên tài khoản đăng nhập.

6 Hệ thống hiển thị giao diện dropdown bao gồm: Thông tin

cá nhân, ưu đãi của tôi, theo dõi đơn hàng

7 Khách hàng chọn Theo dõi đơn hang

8 Hệ thống hiển thị giao diện theo đõi don hàng bao gồm

danh sách các đơn hàng của khách hàng.

9 Khách hàng chọn nút Đánh giá đơn hàng muốn đánh giá

10 Hệ thống hiển thị ô nhập nội dung đánh giá, số sao, ảnh

11 Khách hàng nhập thông tin đánh giá Click Luu

12 Hệ thống thông báo Đánh giá sản phẩm thành công

2.1.3.2.Kịch bản chức năng của quản trị viên

Chức năng Quản lý danh mục

Tiêu đề	Phân Tích Thiết Kế Và Xây Dựng Hệ Thống Website Bán Mỹ Phẩm Dùng Springboot Và Angular
Tác giả	Nguyễn Như Quỳnh
Người hướng dẫn	Nguyễn Hoàng Anh
Trường học	Học viện công nghệ bưu chính viễn thông
Chuyên ngành	Công nghệ thông tin
Thể loại	Đề tài tốt nghiệp
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	98
Dung lượng	18,12 MB