Đồ án cơ sở 2 Đề tài nghiên cứu và xây dựng website bán mô hình anime

thì khách hàng có thể truy cập vào trang login chọn mục đăng ký sau đó nhập đầy đủ các thông tin mà form đăng ký yêu cầu và ấn vào đăng ký.. Sau khi thông tin khách hàng được gửi lên, hệ

TRUONG DAI HOC CONG NGHE THONG TIN &

TRUYEN THONG VIET HAN

Khoa Khoa Hoc May Tinh

VKU

DO AN CO SO 2

DE TAI:

NGHIEN CUU VA XAY DUNG WEBSITE

BAN MO HINH ANIME

Sinh viên thực hiện: Bùi Ngọc Thành — 20ET239

TRUONG DAI HOC CONG NGHE THONG TIN &

TRUYEN THONG VIET HAN

Khoa Khoa Hoc May Tinh

VU

ĐỎ ÁN CƠ SỞ 2

ĐÈ TÀI:

NGHIÊN CỨU VÀ XÂY DỰNG WEBSITE

BAN MO HINH ANIME

Sinh viên thực hiện: Bùi Ngọc Thành — 20ET239

Nguyễn Van Khanh — 201T1022 Giảng viên hướng dẫn: Ths.Lê Kim Trọng

Da Nẵng, tháng 12 năm 2021

MO DAU

Giới thiệu tông quan về đề tải

Hiện nay, dưới sự phát triển của công nghệ thông tin, đặc biệt là trong lĩnh vực thương mại điện tử đã giúp các cá nhân, doanh nghiệp có mặt hàng dễ dàng tiếp cận được với người tiêu dùng Hầu hết họ đều có website để giới thiệu về sản phâm của doanh nghiệp mình Vì thế chúng em hình thành ý tưởng thực hiện một website bán

mô hỉnh anime

Website với mục đích cung cấp cho khách hàng các thông tin chính xác về các mô hình mà cửa hàng bày bán và cách thức đặt mua hàng qua mạng Các thông tin được cập nhật thường xuyên và nhanh chóng Vì vậy, rút ngắn được khoảng cách giữa người mua và người bán, đưa thông tin về các sản phẩm mới nhanh chóng đến cho khách hàng Giao diện thân thiện đẹp mắt dễ đàng sử dụng

Do đó, với sự giúp đỡ của thầy Lê Kim Trọng, nhóm quyết định thành lập Fipure website đáp ứng các nhu cầu của khách hàng Sứ mệnh của Fastka là phục vụ cho khách hàng của bạn luôn thoải mái, nhanh gọn và tiện lợi khiến cho khách hàng thật sự hài lòng với chất lượng sản phẩm và dịch vụ

Đồ án gồm 6 phân chính:

Chương 1 Giới thiệu: giới thiệu đề tải, phương pháp thực hiện và mục tiêu của đề tài

Chương 2 Tổng quan về website Fipure

Chương 3 Nghiên cứu tông quan: trình bày kiến thức tổng quan về các ngôn ngữ sẽ được sử dụng để thiết kế website

Chương 4 Phân tích và thiết kế hệ thống: Dac tả các chức năng của website

Chương 5 Thiết kế co so dữ liệu

Chương 6 Giao diện website

thành cảm ơn thầy Ths.Lê Kim Trọng người đã trực tiếp hướng dẫn chúng em trong

thời gian thực hiện dé an nay

Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thông tin đã ủng

hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp chúng tôi trong quá trình nghiên cứu và thực hiện đề tài

Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễn nên đề tài không tránh khỏi những sai sót Em rất mong nhận được sự thông cảm của quý thầy cô

và mong đón nhận những góp ý của thầy cô và các bạn

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

MUC LUC

LiL Téng quate cccccccesessssssessessessesesssseseessresiessessesssssresresarsasessesersessersesessesausevsneseseess 1

1.1.1 Lí do chọn để tài óc HH gu e 1 1.1.2 Mục đích thực hiện đề tài - ch HH ru 1 1.2 Nhiệm vụ thực hiện đề tài ngu te 1

1.2.1 Phương pháp thực hiện 5 20 2011212112 111 1111011111 1181111011111 121 key 1

