Tiểu luận môn Kinh tế văn hóa xã hội Asean  - Trường Đại học Văn Hiến.

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƢỜNG ĐẠI HỌC VĂN HIẾN
KHOA CÔNG NGHỆ - THÔNG TIN
ĐỒ ÁN TỐT NGHIỆP
XÂY DỰNG WEBSITE BÁN HÀNG HIỆU (ADIDAS)
GVHD: ThS. NGUYỄN BẠCH THANH TÙNG
SVTH: NGUYỄN TẤN PHÚC -211A010307
PHẠM HỮU QUANG VINH -211A290019
PHẠM THẾ SƠN -211A010265 LỚP: 242INT55306
TP.HỒ CHÌ MINH – 2025
BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƢỜNG ĐẠI HỌC VĂN HIẾN
KHOA CÔNG NGHỆ - THÔNG TIN
ĐỒ ÁN TỐT NGHIỆP
XÂY DỰNG WEBSITE BÁN HÀNG HIỆU (ADIDAS)
GVHD: ThS. NGUYỄN BẠCH THANH TÙNG
SVTH: NGUYỄN TẤN PHÚC - 211A010307
PHẠM HỮU QUANG VINH - 211A290019
PHẠM THẾ SƠN - 211A010265
Ngành: Công nghệ Thông tin
Chuyên ngành: Khoa học Máy tính
Niên khóa: 2021-2025
TP.HỒ CHÌ MINH – 2025 1 LỜI CẢM ƠN
Thƣa thầy Nguyễn Bạch Thanh Tùng, chúng em rất vinh dự khi đƣợc thầy
giảng dạy và hƣớng dẫn trực tiếp làm đồ án tốt nghiệp. Nhờ sự tận tâm và kiến thức
chuyên sâu của thầy, chúng em đã hoàn thành đồ án tốt nghiệp một cách tốt đẹp.
Những lời khuyên và chỉ dẫn của thầy đã giúp chúng em định hƣớng nghiên cứu và
vƣợt qua nhiều khó khăn trong quá trình thực hiện bài báo. Qua quá trình làm đồ án,
chúng em đã học đƣợc rất nhiều kỹ năng mềm nhƣ làm việc nhóm, quản lý thời
gian, và khả năng tƣ duy logic. Những kiến thức và kinh nghiệm mà thầy truyền đạt
sẽ là hành trang quý báu cho chúng em trên con đƣờng sự nghiệp. Cả nhóm em xin
gửi lời cảm ơn chân thành đến thầy Nguyễn Bạch Thanh Tùng. Chúng em rất vinh
dự khi đƣợc thầy hƣớng dẫn và hỗ trợ. Mặc dù đã nỗ lực hoàn thành đồ án này,
nhƣng do thời gian có hạn và kiến thức còn hạn chế, đồ án không tránh khỏi những
thiếu sót. Nhóm em rất mong nhận đƣợc sự đóng góp ý kiến của quý thầy cô và bạn
bè để nhóm em có thể hoàn thiện hơn. Nhóm em xin chân thành cảm ơn!
Tp.Hồ Chí Minh, Ngày . . . . . Tháng . . . Năm . . . . . Sinh Viên Thực Hiện
(Ký tên và ghi rõ họ tên) 2 LỜI CAM ĐOAN
Nhóm tôi cam đoan đây là công trình nghiên cứu của riêng nhóm, do nhóm tự thực
hiện, không sao chép, vay mƣợn từ các công trình nghiên cứu khoa học khác. Đảm
bảo mọi tài liệu tham khảo đều đƣợc trích dẫn, ghi chú đầy đủ.
Tp.Hồ Chí Minh, Ngày . . . . . Tháng . . . Năm . . . . .
Sinh Viên Thực Hiện
(Ký tên và ghi rõ họ tên) 3
NHẬN XÉT CỦA GIẢNG VIÊN HƢỚNG DẪN
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
...........................................................................................................................................................
.....................................................................................................................................................
Tp.Hồ Chí Minh, Ngày . . . . . Tháng . . . Năm . . . . .
Giảng Viên Hƣớng Dẫn
( ký tên và ghi rõ họ tên ) 4 MỤC LỤC
TRANG PHỤ BÌA. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . .. . .1
LỜI CAM ĐOAN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
MỤC LỤC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
DANH MỤC CÁC BẢNG BIỂU, LƢU ĐỒ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
DANH MỤC HÌNH ẢNH . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
MỞ ĐẦU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
CHƢƠNG 1: KHẢO SÁT HIỆN TRẠNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.1. Phân tích hiện trạng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.2. Yêu cầu hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.3. Mô tả hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.4. Một số quy trình trong website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.5. Các yêu cầu của hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
CHƢƠNG 2 CƠ SỞ LÝ THUYẾT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.1. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.2. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
2.3. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.4. Phân tích và thiết kế hƣớng đối tƣợng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.5. Hệ quản trị cơ sở dữ liệu MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.6. Ngôn ngữ lập trình PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.7. Lavavel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
CHƢƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG . . . . . . . . . . . . . . . . . . . . . 36
3.1.Sơ đồ phân rã chức năng (BFD – Bussiness Function Diagram). . . . . . . . 36
3.2. Các tác nhân và vai trò của các tác nhân trong hệ thống . . . . . . . . . . . . . 37 5
3.3. Sơ đồ tình huống sử dụng (Use Case Diagram) . . . . . . . . . . . . . . . . . . . . . 38
3.4. Sơ đồ hoạt động (Activity Diagram). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
3.5. Sơ đồ tuần tự (Sequence Diagram) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
3.6. Phân tích và thiết kế CSDL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
CHƢƠNG 4: THIẾT KẾ VÀ GIAO DIỆN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
4.1. Giao diện ngƣời dùng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
4.2. Giao diện của quản trị viên . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
KẾT LUẬN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
DANH MỤC TÀI LIỆU THAM KHẢO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 6
DANH MỤC CÁC BẢNG BIỂU, LƢU ĐỒ BẢNG BIỂU
Bảng 2. 1. Bảng so sánh PHP và Lavarel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Bảng 2. 2. Vài trò của các tác nhân trong hệ thống . . . . . . . . . . . . . . . . . . . . . . . 38
Bảng 2. 3. Bảng CSDL của đơn nhập hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Bảng 2. 4. Bảng CSDL của chi tiết đơn nhập hàng . . . . . . . . . . . . . . . . . . . . . . . 73
Bảng 2. 5. Bảng CSDL của danh mục sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . 73
Bảng 2. 6. Bảng CSDL của sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Bảng 2. 7. Bảng CSDL của feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Bảng 2. 8. Bảng CSDL của khách hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Bảng 2. 9. Bảng CSDL của liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Bảng 2. 10. Bảng CSDL của chi tiết đánh giá . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Bảng 2. 11. Bảng CSDL của đơn đặt hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Bảng 2. 12. Bảng CSDL của chi tiết đơn đặt hàng . . . . . . . . . . . . . . . . . . . . . . . . 77
Bảng 2. 13. Bảng CSDL của hóa đơn đặt hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 LƢU ĐỒ
Hình 3. 1. Sơ đồ phân rã chức năng ngƣời dùng . . . . . . . . . . . . . . . . . . . . . . . . . 36
Hình 3. 2. Sơ đồ phân rã chức năng quản trị viên . . . . . . . . . . . . . . . . . . . . . . . . 37
Hình 3. 3. Sơ đồ use case tổng quát của hệ thống. . . . . . . . . . . . . . . . . . . . . . . . . 39
Hình 3. 4. Sơ đồ use case đăng ký . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Hình 3. 5. Sơ đồ use case thông tin sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Hình 3. 6. Sơ đồ use case quản lý giỏ hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Hình 3. 7. Sơ đồ use case quản lý đơn hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Hình 3. 8. Sơ đồ use case quản lý tài khoản . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hình 3. 9. Sơ đồ use case quản lý sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Hình 3. 10. Sơ đồ use case quản lý đơn hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Hình 3. 11. Sơ đồ use case quản lý khách hàng . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Hình 3. 12. Sơ đồ use case quản lý khuyến mãi và mã giảm giá . . . . . . . . . . . . . 55 7
Hình 3. 13. Sơ đồ hoạt động cho chức năng đăng ký . . . . . . . . . . . . . . . . . . . . . . 58
Hình 3. 14. Sơ đồ hoạt động cho chức năng đăng nhập. . . . . . . . . . . . . . . . . . . . 59
Hình 3. 15. Sơ đồ hoạt động cho chức năng thanh toán . . . . . . . . . . . . . . . . . . . 60
Hình 3. 16. Sơ đồ hoạt động cho chức năng quản lý đặt hàng . . . . . . . . . . . . . . 61
Hình 3. 17. Sơ đồ hoạt động cho chức năng thêm sản phẩm vào giỏ hàng . . . . 62
Hình 3. 18. Sơ đồ hoạt động cho chức năng quản lý ngƣời dùng . . . . . . . . . . . . 63
Hình 3. 19. Sơ đồ hoạt động cho chức năng quản lý tài khoản . . . . . . . . . . . . . . 64
Hình 3. 20. Sơ đồ hoạt động cho chức năng thêm sản phẩm . . . . . . . . . . . . . . . 65
Hình 3. 21. Sơ đồ hoạt động cho chức năng quản lý danh sách sản phẩm . . . . 66
Hình 3. 22. Sơ đồ hoạt động cho chức năng quản lý đơn hàng . . . . . . . . . . . . . . 67
Hình 3. 23. Sơ đồ tuần tự đăng nhập . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Hình 3. 24. Sơ đồ tuần tự tìm kiếm sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Hình 3. 25. Sơ đồ tuần tự thêm sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Hình 3. 26. Sơ đồ tuần tự quản lý mua hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Hình 3. 27. Sơ đồ tổng quát của CSDL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Hình 3. 28. Sơ đồ quan hệ thực thể . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 8 DANH MỤC HÌNH ẢNH
Hình 2. 1. Hình ảnh JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Hình 2. 2. Code JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Hình 2. 3. Hình ảnh HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Hình 2. 4. Code HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Hình 2. 5. Hình ảnh CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Hình 2. 6. Code CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Hình 2. 7. Lịch Sử UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Hình 2. 8. Kiến trúc của một Hệ quản trị cơ sở dữ liệu . . . . . . . . . . . . . . . . . . . . 31
Hình 2. 9. Ngôn ngữ lập trình PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Hình 4. 1. Trang chủ................................................................................................80
Hình 4. 2. Liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Hình 4. 3. Giới thiệu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Hình 4. 4. Chính sách . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Hình 4. 5. Sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Hình 4. 6. Thông tin chi tiết sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Hình 4. 7. Thông tin giỏ hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Hình 4. 8. Trạng thái đặt hàng thành công . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Hình 4. 9. Trang chủ quản trị viên. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Hình 4. 10. Danh sách sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Hình 4. 11. Thêm sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Hình 4. 12. Danh sách đơn hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Hình 4. 13. Chi tiết đơn hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 9 MỞ ĐẦU
1. Lý do chọn đề tài
Ngày nay, nhu cầu mua sắm trực tuyến ngày càng gia tăng, đặc biệt là trong
lĩnh vực thời trang thể thao. Adidas, một trong những thƣơng hiệu hàng đầu
thế giới, không chỉ nổi tiếng với chất lƣợng sản phẩm mà còn đƣợc yêu thích
nhờ thiết kế hiện đại và sự đổi mới không ngừng.
Việc xây dựng một trang web bán đồ thể thao và giày Adidas giúp khách
hàng dễ dàng tiếp cận các sản phẩm chính hãng, cập nhật nhanh chóng các
mẫu mã mới nhất và có những trải nghiệm mua sắm tiện lợi. Bên cạnh đó,
trang web cũng giúp doanh nghiệp tối ƣu hóa hoạt động kinh doanh, mở rộng
thị trƣờng và nâng cao khả năng cạnh tranh.
Ngoài ra, với sự phát triển mạnh mẽ của thƣơng mại điện tử, một trang web
bán hàng chuyên nghiệp không chỉ đáp ứng nhu cầu của ngƣời tiêu dùng mà
còn góp phần thúc đẩy thƣơng hiệu Adidas tại thị trƣờng nội địa. Chính vì vậy,
đề tài xây dựng trang web bán đồ thể thao và giày Adidas là một lựa chọn phù
hợp và có tính thực tiễn cao.
2. Mục đích nghiên cứu
Mục đích của nghiên cứu này là xây dựng một trang web thƣơng mại điện tử
chuyên bán đồ thể thao và giày của thƣơng hiệu Adidas nhằm tối ƣu hóa trải
nghiệm mua sắm trực tuyến cho khách hàng. Cụ thể, nghiên cứu tập trung vào các mục tiêu sau:
Phát triển một nền tảng bán hàng trực tuyến chuyên nghiệp: Thiết kế và xây
dựng một trang web thân thiện với ngƣời dùng, giao diện hiện đại, dễ sử dụng,
và phù hợp với xu hƣớng thƣơng mại điện tử hiện nay. 10
Xây dựng hệ thống quản lý sản phẩm hiệu quả: Phát triển một hệ thống quản
trị giúp cập nhật thông tin sản phẩm nhanh chóng, quản lý kho hàng chính xác
và theo dõi đơn hàng dễ dàng.
Đảm bảo tính bảo mật và ổn định của hệ thống: Xây dựng cơ sở dữ liệu an
toàn, bảo vệ thông tin khách hàng, tích hợp các phƣơng thức thanh toán bảo
mật và đảm bảo website hoạt động ổn định, không bị gián đoạn.
3. Đối tƣợng nghiên cứu
Đề tài nghiên cứu tập trung vào việc xây dựng một trang web bán hàng trực
tuyến chuyên cung cấp sản phẩm thể thao và giày thƣơng hiệu Adidas. Đối
tƣợng nghiên cứu bao gồm:
Sản phẩm Adidas: Các dòng sản phẩm giày thể thao, quần áo, phụ kiện thể
thao chính hãng của thƣơng hiệu Adidas, bao gồm giày chạy bộ, giày bóng đá,
áo thể thao, quần thể thao, balo, mũ nón, v.v.
Khách hàng mục tiêu: Những ngƣời yêu thích thể thao và tập luyện thể dục
thƣờng xuyên. Các vận động viên chuyên nghiệp và không chuyên. Những
ngƣời yêu thích thời trang thể thao và phong cách streetwear. Đối tƣợng trẻ
tuổi (học sinh, sinh viên, ngƣời đi làm) có nhu cầu sử dụng sản phẩm Adidas
cho cả mục đích thể thao và thời trang.
Thị trƣờng thƣơng mại điện tử: Xu hƣớng mua sắm trực tuyến các sản phẩm
thể thao và thời trang. Đối thủ cạnh tranh trong lĩnh vực kinh doanh giày và đồ
thể thao online. Các kênh phân phối và nền tảng thƣơng mại điện tử hỗ trợ kinh doanh trực tuyến.
Công nghệ và nền tảng phát triển website: Ngôn ngữ lập trình, nền tảng thiết
kế website phù hợp. Hệ thống quản lý nội dung (CMS), thanh toán trực tuyến
và bảo mật thông tin khách hàng. Giao diện và trải nghiệm ngƣời dùng
(UI/UX) giúp tối ƣu hóa tƣơng tác và tăng trải nghiệm mua sắm. 11
4. Nhiệm vụ nghiên cứu
Đề tài “Xây dựng trang web bán đồ thƣơng hiệu Adidas” tập trung vào việc
nghiên cứu và phát triển một nền tảng thƣơng mại điện tử chuyên nghiệp. Đáp
ứng nhu cầu mua sắm trực tuyến các sản phẩm Adidas một cách tiện lợi và hiệu quả.
5. Phƣơng pháp nghiên cứu
Phƣơng pháp thu thập dữ liệu:
 Nghiên cứu tài liệu: Tìm hiểu các tài liệu về thƣơng mại điện tử,
