(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs

(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs(Đồ án tốt nghiệp) Xây dựng website bán giày sử dụng .Net core và Reactjs

Báo cáo đồ án tốt nghiệp TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA ĐÀO TẠO CHẤT LƯỢNG CAO NGÀNH CÔNG NGHỆ THÔNG TIN - - BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN GIÀY SỬ DỤNG NET CORE VÀ REACTJS GVHD: TS Lê Vĩnh Thịnh SVTH: Nguyễn Võ Hoàng Nguyễn Thanh Nhân TP.HCM, tháng năm 2021 17110143 17110198 Báo cáo đồ án tốt nghiệp LỜI NÓI ĐẦU Trong năm gần với sự phát triển vượt trội khoa học kỹ thuật đặt biệt công nghệ thông tin, với ứng dụng công nghệ thông tin vào lĩnh vực đóng góp phần to lớn cho sự nghiệp phát triển người Trong lĩnh vực lĩnh vực quản lý thật sự giúp ích nhiều cho người, việc áp dụng quản lý mua bán máy tính thay cho quản lý mua bán thủ công doanh nghiệp, công ty, cá nhân cần thiết thật sự cần thiết Do đó, việc quản lý mua bán hàng qua mạng thiếu doanh nghiệp, cửa hàng vừa nhỏ Năm 2008 năm Việt Nam có sự phát triển lớn mạnh lĩnh vực thương mại thức trở thành thành viên thứ 150 tổ chức thương mại giới WTO Với sự phát triển mạnh mẽ khơng thể phủ nhận sự đóng góp thương mại điện tử, lĩnh vực nóng bỏng nay! Một đất nước phát triển mạnh mẽ, sống người ngày nâng cao, mức tiêu thụ sản phẩm ngày tăngTóm lại nhu cầu người ngày cao Vì việc trao đổi mua bán quản lý hàng hóa cần phải có sự thay đổi từ thủ cơng sang máy móc Chương trình chạy mơi trường hệ điều hành Window, WinServer, Linux sử dụng ngôn ngữ chuẩn xử lý liệu ReactJS, ASP NET Core, JavaScript, CSS hệ quản trị sở liệu SQL Server Hoàn thành đồ án tốt nghiệp này, em xin gửi lời cảm ơn chân thành đến thầy, cô khoa CNTT hết lòng truyền đạt kiến thức cho em trình học tập, đặc biệt thầy Lê Vĩnh Thịnh người trực tiếp hướng dẫn em cách tận tình Tuy cố gắng tìm hiểu, phân tích thiết kế cài đặt hệ thống khơng tránh khỏi thiếu sót Em mong nhận sự thơng cảm góp ý quý thầy, cô Em xin chân thành cảm ơn! i Báo cáo đồ án tốt nghiệp DANH MỤC LỜI NÓI ĐẦU i DANH MỤC ii DANH MỤC HÌNH ẢNH vi DANH MỤC BẢNG ix TÀI LIỆU THAM KHẢO PHẦN MỞ ĐẦU 1.Tính cấp thiết đề tài 2.Mục đích đề tài 3.Cách tiếp cận nghiên cứu 4.Kết đạt 4.1 Giao diện 4.2 Xử lý back-end PHẦN NỘI DUNG CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1 Tổng quan thương mại điện tử 1.1 Khái niệm thương mại điện tử 1.2 Lợi ích cửa thương mại điện tử 1.3.Các yêu cầu thương mại điện tử 2 Giới thiệu ASP NET CORE[1][2] 2.1 ASP NET Core ? 2.2 Cách thức hoạt động ASP NET Core 2.3 ASP.Net Core làm ? 3.Giới thiệu ReactJS[3] 3.1 ReactJS ? 3.2 Các tính ReactJS 3.3 Tại lại chon ReactJS CHƯƠNG II: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU Khảo sát trạng Xác định yêu cầu 14 ii Báo cáo đồ án tốt nghiệp 2.1 Lược đồ usecase 14 2.2 Đặc tả Usecase (Khách hàng) 15 2.3 Đặc tả Usecase(Khách hàng đăng nhập) 23 2.4 Đặc tả Usecase(Admin) 31 CHƯƠNG III: THIẾT KẾ ỨNG DỤNG 43 Thiết kế liệu 43 Mô tả sơ đồ thiết kế liệu 44 2.1 Category 44 2.2 Product 44 2.3 Brand 44 2.4 Color & Size of Product 45 2.5 Color 45 2.6 Size 45 2.7 Post 46 2.8 Rating 46 2.9 Comment 46 2.10 Favorite product 47 2.11 Customer 47 2.12 Account 47 2.13 Address 48 2.14 Cart Product 48 2.15 Shopping cart 48 2.15 Order 48 2.16 Order Detail 49 Sơ đồ (Sequence Diagram) 49 3.1 Sequence tìm kiếm sản phẩm 49 3.2 Sequence filter sản phẩm 50 3.3 Sequence xem chi tiết sản phẩm 52 3.4 Sequence bình luận đánh giá 52 3.5 Sequence quản lý giỏ hàng 53 3.6 Sequence đăng ký tài khoản 55 3.7 Sequence đăng nhập 56 iii Báo cáo đồ án tốt nghiệp 3.8.Sequence Quản lý thông tin tài khoản 56 3.9 Sequence toán đơn hàng 58 3.10 Sequence quản lý lịch sử đơn hàng 58 3.11 Sequence quản lý sản phẩm 60 3.12 Sequence quản lý danh mục 62 3.13 Sequence quản lý tài khoản 63 3.14 Sequence quản lý đơn hàng 64 3.15 Sequence đăng xuất 65 3.16 Sequence xem chi tiết viết 66 3.17 Sequence quản lý viết 66 CHƯƠNG IV: THIẾT KẾ GIAO DIỆN 69 Screen flow cho web phía khách hàng 69 1.1 SCP001 Home screen 69 1.2 SCP002 Post detail screen 71 1.3 SCP003 Product screen 73 1.4 SCP004 Product detail screen 75 1.5 SCP005 CartProduct screen 79 1.6 SCP006 Login Modal/Register modal 81 1.7 SCP007 User Info screen 83 1.8 SCP008 User order screen 84 1.9 SCP009 User order info screen 85 1.10 SCP010 User address manage screen 86 1.11 SCP011 User address add screen 87 1.12 SCP012 Change password screen 88 Srceen flow cho web phía admin 89 1.1 SAP001 Login admin screen 89 1.2 SAP002 Dashboard screen 90 1.3 SAP003 Post Management screen 91 1.4 SAP004 Post Add/Post Edit/Post Detail screen 93 1.5 SAP005 Product Management screen 94 1.6 SAP006 Product Add/Edit 96 1.7 SAP007 Color Management screen 98 iv Báo cáo đồ án tốt nghiệp 1.8 SAP008 Brand Management screen 99 1.9 SAP009 Category Management screen 101 1.10 SAP010 Size Management screen 102 1.11 SAP011 Order Management screen 104 1.12 SAP012 Account Management 105 1.13 SAP013 Rating Management screen 106 1.14 SAP014 Revenue Management screen 107 CHƯƠNG V: CÀI ĐẶT VÀ KIỂM THỬ 109 Cài đặt ứng dụng 109 Kiểm thử phần mềm 114 2.1 Chức đăng ký 114 2.2 Chức đăng nhập 115 2.3 Chức đổi mật 116 2.4 Chức tìm kiếm sản phẩm 116 2.5 Chức đặt hàng 117 CHƯƠNG VI: KẾT LUẬN 118 Kết đạt 118 Ưu nhược điểm 118 2.1 Ưu điểm 118 2.2 Nhược điểm 118 2.3 Kinh nghiệm đạt 118 2.4 Hướng phát triển tương lai 118 v Báo cáo đồ án tốt nghiệp DANH MỤC HÌNH ẢNH Hình 1 Mơ hình hoạt động Hình Khác biệt Virtual Dom Hình Phương thức hoạt động Redux Hình Trang chủ MWC 10 Hình 2 Trang chủ MWC 10 Hình Chi tiết sản phẩm MWC 11 Hình Giỏ hàng MWC 11 Hình 5.Trang chủ JUNO Shop 12 Hình Chi tiết sản phẩm Juno Shop 12 Hình Sở đồ Usecase tổng quát 14 Hình Usecase đăng ký 15 Hình Usecase đăng nhập (khách hàng) 16 Hình 10 Usecase tìm kiếm sản phẩm 19 Hình 11 Usecase filter sản phẩm 20 Hình 12 Usecase xem viết 22 Hình 13 Usecase đăng xuất 23 Hình 14 Usecase thêm vào giỏ hàng 24 Hình 15 Usecase thao tác giỏ hàng 25 Hình 16 Usecase hình thức tốn 28 Hình 17 Usecase theo dõi đơn hàng đặt 29 Hình 18 Usecase quản lý sản phẩm 31 Hình 19 Usecase quản lý đơn hàng 35 Hình 20 Usecase quản lý tài khoản 37 Hình 21 Usecase quản lý viết 39 Hình Mơ hình thiết kế liệu 43 Hình Sequence tìm kiếm tên 49 Hình 3 Sequence tìm kiếm mã sản phẩm 50 Hình Sequence filter theo giá 50 Hình Sequence filter theo thương hiệu 51 Hình Sequence filter theo màu 51 Hình Sequence xem chi tiết sản phẩm 52 Hình Sequence bình luận đánh giá 52 Hình Sequence cập nhật bình luận 53 Hình 10 Sequence xem giỏ hàng 53 vi Báo cáo đồ án tốt nghiệp Hình 11 Sequence thêm vào giỏ hàng 54 Hình 12 Sequence cập nhật giỏ hàng 54 Hình 13 Sequence xóa sản phẩm giỏ hàng 55 Hình 14 Sequence đăng ký 55 Hình 15 Sequence đăng nhập 56 Hình 16 Sequence xem thơng tin tài khoản 56 Hình 17 Sequence sửa thơng tin tài khoản 57 Hình 18 Sequence đổi mật 57 Hình 19 Sequence toán đơn hàng 58 Hình 20 Sequence xem danh sách đơn hàng đặt 58 Hình 21 Sequence xem chi tiết đơn hàng 59 Hình 22 Sequence hủy đơn hàng 59 Hình 23 Sequence thêm sản phẩm 60 Hình 24 Sequence sửa đổi sản phẩm 60 Hình 25 Sequence xóa sản phẩm 61 Hình 26 Sequence xem chi tiết sản phẩm 61 Hình 27 Sequence thêm danh mục 62 Hình 28 Sequence sửa danh mục 62 Hình 29 Sequence xóa danh mục 63 Hình 30 Sequence quản lý tài khoản 63 Hình 31 Sequence lấy danh sách đơn hàng 64 Hình 32 Sequence từ chối đơn hàng 64 Hình 33 Sequence duyệt đơn hàng 65 Hình 34 Sequence đăng xuất 65 Hình 35 Sequence Xem chi tiết viết 66 Hình 36 Sequence quản lý viết 66 Hình 37 Sequence sửa viết 67 Hình 38 Sequence xóa viết 67 Hình 39 Sequence đăng viết gỡ viết 68 Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 1.Màn hình trang chủ 69 2.Màn hình chi tiết viết 71 3.Màn hình danh sách sản phẩm 73 4.Màn hình chi tiết sản phẩm 75 5.Màn hình chi tiết sản phẩm 76 6.Màn hình giỏ hàng (có sản phẩm) 79 7.Màn hình giỏ hàng (trống) 79 8.Modal login 81 9.Modal đăng ký 81 10.Màn hình thơng tin khách hàng 83 vii Báo cáo đồ án tốt nghiệp Hình Hình Hình Hình Hình 11.Màn hình quản lý đơn hàng đặt 84 12.Màn hình chi tiết đơn hàng đặt 85 13.Màn hình quản lý sổ địa 86 14.Màn hình thêm địa 87 15.Màn hình đổi mật 88 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 Hình 4.2 1.Màn hình đăng nhập Admin 89 2.Màn hình dashboard 90 3.Màn hình quản lý viết 91 4.Màn hình thêm viết 93 5.Màn hình thêm viết 93 6.Màn hình quản lý sản phẩm 94 7.Màn hình thêm/sửa sản phẩm 96 8.Màn hình quản lý màu 98 9.Màn hình thêm màu 98 10.Màn hình quản lý thương hiệu 99 11.Màn hình thên thương hiệu 100 12.Màn hình quản lý danh mục 101 13.Màn hình thêm danh mục 101 14.Màn hình quản lý kích thước 102 15.Màn hình thêm kích thước 103 16.Màn hình quản lý đơn hàng 104 17.Màn hình quản lý tài khoản 105 18.Màn hình quản lý đánh giá sản phẩm 106 19.Màn hình quản lý doanh thu 107 viii Báo cáo đồ án tốt nghiệp DANH MỤC BẢNG Bảng Usecase đăng ký 15 Bảng 2 Usecase đăng nhập Email 17 Bảng Usecase đăng nhập Facebook 18 Bảng Usecase đăng nhập Google 18 Bảng Usecase tìm kiếm theo tên sản phẩm 19 Bảng Usecase tìm kiếm theo mã 20 Bảng Usecase filter theo giá 21 Bảng Usecase filter theo thương hiệu 21 Bảng Usecase filter theo màu 22 Bảng 10 Usecase xem viết 23 Bảng 11 Usecase đăng xuất 24 Bảng 12 Usecase thêm sản phẩm vào giỏ 25 Bảng 13 Usecase thêm thông tin giỏ hàng 26 Bảng 14 Usecase thay đổi số lượng sản phẩm giỏ hàng 26 Bảng 15 Usecase loại bỏ sản phẩm khỏi giỏ 27 Bảng 16 Usecase đặt hàng 27 Bảng 17 Usecase theo dõi đơn hàng 29 Bảng 18 Usecase hủy đơn hàng 30 Bảng 19 Usecase quản lý sản phẩm tổng quát 31 Bảng 20 Usecase thêm sản phẩm 32 Bảng 21 Usecase chỉnh sửa sản phẩm 33 Bảng 22 Usecase xóa sản phẩm 33 Bảng 23 Usecase tìm kiếm sản phẩm (admin) 34 Bảng 24 Usecase xem chi tiết sản phẩm 35 Bảng 25 Usecase quản lý đơn hàng 35 Bảng 26 Usecase xác nhận đơn hàng 36 Bảng 27 Usecase hủy đơn hàng 36 Bảng 28 Usecase quản lý tài khoản 37 Bảng 29 Usecase khóa tài khoản 38 Bảng 30 Usecase quản lý viết 39 Bảng 31 Usecase thêm viết 40 Bảng 32 Usecase chỉnh sửa viết 41 Bảng 33 Usecase xóa viết 42 ix Báo cáo đồ án tốt nghiệp Thông tin người đặt hàng Form Data từ API Ảnh sản phẩm Image Data từ API Thông tin sản phẩm Text Data từ API 10 Đơn giá sản phẩm Text Data từ API 11 Số lượng sản phẩm Text Data từ API 12 Tổng giá thành sản phẩm dựa số lượng Text Data từ API 14 Ẩn chi tiết đơn hàng Button Bảng 23 Mô tả SAP011 Order management 1.12 SAP012 Account Management Hình 4.2 17.Màn hình quản lý tài khoản Chương & 4: Thiết kế ứng dụng 105 Báo cáo đồ án tốt nghiệp No Name Required Type Reference Tên tài khoản Text Data từ API Ngày tạo tài khoản Text Data từ API Vài trò tài khoản Text Data từ API Ngày online gần Text Data từ API Số online Text Data từ API Loại tài khoản Text Data từ API Tình trạng tài khoản Label Data từ API Khóa tài khoản Button Note Cịn có loại tài khoản Facebook, Google Bảng 24 Mô tả SAP012 Account management 1.13 SAP013 Rating Management screen Hình 4.2 18.Màn hình quản lý đánh giá sản phẩm Chương & 4: Thiết kế ứng dụng 106 Báo cáo đồ án tốt nghiệp No Name Required Type Tên danh mục Text Danh mục số lượng theo Text Danh sách sản phẩm phân loại theo Table Nút ẩn comment Button Nút xóa comment Button Reference Note Data từ API Bảng 25 Mô tả SAP012 Rating Management Screen 1.14 SAP014 Revenue Management screen Hình 4.2 19.Màn hình quản lý doanh thu Chương & 4: Thiết kế ứng dụng 107 Báo cáo đồ án tốt nghiệp No Name Required Type Reference Note Tên danh mục Text Đơn hàng doanh thu ngày Text Data từ API Đơn hàng bị hủy ngày Text Data từ API Tỉ lệ doanh thu so với hôm qua Text Data từ API Tổng doanh thu Text Data từ API Thông số theo option (6) người dùng chọn Option chọn để thống kê (theo ngày, theo tuần, theo tháng) Button Biểu đồ thể doanh thu Chart Data từ API Thông số theo option (6) người dùng chọn Bảng 256 Mô tả SAP012 Revenue Management Scre Chương & 4: Thiết kế ứng dụng 108 Báo cáo đồ án tốt nghiệp CHƯƠNG V: CÀI ĐẶT VÀ KIỂM THỬ Cài đặt ứng dụng ❖ ❖ ❖ ❖ Máy phải có cài đặt npm Máy có cài đặt NodeJS Máy phải cài đặt SQL server Máy phải cài đặt trước Visual Studio Các bước cài đặt: Ở hướng dẫn này, nhóm sử dụng IDE Visual Studio Code: Bước 1: Clone download project từ link github: https://github.com/Thanhnhan77620/Khoa-Luan-Tot-Nghiep.git Bước 2: Một thư mục có tên “Khoa-Luan-Tot-Nghiep” xuất sau clone project từ github giải nén file đính kèm báo cáo Tiến hành vào thư mục “Khoa-Luan-Tot-Nghiep” Bước 3: Sau vào thư mục “Khoa-Luan-Tot-Nghiep” (như hình), Tiến vào thư mục “Reference” mở file “SQLQuery.sql” để cài đặt database SQL Hình Thư mục Khoa-Luan-Tot-Nghiep Chương 5: Cài đặt kiểm thử 109 Báo cáo đồ án tốt nghiệp Hình Thư mục reference Bước 4: Mở thư mục “Shop-Shose-FE-Client” click chuột phải chọn “Open with Code” để tiến hành cài đặt trang web bên khách hàng Mở thư mục “Shop-Shose-FE-Manage” click chuột phải chọn “Open with Code” để tiến hành cài đặt trang web bên admin: Hình Mở front-end visual code Bước 5: Sau mở project Visual Studio Code, chọn “Terminal” taskbar, chọn tiếp “New Terminal” (Hoặc đơn giản bấm tổ hợp phím Ctrl +`) Chương 5: Cài đặt kiểm thử 110 Báo cáo đồ án tốt nghiệp Hình Giao diện visual studio code Bước 6: Sau cửa sổ Command Line tích hợp ra, chạy lệnh “yarn install” (bên manager front-end sử dụng “npm install”) để cập nhật thư viện, package thiếu máy mà Project cần Hình 5 Màn hình Intergrate Command Line Chương 5: Cài đặt kiểm thử 111 Báo cáo đồ án tốt nghiệp Bước 7: Sau lệnh npm install kết thúc, mở thêm cửa sổ Command Line cách nhấn vào nút “Split Terminal” taskbar cửa sổ Command Line Tạm dừng bên front end vào thư mục “Shop-Shose-BE” để khỏi động backend Nhấn chọn file “Shop-Shose-BE.sln” Hình Thư mục back-end Bước 8: Sau hình visual studio lên nhấn vào nút khỏi chạy sau để khỏi chạy back-end Hình Giao diện visual studio Chương 5: Cài đặt kiểm thử 112 Báo cáo đồ án tốt nghiệp Bước 9: Sau nhấn chạy back-end hiển thị terminal sau: Hình Khởi động back-end Bước 10: Sau chạy back-end trở hình front-end tiến khởi hình front end mà muốn chạy hình khác hàng (client) Bằng gõ lệnh “npm start” vào terminal Nhấn enter để chạy lệnh: Hình Màn hình CLI chạy ứng dụng ReactJS Chương 5: Cài đặt kiểm thử 113 Báo cáo đồ án tốt nghiệp Bước 11: Terminal hình trình duyệt web tự động chạy trang web lên Hoặc chạy tay cách mở trình duyệt web nhập url: https://localhost:3006/ Hình 10 Kết chạy thành công React Kiểm thử phần mềm Sau thực xong việc kiểm thử nhóm xin trình bày số test case tiêu biểu 2.1 Chức đăng ký Test Case Description SignUp_001 Đăng ký tài khoản user ID SignUp_002 Kiểm tra bỏ trống trường đánh dấu SignUp_003 Kiểm tra nhập email tồn hệ thống Chương 5: Cài đặt kiểm thử Test steps Expected Output Result Nhập thơng tin u cầu hình: địa Email, Tên đầy đủ, Mật xác nhận mật Nhấn nút Đăng ký Bỏ trống trường đánh dấu nhấn Đăng ký Nhập thông tin yêu cầu nhập email tồn hệ thống Nhấn nút Đăng ký Đăng ký thành công thông báo thành công đóng Modal đăng ký Pass u cầu nhập lại thơng tin đầy đủ tương ứng với trường Hệ thống khơng cho tạo tài khoản email tồn yêu cầu phải nhập lại Pass Pass 114 Báo cáo đồ án tốt nghiệp SignUp_004 Kiểm tra việc verify email đăng ký xong Nhập thông Mail gửi tới tin yêu cầu email user chứa Nhấn nút Đăng mã kích hoạt tài ký khoản Hệ thống gửi mail để kích hoạt tài khoản mà user đăng ký Bảng 1.Kiểm thử chức đăng ký Pass 2.2 Chức đăng nhập ID Test Case Description Test steps Expected Output Nhập tên đăng nhập mật chưa đăng kí hệ thống Hiện thông báo “Tài khoản email mật khơng xác!” Pass Đăng nhập thành cơng hệ thống chuyển sang trang HomePage Đăng nhập thất bại show lỗi hình trang yêu cầu nhập lại Đăng nhập trang Nhập email Đăng nhập thành công admin password tài hệ thống chuyển sang khoản admin trang quản lý Nhấn nút Sign admin In Đăng nhập thất bại reload trang yêu cầu nhập lại Bảng 2.Kiểm thử chức đăng nhập Pass SignIn _001 Kiểm tra việc đăng nhập chưa có tài khoản SignIn _002 SignIn _003 Nhấn nút đăng nhập Đăng nhập trang Nhập email client password tài khoản user Nhấn nút Đăng nhập Chương 5: Cài đặt kiểm thử Result Pass 115 Báo cáo đồ án tốt nghiệp 2.3 Chức đổi mật ID ChangePass _001 ChangePass _002 Test Case Description Kiểm tra việc đổi mật với việc nhập mật sai Test steps Nhập mật sai Expected Output Result Hiện thông báo “Mật Pass bạn nhập khơng xác” Nhấn nút đổi mật Kiểm tra việc Nhập mật Hiện thông báo “Đổi Pass đổi mật với mật thành công” việc nhập mật Nhấn nút Đổi mật Bảng 3.Kiểm thử chức đổi mật 2.4 Chức tìm kiếm sản phẩm ID Test Case Description SearchProduct _001 Tìm kiếm sản phẩm hệ thống SearchProduct _002 Test steps Expected Output Truy cập vào trang HomePage Xuất sản phẩm tương ứng trang categoryProduct Pass Hiện thông báo “Sản phẩm bạn tìm kiếm khơng tồn tại” Pass Nhập tên sản phẩm vào tìm kiếm Truy cập vào trang HomePage Tìm kiếm sản phẩm chưa có hệ thống Nhập tên sản phẩm vào ô tìm kiếm Result Bảng 4.Kiểm thử chức tìm kiếm Chương 5: Cài đặt kiểm thử 116 Báo cáo đồ án tốt nghiệp 2.5 Chức đặt hàng Test Case Test steps Expected Output Result Description Payment_001 Kiểm tra việc Nhấn vào giỏ Hiện thông báo giỏ Pass tiến hàng hàng hàng trống đưa tốn khơng Nhấn vào tiến khách hàng đến trang có sản phẩm hành đặt hàng categoreProduct để mua giỏ hàng sản phẩm Payment_002 Kiểm tra việc Nhập đầy đủ Email gửi đến Pass sau thơng tin cần người dùng với tốn gửi email tốn thơng tin đơn thơng báo Thực việc hàng người dùng toán Bảng 5.Kiểm thử chức đặt hàng ID Chương 5: Cài đặt kiểm thử 117 Báo cáo đồ án tốt nghiệp CHƯƠNG VI: KẾT LUẬN Kết đạt • Kỹ làm việc nhóm tốt, kỹ giao tiếp team, phân công công việc làm dự án ngắn ngày • Kỹ search tài liệu, kỹ tìm kiếm giải pháp mạng cho khúc mắc trình xây dựng đồ án • Biết cách áp dụng sở liệu SQL để xây dựng database cho hệ thống, xây dựng web server REST API phục vụ cho ứng dụng web lẫn ứng dụng di động, xây dựng giao diện trang web dạng Single Page Application ReactJS Ưu nhược điểm 2.1 Ưu điểm - Website thiết kế với giao diện dễ nhìn, thân thiện với người dùng - Thao tác đặt mua toán đơn giản - Bằng việc gợi ý hiệu sản phẩm (item) cho tuỳ người dùng, giúp người dùng cảm thấy thuận tiện, thích thú website Và điều giúp tăng lợi nhuận cho cửa hàng - Dễ quản lý trang web với sản phẩm phong phú khác 2.2 Nhược điểm - Về giao diện, nhiều thiếu sót việc thiết kế nên website tương thích với máy tính cịn nhiều trang chưa thực sự ổn việc thiết kế - Về chức năng, nghiệp vụ kinh nghiệm nên việc xử lý bất đồng tốn cịn lỗi số lỗi 2.3 Kinh nghiệm đạt - Học cách quản lý source control bản, hỗ trợ tốt việc làm dự án nhiều người 2.4 Hướng phát triển tương lai - Mở rộng phát triển từ thành chuỗi cửa hàng - Setup deploy website lên Docker - Tích hợp thêm nhiều cổng tốn Zalo Pay, MoMo, Internet Banking Chương 6: Kết luận 118 ... ASP.Net MVC khơng sử dụng view state trang web khơng bị tăng kích thước hiệu hoạt động không bị bị giảm - Ứng dụng ASP.NET Core phát triển sử dụng NET Core NET Framework Ứng dụng ASP.NET Core xây. .. Bằng ASP NET Core ReactJS? ?? sử dụng công nghệ ASP NET với hệ quản trị sở liệu SQL Server làm đề tài đồ án tốt nghiệp Báo cáo đồ án tốt nghiệp 2.Mục đích đề tài ▪ Đây website nhằm bán giới thiệu... View 2.3 ASP.Net Core làm - Do sử dụng mơ hình MVC nên ASP.Net MVC tách biệt tầng mơ hình lập trình web giúp tối ưu ứng dụng dễ dàng việc viết code, giao diện - Giao diện ASP.Net MVC sử dụng công