Xây dựng website bán giày sử dụng net core và reactjs đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

133 384 0
Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

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 ý q thầy, 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 tố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 Bảng Mô tả liệu Collection: Category 44 Bảng Mô tả liệu Collection: Product 44 Bảng 3 Mô tả liệu Collection: Brand 44 Bảng Mô tả liệu Collection: Color & Size product 45 Bảng Mô tả liệu Collection: Color 45 Bảng Mô tả liệu Collection: Size 45 Bảng Mô tả liệu Collection: Post 46 Bảng Mô tả liệu Collection: Rating 46 Bảng Mô tả liệu Collection: Comment 46 Bảng 10 Mô tả liệu Collection: Favorite product 47 Bảng 11 Mô tả liệu Collection: Customer 47 Bảng 12 Mô tả liệu Collection: Account 47 Bảng 13 Mô tả liệu Collection: Address 48 Bảng 14 Mô tả liệu Collection: Cart product 48 Bảng 15 Mô tả liệu Collection: Shopping cart 48 Bảng 16 Mô tả liệu Collection: Order 48 Bảng 17 Mô tả liệu Collection: Order detail 49 x Báo cáo đồ án tốt nghiệp 1.11 SAP011 Order Management screen Hình 4.2 16.Màn hình quản lý đơn hàng No Name Required Type Reference Note Ngày đặt hàng Text Data từ API Tổng tiền đơn hàng Text Data từ API Trạng thái đơn hàng Text Data từ API Chấp thuận đơn hàng Button Click thay đổi trạng thái đơn hàng thành “Delivering” Từ chối đơn hàng Button Click thay đổi trạng thái đơn hàng thành “Cancelled” Ẩn chi tiết đơn hàng Button Chương & 4: Thiết kế ứng dụng 104 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 yê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 Yê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 toán gửi email toá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 q 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, cị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 toá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 toán Zalo Pay, MoMo, Internet Banking Chương 6: Kết luận 118 ... tài ? ?Website Bán Già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. .. độ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 dựng sử dụng NET Core chạy hệ điều hành xây dựng NET Framework chạy Windows... Các nhà soạn bắt đầu áp dụng công nghệ công thông tin điện tử từ nhiều năm trước và khơng ngừng phát triển nhu cầu sử dụng ngày tăng cao theo - Thông qua sản phẩm công nghệ này, dễ dàng nhận tầm

Ngày đăng: 05/06/2022, 17:37

Hình ảnh liên quan

Hình 2.7. Sở đồ Usecase tổng quát - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 2.7..

Sở đồ Usecase tổng quát Xem tại trang 29 của tài liệu.
6. Đăng nhập thành công chuyển về homepage và hiển thị tên và hình ảnh người dùng ở header  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

6..

Đăng nhập thành công chuyển về homepage và hiển thị tên và hình ảnh người dùng ở header Xem tại trang 32 của tài liệu.
Bảng 2.5. Usecase tìm kiếm theo tên sản phẩm - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 2.5..

Usecase tìm kiếm theo tên sản phẩm Xem tại trang 34 của tài liệu.
Bảng 2.6. Usecase tìm kiếm theo mã - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 2.6..

Usecase tìm kiếm theo mã Xem tại trang 35 của tài liệu.
Bảng 2.9. Usecase filter theo màu - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 2.9..

Usecase filter theo màu Xem tại trang 37 của tài liệu.
Hình 2.13. Usecase đăng xuất - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 2.13..

Usecase đăng xuất Xem tại trang 38 của tài liệu.
Bảng 2.10. Usecase xem bài viết - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 2.10..

Usecase xem bài viết Xem tại trang 38 của tài liệu.
2.4. Đặc tả Usecase(Admin) - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

2.4..

Đặc tả Usecase(Admin) Xem tại trang 46 của tài liệu.
Basic Flow 1. Chọn thanh tìm kiếm phía trên bảng danh sách sách sản phẩm 2. Nhập tên sản phẩm và nhấn tìm kiếm  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

asic.

Flow 1. Chọn thanh tìm kiếm phía trên bảng danh sách sách sản phẩm 2. Nhập tên sản phẩm và nhấn tìm kiếm Xem tại trang 49 của tài liệu.
Bảng 2. 24. Usecase xem chi tiết sản phẩm - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 2..