thiết kế website, UX/UI, hành vi mua sắm trực tuyến.
 Khảo sát ngƣời dùng: Tiến hành khảo sát trực tuyến hoặc phỏng
vấn trực tiếp để thu thập ý kiến khách hàng về nhu cầu và trải nghiệm mua sắm
Phƣơng pháp phân tích và thiết kế:
 Xác định các chức năng chính của website nhƣ tìm kiếm sản
phẩm, đặt hàng, thanh toán, quản lý đơn hàng, đăng ký tài khoản.
 Thiết kế giao diện ngƣời dùng (UI/UX): Sử dụng các công cụ thiết
kế để tạo giao diện tối ƣu cho trải nghiệm khách hàng.
 Xây dựng kiến trúc website: Xác định mô hình cơ sở dữ liệu, phân
tầng hệ thống để đảm bảo tính bảo mật và hiệu suất hoạt động.
6. Kết cấu đồ án
Nội dung đề tài gồm các chƣơng:
Chƣơng 1: Khảo sát hiện trạng.
Chƣơng 2: Cơ sở lý thuyết.
Chƣơng 3: Phân tích và thiết kế hệ thống.
Chƣơng 4: Thiết kế và triển khai giao diện website. 12
CHƢƠNG 1: KHẢO SÁT HIỆN TRẠNG
CHƢƠNG 1: KHẢO SÁT HIỆN TRẠNG
1.1. Phân tích hiện trạng
Hiện tại, trang web bán đồ thể thao và giày thƣơng hiệu Adidas đăng phân
phối các sản phẩm chính hang với các thiết kế hiện đại, trải nghiệm mua sắm
trức tuyến tối ƣu. Website đƣợc xây dựng với giao diện trực quan, phân loại
sản phẩm theo danh mục nhƣ giày thể thao, quần áo, giúp khách hàng dễ dàng tìm kiếm và lựa chọn.
Tuy nhiên, so với các đối thủ cạnh tranh lớn trên thị trƣờng nhƣ Nike, Puma
hay sàn thƣơng mại điện tử lớn (Shopee, Lazada, …), trang web vẫn cần cải
thiện nhiều yếu tố, đặc biệt là trải nghiệm cá nhân hóa cho khách hàng.
Khách hàng chủ yếu là những ngƣời trẻ năng động yêu thích thời trang hoặc
vận động viên tìm kiếm sự biền bỉ và phong cách từ sản phẩm của Adidas.
Mặc dù trang web cung cấp đầy đủ danh mục sản phẩm, nhƣng một số khách
hàng vẫn mong muốn có các chƣơng trình khuyến mãi, hiện thị đánh giá sản
phẩm từ ngƣời mua trƣớc hoặc mô tả chi tiết hơn về chất liệu và độ bền của sản phẩm.
Về mặt vận hành, hệ thống quản lý trang web luôn cố gắng cập nhật thông
tin hàng hóa nhanh chóng và an toàn của hãng sản phẩm chính. Tuy nhiên.
Trong nhƣng thời điểm cao điểm nhƣ khuyễn mãi hay dịp liễ, website vẫn gặp
khó khăn trong việc kiểm soát đơn hàng.
Tóm lại, trang web bán hàng đã mang đến nhiều sản phẩm chính hãng của
Adidas đáp ứng nhu cầu cơ bản của khách hàng. Tuy nhiên, để cạnh tranh tốt
hơn trên thị trƣờng, chúng tôi cần cải thiện hơn nữa về cá nhân hóa trải
nghiệm mua sắm, tối ƣu quy trình quản lý hàng hóa và triển khai nhiều
chƣơng trình ƣu đãi hấp dẫn hơn. 13
CHƢƠNG 1: KHẢO SÁT HIỆN TRẠNG
1.2. Yêu cầu hệ thống
Hệ thống cần đáp ứng các yêu cầu sau :
 Cung cấp giao diện hoàn thiện, dễ sử dụng trên cả máy tính và điện thoại.
 Hỗ trợ chức năng tìm kiếm, lọc sản phẩm theo danh mục, giá cả, hiệu quả.
 Đảm bảo bảo mật thông tin ngƣời dùng, đặc biệt là thông tin thanh toán.
 Ngƣời quản lý trang web có thể thêm mới, xóa hoặc sửa sản
