Xây dựng website bán giày sử dụng net core và reactjs đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Báo cáo đồ án tốt nghiệp

LỜI NÓI ĐẦU
Trong những năm gần đây với sự phát triển vượt trội của khoa học kỹ thuật đặt biệt là
công nghệ thông tin, với những ứng dụng của công nghệ thông tin vào các lĩnh vực đã đóng
góp phần to lớn cho sự nghiệp phát triển của con người. Trong các lĩnh vực đó thì lĩnh vực
quản lý là thật sự giúp ích được rất nhiều cho con người, việc áp dụng quản lý và mua bán
bằng máy tính thay cho quản lý và mua bán bằng thủ công ở các doanh nghiệp, công ty, cá
nhân là rất cần thiết và thật sự cần thiết.
Do đó, việc quản lý mua bán hàng qua mạng là không thể thiếu được trong mọi doanh
nghiệp, cửa hàng vừa và nhỏ. Năm 2008 là năm đầu tiên Việt Nam có sự phát triển lớn
mạnh về lĩnh vực thương mại khi chính thức trở thành thành viên thứ 150 của tổ chức
thương mại thế giới WTO. Với sự phát triển mạnh mẽ đó khơng thể phủ nhận sự đóng góp
của thương mại điện tử, một lĩnh vực nóng bỏng hiện nay! Một đất nước đang phát triển
mạnh mẽ, cuộc sống con người càng ngày nâng cao, mức tiêu thụ sản phẩm ngày càng
tăngTóm lại nhu cầu con người ngày càng cao.
Vì thế việc trao đổi mua bán cũng như quản lý hàng hóa cần phải có sự thay đổi từ thủ
cơng sang máy móc. Chương trình chạy trên mơi trường hệ điều hành Window, WinServer,
Linux sử dụng ngôn ngữ chuẩn về xử lý dữ liệu như ReactJS, ASP .NET Core, JavaScript,
CSS và hệ quản trị cơ sở dữ liệu SQL Server Hoàn thành đồ án tốt nghiệp này, em xin được
gửi lời cảm ơn chân thành đến các thầy, cơ khoa CNTT đã hết lịng truyền đạt kiến thức
cho em trong quá trình học tập, đặc biệt là thầy Lê Vĩnh Thịnh là người đã trực tiếp hướng
dẫn em một cách tận tình. Tuy đã cố gắng hết sức tìm hiểu, phân tích thiết kế và cài đặt hệ
thống nhưng chắc rằng khơng tránh khỏi những thiếu sót. Em rất mong nhận được sự thơng
cảm và góp ý của quý thầy, cô.
Em xin chân thành cảm ơn!

i


Báo cáo đồ án tốt nghiệp

DANH MỤC
LỜI NÓI ĐẦU ................................................................................................................. i
DANH MỤC ................................................................................................................... ii
DANH MỤC HÌNH ẢNH ............................................................................................ vi
DANH MỤC BẢNG ..................................................................................................... ix
TÀI LIỆU THAM KHẢO............................................................................................. 1
PHẦN MỞ ĐẦU ............................................................................................................ 1
1.Tính cấp thiết của đề tài........................................................................................... 1
2.Mục đích của đề tài .................................................................................................. 2
3.Cách tiếp cận và nghiên cứu ................................................................................... 3
4.Kết quả đạt được....................................................................................................... 3
4.1. Giao diện ........................................................................................................... 3
4.2. Xử lý back-end ................................................................................................. 3
PHẦN NỘI DUNG ........................................................................................................ 1
CHƯƠNG I: CƠ SỞ LÝ THUYẾT ............................................................................. 1
1. Tổng quan về thương mại điện tử .......................................................................... 1
1.1. Khái niệm thương mại điện tử ....................................................................... 1
1.2. Lợi ích cửa thương mại điện tử ...................................................................... 1
1.3.Các yêu cầu trong thương mại điện tử ........................................................... 2
2. Giới thiệu về ASP .NET CORE[1][2] ........................................................................ 4
2.1. ASP .NET Core là gì ? ..................................................................................... 4
2.2. Cách thức hoạt động của ASP .NET Core .................................................... 4
2.3. ASP.Net Core làm được những gì ? ............................................................... 5
3.Giới thiệu về ReactJS[3] ............................................................................................ 6
3.1. ReactJS là gì ? .................................................................................................. 6
3.2. Các tính năng của ReactJS ............................................................................. 6
3.3. Tại sao lại chon ReactJS.................................................................................. 8
CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU ................. 9
1. Khảo sát hiện trạng ................................................................................................. 9

2. Xác định yêu cầu ................................................................................................... 14
ii


Báo cáo đồ án tốt nghiệp
2.1. Lược đồ usecase ............................................................................................. 14
2.2. Đặc tả Usecase (Khách hàng)........................................................................ 15
2.3. Đặc tả Usecase(Khách hàng đã đăng nhập) ................................................ 23
2.4. Đặc tả Usecase(Admin).................................................................................. 31
CHƯƠNG III: THIẾT KẾ ỨNG DỤNG .................................................................. 43
1. Thiết kế dữ liệu ...................................................................................................... 43
2. Mô tả sơ đồ thiết kế dữ liệu................................................................................... 44
2.1. Category .......................................................................................................... 44
2.2. Product ............................................................................................................ 44
2.3. Brand............................................................................................................... 44
2.4. Color & Size of Product ................................................................................ 45
2.5. Color ................................................................................................................ 45
2.6. Size................................................................................................................... 45
2.7. Post .................................................................................................................. 46
2.8. Rating .............................................................................................................. 46
2.9. Comment......................................................................................................... 46
2.10. Favorite product .......................................................................................... 47
2.11. Customer....................................................................................................... 47
2.12. Account ......................................................................................................... 47
2.13. Address ......................................................................................................... 48
2.14. Cart Product ................................................................................................. 48
2.15. Shopping cart ............................................................................................... 48
2.15. Order ............................................................................................................. 48
2.16. Order Detail.................................................................................................. 49
3. Sơ đồ tuần tự (Sequence Diagram) ...................................................................... 49

3.1. Sequence tìm kiếm sản phẩm........................................................................ 49
3.2. Sequence filter sản phẩm ............................................................................. 50
3.3. Sequence xem chi tiết sản phẩm ................................................................... 52
3.4. Sequence bình luận và đánh giá ................................................................... 52
3.5. Sequence quản lý giỏ hàng ............................................................................ 53
3.6. Sequence đăng ký tài khoản.......................................................................... 55
3.7. Sequence đăng nhập ...................................................................................... 56
iii


