Báo Cáo Đồ Án Xây Dựng Website Bán Quần Áo

Báo cáo đồ án xây dựng website bán quần áo cung cấp hướng dẫn chi tiết và giải pháp tối ưu cho việc phát triển kinh doanh trực tuyến.

• Tác giả: Đặng Quốc Duy
• Người hướng dẫn: ThS. Võ Tấn Khoa
• Trường học: Đại học Quốc gia Thành phố Hồ Chí Minh
• Chuyên ngành: Internet và Công nghệ Web
• Đề tài: Báo cáo đồ án xây dựng website bán quần áo
• Loại tài liệu: đồ án
• Năm xuất bản: 2023
• Địa điểm: Thành phố Hồ Chí Minh

Mục lục chi tiết

• 1. CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI
• 1.1. Lý do chọn đề tài
• 1.2. Tính cấp thiết của đồ án
• 1.3. Website tham khảo
• 1.4. Mục tiêu của đồ án
• 1.5. Các công cụ hỗ trợ sử dụng trong đồ án
• 1.6. Các công nghệ và thư viện sử dụng trong đồ án
• 1.6.1. Front-end
• 1.6.2. Các công nghệ Back-end
• 1.7. Quy trình làm việc
• 2. CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG
• 2.1. Mô tả website
• 2.2. Yêu cầu website
• 2.3. Tổng quan hệ thống
• 2.3.1. Phân loại tác nhân
• 2.3.2. Mối quan hệ giữa các tác nhân
• 2.3.3. Phân loại chức năng
• 2.3.3.1. Yêu cầu chức năng
• 2.3.3.2. Yêu cầu phi chức năng
• 2.3.4. Đặc tả yêu cầu chức năng
• 2.3.4.1. Sơ đồ use-case tổng
• 2.3.4.2. Đặc tả những use case được tổng quát hoá
• 2.3.4.3. Cập nhật mật khẩu
• 2.3.4.4. Xem sản phẩm
• 2.3.4.5. Đặc tả use case quản trị viên
• 2.3.4.5.1. Quản lý người dùng
• 2.3.4.5.2. Quản lý sản phẩm
• 2.3.4.5.3. Thêm sản phẩm
• 2.3.4.5.4. Xoá sản phẩm
• 2.3.4.5.5. Sửa thông tin sản phẩm
• 2.3.4.6. Đặc tả use case khách hàng
• 2.3.4.6.1. Mua sản phẩm
• 2.3.4.6.2. Xoá sản phẩm khỏi giỏ hàng
• 2.3.4.6.3. Xem trạng thái đơn hàng
• 2.3.4.6.4. Xem thông tin cá nhân
• 2.3.4.6.5. Sửa thông tin cá nhân
• 2.3.4.6.6. Xem lịch sử đặt hàng
• 3. CHƯƠNG 3: THIẾT KẾ HỆ THỐNG
• 3.1. Thiết kế cơ sở dữ liệu
• 3.2. Thiết kế hệ thống
• 3.2.1. Kiến trúc hệ thống
• 3.2.2. Kiến trúc phần mềm
• 4. CHƯƠNG 4: THIẾT KẾ GIAO DIỆN
• 4.1. Sơ đồ Sitemap của Website
• 4.2. Giao diện chung
• 4.3. Quản trị viên
• 4.4. Khách hàng
• 5. CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ
• 6. CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
• 6.1. Hướng phát triển
• Tài liệu tham khảo
• LỜI CẢM ƠN

Tóm tắt

I. Tổng quan về đồ án xây dựng website bán quần áo

Đồ án xây dựng website bán quần áo là một dự án quan trọng trong bối cảnh thương mại điện tử đang phát triển mạnh mẽ. Mục tiêu chính của đồ án là tạo ra một nền tảng trực tuyến cho phép người dùng dễ dàng tìm kiếm và mua sắm các sản phẩm thời trang. Việc phát triển website không chỉ giúp nâng cao trải nghiệm người dùng mà còn tối ưu hóa quy trình kinh doanh cho các nhà bán lẻ.

1.1. Lý do chọn đề tài xây dựng website bán quần áo

Sự phát triển của công nghệ số đã tạo ra cơ hội lớn cho việc kinh doanh online. Đồ án này được chọn nhằm đáp ứng nhu cầu ngày càng cao của thị trường và giúp nhóm tích lũy kinh nghiệm trong lĩnh vực phát triển web.

1.2. Tính cấp thiết của đồ án trong ngành thời trang

Website bán quần áo không chỉ là kênh bán hàng mà còn là nơi truyền tải thông điệp thương hiệu. Nó giúp doanh nghiệp tiếp cận khách hàng hiệu quả hơn và tạo ra trải nghiệm mua sắm tích cực.

II. Vấn đề và thách thức trong xây dựng website bán quần áo

Xây dựng một website bán quần áo đối mặt với nhiều thách thức như thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) tốt. Ngoài ra, việc tối ưu hóa SEO cho website cũng là một yếu tố quan trọng để thu hút khách hàng. Các vấn đề này cần được giải quyết để đảm bảo website hoạt động hiệu quả.

2.1. Thách thức trong thiết kế giao diện người dùng UI

Giao diện cần phải thân thiện và dễ sử dụng. Việc lựa chọn màu sắc, bố cục và hình ảnh sản phẩm là rất quan trọng để thu hút người dùng.

2.2. Thách thức trong tối ưu hóa SEO cho website