phẩm, quản lý khách hàng, quản lý doanh thu.
1.3. Mô tả hệ thống
Hệ thống trang web bán hàng giúp đăng tải các sản phẩm Adidas và ngƣời
dùng tiếp cận sản phẩm một nhanh chóng, tiện lợi với thao tác đơn giản. Vì
đây là một hệ thống website bán hàng, chỉ nhấn mạnh vào việc cung cấp,
quảng bá và quản lý sản phẩm để ngƣời tiêu dùng dễ dàng tìm kiếm và lựa
chọn sản phẩm phù hợp. Quy trình tìm kiếm và xem sản phẩm thông tin đƣợc thực hiện nhƣ sau:
Trang web quản trị viên có thể tạo vào cập nhật thông tin. Với chức năng
này, quản trị viên có thể thêm mới, chỉnh sửa hoặc xóa sản phẩm để đảm bảo
dữ liệu hiện thị trên trang web luôn đa dạng và phong phú, đáp ứng nhu cầu mua sắm của khách hàng.
Sản phẩm trên website đƣợc cập nhật liên tục qua hệ thống quản trị. Quản trị
viên có thể thêm sản phẩm mới vào mục quản lý, kèm theo hình ảnh, mô tả chi
tiết và giá cả. khi sản phẩm đƣợc thêm vào, hệ thống sẽ lƣ trữ vào cơ sở dữ
liệu và hiện thị trên trăng web cho khách hàng xem và lựa chọn.
Nếu ngƣời dùng chọn mua sản phẩm, đơn hàng dữ liệu sẽ đƣợc gửi về hệ
thống đề quản trị viên kiểm tra và quản lý. Khi đơn hàng đã hoàn tất thanh 14
CHƢƠNG 1: KHẢO SÁT HIỆN TRẠNG
toán, quản trị viên sẽ xác nhận đơn hàng và tiến hành quy trình vận chuyển để
giao sản phẩm đến khách hàng.
Trang web cũng cung cấp đầy đủ thông tin về các sản phẩm Adidas với giao
diện trực quan, đơn gian và dễ sử dụng, giúp khách hàng có trải nghiệm mua
sắm thuận tiện nhất có thể.
1.4. Một số quy trình trong website
1.4.1. Quy trình đăng nhập, đăng ký của ngƣời dùng
 Ngƣời dung truy cập website, chọn Đăng nhập nếu đã có tài khoản