Báo cáo đồ án tốt nghiệp
3.8.Sequence Quản lý thông tin tài khoản .......................................................... 56
3.9. Sequence thanh toán đơn hàng ..................................................................... 58
3.10. Sequence quản lý lịch sử đơn hàng ............................................................ 58
3.11. Sequence quản lý sản phẩm ........................................................................ 60
3.12. Sequence quản lý danh mục........................................................................ 62
3.13. Sequence quản lý tài khoản ........................................................................ 63
3.14. Sequence quản lý đơn hàng ........................................................................ 64
3.15. Sequence đăng xuất ..................................................................................... 65
3.16. Sequence xem chi tiết bài viết ..................................................................... 66
3.17. Sequence quản lý bài viết ............................................................................ 66
CHƯƠNG IV: THIẾT KẾ GIAO DIỆN ................................................................... 69
1. Screen flow cho web phía khách hàng ................................................................. 69
1.1. SCP001 Home screen ..................................................................................... 69
1.2. SCP002 Post detail screen ............................................................................. 71
1.3. SCP003 Product screen ................................................................................. 73
1.4. SCP004 Product detail screen....................................................................... 75
1.5. SCP005 CartProduct screen ......................................................................... 79
1.6. SCP006 Login Modal/Register modal .......................................................... 81
1.7. SCP007 User Info screen ............................................................................... 83

1.8. SCP008 User order screen ............................................................................ 84
1.9. SCP009 User order info screen ..................................................................... 85
1.10. SCP010 User address manage screen ........................................................ 86
1.11. SCP011 User address add screen ............................................................... 87
1.12. SCP012 Change password screen............................................................... 88
2. Srceen flow cho web phía admin .......................................................................... 89
1.1. SAP001 Login admin screen ......................................................................... 89
1.2 SAP002 Dashboard screen ............................................................................. 90
1.3. SAP003 Post Management screen ................................................................ 91
1.4. SAP004 Post Add/Post Edit/Post Detail screen ........................................... 93
1.5. SAP005 Product Management screen .......................................................... 94
1.6. SAP006 Product Add/Edit ............................................................................ 96
1.7. SAP007 Color Management screen .............................................................. 98
iv


Báo cáo đồ án tốt nghiệp
1.8. SAP008 Brand Management screen............................................................. 99
1.9. SAP009 Category Management screen ...................................................... 101
1.10. SAP010 Size Management screen............................................................. 102
1.11. SAP011 Order Management screen ......................................................... 104
1.12. SAP012 Account Management ................................................................. 105
1.13. SAP013 Rating Management screen ........................................................ 106
1.14. SAP014 Revenue Management screen ..................................................... 107
CHƯƠNG V: CÀI ĐẶT VÀ KIỂM THỬ ............................................................... 109
1. Cài đặt ứng dụng ................................................................................................. 109
2. Kiểm thử phần mềm ............................................................................................ 114
2.1 Chức năng đăng ký ....................................................................................... 114
2.2. Chức năng đăng nhập ................................................................................. 115
2.3. Chức năng đổi mật khẩu ............................................................................. 116

2.4. Chức năng tìm kiếm sản phẩm ................................................................... 116
2.5. Chức năng đặt hàng..................................................................................... 117
CHƯƠNG VI: KẾT LUẬN ...................................................................................... 118
1. Kết quả đạt được ................................................................................................ 118
2. Ưu và nhược điểm .............................................................................................. 118
2.1. Ưu điểm......................................................................................................... 118
2.2. Nhược điểm .................................................................................................. 118
2.3. Kinh nghiệm đạt được ................................................................................. 118
2.4. Hướng phát triển trong tương lai ............................................................... 118

v


Báo cáo đồ án tốt nghiệp

DANH MỤC HÌNH ẢNH
Hình 1. 1. Mơ hình hoạt động ............................................................................................. 5
Hình 1. 2. Khác biệt của Virtual Dom ................................................................................ 7
Hình 1. 3. Phương thức hoạt động của Redux .................................................................... 7
Hình 2. 1. Trang chủ MWC 1 ........................................................................................... 10
Hình 2. 2. Trang chủ MWC 2 ........................................................................................... 10
Hình 2. 3. Chi tiết sản phẩm MWC .................................................................................. 11
Hình 2. 4. Giỏ hàng MWC ................................................................................................ 11
Hình 2. 5.Trang chủ JUNO Shop ...................................................................................... 12
Hình 2. 6. Chi tiết sản phẩm Juno Shop............................................................................ 12
Hình 2. 7. Sở đồ Usecase tổng quát .................................................................................. 14
Hình 2. 8. Usecase đăng ký............................................................................................... 15
Hình 2. 9. Usecase đăng nhập (khách hàng) ..................................................................... 16
Hình 2. 10. Usecase tìm kiếm sản phẩm ........................................................................... 19
Hình 2. 11. Usecase filter sản phẩm ................................................................................. 20

Hình 2. 12. Usecase xem bài viết...................................................................................... 22
Hình 2. 13. Usecase đăng xuất .......................................................................................... 23
Hình 2. 14. Usecase thêm vào giỏ hàng ............................................................................ 24
Hình 2. 15. Usecase thao tác giỏ hàng .............................................................................. 25
Hình 2. 16. Usecase hình thức thanh tốn ........................................................................ 28
Hình 2. 17. Usecase theo dõi đơn hàng đã đặt .................................................................. 29
Hình 2. 18. Usecase quản lý sản phẩm ............................................................................. 31
Hình 2. 19. Usecase quản lý đơn hàng.............................................................................. 35
Hình 2. 20. Usecase quản lý tài khoản .............................................................................. 37
Hình 2. 21. Usecase quản lý bài viết................................................................................. 39

Hình 3. 1. Mơ hình thiết kế dữ liệu ................................................................................... 43
Hình 3. 2. Sequence tìm kiếm bằng tên ............................................................................ 49
Hình 3. 3. Sequence tìm kiếm bằng mã sản phẩm ............................................................ 50
Hình 3. 4. Sequence filter theo giá.................................................................................... 50
Hình 3. 5. Sequence filter theo thương hiệu ..................................................................... 51
Hình 3. 6. Sequence filter theo màu.................................................................................. 51
Hình 3. 7. Sequence xem chi tiết sản phẩm ..................................................................... 52
Hình 3. 8. Sequence bình luận đánh giá .......................................................................... 52
Hình 3. 9. Sequence cập nhật bình luận ........................................................................... 53
Hình 3. 10. Sequence xem giỏ hàng ................................................................................ 53
vi