{Ga Go na .dỶẢỶẢỶÝẢÝÝ 2

CHUONG 2: TONG QUAN VE WEBSITE FIGURE 3

2.1 Giới thigu vé website Figure cccccccccscessesseesesssessessesssessesersetesssssessesarsasesseseesessees 3

2.2 Một số quy trình hoạt động c2 221212211 1101211012011 1011112181111 12 tr 3 2.2.1 Quy trình đăng kí tài khoản ó2 1121 2191211021111 11011111 12811 re, 3 2.2.2 Quy trình đăng nhậtp - L0 2121 1211 1101111121111 11101111101 011 8118 1H key 4

2.2.3 Quy trình tìm kiếm sản phâẩm 2-5 St E121 2112212111818 2n rrrreg 5 2.2.4 Quy trình đánh giá sản phẩm 0-1 1t E1 2E2111712122 11211 erre 6

2.2.5 Quy trình thêm sản phâm vào giỏ hảng SE HH rưyn 7

PA 19, án 0i in na 8 2.2.7 Quy trình quản lý tài khoản khách hàng 0 2201 1321211111111 exee 9 2.2.8 Quy trình quản lý đơn đặt hàng - 1 212 21 1211011011111 128 re, 9

2.3 Cơ cầu tô chức websife - ác 2c 2 11222 12212121221 e 10

CHƯƠNG 3 NGHIÊN CỨU TỎNG QUAN il

3.1 NgOn ngit thiét ké website cccccccccceseeccsssessesersesessessessesereesessessrestesecsieanseeseessees 11 3.1.1 Ngôn ngữ lập trình PHP - 1212211211111 1101111111111 1201111111111 1111 xa 11 3.1.2 NgGn ngtt HTML — 11 3.1.3 NgGn nett CSS eccceseeeseeesessessececeserseeesecssessceecsecssevsesessessensssseetaassnees 12 3.1.4 Ngôn ngữ lập trình JavaScrIpI - c2 2 121111011211 011811111 01181111181 kg 13 3.1.5 Bootstrap FramewWOTĂ - cc t1 HH TH HH 0110111101101 01111111 1x 1kg 14 E6 vi a/na9 an e 14 3.1.7 Laravel FrameworK ác cnHnn HT HT HH kết 15

3.2

4.1

4.2

3.1.8 Co so dit LGU SQL ốc hốe

Ngôn ngữ thiết kế hệ thống UMIL - 2-52 1 S2 2 15 1121211211211 Etre

CHUONG 4 PHAN TICH VA THIET KE HE THONG

Biêu đô se case LH TT KH HH ry 4.1.1 Biêu đỗ Use Case tống thê - c nn nnnnH t HH H221 1g rngrye 4.1.2 Biêu đồ phân rã các Use Case khách hàng 0 5c SE trên

4.1.2.2 Tiến trình đăng nhập + - 1E SE 1211152122211 08 1 1g ereo

4.1.3 Biêu đỗ phân rã cho Use Case Ađmin 55-5 SE E1 tre

4.1.3.1 Tiến trình quản lý sản phâm 2: 2: 5 S2 E12 2211211221 1E etrryg 4.1.3.2 Tiến trình quản lý tài khoản - 5s té St E2 181122122201 EEtrree

4.1.3.5 Tiến trình quản lý voucher + 5s s2 E2 1521221211 1121112 reee 4.1.4 Đặc tá một số Lse Case 2 ng H21 1251 12115521 EEEEErrerererre 4.1.4.1 Use Case Đăng nhập - LH n1 1H19 1011011011110 01111 01H ru 4.1.4.2, Use Case dang nan ố ẽ.ố ẽhe

4.1.4.3 Use Case tìm kiếm sản phẩm 26 SE E2 22 211021 rrrye

4.1.4.4 Use Case đánh giá sản phâm -52 2c 1 t2 2E 1182122 1E errun 4.1.4.5 Use Case thêm sản phâm vảo giỏ hàng S0 SE nen 4.1.4.6 Use Case than n ố

4.1.4.7 Use Case bình luận .- G n1 n1 S TH TT ng ca 4.1.4.8 Use Case thêm blog ác c2 212 1111021111111 1111011011111 1111116111111 1 kg

4.1.4.9 Use Case vòng quay may mắn + c2 21121122 erree 4.1.4.10 Use Case cập nhật thông tin cả nhân (2 12112 1211113111211 1 x2 4.1.4.11 Use Case quản lý tài khoản khách hàng - c2 22213222 4.1.4.12 Use Case quan ly đơn đặt hàng c1 1n H11 H11 xe, 4.1.4.13 Use Case quản lý sản phẩm - 1 St E11 12 g1 grrree 4.1.4.14 Use Case quản lý voucher á ccc 2x21 111011111 110119101111 1 11x rà Biểu đồ hoạt động nn HH HH TH HH HH TH HH KH HH Hà Hà tr HH 4.2.1 Đăng ký tài khoản c1 1 121111 2111111111141111111111111111111110111111111 011111111

4.2.2 Đăng nhập L1 121 1111 101101111121111101011 11101101111 011111112 HH HH ty

Na na -

4.2.4 Tìm iG ececcccccccccsccsesessesessesessescsesssessssesuceessesessssessesessesssesussssesvsvsnsseaseseees 34

42.5 Dan Gia cccccccccccscecssecsssessssssssessreessecsvecsesetsssesssessseessiessseetaserssserasecereesarecees 34

4.2.7 Thanh toán - TT HS TT HT HH HH kg nh HC ke 35 CV.) ì: 8) xaadAAIẰIẰỒỖẮẰẮÃẼẮẰŨẮẰẮ 36 4.2.9 Vòng quay may mắn 2 s2 1S 1112211 1121112222121 11 1g rye 36 4.2.10 Cập nhật thông tin cả nhân 2 2 1211211211 11211111 1101111 11111111111 xx6 37

4.2.12 Quản lý sản phẩm 2 - S1 E2 12710212211 121122 1 11 2tr reo 38

4.2.10 Cập nhật thông tin cá nhân - 2 2S E21 2751711127111211 221.22 re 44

5.1 Cac bang dit Qu .Ẽ(.-.A(l13 45 Bang 5- 1 Bang tai khan ccc ccccccsecseesccsessessessessessssevsecsecessecsesseeseseseesseessenas 45 h0 n1» ái 000 ằằằằ 45

Bảng 5- 4 Bảng bình luận - G2 2121121122121 1 12181111101 181111 1011111110111 181 tu 46

su nh 0 8n <e 46 Bảng 5- 6 Bảng Blog L1 211 HH n1 101111111111 111 11112011 1H11 1H 1 dt 46 Bảng 5- 7 Bảng thông loại sản phẩm 56 2c SE 8111211212111 47

Bang 5- 8 Bang danh gia sam pham.i icc cccccesesssescessessessesssesessssetesersessseeeeees 47

Bang 5- 9 Bảng cảm xúc DÏOE L1 211 2111 1111111011111 1101112110111 0151111 Hyeg 47 Bảng 5- 10 Bảng vòng quay may mắẫn s5 St 2121121121211 tren 47 Bảng 5- L1 Bảng quà c2 2202221 121111131213155119111112111 1111101111118 111111 8 ra 48 Bảng 5- 12 Bảng dữ liệu vòng quay L2 12 9v 2 HH1 101181101181111111 11kg 48 5.2 Mi quan hé gitta cAc DANG ccc cccecesc css cesesssessessesesessesersesesscesessesssesteseesesessesessessees 49

CHUONG 6 THIET KE WEBSITE 50

O NCI vi ii) 00): :›iiaaadđaiaiaiÝỶÝŸŸÕÊẢŸÃ 50

