(Đồ án hcmute) xây dưng website bán hàng với angular + asp net core

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT
THÀNH PHỐ HỒ CHÍ MINH

ĐỒ ÁN TỐT NGHIỆP
NGÀNH CƠNG NGHỆ THÔNG TIN

XÂY DƯNG WEBSITE BÁN HÀNG VỚI ANGULAR +
ASP.NET CORE

GVHD:NGUYỄN MINH ĐẠO
SVTT:PHẠM THANH DUY
MSSV:15110181
SVTH:NGUYỄN ĐÌNH HÙNG
MSSV:15110221

SKL 0 0 5 7 5 6

Tp. Hồ Chí Minh, 2019

do an


TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CÔNG NGHỆ THÔNG TIN
BỘ MÔN CÔNG NGHỆ PHẦN MỀM
----------

PHẠM THANH DUY : 15110181
NGUYỄN ĐÌNH HÙNG : 15110221

Đề Tài:

XÂY DỰNG WEBSITE BÁN HÀNG
VỚI ANGULAR + ASP.NET CORE
KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT

GIÁO VIÊN HƯỚNG DẪN
ThS. NGUYỄN MINH ĐẠO

KHÓA 2015 – 2019

do an


ĐH SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CNTT

XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc

******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
Họ và tên Sinh viên 1 : Phạm Thanh Duy........................ MSSV 1: ..…15110181......
Họ và tên Sinh viên 2 : Nguyễn Đình Hùng......................MSSV 2: …..15110221.....
Ngành: Cơng nghệ Thông tin
Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG VỚI ANGULAR + ASP.NET
CORE.

Họ và tên Giáo viên hướng dẫn: ………...NGUYỄN MINH ĐẠO...............................
NHẬN XÉT
1. Về nội dung đề tài khối lượng thực hiện:
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
2. Ưu điểm:
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
3. Khuyết điểm
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
4. Đề nghị cho bảo vệ hay không ?
5. Đánh giá loại :
6. Điểm :
Tp. Hồ Chí Minh ngày 16 tháng 7 năm 2019
Giáo viên hướng dẫn
(Ký & ghi rõ họ tên)

do an


ĐH SƯ PHẠM KỸ THUẬT TP.HCM
KHOA CNTT

XÃ HỘI CHỦ NGHĨA VIỆT NAM
Độc lập – Tự do – Hạnh Phúc

******

*******

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN
Họ và tên Sinh viên 1 : Phạm Thanh Duy........................ MSSV 1: ….15110181.......
Họ và tên Sinh viên 2 : Nguyễn Đình Hùng......................MSSV 2: .…15110221.......
Ngành: Cơng nghệ Thông tin
Tên đề tài: XÂY DỰNG WEBSITE BÁN HÀNG VỚI ANGULAR + ASP.NET
CORE.
Họ và tên Giáo viên phản biện: …………LÊ VĨNH THỊNH .......................................
NHẬN XÉT
1. Về nội dung đề tài khối lượng thực hiện:
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
2. Ưu điểm:
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................
3. Khuyết điểm
....................................................................................................................................................
....................................................................................................................................................
....................................................................................................................................................

4. Đề nghị cho bảo vệ hay không ?
5. Đánh giá loại :
6. Điểm :
Tp. Hồ Chí Minh ngày 16 tháng 7 năm 2019
Giáo viên phản biện
(Ký & ghi rõ họ tên)

do an


Trường ĐH Sư Phạm Kỹ Thuật TP.HCM
Khoa : CNTT

ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP
Họ và Tên SV thực hiện 1: Phạm Thanh Duy

MSSV: 15110181

Họ và Tên SV thực hiện 2: Nguyễn Đình Hùng

MSSV: 15110221

Thời gian làm luận văn: từ : 04/03/2019

Đến : 14/07/2019

Chuyên ngành: Công nghệ thông tin
Tên luận văn: XÂY DỰNG WEBSITE BÁN HÀNG VỚI ANGULAR + ASP.NET
CORE.
GV hướng dẫn: ThS. Nguyễn Minh Đạo

Nhiệm Vụ Của Luận Văn :
1. Tìm hiểu Angular 2+ và ASP.NET CORE
2. Khảo sát các website bán hàng hiện có trên thị trường
3. Dự kiến những kết quả đạt được sau khi hoàn thành luận văn
4. Nghiên cứu và thực hiện theo những Use Case đã đề ra
5. Đề xuất những ý tưởng mới
6. Báo cáo đầy đủ theo yêu cầu của Khoa và giáo viên hướng dẫn
Đề cương viết luận văn:

MỤC LỤC
1. Phần MỞ ĐẦU
1.1. Tính cấp thiết của đề tài
1.2. Mục tiêu đề tài
1.3. Phương pháp nghiên cứu
1.4. Đối tượng, phạm vi nghiên cứu
1.5. Phân tích những website bán hàng online trên thị trường
1.6. Kết quả dự kiến đạt được
2. Phần NỘI DUNG
1. Chương 1: Tìm hiểu về angular + asp.net core

do an


1.1. Angular 7
1.2. Asp.net core
2. Chương 2: Xác định yêu cầu
2.1. Yêu cầu chức năng
2.2. Yêu cầu phi chức năng
3. Chương 3: Phân tích yêu cầu
3.1. Lược đồ use case

