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

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............................................................................................................1
CHƯƠNG 1. TỔNG QUAN VỀ ỨNG DỤNG WEB TRONG THƯƠNG
MẠI ĐIỆN TỬ..................................................................................................5
1.1.Giới thiệu về thương mại điện tử.................................................................5
1.1.1.Khái niệm về thương mại điện tử..............................................................5
1.1.2.Nội dung thương mại điện tử....................................................................5
1.2.Tổng quan ứng dụng web trong thương mại điện tử....................................7
1.2.1.Mơ hình web ứng dụng thương mại điện tử..............................................7
1.2.2.Công nghệ sử dụng phát triển thương mại điện tử....................................8
1.3.Cơng nghệ ASP.NET, ReactJS và MySQL..................................................9
1.4.Mơ hình sử dụng..........................................................................................10
TỔNG KẾT CHƯƠNG 1................................................................................13
CHƯƠNG 2. 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 chính..................................................................................14
2.1.2.Quan hệ giữa các use case........................................................................15
2.2.Mô tả chi tiết các use case...........................................................................17
2.2.1.Đăng ký .................................................................................................17
2.2.2.Đăng nhập.................................................................................................18
2.2.3.Quên mật khẩu..........................................................................................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 khẩu..........................................................................................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ế cơ sở dữ liệu..................................................................................39
2.6.Thiết kế giao diện........................................................................................44
CHƯƠNG 3. THỬ NGHIỆM VÀ ĐÁNH GIÁ HỆ THỐNG......................51
3.1.Các kịch bản thử nghiệm.............................................................................51
3.2.Một số kết quả đạt được..............................................................................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 bản an
tồn

Hyper Text Markup

Ngơn ngữ đánh

Language

dấu siêu văn bả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. 2: Biểu đồ use case ở mức tổng quát..................................................14
Hình 2. 3: Quan hệ của use case quản lý danh mục........................................15
Hình 2. 4: Quan hệ của use case quản lý sản phẩm........................................15
Hình 2. 5: Quan hệ của use case quản lý đơn hàng.........................................16
Hình 2.6: Quan hệ của use case quản lý tài khoản khách hàng.......................16
Hình 2. 7: Quan hệ của 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 khẩu.......................................30
Hình 2.11: Biểu đồ trình tự use case xem sản phẩm.......................................31
Hình 2. 12: Biểu đồ trình tự use case quản lý giỏ hàng..................................31
Hình 2. 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 2. 15: Biểu đồ trình tự use case hủy đơn hàng.......................................33
Hình 2. 16: Biểu đồ trình tự use case cập nhật tài khoản................................33
Hình 2. 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 2. 24: Biểu đồ trình tự use case quản lý tài khoản..................................37
Hình 2. 25: Biểu đồ lớp chính của 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 khẩu...............................................................45

Hình 2.29: Giao diện chi tiết giỏ hàng............................................................45
Hình 2.30: Giao diện thanh 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 3. 1: Ảnh người dùng click vào icon đăng nhập.....................................52
Hình 3. 2: Ảnh hiển thị màn hình đăng nhập..................................................52
Hình 3. 3: Ảnh người dùng nhập thơng tin đăng nhập....................................53
Hình 3. 4: Ảnh kết quả đăng nhập...................................................................53
Hình 3. 5: Ảnh giao diện tìm kiếm sản phẩm..................................................54
Hình 3. 6: Ảnh kết quả tìm kiếm sản phẩm thành cơng..................................54
Hình 3. 7: Ảnh người dùng chọn sản phẩm muốn xem..................................55
Hình 3. 8: Ảnh kết quả hiển thị thơng tin sản phẩm........................................55
Hình 3. 9: Ảnh cập nhật giỏ hàng....................................................................56
Hình 3. 10: Ảnh kết quả cập nhật giỏ hàng thành cơng..................................56
Hình 3. 11: Ảnh người dùng chọn thơng tin tài khoản....................................57
Hình 3. 12: Ảnh chi tiết thơng tin tài khoản....................................................57
Hình 3. 13: Ảnh người dùng click cập nhật tài khoản.....................................58
Hình 3. 14: Ảnh kết quả cập nhật tài khoản thành cơng.................................58
Hình 3. 15: Ảnh admin chọn quản lý sản phẩm..............................................59
Hình 3. 16: Ảnh admin click “Thêm”.............................................................59
Hình 3. 17: Ảnh hệ thống hiển thị form nhập thơng tin sản phẩm..................60
Hình 3. 18: Ảnh admin nhập thông tin sản phẩm và click “Thêm mới”.........60
Hình 3. 19: Ảnh kết quả hiển thị thêm mới thành cơng sản phẩm..................61
Hình 3.20: Giao diện đăng nhập......................................................................61