GALL Tramg CHU anDD 50

6.1.1.1 San pham n6i Dat cece ees cesscssessesssessessessessessessessreasasessesseseeseeases 50 "No nh 51

6.1.1.3 Blog néi Date ec ccccccecscsseescessessessssssessetesessessessecsssressesevsssreseseeseteesecases 51 xa rn 5 52

'`¬"" ae 52

6.1.2 C ác in .4Á 52

6.1.3 Giao dign sàn 53

6.1.4 Giao diện cập nhật thông tin khách hàng 20 1 n2 vn reo 33 6.1.5 Giao điện sản phẩm -2 St EEEE121121121122 221 12212 rờt 54 6.1.5.1 Giao diện hiển thị các sản phẩm - SE HE E122 54 6.1.5.2 Giao diện gợi ý cho khách hàng L1 211212111 1121111113121 11111 1xx 55 6.1.6 Giao diện liên hệ Ln n1 1S HS ng KT ng ng 55 6.1.7 Giao anh 56

'X“ă sẽ can ố 56

“Nhi an 57

6.1.8 Giao điện vòng quay may mắn -+- 5+2 2112517127112 re 57 6.1.8.1 Giao diện lịch sử trùng gi1ải L1 1211 21210 1911011101 111111 111115 tyer 58 AC vá o ịaiiiiiiiảăảa343 58

6.1.10 Giao diện thanh toan ccc ecccceccccceccccccecseccccseceverecevessecertsceestsseectaseceees 59 6.2 Giao din Admin ccccececectcccectsccesceeceseccesecevtaeseresascrenttaseseesettetesceeereneaa 60 “Số .Ả 60

“»AnN in 7 60 6.2.1.2 Edit Confeni c TT HT ng ng kg HE sec 60

8Ô xo vn na 61 6.2.2.1 LIST SOTỂ ST 1n S HH1 1111111111 1111111111 1111 1111 1111 1111 TH HH TH rà u 61 6.2.2.2 Add on 62

so nh 31 62 F1 oi nh 62 Xa 63 Đố 63

Ö 09 Ố 64

Kết ñ0;6318:0 1121157 65 0.) ccccccccceccesscsssessessessesercssessessrearessessussissrssressesareseesarsasessessessesesvasesseseess 65 0-1 0iìi3isi; 0P 65 Hạn chế 5à 5c 21 511211271 1 21122212121 11H H2 re 65

DANH MUC HINH

si i8 n9 s0 1n 2 Hình 2 : Quy trình đăng kí tài khoản 22c 2122211211221 1123151112128 1E ea 4 Hình 3 : Quy trình đăng nhập - 2 2 222122112211 2211521 1211121111111 18k 5

Hình 4: Quy trình tìm kiếm 2-52 5c 2 122121121121111211 121222012221 1 ra 6

Hình 5 : Quy trình đánh giá sản phẩm 52 S2 211211 12111211E2.121 1e ce 7 Hình 6 : Quy trình thêm sản phẩm vào giỏ hàng 5 2521 1 E221 re 8 Hình 7 : Quy trình thanh toán - 2 22 22112211221 121 1153111111111 118111811115 1 cay 9

Hinh 16 : Ngôn ngữ thiết kế hệ thông UMIL 2-2 22222E222222222222222222e2 17

Hình 17 : Sơ đồ Use Case tổng th s5 s21 2 2112112121111 21211221 xxre 18

Hình 18 : Tiến trình sử dụng hệ thống 2-2 S1 E11 12121111152211211222 x2 18 Hình 19: Tiến trình đăng nhập 2 1 2211221 111112121111 711111121 2111212 x2 19 Hình 20 : Tiến trình quản lý sản phẩm 2-5222 SE E1 EE127121122271211E221 e2 19

Hình 22 : Tiến trình quản lý đơn đặt hảng -2- 2 5e SE 2212211121112 xe 20 Hình 23 : Tiến trình quản lý voucher - s52 1 S252 S215212111115227121 122121 e2 21

Hình 24 : Biểu đồ hoạt động đăng ký nnn n2 2012111111212 re 32 Hình 25 : Biểu đồ hoạt động đăng nhập - - 2222201121 1221 12221112121 reg 33

Hình 26 : Biểu đồ hoạt động bình luận - 522 E2 EE1E1122121112x 21c xxe 33

Hình 27 : Biểu đồ hoạt động tìm TT 1 cccccccccccecececscsesesesesecetsecsevscsevsseveees 34

Hình 28 : Biểu đồ hoạt động đánh giá 5 5 S2 1211212111122 t te 34

Hình 29 : Biểu đồ hoạt động thêm sp vảo giỏ hàng 55 SsSe 2 2c re 35

32 : Biếu đồ hoạt động vòng quay may mắn -2 2222 sxcrsrg 36

33 : Biểu đồ hoạt động cập nhật thông tin cá nhân 55555552 37

34 : Biểu đồ hoạt động quản lý tài khoản - 2 2c 2222222 ezrxe2 37

35 : Biéu đồ hoạt động quản lý sản phẩm 5-52 2 2 222212222 ze 38

36 : Biểu đồ hoạt động đơn đặt hàng - 2 22 2221221221222 rrea 38

37 2 Bidu ae áỶẢỶÝỶ 39

38 : Biểu đồ tuần tự šn0 117 — 39

39 : Biểu đồ tuần tự đăng nhậtp - 2 22 122122212211 12122111111111 11121 xe 40

40 : Biếu đỗ tuần tự bình luận .-¿:- 5252: 22 2222122211 1212 40

41 : Biểu đồ tuần tự tìm kiếm 2 2 S1 S111 11 1111115111511 1515 sa 41

42 : Biểu đỗ tuần tự đánh giá 5 1n 2112121221121 1212012211 41

43 : Biểu đồ tuần tự thêm sp vào giỏ hàng s55 n2 E2 xe 42