3.2. Mơ hình hóa u cầu
4. Chương 4: Thiết kế cơ sơ dữ liệu
4.1. Lược đồ cơ sở dữ liệu sql server
4.2. Mơ tả thuộc tính
5. Chương 5: Thiết kế giao diện và xử lý
5.1. Sơ đồ lớp của ứng dụng
5.2. Màn hình trang chủ
5.3. Màn hình đăng nhập
5.4. Màn hình đăng ký
5.5. Màn hình xem thơng tin sản phẩm
5.6. Màn hình giỏ hàng
5.7. Màn hình user
5.8. Màn hình trang quản lý admin
6. Chương 6: Kiểm thử phần mềm
6.1. Kế hoạch kiểm thử chung
6.2. Chi tiết test case đã kiểm thử
7. Phần KẾT LUẬN
7.1. Kết quả đạt được
7.2. Những ưu điểm và nhược điểm khi thực hiện
7.3. Hướng phát triển cho tương lai
8. Tài liệu tham khảo
[1]. Trang chủ Docs của Angular
/>
do an


[2]. Trang chủ Docs của ASP.Net Core
/>[3]. Nguồn tài liệu về ASP.Net Core trên Tutorialspoint
/>[4]. Bài viết tại sao chúng ta nên sử dụng Angular của tác giả Nguyen Huy Cuong,
Ngày đăng 20/7/2018, tham khảo vào 26/3/2019

a/p/tai-sao-chung-ta-nen-su-dung-angular-eW65GEYPZDO

KẾ HOẠCH THỰC HIỆN
STT

Thời gian

Công Việc

1

4/3 – 10/3

- Gặp giảng viên hướng dẫn nhận yêu cầu
- Khảo sát và phân tích hiện trạng
- Lập danh sách nhiệm vụ theo tuần và thời gian
thực hiện

2

11/3 – 17/3

- Phân tích các chức năng chính của ứng dụng
- Thiết kế cơ sở dữ liệu

3

18/3 – 24/3

- Cài đặt các công cụ cần thiết, thiết lập môi

trường
- Thiết kế và cài đặt các Controller
- Tìm hiểu về JWT

4

25/3 – 31/3

- Viết API xác thực: Đăng ký, đăng nhập
- Triển khai lên angular

5

1/4 -7/4

- Viết API đăng ký, đăng nhập qua Facebook,
Google

6

8/4 – 14/4

- Xây dựng giao diện layout trang cá nhân
- Viết API chỉnh sửa thông tin cá nhân
- Tìm hiểu sử dụng thư việc chọn ngày tháng

7

15/4 – 21/4

- Thêm database tỉnh thành cả nước Việt Nam
- Viết API Thêm sửa xóa địa chỉ người dùng
- Thiết kế giao diện địa chỉ người dùng

do an

Ghi chú


8

22/4 – 28/4

- Viết API đổi mật khẩu
- Thiết kế giao diện với các nút có thể xem/ ẩn mật
khẩu
- Thiết kế giao diện header footer
- Xây dựng API upload ảnh

9

29/4 – 5/5

- Thiết kế trang quản lý sản phẩm
- Viết API thêm sửa xóa sản phẩm, tích hợp
upload ảnh
- Thêm tính năng lọc sản phẩm, tìm sản phẩm cho
admin
- Nghiên cứu database lưu sản phẩm với nhiều
thuộc tính

10

6/5 – 12/5

- Sửa database theo cấu trúc magento, nhưng thất
bại
- Làm trang giao diện sản phẩm
- Viết API lấy thông tin sản phẩm
- Cấu trúc lại toàn bộ thư mục Angular, phân nhiều
module, lazyloading, tìm hiểu routing

11

13/5 – 19/5

- Tìm hiểu animation angular, áp dụng vào chỉnh
sửa thông tin
- Viết API quản lý giỏ hàng
- Thiết kế giao diện giỏ hàng với responsive
- Viết API quản lý đơn hàng cho admin
- Triển khai lên Angular

12

20/5 – 26/5

- Tìm hiểu guard bảo vệ tuyến đường
- Quản lý đơn hàng cho người dùng
- API nhận xét, bình luận sản phẩm, thiết kế giao

diện
- Sửa lại toàn bộ API với custom response
- Viết API nhập hàng, thiết kế giao diện

13

17/5 – 2/6

- Viết báo cáo
- Phân quyền quản lý nhân viên

do an


- Tìm hiểu interceptor Angular, áp dụng vào ứng
dụng
14

3/6 – 9/6

- Viết báo cáo
- Viết API danh mục sản phẩm (truy vấn lồng rất
nhiều)
- Hiển thị cấu trúc danh mục sản phẩm với
ngTemlateOutlet Angular
- Chuyển đổi thành phân trang dữ liệu trên server

15

10/6 – 16/6

- Viết báo cáo
- Hiển thị trình chiếu lên trang chủ
- Viết API thêm, xóa trình chiếu
- Viết API thống kê và triển khai giao diện

16

17/6 – 23/6

- Viết báo cáo
- Chuẩn bị bài thuyết trình
- Chỉnh sửa lại toàn bộ giao diện, làm đẹp
- Thêm thông báo popup, process khi tương tác dữ
liệu
- Viết thuật tốn tìm kiếm sản phẩm
- Gợi ý sản phẩm ngẫu nhiên thay đổi qua ngày

17

24/6 – 20/6