Báo cáo đồ án tốt nghiệp
Hình 3. 11. Sequence thêm vào giỏ hàng ........................................................................ 54
Hình 3. 12. Sequence cập nhật giỏ hàng .......................................................................... 54
Hình 3. 13. Sequence xóa sản phẩm trong giỏ hàng ........................................................ 55
Hình 3. 14. Sequence đăng ký ......................................................................................... 55
Hình 3. 15. Sequence đăng nhập...................................................................................... 56

Hình 3. 16. Sequence xem thơng tin tài khoản ................................................................. 56
Hình 3. 17. Sequence sửa thơng tin tài khoản .................................................................. 57
Hình 3. 18. Sequence đổi mật khẩu .................................................................................. 57
Hình 3. 19. Sequence thanh tốn đơn hàng ..................................................................... 58
Hình 3. 20. Sequence xem danh sách đơn hàng đã đặt ..................................................... 58
Hình 3. 21. Sequence xem chi tiết đơn hàng .................................................................... 59
Hình 3. 22. Sequence hủy đơn hàng ................................................................................. 59
Hình 3. 23. Sequence thêm sản phẩm ............................................................................... 60
Hình 3. 24. Sequence sửa đổi sản phẩm .......................................................................... 60
Hình 3. 25. Sequence xóa sản phẩm ................................................................................. 61
Hình 3. 26. Sequence xem chi tiết sản phẩm .................................................................... 61
Hình 3. 27. Sequence thêm danh mục .............................................................................. 62
Hình 3. 28. Sequence sửa danh mục ................................................................................. 62
Hình 3. 29. Sequence xóa danh mục ................................................................................. 63
Hình 3. 30. Sequence quản lý tài khoản ........................................................................... 63
Hình 3. 31. Sequence lấy danh sách đơn hàng ................................................................. 64
Hình 3. 32. Sequence từ chối đơn hàng ............................................................................ 64
Hình 3. 33. Sequence duyệt đơn hàng .............................................................................. 65
Hình 3. 34. Sequence đăng xuất ....................................................................................... 65
Hình 3. 35. Sequence Xem chi tiết bài viết ...................................................................... 66
Hình 3. 36. Sequence quản lý bài viết .............................................................................. 66
Hình 3. 37. Sequence sửa bài viết ..................................................................................... 67
Hình 3. 38. Sequence xóa bài viết .................................................................................... 67
Hình 3. 39. Sequence đăng bài viết và gỡ bài viết............................................................ 68

Hình 4.
Hình 4.
Hình 4.
Hình 4.
Hình 4.

Hình 4.
Hình 4.
Hình 4.
Hình 4.
Hình 4.

1.Màn hình trang chủ .......................................................................................... 69
2.Màn hình chi tiết bài viết ................................................................................. 71
3.Màn hình danh sách sản phẩm ......................................................................... 73
4.Màn hình chi tiết sản phẩm 1 ........................................................................... 75
5.Màn hình chi tiết sản phẩm 2 ........................................................................... 76
6.Màn hình giỏ hàng (có sản phẩm) ................................................................... 79
7.Màn hình giỏ hàng (trống) ............................................................................... 79
8.Modal login ...................................................................................................... 81
9.Modal đăng ký ................................................................................................ 81
10.Màn hình thông tin khách hàng .................................................................... 83
vii


Báo cáo đồ án tốt nghiệp
Hình 4.
Hình 4.
Hình 4.
Hình 4.
Hình 4.

11.Màn hình quản lý đơn hàng đã đặt ............................................................... 84
12.Màn hình chi tiết đơn hàng đã đặt ................................................................ 85
13.Màn hình quản lý sổ địa chỉ .......................................................................... 86
14.Màn hình thêm địa chỉ mới ........................................................................... 87

15.Màn hình đổi mật khẩu ................................................................................. 88

Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.
Hình 4.2.

1.Màn hình đăng nhập Admin ....................................................................... 89
2.Màn hình dashboard.................................................................................... 90
3.Màn hình quản lý bài viết ........................................................................... 91
4.Màn hình thêm bài viết 1 ........................................................................... 93
5.Màn hình thêm bài viết 2 ............................................................................ 93
6.Màn hình quản lý sản phẩm ........................................................................ 94
7.Màn hình thêm/sửa sản phẩm ..................................................................... 96
8.Màn hình quản lý màu ................................................................................ 98

9.Màn hình thêm màu .................................................................................... 98
10.Màn hình quản lý thương hiệu .................................................................. 99
11.Màn hình thên thương hiệu ..................................................................... 100
12.Màn hình quản lý danh mục ................................................................... 101
13.Màn hình thêm danh mục ....................................................................... 101
14.Màn hình quản lý kích thước .................................................................. 102
15.Màn hình thêm kích thước ...................................................................... 103
16.Màn hình quản lý đơn hàng .................................................................... 104
17.Màn hình quản lý tài khoản .................................................................... 105
18.Màn hình quản lý đánh giá sản phẩm ..................................................... 106
19.Màn hình quản lý doanh thu ................................................................... 107

viii


Báo cáo đồ án tốt nghiệp

DANH MỤC BẢNG
Bảng 2. 1. Usecase đăng ký .............................................................................................. 15
Bảng 2. 2. Usecase đăng nhập Email ................................................................................ 17
Bảng 2. 3. Usecase đăng nhập Facebook .......................................................................... 18
Bảng 2. 4. Usecase đăng nhập Google .............................................................................. 18
Bảng 2. 5. Usecase tìm kiếm theo tên sản phẩm ............................................................... 19
Bảng 2. 6. Usecase tìm kiếm theo mã ............................................................................... 20
Bảng 2. 7. Usecase filter theo giá...................................................................................... 21
Bảng 2. 8. Usecase filter theo thương hiệu ....................................................................... 21
Bảng 2. 9. Usecase filter theo màu.................................................................................... 22
Bảng 2. 10. Usecase xem bài viết .................................................................................... 23
Bảng 2. 11. Usecase đăng xuất ......................................................................................... 24
Bảng 2. 12. Usecase thêm sản phẩm vào giỏ .................................................................... 25

