Khóa luận tốt nghiệp xây dựng website kinh doanh Đồ công nghệ nch shop

: -_ Xác định yêu cầu ,thu thập thông tin và các đữ liệu liên quan đến thiết kế website - Phan tich chi tiết các yêu cầu đối tượng, yêu cầu, chức năng, quy trình, v.v - _ Phân tích và th

TRƯỜNG ĐẠI HỌC NGUYÊN TÁT THÀNH

NGUYEN TAT THANH

KHOA LUAN TOT NGHIEP

XAY DUNG WEBSITE KINH DOANH DO

CONG NGHE NCH SHOP

Giảng viên hướng dẫn: ĐẶNG NHƯ PHÚ

Sinh viên thực hiện: NGUYÊN CÔNG HẬU

TRƯỜNG ĐẠI HỌC NGUYÊN TÁT THÀNH

NGUYEN TAT THANH

KHÓA LUẬN TÓT NGHIỆP

XÂY DỰNG WEBSITE KINH DOANH ĐỎ

CÔNG NGHỆ NCH SHOP

Giảng viên hướng dẫn: ĐẶNG NHƯ PHÚ

Sinh viên thực hiện : NGUYÊN CÔNG HẬU

LỜI CÁM ƠN

Trong lời đầu tiên em muốn gửi lời cảm ơn và biết ơn chân thành nhất của mình tới tắt

cả những người đã hỗ trợ, giúp đỡ em về kiến thức và tính than trong qua trình thực hiện cuốn báo cáo khóa luận tốt nghiệp

Em xin chân thành cảm ơn thầy hướng dẫn ThS Đặng Như Phú giảng viên khoa Công Nghệ Thông Tin của trường ĐH Nguyễn Tất Thành, người đã trực tiếp hướng dẫn, đóng góp ý kiến, nhận xét và giúp đỡ em trong suốt quá trình học tập Thầy còn

động viên tinh thần và ân cần nhắc nhở tiền độ đề em thực hiện xong báo cáo khóa luận

tốt nghiệp

Cuối cùng em xin chân thành cảm ơn Ban giám hiệu nhà trường, các thầy cô trong khoa Công Nghệ Thông Tin trường Đại Học Nguyễn Tắt Thành, thành phố Hồ Chí Minh đã giảng dạy, hướng dẫn, trang bị kiến thức cho em trong suốt quá trình học đại học, từ các kiên thức cơ bản đến vân đề chuyên sâu

UL

NHAN XET CUA GIANG VIEN HUONG DAN

1 Hinh thức (Bồ cục, trình bày, lỗi, các mục, hình, bảng, công thức, phụ lục, )

2 Nội dung (mục tiêu, phương pháp, kết quả, sao chép, các chương, tài liệu )

3 KẾt luận + 222 2211122111221 T1 1211 rre

TPHCM, Ngày thang nam 2022

Giáo viên hướng dẫn (Ký tên,ghi rõ họ tên)

IV

NHAN XET CUA GIANG VIEN PHAN BIEN

1 Hinh thức (Bồ cục, trình bày, lỗi, các mục, hình, bảng, công thức, phụ lục, )

TPHCM, Ngày tháng năm 20

Giáo viên phản biện (Ký tên,ghi rõ họ tên)

MUC LUC

CHƯƠNG I: TỎNG QUAN ĐỀ TÀI -.222-:222222222222222231112211221112121212 1,1 cee 1

I Ly do chon dé tabe.cc.cecceccccecccccsccscsscssesscsessesscereevsecsevsrseesevsussnsevsissesevsssesevsieseseses 1

2 Mục tiêu nghiên cỨu - - c1 222121211121 111211 1211112111211 1 0111181128111 1kg 1

3 Pham vi va déi tượng nghiên CỨU - c1 0122212121112 1112112 11118111811 rrờy 1

CHƯƠNG 2: CƠ SỞ LÝ THUYÉT - 222+2222S2+2222111222211122221112.17111711 11c 3

1 Tổng quan về thương mại điện tử - - s21 EE15117111 21171211 1 1 re 3 a) Thương mại điện tử là g1 ? - 1 2122211221111 111 1111811111111 118111811 ey 3 b) Các hình thức của Thương mại điện tử là gì? - 2 2c c2 se re 3 c) Ưu điểm của thương mại điện tử 2 s9 S TỰ 2E E12 Hường 4

đ) Nhược điểm của thương mại điện tỬ L2 2.12211222111221 1122 Hay 4

2 Tổng quan về ReactÏs 5 s2 1111121121111 117111 121110121 tr HH rêu 5

a) Giới thiệu 11 1n ;:;:(: 5

b) Tính năng RÑeact - 0 2202121112111 121 2211121151101 can ng tr He 5

đ) Virtual DOM ccc ccc ccesccnscecnsecessecssecsscsssecssecessecssesessssssesnssenseenteeeess 6

e) Ưu điểm của Reaet - c1 1121112121111 12 tt HH HH ru no 6

3 Tông quan về Nođe]s - 5s c1 1 E21111E1111111 112111 11.11 1111 1 ngu 6 A) NodeJS là gì? c2 nnn SH HH 5111111111 KH KH KH nh 6 b) Ưu và nhược điểm của Nođe]S - s21 E11 11211 1121 1 1 HH Hàn ưu 7

c) Đặc điểm của NodeJS - 1 ST T211 E15 HH HH Hee 7

4 — Tổng quan về EXPRESS - 5 ST HH n1 H111 11111 tre rưeu 8

5 Tổng quan về MONGODB 5s 1 TỰ 1121121121812 1 111gr ru 8

a) Định ngÌhĩa 0 L1 001022122211 121 1152115 1118111011111 11011 50111 Hx 1kg ha 8 b) Cách thức hoạt động của MongolDB 1 T21 12 1s HH ghe re 9