- Hoàn thiện báo cáo
- Hồn thiện bài thuyết trình
- Kiểm thử và sửa lỗi ứng dụng
- Thêm dữ liệu cho sản phẩm

18

1/7 – 7/7

- Đẩy code lên Github tất cả thành viên chốt phiên
bản
- Hồn tất các cơng việc làm CD
- Quay video demo và video hướng dẫn sử dụng
CD
- Hoàn thiện các báo cáo theo yêu cầu của Khoa và
GVHD

19

8/7 – 14/7

- Hồn thành cơng việc
- Báo cáo giảng viên hướng dẫn

do an


- Chỉnh sửa theo yêu cầu

Ý kiến giáo viên hướng dẫn

TP. Hồ Chí Minh, ngày … tháng … năm 2019
Người viết đề cương

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

do an

LỜI CẢM ƠN
Em xin chân thành cảm ơn khoa Công nghệ Thông tin trường Đại học Sư phạm Kỹ
thuật TP.HCM cùng tất cả các thầy giáo, cô giáo đã tận tình giảng dạy và giúp đỡ chúng
em trong suốt quá trình học tập, nghiên cứu. Đặc biệt, Em xin bày tỏ lòng biết ơn sâu sắc
đến thầy Nguyễn Minh Đạo - người đã trực tiếp giảng dạy và hướng dẫn tạo mọi điều kiện
thuận lợi giúp đỡ em trong quá trình thực hiện đề tài. Những vốn kiến thức được tiếp thu
trong quá trình hướng dẫn và giúp đỡ của thầy khơng chỉ là nền tảng cho q trình nghiên
cứu khóa luận mà cịn là hành trang q báu để em bước vào đời một cách vững vàng và
tự tin hơn.
Em cũng xin chân thành cảm ơn bạn bè của em đang học cùng với em đã ln động
viên, khích lệ và tạo điều kiện giúp đỡ em trong suốt q trình thực hiện để em có thể hồn
thành bài Tiểu luận chuyên ngành một cách tốt nhất.
Tuy nhóm đã có nhiều cố gắng, nhưng chắc chắn tiểu luận của chúng em cịn có rất
nhiều thiếu sốt. Rất mong nhận được sự góp ý của thầy giáo, cơ giáo và các bạn.
Cuối cùng em kính chúc q thầy, cơ trong Khoa Công nghệ Thông tin cũng như
trong Trường Đại học Sư phạm Kỹ thuật TP.HCM dồi dào sức khỏe và thành cơng trong
sự nghiệp cao q của mình.

do an


MỤC LỤC
PHẦN MỞ ĐẦU .................................................................................................................. 1
1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI.......................................................................................... 1
2. MỤC TIÊU ĐỀ TÀI........................................................................................................... 1
3. PHƯƠNG PHÁP NGHIÊN CỨU .......................................................................................... 2
4. ĐỐI TƯỢNG, PHẠM VI NGHIÊN CỨU ............................................................................... 2
5. PHÂN TÍCH NHỮNG WEBSITE BÁN HÀNG ONLINE TRÊN THỊ TRƯỜNG ............................ 2
6. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC........................................................................................ 4

PHẦN NỘI DUNG............................................................................................................... 5
CHƯƠNG 1: TÌM HIỂU VỀ ANGULAR + ASP.NET CORE ........................................ 5
1.1. ANGULAR 7 ........................................................................................................ 5
1.2. ASP.NET CORE ................................................................................................... 9
CHƯƠNG 2: XÁC ĐỊNH YÊU CẦU ............................................................................ 18
2.1. YÊU CẦU CHỨC NĂNG .................................................................................. 18
2.1.1. Yêu cầu chức năng nghiệp vụ...................................................................... 18
2.1.2. Yêu cầu chức năng hệ thống........................................................................ 19
2.2. YÊU CẦU PHI CHỨC NĂNG .......................................................................... 20
2.2.1. Yêu cầu liên quan đến người dùng .............................................................. 20
2.2.2. Yêu cầu liên quan đến lập trình viên ........................................................... 20
CHƯƠNG 3: PHÂN TÍCH U CẦU .......................................................................... 21
3.1. LƯỢC ĐỒ USE CASE ....................................................................................... 21
3.1.1. Lược đồ Use Case Tổng quát ...................................................................... 21
3.1.2. Lược đồ Use Case Quản lý thông tin cá nhân ............................................. 22
3.1.3. Lược đồ Use Case Quản lý đơn hàng bán ................................................... 23
3.1.4. Lược đồ Use Case Quản lý giỏ hàng ........................................................... 24
3.1.5. Lược đồ Use Case Quản lý nhập hàng ........................................................ 25
3.1.6. Lược đồ Use Case Quản lý phân quyền ...................................................... 26
3.1.7. Lược đồ Use Case Quản lý sản phẩm.......................................................... 26
3.1.8. Lược đồ Use Case Thống kê ....................................................................... 27

do an


3.1.9. Lược đồ Use Case Tra cứu sản phẩm .......................................................... 27
3.1.10. Lược đồ Use Case Quản lý trình chiếu...................................................... 28
3.2. MƠ HÌNH HĨA U CẦU ............................................................................... 29
3.2.1. Nghiệp vụ đăng ký....................................................................................... 29
3.2.2. Nghiệp vụ đăng nhập ................................................................................... 31