44 : Biéu đỗ tuần tự thanh toán -222: 2222222212212 21 ee 42

45 : Biêu đồ tuần tự thêm 0 43

46 : Biểu đồ tuần tự vòng quay may mắn + s1 E1 11112 c2 43

47 : Biéu đồ tuần tự cập nhật thông tin cá nhân 2-5522 2 s22 222 s22 44

48 : Biếu đỗ tuần tự quản lý tài khoản - 5221 1E E221 12212.22zeg 44

49 : Mỗi quan hệ giữa các bảng 52 ST 1E 8112112112111 1e cau 49

50 : Trang chủ Ì c1 111211111111 111 110111 1111111111 2111111111211 ng ray 50 51: Trang chủ 2 L1 2111211111111 12221 10111 0111111111211111 111211 HH ray 50

52 : Trang chủ 3 - eiới thiệu - 5c C1 2022211211121 111 1111122212 1118111821 ty 51

53 : Trang chủ 4 - blog nỗi bật - 52-21 1 121871211111 211111122121 11cm te 51 54: Trang chủ 5 - TA 52 hi 52

56 : Giao diện đăng nhập L0 2222111211211 121 111211811 1811181 1111111111 2 53

57 : Giao diện đăng ký - 0201211 12111111121 1011101112111 11111112111 He 53

58 : Giao diện cập nhật thông tin khách hàng 2 222 22222222552 54 59: Header trang san phẩm - - 52-521 1271271211211 1121111211211 x0 54

60 : Các san pha cccccccccccccscessecsesscsesessessessesscsresecsessecesseseseesnseesesesees 55

Hình 61 : Gợi ý cho khách hàng - L2 0 2212211121121 12 112511112181 1111 21 x22 55 Hinh 62 : Giao diện liên hệ 0021020111101 1111111 111111 1x2 56 Hình 63 : Header trang blog - 2: 22 2211121121112 112211111 15111111111 11110111 1 xk 56 Hinh 64 : Tin tite 57 Hinh 65 : Bình luận - TQ 112 11111111115 111556 2251115111111 k 1k1 5511511 xxx 57

Hình 66 : vòng quay may mẫn - 2 22E9SE92E122152122112712212712122121 21221 cre 58

Hình 67 : Lịch sử trúng gIải 2 2c 22211211 1211123 121111112 1111111111011 1 218211 kg 58 Hình 68 : Giỏ hàng 2 2 2 221121122 11211 12111211111 11111 1110111011111 111111 1111k kg 59 lì: 05 0ä 0n 59 Hinh 70 : Edit slider 60 Hinh 71 : Edit Content ccc cceccceeeeeeeeseeeneceeeeeeneeseeeesneseeeeneeeeaeesneeeneeeees 60 Hinh 72 s8 on 61 Hinh can son 61

lì 0 ro on 62 Hình 75 : List product c c1 211211121 12211 12111511111 111111111 11110111192 ky 62 Hinh e0 - l1 63 Hinh v0) a1 63 Hình 78 : Order cece cc ccceceeececcccenenssceceseesensececsensenseceeseentasesesesauesevavaues 64

CHUONG 1: GIOI THIEU

1.1 Tổng quan

1.1.1 Lí do chọn đề tài

Hiện nay, dưới sự phát triển của công nghệ thông tin, đặc biệt là trong lĩnh vực thương mại điện tử đã giúp các cá nhân, doanh nghiệp có mặt hàng dễ dàng tiếp cận được với người tiêu dùng Hầu hết họ đều có website để giới thiệu về sản phâm của doanh nghiệp mình Vì thế tụi em hình thành ý tưởng thực hiện một website bán hàng

trực tuyến

Website với mục đích cung cấp cho khách hàng các thông tin chính xác về các loại

mô hỉnh và cách thức đặt mua hàng qua mạng Các thông tin được cập nhật thường xuyên và nhanh chóng Vì vậy, rút ngắn được khoảng cách giữa người mua và người bán, đưa thông tin về các sản phâm mới nhanh chóng đến cho khách hàng Giao diện thân thiện đẹp mắt dễ dàng sử dụng dù là người lớn tuôi hay trẻ nhỏ

1.1.2 Mục đích thực hiện đề tài

- Xây dựng một trang website cửa hàng bán mô hình anime trực tuyến giúp cho khách hàng xem sản phẩm, mua và thanh toán các mặt hàng một cách nhanh chóng.Nhân viên để đàng quản lí các danh mục như nhân viên, sản pham, khach hang,

- Bên cạnh đó website cũng là một nơi cập nhật các thông tin về thế gidi anime thong qua các blog, các khách hàng có niềm dam mê với fñgure có thể vào xem các cập nhật mới hoặc họ có thê tự bản thân mình chia sẻ các thông tin mà mình có được bằng cách tạo 1 bloe mới

1.2 Nhiệm vụ thực hiện đề tài

1.2.L Phương pháp thực hiện

- Học tập và nắm vững các ngôn ngữ cần thiết để ứng dụng vào việc thiết kế Website

- Đọc các tài liệu, các nguồn thông tin tham khảo

sẽ những thông tin về thế giới anime, cũng như các thông tin về các loại figure moi tir

đó có thê kêt nội mọi người lại với nhau

CHUONG 2: TONG QUAN VE WEBSITE FIGURE

2.1 Giới thiệu về website Figure

- Figure la mot nhan vat dé chơi nhân vật có thể nhìn thây được làm bằng nhựa phổ biến nhất, và thường dựa trên các nhân vật từ một bộ phim, truyện tranh, quân đội, trò chơi video hoặc chương trình truyền hình; hư cấu hoặc lịch sử

- Website figure la website ban m6 hinh trực tuyén duoc tao ra dé giup cho khách hàng

có thể đặt những bộ figure mà mình muốn mà không cần phải đi tới cửa hàng trực tiếp, khách hàng chỉ cần có điện thoại hoặc máy tính roi truy cập vào website sau đó lựa chon figure ma minh muốn rồi đặt mua Khách hàng có thể lựa chọn hình thức thanh toán hoặc họ có thể lựa chọn thanh toán khi nhận được hàng