c) Ưu điểm của MongoDB - - - s1 1 1211211210 1 11T HH Hye 9

đ) Nhược điểm của MongoDB -ss s11 21211 11 1E 1H trường 9

6 Tông quan về R€dx s11 E1 1112111111111 2 11 1211112111 1 na 10

LÊ N›t>°0).GÌ:.8`HHđŨ 10

b) Cau tao ctta REdUX cccccccccccccecscscscsscsssscsessssseseseseseseresesesesesevesesevevsvevevevevevevaes 10 c) Cách thức hoạt động của Redux - .L 2221222212211 1 12222112 re rớy 11

CHƯƠNG 3: PHAN TÍCH VÀ THIET KE HE THONG occcccccccecececesececsececsescseseeees 12

3.1 Lap ké hoach trién Khai c.ccccccccccccecccscssscscsesesesssesesesesesesesevesevevsvevevevevevevavevevsees 12

a) Xác định các yêu cau hé thong c.ccccceccccccsscsceseesesseseesesecsesescensvsevevsvsrseeeeeees 12

b) Mô hình đề xuất - S211 1 E12111121121111 11211 1 11t He 12 3.2 Phân tích hệ thông website bán hàng thiết bị điện tử nen 12

3.5 Thiết kế CSDL, - 22 2221222111222112221 10.11111211 re 23

a) Mô tả chỉ tiết các lớp và kiểu đữ liệu 5- 5 St 2E tt rcr ng 23

CHƯƠNG 4: THỰC NGHIỆM -L- 2 S2 2221212121111121212111221222121222 va 25

I Mô tả hệ thống c Sàn HH1 Hee 25

2 Giao diện trang chủ - c1 222121111211 1211 121111511121 1111 1118112011111 501 111k xky 25

3 Giao diện trưng bày sản phẩm - 5 St E2 E121 11 122111 8 nen re 27

4 Giao diện chỉ tiết sản pham " 29

5 Giao dién reviews san pham — 31

6 Chức năng tim kiém san phame c.cccccccceccscescesesscsessesecsesstssvsvsseevsvsreevecsees 32

7 Giao diện mua hàng và giỏ hàng 0 0 211212121 2121111 111211281111 re 33

8 Giao dién thanh toan online ccc cccccccceseeseensssettscececeecececceseteeentaaaaecs 35

9 Giao diện xem lai chi tiết dom hang cccccccccccccscecsesessessesvesessvseseevsseeeeeees 35

10 Giao diện đăng ký, đăng nhập Q22 10112222 11221152 Hye 37

11 Giao diện thông tim liên hệ G2 1221121212221 1 1111152115 1111111111111 38

12 Giao điện ContaCỂ LG Q01 20 111 TT ng tk ng g3 5g 40

13 Giao diện trang f†In tỨC . L2 1222111 11112122121 1118111211101 11 181118111111 rrườy 42

I Nt loài uốốẽaẽiiđđủùỤẶỤẶÁ 43

15 Giao diện quản lý danh mục 2c 2 2222212111211 1 1212211115112 181k 45

vil

16 Giao diện trang quản lý sản phẩm - 2 SE 2E 2112121111122 8 1e rre 46

17 Giao diện quản lý đơn đặt hàng Q2 12H s2 He he 48

18 Giao diện quản lý danh sách khách hàng 2 222 1221222222 rerre 50

19 Giao diện quản lý LOBO - 2 2 120122211121 1111 1112112 1118112011111 xu 50

20 Giao diện chức năng quan ly banner ccc 2222222112211 112 tre 31

21 Giao diện quản Ìý tin te cece cece cence cccseceeceeeccsereeestseenetteeenteeees 52

22 Setup api cho hệ thống Sàn 2E 1111 11212211122 1 1g rau 33

23 Thực nghiệm và vận hành 0 2211221121111 1115125111511 1 118111111 key 55 a) — Thực nghiỆm L 22c 1212121212111 1112112011181 18111811 khe re 55

I3 56

;sx0009100021377 57

1 Kết quả đạt được 0101121111 21221211111 111211201111 511 1011101111511 k1 key 57

2 Huréng phat trite ccc cecccccscsececesesscssesvescsecsssnsevsessseevsisevevseseveveesetevevseees 57

vill

DANH MUC BANG HINH

Hình 1: Sơ đồ DFD quán lý bán hàng 2 55-225 2S 221 2122712212212 14 Hình 2: Use Case tơng quát - 5 1t 2 1211111111111 11 11211 1201p ngưng 14 Hình 3:Use Case dang ky , đăng nhập 0 0 2211212112 111 1211121118 1tr re 15

Hình 5: Use Case mua sản phẩm 1 S9 E2 EE12112121121121 1110121111 16 Hinh 6: Use Case quan ly sản phẩm -.- S1 E1 EE 1E E11 1 1112181 trưng 16 Hình 7: Giao diện trang chủ - c1 2121112211211 1511150115111 181151111 nườ 25 Hình §: Giao diện menu chưa đăng nhập - 0 0 222C 1222112 112 222 tre 26 Hình 9: Giao diện menu chưa đăng nhập - 0 0 222112211122 1122222 tre 26

Hinh 10: GIao diện banner 231 TS 1 g1 tk g0 5511k kkvy 27

Hình I1: Giao điện trưng bày sản phẩm - - SE 1121121 11t HH re 28 Hình 12: Giao điện sản phẩm 5 S1 SE E1 1121111 11 121111 111 11g run 29 Hình 13: Giao điện chỉ tiết sản phẩm - 2- S1 2 1E E211 1121021 rerreg 29

Hình 14: Giao điện chỉ tiết sản phẩm hết hàng 5 SE EE 2122212122 eerrk 30 Hình 15: Giao điện zoom ảnh sản phẩm - 5 - S1 S1 EEE12E121E212112111211 2121 tre 30 Hình 16: Giao điện reviews sản phẩm 5c St SE 1212211112121 21.1111 8 ru 31

li: NI Gv 00 i0ìnzađiiiiii3ŸẢẢẲẲẢŸẢŸẢẲẢ 31

Hình 18: Giao diện thanh tìm kiếm 55c: 2222 HH HH re 32

Hình 19: Danh mục sản phẩm - 2 5 1 9 E1 E712 1511212111121 2 2112811 ườn 32

Hình 20: GIao diện sản phẩm lọc theo danh Imục - - L c2 S222 1v SE nkrkksky 33

Hình 21: Giao diện mua hàng và g1ỏ hàng L0 2221212111121 122 1 xe 33 Hình 22: Giao diện hĩa đơn mua hàng L2 22 1211122211211 15 11111811112 tre 34

Hình 23: Giao diện thanh tộn - LH S999 91901111 S S1 19g 511kg 34

Hình 24: Giao diện thanh tốn Paypal 121122121 211151152211 21218111 ey 35 Hình 25: Giao diện thơng tin trạng thái đơn hàng 2 2c 2222122222 tsrerke2 35 Hình 26: Giao diện danh sách đơn hàng 0 1221122111211 1211222282 re 36 Hình 27: Giao diện đăng ký Q00 HT 1 112 11 110220111181 10111 111k hườ 37

Hình 28: Giao diện đăng nhập -L Q0 0 2222111211121 1157225111 ghe hở 38

Hình 29: Giao diện thông tin người dùng 0 1011211121 112212122 1111k 38

Hình 30: Giao diện thông tin liên hệ 2L 0 22212111 1222221 111211151811 erườ 39 Hình 31: Giao diện Contact ccc ceeeeccscscceccccccccevseceecstsettetsceeeceecececceseeccececeeeuseunnes 40 Hinh 32: Giao dién nhan mail cece eeecesesscssccccccecccccceseeecentncacacccceseseseesettnteeens 4I

Hình 33:Giao diện chat messagỹe - 00 0211021122112 11101111 * khe rhườy 41

Hình 34: GIao diện tin tỨC LH 0020991 2 5 5111 HT ng vu cay cv ky 42

Hình 35: Giao điện chỉ tiết tin tức -c:52c 222 tt HH ghe ng 42

Hình 36: Giao diện đăng nhập admin Q22 122112121221 1221 1151151122155 tre 43 Hình 37: Giao diện trang chủ adimm - S0 2221212111211 11211221 1118111811111 rrườy 44 Hình 38: Giao diện thông báo đơn đặt hàng L0 1 1222 2n HH Hye 44

Hình 39: Giao điện thống kê ST TS 12 1211221212121 1E rryg 44

Hình 40: Giao điện thống kê sản phẩm, doanh thu - 5-5 SE SE SE eEsrrxrei 45 Hình 4l: Giao diện quản lý danh mục L2 2.21221122211211 15 11118211112 tre 45

Hình 42: Giao điện quản lý sản phẩm 5-5 S1 1E 2111211218711 1E rrrree 46 Hình 43: Giao điện thêm sản phẩm 5 1S SE EEE121111 12111 1111 1 11g re 47

Hình 44: Giao điện update sản phẩm - 2 SE EEE1E11212712 1 1.2 111tr rrrg 47 Hình 45: Giao diện danh sách đơn hàng 0 1221122111211 11222282 re 48

Hình 46: Giao điện chỉ tiết đơn hàng - 2 ST E1 1E112111121121121 21.121 EttHrrre 49

Hình 47: Giao diện quản lý khách hàng 2 0 0 2122111221112 212 21151121 ky 50 Hình 48: Giao diện quản ly Ïogo L2 1211122121 112511511 1151125 11k rườ 31 Hình 49: Giao điện quản lý banner 1 22 1211221121111 115118111 1 re rườ 31 Hình 50: Giao điện update banner L1 2122211222111 1112 115211511111 2 ky 52

Hinh 51: Giao dién thém bammner cece e cece cecceeccccccecccecceeeececennccccccccccesseeseenttteeenees 52

Hình 52: Giao mue quan ly tin te - 1c 2222221122115 1151111511511 1111 8 ke nườ 33 0x08) /0o 2,210 a 54

ki HIEU CAC CUM TU VIET TAT

TRUONG DAI HOC NGUYEN TAT CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

THANH Độc Lập — Tự Do - Hạnh Phúc

KHOA CÔNG NGHỆ THÔNG TIN good

NHIEM VU KHOA LUAN TOT NGHIEP

HO VA TEN : NGUYEN CONG HAU MSSV: 1911549130

CHUYÊN NGÀNH : Kỹ Thuật Phần Mềm LỚP : I9DTHIB

1 Tên đề tài: Xây đựng website kinh đoanh đồ công nghệ NCH Shop

2 Giảng viên hướng dẫn: Th§.Đặng Như Phú

3 Nhiệm vụ / nội dung đề tài (mô tả chỉ tiết nội dung, yêu cầu, phương pháp ) :

-_ Xác định yêu cầu ,thu thập thông tin và các đữ liệu liên quan đến thiết kế website

- Phan tich chi tiết các yêu cầu (đối tượng, yêu cầu, chức năng, quy trình, v.v)

- _ Phân tích và thiết kế các mô hình (mô hình hệ thống, mô hình use-case, mô hình

lớp, mô hình dữ liệu, v.v)

-_ Xây dựng các chức năng cơ bản của một website ban hang

4 Thời gian thực hiện từ: 16/11/2022 đến: 02/01/2023

Nội dung và yêu cầu đồ án tốt nghiệp đã được thông qua Bộ môn

Ngày 05 tháng 01 năm 2023

TRƯỞNG BỘ MÔN GIÁO VIÊN HƯỚNG DẪN

(Ky và ghi rõ họ tên) (Ký và ghi rõ họ tên)

Xil

CHUONG 1: TONG QUAN DE TAI

1 Ly do chon dé tai

Công nghệ thông tin ngày nay đã và đang đóng một vai trò rat quan trọng trong

xã hội, giúp con người làm việc với mức độ chính xác cao, quán lý và tô chức công việc đạt hiệu quả, cũng như thông tin được phố biến và cập nhật nhanh chóng, chính xác

So với việc kinh doanh truyền thông thì TMDT chỉ phí thấp hơn, hiệu quả cao

hơn Hơn thế nữa, với lợi thế của công nghệ Internet nên việc truyền tái thông

tin sản phẩm nhanh chóng, thuận tiện Với những lợi ích to lớn mà CNTT mang

lại cho việc kinh doanh hiện nay.Nên em quyết định xây dựng một website bán

hàng kinh doanh thiết bị điện tử Với mong muốn giúp ích trong việc kinh doanh

mở rộng phạm vi kinh doanh và kiếm thêm thu nhập nhiều hơn trên môi trường internet Ngoài ra, việc xây đựng website còn giúp quảng bá và đưa sản phẩm

đến mọi đối tượng khách hàng ở khắp moi noi

Thương mại điện tử ở Việt Nam là một thị trường rất phát triển đầy tiềm

năng.Chính vì các vấn đề trên em quyết định đề xuất đề tài với tên: “Xây dựng Website kinh doanh đồ công nghệ NCH Shop”

2 Mục tiêu nghiên cứu

e©_ Giúp nhà kinh doanh: các cá nhân, doanh nghiệp muốn kinh doanh thương

mại điện tử

® Mở rộng thị trường kinh doanh

e Tang doanh thu

e - Quản lý sản phâm chính xác và hiệu quả hơn

® - Quản ly khách hàng nhanh chóng chính xác

© - Giúp cho khách hàng: những người có nhu cầu mua sắm trực tuyn

« Tiếp cận được hinh thức mua hàng mới

® - Giảm được thời gian và chi phí khi mua hàng

3 Phạm vi và đối tượng nghiên cứu

Phạm vi nghiên cứu đề tài:

Về mặt hoạt động thực tiễn: Tìm hiểu và khảo sát thực tế cách thức hoạt

động và quản lý của các trang web thương mại điện tử

Lý thuyết:

Tìm hiểu kỹ thuật và cách thức hoạt động của một website thương mai điện

tử

Tìm hiểu cách thức hoạt dong cua client-server

Lap trinh: Str dung NodeJS Express Mongodb va React dé xay dung website Đối tượng nghiên cứu:

Những khách hàng có nhu cầu mua săm đồ công nghệ online Những cá nhân, doanh nghiệp kinh doanh các mặt hàng công nghệ cần mở rộng thị trường kinh doanh trén internet

CHUONG 2: CO SO LY THUYET

1 Tông quan về thương mại điện tử

a) Thương mại điện tử là gi ?

Thương mại điện tử, hay còn gọi là e-commerce, ecom hay EC là sự mua bán sản phâm dịch vụ trên các hệ thống điện tử như Internet và các mạng máy tính Theo Tô chức Thương mại thê giới (WTO), “Thương mại điện tử bao gồm việc sản xuất, quảng cáo, bán hàng và phân phối sản phâm được mua bán và thanh toán trên mạng Internet, nhưng được giao nhận một cách hữu hình, cả các sản phẩm giao nhận cũng như những thông tin số hoá thông qua mạng Internet”

b) Các hình thức của Thương mại điện tử là gì?

Tổng quan về thương mại điện tử, có lẽ hầu hết mọi người đều nghĩ nó chỉ là hình

thức mua bán hàng hóa qua mạng Internet

Tuy nhiên, thị trường thương mại điện tử cũng được phân thành các hình thức khác

nhau phụ thuộc vào đối tượng tham gia Có 6 loại hình thương mại điện tử cơ bản: s* Doanh nghiệp với Doanh nghiệp (B2B)

Thương mại điện tử B2B đề cập đến tất cá các giao dịch điện tử của hàng hóa được

thực hiện giữa hai công ty Loại thương mại điện tử này thường giải thích mối quan

hệ giữa các nhà sản xuất sản phẩm và nhà phân phối sản phâm đến tay người tiêu dùng

% Doanh nghiệp với Khách hàng (B2C)

Đây là hình thức thương mại điện tử pho biến nhất, thê hiện mối quan hệ mua bán

giữa doanh nghiệp với người tiêu dùng Mua sắm đưới dạng thương mại điện tử giúp người dùng đễ dàng so sánh giá cũng như xem phản hồi nhận xét của những người dùng trước Đối với công ty, nó cho phép họ hiều biết hơn về khách hàng trên

góc độ cá nhân

s* Khách hàng với Khách hàng (C2C)

Loại thương mại điện tử này bao gồm tắt cả các giao dịch điện tử diễn ra giữa người tiêu dùng Các giao dịch này thường được thực hiện thông qua việc sử dụng các mạng xã hội cá nhân như facebook, Instagram và các trang web sàn thương mại điện tử như tik1, shopee

Khách hàng với Doanh nghiệp (C2B)

Thương mại điện tử C2B diễn ra khi người tiêu dùng cung cấp địch vụ hoặc sản phâm của họ cho các công ty mua hàng Ví dụ như một nhà thiết kế đồ họa chỉnh logo cho một công ty hoặc một nhiếp ảnh gia chụp ảnh cho một trang web thương

mại điện tử

% Doanh nghiệp với chính phủ (B2A)

Hình thức thương mại điện tử này đề cập đến tất cả các giao dịch giữa các công ty

và khu vực hành chính công Loại hình này liên quan đến nhiều dịch vụ, đặc biệt có

thê kế đến như an sinh xã hội, việc làm và các văn bán pháp lý

s* Khách hàng với Chính phủ (C2A)

Một hình thức phổ biến khác là thương mại điện tử C2A, bao gồm tất cả các giao dịch điện tử giữa các cá nhân và khu vực hành chính công Ví dụ điển hình là việc khai và nộp thuế thông qua cổng thông tin điện tử của Cơ quan thuế

c) Ưu điểm của thương mại điện tử

e©- Giảm chỉ phí sản xuất, chỉ phí tìm kiếm khách hàng, chỉ phí bán hàng, chi phí tiếp thị

® - Một nhân viên cùng một lúc có thé giao dich với nhiều khách hàng

e San pham/dich vụ được giới thiệu trên mét Catalogue dién tử phong phú và

được cập nhật thường xuyên

¢ Giup người tiêu dùng và doanh nghiệp giảm đáng kể thời gian và chỉ phí giao dịch Vì việc nhanh chóng thông tin hàng hóa đến người tiêu dùng (mà không phải qua trung gian) có ý nghĩa sống còn trong cạnh tranh kinh doanh

© Tạo điều kiện tìm kiếm các bạn hàng mới, cơ hội kinh doanh mới trên bình

diện trong nước, khu vực và quốc tế

© Kích thích sự phát triển của ngành công nghệ thông tin và đóng vai trò ngày càng lớn trong nền kinh tế Lợi ích này còn có ý nghĩa đặt biệt quan trong đối

với các nước đang phát triển, có thể tạo ra một bước nhảy vọt, tiến kip các

nước phát triển trong một thời gian ngắn nhất

d) Nhược điểm của thương mại điện tử

© - Có thê gặp vấn đề khả năng tương thích của phần mềm / phần cứng

© Chi phi khoi tao: Chi phi dé tạo / xây dựng ứng dụng Thương mại điện tử có

thê rất cao Có thể bị đình trệ trong việc vận hành hệ thống Thương mại điện

tử do lỗi hoặc thiếu sót kinh nghiệm

¢ Sự tin tưởng của người dùng: Người dùng có thê không tin tưởng các trang

web hoặc người bán vô danh

® - Bảo mật / Riêng tư: Khó mà đảm bảo sự bảo mật và sự riêng tư khi giao dịch trực tuyến

® - Khi mua sắm trực tuyến, bạn không thể chạm hoặc cảm nhận sản phẩm bằng các giác quan trên cơ thê

2 Tổng quan về ReactJs

a) Giới thiệu về ReactJs

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, ra mắt vào năm 2013 với mục đích đề xây dựng giao điện người dùng Nó được sử dụng rộng rãi để xây dựng các trang web SPA (Single Page Application) và các ứng đụng trên nền táng di động Nó rất đễ sử dụng và cho phép người dùng có thể tạo các component UI có thê tái sử dụng

Mục đích của việc tạo ra ReactJS là để tạo ra những ứng đụng website hấp dẫn với

tốc độ nhanh và hiệu quả cao với những mã hóa tối thiểu Và mục đích chủ chốt của

ReactlS đó chính là mỗi website khi đã sử dụng ReactJS thì phải chạy thật mượt thật nhanh và có khả năng mở rộng cao và đơn giản thực hiện

b) Tinh nang React

® JSX- JSX là phần mở rộng cú pháp JavaScript Không nhất thiết phải sử dụng JSX trong phát triển React, nhưng nó được khuyến khích

® Components- React là tất cả về các thành phần Bạn cần nghĩ mọi thứ như một thành phần Điều này sẽ giúp bạn duy trì mã khi làm việc trên các dự án quy mô lớn hơn

¢ Unidirectional data flow and Flux- React triển khai luồng dữ liệu một chiều

giúp bạn dễ dàng suy luận về ứng dụng của mình Flux là một mẫu giúp giữ

dữ liệu của bạn không theo hướng

¢ License - React được cấp phép theo Facebook Inc Tài liệu được cấp phép theo CC BY 4.0

c) JSX

Trọng tâm chính của bất kỳ website cơ bản nào đó là những HTML documents Trình duyệt Web đọc những document này đề hiển thị nội dung của website trên

máy tính, tablet, điện thoại của bạn Trong suốt quá trình đó, trình duyệt sẽ tạo ra

một thứ gọi là Document Object Model (DOM) — mét tree dai dién cho cau trúc

website được hiển thị như thế nảo Lập trình viên có thể thêm bất kỳ dynamic

content nao vao nhiing dự án của họ bằng cách sử đụng ngôn ngữ JavaScript dé thay déi cay DOM

JSX (nói ngắn gọn là JavaScript extension) 1a m6t React extension giup chung ta dé dàng thay đôi cây DOM bang cac HTML-style code don gian

d) Virtual DOM

ReactJS đã khởi tạo một thứ gọi la Virtual DOM (DOM ao) Virtual DOM (ban chat của nó theo đúng tên gọi) là bản copy của DOM thật trên trang đó, va ReactJS st dụng bản copy đó đề tìm kiếm đúng phan mà DOM thật cần cập nhật khi bất kỳ một

sự kiện nào đó khiến thành phần trong nó thay đối Với việc cập nhật đúng chỗ như vậy, khỏi phải nói nó tiết kiệm cho chúng ta rất nhiều tài nguyên cũng như thời gian

xử lý

e) Ưu điểm của React

e St dung DOM ảo là một déi tuong JavaScript Điều này sẽ cải thiện hiệu

suất ứng dụng, vì DOM ảo JavaScript nhanh hơn DOM thông thường

© Có thể được sử dụng trên máy khách va máy chủ cũng như với các khuôn

NodeJS 1a m6t méi trudng runtime chay JavaScript da nén tang va co ma ngu6n

mở, được sử dụng đề chạy các ứng dụng web bên ngoài trình duyệt của client Nền

tang nay duoc phat trién boi Ryan Dahl vao nam 2009, được xem là một giải pháp

hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện

IO hướng sự kiện của NodelS xử lý được nhiều yêu cầu đồng thời

NodeIS đáp ứng được những yêu cầu độ chính xác cao về thời gian thực

NodeJS có tốc độ cực nhanh, đáp ứng được dữ liệu “không lồ” của khách

truy trong thời gian ngắn

NodeJS phat trién dựa trên ngôn ngữ lập trình JavaScript và đây là ngôn ngữ lập trình rat dé dé hoc

Có thê chia sẻ cùng một đoạn mã với cả hai phía: máy chủ và máy khách

Npm và các module của NodeJS rất mạnh mẽ và vẫn đang tiếp tục phát triển

Node]S có một cộng đồng hỗ trợ lớn mạnh, có nhiều mã có thê được chia sẻ

Nếu bạn có nhiều lệnh gọi lại liền nhau, khi bạn sử dụng lệnh gọi lại sẽ kết

thúc cùng lúc rất nhiều những lệnh gọi lại long vao nhau khac

Nếu bạn muốn học tốt NodeJS, bat buéc ban phải sử dụng tot J avaScrIpt

trước đó

Với những tác vụ đòi hỏi nhiều CPU, bạn không nên sử dụng Node]S

Nếu web hosting của bạn là hosting dùng chung, bạn sẽ gặp khó khăn trong việc tải lên một ứng dụng Node]S

c) Đặc điểm của NodeJS

Bất đồng bộ và phát sinh sự kiện (Non-blocking and Event Driven): Tất các các APIs của thư viện Node.js đều bất đồng bộ (non-blocking), NodeJS không cần đợi một API trả về đữ liệu Server chuyển sang một API khác sau khi gọi nó và có cơ

7

chế riêng đề gửi thông báo và nhận phản hồi về các hoạt động của Node.js va API

đã gọi

Tốc độ nhanh: Phan core phía đưới được viết gần như toàn bộ bằng C+-+ kết hợp Chrome V§ Engine nên tốc độ xử lý công việc của Node.js cực nhanh, nhưng van

đảm bảo được tính chuẩn xác

Đơn giản — Hiệu năng cao: Node.js sử dụng một mô hình luồng đơn luồng (single thread) và các sự kiện lặp (event-loop) Cơ chế sự kiện cho phép phía Server trả về phản hồi theo non-blocking, đồng thời tăng hiệu quả sử dụng Các luồng đơn cung cấp dịch vụ cho nhiều request hơn hăn Server truyền thống

Không lưu bộ nhớ đệm (non buffer): Nền tảng Node.js không có vùng nhớ đệm, tức không cung cấp khả năng lưu trữ dữ liệu buffer

4 Téng quan ve EXPRESS

Expressjs là một framework được xây dựng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mé dé phat trién web hoặc mobile Expressjs hỗ trợ các method

HTTP va midleware tạo ra API vô cùng mạnh mẽ và dé str dung

Một số chức năng chính của express như:

© - Hỗ trợ phát triển ứng dụng theo mô hinh MVC

¢ Cho phép dinh nghia cac middleware

® - Định nghĩa rõ ràng cac request methods trong route

© - Hỗ trợ mạnh về REST API

® Và vô số chức năng khác

5 Tổng quan về MONGODB

a) Định nghĩa

® MongoDB là một cơ sở đữ liệu mã nguồn mở và là cơ sở đữ liệu NoSQL

hàng đầu, được hàng triệu người sử dụng MongoDB duoc viét bang C++

® Ngoài ra, MongoDB là một cơ sở đữ liệu đa nen tảng, hoạt động trên các

khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng đề dàng

® - Các Collection trong MongoDB có cấu trúc cực kỳ linh hoạt Điều này cho phép dữ liệu không cần thiết phải tuân theo bất kỳ một dạng cấu trúc nào Vì thé, MongoDB có thê lưu trữ những dữ liệu có cầu trúc đa dạng và phức tạp

Dữ liệu trong MongoDB được lưu bằng định dạng kiéu JSON

b) Cách thức hoạt động của MongoDB

MongoDB lưu trữ các đối tượng dữ liệu trong các bộ sư tập (collections) và tài liệu (documents) thay vi cac bang và hàng được sử dụng trong cơ sở dữ liệu quan hệ truyền thống Các bộ sưu tập bao gồm các bộ tài liệu, tương đương với các bảng trong cơ sở dữ liệu quan hệ Các tài liệu bao gồm các cặp giá trị khoá, là đơn vị dữ liệu cơ bản trong MongoDB

Cầu trúc của một tài liệu có thê được thay đôi bằng cách thêm các trường mới hoặc xoá các trường hiện có Các tài liệu có thể xác định khoá chính là mã định danh duy nhất và các giá trị có thể là một loạt các loại dữ liệu, bao gồm các tài liệu

(documents), máng (arrays) và mảng tài liệu (arrays of documents) khác

c) Ưu điểm của MongoDB

® Linh hoạt trong lưu trữ các kích cỡ dữ liệu khác nhau Nhờ chúng được lưu

dưới dạng JSON nên bạn thoái mái chèn bất kỳ thông tin nào tùy theo nhu

cầu sử dụng

e©_ Tiết kiệm thời gian trong việc kiểm tra sự tương thích về cầu trúc khi thêm,

xóa hoặc cập nhật đữ liệu Nhờ MongoDB không có sự ràng buộc trong một khuôn khổ, quy tắc nhất định nào

® Bạn dễ dàng mở rộng hệ thống thông qua việc thêm node vào cluster Cụm các node này đóng vai trò như thư viện chứa các đữ liệu giao tiếp với nhau

e _ Tốc độ truy vấn của MongoDB nhanh hơn so với RDBMS do toàn bộ dữ liệu

truy van đã được ghi đệm lên bộ nhớ RAM Nhờ thé, những lượt truy van

sau sẽ được rút ngắn thời gian vì chủng không cần đọc từ 6 cung

¢ Trường đữ liệu “ ¡d” (đại diện cho giá trị duy nhất trong mỗi document)

được tự động đánh chỉ mục nên hiệu suất luôn đạt mức cao nhất

d) Nhược điểm của MongoDB

e - Vì dữ liệu không bị ràng buộc nên trong quá trình sử dụng, bạn cần cần thận trong mọi thao tác nhằm tránh xảy ra những điều không mong muốn, làm

Redux được ra đời đựa trên nền táng tư tưởng của kiến trúc Flux và ngôn ngữ Elm của Facebook Vì vậy, khi redux kết hợp với React sẽ trở thành một bộ đôi hoàn hảo Mặc dù vậy nhưng redux vẫn có thể kết hợp được với các Framework khác như Backbone, Angular, deku, Falcor,

b) Cau tạo của Redux

¢ Actions: Actions hay con dugc hiéu la cac events No duge xem 1a noi mang những thông tin mà bạn gửi dữ liệu từ ứng dụng đến cửa hàng redux Mỗi thông tin là một object mô tả những gì đã xảy ra Các đữ liệu này có thé 1a tir

sự tương tác của người dùng với ứng dụng, API calls hoặc là từ các form submission

¢ Reducers: Reducers la noi giúp xác định được sự thay đôi của State Nó là

các function nguyên thuỷ có khả năng lây state hién tải của ứng dụng để thực hiện một action và trả về một state hoàn toàn mới Các state đó được lưu trữ như những object và đễ dàng xác nhận được sự thay đổi trong phản hồi của action gửi đến store

10

¢ Store: Store là nơi lưu trạng thái của ứng dụng và là đuy nhất trong một ứng dụng redux bất kỳ nào Nhiệm vụ của store chính là quản lý, access các state được lưu, cho phép truy cập state thông qua Getstate, update state thong qua dispatch va dang ky hoac huy cac listeners thông qua helper methods c) Cách thức hoạt động của Redux

« Nguồn dữ liệu tin cậy duy nhất: Quá trình hoạt động của redux phụ thuộc khá nhiều vào nguồn dữ liệu Các dữ liệu đến từ nhiều nguồn khác nhau như

từ máy chủ ban đầu, thao tác người dùng, từ máy chủ khiến ứng đụng rất

khó có thể kiểm soát hết được Chính vì vậy, vấn đề mà redux đưa ra là tất cả

mọi nguồn dữ liệu cần phải được xử lý, giải quyết và tạo thành một nguồn đữ liệu tin cậy duy nhất

© Trang thai chỉ được phép đọc: Trạng thái của redux tuy chỉ là một đối tượng

⁄ Aatt nhưng nó không được phép thay đôi một cách “trực tiếp" Với redux hay flux

thì chỉ có thể thay đôi được trạng thái của nó khi và chỉ khi xuất hiện một sự

kiện và được chỉ huy chỉ thị Còn nêu không thì việc thay đổi là không được

©_ Thay đổi chỉ bằng hàm thuần túy: Sử dụng redux thì không quá khó Bạn có thê thông qua hàm thuần tuý để thực hiện việc thay đổi trạng thái của ứng

dụng Các sự kiện và trạng thái hiện tại được đưa vào và hàm sẽ trả về trạng

thái tiếp theo

II

CHUONG 3: PHAN TICH VA THIET KE HE THONG

3.1 Lap ké hoach trién khai

a) Xác định các yêu cầu hệ thống

- _ Triển khai và vận hành hệ thống bán hàng qua mạng

- _ Đáp ứng được yêu câu nhiều người truy câp hệ thông cùng I thời điểm

-_ Giao diện thiết kế hai hoa dé sir dung

- Yêu cầu về tính bảo mật thông tin hệ thống

- _ Trang web thiết kế chuẩn SEO dễ tìm kiêm trên internet

- Day đủ các chức năng của một website thương mại điện tử

- _ Hệ thống đễ dàng sử dụng cho khách hàng và dễ dàng quản lý cho doanh nghiệp

b) Mô hình đề xuất

Hệ thong Website bán thiết bị điện tử sẽ triển khai hoạt động trên môi trường

internet Hệ thống website sẽ được thiết kế đề phù hợp chạy tốt trên nhiều dòng

thiết bị khác nhau

Về kỹ thuật sẽ đáp ứng tốc độ truy xuất, xử lý đữ liệu khai thác của khách hàng, bảo đảm về tính bảo mật của hệ thông.Đáp ứng đầy đủ chức năng cơ của website

thương mại điện tử

3.2 Phân tích hệ thống website bán hàng thiết bị điện tử

+ Nhân viên bán hàng: bao gồm tất cả chức năng của khách hàng và một số chức năng riêng là xem thông tin khách hàng , xem danh sách đặt hàng, thêm xóa sửa sản phâm trên hệ thống

12

+ Thủ kho:người quản lý việc nhập xuất của hệ thong

+ Người quản lý : người quản lý về thông tin nhân viên, hàng hóa nhập xuất

> Tác nhân phụ:

+ Ông chủ(boss): Là người gián tiếp điều hành hệ thông qua nhân viên và người bỏ vốn

+ Nhân viên bảo trì, nâng cấp hệ thống: người fix lỗi khi hệ thống gặp vấn đề

trong quá trình hoạt động và nâng cấp hệ thông khi cần thiết

Chức năng xem thông tin chỉ tiết sản phẩm

Chức năng thanh toán

Chức năng xem đánh giá sản phẩm

Chức năng xem lại đơn hàng

> Chức năng hủy đơn hang

s* Chức năng của người quản trị

> Chức năng thêm , xóa,sửa sản phẩm trên hệ thống

> Chức năng kiểm tra thông tin khách hàng

> Chức năng thêm ,sửa, xóa thông tím banner, logo và tin tức

> Chức năng thống kê doanh thu,sản phẩm 3.3 Mô hình hóa dữ liệu

a) Sơ đồ DED quản lý bán hàng

13

Tim kiém, chon san pham

Tim kiém san pham

Danh mục sản phẫm Hiễn thị thông tin sản phẫm Thông tin sản phẩm

yêu cầu thanh toản

Chuyễn tiền thanh toán

Lưu thông tin vào nóa đơn:

Lưu thöng tin cập nhãp đơn hảng

quân tý đơn nang |

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

Hình 1: Sơ đồ DFD quản lý bán hàng

3.4 M6 hinh Use Case

a) So dé Use Case tông quát

b) Sơ đồ chỉ tiết tig Use Case

~ So dé Use Case dang ky , đăng nhập

Khach hang thanh vién

“ Use Case xử lý don hang

~ ` «include» 5 ma : Ö tiể@nhậnđơnhàng >> -: kiểm tra thông tin đơn hàng