3.2.3. Nghiệp vụ chỉnh sửa thông tin cá nhân ....................................................... 33
3.2.4. Nghiệp vụ tra cứu sản phẩm ........................................................................ 33
3.2.5. Nghiệp vụ xem danh mục sản phẩm............................................................ 34
3.2.6. Nghiệp vụ xem thông tin sản phẩm ............................................................. 35
3.2.7. Nghiệp vụ quản lý giỏ hàng......................................................................... 36
3.2.8. Nghiệp vụ đặt hàng ...................................................................................... 37
3.2.9. Nghiệp vụ đánh giá sản phẩm ..................................................................... 38
3.2.10. Nghiệp vụ bình luận .................................................................................. 39
3.2.11. Nghiệp vụ quản lý nhập hàng .................................................................... 41
3.2.12. Nghiệp vụ quản lý sản phẩm ..................................................................... 43
3.2.13. Nghiệp vụ duyệt đơn hàng......................................................................... 45
3.2.14. Nghiệp vụ thống kê ................................................................................... 46
3.2.15. Nghiệp vụ trình chiếu quảng cáo ............................................................... 46
3.2.16. Nghiệp vụ quản lý phân quyền .................................................................. 47
CHƯƠNG 4: THIẾT KẾ CƠ SƠ DỮ LIỆU ................................................................... 49
4.1. LƯỢC ĐỒ CƠ SỞ DỮ LIỆU SQL SERVER .................................................... 49
4.2. MƠ TẢ THUỘC TÍNH ...................................................................................... 50
4.2.1. Bảng Address ............................................................................................... 50
4.2.2. Bảng AspNetRoleClaims ............................................................................. 50
4.2.3. Bảng AspNetRoles ...................................................................................... 51
4.2.4. Bảng AspNetUserClaims ............................................................................. 51
4.2.5. Bảng AspNetUserLogins ............................................................................. 52
4.2.6. Bảng AspNetUserRoles ............................................................................... 52
4.2.7. Bảng AspNetUsers ...................................................................................... 52
4.2.8. Bảng AspNetUserTokens ............................................................................ 54

do an


4.2.9. Bảng CartDetails.......................................................................................... 54

4.2.10. Bảng OrderDetails ..................................................................................... 54
4.2.11. Bảng OrderImportGoodsDetails ................................................................ 55
4.2.12. Bảng Orders ............................................................................................... 55
4.2.13. Bảng OrdersImportGoods ......................................................................... 56
4.2.14. Bảng ProductCategories ............................................................................ 57
4.2.15. Bảng Products ............................................................................................ 57
4.2.16. Bảng ProductImages .................................................................................. 58
4.2.17. Bảng EvaluationQuestion .......................................................................... 59
4.2.18. Bảng Comments ........................................................................................ 59
4.2.19. Bảng SlideShow ........................................................................................ 60
4.2.20. Bảng Suppliers ........................................................................................... 60
4.2.21. Bảng UserInfo............................................................................................ 61
4.2.22. Bảng OrderStatuses ................................................................................... 61
4.2.23. Bảng Wards ............................................................................................... 61
4.2.24. Bảng Districts ............................................................................................ 62
4.2.25. Bảng Provinces .......................................................................................... 62
CHƯƠNG 5: THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ ....................................................... 63
5.1. SƠ ĐỒ LỚP CỦA ỨNG DỤNG ........................................................................ 63
5.1.1. Sơ đồ lớp Model .......................................................................................... 63
5.1.2. Sơ đồ lớp Controller .................................................................................... 64
5.1.3. Sơ đồ lớp Helpers ........................................................................................ 65
5.1.4. Sơ đồ lớp ViewModel ................................................................................. 66
5.2. MÀN HÌNH TRANG CHỦ ................................................................................ 67
5.2.1. Giao diện...................................................................................................... 67
5.2.2. Mơ tả xử lý .................................................................................................. 67
5.3. MÀN HÌNH ĐĂNG NHẬP ................................................................................ 69
5.3.1. Giao diện...................................................................................................... 69
5.3.2. Mô tả xử lý .................................................................................................. 69
5.4. MÀN HÌNH ĐĂNG KÝ ..................................................................................... 70

do an


5.4.1. Giao diện...................................................................................................... 70
5.4.2. Mô tả xử lý .................................................................................................. 71
5.5. MÀN HÌNH XEM THƠNG TIN SẢN PHẨM .................................................. 72
5.5.1. Giao diện...................................................................................................... 72
5.5.2. Mơ tả xử lý .................................................................................................. 72
5.6. MÀN HÌNH GIỎ HÀNG ................................................................................... 73
5.6.1. Giao diện...................................................................................................... 73
5.6.2. Mô tả xử lý .................................................................................................. 73
5.7. MÀN HÌNH USER ............................................................................................. 74
5.7.1. Thơng tin cá nhân ........................................................................................ 74
5.7.2. Danh sách đơn hàng..................................................................................... 75
5.8. MÀN HÌNH TRANG QUẢN LÝ ADMIN ........................................................ 76
5.8.1. Màn hình quản lý đơn hàng ......................................................................... 76
CHƯƠNG 6: KIỂM THỬ PHẦN MỀM ........................................................................ 78
6.1. KẾ HOẠCH KIỂM THỬ CHUNG .................................................................... 78
6.2. CHI TIẾT TEST CASE ĐÃ KIỂM THỬ ........................................................... 78
6.2.1. Kiểm thử người dùng................................................................................... 78
6.2.2. Kiểm thử Admin .......................................................................................... 80
PHẦN KẾT LUẬN ............................................................................................................ 82
1. KẾT QUẢ ĐẠT ĐƯỢC .................................................................................................... 82
2. NHỮNG ƯU ĐIỂM VÀ NHƯỢC ĐIỂM KHI THỰC HIỆN ..................................................... 82
3. HƯỚNG PHÁT TRIỂN CHO TƯƠNG LAI .......................................................................... 82
TÀI LIỆU THAM KHẢO .................................................................................................. 83