Tối ưu hóa SEO giúp website dễ dàng được tìm thấy trên các công cụ tìm kiếm. Cần phải sử dụng từ khóa phù hợp và xây dựng nội dung chất lượng để nâng cao thứ hạng tìm kiếm.

III. Phương pháp xây dựng website bán quần áo hiệu quả

Để xây dựng website bán quần áo hiệu quả, cần áp dụng các phương pháp và công nghệ hiện đại. Việc sử dụng các công cụ phát triển web như HTML, CSS, và JavaScript là rất cần thiết. Ngoài ra, việc áp dụng mô hình phát triển phần mềm cũng giúp quản lý dự án tốt hơn.

3.1. Quy trình xây dựng website theo mô hình thác nước

Mô hình thác nước giúp xác định rõ ràng các bước trong quá trình phát triển, từ thu thập yêu cầu đến triển khai và bảo trì website.

3.2. Công nghệ và thư viện sử dụng trong đồ án

Sử dụng Node.js cho backend và MySQL cho cơ sở dữ liệu giúp xây dựng một hệ thống mạnh mẽ và linh hoạt.

IV. Ứng dụng thực tiễn và kết quả nghiên cứu từ đồ án

Đồ án không chỉ dừng lại ở việc xây dựng website mà còn cung cấp những kết quả nghiên cứu quý giá về thị trường thời trang online. Các tính năng như giỏ hàng, theo dõi đơn hàng và quản lý tài khoản người dùng đã được tích hợp để nâng cao trải nghiệm người dùng.

4.1. Tính năng giỏ hàng và thanh toán

Giỏ hàng cho phép người dùng dễ dàng thêm sản phẩm và thanh toán nhanh chóng, giúp tăng tỷ lệ chuyển đổi.

4.2. Kết quả nghiên cứu về hành vi người tiêu dùng

Nghiên cứu cho thấy người tiêu dùng ngày càng ưa chuộng mua sắm online, đặc biệt là trong ngành thời trang.

V. Kết luận và hướng phát triển tương lai cho website bán quần áo

Kết luận, đồ án xây dựng website bán quần áo đã đạt được nhiều mục tiêu đề ra. Tuy nhiên, cần tiếp tục cải tiến và phát triển thêm các tính năng mới để đáp ứng nhu cầu ngày càng cao của người tiêu dùng. Hướng phát triển trong tương lai có thể bao gồm tích hợp AI và machine learning để cá nhân hóa trải nghiệm người dùng.

5.1. Hướng phát triển tính năng mới cho website

Cần nghiên cứu và phát triển thêm các tính năng như gợi ý sản phẩm dựa trên hành vi người dùng.

5.2. Tương lai của thương mại điện tử trong ngành thời trang

Thương mại điện tử sẽ tiếp tục phát triển mạnh mẽ, và việc xây dựng website bán quần áo sẽ là một phần quan trọng trong chiến lược kinh doanh của các doanh nghiệp.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Bối cảnh thực tiễn và lý do chọn đề tài

Sự phát triển của công nghệ số và mạng Internet đã đưa thuật ngữ "bán hàng online" trở nên phổ biến trong đời sống kinh tế - xã hội. Đối với ngành kinh doanh thời trang, việc xây dựng một trang web bán hàng không chỉ dừng lại ở việc tạo ra một kênh phân phối trực tuyến mở rộng tệp khách hàng mà còn đóng vai trò là phương tiện truyền tải thông điệp thương hiệu, thể hiện phong cách và quản lý hoạt động kinh doanh linh hoạt.

Đề tài "Xây dựng website bán quần áo" (hệ thống có tên thương mại là G5 Shop) được nhóm sinh viên ngành Công nghệ Thông tin, Trường Đại học Công nghệ Thông tin – Đại học Quốc gia Thành phố Hồ Chí Minh thực hiện trong khuôn khổ học phần IE104.O12 (Internet và Công nghệ Web). Mục đích thực tiễn của đề tài là áp dụng các kiến thức chuyên môn về lập trình giao diện (Frontend), xử lý máy chủ và dịch vụ (Backend), cùng thiết kế hệ quản trị cơ sở dữ liệu vào việc giải quyết bài toán thương mại điện tử thực tế.

Mục tiêu và nhiệm vụ nghiên cứu

Văn bản xác định các mục tiêu và nhiệm vụ kỹ thuật cụ thể bao gồm:

1. Xây dựng và vận hành hoàn chỉnh một hệ thống website thương mại điện tử bán quần áo thời trang, hỗ trợ giao diện đa thiết bị (máy tính cá nhân và điện thoại di động).
2. Xây dựng phân hệ người dùng (phía khách hàng): Cho phép xem danh mục sản phẩm theo phân loại (áo, quần cho nam, nữ, trẻ em), xem chi tiết sản phẩm (chất liệu, màu sắc, kích thước, hình ảnh, giá cả), tìm kiếm sản phẩm, quản lý giỏ hàng, đặt hàng, theo dõi trạng thái đơn hàng và xem lịch sử mua sắm.
3. Xây dựng phân hệ quản trị (phía quản trị viên): Cung cấp bảng điều khiển để quản lý danh sách người dùng, quản lý danh mục và thông tin sản phẩm (thêm, sửa, xóa), cùng với việc tiếp nhận, theo dõi và xử lý đơn hàng.
4. Ứng dụng các công nghệ web nền tảng: HTML, CSS, JavaScript cho phía Frontend; Node.js và MySQL cho phía Backend.