Bảng 2. 13. Usecase thêm thông tin giỏ hàng ................................................................... 26
Bảng 2. 14. Usecase thay đổi số lượng sản phẩm trong giỏ hàng .................................... 26
Bảng 2. 15. Usecase loại bỏ sản phẩm khỏi giỏ................................................................ 27
Bảng 2. 16. Usecase đặt hàng ........................................................................................... 27
Bảng 2. 17. Usecase theo dõi đơn hàng ............................................................................ 29
Bảng 2. 18. Usecase hủy đơn hàng ................................................................................... 30
Bảng 2. 19. Usecase quản lý sản phẩm tổng quát ............................................................. 31
Bảng 2. 20. Usecase thêm sản phẩm ................................................................................. 32
Bảng 2. 21. Usecase chỉnh sửa sản phẩm ......................................................................... 33
Bảng 2. 22. Usecase xóa sản phẩm ................................................................................... 33
Bảng 2. 23. Usecase tìm kiếm sản phẩm (admin) ............................................................. 34
Bảng 2. 24. Usecase xem chi tiết sản phẩm ...................................................................... 35
Bảng 2. 25. Usecase quản lý đơn hàng ............................................................................. 35
Bảng 2. 26. Usecase xác nhận đơn hàng ........................................................................... 36
Bảng 2. 27. Usecase hủy đơn hàng ................................................................................... 36
Bảng 2. 28. Usecase quản lý tài khoản ............................................................................. 37
Bảng 2. 29. Usecase khóa tài khoản.................................................................................. 38
Bảng 2. 30. Usecase quản lý bài viết ................................................................................ 39
Bảng 2. 31. Usecase thêm bài viết ................................................................................... 40
Bảng 2. 32. Usecase chỉnh sửa bài viết ............................................................................. 41
Bảng 2. 33. Usecase xóa bài viết ...................................................................................... 42

ix


Báo cáo đồ án tốt nghiệp

Bảng 3. 1. Mô tả dữ liệu Collection: Category ................................................................. 44
Bảng 3. 2. Mô tả dữ liệu Collection: Product ................................................................... 44
Bảng 3. 3. Mô tả dữ liệu Collection: Brand ...................................................................... 44

Bảng 3. 4. Mô tả dữ liệu Collection: Color & Size product ............................................. 45
Bảng 3. 5. Mô tả dữ liệu Collection: Color ....................................................................... 45
Bảng 3. 6. Mô tả dữ liệu Collection: Size ......................................................................... 45
Bảng 3. 7. Mô tả dữ liệu Collection: Post ......................................................................... 46
Bảng 3. 8. Mô tả dữ liệu Collection: Rating ..................................................................... 46
Bảng 3. 9. Mô tả dữ liệu Collection: Comment ................................................................ 46
Bảng 3. 10. Mô tả dữ liệu Collection: Favorite product ................................................... 47
Bảng 3. 11. Mô tả dữ liệu Collection: Customer .............................................................. 47
Bảng 3. 12. Mô tả dữ liệu Collection: Account ................................................................ 47
Bảng 3. 13. Mô tả dữ liệu Collection: Address ................................................................. 48
Bảng 3. 14. Mô tả dữ liệu Collection: Cart product .......................................................... 48
Bảng 3. 15. Mô tả dữ liệu Collection: Shopping cart ....................................................... 48
Bảng 3. 16. Mô tả dữ liệu Collection: Order .................................................................... 48
Bảng 3. 17. Mô tả dữ liệu Collection: Order detail........................................................... 49

x


Báo cáo đồ án tốt nghiệp

Bảng 4. 1. Mô tả SCP001 Home screen ........................................................................ 70
Bảng 4. 2. Mô tả SCP002 Post detail screen ................................................................. 72
Bảng 4. 3. Mô tả SCP003 Product screen ..................................................................... 74
Bảng 4. 4. Mô tả SCP004 Product detail screen ........................................................... 78
Bảng 4. 5. Mô tả SPC005 Cart product screen ............................................................. 80
Bảng 4. 6. Mô tả SCP006 Login modal/ Register modal.............................................. 82
Bảng 4. 7. Mô tả SCP007 User info screen .................................................................. 84
Bảng 4. 8. Mô tả SCP008 User order screen ................................................................ 85
Bảng 4. 9. Mô tả SCP009 User order info screen ......................................................... 86
Bảng 4. 10. Mô tả SCP010 User address manage screen ............................................. 87

Bảng 4. 11. Mô tả SCP011 User address add screen .................................................... 88
Bảng 4. 12. Mô tả SCP012 Change password .............................................................. 89
Bảng 4. 13. Mô tả SAP001 Login admin screen........................................................... 90
Bảng 4. 14. Mô tả SAP002 Dashboard screen .............................................................. 91
Bảng 4. 15. Mô tả SAP003 Post management screen ................................................... 92
Bảng 4. 16. Mô tả SAP004 Post Add/Post Edit/ Post detail screen .............................. 94
Bảng 4. 17. Mô tả SAP005 Product management ........................................................ 95
Bảng 4. 18. Mô tả SAP006 Product Add/Edit .............................................................. 97
Bảng 4. 19. Mô tả SAP007 Color management screen................................................. 99
Bảng 4. 20. Mô tả SAP008 Brand management screen .............................................. 100
Bảng 4. 21. Mô tả SAP009 Category management screen ......................................... 102
Bảng 4. 22. Mô tả SAP010 Size management screen ................................................. 103
Bảng 4. 23. Mô tả SAP011 Order management .......................................................... 105
Bảng 4. 24. Mô tả SAP012 Account management ..................................................... 106
Bảng 4. 26. Mô tả SAP012 Revenue Management Screen......................................... 108

Bảng 5. 1.Kiểm thử chức năng đăng ký ...................................................................... 115
Bảng 5. 2.Kiểm thử chức năng đăng nhập .................................................................. 115
Bảng 5. 3.Kiểm thử chức năng đổi mật khẩu.............................................................. 116
Bảng 5. 4.Kiểm thử chức năng tìm kiếm .................................................................... 116
Bảng 5. 5.Kiểm thử chức năng đặt hàng ..................................................................... 117

xi


Báo cáo đồ án tốt nghiệp

TÀI LIỆU THAM KHẢO
Tiếng Viêt
[1]. />[2]. />[3]. a/p/gioi-thieu-ve-reactjs-phan-i-cac-khai-niem-co-ban-V3m5WzjblO7

[4]. a/p/gioi-thieu-ve-he-thong-goi-y-recommender-systems-hoacrecommendation-systems-maGK78yOZj2
[5]. a/p/cung-tim-hieu-ve-cac-hook-trong-react-hooks-Ljy5VYgjlra
Tiếng Anh
[6]. />[7]. react-chatbot-kit docs (fredrikoseberg.github.io)


Báo cáo đồ án tốt nghiệp

PHẦN MỞ ĐẦU
1.Tính cấp thiết của đề tài
-

Ngày nay, nhu cầu sử dụng của con người trong xã hội ln là động cơ chính thúc đẩy
sản xuất. Như ta đã biết việc thiếu thông tin làm cho việc đưa sản phẩm đến tay người
tiêu dùng trở nên khó khăn và gây nhiều lãng phí cho xã hội. Bên cạnh đó việc phổ
biến sử dụng Internet đã tạo ra một bước ngoặt mới trong định hướng phát triển ngành
CNTT của nước ta, cùng với nhu cầu sử dụng máy tính để trao đổi và cập nhật thơng
tin càng ngày tăng.