do an

DANH MỤC HÌNH
Hình 1.1: Kiến trúc Angular 7 .............................................................................................. 8
Hình 1.2: MVC trong AspNet Core ................................................................................... 12
Hình 3.1: Lược đồ Use Case tổng quát .............................................................................. 21
Hình 3.2: Lược đồ Use Case quản lý thơng tin cá nhân ..................................................... 22
Hình 3.3: Lược đồ Use Case quản lý đơn hàng bán ........................................................... 23
Hình 3.4: Lược đồ Use Case quản lý giỏ hàng ................................................................... 24
Hình 3.5: Lược đồ Use Case quản lý nhập hàng ................................................................ 25
Hình 3.6: Lược đồ Use Case quản lý phân quyền .............................................................. 26
Hình 3.7: Lược đồ Use Case quản lý sản phẩm ................................................................. 26
Hình 3.8: Lược đồ Use Case thống kê................................................................................ 27
Hình 3.9: Lược đồ Use Case tra cứu sản phẩm .................................................................. 27
Hình 3.10: Lược đồ Use Case quản lý trình chiếu ............................................................. 28
Hình 3.11: Lược đồ hoạt động nghiệp vụ Đăng ký ............................................................ 29
Hình 3.12: Lược đồ tuần tự nghiệp vụ Đăng ký ................................................................. 30
Hình 3.13: Lược đồ hoạt động nghiệp vụ Đăng nhập ........................................................ 31
Hình 3.14: Lược đồ tuần tự nghiệp vụ Đăng nhập ............................................................. 32
Hình 3.15: Lược đồ hoạt động nghiệp vụ Chỉnh sửa thông tin .......................................... 33
Hình 3.16: Lược đồ tuần tự nghiệp vụ Chỉnh sửa thơng tin ............................................... 33
Hình 3.17: Lược đồ hoạt động nghiệp vụ Tra cứu sản phẩm ............................................. 33
Hình 3.18: Lược đồ tuần tự nghiệp vụ Tra cứu sản phẩm.................................................. 34
Hình 3.19: Lược đồ hoạt động nghiệp vụ Xem danh mục sản phẩm ................................. 34
Hình 3.20: Lược đồ tuần tự nghiệp vụ Xem danh mục sản phẩm...................................... 35
Hình 3.21: Lược đồ hoạt động nghiệp vụ Xem thông tin sản phẩm .................................. 35
Hình 3.22: Lược đồ tuần tự nghiệp vụ Xem thơng tin sản phẩm ....................................... 36
Hình 3.23: Lược đồ hoạt động nghiệp vụ Quản lý giỏ hàng .............................................. 36
Hình 3.24: Lược đồ tuần tự nghiệp vụ Quản lý giỏ hàng ................................................... 37
Hình 3.25: Lược đồ hoạt động nghiệp vụ Đặt hàng ........................................................... 37
Hình 3.26: Lược đồ tuần tự nghiệp vụ Đặt hàng ................................................................ 38
Hình 3.27: Lược đồ hoạt động nghiệp vụ Đánh giá sản phẩm ........................................... 38

do an


Hình 3.28: Lược đồ tuần tự nghiệp vụ Đánh giá sản phẩm................................................ 39
Hình 3.29: Lược đồ hoạt động nghiệp vụ Bình luận .......................................................... 39
Hình 3.30: Lược đồ tuần tự nghiệp vụ Bình Luận ............................................................. 40
Hình 3.31: Lược đồ hoạt động nghiệp vụ Quản lý nhập hàng ........................................... 41
Hình 3.32: Lược đồ tuần tự nghiệp vụ Quản lý nhập hàng ................................................ 42
Hình 3.33: Lược đồ hoạt động nghiệp vụ Quản lý sản phẩm............................................. 43
Hình 3.34: Lược đồ tuần tự nghiệp vụ Quản lý sản phẩm ................................................. 44
Hình 3.35: Lược đồ hoạt động nghiệp vụ Duyệt đơn hàng ................................................ 45
Hình 3.36: Lược đồ tuần tự nghiệp vụ Duyệt đơn hàng ..................................................... 45
Hình 3.37: Lược đồ hoạt động nghiệp vụ Thống kê .......................................................... 46
Hình 3.38: Lược đồ tuần tự nghiệp vụ Thống kê ............................................................... 46
Hình 3.39: Lược đồ hoạt động nghiệp vụ Trình chiếu ....................................................... 46
Hình 3.40: Lược đồ tuần tự nghiệp vụ Trình chiếu ............................................................ 47
Hình 3.41: Lược đồ hoạt động nghiệp vụ Quản lý phân quyền ......................................... 47
Hình 3.42: Lược đồ tuần tự nghiệp vụ Quản lý phân quyền .............................................. 48
Hình 4.1: Lược đồ tổng quát cơ sở dữ liệu ......................................................................... 49
Hình 5.1: Sơ đồ lớp Models ............................................................................................... 63
Hình 5.2: Sơ đồ lớp Controller ........................................................................................... 64
Hình 5.3: Sơ đồ lớp Helpers ............................................................................................... 65
Hình 5.4: Sơ đồ lớp ViewModel ........................................................................................ 66
Hình 5.5: Giao diện trang chủ ............................................................................................ 67
Hình 5.6: Giao diện đăng nhập ........................................................................................... 69
Hình 5.7: Giao diện đăng ký............................................................................................... 70
Hình 5.8: Giao diện chi tiết sản phẩm ................................................................................ 72
Hình 5.9: Giao diện chi tiết giỏ hàng ................................................................................. 73
Hình 5.10: Giao diện thơng tin cá nhân .............................................................................. 74