Đối tượng và phạm vi nghiên cứu

• Đối tượng nghiên cứu: Quy trình nghiệp vụ mua bán hàng may mặc trực tuyến, mô hình quản lý thông tin khách hàng, sản phẩm, giỏ hàng, đơn hàng và phương pháp xây dựng ứng dụng web tương tác.
• Phạm vi không gian và hệ thống: Hệ thống website thương mại điện tử phân phối thời trang G5 Shop, phục vụ hai nhóm đối tượng chính gồm khách hàng mua sắm trực tuyến và quản trị viên quản lý vận hành cửa hàng.
• Phạm vi thời gian: Đồ án được triển khai, hoàn thành và báo cáo vào tháng 11 năm 2023.

---

Cơ sở lý thuyết và phương pháp

Khung lý thuyết và mô hình ứng dụng

Hệ thống được xây dựng dựa trên các cơ sở lý thuyết và mô hình kỹ thuật phần mềm chuẩn:

• Mô hình quy trình phát triển phần mềm Thác nước (Waterfall Model): Được lựa chọn để quản lý tiến trình triển khai theo 6 giai đoạn tuyến tính: Thu thập và phân tích yêu cầu $\rightarrow$ Thiết kế hệ thống và cơ sở dữ liệu $\rightarrow$ Thực hiện lập trình $\rightarrow$ Kiểm thử chức năng $\rightarrow$ Triển khai $\rightarrow$ Bảo trì.
• Mô hình kiến trúc phần mềm MVC (Model - View - Controller): Tách biệt rõ ràng tầng dữ liệu (Model), tầng hiển thị giao diện (View) và tầng điều khiển logic nghiệp vụ (Controller), hỗ trợ việc phân chia mã nguồn và bảo trì hệ thống.
• Mô hình kiến trúc Client - Server: Sử dụng trình duyệt web làm máy khách để gửi các yêu cầu HTTP/HTTPS tới máy chủ chạy nền tảng Node.js và truy xuất dữ liệu từ hệ quản trị cơ sở dữ liệu quan hệ MySQL.

Phương pháp nghiên cứu và phân tích thiết kế

• Phương pháp phân tích đối chuẩn (Benchmarking): Khảo sát thực tế cấu trúc giao diện, điều hướng, luồng đặt hàng và trải nghiệm người dùng từ hai nền tảng thương mại điện tử thời trang là website Yody (yody.vn) và Uniqlo (uniqlo.com).
• Phương pháp phân tích hướng tác nhân và ca sử dụng (Use Case Analysis): Xác định tác nhân, quan hệ kế thừa và đặc tả luồng sự kiện chính, luồng sự kiện phụ cho toàn bộ các chức năng.
• Phương pháp mô hình hóa hành vi và dữ liệu: Xây dựng sơ đồ Use Case tổng thể, sơ đồ tuần tự (Sequence Diagram) chi tiết cho từng nghiệp vụ, sơ đồ lớp đối tượng và sơ đồ thực thể mối quan hệ (ERD).

---

Thiết kế và triển khai hệ thống

Công nghệ và công cụ thực hiện

Hệ thống sử dụng tổ hợp các công nghệ và công cụ hỗ trợ được liệt kê chi tiết trong văn bản báo cáo:

Phân loại	Tên công nghệ / Công cụ	Vai trò và mục đích sử dụng trong đồ án
Frontend	HTML	Định dạng cấu trúc trang web và các khối văn bản, biểu mẫu
	CSS	Định kiểu giao diện, màu sắc, font chữ, bố cục và hiệu ứng tương tác
	JavaScript	Xử lý logic tương tác động phía máy khách, phản hồi sự kiện người dùng
Backend	Node.js	Môi trường máy chủ xử lý logic nghiệp vụ và định tuyến
Cơ sở dữ liệu	MySQL	Hệ quản trị cơ sở dữ liệu quan hệ lưu trữ thông tin hệ thống
Môi trường cục bộ	XAMPP	Cung cấp môi trường phân phối máy chủ Apache và máy chủ MySQL cục bộ
Thiết kế UI/UX	Figma	Phác thảo khung nhìn và giao diện người dùng
Quản lý mã nguồn	Git & GitHub	Quản lý phiên bản, phân nhánh mã nguồn và đồng bộ mã lệnh nhóm
Quản lý dự án	Notion	Phân chia công việc, lập kế hoạch và giám sát tiến độ hoàn thành
Giao tiếp & Lưu trữ	Google Meet, Drive	Tổ chức họp định kỳ trao đổi khó khăn và lưu trữ tài liệu báo cáo
Trình soạn thảo	Visual Studio Code	Môi trường phát triển tích hợp (IDE) dùng để viết mã nguồn

Phân loại tác nhân và phân quyền hệ thống

Hệ thống định nghĩa 3 tác nhân tham gia vào quy trình hoạt động:

1. Khách (A1): Người dùng chưa đăng nhập, chưa có tài khoản lưu trong cơ sở dữ liệu; thực hiện các quyền xem sản phẩm, tìm kiếm và đăng ký tài khoản.
2. Khách hàng (A2): Người dùng đã đăng nhập (được gán Role = 2), kế thừa từ lớp Khách, bổ sung các quyền giỏ hàng, mua hàng, theo dõi đơn hàng, quản lý hồ sơ và lịch sử mua sắm.
3. Quản trị viên / Admin (A3): Người quản lý hệ thống và cửa hàng (được gán Role = 1), sở hữu các quyền quản lý người dùng, quản lý sản phẩm (thêm/sửa/xóa) và quản lý đơn hàng.