2.2 Một số quy trình hoạt động

2.2.1 Quy trình đăng kí tài khoản

Khi khách hàng muốn đăng kí tài khoản để sử dụng cho các việc như : mua hàng, đánh giá sản phẩm, bình luân thì khách hàng có thể truy cập vào trang login chọn mục đăng ký sau đó nhập đầy đủ các thông tin mà form đăng ký yêu cầu và ấn vào đăng ký Sau khi thông tin khách hàng được gửi lên, hệ thống sẽ kiếm và tiến hành đăng kí cho người xem nếu các thông tin hợp lệ và yêu cầu nhập lại nếu thông thin không hợp lệ

Vv 4

sal Kiếm trạ »———————————————

đúng

’ Thông báo tạo tải

Tao tài khoản khoản thât bại

Trang đăng nhập sẽ tự động hiện khi khách có nhu cầu sử đụng các tính

năng của thành viên trang web ví dụ: binh luận, đánh gia

Hệ thống quản lý tài khoản của thành viên sẽ kiểm tra thông tin được

cung cấp nêu thông tin không đúng thì sẽ quay lại màn hình đăng nhập

đồng thời gửi thông báo hiển thị trên giao diện

Nêu thông tin được xác thực, đưa về giao điện trang chủ của web

Phân chức năng tìm kiếm sẽ nằm ngay trên phần header của trang web Mỗi khi

khách hàng muốn tìm kiếm 1 sản phâm nảo đó thì chỉ cần nhập từ khóa tìm kiếm vảo ô

input thi phan tim kiém sé tu dong hién thi 1 danh sach san pham có từ khóa tương tự

Lúc này khách hàng chỉ cần chọn 1 trong các sản phẩm năm trong danh sách tìm kiếm

ấy và click vào

Khi khách hàng đã mua một sản phâm nào đó thì họ có thê đánh giá sản phâm đó

tùy theo mức độ hài lòng của họ với sản phẩm đó Chức năng đánh giá chỉ giành cho

những ai đã mua sản phẩm để tránh những khách hàng khác hoặc là đối thủ đánh giá

sai cho sản phẩm từ đó gây tốn that cho website

Khách hàng chon mức đánh giá và đánh giá

Khách hàng chưa - 3 ———— Khách hang chưa

đang nhập Lưu đánh giá và tính mua sản phẫm

toán lại sau đó cập nhật

Ỷ Kết thúc a

Hình 5 : Quy trình đánh giá sản phẩm 2.2.5 Quy trình thêm sản phẩm vào giỏ hàng

Khách hàng sau khi tìm kiếm sản phẩm xong, họ cảm thấy ưng ý một sản phẩm

nảo đó thì họ có thé tiền hành thêm sản phâm đó vào giỏ hàng để lưu giữ sản phẩm lại

để sau này khi họ muốn mua thì họ chỉ cần kiểm tra giỏ hàng và lựa chọn lại những sản phẩm nào họ cảm thấy ưng ý nhất

Khach hang chon san

pham va bam thém vao

Hình 6 : Quy trình thêm sản phẩm vào giỏ hàng

2.2.6 Quy trình thanh: toán

Sau khi khách hàng cam thấy hài lòng với các sản phẩm mà họ đã thêm vào giỏ hàng thì họ có thé mua sản phầm bằng cách nhắn vào nút thanh toán phía đưới danh sách cách sản phẩm trong giỏ hàng Khách hàng kiểm tra các thông tín cơ bản và chọn hình thức thanh toán phù hợp sau đó nhắn thanh toán thêm một lần nữa

Qua trình thanh toán sẽ thông qua 2 giai đoạn quan trọng:

-Giai doan 1: Hé thống sẽ tự động gửi thông tin nhận được từ khách hàng đến ngân hàng hoặc nhà cung cấp dịch vụ mà website đã liên kết Thông tin sẽ được chứng thực

và thông báo trả về hệ thống

-Giai đoạn 2: gửi thông báo kết quả người xem

+Nếu thanh toán thành công sẽ hiển thị ra thông tin giao dịch

8

+Néu thông tin không được xác nhận hệ thông đưa thành viên trở về giao diện

và thông báo lỗi