Hình 5.11: Giao diện đơn hàng cá nhân ............................................................................. 75
Hình 5.12: Giao diện quản lý sản phẩm ............................................................................. 76

do an


DANH MỤC BẢNG
Bảng 1.1: Lịch sử phát triển ASP.NET CORE .................................................................. 10
Bảng 4.1: Bảng Address ..................................................................................................... 50
Bảng 4.2: Bảng AspNetRoleClaims ................................................................................... 50
Bảng 4.3: Bảng AspNetRoles ............................................................................................. 51
Bảng 4.4: Bảng AspNetUserClaims ................................................................................... 51
Bảng 4.5: Bảng AspNetUserLogins ................................................................................... 52
Bảng 4.6: Bảng AspNetUserRoles ..................................................................................... 52
Bảng 4.7: Bảng AspNetUsers ............................................................................................. 52
Bảng 4.8: Bảng AspNetUserTokens................................................................................... 54
Bảng 4.9: Bảng CartDetails ................................................................................................ 54
Bảng 4.10: Bảng OrderDetails ........................................................................................... 54
Bảng 4.11: Bảng OrderImportGoodsDetails ...................................................................... 55
Bảng 4.12: Bảng Orders ..................................................................................................... 55
Bảng 4.13: Bảng OrdersImportGoods ................................................................................ 56
Bảng 4.14: Bảng ProductCategories................................................................................... 57
Bảng 4.15: Bảng Products .................................................................................................. 57
Bảng 4.16: Bảng ProductImages ........................................................................................ 58
Bảng 4.17: Bảng EvaluationQuestion ................................................................................ 59
Bảng 4.18: Bảng Comments ............................................................................................... 59
Bảng 4.19: Bảng SlideShow ............................................................................................... 60
Bảng 4.20: Bảng Suppliers ................................................................................................. 60
Bảng 4.21: Bảng UserInfo .................................................................................................. 61
Bảng 4.22: Bảng OrderStatuses .......................................................................................... 61

Bảng 4.23: Bảng Wards ...................................................................................................... 61
Bảng 4.24: Bảng Districts................................................................................................... 62
Bảng 4.25: Bảng Provinces ................................................................................................ 62
Bảng 5.1: Mô tả xử lý giao diện trang chủ ......................................................................... 67
Bảng 5.2: Mô tả xử lý giao diện đăng nhập ....................................................................... 69
Bảng 5.3: Mô tả xử lý giao diện đăng ký ........................................................................... 71

do an


Bảng 5.4: Mô tả xử lý giao diện sản phẩm ......................................................................... 72
Bảng 5.5: Mô tả xử lý giao diện giỏ hàng .......................................................................... 73
Bảng 5.6: Mô tả xử lý giao diện chỉnh sửa thông tin cá nhân ............................................ 74
Bảng 5.7: Mô tả xử lý giao diện đơn hàng cá nhân ............................................................ 75
Bảng 5.8: Mô tả xử lý giao diện quản lý sản phẩm ............................................................ 76
Bảng 6.1: Kiểm thử người dùng ......................................................................................... 78
Bảng 6.2: Kiểm thử admin ................................................................................................. 80

do an


DANH MỤC CHỮ VIẾT TẮT VÀ TỪ TIẾNG ANH
- API: viết tắt của chữ Application Programming Interface nghĩa là giao diện lập trình ứng
dụng.
- Test case: mơ tả một dữ liệu đầu vào (input), hành động (action) hoặc một sự kiện (event)
và kết quả truy vấn (expected response).
- CSDL: viết tắt của cơ sở dữ liệu.
- HTTP: Hypertext Transfer Protocol có nghĩa là giao thức truyển tải siêu văn bản
-MVC: Model View Controller là một kiến trúc phần mềm hay mơ hình thiết kế
- IIS: Internet Information Services là các dịch vụ dành cho máy chủ chạy trên nền hệ

điều hành Windows nhằm cung cấp và phân tán các thông tin lên mạng

do an