Cấu trúc cơ sở dữ liệu

Cơ sở dữ liệu quan hệ của hệ thống được thiết kế gồm 9 bảng dữ liệu liên kết chặt chẽ:

STT	Tên bảng dữ liệu	Chức năng lưu trữ dữ liệu trong hệ thống
1	Roles	Danh mục vai trò người dùng trong hệ thống (Quản trị viên, Khách hàng)
2	Users	Thông tin tài khoản người dùng, email, mật khẩu, thông tin cá nhân
3	Categories	Danh mục phân loại sản phẩm (áo nam, quần nam, áo nữ, quần nữ, trẻ em...)
4	Products	Thông tin chi tiết sản phẩm: tên, mô tả, giá cả, danh mục liên kết
5	ProductSizes	Kích thước (size) tương ứng của từng mặt hàng sản phẩm
6	Galleries	Thư viện hình ảnh chi tiết minh họa cho sản phẩm
7	Orders	Thông tin đơn hàng: người đặt, ngày tạo, trạng thái giao nhận
8	Order_Details	Chi tiết từng sản phẩm trong đơn hàng: số lượng, đơn giá
9	Carts	Dữ liệu giỏ hàng lưu trữ tạm thời của từng người dùng

Đặc tả yêu cầu phi chức năng

Báo cáo xác định 6 yêu cầu phi chức năng cần đáp ứng:

• Giao diện người dùng: Thân thiện, trực quan, dễ thao tác trên nhiều thiết bị.
• Hiệu suất: Đáp ứng khả năng truy cập đồng thời của nhiều người dùng trong cùng một khoảng thời gian.
• Bảo mật: Bảo đảm tính toàn vẹn và tính riêng tư của thông tin người dùng; ngăn chặn các truy cập trái phép.
• Khả năng truy cập: Hỗ trợ phân giải tên miền tự động và định tuyến chính xác qua đường dẫn liên kết.
• Hỗ trợ khách hàng: Hỗ trợ phản hồi các yêu cầu, thắc mắc trong quá trình tương tác.
• Thời gian thực: Dữ liệu cập nhật nhanh chóng nhằm đồng bộ hóa trạng thái hiển thị trên giao diện người dùng.

---

Nội dung chính theo từng chương

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI

Chương 1 thiết lập các luận điểm nền tảng cho đồ án. Tác giả trình bày lý do chọn đề tài dựa trên xu hướng kinh doanh trực tuyến và nhu cầu rèn luyện kỹ năng xây dựng ứng dụng web tổng thể. Tính cấp thiết được chứng minh qua vai trò của website bán hàng đối với doanh nghiệp thời trang: mở rộng kênh bán hàng, quảng bá giá trị thương hiệu và tối ưu hóa trải nghiệm tìm kiếm, lựa chọn sản phẩm của khách hàng. Chương này phân tích chi tiết hai website tham khảo (Yody và Uniqlo) về bố cục, tính thẩm mỹ, hệ thống điều hướng, giỏ hàng, quy trình thanh toán và tương tác sau bán hàng. Tiếp đó, chương liệt kê mục tiêu hệ thống, giới thiệu danh mục công cụ hỗ trợ (Notion, Google Meet, Google Drive, Git/GitHub, Figma, VS Code, XAMPP), các công nghệ nền tảng (HTML, CSS, JavaScript, Node.js, MySQL) và mô hình quy trình phát triển dạng Thác nước (Waterfall).

CHƯƠNG 2: PHÂN TÍCH HỆ THỐNG

Chương 2 tập trung vào việc mô hình hóa yêu cầu và nghiệp vụ của website G5 Shop. Nội dung bao gồm mô tả tổng quan các chức năng hệ thống, bảng phân loại 3 tác nhân (Khách, Khách hàng, Quản trị viên), sơ đồ quan hệ đối tượng và bảng ký hiệu quy chuẩn trong sơ đồ tuần tự. Tác giả phân chia các yêu cầu chức năng thành 3 nhóm ca sử dụng:

• Nhóm ca sử dụng tổng quát hóa (UC1.01 đến UC1.06): Đăng ký, đăng nhập (phân luồng theo Role), đăng xuất, cập nhật mật khẩu, tìm kiếm, xem sản phẩm.
• Nhóm ca sử dụng quản trị viên (UC2.01 đến UC2.07): Quản lý người dùng, quản lý đơn hàng, xóa đơn hàng (kèm ràng buộc chỉ xóa đơn đã giao thành công), quản lý sản phẩm, thêm, xóa và sửa sản phẩm.
• Nhóm ca sử dụng khách hàng (UC3.01 đến UC3.07): Mua sản phẩm, quản lý giỏ hàng, xóa sản phẩm khỏi giỏ hàng, xem trạng thái đơn hàng, xem/sửa thông tin cá nhân và xem lịch sử đặt hàng.

Mỗi ca sử dụng đều được đặc tả chi tiết gồm tên, tác nhân, mô tả, tiền điều kiện, hậu điều kiện, luồng sự kiện chính và luồng sự kiện phụ, đi kèm sơ đồ tuần tự biểu diễn tương tác giữa tác nhân, giao diện, bộ điều khiển và cơ sở dữ liệu. Chương 2 cũng thiết lập bảng đặc tả 6 yêu cầu phi chức năng.

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG

Chương 3 trình bày các phương án thiết kế kiến trúc phần mềm và cơ sở dữ liệu:

• Thiết kế cơ sở dữ liệu: Xây dựng sơ đồ thực thể mối quan hệ (ERD) và đặc tả cấu trúc 9 bảng dữ liệu (Roles, Users, Categories, Products, ProductSizes, Galleries, Orders, Order_Details, Carts).
• Thiết kế hệ thống: Minh họa kiến trúc hệ thống Client - Server và kiến trúc phần mềm theo mô hình MVC, cung cấp sơ đồ tuần tự mẫu và phương thức tổ chức mã nguồn tương ứng theo các thành phần Model, View, Controller.

CHƯƠNG 4: THIẾT KẾ GIAO DIỆN

Chương 4 cung cấp sơ đồ Sitemap hoàn chỉnh của website cùng hệ thống giao diện thực tế đã thiết kế trên Figma và xây dựng trên hệ thống, bao gồm:

• Giao diện chung: Trang chủ, danh mục sản phẩm, chân trang (footer), giao diện đăng ký, đăng nhập, tìm kiếm sản phẩm.
• Giao diện danh mục chi tiết: Trang sản phẩm áo nam, quần nam, áo nữ, quần nữ, áo trẻ em, quần trẻ em, trang chi tiết sản phẩm và khối hiển thị sản phẩm tương tự.
• Giao diện khách hàng: Hồ sơ cá nhân, đổi mật khẩu, đơn hàng của tôi, lịch sử mua hàng.
• Giao diện quản trị viên: Bảng điều khiển (Dashboard), danh sách quản lý khách hàng, danh sách nhân viên và danh sách quản lý sản phẩm.

CHƯƠNG 5: CÀI ĐẶT VÀ KIỂM THỬ

Chương 5 trình bày việc cài đặt các mô-đun phần mềm lên môi trường máy chủ cục bộ và tiến hành kiểm thử các chức năng, giao diện của hệ thống nhằm phát hiện các lỗi phát sinh trong quá trình vận hành để thực hiện hiệu chỉnh kịp thời trước khi hoàn thiện sản phẩm.

CHƯƠNG 6: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Chương 6 tổng kết các kết quả kỹ thuật đã đạt được trong quá trình xây dựng website G5 Shop theo các mục tiêu đề ra, đồng thời đề xuất các định hướng phát triển, mở rộng hệ thống trong tương lai.

---

Kết quả và đóng góp

Kết quả kỹ thuật đạt được

1. Hoàn thiện hệ thống website thương mại điện tử: Xây dựng thành công ứng dụng web G5 Shop đáp ứng đầy đủ các chức năng mua sắm thời trang trực tuyến và quản lý cửa hàng.
2. Hiện thực hóa mô hình phân tích - thiết kế chuẩn mực: Xây dựng hệ thống tài liệu kỹ thuật hoàn chỉnh gồm sơ đồ Use Case tổng thể, bảng phân loại tác nhân, 20 bảng đặc tả ca sử dụng chi tiết, 22 sơ đồ tuần tự tương ứng và bảng phân rã 6 yêu cầu phi chức năng.
3. Hiện thực hóa cơ sở dữ liệu quan hệ: Thiết kế cấu trúc cơ sở dữ liệu gồm 9 bảng chuẩn hóa trên MySQL, hỗ trợ đầy đủ các quan hệ lưu trữ giữa người dùng, vai trò, sản phẩm, kích thước, hình ảnh, giỏ hàng và chi tiết đơn đặt hàng.
4. Xây dựng hệ thống giao diện trực quan: Hiện thực hóa hơn 20 mẫu giao diện theo sơ đồ Sitemap từ phía người dùng đến bảng điều khiển quản trị viên.

Đóng góp thực tiễn của đồ án

• Ứng dụng thành công quy trình công nghệ phần mềm dạng Thác nước vào việc phát triển một sản phẩm ứng dụng web trong phạm vi đồ án môn học.
• Đưa ra giải pháp tổ chức mã nguồn và vận hành hệ thống theo mô hình MVC kết hợp Backend Node.js và hệ quản trị dữ liệu quan hệ MySQL.
• Thiết lập quy tắc nghiệp vụ rõ ràng trong quản lý đơn hàng (như điều kiện ràng buộc quản trị viên chỉ được phép xóa các đơn hàng đã xác nhận giao thành công).

---

Hạn chế và hướng nghiên cứu tiếp

Hạn chế của đề tài

• Hệ thống được triển khai và thử nghiệm chủ yếu trên môi trường máy chủ phát triển cục bộ (Localhost thông qua gói phần mềm XAMPP), chưa ghi nhận dữ liệu triển khai thực tế trên hạ tầng đám mây công cộng.
• Quy trình thanh toán mới dừng lại ở mức độ xác nhận đơn hàng cơ bản, chưa tích hợp trực tiếp các cổng thanh toán điện tử trực tuyến tự động (như thẻ ngân hàng, ví điện tử).

Hướng nghiên cứu và phát triển tiếp