Me — ime = Gửi thóng Z `

Thong bao khong

†hảnh công Thông bảo thành

|cöng vả hiện thi thông) tin giao dịch

Hình 7 : Quy trình thanh toán 2.2.7 Quy trình quản lÿ tài khoản khách hàng

Mỗi khách hàng khi tham gia mua hàng tại một website nào đó thì đa số họ để

muốn có một thứ gì đó có thê giúp lưu trữ các dữ liệu cần thiết khi họ quay trở lại và

khi đó mọi người sẽ tạo cho mình 1 tài khoản để khi vảo lại trang web có thể thuận

tiện thao tác hoặc xử lý các công việc Đặc biệt đối với website bán hàng, khi khách hàng mua hàng thì đa số họ thường tạo một tài khoản Nếu như website có nhiều khách hàng thì sẽ có rất nhiều tài khoản được tạo ra, để có thể quản lý được tất cả các tài khoản đó thì ta cần có các quy trình quản lý tài khoản giúp cho admin có thể đễ dàng quản lý các tài khoản trong website Admin có thể xem thông tin các tài khoản, khóa các tài khoản bi vi phạm hoặc Admin có thé gui voucher tri 4n nhtmg khach hang mua hàng thường xuyên tại website

2.2.8 Quy trình quản lý đơn: đặt hàng

Thường sau khi mua hàng thì thông tin của các đơn hàng sẽ được website lưu p1ữ lại để khách hàng có thê dùng những thông tin trông đơn đặt hàng ấy đề kiểm tra, đối

9

chiếu lại khi nhận hàng Bên cạnh đó cũng giúp admin có thế đễ dảng quản lý các đơn dat hang dé sau nay có thể đối chiếu để khách hàng không bị mắt quyền lợi của họ

2.2.9 Quy trình quản lÿ sản phẩm

Một website bán hàng thì sẽ có rất nhiều sản phẩm, đối với website figure cing tương tự như vậy Quy trình quản lý này có thể giúp cho admin quản lý tất cả các sản

phẩm trong website Admin có thê thêm một sản phẩm nảo đó vảo trong danh sách sản

pham, admin có thể xóa di một sản phâm lỗi nào đó hoặc có thể sửa lại những sản phẩm có vấn đè

2.3 Cơ cấu tô chức websife

Cơ cấu tô chức của website như sau:

+ Admin quan lý các hoạt động chung của website

+ Khách hàng là người truy cập website và thao tác với các chức năng cơ bản như:

Đăng nhập, đăng kí, mua hàng, tìm kiếm sản phẩm

10

CHUONG 3 NGHIEN CUU TONG QUAN

3.1 Ngôn ngữ thiết kế website

3.1.1 Ngôn ngữ lập trình PHP

PHP: Hypertext Preprocessor, thường được viết tắt thành PHP, là một ngôn ngữ lập trình kịch bản hay một loại mã lệnh chủ yếu được dùng đề phát triển các ứng dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tông quát Nó rất thích hợp với web

và có thế dễ dàng nhúng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh, nhỏ gọn, cú pháp giống C và Java, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phô biến nhất thế giới

PHP là ngôn ngữ lập trình kịch bản viết cho máy chủ mà được nhúng trong HTML

Nó được tích hợp với một số Database thông đụng nhu MySQL, PostgreSQL, Oracle, Sybase, Informix, va Microsoft SQL Server

Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là

HTML 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng XHTML Hiện nay,

phiên bản mới nhất của ngôn ngữ này là HTML5

Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản — có thé

øõ vào ngay từ những dòng đầu tiên - cho đến những công cụ xuất bản WYSIWYG phức tạp Hypertext là cách mà các trang Web (được thiết kế bằng HTML) được kết nối với nhau Và như thế, đường link có trên trang Web được gọi là Hypertext Như

tên gọi đã nói, HTML là ngôn ngữ đánh dau bang thé (Markup Language), nghĩa là

bạn sử dụng HTML để đánh dẫu một tài liệu text bằng các thẻ (tag) để nói cho trình duyệt Web cách đề câu trúc nó đề hiển thị ra màn hình

Hình 9 : Hình ảnh mình họa HTML 3.1.3 Ngén ngit CSS

CSS là ngôn ngữ tạo phong cách cho trang web — Cascading Style Sheet language

Nó dùng để tạo phong cách và định kiểu cho những yếu tô được viết dưới dạng ngôn ngữ đánh dấu, như là HTML Nó có thể điều khiển định dạng của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiến bố cục, màu sắc, và font chữ

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản HTML không được thiết kế để gắn tag để giúp định dạng trang web Ban chỉ có thề dùng nó đê “đánh dâu” lên site

12

Những tap như <font> được ra mắt trong HTML phiên bản 3.2, nó gây rất nhiều

rắc rồi cho lập trình viên Vì website có nhiều font khác nhau, màu nền và phong cách khác nhau Đề viết lại code cho trang web là cả một quá trình dài, cực nhọc Vì vậy, CSS được tạo bởi W3C la dé giải quyết vấn đề nảy

13

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo

ra một mẫu webiste hoản chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ réng , cac designer có thé sang tao nhiéu san phâm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao dién website

Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet

Explorer, Edge, Safari và Opera)

Get started | Download

Hình 12: Bootstrap 3.1.6 Thi viện jQuery

jQuery là thư viện được viết từ JavaScript, jQuery giúp xây dựng các chức năng bang Javascript dé dàng, nhanh và giàu tính năng hơn

jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết với

JavaScript Với JQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn jQuery cung cấp các API giúp việc duyệt tải liệu HTML, hoạt ảnh, xử lý sự kiện

va thao tac AJAX don giản hơn JQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau

Hình 13 : Thư viện jQuery 3.1.7 Laravel Framework

Laravel là một PHP framework ma ngu6én mo va miễn phí, được phát triển bởi

Taylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếm trúc model-view-controller (MVC) Những tính năng nỗi bật của Laravel bao gồm cú pháp dễ hiểu - rõ ràng , một hệ thống đóng gói modular và quản lý gói phụ thuộc, nhiều cách khác nhau đề truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiện ích khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

15

Hình 15 : Cơ sở dữ liệu SỢL

3.2 Ngôn ngữ thiết kế hệ thống UML

UML (Unified Modeling Language) là ngôn ngữ dành cho việc đặc tả, hình dung, xây dựng và làm tài liệu của các hệ thống phan mém

UML tao co hội để viết thiết kế hệ thống, bao gồm những khái niệm như tiến trình

nghiệp vụ và các chức năng của hệ thống

Cách xây dựng các mô hình tron UML phù hợp mô tả các hệ thống thông tin cả về cau trúc cũng như hoạt động Cách tiếp cận theo mô hình của UML giúp ích rất nhiều cho những người thiết kế và thực hiện hệ thống thông tin cũng như những người sử dụng nó; tạo nên một cái nhìn bao quát va đầy đủ về hệ thống thông tin dự định xây

16

dựng Cách nhìn bao quát này giúp nắm bắt trọn vẹn các yêu cầu của người dùng: phục

vụ từ giai đoạn phân tích đến việc thiết kế, thâm định và kiểm tra sản phâm ứng dụng công nghệ thông tin

UML sử dụng một hệ thống ký hiệu thống nhất biểu diễn các Phần tử mô hình (model elements) Tập hợp các phần tử mô hỉnh tạo thành các Sơ đồ UML (UML diagrams) Co cac loai so dé UML chu yéu sau:

- So dé I6p (Class Diagram)

- So dé déi trong (Object Diagram)

- So dé tinh huéng sir dung (Use Cases Diagram)

- Sơ đồ trình tu (Sequence Diagram)

- Sơ đồ cộng tac (Collaboration Diagram hay la Composite Structure Diagram)

- So dé trang thai (State Machine Diagram)

- So dé thanh phan (Component Diagram)

- So dé hoat dong (Activity Diagram)

- So dé trién khai (Deployment Diagram)

- So dé g6i (Package Diagram)

- Sơ đề liên lạc (Communication Diagram)

- Sơ đồ tương tác (Interaction Overview Diagram - UML 2.0)

- So dé phéi hop thoi gian (Timing Diagram - UML 2.0)

UNIFIED MODELING LANGUAGE

Hình 16 : Ngôn ngữ thiết ké hé thong UML

CHUONG 4 PHAN TiCH VA THIET KE HE THONG

4.1 Biéu dé Use case

4.1.1 Biéu do Use Case tong thé

NES

N

oor ving ear ny min vòng quay may man

CC Đánh giá sản phidm > giá sản

CC Đánh giá sản phẩm _—`

