Xây Dựng Trang Web Thương Mại Điện Tử Kinh Doanh Thời Trang Sử Dụng Reactjs Và Asp.net

Trong thời đại kỷ nguyên số ngày nay, công nghệ thông tin không những là một phương tiện hữu ích mà còn giữ vai trò ngày càng quan trọng trong cuộc sống, quyết định trình độ phát triển từng khu vực, từng quốc gia, thông qua việc ngày càng làm tăng năng suất một cách tối đa. Việc áp dụng công nghệ tân tiến trong mọi mặt đời sống là một điều tất yếu. Thời trang là một lĩnh vực kinh doanh rất lớn và luôn thay đổi, đặc biệt trong thời đại công nghệ hiện nay. Với việc xây dựng một trang web thương mại điện tử kinh doanh thời trang, bạn có thể tiếp cận được với nhiều khách hàng tiềm năng và tạo ra một mô hình kinh doanh hiệu quả. Thay vì việc phải xây các cửa hàng bán hàng đầy tốn kém thì công nghệ thông tin giúp chúng ta có thể tiện lợi và tiết kiệm chi phí, cạnh tranh với các đối thủ, nâng cao trải nghiệm mua sắm của khách hàng, tiềm năng tăng trưởng lớnTrong công tác bán hàng cần phải phục vụ với rất nhiều khách hàng cùng một lúc là một công việc rất quan trọng mà quá trình đó rất mất nhiều thời gian và công sức, việc tiếp cận khách hàng ở xa là vô cùng khó khăn. Từ những vấn đề trên em đã quyết định chọn đề tài: “Xây dựng ứng dụng web thương mại điện tử kinh doanh thời trang sử dụng ReactJS và ASP.NET”. Do kiến thức còn hạn hẹp nên báo cáo không tránh khỏi sai sót, rất mong sự đóng góp ý kiến của thầy cô và các bạn để báo cáo được hoàn chỉnh hơn. Mục đích đề tài Mục đích chính của đề tài xây dựng trang web thương mại điện tử kinh doanh thời trang sử dụng ReactJS và ASP.NET là: Xây dựng một trang web thương mại điện tử kinh doanh thời trang chuyên nghiệp, thân thiện với người dùng và đáp ứng các yêu cầu chức năng của khách hàng. Sử dụng công nghệ ReactJS để xây dựng giao diện người dùng cho trang web thương mại điện tử, giúp cải thiện trải nghiệm người dùng và tăng tính tương tác. Sử dụng công nghệ ASP.NET để xây dựng API cho trang web thương mại điện tử, giúp tăng tính bảo mật, hiệu suất và khả năng mở rộng của trang web. Tích hợp các tính năng thanh toán an toàn và tiện lợi cho khách hàng, giúp đảm bảo tính tiện lợi và an toàn cho quá trình thanh toán trực tuyến. Kiểm tra và triển khai trang web thương mại điện tử trên môi trường sản xuất, đảm bảo hoạt động ổn định và đáp ứng các yêu cầu chức năng của khách hàng. Nội dung nghiên cứu Nội dung nghiên cứu đề tài xây dựng trang web thương mại điện tử sử dụng ReactJS và ASP.NET có thể bao gồm các phần sau: Giới thiệu về ReactJS và ASP.NET: Trong phần này, sẽ giới thiệu về ReactJS và ASP.NET và lý do chọn sử dụng để xây dựng trang web thương mại điện tử. Phân tích yêu cầu chức năng của trang web thương mại điện tử: Bao gồm chức năng đăng nhập, đăng ký, xem sản phẩm, thêm sản phẩm vào giỏ hàng, thanh toán và quản lý đơn hàng. Thiết kế cơ sở dữ liệu: Trang web thương mại điện tử sử dụng cơ sở dữ liệu để lưu trữ thông tin sản phẩm, khách hàng và đơn hàng. Xây dựng giao diện người dùng: Giao diện người dùng là phần quan trọng nhất của trang web thương mại điện tử, xây dựng giao diện thân thiện với người dùng, dễ sử dụng và hấp dẫn. Sử dụng ReactJS để xây dựng giao diện người dùng của trang web thương mại điện tử. Xây dựng API: API là một phần quan trọng của trang web thương mại điện tử, cho phép giao tiếp giữa trình duyệt web và cơ sở dữ liệu. Trong phần này, bạn sẽ sử dụng ASP.NET để xây dựng API cho trang web thương mại điện tử của bạn. Tích hợp thanh toán: Tích hợp thanh toán là một yếu tố quan trọng của trang web thương mại điện tử, cho phép khách hàng thực hiện thanh toán một cách an toàn và thuận tiện. Trong phần này, bạn sẽ tích hợp các cổng thanh toán như PayPal hoặc Stripe vào trang web thương mại điện tử của bạn. Kiểm thử và triển khai: Sau khi hoàn thành xây dựng trang web thương mại điện tử.