• Hoàn thiện và tích hợp các cổng thanh toán trực tuyến đa dạng nhằm nâng cao trải nghiệm giao dịch cho khách hàng.
• Nâng cấp các tính năng bảo mật, tối ưu hóa hiệu năng truy vấn cơ sở dữ liệu khi lượng người dùng đồng thời tăng cao.
• Triển khai ứng dụng lên máy chủ đám mây thực tế và tích hợp thêm các công cụ thống kê, báo cáo doanh thu chi tiết trong bảng điều khiển của quản trị viên.

---

Giá trị tham khảo

Báo cáo đồ án là tài liệu tham khảo hữu ích cho:

• Sinh viên chuyên ngành Công nghệ Thông tin, Kỹ thuật Phần mềm, Hệ thống Thông tin: Tham khảo phương pháp xây dựng đồ án môn học liên quan đến lập trình web (Frontend/Backend) và phát triển ứng dụng thương mại điện tử.
• Người học cần tài liệu mẫu về phân tích - thiết kế hệ thống thông tin: Báo cáo cung cấp khung tài liệu quy chuẩn về đặc tả ca sử dụng (Use Case Specification), xây dựng sơ đồ tuần tự (Sequence Diagram), sơ đồ quan hệ thực thể (ERD) và tổ chức cấu trúc cơ sở dữ liệu quan hệ cho bài toán bán hàng.

---

Câu hỏi thường gặp

1. Hệ thống website G5 Shop sử dụng những công nghệ và ngôn ngữ lập trình nào?

Hệ thống sử dụng HTML, CSS và JavaScript cho tầng giao diện người dùng (Frontend); Node.js cho tầng xử lý máy chủ (Backend); MySQL làm hệ quản trị cơ sở dữ liệu quan hệ; cùng với môi trường phân phối máy chủ cục bộ XAMPP.

2. Hệ thống phân chia bao nhiêu nhóm tác nhân và quyền hạn cụ thể ra sao?

Hệ thống phân thành 3 nhóm tác nhân: Khách (A1 - chưa có tài khoản, chỉ xem và tìm kiếm), Khách hàng (A2 - người dùng đã đăng nhập với Role = 2, có quyền mua hàng, quản lý giỏ hàng, xem đơn hàng và lịch sử mua sắm), và Quản trị viên (A3 - người quản lý hệ thống với Role = 1, có toàn quyền quản lý người dùng, sản phẩm và đơn hàng).

3. Cơ sở dữ liệu của đồ án gồm bao nhiêu bảng và gồm những bảng nào?

Cơ sở dữ liệu của hệ thống được thiết kế gồm 9 bảng dữ liệu: Roles, Users, Categories, Products, ProductSizes, Galleries, Orders, Order_Details và Carts.

4. Quy trình xử lý ca sử dụng "Xóa đơn hàng" của Quản trị viên có điều kiện ràng buộc gì?

Hệ thống quy định điều kiện kích hoạt và tiền điều kiện của use case xóa đơn hàng là đơn hàng phải ở trạng thái "đã được giao thành công". Nếu đơn hàng đang trong trạng thái chưa giao, hệ thống sẽ từ chối thao tác và gửi thông báo xóa không thành công.

5. Nhóm tác giả đã áp dụng mô hình quy trình và kiến trúc phần mềm nào?

Đồ án áp dụng mô hình phát triển phần mềm dạng Thác nước (Waterfall Model) gồm 6 giai đoạn tuần tự và xây dựng kiến trúc phần mềm theo mô hình MVC (Model - View - Controller) trên nền tảng kiến trúc Client - Server.

---

Kết luận

Báo cáo đồ án "Xây dựng website bán quần áo" (G5 Shop) của nhóm sinh viên Trường Đại học Công nghệ Thông tin – ĐHQG-HCM đã hoàn thành việc nghiên cứu, phân tích, thiết kế và cài đặt một hệ thống thương mại điện tử hoàn chỉnh theo mô hình thác nước. Hệ thống đáp ứng tốt các yêu cầu chức năng mua sắm, quản lý danh mục, đơn hàng và phân quyền tác nhân rõ ràng trên nền tảng công nghệ Node.js, MySQL, HTML, CSS và JavaScript. Đồ án thể hiện đầy đủ các bước kỹ thuật chuẩn mực từ khảo sát thực tế, phân tích Use Case, thiết kế cơ sở dữ liệu đến xây dựng giao diện người dùng, đóng vai trò là một tài liệu tham khảo có giá trị học thuật và thực hành trong nhóm môn học phát triển ứng dụng web.

Trích đoạn nội dung tài liệu

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Lý do chọn đề tài Thuật ngữ "Bán hàng online" ngày nay đã trở nên vô cùng phổ biến và quen thuộc với đa số mọi người, điều này thể hiện sự phát triển mạnh mẽ của công nghệ số trong cuộc sống hàng ngày. Trong bối cảnh đa dạng và ngày càng phức tạp của thị trường, việc kinh doanh online trở thành một lựa chọn hấp dẫn với vô vàn đề tài và cơ hội. Quyết định chọn đề tài "Website bán quần áo" của nhóm chúng tôi xuất phát từ mong muốn bắt kịp với xu hướng phát triển nhanh chóng của thế giới công nghệ và tích lũy kinh nghiệm trong việc phát triển kỹ năng lập trình web, thiết kế giao diện, và quản lý cơ sở dữ liệu. Chúng tôi tin rằng việc phát triển một website bán quần áo không chỉ giúp chúng tôi áp dụng những kiến thức đã học mà còn mở rộng tầm hiểu biết và kỹ năng thực hành.