-

Từ thực tế đó việc đưa thơng tin đáp ứng nhu cầu của mọi người và hỗ trợ cho việc
mua bán diễn ra một cách nhanh chóng, tiết kiệm đã trở nên vô cùng cấp thiết. Song
song với việc bán hàng qua điện thoại thì bán hàng qua mạng cũng là một giải pháp tối
ưu trong việc phân phối thơng tin vào mục đích thương mại. Việc bạn có thể ở nhà mà
đi đến cửa hàng này hoặc cửa hàng khác trong không gian ảo đã trở thành hiện thực.

-

Ngày nay, bất cứ thứ hàng nào, bạn có thể đặt mua qua Internet từ một bó hoa tươi,

một chiếc điện thoại, một chiếc máy vi tính cho đến một chiếc xe máy. Bạn có thể mua
cho mình tất cả các mặt hàng được bán ở một cửa hàng nào đó trên mạng. Nếu bạn
muốn kinh doanh thì hãy nhanh chóng mở một cửa hàng vì đây chính là nơi mà bạn sẽ
lôi kéo được nhiều khách hàng quen thuộc nhất về mình.

-

Do đó, xây dựng “Website Bán Giày” là một vấn đề thực tế, ứng dụng được và có tiềm
năng phát triển trong tương lai. Sự ra đời của ngơn ngữ lập trình cho phép chúng ta có
thể thiết kế và xây dựng các ứng dụng giao dịch thương mại điện tử dưới nhiều hình
thức khác nhau.

-

Với sự hỗ trợ của các loại cơ sở dữ liệu quan hệ, ta có thể kết hợp chúng trên trình chủ
như ASP, ReactJS, để có thể xây dựng và triển khai ứng dụng với nhiều mục đích khác
nhau. ASP .NET Core và SQL Server khơng nhằm ngồi mục đích dùng để xây dựng
ứng dụng giao dịch điện tử. Với lí do đó, được sự hướng dẫn tận tình của giáo viên
hướng dẫn Lê Vĩnh Thịnh, em đã chọn đề tài “Website Bán Giày Bằng ASP .NET Core
và ReactJS” sử dụng công nghệ ASP .NET với hệ quản trị cơ sở dữ liệu SQL Server
làm đề tài đồ án tốt nghiệp của mình.


Báo cáo đồ án tốt nghiệp

2.Mục đích của đề tài
▪ Đây là một website nhằm bán và giới thiệu rộng rãi các mặt hàng của công ty đến người
tiêu dùng với các chi tiết mặt hàng cũng như giá cả một cách chính xác nhất. Website
nhằm:
➢ Giúp cho khách hàng:

▪ Khách hàng là những người có nhu cầu mua sắm hàng hóa. Họ sẽ tìm kiếm các mặt
hàng cần thiết từ hệ thống và đặt mua các mặt hàng này. Vậy nên trang web phải giúp
cho khách hàng:
o Tìm kiếm và lựa chọn từ xa sản phẩm mình cần: Khách hàng khi truy cập vào
trang web thương mại thường tìm kiếm các mặt hàng hay các sản phẩm mà họ
cần và muốn mua. Nhưng đơi khi cũng có nhiều khách hàng vào website này
mà khơng có ý định mua hay khơng biết mua gì thì u cầu đặt ra cho hệ thống
là làm thế nào để khách hàng dễ bị bắt mắt và hấp dẫn với sản phẩm đó, đồng
thời có thể tìm kiếm nhanh và hiệu quả các sản phẩm mà họ cần tìm.
o Đặt mua hàng: Sau khi khách hàng lựa chọn xong những mặt hàng cần đặt mua
thì sẽ đơn đặt hàng sẽ được hiển thị để khách hàng nhập vào những thông tin
cần thiết, tránh những địi hỏi hay những thơng tin u cầu q nhiều từ phía
khách hàng, tạo cảm giác thoải mái, riêng tư cho khách hàng.
➢ Giúp nhà quản lý:
• Là người có quyền đăng nhập, quản lý và làm chủ mọi hoạt động của hệ thống trang
web. Nhà quản lý có một username và một password để truy cập vào hệ thống nhằm
thực hiện các chức năng sau:
▪ Quản lý các sản phẩm một cách dễ dàng.
▪ Thêm, xố, sửa thơng tin sản phẩm vào cơ sở dữ liệu.
▪ Kiểm tra và xử lý đơn đặt hàng.
▪ Quản lý doanh thu
▪ Quản lý tài khoản
• Bên cạnh các chức năng nêu trên thì trang web phải trơng thật đẹp mắt và dễ truy cập.
Giao diện đẹp là yếu tố quan trọng góp phần tăng lượng khách hàng, và trang web phải
làm sao cho khách hàng thấy được những thơng tin cần tìm, cung cấp những thông tin
quảng cáo thật hấp dẫn, nhằm thu hút sự quan tâm về cơng ty mình và có cơ hội sẽ có
nhiều người tham khảo nhiều hơn. Điều quan trọng trong trang web mua bán trên mạng
là phải đảm bảo an tồn tuyệt đối những thơng tin liên quan đến người dùng trong quá
trình đặt mua hay thanh tốn. Đồng thời trang web cịn phải có tính dễ nâng cấp, bảo
trì, sửa chữa khi cần bổ sung, cập nhật những tính năng mới.

Báo cáo đồ án tốt nghiệp

3.Cách tiếp cận và nghiên cứu
❖ Đối tương nghiên cứu
• Mọi người tiêu dùng trên tồn quốc có nhu cầu đặt hàng qua mạng.
❖ Phạm vi nghiên cứu
• Về mặt lý thuyết:
- Tìm hiểu kỹ thuật lập trình, cách thức hoạt động và các đối tượng trong ASP
.NET Core
- Tìm hiểu phương pháp tạo api của ASP và hiểu được cách lưu trữ dữ liệu của hệ
quản trị cơ sở dữ liệu SQL Server
- Tìm hiểu kỹ thuật thiết kế, cách thức hoạt động và các đối tượng front-end trong
ReactJS
• Về mặt lập trình:
- Sử dụng ASP .NET Core xử lí dữ liệu ở phía back-end kết hợp hệ quản trị SQL
server để xây dựng Website giày.
• Về mặt hoạt động:
- Trang web chỉ thực hiện đầy đủ các chức năng ở phạm vi các đơn hàng sỉ và lẻ
của các doanh nghiệp và người dùng

4.Kết quả đạt được
4.1. Giao diện
-

Hoàn thiện giao diện cơ bản một cách dễ dàng sử dụng, thân thiện, thẩm mỹ cho người
dùng.

