(Đồ án hcmute) xây dựng web quản lý cửa hàng thời trang sử dụng asp net core và angular

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 WEB QUẢN LÝ CỬA HÀNG THỜI TRANG SỬ DỤNG ASP.NET CORE VÀ ANGULAR GVHD: ThS NGUYỄN MINH ĐẠO SVTH: BÙI NGỌC LÂM NGUYỄN VIỆT LONG S K L0 Tp Hồ Chí Minh, 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  BÁO CÁO KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG WEB QUẢN LÝ CỬA HÀNG THỜI TRANG SỬ DỤNG ASP.NET CORE VÀ ANGULAR GVHD: Thạc sĩ Nguyễn Minh Đạo Nhóm SVTH: Bùi Ngọc Lâm 18110140 Nguyễn Việt Long 17110177 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO  BÁO CÁO KHÓA LUẬN TỐT NGHIỆP ĐỀ TÀI XÂY DỰNG WEB QUẢN LÝ CỬA HÀNG THỜI TRANG SỬ DỤNG ASP.NET CORE VÀ ANGULAR GVHD: Thạc sĩ Nguyễn Minh Đạo Nhóm SVTH: Bùi Ngọc Lâm 18110140 Nguyễn Việt Long 17110177 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐÀO TẠO CLC Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Bùi Ngọc Lâm MSSV 1: 18110140 Họ tên Sinh viên 2: Nguyễn Việt Long MSSV 2: 17110177 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng Web quản lí cửa hàng thời trang sử dụng ASP.NET CORE Angular Họ tên Giáo viên hướng dẫn: Thạc sĩ Nguyễn Minh Đạo NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày 27 tháng 10 năm 2022 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA ĐÀO TẠO CLC Độc lập – Tự – Hạnh Phúc ******* ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên Sinh viên 1: Bùi Ngọc Lâm MSSV 1: 18110140 Họ tên Sinh viên 2: Nguyễn Việt Long MSSV 2: 17110177 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng Web quản lí cửa hàng thời trang sử dụng ASP.NET CORE Angular Họ tên Giáo viên phản biện: Lê Văn Vinh NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: Tp Hồ Chí Minh, ngày tháng Giáo viên phản biện (Ký & ghi rõ họ tên) năm 2021 MỤC LỤC MỤC LỤC DANH SÁCH HÌNH ẢNH DANH SÁCH BẢNG BIỂU DANH SÁCH TỪ VIẾT TẮT 12 LỜI CẢM ƠN 13 LỜI GIỚI THIỆU 14 PHẦN MỞ ĐẦU 15 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 15 ĐỐI TƯỢNG NGHIÊN CỨU 16 PHẠM VI NGHIÊN CỨU 16 PHÂN TÍCH CÁC ỨNG DỤNG CÓ LIÊN QUAN 16 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 17 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 17 CHƯƠNG CƠ SỞ LÍ THUYẾT 18 1.1 ANGULAR 18 1.2 SQL SERVER 22 1.3 ASP NET CORE 23 1.4 DELOY 24 CHƯƠNG KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 26 2.1 KHẢO SÁT HIỆN TRẠNG 26 2.2 XÁC ĐỊNH YÊU CẦU 28 2.3 MƠ HÌNH HÓA YÊU CẦU 38 CHƯƠNG THIẾT KẾ PHẦN MỀM 55 3.1 TỔNG QUAN HỆ THỐNG 55 3.2 LƯỢC ĐỒ LỚP 55 3.3 LƯỢC ĐỒ TUẦN TỰ 56 3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 81 3.5 THIẾT KẾ CHỨC NĂNG (BACKEND SWAGGER) 96 3.6 THIẾT KẾ GIAO DIỆN 102 CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ 136 4.1 CÀI ĐẶT 136 4.2 KIỂM THỬ 140 CHƯƠNG PHẦN KẾT LUẬN 153 5.1 KẾT QUẢ ĐẠT ĐƯỢC 153 5.2 CHƯƠNG TRÌNH ĐÃ LÀM ĐƯỢC 153 5.3 ƯU VÀ NHƯỢC ĐIỂM ỨNG DỤNG 153 5.4 HƯỚNG PHÁT TRIỂN 154 Tài liệu tham khảo 155 Link source code 156 DANH SÁCH HÌNH ẢNH Hình 1.1.3.1 Các tính cốt lõi Angular 19 Hình 2.1.1.1 Hình ảnh trang shopee.vn 26 Hình 2.1.2.1 Hình ảnh trang thecosmo.vn 27 Hình 2.1.3.1 Hình ảnh trang juno.vn 27 Hình 2.1.4.1 Hình ảnh trang marc.com.vn 28 Hình 2.3.1.1 Usecase cho khách hàng 38 Hình 2.3.1.2 Usecase cho quản lý 39 Hình 3.1.1.1 Thiết kế tổng quan hệ thống 55 Hình 3.2.1.1 Hình ảnh lược đồ lớp 56 Hình 3.3.1.1 Lược đồ chức đăng kí 56 Hình 3.3.2.1 Lược đồ chức đăng nhập 57 Hình 3.3.3.1 Lược đồ chức quên mật 58 Hình 3.3.4.1 Lược đồ chức thêm sản phẩm vào giỏ hàng 58 Hình 3.3.5.1 Lược đồ chức toán 60 Hình 3.3.6.1 Lược đồ chức chỉnh sửa số lượng sản phẩm giỏ hàng 61 Hình 3.3.7.1 Lược đồ chức xóa sản phẩm giỏ hàng 61 Hình 3.3.8.1 Lược đồ chức cập nhật thông tin 62 Hình 3.3.9.1 Lược đồ chức xem sản phẩm 62 Hình 3.3.10.1 Lược đồ chức xem đơn hàng 63 Hình 3.3.11.1 Lược đồ chức hủy đơn hàng 63 Hình 3.3.12.1 Lược đồ chức xem thông báo 64 Hình 3.3.13.1 Lược đồ chức đổi mật 64 Hình 3.3.14.1 Lược đồ chức thêm địa khách hàng 65 Hình 3.3.15.1 Lược đồ chỉnh sửa địa khách hàng 65 Hình 3.3.16.1 Lược đồ xóa địa khách hàng 66 Hình 3.3.17.1 Lược đồ thêm vai trị 66 Hình 3.3.18.1 Lược đồ xóa vai trị 67 Hình 3.3.19.1 Lược đồ chức chỉnh sửa vai trị 67 Hình 3.3.20.1 Lược đồ chức tìm kiếm vai trị 68 Hình 3.3.21.1 Lược đồ chức thêm nhân viên 68 Hình 3.3.22.1 Lược đồ chức chỉnh sửa thông tin nhân viên 69 Hình 3.3.23.1 Lược đồ chức xóa nhân viên 69 Hình 3.3.24.1 Lược đồ chức tìm kiếm nhân viên 70 Hình 3.3.25.1 Lược đồ chức quản lí lương 70 Hình 3.3.26.1 Lược đồ chức tìm kiếm khách hàng 71 Hình 3.3.27.1 Lược đồ chức xem thơng tin khách hàng 71 Hình 3.3.28.1 Lược đồ chức xóa khách hàng 72 Hình 3.3.29.1 Lược đồ chức thêm sản phẩm 72 Hình 3.3.30.1 Lược đồ chức tìm kiếm sản phẩm 73 Hình 3.3.31.1 Lược đồ chức xem thông tin sản phẩm 73 Hình 3.3.32.1 Lược đồ chức chỉnh sửa thông tin sản phẩm 74 Hình 3.3.33.1 Lược đồ chức thêm ảnh sản phẩm 74 Hình 3.3.34.1 Lược đồ chức xóa sản phẩm 75 Hình 3.3.35.1 Lược đồ chức tìm kiếm loại sản phẩm 75 Hình 3.3.36.1 Lược đồ chức thêm loại sản phẩm 76 Hình 3.3.37.1 Lược đồ chức xem loại sản phẩm 76 Hình 3.3.38.1 Lược đồ chức chỉnh sửa loại sản phẩm 77 Hình 3.3.39.1 Lược đồ chức xóa loại sản phẩm 77 Hình 3.3.40.1 Lược đồ chức tìm kiếm voucher 78 Hình 3.3.41.1 Lược đồ chức thêm voucher 78 Hình 3.3.42.1 Lược đồ chức chỉnh voucher 79 Hình 3.3.43.1 Lược đồ chức xóa voucher 79 Hình 3.3.44.1 Lược đồ chức xem thông tin voucher 80 Hình 3.3.45.1 Lược đồ chức xác nhận đơn hàng 80 Hình 3.4.1.1 Lược đồ ERD 81 Hình 3.4.1.2 Lược đồ diagram sơ liệu 81 Hình 3.5.1.1 Thiết kế chức địa 96 Hình 3.5.2.1 Thiết kế chức quản trị viên 96 Hình 3.5.3.1 Thiết kế chức giỏ hàng 97 Hình 3.5.4.1 Thiết kế chức giỏ hàng 97 Hình 3.5.5.1 Thiết kế chức thơng tin shop 97 Hình 3.5.6.1 Thiết kế chức thơng báo 98 Hình 3.5.7.1 Thiết kế chức đặt hàng 99 Hình 3.5.8.1 Thiết kế chức chi tiết đặt hàng 99 Hình 3.5.9.1 Thiết kế chức sản phẩm 99 Hình 3.5.10.1 Thiết kế chức người dùng 100 Hình 3.5.11.1 Thiết kế chức nhân viên 100 Hình 3.5.12.1 Thiết kế chức lương nhân viên 100 Hình 3.5.13.1 Thiết kế chức số liệu thống kê 101 Hình 3.5.14.1 Thiết kế chức trạng thái đơn hàng 101 Hình 3.5.15.1 Thiết kế chức giao dịch 101 Hình 3.5.16.1 Thiết kế chức người dùng 102 Hình 4.2.2.1 Kết kiểm thử TC_DN_01 Hình 4.2.2.2 Kết kiểm thử TC_DN_02 143 Hình 4.4.2.3 Kết kiểm thử TC_DN_03 Kiểm thử chức Đăng kí STT Mơ tả Các bước Dữ liệu thử kiểm thử Kết Kết mong đợi Kết thực tế TC_DK_01 Kiểm tra phản hồi hệ thống người dùng nhập thơng tin đăng kí xác - - Click button Nhập email: Thông Như Đạt "cskhdoublel@gmail.com" báo đăng mong “Đăng kí” Nhập tên đăng nhập: "builam02" header Nhập tên người dùng: "Bùi Nhập Ngọc Lâm" email Nhập tên Nhập số điện thoại: "0364681528" đăng kí thành đợi cơng, u cầu xác nhận email điều hướng nhập Nhập mật khẩu: đến trang Nhập tên "Lam09022000" đăng người nhập Nhập xác nhận mật khẩu: dùng 144 - Nhập số "Lam09022000" điện thoại - Nhập mật Nhập lại - mật Nhấn nút - Nhấn "Đăng kí" “Đăng kí” TC_DK_02 Khi đăng ký tài khoản với Email sai định dạng khơng có “@gmail.com” - Click Nhập email: "cskhdoublel Thơng Như button “Đăng kí” header Nhập email Nhập tên " mong đợi đăng - - báo Nhập tên đăng nhập: “Email không "builam02" hợp lệ” Nhập tên người dùng: "Bùi Ngọc Lâm" Nhập số điện "0364681528" thoại: nhập Nhập mật khẩu: Nhập tên "Lam09022000" người Nhập xác nhận mật khẩu: dùng "Lam09022000" Nhập địa Nhấn "Đăng kí" Nhập số điện thoại Nhập mật Nhập lại mật Nhấn nút “Đăng 145 Đạt kí” TC_DN_03 Khi đăng ký với mật ký tự khơng có chữ hoa thơng báo mong muốn “Mật khơng hợp lệ ( mật kí tự , nhiều 20 kí tự , bao gồm chữ hoa, chữ thường số)”, - Thông Như Đạt Nhập email: báo “Mật mong “Đăng kí” "cskhdoublel@gmail.com đợi Click button " header Nhập tên đăng nhập: Nhập "builam02" email Nhập tên Nhập tên người dùng: "Bùi Ngọc Lâm" đăng khơng hợp lệ ( mật kí tự , nhiều thoại: 20 kí tự , bao nhập Nhập số điện Nhập tên "0364681528" người Nhập mật khẩu: "Lam" dùng Nhập địa Nhập xác nhận mật khẩu: Nhập số "Lam" điện thoại Nhập mật Nhập lại Nhấn "Đăng kí" mật Nhấn nút “Đăng kí” Bảng 4.4.2.2 Test case chức đăng kí 146 gồm chữ hoa, chữ thường số” Hình 4.4.2.4 Kết kiểm thử test case TC_DK_01 Hình 4.4.2.5 Kết test case TC_DK_02 147 Hình 4.4.2.6 Kết test case TC_DN_03 Kiểm thử chức Thêm loại sản phẩm STT Mô tả Các bước Dữ liệu thử kiểm thử TC_TLSP_01 Kiểm tra chức thêm loại - Kết mong đợi Kết thực tế Kết Click Tên loại sản Chuyển hướng đến trang tất Như Đạt “Quản lí phẩm “Sơ Mi loại sản phẩm mong loại sản Nam” đợi phẩm” Mô tả “Đây sơ mi nam” 148 sản - phẩm - Nhấn Hình ảnh nút “sominam.jpeg” “Thêm” Nhập tên loại sản phẩm, mô tả - Thêm ảnh cho loại sản phẩm TC_TLSP_02 Kiểm tra chức thêm loại - - Click “Quản lí loại sản phẩm” Nhấn nút sản “Thêm” phẩm người dung không nhập tên Nhập mô tả “Đây sơ mi” Thêm ảnh cho loại sản loại sp phẩm Tên loại sản Thông báo “Chọn tên loại Như Đạt phẩm “” sản phẩm” mong đợi Mơ tả “Đây sơ mi nam” Hình ảnh “sominam.jpeg” Bảng 4.4.2.3 Test case chức thêm loại sản phẩm 149 Hình 4.4.2.7 Kết testcase TC_TLSP_01 150 Hình 4.4.2.8 Kết testcase TC_TLSP_02 Kiểm thử chức Xóa loại sản phẩm STT Mơ tả TC_XLSP_01 Kiểm Các bước Dữ liệu thử Kết mong đợi kiểm thử - tra chức xóa loại sản phẩm Kết thực tế Kết Click Đưa thông báo yêu cầu xác Như Đạt “Quản lí loại sản phẩm” Nhấn nút “Xóa” nhận xóa mong Chuyển hướng đến trang tất đợi loại sản phẩm Bảng 4.4.2.4 Test case chức xóa loại sản phẩm 151 Hình 4.4.2.9 Kết testcase TC_XLSP_01 152 CHƯƠNG PHẦN KẾT LUẬN 5.1 KẾT QUẢ ĐẠT ĐƯỢC Sau thời gian nghiên cứu thực đề tài “Xây dựng web bán đồ gia dụng sử dụng ASP.NET Core Angular JS”, nhóm em đạt kết sau: - Nắm bắt cách xây dựng Web API ASP.NET Core, thiết kế thực thi chức giao diện người dùng Angular JS Ứng dụng Json Web Token để xác thực người dùng thực thi API tương ứng theo quyền Học cách deploy Web API, Web Client Tìm hiểu cách sử dụng dịch vụ SQL Azure để lưu trữ liệu, nghiệp vụ web bán hàng online 5.2 CHƯƠNG TRÌNH ĐÃ LÀM ĐƯỢC Xây dựng hoàn chỉnh phần mềm với chức sau: - Xây dựng xong Web API web bán hàng với tính năng: xem sản phẩm, đặt mua sản phẩm, thêm sửa xóa loại sản phẩm, thêm sửa xóa sản phẩm, thống kê doanh thu tháng theo năm, thống kê top sản phẩm bán chạy, thống kê đơn đặt, kiểm duyệt đơn hàng, xem lịch sử mua hàng,… - Các chức web bán hàng hồn chỉnh - Áp dụng cơng nghệ sử dụng nhiều thời điểm vào tiểu luận chuyên ngành nhóm, sử dụng Json Web Token để xác thực người dùng thực thi API 5.3 ƯU VÀ NHƯỢC ĐIỂM ỨNG DỤNG Ưu điểm - Ứng dụng hoạt động xác mức tương đối, xảy lỗi logic - Chia Front-end Back-end riêng để thuận tiện cho việc quản lý phát triển ứng dụng - Back-end sử dụng công nghệ ASP.NET Core hỗ trợ tốt cho đa tảng 153 - Cơ chế bảo mật tốt Json Web Token tạo tính xác thực quyền thực thi API xác Nhược điểm - Các tính xây dựng ổn mức độ hoàn thiện chưa cao giới hạn mặt người thời gian - Chưa phát triển thêm Json Web Token refresh nên token hết hạn phải đăng xuất đăng nhập lại để thực chức - Chưa kiểm thử hiệu xuất, lưu lượng tối đa người sửng dụng lúc để web hoạt động bình thường 5.4 HƯỚNG PHÁT TRIỂN Trong tương lai nhóm dự kiến phát triển thêm chức cho ứng dụng như: Đăng nhập nhiều hình thức (Facebook, Google, ) Cho phép lọc hóa đơn theo khoảng thời gian người dùng chọn, mở rộng hình thức tốn online nhiều người sử dụng Momo Xây dựng hệ thống giao hàng Gợi ý sản phẩm dựa thói quen mua sắm khách hàng, áp dụng thêm mã giảm giá 154 Tài liệu tham khảo [1] https://viblo.asia/p/gioi-thieu-tong-quan-ve-angular-07LKX9j2ZV4 [2] https://freetuts.net/tong-quan-ve-angularjs-200.html [3] http://sqladvice.com/tong-quan-ve-sql-server/ [4] https://topdev.vn/blog/asp-net-core-la-gi/ [5] https://getbootstrap.com/ [6] https://codegym.vn/blog/2020/05/04/huong-dan-deploy-angular-len-netlify/ [7] https://learn.microsoft.com/en-us/aspnet/webforms/overview/deployment/visual-studio-web-deployment/deploying-to-iis 155 Link source code [1] Link Github FE admin: https://github.com/ngoclam9200/KLTN.FE.ADMIN [1] Link Github FE người dùng: https://github.com/ngoclam9200/KLTN.FE.USER [2] Link Github BE: https://github.com/ngoclam9200/KLTN.BE 156