24. Usecase xem chi tiết sản phẩm Xem tại trang 50 của tài liệu.
Bảng 2. 26. Usecase xác nhận đơn hàng c. Hủy đơn hàng  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 2..

26. Usecase xác nhận đơn hàng c. Hủy đơn hàng Xem tại trang 51 của tài liệu.
Hình 3.15. Sequence đăng nhập 3.8. Sequence Quản lý thông tin tài khoản  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 3.15..

Sequence đăng nhập 3.8. Sequence Quản lý thông tin tài khoản Xem tại trang 71 của tài liệu.
Hình 4. 5.Màn hình chi tiết sản phẩm 2 - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4..

5.Màn hình chi tiết sản phẩm 2 Xem tại trang 91 của tài liệu.
màn hình SCP003 - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

m.

àn hình SCP003 Xem tại trang 95 của tài liệu.
Hình 4. 8.Modal login - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4..

8.Modal login Xem tại trang 96 của tài liệu.
hình LoginByFacebook 6 Đăng nhập bằng  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

h.

ình LoginByFacebook 6 Đăng nhập bằng Xem tại trang 97 của tài liệu.
Hình 4. 11.Màn hình quản lý đơn hàng đã đặt - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4..

11.Màn hình quản lý đơn hàng đã đặt Xem tại trang 99 của tài liệu.
Bảng 4. 8. Mô tả SCP008 User order screen 1.9. SCP009 User order info screen  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 4..

8. Mô tả SCP008 User order screen 1.9. SCP009 User order info screen Xem tại trang 100 của tài liệu.
Bảng 4. 9. Mô tả SCP009 User order info screen 1.10. SCP010 User address manage screen  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 4..

9. Mô tả SCP009 User order info screen 1.10. SCP010 User address manage screen Xem tại trang 101 của tài liệu.
9 Hủy thêm địa chỉ Button Chuyển đến màn hình - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

9.

Hủy thêm địa chỉ Button Chuyển đến màn hình Xem tại trang 103 của tài liệu.
Bảng 4. 16. Mô tả SAP004 Post Add/Post Edit/Post detail screen 1.5. SAP005 Product Management screen  - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 4..

16. Mô tả SAP004 Post Add/Post Edit/Post detail screen 1.5. SAP005 Product Management screen Xem tại trang 109 của tài liệu.
màn hình SAP005 - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

m.

àn hình SAP005 Xem tại trang 112 của tài liệu.
Hình 4.2. 8.Màn hình quản lý màu - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4.2..

8.Màn hình quản lý màu Xem tại trang 113 của tài liệu.
Hình 4.2. 10.Màn hình quản lý thương hiệu - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4.2..

10.Màn hình quản lý thương hiệu Xem tại trang 114 của tài liệu.
Hình 4.2. 13.Màn hình thêm danh mục - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4.2..

13.Màn hình thêm danh mục Xem tại trang 116 của tài liệu.
Hình 4.2. 12.Màn hình quản lý danh mục - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4.2..

12.Màn hình quản lý danh mục Xem tại trang 116 của tài liệu.
Hình 4.2. 17.Màn hình quản lý tài khoản - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 4.2..

17.Màn hình quản lý tài khoản Xem tại trang 120 của tài liệu.
Hình 5. 6. Thư mục back-end - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Hình 5..

6. Thư mục back-end Xem tại trang 127 của tài liệu.
Bước 10: Sau khi chạy back-end chúng ta trở về màn hình front-end và tiến khởi màn hình - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

c.

10: Sau khi chạy back-end chúng ta trở về màn hình front-end và tiến khởi màn hình Xem tại trang 128 của tài liệu.
Bảng 5. 4.Kiểm thử chức năng tìm kiếm - Xây dựng website bán giày sử dụng  net core và reactjs   đồ án tốt nghiệp khoa đào tạo chất lượng cao ngành công nghệ thông tin

Bảng 5..

4.Kiểm thử chức năng tìm kiếm Xem tại trang 131 của tài liệu.

Tài liệu cùng người dùng

Tài liệu liên quan