-

Cố gắng phát triển giao diện dưới dạng đa phương tiện khiến người dùng có thể sử
dụng website dưới dạng nhiều phương tiện khác nhau.

4.2. Xử lý back-end
-

Hoàn thiện các tính năng cơ bản của một trang web
Phát triển và cải thiện các tính năng khác
Cập nhật và bắt các lỗi thường gặp trong quá trình sử dụng trang web.

-

Hồn thiện các tính năng quản lí để dễ dàng quản lý và kiểm kê hóa đơn một cách dễ
dàng.

-

Xây dựng hệ thống gợi ý sản phẩm cho người dùng đơn giản.
Tích hợp login social account như Facebook, Google.
Tích hợp chatbox Messenger của Facebook


Báo cáo đồ án tốt nghiệp

PHẦN NỘI DUNG
CHƯƠNG I: CƠ SỞ LÝ THUYẾT
1. Tổng quan về thương mại điện tử
1.1. Khái niệm thương mại điện tử
-

Cùng với sự bùng nổ về internet thì thuật ngữ thương mại điện tử đã ra đời. Có rất
nhiều định nghĩa về thương mại điện tử như là:

-

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ố hố thơng qua mạng Internet".

-

Theo Uỷ ban Thương mại điện tử của Tổ chức hợp tác kinh tế châu Á-Thái Bình Dương
(APEC): "Thương mại điện tử là công việc kinh doanh được tiến hành thông qua truyền
thông số liệu và công nghệ tin học kỹ thuật số".

-

Nhưng hiểu một cách tổng quát, TMĐT là việc tiến hành một phần hay toàn bộ hoạt
động thương mại bằng những phương tiện điện tử. TMĐT vẫn mang bản chất như các
hoạt động thương mại truyền thống. Tuy nhiên, thông qua các phương tiện điện tử mới,
các hoạt động thương mại được thực hiện nhanh hơn, hiệu quả hơn, giúp tiết kiệm chi
phí và mở rộng khơng gian kinh doanh.

-

TMĐT càng được biết tới như một phương thức kinh doanh hiệu quả từ khi Internet
hình thành và phát triển. Chính vì vậy, nhiều người hiểu TMĐT theo nghĩa cụ thể hơn
là giao dịch thương mại, mua sắm qua Internet và mạng (ví dụ mạng Intranet của doanh

nghiệp).

1.2. Lợi ích cửa thương mại điện tử
-

Có thể hiểu được rằng bằng cách sử dụng phương tiện này sẽ giúp ích cho người sử
dụng mơi trường mạng trong việc tìm kiếm đối tác, nắm bắt được thơng tin trên thị
trường, giảm chi phí tiếp thị và giao dịch ... nhằm mở rộng qui mô sản xuất hoạt động
kinh doanh trong thương trường.

Cơ hội đạt lợi nhuận:
-

Nắm bắt được nhiều thông tin phong phú, giúp cho các doanh nghiệp nhờ đó mà có thể
đề ra các chiến lược sản suất và kinh doanh thích hợp với xu thế phát triển trong và
ngoài nước. Đối với những doanh nghiệp vừa và nhỏ có cơ hội mở rộng đối tác trên
thị trường, nắm tình hình thị trường ... mà nhờ đó sẽ được biết đến tên tuổi.

Chương 1: Cơ sở lý thuyết

1


Báo cáo đồ án tốt nghiệp
-

Hiện nay thương mại điện tử đang được nhiều người quan tâm và thu hút rất hiều
thương gia doanh nghiệp trên thế giới, vì đó là một trong những động lực phát triển
doanh nghiêp và cho cả nước.

Giảm thiểu các hoạt động kinh doanh:
-

Giảm chi phí sản xuất, chi phí văn phịng, chi phí th mặt bằng…Bên cạnh đó khơng
cần tốn nhiều nhân viên để quản lý và mua bán giao dịch. Thương mại điện tử giúp
giảm chi phí bán hàng và tiếp thị mà chỉ thơng qua mơi trường Web một nhân viên vẫn
có thể giao dịch với nhiều đối tác, khách hàng ... đồng thời còn trưng bày, giới thiệu
catalog đủ loại hàng hóa, xuất xứ của từng loại sản phẩm ...

-

Do đó giảm được chi phí in ấn cho các catalog và giao dịch mua bán.

-

Điều quan trọng nhất là giảm được thời gian trao đổi đáng kể cho khách hàng và doanh
nghiệp. Chỉ trong thời gian ngắn mà doanh nghiệp có thể nắm bắt được thị hiếu khách
hàng và thị trường thay đổi mà nhanh chóng kịp thời củng cố và đáp ứng cho nhu cầu
đó.

Chiến lược kinh doanh:
-

Qua thương mại điện tử giúp các doanh nghiệp có thể củng cố quan hệ hợp tác, thiết
lập các quan hệ tốt hơn với bạn hàng, người dùng. Đồng thời ngày càng có điều kiện
nâng cao uy tín trên thị trường.

1.3. Các yêu cầu trong thương mại điện tử
-

Thương mại điện tử không đơn thuần là phương tiện để thực hiện công việc mua bán
trên mạng mà còn bao gồm các yêu cầu phức tạp đan xen nhau có liên quan đến các
vấn đề khác như: văn bằng pháp lý, luật quốc gia, tập quán xã hội ...

Cơ sở hạ tầng:
-

Trong việc phát triển thương mại dựa trên hệ thống thơng tin thì trước hết phải có một
kĩ thuật máy tính điện tử hiện đại, server, phần mềm hỗ trợ vững chắc những trang thiết
bị tương đối hồn thiện và đảm bảo thơng tin bảo mật chống virut và cách phòng chống
những nguy cơ bị xâm nhập ảnh hưởng quốc gia ... phù hợp với từng doanh nghiệp và
theo đúng chuẩn mực do doanh nghiệp đề ra.

Chương 1: Cơ sở lý thuyết

2


Báo cáo đồ án tốt nghiệp
Nhân lực:
-

Để có thể theo kịp và nắm bắt thông tin kịp thời trong thời đại thơng tin thì phải xây
dựng một đội ngũ cán bộ, nhân viên có trình độ tin học, kỹ thuật điện tử, khả năng tiếp
cận nhanh chóng các phần mềm mới. Bên cạnh đó ngồi khả năng giao tiếp ngơn ngữ
trong nước, nhân viên còn phải trang bị vốn tiếng Anh (ngơn ngữ giao tiếp tồn cầu)
để có thể tiến xa hơn. Đây là cách cũng sẽ dẫn đến sự thay đổi trong hệ thống và giáo
dục ngày nay.