Hình 19 : Tiễn trình đăng nhập

4.1.3 Biéu do phan ré cho Use Case Admin

4.1.3.1 Tién trinh quan lp san pham

NO «include» _.-” 7

«include» xs

—Cainifain phim >

Quan iy sin phim ly san pham dt

> Tim kiém san pham

N include»

«include»

Hình 20: Tiến trình quản lý sản phẩm

19

4.1.3.2 Tién trinh quan lp tai khoan

Quan ly tai khoan

In, GI=ZT”L ˆ 3 VÀ tài khoa

ae ` «include» Liệt kê tài khoản

“7 ^” «include» N

Nâng cấp thành admin `

Tìm kiếm tài khoản

Hình 21 : Tiễn trình quản lý tài khoản

4.1.3.3 Tiên trình quản lÿ đơn đặt hàng

Xóa đơn đặt hàng Duyệt đơn đặt hàng

«include» ,⁄ˆ

«include» ẢNG a Quan ly don dat hang

a= «include»

Xem thông tin đơn đặt hàng

Hình 22 : Tién trình quản {ý đơn đặt hàng

20

4.1.3.5 Tiên trinh quan lp voucher

—

Hình 23 : Tiễn trình quản lý voucher

4.1.4 Đặc tả một số se Case

4.1.4.1, Use Case Dang nhap

- Tóm tắt: Use case này cho phép người dùng (Khách hàng, admin) đăng nhập vào hệ thống

- Tiền điều kiện: Người dùng đã được tạo tài khoản và có mật khẩu đề đăng nhập

- Luong sự kiện chính:

1 Trên giao diện chính người dùng chọn biểu tượng người dùng

2 Hệ thống hiển thị giao diện đăng nhập, yêu cầu người dùng nhập tài khoản và mật khâu

3 Người dùng nhập tài khoản, mật khẩu kích chọn đăng nhập

4 Hệ thống tiếp nhận thông tin, kiểm tra xem tải khoản và mật khâu có đúng hay

1 Hệ thông kết nỗi cơ sở dữ liệu để kiểm tra thông tin, quá trình kết nối không

thành công, không thực hiện được

2 Hiển thị thông báo lỗi

- Hậu điều kiện: Người dùng đăng nhập vào hệ thống

- Actor: Khach hang, admin

4.1.4.2 Use Case ding ki

-Tóm tắt: Use Case này cho phép người dùng đăng ký tài khoản

-Tiến điều kiện: Không có

-Luéng sự kiện chính:

1 Trên giao diện chính, người dùng chọn vào biểu tượng người dùng

2 Hệ thông hiển thị giao diện đăng nhập

3 Trên ø1ao diện đăng nhập, người dùng chọn mục Bạn chưa có tài khoản?

4 Hệ thống hiến thị giao điện đăng ký

5 Người dùng nhập các thông tin cần thiết vào các ô thông tin, sau đó chọn

Đăng ký

6 Hệ thống tiếp nhận thông tin, kiểm tra tính hợp lệ của các thông tin

22

7 Nếu hợp lệ thì hệ thống lưu lại thông tin đăng ký của người dùng và thông báo đăng ký thành công

§ Kết thúc Use Case -Luéng sự kiện rẽ nhánh:

hoặc Facebook Account, chọn mục Google hoặc Facebook

Hệ thống tiếp nhận thông tin và kiểm tra tính hợp lí của thông tin Hiển thị

trang chu của trang web Kết thúc Use Case

Trên giao diện đăng kí, người dùng không muốn tiếp tục đăng ký, chọn Quay lại trang đăng nhập để quay về trang đăng nhập

Kết thúc Use Case

Hệ thông kiểm tra thông tin được người đùng nhập vào không đúng yêu

cầu hoặc trùng khớp với tài khoản đã đăng kí

Hệ thống hiến thị thông báo nhập lại thông tin

Hệ thống kết nối cơ sở dữ liệu để kiểm tra thông tin có phù hợp với thồn tin trong cơ sở đữ liệu hay không, quá trình kết nỗi không thành công, không thực hiện được

Hiển thị thông báo lỗi

-Hậu điều kiện: 1 người dùng được cấp tài khoản vào hệ thống

-Actor: Khách hàng

4.1.4.3 Use Case tìm kiếm sản phẩm

- Tóm tắt: Use case này cho phép khách hàng tìm kiếm sản phâm trên website

- Tiên điều kiện: không có

- Luong sự kiện chính:

1 Trén giao điện website khách hàng nhập thông tín muốn tìm kiếm vào mục tìm kiêm

23

2 Hệ thống kiếm tra thông tin nhập vào có trong CSDL hay không

3 Nếu thông tin hợp lệ thì hệ thống sẽ hiển thị giao điện có chứa thông tin người dùng cần tìm

1 Nếu thông tin người dùng cần tìm không có trong CSDL, hoặc không hợp lệ thì

hệ thống kết nối không thành công

2 Hién thị thông báo lỗi

- Hậu điều kiện: Điều này giúp cho khách hàng đễ dàng hơn trong việc tìm kiếm các sản phẩm mà mình muốn từ đó tiết kiệm thời gian của khách hàng

- Actor: Khách hàng, admin

4.1.4.4 Use Case đúnh giá sản phẩm

- Tóm tắt: Use case này cho phép khách hàng đánh giá sản pham ma ho cam thay hai

lòng hoặc không hài lòng sau khi mua

- Tiền điều kiện:

+ Khách hàng đăng nhập vào hệ thông + Khách hàng đã mua sản phẩm mà họ chuẩn bị đánh giá

- Hậu điều kiện: Điểm đánh giá được cập nhật

- Actor: Khách hàng, admin

- Luong sự kiện chính:

1 Trên giao diện chí tiết sản phẩm khách hàng chọn đánh giá từ 1 đến 5 sao

2 Hệ thống kiểm tra và tiếp nhận số lượng sao đánh giá sau đó tính toán lại

điểm đánh giá của sản phẩm

3 Cập nhật điểm đánh giá của sản phâm

4 Kết thúc Use case

- Luông sự kiện rẽ nhánh:

24

+ Luong 1:

1 Trén giao dién xem phim người xem không muốn đánh giá thì lướt bỏ qua

2 Kết thúc Use case + Luỗng 2:

1 Nếu người dùng chưa đăng nhập hoặc đã đăng nhập nhưng chưa mua sản

phâm mà họ đánh giá thì hiến thị ra thông báo lỗi

2 Két thuc Use case 4.1.4.5 Use Case thêm sản phẩm vào giỏ hàng

- Tóm tắt: Use case này cho phép khách hàng thêm một sản phẩm mà họ quan tâm hoặc muốn mua vào giỏ hàng dé có thê mua một lúc nào đó

- Tiền điều kiện: Không có

- Hậu điều kiện: Sản phẩm được thêm thành công vào giỏ hàng

- Actor: Khách hàng, admin

- Luong sự kiện chính:

1 Trên giao diện sản phâm khách hàng tìm kiếm và lựa chọn sản phâm mà

họ muốn thêm vảo giỏ hàng

2 Hệ thống kiểm tra và tiễn hành thêm mới vào giỏ hàng nêu như sản phâm

đó chưa tổn tại trong gió hàng hoặc là nếu như sản phâm đã tồn tại trong giỏ hàng thì tiến hành tăng số lượng lên

3 Sản phâm được thêm vào gió hàng

4 Két thuc Use case

- Luong sự kiện rẽ nhánh:

+ Luong 1:

1 Trên giao diện khách hàng không muốn thêm sản phẩm thì lướt bỏ qua

2 Kếtthúc Use case 4.1.4.6 Use Case thanh toán

- Tom tat: Use case nay cho phép khách hàng thành toán tất cả sản phâm trong giỏ hàng mà họ đã lựa chọn

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

- Luong sự kiện chính:

1 Trén giao dién trang chu khach hang chọn vào g1ỏ hàng và chọn thanh toán

25

2 Khach hang chọn hình thức thanh toán

3 Khách hàng nhập các thông tin mà phương thức thanh toán yêu cầu hoặc là quét

mã QR nếu như khách hàng chọn phương thức quét mã

4 Hé thong sẽ tự động gửi thông tin nhận được từ khách hàng đến ngân hàng hoặc bên cung cấp dịch vụ thanh toán mà website đã liên kết Thông tin sẽ được chứng thực và thông báo trả về hệ thống

Két thuc Use case

- Hau diéu kién: Chuyén dén trang chi tiết hóa đơn sau khi thanh toán

- Actor: Khách hàng, Ngân hàng,các nhà cung cấp dịch vụ thanh toán

4.1.4.7 Use Case bình luận

-Tóm tắt: Use Case nảy cho phép người dùng bình luận trong website

-Tiền điều kiện: Người dùng được cấp tài khoản và có mật khâu đăng nhập vào hệ thống

-Luéng sự kiện chính:

1 Trên trang giao điện sau khi đăng nhập người dùng chọn mục Blog dé mở trang Blog hoặc trang sản phẩm

2 Hệ thống hiển thị giao diện Blogs hoặc trang sản phẩm

3 Người dùng chọn đọc một bài viết bất kì mà người dùng muốn đọc hoặc là một sản phẩm nào đó mà khách hàng muốn xem

4 Hệ thống hiển thị bài viết đã được người dùng chọn hoặc hiển thị chỉ tiết sản phẩm

26

5 Người dùng viết vào ô nhập bình luận ở cuối trang Chon muc Binh luan

Hé thong tiếp nhận, lưu vào cơ sở đữ liệu và hiến thị bình luận ở vùng

2 Hién thi théng bao lỗi

-Hậu điều kiện: Bình luận được hiễn thị trên vùng bình luận

-Actor: Khách hàng,admm

4.1.4.8 Use Case thém blog

-Tóm tắt: Use Case nảy cho phép người dùng thêm bài viết vào trang Blog

-Tiền điều kiện: Người dùng đã được tạo tải khoản và có mật khâu đăng nhập vào hệ thống

-Luéng sự kiện chính:

1 Trên trang giao điện sau khi đăng nhập người dùng chọn mục Blog dé mở trang Blog

2 Hé thống hiển thi giao dién Blogs

3 Người dùng bấm vào nút thêm Blog

4 Hệ thống hiển thị giao diện thêm Blog

5 Người dùng nhập bài viết, đính kèm phương tiện đi kè, sau đó chọn post

6 Hệ thống tiếp nhận thông tin, cơ sở đữ liệu và hiển thị bài viết lên trang Blog

7 Két thuc Use Case

-Luéng sự kiện rẽ nhánh:

+Luồng l1:

27