Hình 3. 21: Giao diện đăng ký........................................................................62


Hình 3. 22: Giao diện quên mật khẩu..............................................................62
Hình 3. 23: Giao diện xem sản phẩm..............................................................63
Hình 3. 24: Giao diện quản lý giỏ hàng..........................................................63
Hình 3. 25: Giao diện đặt hàng.......................................................................64
Hình 3. 26: Giao diện đánh giá sản phẩm.......................................................64
Hình 3. 27: Giao diện hủy đơn hàng...............................................................65
Hình 3. 28: Giao diện quản lý đơn hàng.........................................................65
Hình 3. 29: Giao diện cập nhật tài khoản........................................................66
Hình 3. 30: Giao diện quản lý đơn hàng.........................................................66
Hình 3. 31: Giao diện quản lý danh mục.........................................................67
Hình 3. 32: Giao diện quản lý sản phẩm.........................................................67
Hình 3. 33: Giao diện quản lý tài khoản.........................................................68


DANH MỤC BẢNG BIỂU
Bảng 2. 1: Chi tiết bảng Order........................................................................39
Bảng 2. 2: Chi tiết bảng OrderProduct............................................................39
Bảng 2. 3: Chi tiết bảng Cart...........................................................................40
Bảng 2. 4: Chi tiết bảng CartDetails...............................................................40
Bảng 2. 5: Chi tiết bảng Category...................................................................41
Bảng 2. 6: Chi tiết bảng Payment....................................................................41
Bảng 2. 7: Chi tiết bảng Product.....................................................................41
Bảng 2. 8: Chi tiết bảng ProductDetail...........................................................42
Bảng 2. 9: Chi tiết bảng Rating.......................................................................42
Bảng 2. 10: Chi tiết bảng User........................................................................43
Bảng 3. 1: Bảng kịch bản kiểm thử.................................................................51

MỞ ĐẦU
Lí do chọn đề tài
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à q 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 hồ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 tốn an tồn và tiện lợi cho khách hàng,
giúp đảm bảo tính tiện lợi và an tồn cho q trình thanh tố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 tốn: Tích hợp thanh tố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 tốn một
cách an tồ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ử.
Phương pháp nghiên cứu
Sử dụng phương pháp nghiên cứu kết hợp giữa nghiên cứu lý thuyết và
thực nghiệm để đảm bảo tính khả thi và hiệu quả của đề tài. Nghiên cứu lý
thuyết sẽ giúp hiểu sâu hơn về các công nghệ sử dụng và các yêu cầu của
khách hàng trong việc sử dụng trang web thương mại điện tử. Thực nghiệm sẽ
giúp thực hiện và kiểm tra tính khả thi của các phương pháp và công nghệ
được sử dụng trong đề tài.
Kết quả dự kiến
Hoàn thành trang web thương mại điện tử kinh doanh thời trang với các
chức năng đơn giản: đăng nhập, đăng ký, xem sản phẩm, tìm kiếm sản phẩm,
đặt hàng thanh tốn, cập nhật thơng tin cá nhân, quên mật khẩu, hủy đơn
hàng, cập nhật đơn hàng. Đáp ứng được nhu cầu khảo sát của khách hàng.
Biết cách xây dựng và phát triển một trang web thương mại điện tử, áp
dụng được các kiến thức đã học để giải quyết bài tốn thực tế.
Phân tích và thiết kế được một trang web đơn giản, kiểm thử và đánh giá
trang web.
Cấu trúc đồ án
Chương 1: Tổng quan về ứng dụng web trong thương mại điện tử
Tìm hiểu về thương mại điện tử, các công nghệ sử dụng để phát triển
thương mại điện tử. Giới thiệu về công nghệ ReactJS và ASP.NET và mơ
hình sử dụng trong đề tài.

Chương 2: Phân tích thiết kế hệ thống
Từ những dữ liệu đã thu thập được qua khâu khảo sát, tôi tiến hành vẽ
biểu đồ chức năng của hệ thống ở mức tổng quát, mô tả chi tiết các chức
năng, vẽ biểu đồ trình tự, biểu đồ lớp... Từ biểu đồ lớp tôi thiết kế cơ sở dữ
liệu phù hợp cho trang web.
Chương 3: Cài đặt hệ thống vào một số kết quả
Từ kết quả thu được qua bước phân tích thiết kế hệ thống, tiến hành cài
đặt , kiểm thử một số chức năng. Trang web được sử dụng các cơng nghệ lập
trình Microsoft ASP.NET cho phần server (viết bằng ngôn ngữ C#), hệ cơ sở
quản trị dữ liệu MySQL, công nghệ