“ Use Case mua san pham

«include» Let,

Chon san pham -*> Xem thông tin sản phấm = „

+> Xem theo chủng loại

Thêm hàng vào giỏ

Hinh 5: Use Case mua san pham

“e Use Case quan ly san pham

c) Dac ta yêu cầu — chức năng

+* Chức năng đăng ký thành viên

l6

2 Form đăng ký thành viên hiển thị

3 Khách hàng nhập thông tin cá nhân cần thiết vào form đăng ký

4 Click nút đăng ký

5 Hệ thống thông báo kết quả quá trình nhập thông tin

cá nhân Nếu thông tin nhập không chính xác thì thực hiện

luồng nhánh A1 Nếu chính xác thì tiến hành bước 6

6 Hệ thống cập nhập thông tin khách hàng vào danh sách thành viên

1 UC két thúc

Luong sự kiện

phụ Al —- Quá trình nhập thông tin không chính xác: Khi

người dùng nhập sai thông tin

I — Hệ thống hiển thị thông báo thông tin nhập không

chính xác

2 Hệ thống yêu cầu khách hàng nhập lại

3 Nếu khách hàng đồng ý thì quay về bước 2 ở luồng

sự kiện chính,nều không đồng ý thì UC kết thúc

17

+* Chức năng xem thông tin giỏ hàng

