(Đồ á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 Tp Hồ Chí Minh, 2019 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 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ự – 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 : Phạm Thanh Duy MSSV 1: …15110181 Họ tên Sinh viên : 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ọ tên Giáo viên hướng dẫn: ……… 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 16 tháng năm 2019 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) 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ự – 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 : Phạm Thanh Duy MSSV 1: ….15110181 Họ tên Sinh viên : 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ọ tên Giáo viên phản biện: …………LÊ VĨNH THỊNH 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 16 tháng năm 2019 Giáo viên phản biện (Ký & ghi rõ họ tên) 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ọ Tên SV thực 1: Phạm Thanh Duy MSSV: 15110181 Họ Tên SV thực 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 : Tìm hiểu Angular 2+ ASP.NET CORE Khảo sát website bán hàng có thị trường Dự kiến kết đạt sau hoàn thành luận văn Nghiên cứu thực theo Use Case đề Đề xuất ý tưởng Báo cáo đầy đủ theo yêu cầu Khoa giáo viên hướng dẫn Đề cương viết luận văn: MỤC LỤC Phần MỞ ĐẦU 1.1 Tính cấp thiết đề 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 website bán hàng online thị trường 1.6 Kết dự kiến đạt Phần NỘI DUNG Chương 1: Tìm hiểu angular + asp.net core an 1.1 Angular 1.2 Asp.net core Chương 2: Xác định yêu cầu 2.1 Yêu cầu chức 2.2 Yêu cầu phi chức 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 Chương 4: Thiết kế sơ liệu 4.1 Lược đồ sở liệu sql server 4.2 Mô tả thuộc tính Chương 5: Thiết kế giao diện xử lý 5.1 Sơ đồ lớp ứ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 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ử Phần KẾT LUẬN 7.1 Kết đạt 7.2 Những ưu điểm nhược điểm thực 7.3 Hướng phát triển cho tương lai Tài liệu tham khảo [1] Trang chủ Docs Angular https://angular.io/guide/quickstart an [2] Trang chủ Docs ASP.Net Core https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.2 [3] Nguồn tài liệu ASP.Net Core Tutorialspoint https://www.tutorialspoint.com/asp.net_core/ [4] Bài viết nên sử dụng Angular tác giả Nguyen Huy Cuong, Ngày đăng 20/7/2018, tham khảo vào 26/3/2019 https://viblo.asia/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 4/3 – 10/3 - Gặp giảng viên hướng dẫn nhận yêu cầu - Khảo sát phân tích trạng - Lập danh sách nhiệm vụ theo tuần thời gian thực 11/3 – 17/3 - Phân tích chức ứng dụng - Thiết kế sở liệu 18/3 – 24/3 - Cài đặt công cụ cần thiết, thiết lập môi trường - Thiết kế cài đặt Controller - Tìm hiểu JWT 25/3 – 31/3 - Viết API xác thực: Đăng ký, đăng nhập - Triển khai lên angular 1/4 -7/4 - Viết API đăng ký, đăng nhập qua Facebook, Google 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 15/4 – 21/4 - Thêm database tỉnh thành nước Việt Nam - Viết API Thêm sửa xóa địa người dùng - Thiết kế giao diện địa người dùng an Ghi 22/4 – 28/4 - Viết API đổi mật - Thiết kế giao diện với nút xem/ ẩn mật - Thiết kế giao diện header footer - Xây dựng API upload ảnh 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 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, 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 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 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 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 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 liệu 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ê triển khai giao diện 16 17/6 – 23/6 - Viết báo cáo - Chuẩn bị thuyết trình - Chỉnh sửa lại tồn giao diện, làm đẹp - Thêm thơng báo popup, process tương tác 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 - Hoàn thiện thuyết trình - Kiểm thử sửa lỗi ứng dụng - Thêm liệu cho sản phẩm 18 1/7 – 7/7 - Đẩy code lên Github tất thành viên chốt phiên - Hồn tất cơng việc làm CD - Quay video demo video hướng dẫn sử dụng CD - Hoàn thiện báo cáo theo yêu cầu Khoa GVHD 19 8/7 – 14/7 - Hoàn thành công việc - Báo cáo giảng viên hướng dẫn 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ý ghi rõ họ tên) an Quên mật Click vào link Forgot Chuyển hướng đến your pass work trang quên mật Đăng nhập Click vào biểu tượng Đăng nhập thông Facebook Facebook qua Facebook Đăng nhập Click vài biểu tượng Đăng nhập thông Google Google qua Google 5.4 MÀN HÌNH ĐĂNG KÝ 5.4.1 Giao diện Hình 5.7: Giao diện đăng ký 70 an 5.4.2 Mô tả xử lý Bảng 5.3: Mô tả xử lý giao diện đăng ký Tên xử lý STT Đăng ký Điều kiện gọi thực thi Mô tả Điền username Nếu username password hợp lệ không trùng Và thơng tin khác password hợp lệ khơng để trống hoàn tất đăng ký chuyển trang tới trang chủ, thông tin không hợp lệ yêu cầu khách hàng nhập lại Chuyển tới đăng Click vào đăng nhập nhập Nếu khách hàng có tài khoản khách hàng nhấp vào để chuyển tới trang đăng nhập Chuyển trang Click vào link Mua sắm Chuyển hướng đến chủ trang chủ 71 an Ghi 5.5 MÀN HÌNH XEM THƠNG TIN SẢN PHẨM 5.5.1 Giao diện Hình 5.8: Giao diện chi tiết sản phẩm 5.5.2 Mô tả xử lý Bảng 5.4: Mô tả xử lý giao diện sản phẩm STT Tên xử lý Điều kiện gọi thực thi Mô tả Thêm vào giỏ Click button Thêm vài Thêm sản phẩm vào hàng giỏ giỏ hàng Mua Click button Mua Thêm sản phẩm vào giỏ hàng vào giỏ hàng Bình luận Đăng nhập nhập nội Bình luận dung muốn binh luận đánh giá sản submit phẩm 72 an Ghi Xem thêm ảnh Di chuyển chuột lên Ảnh chọn sản phẩm ảnh sản phẩm phóng to, dễ quan sát 5.6 MÀN HÌNH GIỎ HÀNG 5.6.1 Giao diện Hình 5.9: Giao diện chi tiết giỏ hàng 5.6.2 Mô tả xử lý Bảng 5.5: Mô tả xử lý giao diện giỏ hàng STT Tên xử lý Điều chỉnh số Điều kiện gọi thực thi Đã đăng nhập Mô tả Nhập số lượng sản lượng phẩm muốn mua với loại sản phẩm Xóa khỏi giỏ Đã đăng nhập Xóa sản phẩm khách hang khơng muốn mua 73 an Ghi Đã đăng nhập, có sản Thanh tốn tất phẩm giỏ sản phẩm giỏ Thay đổi địa Nhấn vào thay đổi địa Chọn địa giao giao hàng hàng danh Mua hàng sách địa có thêm địa 5.7 MÀN HÌNH USER 5.7.1 Thơng tin cá nhân 5.7.1.1 Giao diện Hình 5.10: Giao diện thông tin cá nhân 5.7.1.2 Mô tả xử lý Bảng 5.6: Mô tả xử lý giao diện chỉnh sửa thông tin cá nhân Tên xử lý STT Thay đổi ngày Điều kiện gọi thực thi Nhấn vào ô ngày sinh Mô tả Chọn ngày sinh hiển thị, không sinh nhập tay Cập nhật thông Nhấn vào lưu thay đổi Lưu thông tin người dùng tin 74 an Ghi 5.7.2 Danh sách đơn hàng 5.7.2.1 Giao diện Hình 5.11: Giao diện đơn hàng cá nhân 5.7.2.2 Mô tả xử lý Bảng 5.7: Mô tả xử lý giao diện đơn hàng cá nhân STT Tên xử lý Điều kiện gọi thực thi Mô tả Xem trạng thái Nhấn vào tab tương Ở người dùng đơn hàng ứng xem hóa đơn chờ tốn Hủy đơn hàng Đơn hàng trạng thái Khách hàng chờ xác nhận, nhấn hủy hủy đơn hàng trước đơn hàng xác nhận 75 an Ghi 5.8 MÀN HÌNH TRANG QUẢN LÝ ADMIN 5.8.1 Màn hình quản lý đơn hàng 5.8.1.1 Giao diện Hình 5.12: Giao diện quản lý sản phẩm 5.8.1.2 Mô tả xử lý Bảng 5.8: Mô tả xử lý giao diện quản lý sản phẩm STT Tên xử lý Điều kiện gọi thực thi Mô tả Ghi Lọc đơn hàng Chọn tab tương ứng, Tìm tìm đơn hàng qua tìm kiếm, xếp, tổng chức lọc đơn hiển thị hàng Xem chi tiết đơn Chọn hóa đơn, nhấn Xem chi tiết hóa đơn hàng vào chi tiết với sản phẩm, thông tin giao hàng Từ chối giao Chọn hóa đơn chưa Từ chối giao hàng hàng giao, nhấn vào từ chối có lỗi phát sinh Xác nhận giao Chọn hóa chờ xác nhận, Xác nhận đơn hàng hàng nhấn xác nhận đơn hàng 76 an giao cho khách hàng Khách không Chọn đơn hàng nhận hàng giao, chọn khách không khách không nhận nhận đơn hàng 77 an Hàng giao CHƯƠNG 6: KIỂM THỬ PHẦN MỀM 6.1 KẾ HOẠCH KIỂM THỬ CHUNG Dựa vào kiến thức học mơn kiểm thử phần mềm nhóm lập kế hoạch kiểm thử chia làm kỹ thuật kiểm thử sau: - Kiểm thử chức theo module dự án (Functional Testing) - Kiểm thử phi chức dự án (Non-functional Testing) - Kiểm thử hiệu suất dự án (Performance Testing) - Kiểm thử bảo mật kiểm soát truy cập (Security & Access Control Testing) - Kiểm thử đơn vị chia nhỏ module kiểm thử (Unit Testing) Trong kỹ thuật kiểm thử nhóm chia theo: - Mục tiêu tiếp cận - Các module kiểm thử - Môi trường kiểm thử - Tiêu chí thành cơng - Tiêu chí thất bại 6.2 CHI TIẾT TEST CASE ĐÃ KIỂM THỬ 6.2.1 Kiểm thử người dùng Bảng 6.1: Kiểm thử người dùng STT Mơ tả test Quy trình Kết mong Người Kết đợi test (Chrome case 75.0.3770.100 64bit) Kiểm thử Nhấn vào đường Ứng dụng chức dẫn đăng nhập chuyển trở đăng nhập điều hướng trang chủ với Nhập tài khoản tên người dùng mật hiển thị Nhấn nút đăng điều nhập hướng 78 an Hùng pass Kiểm thử Ở cửa sổ đăng Báo lỗi email, chức nhập nhấn vào liên username tồn đăng ký kết “Đăng ký” Hùng Pass Hùng pass Hùng pass Nhập họ, tên, email, username trùng Nhấn nút Đăng ký Kiểm thử Người dùng vào Sẽ chuyển chức giỏ hàng tiến đến trang chọn mua hàng hành nhấn nút hình thức “Thanh tốn” tốn, thơng tin tốn Kiểm thử Ở hình chi Sản phẩm thêm sản tiết sản phẩm thêm vào phẩm vào Khách hàng bấm giỏ hàng giỏ hàng vào nút “Thêm vào giỏ” Kiểm thử Vào trang giỏ Sản phẩm thay Tăng số hàng đổi, tối thiểu lượng sản Bấm nút ‘+’ tối đa số hàng phẩm ‘-’ để tăng giảm số có, số tiền giỏ hàng lượng sản phẩm thay đổi pass theo Kiểm thử Vào trang giỏ Sản phẩm loại bỏ hàng khỏi giỏ số sản Bấm nút xóa sản hàng phẩm phẩm muốn xóa giỏ hàng 79 an Hùng Pass Kiểm thử Sau đăng nhập Lưu thông tin chức user vào trang thông chỉnh sửa tin cá nhân Hùng pass Duy Pass Pass user thông tin cá Sau chỉnh sửa nhân thông tin cá nhân user bấm “Lưu” để lưu lại Kiểm thử Vào trang tài Tất đơn chức khoản User hàng hiển thị xem đơn Vào Đơn hàng hàng Kiểm thử Vào trang chi tiết Trong phần bình Duy chức sản phẩm luận sản đánh giá, Nhập nội dung phẩm hiển thị bình luận muốn bình luận bình luận sản bấm nút “Bình luận” khách hàng vừa phẩm để đăng tải bình luận bình luận 6.2.2 Kiểm thử Admin Bảng 6.2: Kiểm thử admin STT Mô tả test Quy trình Kết mong Người Kết đợi test (Chrome case 75.0.3770.100 64bit) Kiểm thử Nhấn vào đường Ứng dụng chức dẫn đăng nhập chuyển trở đăng nhập điều hướng trang chủ với tên Nhập tài khoản người dùng hiển mật thị điều hướng 80 an Duy Pass Nhấn nút đăng nhập Kiểm tra Đăng nhập với tính quyền admin vào duyệt đơn phần quản lý đơn hàng hàng trang Duy quản lý admin Xem đơn hàng đặt phê duyệt Kiểm thử Duy tính Nhập hàng Kiểm thử Vào trang quản lý Trang thống kê chức Admin vào xuất thống kê mục thống kê lợi nhuận Chọn năm năm đo tháng để xem thống in số đơn hàng kê bán Duy loại sản phẩm bán theo tháng Kiểm thử Duy tính chỉnh sửa sản phẩm 81 an Pass PHẦN KẾT LUẬN Kết đạt Đầu tiên kết đạt cố gắng thành viên giúp đỡ tận tình thầy Nguyễn Minh Đạo, chúng em xin cảm ơn thầy nhiều Qua trình làm Tiểu luận chuyên ngành chúng em tìm hiểu tảng mới, mạnh mẽ ASP NET Core Angular hứa hẹn phát triển tương lai bước tiến vơ hữu ích cho chúng em tương lai, chúng em cảm ơn khoa Công Nghệ Thông tin tạo điều kiện để chúng em tiếp cận thực đề tài Và chúng em xây dựng thành công Application sử dụng framework thơng qua để giúp việc học hỏi framework hiệu Những ưu điểm nhược điểm thực - Ưu điểm: Sử dụng, nắm bắt công nghệ, xu hướng tương lai để phát triển ứng dụng nhu cầu bán hàng, cung cấp công cụ bán hàng online, bên cạnh tiếp cận với Google Facebook ơng lớn giới, điều mang lại thuận tiện thu hút khách hàng - Nhược điểm: Vì tảng trình tiếp cận tìm hiểu khó khăn nguồn tài liệu web cịn chưa ổn định cần nâng cấp thêm Hướng phát triển cho tương lai Dự định phát triển tương lai: + Hỗ trợ trực tuyến + Quản lý phân quyền + Hỗ trợ tìm kiếm nâng cao với chức lọc sản phẩm + Gợi ý sản phẩm với AI + Chatbot + Xác thực số điện thoại, Gmail tài khoản + Thanh toán trực tuyến + Liên kết với bên giao hàng thứ 82 an TÀI LIỆU THAM KHẢO Nguồn tài liệu tham khảo: [1] Trang chủ Docs Angular https://angular.io/guide/quickstart [2] Trang chủ Docs ASP.Net Core https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.2 [3] Nguồn tài liệu ASP.Net Core Tutorialspoint https://www.tutorialspoint.com/asp.net_core/ [4] Bài viết nên sử dụng Angular tác giả Nguyen Huy Cuong, Ngày đăng 20/7/2018, tham khảo vào 26/3/2019 https://viblo.asia/p/tai-sao-chung-ta-nen-su-dung-angular-eW65GEYPZDO 83 an an