Phát triển website quản lý cửa hàng bán máy đào coin sử dụng angular và net framework đồ án tốt nghiệp

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á ĐỒ ÁN TỐT NGHIỆP TÊN ĐỀ TÀI: PHÁT TRIỂN WEBSITE QUẢN LÝ CỬA HÀNG BÁN MÁY ĐÀO COIN SỬ DỤNG ANGULAR VÀ NET FRAMEWORK Sinh viên thực Ngày sinh Lớp Khoa Mã sinh viên Giáo viên hướng dẫn : : : : : : Trương Thị Dịu 23/12/2000 DCCNTT9.10.IT2 Công nghệ thông tin 187480201120 ThS Trần Xuân Thanh Bắc Ninh 2022 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ ĐÔNG Á TRƯƠNG THỊ DỊU TÊN ĐỀ TÀI: PHÁT TRIỂN WEBSITE QUẢN LÝ CỬA HÀNG BÁN MÁY ĐÀO COIN SỬ DỤNG ANGULAR VÀ NET FRAMEWORK Giáo viên hướng dẫn: ThS Trần Xuân Thanh Bắc Ninh 2022 LỜI CẢM ƠN Lời em xin gửi lời cảm ơn đến toàn thể Ban Giám hiệu Trường Đại học Công nghệ Đông Á, Ban chủ nhiệm khoa Cơng nghệ thơng tin tận tình giúp đỡ em suốt thời gian học tập trường tạo điều kiện cho em làm đồ án tốt nghiệp Đây hội tốt giúp em hệ thống hóa kiến thức mơn học, thực hóa kiến thức thân để hồn thành đề tài đồ án tốt nghiệp Để hoàn thành tốt đồ án tốt nghiệp em xin chân thành gửi lời cảm ơn đến thầy ThS Trần Xuân Thanh – Giảng viên hướng dẫn em tận tình hướng dẫn giúp đỡ, giải đáp thắc mắc em trình làm đồ án hoàn thành đồ án tốt nghiệp cách hoàn thiện Do khả tầm hiểu biết thân em hạn chế nên đồ án tốt nghiệp khơng tránh khỏi sai sót Em mong nhận lời góp ý thầy để hồn thiện tốt Em xin chân thành cảm ơn! Bắc Ninh, ngày 29 tháng 10 năm 2022 LỜI CAM ĐOAN Em xin cam đoan đồ án tốt nghiệp với đề tài “Phát triển website quản lý cửa hàng bán máy đào coin sử dụng Angular NET Framework” cơng trình nghiên cứu thân Những phần có sử dụng tài liệu tham khảo có đồ án liệt kê nêu rõ phần tài liệu tham khảo Đồng thời số liệu hay kết trình bày đồ án mang tính chất trung thực, khơng chép, đạo nhái Nếu sai em xin chịu hoàn toàn trách nhiệm chịu tất kỷ luật môn nhà trường đề Bắc Ninh, ngày 29 tháng 10 năm 2022 LỜI NÓI ĐẦU Đào tiền ảo hay gọi “đào coin” thuật ngữ dùng để việc khai thác tiền ảo Những người khai thác thường gọi thợ đào tiền ảo (worker, miner), họ sử dụng công cụ máy đào chuyên dụng để giải vấn đề tính tốn cho phép liên kết khối giao dịch (blockchain) lại với Phần thưởng trả cho công việc tiền ảo chúng gọi “phần thưởng khối” hay “block reward” Hiện Việt Nam việc đào tiền ảo mẻ so với đại đa số người Hiểu điều đó, trang web đời cửa hàng trung gian liên kết thợ đào tiền ảo nhà cung cấp máy đào Trang web hoạt động cửa hàng trung gian cung cấp sản phẩm hãng qua tay cho thợ đào tiền ảo có nhu cầu với giá bán hợp lý tích hợp cổng toán dễ sử dụng cho thợ đào Paypal MỤC LỤC DANH MỤC CÁC HÌNH ẢNH DANH MỤC CÁC BẢNG CHƯƠNG 1: TỔNG QUAN VỀ HỆ THỐNG 1.1 Lý thực đề tài 1.2 Mục tiêu thực đề tài 1.3 Nội dung thực 1.4 Phương pháp thực 1.5 Công cụ thực 1.5.1 Angular 1.5.2 .NET Framework 1.5.3 Visual studio code 1.6 Mục tiêu đề CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE 2.1 Khảo sát đặc tả yêu cầu 2.1.1 Phần quản lý admin 2.1.2 Giao diện người dùng 10 2.2 Các yêu cầu phi chức 10 2.3 Phân tích thiết kế hệ thống 11 2.3.1 Các chức hệ thống 11 2.3.2 Các tác nhân hệ thống 11 2.4 Biểu đồ Use case 15 2.4.1 Biểu đồ Use case tổng quát 15 2.4.2 Use case đăng nhập 16 2.4.3 Use case quản lý doanh thu 16 2.4.4 Use case quản lý sản phẩm 17 2.4.5 Use case quản lý danh mục sản phẩm 18 2.4.6 Use case quản lý danh mục thuật toán 19 2.4.7 Use case chức quản lý đơn đặt hàng 20 2.4.8 Use case quản lý giao dịch tự động 21 2.4.9 Use case quản lý phiếu sửa chữa 21 2.4.10 Use case quản lý đơn vị sửa chữa 22 2.4.11 Use case quản lý người dùng 24 2.4.12 Use case quản lý đơn vị vận chuyển 25 2.4.13 Use case cài đặt trang web 26 2.4.14 Use case chức khách hàng 27 2.5 Biểu đồ 29 2.5.1 Biểu đồ chức đăng nhập 29 2.5.2 Biểu đồ chức đăng kí 30 2.5.3 Biểu đồ quản lý danh mục sản phẩm 31 2.5.4 Biểu đồ chức quản lý sản phẩm 33 2.5.5 Biểu đồ chức quản lý danh mục thuật toán 35 2.5.6 Biểu đồ chức quản lý đơn đặt hàng 37 2.5.7 Biểu đồ chức quản lý phiếu sửa chữa 38 2.5.8 Biểu đồ chức quản lý đơn vị sửa chữa 39 2.5.9 Biểu đồ chức quản lý người dùng 41 2.5.10 Biểu đồ chức quản lý đơn vị vận chuyển 42 2.5.11 Biểu đồ chức đặt hàng 44 2.5.12 Biểu đồ chức tìm kiếm 45 2.6 Biểu đồ hoạt động 45 2.6.1 Biểu đồ hoạt động chức đăng kí 45 2.6.2 Biểu đồ hoạt động chức đăng nhập 46 2.6.3 Biểu đồ chức tìm kiếm 46 2.6.4 Biểu đồ hoạt động chức quản lí danh mục 47 2.6.5 Biểu đồ hoạt động chức quản lí sản phẩm 47 2.6.6 Biểu đồ hoạt động chức quản lí đơn hàng 48 2.6.7 Biểu đồ hoạt động chức quản lí danh mục thuật toán 48 2.6.8 Biểu đồ hoạt động chức quản lí đơn đặt hàng 49 2.6.9 Biểu đồ hoạt động chức quản lí phiếu sửa chữa 50 2.6.10 Biểu đồ hoạt động chức quản lí đơn vị sửa chữa 51 2.6.11 Biểu đồ hoạt động chức quản lí người dùng 52 2.6.12 Biểu đồ hoạt động chức quản lí đơn vị vận chuyển 53 2.7 Biểu đồ lớp 54 2.7.1 Danh sách đối tượng 54 2.7.2 Mơ hình hóa lớp đối tượng 57 2.8 Thiết kế sở liệu 58 2.8.1 Danh sách bảng 58 2.8.2 Bảng REPAIRORDER 60 2.8.3 Bảng SHIPPINGMETHOD 61 2.8.4 Bảng REPAIR 62 2.8.5 Bảng REPAIRITEM 63 2.8.6 Bảng ORDERDETAIL 64 2.8.7 Bảng ROLEVAR 64 2.8.8 Bảng REPAIRSITE 65 2.8.9 Bảng PAYMENTDETAIL 66 2.8.10 Bảng PAYMENTPROVIDER 66 2.8.11 Bảng ORDERITEM 67 2.8.12 Bảng USERS 68 2.8.13 Bảng USERADDRESS 69 2.8.14 Bảng USERCREDENTIALSVERIFY 70 2.8.15 Bảng USERRECOVERY 70 2.8.16 Bảng ALGORITHM 71 2.8.17 Bảng PRODUCTIMAGE 72 2.8.18 Bảng PRODUCTINVENTORY 72 2.8.19 Bảng PRODUCT 73 2.8.20 Bảng PRODUCTCATEGORY 74 2.8.21 Bảng PRODUCTRELEASENOTICE 75 2.8.22 Bảng USERRECORD 75 2.8.23 Bảng CARTITEM 76 2.8.24 Bảng SHOPPINGSESSIONS 76 2.8.25 Bảng DISCOUNT 77 2.8.26 Bảng COUPON 78 2.8.27 Bảng COUPONDONATE 79 CHƯƠNG 3: CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG 81 3.1 Cài đặt hệ thống 81 3.1.1 Backend ASP.NET Core 4.7.1 81 3.1.2 Frontend Angular 95 3.2 Kiểm thử hệ thống 108 KẾT LUẬN 111 Ưu điểm: 111 Khuyết điểm: 111 Mục tiêu phát triển 111 TÀI LIỆU THAM KHẢO 112 Nhập đầy đủ thông tin Subdomain cấu hình trước nhấp Create Sau tên miền phụ tạo, có folder diushop tự động tạo thư mục root hosting Về phần source code frontend, ta phải cấu hình lại tên miền API DiuMinerShop Trong Visual Studio Code, điều hướng vào src/config/local.ts, biến config, chỉnh sửa thuộc tính apiUrl thành tên miền API config bên Backend Sau cấu hình xong tên miền API, ta tiến hành build source code Có cách build source, cách vào file package.json thư mục root dự án, rê chuột vào script build, tooltip nhỏ ra, nhấp vào Run script Cách mở terminal ra, điều hướng tới thư mục root dự án, sau nhập lệnh build Cách 1, build tooltip file package.json: 98 Cách 2, mở terminal lên sau nhập lệnh build: npm run build Cả cách cho kết files build Giờ ta tiền hành đưa files lên hosting Frontend Tương tự cách tải lên folder/files Hosting Backend (Plesk panel) có cách tải lên file zip sử dụng FTP Ở phần giới thiệu cách chuyển files FTP Truy cập cPanel hosting 99 Chọn FTP Accounts để chuyển tới trang tạo tài khoản FTP Nhập đầy đủ thơng tin cấu hình trước sau nhấp vào nút Create FTP Account 100 Tiếp tục khởi tạo kết nối từ máy tính cá nhân với hosting qua phương thức FTP WinSCP Nhập đầy đủ thơng tin tài khoản FTP tạo sau nhấp Login để thiết lập kết nối 101 Tương tự bên Backend, ta điều hướng view thư mục bên trái tới thư mục build Frontend 102 Sau ta tiến hành kéo thả tất file bên view thư mục bên trái qua view thư mục bên phải (của hosting) Sau thiết lập file Frontend thành công, ta tiếp tục đến thiết lập SSL cho trang web Tương tự Plesk, cPanel cung cấp khả tự động tạo chứng SSL gia hạn hết hạn Truy cập vào cPanel Trong phần Security, chọn Let's Encrypt™ SSL để truy cập vào trang tạo SSL Kéo xuống phần Issue a new certificate Tìm kiếm tên miền cấu hình cho frontend trước Nhấp vào Issue để yêu cầu tạo SSL 103 Bỏ chọn tùy chọn lại giữ lại tùy chọn mặc định Chọn http-01 Chọn Issue, chứng tạo cho trang web Chờ lát để Apache khởi động lại để áp dựng cấu hình SSL Reset cache trang web để truy cập lại, chứng SSL thiết lập thành công 104 Mỗi hành động gọi trang khách hàng dẫn đến yêu cầu gửi đến máy chủ Web Đối với yêu cầu đó, trang tương ứng phải tồn máy chủ Máy chủ định vị trang thư mục trả lại cho máy khách Nhưng Angular, ứng dụng bắt đầu trang (index.html) tải Mọi yêu cầu sau khơng tải lại tồn trang mà tải phần trang Các yêu cầu không gửi đến máy chủ Web mà xử lý định tuyến Angular phía máy khách tiến trình gọi Angular Bootstrap Điều dẫn vấn đề khách hàng truy cập vào trang khác trang chủ DiuMinerShop, Apache trả lỗi 404 Để xử lý vấn đề này, ta phải có file htaccess điều hướng yêu cầu Nếu yêu cầu đến file hữu hosting giữ ngun (ví dụ file assets hay file có thư mục build), yêu cầu đến file khơng có hosting nên chuyển tiếp tới trang index.html Nội dung file htaccess, file htaccess đặt thư mục root hosting Frontend RewriteEngine On RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^ - [L] 105 RewriteRule ^ /index.html Để cập nhật file hosting, ta truy cập vào cPanel Trong phần Files, nhấp vào File Manager để truy cập chức quản lý file Điều hướng đến thư mục diushop 106 Nhấp vào tùy chọn + File nhằm tạo file mới, dialog New File Nhập thông tin tên file htaccess Nhấp Create New File để tạo file Nhấp chuột trái vào dòng htaccess, chọn Edit để sửa file Nhập nội dung file htaccess, sau nhấp Save Changes để lưu lại Đã khơng cịn lỗi 404 truy cập đường dẫn khác index.html 107 3.2 Kiểm thử hệ thống Kiểm thử phần mềm phần thiếu quy trình sản xuất phần mềm Kiểm thử giúp đảm bảo chất lượng sản phẩm, mang lại sản phẩm hoàn hảo đến tay người dùng, hạn chế lỗi rủi ro Test case (Kịch kiểm thử) hiểu đơn giản tài liệu dùng để mô tả: Dữ liệu đầu vào (Input) – Hành động (Active) – Kết mong đợi (Expected response) để xác định chức ứng dụng phần mềm hoạt động hay không Chi tiết Test Case Kiểm tra ngôn ngữ Các bước Truy cập https://shop.mxms.in/ Chọn ngôn ngữ khác hộp tùy chọn menu header Kiểm tra ngôn ngữ nội dung text trang web hiển thị Chuyển lại ngôn ngữ ban đầu hộp tùy chọn menu header Kiểm tra lại ngôn ngữ nội dung text trang web hiển thị 108 Kết mong đợi Ở bước bước 3, trang web hiển thị ngôn ngữ phù hợp chọn Kết test Đạt Thay đổi tiền tệ Truy cập https://shop.mxms.in/ Chọn loại tiền tệ khác hộp tùy chọn footer Kiểm tra loại tiền tệ trang Ở bước bước 3, trang web hiển thị loại tiền tệ phù hợp chọn Đạt Đăng ký thành công Đạt Đăng nhập thành công Đạt Sản phẩm thêm vào giỏ hàng Đạt Đi đến trang giỏ hàng để Đạt web hiển thị Chuyển lại tiền tệ ban đầu hộp tùy chọn footer Đăng ký thành công Kiểm tra loại tiền tệ trang web hiển thị Truy cập https://shop.mxms.in/ Nhấp vào nút đăng ký menu header Điền thông tin hợp lệ Vượt qua kiểm tra captcha Nhấp nút đăng ký Xác nhận tài khoản qua đường link gửi tài khoản email đăng ký Đăng nhập thành công Truy cập https://shop.mxms.in/ Nhấp vào nút đăng nhập menu header Điền thông tin hợp lệ Vượt qua kiểm tra captcha Nhấp nút đăng nhập Thêm vào giỏ Truy cập https://shop.mxms.in/ Nhấn vào sản phẩm Chọn nút Thêm vào giỏ Mua Truy cập https://shop.mxms.in/ 109 Đơn vị vận chuyển 3 Thanh toán thành công (Paypal) Nhấn vào sản phẩm Chọn nút Mua Truy cập https://shop.mxms.in/ Chọn sản phẩm tiến hành tốn Trong trang thơng tin order, chọn đơn vị vận chuyển mong muốn Truy cập https://shop.mxms.in/ Chọn sản phẩm tiến hành toán Trong trang toán, chọn phương thức toán Paypal 110 tiến hành tốn Phí vận chuyển thay đổi tùy theo đơn vị vận chuyển Đạt Thanh toán thành công Đạt KẾT LUẬN Trang web bán máy đào kết trình tìm hiểu, làm đề tài đồ án Trong trình làm đồ án, em dụng kiến thức học tự tìm tịi học hỏi thêm nhiều cơng nghệ Kết làm đồ án sau: Ưu điểm: ➢ Đáp ứng nhu cầu mua máy đào cho khách hàng hỗ trợ tốt chức như: • Chi tiết máy đào rõ ràng • Đặt hàng máy đào dễ dàng • Tìm kiếm máy đào theo nhiều thơng tin đa dạng • Tự động tính phí vận chuyển, giảm giá coupon cho khách hàng • Thanh toán máy đào dễ dàng qua cổng tốn tự động • Quản lý tốt đơn đặt hàng • Quản lý sửa chữa máy đào dễ dàng ➢ Trang web đơn giản dễ sử dụng Khuyết điểm: ➢ Trang web đơn giản, chưa có chiều sâu Mục tiêu phát triển ➢ Cần phát triển thêm muốn thực dự án ➢ Phát triển thêm phiên ứng dụng điện thoại 111 TÀI LIỆU THAM KHẢO ➢ Giáo trình Phân tích thiết kế hệ thống thông tin, Trường Đại học Công nghệ Đông Á ➢ Thư viện hỗ trợ lập trình Microsoft: https://dotnet.microsoft.com/ ➢ Tài liệu hỗ trợ phát triển Angular Team: https://angular.io/ ➢ Thư viện hỗ trợ toán tự động Paypal: https://developer.paypal.com/ 112