Mục tiêu của chúng tôi là không chỉ xây dựng một giao diện trực quan và thuận tiện cho người dùng mà còn tạo ra một hệ thống quản lý linh hoạt, hiệu quả trong việc kinh doanh quần áo online.2 Tính cấp thiết của đồ án Phát triển một trang web bán quần áo không chỉ là một bước tiến thiết yếu mà còn là một chiến lược quan trọng đối với doanh nghiệp trong ngành thời trang. Một số yếu tố quan trọng mà nó mang lại có thể kể đến như sau: Đầu tiên và quan trọng nhất, trang web bán quần áo tạo ra một kênh bán hàng trực tuyến, có thể mở rộng phạm vi tiếp cận khách hàng và tăng cơ hội chuyển đổi. Thứ hai, trang web bán quần áo cung cấp một nền tảng để truyền đạt thông điệp thương hiệu và giới thiệu sản phẩm. Qua trang web, doanh nghiệp có thể thể hiện phong cách, xu hướng và giá trị của mình và tạo ra ấn tượng tích cực đối với khách hàng.

Ngoài ra, tính năng xem trước sản phẩm, đánh giá, và khả năng tìm kiếm linh hoạt trên trang web giúp người tiêu dùng dễ dàng tìm kiếm và chọn lựa sản phẩm phù hợp. Điều này không chỉ tối ưu hóa trải nghiệm người dùng mà còn thúc đẩy quyết định mua sắm và tăng cường sự hài lòng của khách hàng. Kết luận, phát triển một trang web bán quần áo không chỉ là một chiến lược cần thiết mà còn là một bước quan trọng để đáp ứng nhu cầu ngày càng cao của thị trường, tạo ra trải nghiệm mua sắm tích cực và xây dựng một hình ảnh thương hiệu mạnh mẽ trong thế giới thời trang ngày nay.O12 Internet và Công nghệ Web 1.3 Website tham khảo Nhóm đã tham khảo từ website Yody (https://yody.vn/) và Uniqlo (https://www.com/) - Về thiết kế giao diện : Giao diện Website Yody Hình 1: Giao diện Website Yody. Giao diện Website Uniqlo Hình 2: Giao diện Website Uniqlo.

+ Bố cục: Trang web có bố cục sạch sẽ và hiện đại. Menu chính dễ tiếp cận với các danh mục rõ ràng. + Tính thẩm mỹ: Trang web sử dụng thiết kế tối giản, tập trung vào hình ảnh sản phẩm, rất phù hợp cho một trang bán hàng thời trang.O12 Internet và Công nghệ Web - Về tương tác và trải nghiệm người dùng: + Điều hướng: Trang web có hệ thống điều hướng dễ dàng. Các danh mục được ghi rõ ràng, người dùng có thể dễ dàng tìm thấy các phần khác.

+ Hiển thị và thông tin sản phẩm: Sản phẩm được trưng bày nổi bật với các tùy chọn xem chi tiết, cho thấy thiết kế tương tác tốt cho việc mua sắm. Thông tin như tình trạng sẵn có, chi tiết sản phẩm, và giá cả nên dễ dàng truy cập. + Giỏ hàng và quy trình thanh toán: Có biểu tượng túi mua sắm cho thấy giỏ hàng, là tính năng quan trọng của bất kỳ trang thương mại điện tử nào. Quy trình thanh toán nên được đơn giản hóa và thân thiện với người dùng, giảm thiểu bước và thông tin cần thiết cho giao dịch nhanh chóng.

- Đặt hàng: + Giao diện đặt hàng Yody Hình 3: Giao diện đặt hàng Yody. Giao diện đặt hàng Uniqlo 10 IE104.O12 Internet và Công nghệ Web Hình 4: Giao diện đặt hàng Uniqlo. Thông qua việc tiến hành thử đặt hàng, nhóm nhận thấy rằng, hai trang Web trên: + Quy trình trực quan, từ việc chọn sản phẩm đến thêm vào giỏ hàng và tiến hành thanh toán. + Cung cấp nhiều phương thức thanh toán và đảm bảo giao dịch an toàn.

+ Tương tác sau khi đặt hàng như email xác nhận và thông tin theo dõi nâng cao trải nghiệm người dùng. Qua đó, nhóm nhận thấy rằng 2 trang web trên là những mẫu thiết kế tốt để định hướng phát triển trang Web của nhóm.4 Mục tiêu của đồ án Nhóm chúng em thực hiện đề tài với mong muốn xây dựng và vận hành được trang web sử dụng các công nghệ web như HTML, CSS, Javascript,… đối với frontend và xây dựng backend với Node.js và MySQL. Phạm vi và đối tượng hệ thống hướng đến là tất cả những người có nhu cầu mua sắm trên một trang web bán quần áo trực tuyến. Trên trang web này, người dùng có thể xem các loại quần áo, lựa chọn màu, size, số lượng, giá cả và cuối cùng là đặt hàng.

Đồng thời, trang Web còn có thể giúp cho người chủ cửa hàng quảng bá sản phẩm của mình trên nền tảng Web khác và giúp cho việc quản lý sản phẩm, khách hàng…etc trở nên dễ dàng hơn. Tất cả mọi việc đó có thể được thực hiện thông qua điện thoại di động hay máy tính cá nhân.O12 Internet và Công nghệ Web 1.5 Các công cụ hỗ trợ sử dụng trong đồ án - Notion: Notion là một công cụ quản lý thông tin linh hoạt, giúp tổ chức dự án nhóm bằng cách tạo trang, lên kế hoạch, và ghi chú. Nó hỗ trợ cộng tác, phân công nhiệm vụ, và theo dõi tiến độ. Vậy nên nhóm đã chọn đây là nơi nhóm dùng để quản lý tiến độ cũng như phân chia công việc.

- Google Meet: Google Meet là công cụ nhóm dùng trong quá trình thực hiện đồ án để tổ chức các cuộc họp cũng như trao đổi những khó khăn giữa các thành viên khi thực hiện đồ án. - Google Drive: Là một dịch vụ của GooGle hỗ trợ lưu trữ tài liệu như là lưu trữ đám mây. Đây là nơi nhóm chúng tôi lưu trữ toàn bộ tài liệu liên quan đến đồ án như hình ảnh, báo cáo đồ án, video demo. - Git - Github : Github là một công cụ mạnh mẽ để lưu trữ và quản lý source code.

Tại đây, chúng tôi dùng để lưu trữ source code cho đồ án. Đồng thời cũng được coi như là môi trường để nhóm chúng tôi quản lý mọi sự thay đổi của các dòng lệnh. Nhóm chúng tôi cũng sử dụng Git để quản lý các phiên bản của source cũng như hỗ trợ cho việc kéo hoặc đẩy code về. - Figma: Công cụ này được nhóm chúng tôi sử dụng để phác thảo giao diện của Website (UI).

- Visual Studio Code: Nhóm sử dụng trình soạn thảo Visual Studio Code, lý do là vì nó phổ biến, dễ cài đặt và hỗ trợ cho đồ án thuận tiện và nhanh chóng. - Xampp: Xampp là một môi trường phát triển PHP phổ biến, cho phép tạo các ứng dụng web trên máy tính cá nhân. Xampp là một bản phân phối Apache miễn phí và dễ dàng thực hiện các thao tác trên đó. Nhận thấy ưu điểm này nhóm chúng tôi nhận thấy rằng nó là một công cụ hữu ích để hỗ trợ việc phát triển dự án của nhóm và đã sử dụng nó trong quá trình phát triển dự án của mình.6 Các công nghệ và thư viện sử dụng trong đồ án 1.1 Front-end - HTML HTML là ngôn ngữ đánh dấu siêu văn bản, được sử dụng để thiết kế các trang web bằng một ngôn ngữ đánh dấu.

HTML là sự kết hợp của siêu văn bản và ngôn ngữ đánh dấu. Siêu văn bản xác định liên kết giữa các trang web. Ngôn ngữ đánh dấu được sử dụng để xác định tài liệu văn bản trong các thẻ, các thẻ xác định cấu trúc của trang web. Ngôn ngữ này được sử dụng để chú thích (ghi chú cho máy tính) văn bản để máy tính có thể hiểu được và thao tác văn bản theo đó.

Hầu hết các ngôn ngữ đánh dấu (ví dụ: HTML) đều có thể đọc được bởi con người.O12 Internet và Công nghệ Web ngữ sử dụng các thẻ để xác định thao tác nào phải được thực hiện trên văn bản. HTML được trình duyệt sử dụng để thao tác văn bản, hình ảnh và nội dung khác, để hiển thị chúng theo định dạng mong muốn. - CSS CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng để tạo kiểu cho các trang web. CSS cho phép áp dụng các kiểu khác nhau cho các phần tử HTML trên trang web như màu sắc, font chữ, căn lề, kích thước, v.v… CSS còn giúp kiểm soát bố cục của nhiều trang web cùng một lúc, tiết kiệm thời gian và công sức.

CSS cũng cho phép tạo ra các hiệu ứng động và tương tác với người dùng, như chuyển động, chuyển đổi, biến đổi, v.v… - Javascript JavaScript là một ngôn ngữ lập trình được sử dụng để tạo ra các trang web sống động và tương tác. JavaScript có thể thay đổi nội dung, thuộc tính và kiểu của các phần tử HTML trên trang web của bạn, phản ứng với các sự kiện của người dùng, gửi và nhận dữ liệu qua mạng, tạo ra các hiệu ứng đồ họa và hoạt hình, v.2 Các công nghệ Back-end - NodeJs NodeJs là một mã nguồn mở, một môi trường cho các máy chủ và ứng dụng mạng.js chứa một thư viện built-in cho phép các ứng dụng hoạt động như một Webserver mà không cần phần mềm như Nginx, Apache HTTP Server hoặc IIS. - MySQL MySQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở, được phát hành để nhiều người có thể sử dụng được. MySQL sử dụng ngôn ngữ truy vấn có cấu trúc (SQL) để tương tác với cơ sở dữ liệu.

Hoạt động theo mô hình client- server, nơi một máy tính chạy phần mềm MySQL server để lưu trữ và quản lý dữ liệu, và các máy tính khác kết nối tới máy chủ để truy vấn dữ liệu.7 Quy trình làm việc Để xây dựng và thiết kế website, việc lựa chọn một phương pháp để phát triển hướng xây dựng website là rất quan trọng, vì nó có khả năng ảnh hưởng đến hiệu suất, bảo trì, chi phí, thời gian, tài nguyên và kết quả của sản phẩm. Chính vì tầm quan trọng của việc lựa chọn phương pháp để phát triển website, nhóm chúng tôi đã quyết định chọn theo mô hình thác nước (Waterfall) để xây 13 IE104.