PHẦN MỞ ĐẦU
1. Tính cấp thiết của đề tài
Khi xã hội ngày càng phát triển, mức sống của người dân được nâng cao thu nhập
kinh tế ngày càng được cải thiện thì mua sắm trở thành một nhu cầu khơng thể thiếu của
mỗi người. Tuy nhiên, việc ra cửa hàng lựa chọn cho mình một sản phẩm ưng ý thì không
phải là điều dễ dàng với những người bận rộn, về vị trí địa lý cũng là vấn đề đáng quan tâm,
cùng với đó là khó so sánh các sản phẩm cùng loại chỉ với thời gian ít ỏi ở cửa hàng hay
chỉ thông qua người tiếp thị - họ chỉ muốn bán được sản phẩm.
Có vấn đề thì có cách giải quyết, thời đại Internet bùng nổ kéo theo nhiều loại hình
kinh doanh mới ra đời, trong đó có thương mại điện tử, mơ hình website bán hàng online
đang dần thay thế hình thức bán hàng truyền thống. Vừa giải quyết được những khó khăn
của bán hàng truyền thống, vừa mang đến nhiều lợi ích khác như có thể xem rõ thông tin
sản phẩm, lựa chọn những màu sắc phù hợp, so sánh các sản phẩm cùng loại với nhau từ
đó đưa ra lựa chọn sáng suốt nhất. Đồng thời chỉ với một vài thao tác đơn giản thông qua
chiếc smartphone hay máy vi tính là có thể nhận hàng ngay tại nhà, nhanh chống và tiện
lợi.
Về phía chủ cửa hàng có thể giảm nhiều chi phí: tiền mặt bằng, th tiếp thị, trang trí
cửa hàng...Quản lý hồn tồn qua website chính xác, nhanh chóng và dễ dàng.
Bên cạnh đó, đây cịn là đề tài khóa luận tốt nghiệp nên nhóm muốn nỗ lực đưa những
kiến thức đã tích góp được trong những năm học đại học thành một sản phẩm thiết thực, có
ý nghĩa.
2. Mục tiêu đề tài
- Tổng hợp cơ sở lý thuyết về Angular 7 và ASP .NET Core và ứng dụng 2 nền tảng
đó vào ứng dụng cụ thể thiết thực có giá trị.
- Nghiên cứu thực trạng và đánh giá về thị trường website bán hàng.

- Xây dựng được một ứng dụng hoàn chỉnh có thể sử dụng thực tế.
- Trình bày báo cáo khoa học và hợp lý về nội dung trong đề tài khóa luận tốt nghiệp.
- Đảm bảo tiếp tục phát triển ứng dụng, hoàn thiện mọi chức năng, nâng cấp đưa ra
thị trường sử dụng thực tế.
- Hiểu được nhu cầu mua bán hàng của mọi người và nhu cầu trải nghiệm website.

1

do an


3. Phương pháp nghiên cứu
Để thực hiện mục tiêu và nhiệm vụ nghiên cứu, nhóm đã sử dụng các phương pháp
nghiên cứu sau:
- Phương pháp nghiên cứu tài liệu: Đọc các tài liệu tham khảo, xem video cách sử
dụng tính năng.
- Phương pháp chuyên gia: Nhờ sự góp ý, giúp đỡ, tư vấn từ giáo viên hướng dẫn và
các thầy cô trong khoa Công nghệ thông tin trường Đại học Sư phạm kỹ thuật
TP.HCM.
4. Đối tượng, phạm vi nghiên cứu
4.1. Đối tượng nghiên cứu
- Angular 7, ASP.NET Core
- Cơ chế hoạt động của website bán hàng trực tuyến
- Nhu cầu, khả năng sử dụng website bán hàng trong thực tế
4.2. Phạm vi nghiên cứu
Về phạm vi nghiên cứu nhóm chủ yếu nghiên cứu về cách sử dụng Angular và
Asp.net core để xây dựng được một website bán hàng cơ bản có thể sử dụng được.
Tương lai có thể mở rộng quy mô, ứng dụng thêm nhiều chức năng mới phù hợp với
nhu cầu người dùng.
5. Phân tích những website bán hàng online trên thị trường

5.1. Khảo sát website bán hàng online Lazada
-

Ưu điểm:
+ Có thể đăng nhập bằng facebook hoặc google+
+ Phân chia danh mục sản phẩm theo menu đa cấp, dễ tìm kiếm ngành hàng
+ Kiểm tra đơn hàng nhanh chỉ với email và mã đơn hàng không cần đăng nhập
+ Cho phép lựa chọn sản phẩm trong giỏ hàng để đặt hàng (không cần đặt tất
cả)
+ Không hiển thị toàn bộ sản phẩm (Cho phép xem thêm sản phẩm với nút “tải
thêm” mỗi lần thêm 4 hàng)
+ Hiển thị đường dẫn đến sản phẩm (xem thêm các sản phẩm cùng ngành hàng)
+ Cho phép sắp xếp sản phẩm theo độ phổ biến hoặc theo giá

2

do an


+ Hỗ trợ lọc sản phẩm với thương hiệu, vị trí, giá cả, đánh giá (rating),...
+ Phân trang sản phẩm
+ Hỗ trợ chế độ xem lưới hoặc xem danh sách
+ Thêm nhiều vị trí đặt hàng, nhớ vị trí đặt hàng trước đó
+ Rating/đánh giá sản phẩm
+ Xem lại lịch sử tìm kiếm (lưu bằng cookie)
+ Gợi ý sản phẩm khác mà mọi người cũng xem khi xem sản phẩm này
+ Chat trực tiếp với người bán hàng
-

Nhược điểm