Tén Use - Case Xem thông tin gid hang

1 Khách hàng chọn chức năng xem giỏ hàng

2 Form giỏ hàng xuất hiện, hệ thông hiển thị thông tin

về giỏ hàng hiện tại của mình

3 Khách hàng xem thông tin chỉ tiết về giỏ hàng của minh

4 UCkếtthúc

Luong sự kiện

phụ

A1 -Khách hang chưa đăng nhập hệ thông:

1 Hệ thống hiền thị thông báo yêu cầu đăng nhập

2 Nếu khách hàng đồng ý thì quay về bước 2 của luồng

sự kiện chính, nêu không thì UC kết thúc

+* Chức năng thanh toan

Tén Use - Case Thanh toan

Luong sự kiện

chính

1 _ Khách hàng nhấn thanh toán đề tạo hóa đơn

2 Fom thanh toán xuất hiện, hệ thống hiển thị đơn

hàng và thông tin của đơn hàng

3 Khách hàng nhập thông tin cá nhân , chọn hình thức

thanh toán đề hoàn thành đơn hàng

4 Chọn gửi đơn hàng.Nếu đơn hàng nhập đúng thì thực

hiện bước 5.Nếu sai thực hiện luồng sự kiện phụ AI

5 Hệ thống kiểm tra thông tin tài khoản và phương thức

