Xây dựng website bán 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 KHĨA LUẬN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN HÀNG THỜI TRANG SỬ DỤNG ASP.NET CORE VÀ ANGULAR GVHD: TS LÊ VĂN VINH SVTH: VÕ HỒNG TIÊN GIANG NGUYỄN THỊ THẢO SKL009443 Tp.Hồ Chí Minh, năm 2022 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 VÕ HỒNG TIÊN GIANG – 18110276 NGUYỄN THỊ THẢO – 18110367 Đề Tài: XÂY DỰNG WEBSITE BÁN HÀNG THỜI TRANG SỬ DỤNG ASP.NET CORE VÀ ANGULAR KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2018-2022 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 VÕ HỒNG TIÊN GIANG – 18110276 NGUYỄN THỊ THẢO – 18110367 Đề Tài: XÂY DỰNG WEBSITE BÁN HÀNG THỜI TRANG SỬ DỤNG ASP.NET CORE VÀ ANGULAR KHÓA LUẬN TỐT NGHIỆP KỸ SƯ CNTT GIÁO VIÊN HƯỚNG DẪN TS LÊ VĂN VINH KHÓA 2018-2022 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độ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: Võ Hồng Tiên Giang MSSV 1: 18110276 Họ tên Sinh viên 2: Nguyễn Thị Thảo MSSV 2: 18110367 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán hàng thời trang sử dụng ASP.NET Core Angular Họ tên Giáo viên hướng dẫn: TS 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 hướng dẫn (Ký & ghi rõ họ tên) năm 2022 ĐH SƯ PHẠM KỸ THUẬT TP HCM CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM KHOA CNTT Độ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: Võ Hồng Tiên Giang MSSV 1: 18110276 Họ tên Sinh viên 2: Nguyễn Thị Thảo MSSV 2: 18110367 Ngành: Công nghệ Thông tin Tên đề tài: Xây dựng website bán hàng thời trang sử dụng ASP.NET Core Angular Họ tên Giáo viên phản biện: ThS Nguyễn Hữu Trung 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 2022 LỜI CẢM ƠN Nhóm chúng em xin chân thành cảm ơn thầy Lê Văn Vinh hỗ trợ, dẫn chúng em trình thực đồ án Thầy đưa bình luận, góp ý để giúp chúng em vận dụng kiến thức học để hoàn thành đồ án tốt Nhóm xin chân thành gửi lời cảm ơn tới thầy cô khoa Công nghệ thông tin, trường Đại học Sư phạm Kỹ thuật giảng dạy, cung cấp cho chúng em kiến thức để chúng em thực hoàn thành đồ án Một lần nữa, nhóm chúng em xin chân thành cảm ơn Chúng em mong nhận lời nhận xét, góp ý thầy để cải thiện đồ án tương lai Trân trọng Tp Hồ Chí Minh, ngày tháng năm 2022 Nhóm sinh viên (Ký & ghi rõ họ tên) Võ Hồng Tiên Giang Nguyễn Thị Thảo ĐỀ CƯƠNG KHĨA LUẬN TỐT NGHIỆP CƠNG NGHỆ PHẦN MỀM Họ tên Sinh viên 1: Võ Hồng Tiên Giang MSSV 1: 18110276 Họ tên Sinh viên 2: Nguyễn Thị Thảo MSSV 2: 18110367 Thời gian làm khóa luận: 14/02/2022 – 10/07/2022 Chuyên ngành: Công nghệ phần mềm Tên đề tài: Xây dựng website bán hàng thời trang sử dụng ASP.NET Core Angular Giáo viên hướng dẫn: TS Lê Văn Vinh Nhiệm vụ luận văn: Lý thuyết: Tìm hiểu cơng nghệ: ASP.NET Core, Angular, SQL Server, Json Web Token, Cloudinary Thực hành: Sử dụng ASP.NET Core để viết APIs cho module hệ thống Sử dụng SQL Server để lưu trữ liệu người dùng hệ thống Sử dụng Json Web Token để xác thực ủy quyền cho hệ thống APIs hoạt động tốt hiệu Sử dụng Angular làm framework để thiết kế xử lý giao diện web cho người dùng thao tác Sử dụng Cloudinary để lưu trữ đám mây hình ảnh hệ thống MỤC LỤC PHẦN MỞ ĐẦU Tính cấp thiết đề tài Mục đích đề tài Đối tượng phạm vi nghiên cứu Kết dự kiến đạt CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 ASP.NET Core 1.2 Angular 1.3 JSON Web Token 1.4 Cloudinary 1.5 SQL Server 1.6 Paypal CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 Khảo sát trạng 2.2 Xác định u cẩu 2.3 Mơ hình hóa yêu cầu CHƯƠNG 3: THIẾT KẾ PHẦN MỀM 3.1 Lược đồ lớp 3.2 Thiết kế sở liệu 3.3 Lược đồ 3.4 Thiết kế giao diện CHƯƠNG 4: CÀI ĐẶT VÀ KIỂM THỬ 4.1 Cài đặt ứng dụng 4.2 Kiểm thử ứng dụng 4.2.1 Kế hoạch kiểm thử 4.2.2 Quy trình kiểm thử 4.2.3 Kiểm thử ứng dụng PHẦN KẾT LUẬN Kết đạt Ưu điểm Nhược điểm TÀI LIỆU THAM KHẢO KẾ HOẠCH THỰC HIỆN STT Thời gian 14/02/202228/02/2022 Công việc Thảo luận, đề chức cần thiết đề tài Viết đặc tả đề tài (nêu rõ thành phần liệu, phân quyền, chức giao diện cần có để project chạy tốt) 01/03/202210/03/2022 11/03/202231/03/2022 01/04/202230/04/2022 1.Thiết kế CSDL ràng buộc (dùng ERD) Cài đặt CSDL ràng buộc Tìm hiểu cơng nghệ cần thiết: ASP.NET Core, Angular, SQL Server, JWT, PayPal, Cloudinary Cài đặt chức thuộc trang quản lý quản trị viên: - Quản lý danh mục sản phẩm - Quản lý sản phẩm - Quản lý tài khoản - Quản lý khuyến - Quản lý đơn hàng - Quản lý thông tin cửa hàng - Thống kê dạng biểu đồ Hoàn thành chức phân quyền, đăng nhập, đăng xuất 01/05/202231/05/2022 Cài đặt chức thuộc trang khách hàng sử dụng - Quản lý thông tin cá nhân - Đổi mật - Xem tìm kiếm sản phẩm Ghi 4.2 KIỂM THỬ ỨNG DỤNG 4.2.1 Kế hoạch kiểm thử Lập kế hoạch kiểm thử để kiểm tra đảm bảo chắn sản phẩm thỏa mãn yêu cầu đề ra: sản phẩm khớp với thiết kế hay khơng? Có nhiều lỗi q trình sử dụng khơng? Ngồi cịn chọn phương pháp kiểm thử chiến lược kiểm thử phù hợp Kế hoạch bao gồm: Test Plan, Test Case chuẩn bị phân chia cho thành viên nhóm kiểm thử kỹ lại chức Quá trình kiểm thử dùng mẫu kiểm thử có sẵn thực Excel, sau kiểm thử người kiểm thử chức phải đánh giá Test Case đạt (Pass) hay khơng đạt (Fail), đồng thời tạo Bug Report để kịp thời sửa lỗi 4.2.2 Quy trình kiểm thử Quy trình kiểm thử phần mềm thực theo trình tự bước sau: 4.2.2.1 Phân tích yêu cầu - Requirement Analysis Cần nắm rõ yêu cầu phần mềm để thiết kế đảm bảo bao phủ hết lỗi xảy ra, lập kế hoạch kiểu thử thích hợp 4.2.2.2 Lập kế hoạch kiểm thử - Test Planning Lập kế hoạch xác định phạm vi chiến lược kiểm thử: sử dụng loại test nào? Test phạm vi, vấn đề nào? Như đạt? Là lỗi? Ngày bắt đầu kiểm thử? Nhận dạng, xác định rủi ro trình kiểm thử kế hoạch đối phó 4.2.2.3 Phát triển kiểm thử - Test Case Development Thiết kế danh sách Test Case từ yêu cầu chức phi chức theo kế hoạch kiểm thử làm trước Danh sách Test Case kiểm định đánh giá lại người phụ trách Các đánh giá trả lại cho tester để tiến hành điều chỉnh, bổ sung cần thiết người kiểm thử tiến hành điều chỉnh lại Test Case 4.2.2.4 Thực thi kiểm thử - Test Execution Khi có Test Case hoàn chỉnh, phần mềm hoàn thành giai đoạn develop tiến hành thực kiểm thử theo Test Case làm trước phải ưu lại kết trình thực thi kiểm thử 140 4.2.2.5 Báo cáo kiểm thử - Test Report Khi kiểm thử phải chạy Test Case, gặp Test Case fail phải ghi lại Với trường hợp test fail, việc ghi chép liệu, người kiểm thử phải chụp ảnh hình để làm chứng lỗi Viết báo cáo lỗi tìm được, tạo bảng tổng kết đánh giá hoạt động kiểm lỗi Xác định Test Case có đạt tiêu chí thành cơng hay khơng? Hồn thành hay chưa? Người kiểm thử phải liên tục cập nhật báo cáo trình kiểm thử, đảm bảo khơng bỏ sót 4.2.2.6 Phân tích kết kiểm thử - Test Result Analysis Sau có báo cáo kiểm thử thực phân tích báo cáo Nếu có Test Case lỗi tiến hành sửa lỗi Có thể tiến hành chỉnh sửa bổ sung Test Case 4.2.2.7 Kiểm thử lại lỗi – Repeat Testing Thực kiểm thử kỹ lại lỗi Test Case fail lỗi phát sinh khác Thực nhiều lần để tìm hết lỗi cịn sót lát, đến khơng cịn lỗi 4.2.2.8 Kết thúc kiểm thử - Finish Testing Khi tất Test Case test pass, phần mềm đạt yêu cầu trình kiểm thử kết thúc 4.2.3 Kiểm thử ứng dụng Trong dự án sử dụng kiểm thử hộp đen để kiểm thử chức Các chức kiểm thử là: 4.2.3.1 Chức Đăng nhập - ID: LOGIN_01 - Mô tả: Kiểm tra chức đăng nhập tài khoản khách hàng xác thực - Kết quả: Đạt Bảng 98 Các bước kiểm thử chức Đăng nhập Bước Chi tiết bước Kết mong đợi Kết thực tế Vào trang đăng nhập Hiển thị ô email Như mong đợi http://localhost:4200/login password trang đăng nhập 141 Nhập thành công Như mong đợi Nhập mật Nhập thành công Như mong đợi “123456789Abc!” vào có ẩn mật Nhập email “Customer@gmail.com” vào ô Email Address Password Chọn button “Sign In” Đăng nhập vào Như mong đợi trang chủ - Ảnh minh chứng: Hình 97 Ảnh minh chứng kiểm thử chức Đăng nhập (1) 142 Hình 98 Ảnh minh chứng kiểm thử chức Đăng nhập (2) 4.2.3.2 Chức Thêm sản phẩm vào giỏ hàng - ID: CART_01 - Mô tả: Kiểm tra chức thêm sản phẩm vào giỏ hàng người dùng - Kết quả: Đạt Bảng 99 Các bước kiểm thử chức Thêm sản phẩm vào giỏ hàng Bước Chi tiết bước Kết mong đợi Vào trang sản phẩm Hiển thị trang danh Như mong đợi http://localhost:4200/products sách sản phẩm Chọn “Add To Card” sản Hiển thị cửa sổ chi phẩm “Ally Babydoll Dress” tiết sản phẩm Chọn màu sắc “Black”, kích Chọn màu sắc, thước “M” số lượng “2” kích thước nhập Kết thực tế Như mong đợi Như mong đợi số lượng yêu cầu Chọn button “Add To Cart” Sản phẩm thêm vào giỏ 143 Như mong đợi thơng báo thành cơng - Ảnh minh chứng: Hình 99 Ảnh minh chứng kiểm thử chức Thêm sản phẩm vào giỏ (1) 144 Hình 100 Ảnh minh chứng kiểm thử chức Thêm sản phẩm vào giỏ (2) Hình 101 Ảnh minh chứng kiểm thử chức Thêm sản phẩm vào giỏ (3) 145 Hình 102 Ảnh minh chứng kiểm thử chức Thêm sản phẩm vào giỏ (4) 4.2.3.3 Chức Đặt hàng - ID: ORDER_01 - Mô tả: Kiểm tra chức đặt hàng - Kết quả: Đạt Bảng 100 Các bước kiểm thử chức Đặt hàng Bước Chi tiết bước Kết mong đợi Kết thực tế Vào trang giỏ hàng Hiển thị sản phâm giỏ Như mong http://localhost:4200/shopping- hàng đợi cart Chọn “Proceed to check out” Chuyển đến trang Như mong http://localhost:4200/check- đợi out hiển thị thông tin đơn hàng Chọn địa lưu Chọn đặt hàng Hiển thị thông tin địa Như mong lưu chọn thành công đợi Thông báo xác nhận đơn Như mong hàng đợi - Ảnh minh chứng: 146 Hình 103 Ảnh minh chứng kiểm thử chức Đặt hàng (1) 147 Hình 104 Ảnh minh chứng kiểm thử chức Đặt hàng (2) Hình 105 Ảnh minh chứng kiểm thử chức Đặt hàng (3) 4.2.3.3 Chức Thêm sản phẩm - ID: CR_PRODUCT_01 - Mô tả: Kiểm tra chức thêm sản phẩm trang Admin - Kết quả: Đạt Bảng 101 Các bước kiểm thử chức Thêm sản phẩm Bước Chi tiết bước Kết mong đợi Kết thực tế 148 Vào trang thêm sản phẩm Hiển thị trang quản Như mong http://localhost:4200/admin/products lý sản phẩm đợi Chọn nút “Add product” (Thêm sản Hiển thị cửa sổ thêm Như mong phẩm) sản phẩm đợi Nhập thông tin sản phẩm: Điền thông Như mong tin sản phẩm đợi Hệ thống thông báo Như mong + SKU: “123456790” + Name: “Test” + Unit Price: “200000” + Category: “Sweater” Chọn “Save” (Lưu) thành công chuyển đợi sang trang chi tiết sản phẩm Chọn “Add Item Product” để thêm Hiển thị cửa sổ thêm Như mong mặt hàng cho sản phẩm mặt hàng sản phẩm đợi Nhập thông tin mặt hàng: Điền thông tin Như mong mặt hàng đợi Hệ thống đóng cửa Như mong sổ cập nhật mặt đợi + Size: S + Color: White + Quantity: 10 Nhấn nút “Save” (Lưu) hàng thêm danh sách - Ảnh minh chứng: 149 Hình 106 Ảnh minh chứng kiểm thử chức Thêm sản phẩm (1) Hình 107 Ảnh minh chứng kiểm thử chức Thêm sản phẩm (2) Hình 108 Ảnh minh chứng kiểm thử chức Thêm sản phẩm (3) 150 Hình 109 Ảnh minh chứng kiểm thử chức Thêm sản phẩm (4) Hình 110 Ảnh minh chứng kiểm thử chức Thêm sản phẩm (5) Hình 111 Ảnh minh chứng kiểm thử chức Thêm sản phẩm (6) 151 PHẦN KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Kết đạt nhóm sau nghiên cứu thực đề tài: - Ứng dụng kiến thức ASP.NET Core Web API vào đề tài, nghiên cứu thêm Domain Driven Design để thiết kế kiến trúc đề tài rõ ràng, dễ bảo trì mở rộng - Nghiên cứu ứng dụng JSON Web Tokens để bảo mật ứng dụng phân quyền người dùng Backend lẫn Frontend - Nghiên cứu ứng dụng kiến thức Angular để thiết kế giao diện người dùng - Hiểu biết thêm nghiệp vụ việc quản lý website bán hàng ƯU ĐIỂM Dự án nhóm có ưu điểm sau: - Giao diện thiết kế thân thiện với người dùng - Các chức xây dựng riêng theo module dễ bảo trì mở rộng tương lai - Hệ thống phân quyền rõ ràng vai trò đảm bảo an tồn thơng tin người dùng - Các thao tác hệ thống thực nhanh, mượt làm tăng trải nghiệm người dùng NHƯỢC ĐIỂM Vì thời gian số lượng thành viên có hạn nên hệ thống có số nhược điểm sau: - Chưa có module chat realtime trao đổi người mua người bán - Chưa có chức import export data từ excel - Chưa có ứng dụng mua hàng di động HƯỚNG PHÁT TRIỂN - Thực chat realtime, import export excel thêm sản phẩm - Thực tạo ứng dụng bán hàng thời trang di động sử dụng API xây dựng 152 TÀI LIỆU THAM KHẢO Alphongso TrầnAn DũngLạc, Repository Pattern Unit of Work với Entity Framework ASP.NET MVC, 29/02/1016 (https://viblo.asia/p/repository-pattern-va-unit-of-workvoi-entity-framework-trong-aspnet-mvc-PjxMe6VDG4YL) ASP.NET Core Advantages and Disadvantages, 01/02/2021 (https://redwerk.com/blog/aspnet-core-pros-and-cons/) Introdution to JSON Web Tokens (https://jwt.io/introduction) Google, What is Angular?, 28/10/2021 (https://angular.io/guide/what-is-angular) Mai Chi, Web API ASP.NET Core, 11/01/2021 (https://tuhocict.com/web-api-trongaspnet-core/) Ngọc Nguyễn, Sử dụng Cloudinary để quản lý ảnh cho ứng dụng bạn, 28/03/2026 (https://viblo.asia/p/su-dung-cloudinary-de-quan-ly-anh-cho-ung-dung-cua-banE7bGoxggv5e2) 153 S K L 0