Nhóm 4 - Xây Dựng Website Bán Hàng Điện Tử.docx

HỌC VIỆN KỸ THUẬT MẬT MÃ
KHOA AN TỒN THƠNG TIN

BÁO CÁO
CÔNG NGHỆ PHẦN MỀM
Đề tài:
XÂY DỰNG WEBSITE
QUẢN LÝ BÁN HÀNG ĐIỆN TỬ

Giảng viên giảng

Th.S. Trần Anh Tú

dạy:
Sinh
hiện:

viên

thực

Nguyễn
AT160459

Văn

Việt

–

Mai Văn Đủ – AT160710

Trương Văn Tâm – AT160

i


Hà Nội, tháng 12 năm 2022
LỜI NÓI ĐẦU
Ngày nay, với sự phát triển mạnh mẽ của công nghệ thông tin và những ứng
dụng của nó trong đời sống. Máy tính điện tử khơng cịn là một thứ phương tiện lạ

lẫm đối với mọi người mà nó dần trở thành một cơng cụ làm việc và giải trí thơng
dụng và hữu ích của chúng ta, không chỉ ở công sở mà cịn ngay cả trong gia đình.
Trong nền kinh tế hiện nay, với xu thế tồn cầu hố nền kinh tế thế giới,
mọi mặt của đời sống xã hội ngày càng được nâng cao, đặc biệt là nhu cầu trao đổi
hàng hoá của con người ngày càng tăng cả về số lượng và chất lượng.Hiện nay các
công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các giải pháp
cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên Internet.
Thơng qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan
trọng và tính tất yếu của thương mại điện tử. Với những thao tác đơn giản trên máy
có nối mạng Internet bạn sẽ có tận tay những gì mình cần mà khơng phải mất nhiều
thời gian. Bạn chỉ cần vào các trang dịch vụ thương mại điện tử, làm theo hướng
dẫn và click vào những gì bạn cần. Các nhà dịch vụ sẽ mang đến tận nhà cho bạn.
Các ứng dụng Web ngày càng trở nên phổ biến. Trước nhu cầu đó, cùng với u
cầu mơn học, nhóm chúng em quyết định chọn đề tài Xây dựng Website bán hàng
trực tuyến, cụ thể là đồ điện tử máy tính ,camera,thiết bị mạng ,phụ kiện...
Chúng em xin chân thành cảm ơn ThS. Trần Anh Tú – giảng viên trực tiếp
hướng dẫn, chỉ bảo, tạo mọi điều kiện thuận lợi giúp đỡ chúng em trong quá trình
thực hiện đề tài.
Tuy đã có rất nhiều cố gắng và sự nỗ lực của các thành viên để hoàn thiện đề
tài, nhưng đề tài “Xây dựng Website quản lý bán hàng điện tử” của chúng em

cịn nhiều thiếu sót. Chúng em rất mong nhận được sự góp ý từ các thầy cơ.

ii


iii


MỤC LỤC

LỜI NĨI ĐẦU............................................................................................................ii
MỤC LỤC..................................................................................................................iii
DANH MỤC HÌNH VẼ..............................................................................................v
DANH MỤC BẢNG BIỂU.......................................................................................vi
Chương 1. KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ HỆ THỐNG QUẢN
LÝ BÁN HÀNG..................................................................................................................7
1.1. Khảo sát bài toán thực tế, phân tích yêu cầu chức năng của hệ thống..............7
1.1.1. Khảo sát bài tốn thực tế............................................................................7
1.1.2. u cầu chức năng phía quản trị..............................................................10
1.1.3. Yêu cầu chức năng phía người dùng..........................................................9
1.2. Phân tích hệ thống...........................................................................................10
1.2.1. Biểu đồ Usecase.......................................................................................10
1.2.2. Biểu đồ tuần tự và kịch bản......................................................................17
1.3. Thiết kế hệ thống.............................................................................................31
1.3.1. Thiết kế cơ sở dữ liệu...............................................................................31
1.3.2. Thiết kế giao diện hệ thống......................................................................41
Chương 2. LỰA CHỌN CÔNG NGHỆ XÂY DỰNG HỆ THỐNG....................47
2.1. Giới thiệu về Javascript, HTML, CSS.............................................................47
2.2. Tổng quan về NodeJS, ReactJS.......................................................................47
2.2.1. Giới thiệu về NodeJS................................................................................47