thanh toán nếu hợp lệ thì thực hiện bước 6.Nếu sai thì thực hiện luồng sự kiện phụ A2

6 Hệ thống thông báo giao dịch thành công

2 Hệ thông hiển thị lại form nhập thông tin và hiện

thông báo các trường hớp sai

3 Khách hàng nhập lại thông tin, nếu không nhập lại thì đơn hàng bị hủy

4 Quay lại bước 4 của luỗng sự kiện chính

A2 - Tài khoản không hợp lệ

1 Hệ thống thông báo phương thức thanh toán và tài khoản không hợp lệ

2 Khách hàng nhập lại tài khoản và chọn lại phương thức thanh toán nếu muốn tiếp tục thanh toán nêu muốn

ngưng thì đơn hàng sẽ bị hủy

3 Quay lại bước 4 ở luồng chính

19

: âm mô : : Gategory_ic ja ton tal 3: nhập thông tin_ ï chua

danh mục chư

tồn tại Thêm danh mục

+bổ sung ngày thêm

Mô hình động

- Sơ đồ hoạt động cho chức năng:Admin thêm danh mục mới trên hệ thông

20

ch Thêm danh mục mới

- Sơ đồ cộng tác cho chức năng:Khách hàng thêm sản phẩm vào giỏ hàng

3 : Lựa chọn sản phẩằ-sổ lực [: : Thêm thông tin sản phẩm được chọn

Sản phẩm còn hàng khách hàng chon S

3.5 Thiết kế CSDL

a) Mô tả chỉ tiết các lớp và kiểu dữ liệu

Bảng sản phẩm

products

Tên trường Kiều dữ liệu Ghi chú

Bảng người dùng users

Tên trường Kiều dữ liệu Ghi chú

Bang don hang orders

Tên trường Kiều dữ liệu Ghi chú

23

isPaid Boolean Tinh trang thanh toan

24