+ Danh sách tìm kiếm phổ biến thay đổi ngay sau khi tải lại trang => có thể chỉ
là sản phẩm ngẫu nhiên
+ Chức năng tìm kiếm một cho tất cả, dẫn đến tìm kiếm khơng chính xác =>
trang adayroi.com khắc phục bằng thêm tùy chọn ngành hàng khi tìm kiếm
+ Khơng xem lại được những sản phẩm đã xem
+ Mỗi câu hỏi chỉ một câu trả lời, không thể tiếp tục cuộc trò chuyện.

5.2. Khảo sát website bán hàng Shopee
-

Ưu điểm:
+ Phải nhập mã kích hoạt sms trước mỗi lần đăng nhập.
+ Gợi ý sản phẩm tương tự (cùng tên hoặc cùng chức năng) thay vì gợi ý sản
phẩm người khác cũng tìm kiếm thêm như lazada
+ Chức năng lọc đánh giá thông qua sao được hiển thị rõ ràng thành nhiều nút
khác nhau thay vì ẩn trong 1 nút => thuận tiện cho việc xem đánh giá nhanh.
+ Có thể đánh giá sản phẩm bằng hình ảnh.
+ Gợi ý từ khóa tìm kiếm ngay dưới thanh search
+ Tìm kiếm thơng qua tag # nhanh và chính xác
+ Thêm nhanh sản phẩm vào giỏ hàng
+ Tải thêm danh sách sản phẩm mỗi khi trượt thanh scrollbar
+ Chat trực tiếp với người bán hàng

-

Nhược điểm:

3

do an

+ Chỉ xem được đơn hàng trong tài khoản của mình (khơng hỗ trợ tra cứu qua
mã hóa đơn)
+ Chỉ được đánh giá sản phẩm, không được đặt câu hỏi hay bình luận
+ Khơng xem lại được sản phẩm đã xem trước đó (Tiki có chức năng này)
5.3. Khảo sát Thế giới di động
- Ưu điểm:
+ Không cần tạo tài khoản để mua hàng
+ Kinh doanh nhiều mặt hàng về thiết bị điện tử
+ Đánh giá bình luận sản phẩm khi không cần tài khoản
+ Trên header khi cuộn xuống sâu sẽ cho mình biết mình đang ở hạng mục sản
phẩm nào
+ Có tính năng xem 360 độ rất hay
+ Có danh mục hỏi đáp và thào luận
+ Sắp xếp sản phẩm theo giá, tính năng, trả góp 0%
- Nhược điểm
+ Khách hàng mỗi lần đặt hàng đều phải điền thông tin, không thể sử dụng
thông tin cũ
+ Quảng cáo khá nhiều dễ bị rối mắt
+ Nội dung trang khá dày đặc

6. Kết quả dự kiến đạt được
-

Có thể vận dụng sử dụng được Angular và Asp.net Core.

-

Hoàn thành cơ bản được website bán hàng, hoạt động mượt mà, giao diện đẹp.

-

Hiểu sâu về quy trình làm báo cáo luận văn.

-

Thấy được những tính năng thiết yếu đối với một trang web bán hàng.

4

do an


PHẦN NỘI DUNG
CHƯƠNG 1: TÌM HIỂU VỀ ANGULAR + ASP.NET CORE
1.1. ANGULAR 7
1.1.1. Giới thiệu về Angular 7 và nguồn gốc ra đời
Angular là gì:
Angular (thường được gọi là "Angular 2+" hoặc "Angular v2 trở lên") là một khung
ứng dụng web mặt trước mã nguồn mở dựa trên TypeScript do Nhóm Angular tại Google
và cộng đồng của các cá nhân và tập đoàn. Angular là một bản viết lại hoàn chỉnh từ cùng
một nhóm đã xây dựng AngularJS
Angular là một nền tảng giúp bạn dễ dàng xây dựng các ứng dụng với web. Angular
kết hợp các mẫu khai báo, tiêm phụ thuộc, cơng cụ từ đầu đến cuối và tích hợp các thực
tiễn tốt nhất để giải quyết các thách thức phát triển. Đơn giản mà nói, Angular là một
Javascript framework để xây dựng những ứng dụng phía client sử dụng HTML, CSS và
một ngơn ngữ lập trình như Javascript
Trang chủ của Angular: />1.1.2. Lịch sử phát triển
- Khởi đầu

Ban đầu, bản viết lại của AngularJS được nhóm gọi là "Angular 2", nhưng điều này
dẫn đến sự nhầm lẫn giữa các nhà phát triển. Để làm rõ, nhóm đã thơng báo rằng các thuật
ngữ riêng biệt nên được sử dụng cho từng khung với "AngularJS" đề cập đến các phiên bản
1.X và "Angular" mà khơng có "JS" đề cập đến các phiên bản 2 trở lên.
- Phiên bản 2.x
Angular 2.0 đã được công bố tại hội nghị ng-Europe 22-23. Tháng 10 năm 2014.
Những thay đổi mạnh mẽ trong phiên bản 2.0 đã tạo ra tranh cãi đáng kể giữa các nhà phát
triển. Vào ngày 30 tháng 4 năm 2015, các nhà phát triển Angular đã thông báo rằng Angular
2 đã chuyển từ Alpha sang Developer Preview. Angular 2 chuyển sang Beta vào tháng 12
năm 2015, và ứng cử viên phát hành đầu tiên được xuất bản vào tháng 5 năm 2016. Phiên
bản cuối cùng được phát hành vào ngày 14 tháng 9 năm 2016.

5

do an