MỤC LỤC MỤC LỤC i DANH MỤC CÁC KÝ HIỆU, CÁC CHỮ VIẾT TẮT iii DANH MỤC HÌNH ẢNH iv DANH MỤC BẢNG BIỂU vii MỞ ĐẦU CHƯƠNG TỔNG QUAN VỀ ỨNG DỤNG WEB TRONG THƯƠNG MẠI ĐIỆN TỬ 1.1.Giới thiệu thương mại điện tử .5 1.1.1.Khái niệm thương mại điện tử 1.1.2.Nội dung thương mại điện tử 1.2.Tổng quan ứng dụng web thương mại điện tử 1.2.1.Mơ hình web ứng dụng thương mại điện tử 1.2.2.Công nghệ sử dụng phát triển thương mại điện tử 1.3.Công nghệ ASP.NET, ReactJS MySQL 1.4.Mơ hình sử dụng 10 TỔNG KẾT CHƯƠNG 13 CHƯƠNG PHÂN TÍCH THIẾT KẾ HỆ THỐNG 14 2.1.Biểu đồ Use Case .14 2.1.1.Các Use Case 14 2.1.2.Quan hệ use case 15 2.2.Mô tả chi tiết use case 17 2.2.1.Đăng ký 17 2.2.2.Đăng nhập .18 2.2.3.Quên mật 19 2.2.4.Xem sản phẩm 20 2.2.5.Quản lý giỏ hàng 20 2.2.6.Đặt hàng 21 2.2.7.Đánh giá sản phẩm 22 2.2.8.Hủy đơn hàng 22 2.2.9.Cập nhật tài khoản 23 2.2.10.Quản lý đơn hàng 24 2.2.11.Quản lý danh mục 24 2.2.12.Quản lý sản phẩm 25 2.2.13.Quản lý tài khoản 27 2.3.Biểu đồ trình tự 28 2.3.1.Đăng ký 28 2.3.2.Đăng nhập .29 2.3.3.Quên mật 30 2.3.4.Xem sản phẩm 31 2.3.5.Quản lý giỏ hàng 31 2.3.6.Đặt hàng 32 2.3.7.Đánh giá sản phẩm 32 2.3.8.Hủy đơn hàng 33 2.3.9.Cập nhật tài khoản 33 2.3.10.Quản lý đơn hàng 34 2.3.11.Quản lý danh mục 34 2.3.12.Quản lý sản phẩm 36 2.3.13.Quản lý tài khoản 37 2.4.Biểu đồ lớp 38 2.5.Thiết kế sở liệu 39 2.6.Thiết kế giao diện 44 CHƯƠNG THỬ NGHIỆM VÀ ĐÁNH GIÁ HỆ THỐNG 51 3.1.Các kịch thử nghiệm 51 3.2.Một số kết đạt 61 PHỤ LỤC .69 KẾT LUẬN 70 TÀI LIỆU THAM KHẢO 71 DANH MỤC CÁC KÝ HIỆU, CÁC CHỮ VIẾT TẮT STT Tên chữ viết tắt 01 GVHD 02 SV 03 UI User Interface 04 SSL Secure Sockets Layer 05 06 HTTPS HTML Tiếng Anh Tiếng Việt Giáo viên hướng dẫn Sinh Viên Hypertext Transfer Protocol Secure Giao diện người dùng Lớp cổng bảo vệ Giao thức truyền tải siêu văn an tồn Hyper Text Markup Ngơn ngữ đánh Language dấu siêu văn DANH MỤC HÌNH ẢNH Hình 1.1: Mơ hình ASP.NET kết hợp với ReactJS .11 Hình 2: Biểu đồ use case mức tổng quát 14 Hình 3: Quan hệ use case quản lý danh mục 15 Hình 4: Quan hệ use case quản lý sản phẩm 15 Hình 5: Quan hệ use case quản lý đơn hàng .16 Hình 2.6: Quan hệ use case quản lý tài khoản khách hàng .16 Hình 7: Quan hệ use case quản lý tài khoản nhân viên 17 Hình 2.8: Biểu đồ trình tự use case đăng ký 28 Hình 2.9: Biểu đồ trình tự use case đăng nhập 29 Hình 2.10: Biểu đồ trình tự use case quên mật .30 Hình 2.11: Biểu đồ trình tự use case xem sản phẩm .31 Hình 12: Biểu đồ trình tự use case quản lý giỏ hàng 31 Hình 13: Biểu đồ trình tự use case đặt hàng 32 Hình 2.14: Biểu đồ trình tự use case đánh giá sản phẩm 32 Hình 15: Biểu đồ trình tự use case hủy đơn hàng .33 Hình 16: Biểu đồ trình tự use case cập nhật tài khoản 33 Hình 17: Biểu đồ trình tự use case quản lý đơn hàng .34 Hình 2.18: Biểu đồ trình tự use case xóa danh mục 34 Hình 2.19: Biểu đồ trình tự use case thêm danh mục 35 Hình 2.20: Biểu đồ trình tự use case cập nhật danh mục 35 Hình 2.21: Biểu đồ trình tự use case xóa sản phẩm 36 Hình 2.22: Biểu đồ trình tự use case thêm sản phẩm 36 Hình 2.23: Biểu đồ trình tự use case cập nhật sản phẩm .37 Hình 24: Biểu đồ trình tự use case quản lý tài khoản 37 Hình 25: Biểu đồ lớp hệ thống) 38 Hình 2.26: Giao diện đăng nhập 44 Hình 2.27: Giao diện đăng ký .44 Hình 2.28: Giao diện quên mật .45 Hình 2.29: Giao diện chi tiết giỏ hàng 45 Hình 2.30: Giao diện tốn 46 Hình 2.31: Giao diện đánh giá sản phẩm 46 Hình 2.32 Giao diện hủy đơn hàng .47 Hình 2.33 Giao diện cập nhật thông tin cá nhân 47 Hình 2.34 Giao diện danh sách đơn hàng .48 Hình 2.35 Giao diện danh sách danh mục .48 Hình 2.36 Giao diện danh sách sản phẩm .49 Hình 1: Ảnh người dùng click vào icon đăng nhập 52 Hình 2: Ảnh hiển thị hình đăng nhập 52 Hình 3: Ảnh người dùng nhập thơng tin đăng nhập 53 Hình 4: Ảnh kết đăng nhập 53 Hình 5: Ảnh giao diện tìm kiếm sản phẩm 54 Hình 6: Ảnh kết tìm kiếm sản phẩm thành cơng 54 Hình 7: Ảnh người dùng chọn sản phẩm muốn xem 55 Hình 8: Ảnh kết hiển thị thông tin sản phẩm 55 Hình 9: Ảnh cập nhật giỏ hàng 56 Hình 10: Ảnh kết cập nhật giỏ hàng thành công 56 Hình 11: Ảnh người dùng chọn thông tin tài khoản 57 Hình 12: Ảnh chi tiết thơng tin tài khoản 57 Hình 13: Ảnh người dùng click cập nhật tài khoản 58 Hình 14: Ảnh kết cập nhật tài khoản thành cơng .58 Hình 15: Ảnh admin chọn quản lý sản phẩm 59 Hình 16: Ảnh admin click “Thêm” 59 Hình 17: Ảnh hệ thống hiển thị form nhập thơng tin sản phẩm 60 Hình 18: Ảnh admin nhập thông tin sản phẩm click “Thêm mới” .60 Hình 19: Ảnh kết hiển thị thêm thành cơng sản phẩm 61 Hình 3.20: Giao diện đăng nhập 61 Hình 21: Giao diện đăng ký 62 Hình 22: Giao diện quên mật 62 Hình 23: Giao diện xem sản phẩm 63 Hình 24: Giao diện quản lý giỏ hàng 63 Hình 25: Giao diện đặt hàng .64 Hình 26: Giao diện đánh giá sản phẩm .64 Hình 27: Giao diện hủy đơn hàng .65 Hình 28: Giao diện quản lý đơn hàng .65 Hình 29: Giao diện cập nhật tài khoản 66 Hình 30: Giao diện quản lý đơn hàng .66 Hình 31: Giao diện quản lý danh mục .67 Hình 32: Giao diện quản lý sản phẩm .67 Hình 33: Giao diện quản lý tài khoản .68 DANH MỤC BẢNG BIỂU Bảng 1: Chi tiết bảng Order 39 Bảng 2: Chi tiết bảng OrderProduct 39 Bảng 3: Chi tiết bảng Cart 40 Bảng 4: Chi tiết bảng CartDetails .40 Bảng 5: Chi tiết bảng Category 41 Bảng 6: Chi tiết bảng Payment 41 Bảng 7: Chi tiết bảng Product 41 Bảng 8: Chi tiết bảng ProductDetail 42 Bảng 9: Chi tiết bảng Rating .42 Bảng 10: Chi tiết bảng User 43 Bảng 1: Bảng kịch kiểm thử .51 MỞ ĐẦU Lí chọn đề tài Trong thời đại kỷ nguyên số ngày nay, công nghệ thông tin khơng phương tiện hữu ích mà cịn giữ vai trò ngày quan trọng sống, định trình độ phát triển khu vực, quốc gia, thông qua việc ngày làm tăng suất cách tối đa Việc áp dụng công nghệ tân tiến mặt đời sống điều tất yếu Thời trang lĩnh vực kinh doanh lớn thay đổi, đặc biệt thời đại công nghệ Với việc xây dựng trang web thương mại điện tử kinh doanh thời trang, bạn tiếp cận với nhiều khách hàng tiềm tạo mơ hình kinh doanh hiệu Thay việc phải xây cửa hàng bán hàng đầy tốn cơng nghệ thơng tin giúp tiện lợi tiết kiệm chi phí, cạnh tranh với đối thủ, nâng cao trải nghiệm mua sắm khách hàng, tiềm tăng trưởng lớnTrong công tác bán hàng cần phải phục vụ với nhiều khách hàng lúc cơng việc quan trọng mà q trình nhiều thời gian công sức, việc tiếp cận khách hàng xa vơ khó khăn Từ vấn đề em định chọn đề tài: “Xây dựng ứng dụng web thương mại điện tử kinh doanh thời trang sử dụng ReactJS ASP.NET” Do kiến thức cịn hạn hẹp nên báo cáo khơng tránh khỏi sai sót, mong đóng góp ý kiến thầy cô bạn để báo cáo hồn chỉnh Mục đích đề tài Mục đích đề tài xây dựng trang web thương mại điện tử kinh doanh thời trang sử dụng ReactJS ASP.NET là: Xây dựng trang web thương mại điện tử kinh doanh thời trang chuyên nghiệp, thân thiện với người dùng đáp ứng yêu cầu chức khách hàng Sử dụng công nghệ ReactJS để xây dựng giao diện người dùng cho trang web thương mại điện tử, giúp cải thiện trải nghiệm người dùng tăng tính tương tác Sử dụng cơng nghệ ASP.NET để xây dựng API cho trang web thương mại điện tử, giúp tăng tính bảo mật, hiệu suất khả mở rộng trang web Tích hợp tính tốn an tồn tiện lợi cho khách hàng, giúp đảm bảo tính tiện lợi an tồn cho q trình tốn trực tuyến Kiểm tra triển khai trang web thương mại điện tử môi trường sản xuất, đảm bảo hoạt động ổn định đáp ứng yêu cầu chức khách hàng Nội dung nghiên cứu Nội dung nghiên cứu đề tài xây dựng trang web thương mại điện tử sử dụng ReactJS ASP.NET bao gồm phần sau: Giới thiệu ReactJS ASP.NET: Trong phần này, giới thiệu ReactJS ASP.NET lý chọn sử dụng để xây dựng trang web thương mại điện tử Phân tích yêu cầu chức trang web thương mại điện tử: Bao gồm chức đăng nhập, đăng ký, xem sản phẩm, thêm sản phẩm vào giỏ hàng, toán quản lý đơn hàng Thiết kế sở liệu: Trang web thương mại điện tử sử dụng sở liệu để lưu trữ thông tin sản phẩm, khách hàng đơn hàng Xây dựng giao diện người dùng: Giao diện người dùng phần quan trọng trang web thương mại điện tử, xây dựng giao diện thân thiện với người dùng, dễ sử dụng hấp dẫn Sử dụng ReactJS để xây dựng giao diện người dùng trang web thương mại điện tử Xây dựng API: API phần quan trọng trang web thương mại điện tử, cho phép giao tiếp trình duyệt web sở liệu Trong phần