hoặc Đăng ký nếu chƣa có tài khoản.
 Sau khi bấm vào Đăng ký, ngƣời dùng nhập thông tin (tên, tài khoản,
mật khẩu) để đăng ký.
 Sau khi điền đủ thông tin bấm đăng ký là đã đăng ký thành công tài khoản.
 Sau khi đăng ký, ngƣời dùng có thể đăng nhập bằng tài khoản và mật khẩu mới đăng ký.
1.4.2. Quy trình chọn và mua hàng
 Ngƣời dùng tìm kiếm hoặc chọn sản phẩm từ danh mục.
 Xem thông tin chi tiết, thêm vào giỏ hàng.
 Tiến hành thanh toán, nhập thông tin nhận hàng và chọn phƣơng thức thanh toán.
 Hệ thống sẽ gửi đơn hàng về quản lý.
1.4.3. Quy trình quản lý của quản trị viên
 Ngƣời quản trị phải đăng nhập vào trang quản trị.
 Quản lý danh sách sản phẩm (sửa, xóa, cập nhật).
 Xem và xử lý đơn hàng, cập nhật trạng thái đơn hàng.
 Quản lý ngƣời dùng, hỗ trợ khách hàng khi cần. 15
CHƢƠNG 1: KHẢO SÁT HIỆN TRẠNG
1.5. Các yêu cầu của hệ thống
1.5.1. Yêu cầu ngƣời dùng
 Trang web dễ dùng đơn giản.
 Trang web có bảo mật thông tin ngƣời dùng.
 Tuân thủ quy định của trang web về thanh toán và hoàn thành hàng hóa.
 Cập nhật giá sát với thị trƣờng.