2.2.2. Frameword ExpressJS..............................................................................48
2.2.3. Thư viện ReactJS......................................................................................48
2.3. Giới thiệu về MongoDB..................................................................................49
iv


2.4. Những công nghệ, mã nguồn sử dụng để đảm bảo an tồn trong hệ
thống...............................................................................................................................50
2.4.1. Bcrypt – Mã hóa dữ liệu nhạy cảm...........................................................50
2.4.2. Xác thực người dùng sử dụng Json Web Token (JWT)...........................50
Chương 3. TRIỂN KHAI HỆ THỐNG TRANG WEB QUẢN LÝ BÁN
HÀNG................................................................................................................................53
3.1. Mô tả hệ thống.................................................................................................53
3.2. Thiết lập môi trường phát triển hệ thống.........................................................53
3.2.1. Cài đặt IDE Visual Studio Code (VSC)...................................................53
3.2.2. Cài đặt NodeJS, ExpressJS, ReactJS........................................................54
3.2.3. Cài cơ sở dữ liệ MongoDB.......................................................................54
KẾT LUẬN...............................................................................................................55
Kết quả thu được..................................................................................................55
3.3. Phương hướng phát triển.................................................................................55
TÀI LIỆU THAM KHẢO........................................................................................56

v


DANH MỤC HÌNH VẼ
Hình 1.1. Giao diện của Viettel Store..............................................................................................7
Hình 1.2. Giao diện của CellphoneS................................................................................................8
Hình 1.3. Giao diện của thế giới di dộng.........................................................................................8
Hình 1.4. Giao diện của FTP Shop..................................................................................................9

Hình 1.5. Usecase Tổng quát..........................................................................................................11
Hình 1.6. Usecase Quản lý sản phẩm.............................................................................................12
Hình 1.7. Usecase Quản lý đơn hàng.............................................................................................13
Hình 1.8. Usecase Thanh tốn........................................................................................................14
Hình 1.9. Usecase Thống kê............................................................................................................15
Hình 1.10. Usecase Quản lý thơng tin............................................................................................16
Hình 1.11. Usecase Tìm kiếm.........................................................................................................17
Hình 1.12. Biểu đồ tuần tự quá trình Đăng ký.............................................................................18
Hình 1.13. Biểu đồ tuần tự quá trình Đăng nhập.........................................................................20
Hình 1.14. Biểu đồ tuần tự quá trình Tìm kiếm...........................................................................22
Hình 1.15. Biểu đồ tuần tự q trình Thanh tốn........................................................................24
Hình 1.16. Biểu đồ tuần tự q trình Quản lý thơng tin sản phẩm............................................26
Hình 1.17. Biểu đồ tuần tự quá trình Thống kê...........................................................................27
Hình 1.18. Biểu đồ tuần tự Quản lý thơng tin khách hàng..........................................................30
Hình 1.19. Giao diện chính.............................................................................................................41
Hình 1.20. Giao diện đăng nhập.....................................................................................................41
Hình 1.21. Giao diện đăng ký.........................................................................................................42
Hình 1.22. Giao diện admin............................................................................................................42
Hình 1.23. Giao diện quản lý sản phẩm........................................................................................43
Hình 1.24. Giao diện trang chi tiết sản phẩm...............................................................................43
Hình 1.25. Giao diện trang thêm sản phẩm..................................................................................44
Hình 1.26. Giao diện trang danh sách sản phẩm..........................................................................44
Hình 1.27. Giao diện trang quản lý đơn hàng..............................................................................45
Hình 1.28. Giao diện trang tìm kiếm.............................................................................................45
Hình 1.29. Giao diện trang chi tiết đơn hàng................................................................................46
Hình 1.30. Giao diện trang giỏ hàng..............................................................................................46

vi