Tạo mối quan hệ bằng sự tin cậy:

-

Tin cậy là trọng tâm của bất kỳ giao tiếp thương mại nào, không những thể hiện giữa
các phòng ban, thực hiện đúng luật pháp của các doanh nghiệp mà còn với khách hàng
bằng sự tin tưởng về vấn đề sản phẩm hay phàn nàn, khiếu nại. Đó là yếu tố tất yếu của
nhà doanh nghiệp muốn kinh doanh lâu dài.

Bảo mật và an toàn:
-

Trong thương trường giao dịch bằng Internet là yếu tố không mấy đảm bảo rằng vấn
đề bảo mật và an toàn là cao. Với sự mạnh mẽ của Internet thì việc xâm nhập tài liệu
cá nhân, các hợp đồng, tín dụng, dữ liệu... sẽ bị lộ và tin chắc rằng sẽ khơng có người
nào sẽ tham gia vào cơng việc mua bán qua mạng nữa. Một vấn đề đáng lo ngại nữa là
mất dữ liệu, một hệ thống được xem là an toàn nhất vấn đề hàng đầu là trọng tâm để
có thể cho mọi người, nhất là các doanh nghiệp có khả năng mua bán mà khơng thể đổ
lỗi lẫn nhau.

Bảo vệ quyền lợi khách hàng và bản quyền kinh doanh
-

Trong môi trường Internet là nơi các doanh nghiệp đầu tư sử dụng, trình bày sản phẩm,
mua bán trao đổi thơng tin hàng hóa thì vấn đề bản quyền là cần thiết giúp cho các
doanh nghiệp an tâm, đảm bảo trong công việc phát triển và đồng thời ngăn chặn việc
xâm phạm bản quyền, phiên dịch trái phép hay ăn cắp ”chất xám”.

-

Do vấn đề mua bán trên mạng, việc xem hàng hóa thơng qua sử dụng hình ảnh thì chất
lượng và vấn đề thực tế bên trong sản phẩm đó là như thế nào thì khơng ai biết được

do đó phải đề ra luật lệ và qui định đối với những người mua bán qua mạng.

Chương 1: Cơ sở lý thuyết

3


Báo cáo đồ án tốt nghiệp
Hệ thống thanh toán điện tử tự động:
-

Thương mại điện tử chỉ có thể thực hiện một cách trọn vẹn nếu có một hệ thống thanh
tốn điện tử tự động. Nếu khơng có hệ thống này thì tính cách thương mại sẽ bị giảm
thấp và chỉ mang tính ứng dụng trao đổi thơng tin. Theo tiêu chuẩn và mẫu của quốc tế
thì việc mã hóa các hàng hóa theo mã vạch là 13 và mỗi cơng ty có một địa chỉ riêng
của mình bằng một mã có số từ 100 đến 100.000. Nếu việc hội nhập và thiết lập hệ
thống mã sản phẩm và mã cơng ty (mã thương mại) cho một cơng ty nói riêng và cho
một nền kinh tế nói chung là khơng đơn giản.

2. Giới thiệu về ASP .NET CORE [1][2]
2.1. ASP .NET Core là gì?
-

ASP.NET Core là một framework mới của Microsoft. Nó được thiết kế lại từ đầu để
trở nên nhanh chóng, linh hoạt và chạy trên được nhiều nền tảng khác nhau. Trong bài
viết này, ASP.NET Core là một framework có thể được sử dụng để phát triển web với
.NET. Nếu bạn có kinh nghiệm làm việc với MVC hoặc Web API trong một vài năm
thì bạn sẽ nhận thấy những tính năng quen thuộc. Kết thúc khóa học ASP.NET Core
của NET CORE VN. Bạn sẽ có những thứ cần thiết để bắt đầu làm việc được với
ASP.NET Core và viết 1 ứng dụng có thể thêm, sửa hay xem dữ liệu từ database như

các mơn lập trình khác bạn đã từng học.

-

Bản phát hành đầu tiên của ASP.NET đã xuất hiện cách đây 15 năm trước, nó là một
phần của .NET Framework. Từ đó, hàng triệu lập trình viên đã sử dụng nó để xây dựng
những ứng dụng web tuyệt vời, và trên những năm đó Microsoft đã phát triển thêm
nhiều tính năng mới

2.2. Cách thức hoạt động của ASP .NET Core
-

MVC là một design partern đã tồn tại rất lâu trong ngành công nghệ phần mềm cũng
như được sử dụng phổ biến trong .Net Core và các bước hoạt động của MVC gồm có:

Chương 1: Cơ sở lý thuyết

4


Báo cáo đồ án tốt nghiệp

Hình 1. 1. Mơ hình hoạt động
• Bước 1: User gửi 1 yêu cầu tới server bằng cách truyền vào 1 URL trong browser
• Bước 2: Yêu cầu đó được gửi tới controller đầu tiên, controller sẽ xử lý yêu cầu,
nếu yêu cầu cần truy xuất dữ liệu thì controller sẽ chuyển qua tầng model
• Bước 3: Tại tầng model, dữ liệu được truy xuất từ database và sau đó truyền qua
view thơng qua controller
• Bước 4: Controller sẽ giúp dữ liệu được chuyển từ model qua view
• Bước 5: View là tầng cuối cùng giao tiếp với User, mọi dữ liệu sẽ được hiển thị

cho User thông qua tầng View
2.3. ASP.Net Core làm được những gì
-

Do sử dụng mơ hình MVC nên trong ASP.Net MVC đã tách biệt được các tầng trong
mơ hình lập trình web vì vậy giúp tối ưu ứng dụng và dễ dàng trong việc viết code,
giao diện

-

Giao diện trong ASP.Net MVC sử dụng công nghệ thiết kế web HTML, CSS nền việc
thiết kế giao diện trở nên dễ dàng và giúp cho designer linh hoạt trong việc thiết kế

-

ASP.Net MVC khơng sử dụng view state vì vậy trang web khơng bị tăng kích thước
do đó hiệu năng hoạt động khơng bị bị giảm

-

Ứng dụng ASP.NET Core có thể được phát triển sử dụng .NET Core hoặc .NET
Framework. Ứng dụng ASP.NET Core được xây dựng sử dụng .NET Core có thể chạy
trên bất cứ hệ điều hành nào trong khi nếu được xây dựng trên .NET Framework chỉ
có thể chạy trên Windows.

Chương 1: Cơ sở lý thuyết

5

Báo cáo đồ án tốt nghiệp
-

Bạn có thể xây dựng và chạy ứng dụng ASP.NET đa nền tảng trên Windows, Mac và
Linux (mã nguồn mở và cộng đồng phát triển)
✓
✓
✓
✓
✓
✓
✓
✓