1.5.2. Yêu cầu hệ thống
1.5.2.1. Yêu cầu chức năng Khách hàng:
 Xem sản phẩm cần mua.
 Tìm kiếm thông tin sản phẩm cần mua.
 Thêm sản phẩm vào giỏ hàng, thanh toán đơn hàng. Ngƣời quản trị:
 Quản lý cơ sở dữ liệu sản phẩm, đơn hàng, khách hàng.
 Đảm bảo an toàn thông tin ngƣời dùng.
 Quản lý sản phẩm, doanh thu, ngƣời dùng.
1.5.2.2. Yêu cầu phi chức năng
 Giao diện than thiện : Thiết kế tối giản, dễ sử dụng, hiện thị tốt
trên thiết di động và máy tính.
 Hiệu suất cao : Hệ thống có khả năng xử lý nhanh, tải trang mƣợt mà.
 Tìm kiếm nhanh chóng : Hỗ trợ tìm kiếm từ khóa, danh mục, tín
hiệu với tốc độ phản hồi nhanh. 16
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
CHƢƠNG 2 CƠ SỞ LÝ THUYẾT 2.1. JavaScript
2.1.1. JavaScript là gì?
JavaScript là ngôn ngữ lập trình đƣợc nhà phát triển sử dụng để tạo
trang web tƣơng tác. Từ làm mới bảng tin trên trang mạng xã hội đến
hiển thị hình ảnh động và bản đồ tƣơng tác, các chức năng của JavaScript
có thể cải thiện trải nghiệm ngƣời dùng của trang web. Là ngôn ngữ kịch
bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của
World Wide Web. Ví dụ: khi duyệt internet, bất cứ khi nào thấy quảng
cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị hoặc
màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy
các hiệu ứng của JavaScript.
Hình 2. 1. Hình ảnh JavaScript
2.1.2. Ƣu điểm của JavaScript:
Tính linh hoạt và đa nền tảng:
 Khả năng chạy trên nhiều trình duyệt và hệ điều hành.
 Sử dụng trong cả frontend và backend (Node.js).
 Ứng dụng trong phát triển ứng dụng di động (React Native). 17