DANH MỤC BẢNG BIỂU
Bảng 1.1. Bảng tổng quát cơ sở dữ liệu.................................................................31
Bảng 1.2. Bảng Accessory.......................................................................................32
Bảng 1.3. Bảng PC...................................................................................................33
Bảng 1.4. Bảng Tablet.............................................................................................34
Bảng 1.5. Bảng Cart................................................................................................35
Bảng 1.6. Bảng Swatch............................................................................................35
Bảng 1.7. Bảng Smartphone...................................................................................36
Bảng 1.8. Bảng Comment.......................................................................................37
Bảng 1.9. Bảng User................................................................................................37
Bảng 1.10. Bảng Quantity.......................................................................................38
Bảng 1.11. Bảng History.........................................................................................38
Bảng 1.12. Bảng Homepage....................................................................................39
Bảng 1.13. Bảng Accessorypage.............................................................................40

vii


Chương 1. KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ HỆ THỐNG QUẢN LÝ
BÁN HÀNG
1.1. Khảo sát bài toán thực tế, phân tích yêu cầu chức năng của hệ thống
1.1.1. Khảo sát bài toán thực tế
Website bán hàng là trang Web cho phép doanh nghiệp và khách hàng có thể tiến
hành việc mua bán sản phẩm/dịch vụ trực tuyến. Cụ thể, khi truy cập vào các Website
này, bạn có thể xem thơng tin sản phẩm, tìm kiếm các sản phẩm cần mua, đặt hàng và
thanh tốn nhanh chóng.
Dựa vào một số website bán đồ điện tử như: CellphoneS, Viettel Store,
Thegioididong, FPTshop… Hiểu được nhu cầu của người dân có thể thấy các Website
này đang hoạt động hiệu quả thay thế cho cửa hàng bán lẻ và nhân viên bán hàng. Không
giới hạn về vị trí địa lý hay thời gian ngày/ đêm. Bạn có thể mua sắm bất cứ thứ gì ở bất

cứ nơi đâu chỉ với vài cú nhấp chuột. Đặc biệt, mua sắm trực tuyến (Online Shopping)
ngày càng trở nên phổ biến. Việc mỗi doanh nghiệp tạo cho mình một Web bán hàng trở
thành điều quan trọng, phổ biến.
Dưới đây là một số thông tin khảo sát về các website bán đồ điện tử:
Trang web Viettel Store () bán laptop, phụ kiên đi kèm với
laptop, …

Hình 1.1. Giao diện của Viettel Store

8


9