ASP.NET Core hợp nhất ASP.NET MVC và ASP.NET Web API.
Có thể host trên IIS hoặc tự host.
Có sẵn Dependency Injection.
Dễ dàng tích hợp với các framework frontend như Angular, Knockout...
Hỗ trợ cấu hình cho nhiều mơi trường.
Cơ chết HTTP Request pipeline mới.
Hỗ trợ quản lý phiên bản
Dùng chung toàn bộ Nuget Package.

3.Giới thiệu về ReactJS [3]
3.1. ReactJS là gì?
- React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI). Nó cho
tốc độ phản hồi tuyệt vời khi user nhập liệu bằng cách sử dụng phương pháp mới để render
trang web.
- Components của công cụ này được phát triển bởi Facebook. Nó được ra mắt như một công
cụ JavaScript mã nguồn mở vào năm 2013. Hiện tại, nó đã đi trước các đối thủ chính như

Angular và Bootstrap, hai thư viện JavaScript bán chạy nhất thời bấy giờ.
3.2. Các tính năng của ReactJS
❖ Virtual DOM: cơng nghệ Virtual DOM giúp tăng hiệu năng cho ứng dụng. Việc chỉ
node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa
với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ
xử lý. React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này. Virtual OM
là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một
DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này
sẽ giúp tối ưu hoá việc re-render DOM tree thật.

Chương 1: Cơ sở lý thuyết

6


Báo cáo đồ án tốt nghiệp

Hình 1. 2. Khác biệt của Virtual Dom
❖ Redux: Đây có thể gọi là một phần cực kỳ quan trọng đối với ReactJS và không một
ai sử dụng mà không biết đến redux. Trong một reactJS không bao gồm những module
chuyên dụng để xử lý dữ liệu vì thế ReactJS được thiết lập một cách độc lập bằng việc
chia nhỏ view thành các component nhỏ để chúng liên kết chặt chẽ với nhau hơn. Mơ
hình hoạt động của Redux:

Hình 1. 3. Phương thức hoạt động của Redux

Chương 1: Cơ sở lý thuyết

7

Báo cáo đồ án tốt nghiệp
3.3. Tại sao lại chon ReactJS
-

Lợi ích đầu tiên mà ReactJS đó chính là việc tạo ra cho chính bản thân nó một dom ảo, đây
là nơi mà các component được tồn tại trên đó. Việc tạo ra dom như vậy giúp cải thiện hiệu
suất làm việc rất nhiều, khi có tính tốn cần thay đổi hoặc cần cập nhật những gì lên Dom
thì ReactJS đều tính tốn trước và việc cịn lại chỉ là thực hiện chúng lên Dom, làm như
vậy sẽ giúp cho ReactJS tránh được những thao tác cần có trên một Dom mà khơng cần tốn
thêm bất cứ chi phí nào.

-

Lợi ích thứ hai mà ReactJS đem lại đó chính là việc viết các đoạn code JS sẽ trởi nên dễ
dàng hơn vì nó sử dụng một cú pháp đặc biệt đó chính là cú pháp JSX nghĩa là cú pháp này
cho phép ta trộn được giữa code HTML và Javascript. Ngồi ra ta cịn có thể đem đoạn
code thêm vào trong hàm render mà không cần phải thực hiện việc nối chuỗi và đây được
đánh giá là một trong những đặc tính thú vị của ReactJS và việc chuyển đổi các đoạn HTML
thành các hàm khởi động đều được thực hiện từ bộ biến đổi chính đó chính là JSX.

-

Có nhiều cơng cụ phát triển là lợi ích tiếp theo của ReactJS. Khi bạn bắt đầu một ReactJS
bạn đừng quên cài đặt thêm ứng dụng mở rộng của Chrome chuyên dành cho ReactJS nhé
vì nó sẽ giúp cho bạn debug code một cách dễ dàng hơn, khi bạn đã cài đặt nó xong bạn sẽ
có một cái nhìn trực tiếp vào Virtual Dom và lúc đó cũng đồng nghĩa với việc là bạn đang
xem một cây dom thông thường vậy.

-

Thân thiện với SEO: đây là một trong những điều đặc biệt và chỉ có mỗi ReactJS đây cũng
chính là vấn đề lớn của các JS Frameworks vì hầu như các JS Frameworks khơng thân thiện
với các cổ máy tìm kiếm mặc dù đã được cải thiện nhiều. Còn riêng đối với reactJS thì khá
tự hào vì khơng nằm trong nhóm khơng thân thiện với SEO vì dưới sự hỗ trợ của các render
và trả về trình duyệt dưới dạng webpage khi mà bạn chạy ReactJS trên sever và các Virtual
Dom. Chính vì lý do này mà React có thể đáp ứng đầy đủ được tính SEO Friendly.

Chương 1: Cơ sở lý thuyết

8


Báo cáo đồ án tốt nghiệp

CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
1. Khảo sát hiện trạng
-

Ngày nay với sự phát triển mạnh mẽ của công nghệ thơng tin và những ứng dụng của nó
trong đời sống. Trong nền kinh tế hiện nay, với xu thế toàn cầu hóa nền kinh tế thế giới,
mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu tìm kiếm thơng
tin, cập nhật tin tức thời sự của con người với nhu cầu nhanh nhất và chính xác nhất. Các
nhà soạn cũng đã bắt đầu áp dụng công nghệ công thông tin điện tử từ nhiều năm trước
đây và đã và đang không ngừng phát triển vì nhu cầu sử dụng cũng đang ngày tăng cao
theo.

-

Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và

tính tất yếu của thương mại điện tử, với những thao tác đơn giản trên máy có nối mạng
internet khách hàng sẽ tận tay mua những thứ mình cần mà khơng q mất nhiều thời
gian. Khách hàng chỉ cần click vào những gì họ cần, các nhà dịch vụ sẽ mang tới tận nhà.
Để tiếp cận và góp phần đẩy mạnh sự phổ biến của thương mại điện tử ở Việt Nam, nhóm
chúng em đã tìm hiểu và cài đặt “Website bán giày động trực tuyến”.

-

Tiếp theo, nhóm chúng em sẽ tiến hành khảo sát vài website bán giày phổ biến nhất Việt
Nam được nhiều người sử dụng nhất hiện nay.

Chương 2: Khảo sát hiện trạng và xác định yêu cầu

9


Báo cáo đồ án tốt nghiệp

MWC shop:

Hình 2. 1. Trang chủ MWC 1

Hình 2. 2. Trang chủ MWC 2

Chương 2: Khảo sát hiện trạng và xác định yêu cầu

10