CHƢƠNG 2: CƠ SỞ LÝ THUYẾT Tính tƣơng tác cao:
 Tạo ra các trang web động và tƣơng tác.
 Cải thiện trải nghiệm ngƣời dùng.
 Khả năng thao tác với DOM (Document Object Model).
Cộng đồng lớn và nguồn tài nguyên phong phú:
 Cộng đồng phát triển mạnh mẽ.
 Nhiều thƣ viện và framework hỗ trợ (React, Angular, Vue.js).
 Tài liệu học tập và hƣớng dẫn đa dạng. Hiệu suất:
 Javascript đƣợc chạy trực tiếp trên trình duyệt, việc này giúp giảm tải cho máy chủ.
 Tăng tốc độ tải trang và phản hồi của ứng dụng.
Dễ học và dễ sử dụng:
 Cú pháp tƣơng đối đơn giản.
 Phù hợp cho ngƣời mới bắt đầu. 18
CHƢƠNG 2: CƠ SỞ LÝ THUYẾT Hình 2. 2. Code JavaScript
2.1.3. Nhƣợc điểm của JavaScript: Vấn đề bảo mật:
 Khả năng bị tấn công XSS (Cross-Site Scripting).
 Mã JavaScript có thể bị lộ và khai thác.
Khả năng tƣơng thích giữa các trình duyệt:
 Sự khác biệt trong cách các trình duyệt xử lý JavaScript.
 Cần kiểm tra kỹ lƣỡng trên nhiều trình duyệt. Gỡ lỗi:
 Việc gỡ lỗi có thể phức tạp, đặc biệt với các ứng dụng lớn.
 Khó khăn trong việc xác định nguyên nhân lỗi. Hiệu suất: 19