Trang web CellphoneS ( chuyên bán đồ điện tử như
điện thoại, laptop, đồng hồ và các phụ kiện cơng nghệ.

Hình 1.2. Giao diện của CellphoneS
Trang web Thế Giới Di Động và FPT Shop ( />( bán các đồ về cơng nghệ.

Hình 1.3. Giao diện của thế giới di dộng

10


Hình 1.4. Giao diện của FTP Shop

1.1.2. Yêu cầu chức năng phía người dùng



Giao diện dễ sử dụng và có tính thẩm mỹ cao.



Cho phép khách hàng đăng ký thành viên và đảm bảo bí mật thơng tin.



Xem và thay đổi các thơng tin về tài khoản.



Hình thức thanh tốn phải đảm bảo chính xác.



Thơng tin sản phẩm phong phú, đa dạng:
 Giới thiệu, bày bán nhiều loại hàng, nhiều mặt hàng để khách hàng có
nhiều cơ hội lựa chọn về một loại mặt hàng. Thông tin về một sản
phẩm phải chi tiết để khách hàng có thể nắm bắt rõ thơng tin về sản
phẩm mình lựa chọn. Đặc biệt là những mặt hàng được nhiều khách
hàng quan tâm.
 Luôn cập nhật, giới thiệu những thế hệ thiết bị điện tử mới nhất.



Thông tin về bảo hành sản phẩm phải rõ ràng.



Cho phép khách hàng tìm kiếm nhanh chóng, chính xác theo nhiều tiêu chí.

11


1.1.3. u cầu chức năng phía quản trị
Ngồi các u cầu giống như của khách hàng, thì hệ thống phải đảm bảo
những yêu cầu sau của nhân viên quản lý web.










Quản lí chung: liên quan tới các thơng tin nhân viên, khách hàng, hàng, ...
Cập nhật thơng tin hàng hóa trực tuyến: Dễ dàng cập nhật và thường xuyên
thay đổi hình ảnh, thơng tin chi tiết giá các mặt hàng bạn sẽ kinh doanh ở bất
cứ đâu.
Quản lí các đơn hàng trực tuyến: Quản lí, lưu trữ và báo cáo thông tin về
đặt hàng và trạng thái của đơn hàng: đã giao hàng chưa, đã thanh tốn
chưa
Quản lí khách hàng: Lưu trữ các hoạt động gắn với các khách hàng của cửa
hàng. Mọi hoạt động gắn với khách hàng và đơn hàng đều có thể thực hiện từ
xa, khơng phụ thuộc vào vị trí địa lý.

Thống kê chi tiết cụ thể, chính xác và nhanh chóng.
 Thống kê được mặt hàng nào bán hết, mặt hàng nào bán chạy, mặt
hàng nào tồn kho, mặt hàng nào cần chỉnh sửa…
 Tổng hợp thu chi hàng ngày, hàng tuần, hàng tháng hàng quý và
hàng năm.
 Tổng hợp lưu trữ được ý kiến phản ánh của khách hàng để có thể
trả lới khách hàng một cách nhanh chóng và chính xác nhất.



Sản phẩm: Có thể thêm, sửa xóa thơng tin, danh mục





Quản lý các module: định vị, chỉnh sửa, bật –tắt các module chức năng
Xem các báo cáo, thống kê, đơn đặt hàng
Nhận và phản hồi các yêu cầu của khách hàng

1.2. Phân tích hệ thống
1.2.1. Biểu đồ Usecase
1.2.1.1. Xác định tác nhân

Theo phân tích sợ bộ, hệ thống bao gồm 03 tác nhân chính là:
 Chủ cửa hàng (admin)
 Khách hàng đã đăng nhập

12

 Khách hàng chưa đăng nhập
1.2.1.2. Usecase Tổng quát

 Quản lý sản phẩm: Chủ cửa hàng có thể thêm, sửa, xóa sản phẩm.
 Quản lý đơn hàng: Chủ cửa hàng có thể xem được các đơn hàng mà các khách
hàng đã đặt.
 Xem các đơn hàng: Khách hàng có thể xem được các đơn hàng mình đã đặt.
 Đăng ký: khách hàng chưa có tài khoản cần đăng ký tài khoản và các thông tin
cá nhân như tên, địa chỉ, số điện thoại để có thể đặt hàng.
 Xem sản phẩm: khách hàng có thể xem thơng tin chi tiết về sản phẩm.
 Đặt hàng: khách hàng đã đăng nhập có thể đặt hàng các sản phẩm có trong giỏ
hàng và lựa chọn phương thức thanh toán phù hợp.
 Quản lý thơng tin: Chủ cửa hàng có thể thêm, sửa, xóa thơng tin của khách hàng
 Thanh tốn: khách hàng điền thơng tin giao hàng và xác nhận thanh tốn đơn
hàng.
 Thống kê cửa hàng: Chủ cửa hàng thống kê doanh thu, lợi nhuận, số đơn hàng
và số sản phẩm bán ra của theo tháng, năm.

13


Hình 1.5. Usecase Tổng quát
1.2.1.3. Usecase quản lý sản phẩm



Quản lý sản phẩm có 3 chức năng nhỏ:
 thêm sản phẩm,
 sửa sản phẩm

 xóa sản phẩm.



Mơ tả use case:
 Thêm sản phẩm: chủ cửa hàng thêm một sản phẩm mới vào hệ thống.
 Sửa sản phẩm: chủ cửa hàng sửa thơng tin một sản phẩm trên hệ thống.
 Xóa sản phẩm: chủ cửa hàng xóa một sản phẩm trên hệ thống

14


Hình 1.6. Usecase Quản lý sản phẩm

15


1.2.1.4. Usecase Quản lý đơn hàng
Mô tả usecase: Người quản trị nắm được thông tin số lượng đơn hàng được giao,
đơn hàng bị hủy bỏ, số hàng đang xử lý
 Đang xử lý: Đơn hàng cần xác nhận của quản trị viên để thông báo cho người
dùng biết rằng đơn hàng của họ đã được chấp thuận và chuyển sang trạng thái
giao hàng


Đang giao hàng: Đơn hàng được chuyển đến người dùng thông qua các dịch vụ
chuyển phát



Đã giao hàng: Người quản trị xác nhận đơn hàng đã chuyển tới người dùng thông
qua dịch vụ chuyển phát



Hủy bỏ: Người dùng hủy mua hàng trong quá trình chờ xử lý hoặc đang giao
hàng

Hình 1.7. Usecase Quản lý đơn hàng

16


1.2.1.5. Usecase Thanh tốn
Mơ tả usecase:
Người dùng sau khi chọn được sản phẩm sẽ đặt hàng thông qua chức năng thanh toán:
 Trước khi thanh toán, người dùng phải đăng nhập để khi lên đơn, người
quản trị có thể biết thông tin người mua là ai? Địa chỉ ở đâu?


Xem sửa đơn hàng: Người dùng xem lại đơn hàng của mình, thêm sản
phẩm hoặc loại bỏ sản phẩm khơng muốn mua trước khi tính tiền



Tính phí vận chuyển: Hệ thống tính phí vận chuyển thơng qua địa chỉ mà
người mua cung cấp



Phương thức thanh toán: Người mua lựa chọn phương thức thanh tốn (sử
dụng ship COD)

Hình 1.8. Usecase Thanh tốn

17


1.2.1.6. Usecase Thống kê
Mô tả usecase:
Người quản trị thống kê lại số lượng sản phẩm nhập/xuất, số lượng sản phẩm cịn
lại để tính tốn lợi nhuận.
 Thống kê doanh thu: Dựa vào giá nhập/giá bán và số lượng sản phẩm,
người quản trị tính tốn lợi nhuận doanh thu theo từng khoảng thời gian
ngày/tuần/tháng


Thống kê sản phẩm đã bán: Người quản trị quản lý được lượng sản phẩm
bán ra theo thời gian



Thống kê sản phẩm còn lại: Người quản trị nắm được số lượng, loại mặt
hàng còn lại trong kho, từ đó đưa ra chiến lược kinh doanh

 Thống kê số lượng đơn hàng: Người quản trị dựa vào số lượng đơn hàng và
thời gian các đơn hàng xác định được thời gian mua sắm của người tiêu
dùng.

Hình 1.9. Usecase Thống kê

18


1.2.1.7. Usecase Quản lý thông tin
Mô tả usecase:
Quản trị viên muốn quản lý thông tin về sản phẩm, quản lý thông tin người dùng:
 Quản lý thông tin người dùng: Quản trị viên có quyền xóa người dùng trên trang
web khi người dùng vi phạm những điều khoản của trang web



Quản lý thông tin sản phẩm: Quản trị viên cập nhật thông tin về sản phẩm
+ Thêm sản phẩm: Thêm mới sản phẩm
+ Xóa sản phẩm: Loại bỏ sản phẩm trên trang web

+ Sửa sản phẩm: Sửa hình ảnh quảng cáo, giá thành sản phẩm, thơng tin sản
phẩm, …

Hình 1.10. Usecase Quản lý thông tin

19


1.2.1.8. Usecase Tìm kiếm
Mơ tả usecase:
Người dùng sau khi vào trang web, muốn tìm kiếm thơng tin về sản phẩm:





Tìm kiếm theo tên sản phẩm: Người dùng nhập tên sản phẩm, trang web trả
về tên sản phẩm phù hợp với tìm kiếm của người dùng
Tìm kiếm theo loại sản phẩm: Người dùng chọn loại sản phẩm muốn tìm
kiếm, trang web trả về danh sách các sản phẩm theo loại người dùng chọn

Hình 1.11. Usecase Tìm kiếm
1.2.2. Biểu đồ tuần tự và kịch bản
1.2.2.1. Biểu đồ tuần tự quá trình Đăng ký
 Mơ tả tóm tắt:


Tên ca sử dụng: Đăng kí



Mục đích: Giúp khách hàng đăng kí tài khoản trên trang web.



Tóm lược: Khách hàng có nhu cầu mua các mặt hàng có trên webside.



Đối tác: Khách hàng.

 Mơ tả các kịch bản:


Tiền điều kiện: Khơng có.



Kịch bản chính:

20