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

Trong bối cảnh cuộc Cách mạng công nghiệp 4.0 đang diễn ra mạnh mẽ với sự phát triển của vạn vật kết nối, tự động hóa và trí tuệ nhân tạo, mạng Internet đã trở thành hạ tầng truyền thông thiết yếu, chi phối hầu hết các lĩnh vực từ giáo dục, y tế, ngoại giao đến thương mại. Sự phổ biến của Internet thúc đẩy sự mở rộng của thương mại điện tử, thay đổi căn bản hành vi tiêu dùng và nâng cao chất lượng cuộc sống. Khách hàng ngày càng có xu hướng lựa chọn mua sắm trực tuyến và thanh toán qua mạng ngay tại nhà nhằm tiết kiệm thời gian và tiếp cận được nhiều sự lựa chọn. Để đáp ứng nhu cầu thị trường và duy trì năng lực cạnh tranh, các đơn vị kinh doanh cần áp dụng công nghệ thông tin vào mô hình bán hàng.

Xuất phát từ thực tế đó, đề tài "Xây dựng website bán giày online" được nhóm tác giả lựa chọn nghiên cứu và thực hiện trong khuôn khổ báo cáo môn học Công nghệ Web tại Trường Đại học Kiến trúc Hà Nội.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài bao gồm:

  1. Nghiên cứu tổng quan và hệ thống hóa các kiến thức nền tảng về phát triển ứng dụng web, bao gồm ngôn ngữ đánh dấu HTML, định kiểu CSS, ngôn ngữ kịch bản JavaScript và quy trình xây dựng website tiêu chuẩn.
  2. Phân tích yêu cầu bài toán kinh doanh giày trực tuyến, xác định các tác nhân và mô hình hóa các ca sử dụng (Use Case) của hệ thống.
  3. Thiết kế cấu trúc giao diện, đặc tả chi tiết các luồng xử lý chính và luồng rẽ nhánh cho từng chức năng của người dùng và quản trị viên.
  4. Triển khai xây dựng giao diện website bán giày online tích hợp danh mục sản phẩm theo thương hiệu, hiển thị thông tin chi tiết và hỗ trợ đặt hàng.

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

  • Đối tượng nghiên cứu: Hệ thống website thương mại điện tử phục vụ hoạt động giới thiệu, quảng bá và kinh doanh sản phẩm giày dép trực tuyến.
  • Phạm vi đối tượng phục vụ: Khách hàng có nhu cầu tra cứu, xem thông tin và đặt hàng trực tuyến; người quản trị (Admin) và nhà sản xuất có nhu cầu quảng bá sản phẩm và quản lý thông tin bán hàng.
  • Phạm vi công nghệ và không gian: Đề tài được nghiên cứu và triển khai trong khuôn khổ Bộ môn Công nghệ Web, Khoa Công nghệ Thông tin – Trường Đại học Kiến trúc Hà Nội vào tháng 9 năm 2023, định hướng sử dụng ngôn ngữ lập trình Java và hệ quản trị cơ sở dữ liệu SQL Server kết hợp bộ công nghệ giao diện web (HTML, CSS, JavaScript).

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

Đề tài kết hợp giữa lý thuyết nền tảng về công nghệ front-end, phương pháp phân tích thiết kế hệ thống theo mô hình Use Case và quy trình quản lý dự án phát triển web.

1. Khung lý thuyết và công nghệ nền tảng

  • Ngôn ngữ đánh dấu HTML (HyperText Markup Language): Đóng vai trò là khối xây dựng cơ bản xác định cấu trúc và ngữ nghĩa của tài liệu web. Báo cáo sử dụng chuẩn HTML5 với các phần tử khối cấu trúc (<!DOCTYPE html>, <html>, <head>, <meta charset="utf-8">, <meta name="viewport">, <title>, <body>), các phần tử văn bản và nội dung (<h1>-<h6>, <p>, <ul>, <ol>, <li>, <a>, <img>), cùng các thành phần biểu mẫu (<form>, <input>, <label>).
  • Tập định kiểu CSS (Cascading Style Sheets): Được sử dụng để thiết lập giao diện, bố cục và hiệu ứng hiển thị. Tài liệu phân tích ba phương pháp nhúng CSS gồm Inline CSS (nội tuyến qua thuộc tính style), Internal CSS (nội bộ trong thẻ <style>) và External CSS (bên ngoài qua thẻ <link>), đi kèm các quy tắc lựa chọn lớp (.class), thuộc tính định dạng chữ (font-family, font-size), màu sắc (color, background-color), kích thước (width, height), mô hình hộp (padding, margin, border), và bố cục đáp ứng (Responsive Design với Media Queries, Flexbox, Grid).
  • Ngôn ngữ kịch bản JavaScript: Đảm nhiệm xử lý hành vi và tương tác người dùng phía client. Báo cáo hệ thống hóa cú pháp khai báo biến (var, let, const), hàm (function), phương thức xử lý sự kiện (addEventListener()), thao tác DOM và các cơ chế lưu trữ phía máy khách (Cookies, Web Storage như localStorage/sessionStorage, IndexedDB).
  • Cơ chế xác thực biểu mẫu (Form Validation): Nghiên cứu sự kết hợp giữa xác thực phía máy khách (Client-side) và xác thực phía máy chủ (Server-side) thông qua JavaScript và các ràng buộc HTML5 (required, thuộc tính ràng buộc đầu vào, bộ chọn giả CSS).

2. Phương pháp nghiên cứu và thiết kế hệ thống

  • Phương pháp phân tích và mô hình hóa hệ thống: Ứng dụng ngôn ngữ mô hình hóa thống nhất (UML) để xây dựng biểu đồ ca sử dụng tổng quát (Use Case Diagram), phân rã nhóm Use Case và lập bảng đặc tả kịch bản (gồm mô tả, tiền điều kiện, luồng sự kiện chính, luồng sự kiện rẽ nhánh và hậu điều kiện).
  • Quy trình phát triển phần mềm: Áp dụng quy trình phát triển website chuẩn gồm 8 bước tuần tự: Thu thập thông tin & phân tích yêu cầu $\rightarrow$ Lập kế hoạch (Sitemap, Navigation Menu) $\rightarrow$ Lựa chọn tên miền & Hosting $\rightarrow$ Thiết kế giao diện (Template hoặc Độc quyền) $\rightarrow$ Xây dựng tính năng & nội dung $\rightarrow$ Kiểm tra & chỉnh sửa $\rightarrow$ Bàn giao & hướng dẫn sử dụng $\rightarrow$ Bảo trì hệ thống.

Thiết kế và triển khai

1. Phân tích tác nhân và kiến trúc Use Case

Hệ thống xác định hai tác nhân chính tham gia tương tác trực tiếp:

  • Khách hàng (Customer): Người dùng tương tác với hệ thống qua các chức năng xem thông tin sản phẩm, duyệt danh mục theo hãng, chọn sản phẩm đặt hàng, đăng ký/đăng nhập tài khoản và gửi yêu cầu hỗ trợ.
  • Quản trị viên (Admin): Người điều hành hệ thống, thực hiện đăng nhập, xem thông tin cá nhân, quản lý danh mục sản phẩm, quản lý danh sách sản phẩm, quản lý danh sách khách hàng và quản lý tài khoản Admin.
Tác nhân Nhóm chức năng chính Danh sách Use Case cụ thể
Khách hàng Tra cứu & Mua sắm - Đăng ký / Đăng nhập
- Xem thông tin sản phẩm
- Xem thông tin danh mục
- Chọn sản phẩm cần đặt hàng
- Liên hệ hỗ trợ khách hàng
Admin Quản trị hệ thống - Đăng nhập hệ thống
- Xem thông tin cá nhân / Đổi mật khẩu
- Quản lý danh mục sản phẩm (Thêm, Sửa, Xóa)
- Quản lý danh sách sản phẩm
- Quản lý danh sách khách hàng và Admin
- Hỗ trợ khách hàng

2. Đặc tả luồng xử lý các Use Case cốt lõi

  • Use Case Quản lý danh mục sản phẩm (Admin):
    • Tiền điều kiện: Admin đã đăng nhập thành công vào hệ thống.
    • Luồng sự kiện chính: Admin lựa chọn thao tác (Thêm, Thay đổi thông tin, hoặc Xóa). Khi thêm hoặc sửa, hệ thống hiển thị form nhập liệu; Admin điền dữ liệu và nhấn lưu; hệ thống kiểm tra và cập nhật cơ sở dữ liệu. Khi xóa, hệ thống hiển thị hộp thoại xác nhận trước khi thực hiện loại bỏ dữ liệu khỏi danh sách.
    • Luồng rẽ nhánh (A1): Nếu nhập dữ liệu không hợp lệ hoặc thiếu trường bắt buộc, hệ thống xuất thông báo lỗi, giữ lại trạng thái form để Admin nhập lại.
    • Hậu điều kiện: Thông tin sản phẩm được cập nhật đồng bộ vào cơ sở dữ liệu SQL Server.
  • Use Case Đăng ký, Đăng nhập (Khách hàng / Admin):
    • Tiền điều kiện: Người dùng truy cập vào trang xác thực của hệ thống.
    • Luồng sự kiện chính: Người dùng điền thông tin tài khoản, mật khẩu vào form và nhấn nút đăng nhập/đăng ký. Hệ thống kiểm tra dữ liệu với bảng Account; nếu hợp lệ sẽ cấp quyền truy cập tương ứng với vai trò.
    • Luồng rẽ nhánh (A1): Khi thông tin không chính xác hoặc để trống, hệ thống hiển thị thông báo lỗi và yêu cầu người dùng nhập lại.

3. Cấu trúc và triển khai giao diện website

Cấu trúc trang web được quy hoạch thành các khối chức năng rõ ràng:

  • Header: Chứa logo cửa hàng, câu khẩu hiệu (slogan), banner liên kết, thanh công cụ tìm kiếm nhanh và các nút điều hướng.
  • Global Navigation: Thanh menu điều hướng chính toàn trang, hỗ trợ phân loại sản phẩm theo từng hãng/thương hiệu giày và các liên kết điều hướng cấp con (sub-navigation).
  • Page Body: Gồm phần nội dung chính (Content) hiển thị danh sách sản phẩm dạng lưới (grid layout) kèm ảnh đại diện, tên sản phẩm, giá bán, mô tả tóm tắt; và thanh bên (Sidebar) chứa menu phụ hoặc banner quảng cáo.
  • Footer: Chân trang cung cấp thông tin liên hệ của đơn vị (tên cửa hàng, địa chỉ, số điện thoại, email hỗ trợ), bản quyền (copyright) và các liên kết chính sách.

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

Giới thiệu về HTML

Phần này trình bày khái niệm về ngôn ngữ đánh dấu siêu văn bản (HTML), vai trò của HTML trong việc cấu trúc nội dung website và hướng dẫn khởi tạo tệp tin HTML trên trình soạn thảo VSCode. Tác giả phân tích chi tiết cấu trúc của một phần tử HTML (gồm thẻ mở, thẻ đóng, nội dung và các thuộc tính), đồng thời giải thích chức năng của các thẻ cấu trúc tài liệu cơ bản (<!DOCTYPE html>, <html>, <head>, <title>, <meta charset="utf-8">, <meta name="viewport">, <body>). Nội dung cũng hướng dẫn cách tổ chức tiêu đề (<h1>-<h6>), đoạn văn (<p>), danh sách có thứ tự và không thứ tự (<ol>, <ul>, <li>), tạo siêu liên kết (<a>) và nhúng hình ảnh (<img>).

Cơ bản về CSS

Chương này tập trung vào vai trò của CSS trong việc tạo kiểu và dàn trang giao diện. Tác giả phân biệt ưu và nhược điểm của ba phương pháp áp dụng CSS (Inline CSS, Internal CSS, External CSS), trong đó khuyến nghị sử dụng External CSS để tối ưu việc bảo trì và tái sử dụng mã nguồn. Nội dung đi sâu vào cách thiết lập bộ chọn lớp (.class), lựa chọn ID, và thử nghiệm các thuộc tính cơ bản như kiểu chữ (font-family, font-size), màu sắc (color, background-color), kích thước (width, height), cùng các thuộc tính căn chỉnh lề và viền (padding, margin, border).

JavaScript và HTML Forms

Nội dung chương giới thiệu cú pháp JavaScript cơ bản, cách phân loại giá trị cố định (Literals) và giá trị biến (Variables), các từ khóa khai báo biến (var, let, const), cách định nghĩa hàm có tham số và không tham số. Phần xử lý sự kiện trình bày cách sử dụng phương thức addEventListener() để phản hồi tương tác click nút bấm của người dùng. Về biểu mẫu (HTML Forms), tài liệu mô tả chi tiết các phần tử <form>, <input> (văn bản, mật khẩu, số, radio button, checkbox), thẻ <label> hỗ trợ tiếp cận, và phân tích các phương pháp xác thực dữ liệu phía client/server cùng các ràng buộc thuộc tính HTML5.

Quy trình phát triển Web

Chương này chuẩn hóa 8 bước trong vòng đời phát triển website từ khâu quản lý tiến độ, chi phí và thời gian dự án đến các giai đoạn thực thi:

  1. Thu thập thông tin và phân tích yêu cầu khách hàng (lĩnh vực hoạt động, đối tượng mục tiêu, yêu cầu kỹ thuật và bảo mật).
  2. Lập kế hoạch kiến trúc (sơ đồ trang sitemap, hệ thống menu điều hướng).
  3. Đăng ký và lựa chọn tên miền cùng cấu hình gói hosting phù hợp.
  4. Thiết kế giao diện (đối sánh giữa giao diện mẫu có sẵn và giao diện thiết kế độc quyền theo nhận diện thương hiệu).
  5. Xây dựng tính năng và biên tập nội dung, kết hợp thiết kế tương thích đa thiết bị (Responsive Design).
  6. Kiểm tra, kiểm thử lỗi chức năng, tối ưu hiển thị di động và bảo mật.
  7. Bàn giao sản phẩm và hướng dẫn vận hành cho khách hàng.
  8. Bảo trì và hỗ trợ kỹ thuật sau triển khai.

Nghiên cứu tổng quan

Trình bày bối cảnh phát triển của thị trường thương mại điện tử, lý do chọn đề tài website bán giày online nhằm mở rộng kênh tiếp cận khách hàng cho cửa hàng, nâng cao tính chuyên nghiệp và đáp ứng xu hướng mua sắm tại nhà. Chương này cũng xác định phạm vi phục vụ của hệ thống đối với khách hàng và đơn vị quản lý kinh doanh.

Phân tích, thiết kế hệ thống website

Chương này tập trung phân tích bài toán thực tế để trích xuất các yêu cầu chức năng. Tác giả xác định hai nhóm chức năng chính (nhóm xem thông tin và nhóm quản lý thông tin), thiết lập mô hình tác nhân (Khách hàng, Admin), xây dựng biểu đồ Use Case tổng quát và các biểu đồ phân rã ca sử dụng cho từng nhóm nghiệp vụ. Toàn bộ các Use Case cốt lõi đều được lập bảng đặc tả chi tiết với đầy đủ các luồng sự kiện chính, rẽ nhánh và điều kiện biên.

Xây dựng và triển khai website

Trình bày phương pháp kết hợp mã nguồn HTML, CSS và JavaScript để xây dựng hoàn chỉnh giao diện trang web. Tác giả thuyết minh cấu trúc layout 4 phần (Header, Navigation, Body, Footer), áp dụng các kỹ thuật CSS (bảng màu, font chữ, tỉ lệ ảnh, responsive design) và JavaScript (bắt sự kiện, kiểm tra form). Cuối chương là các minh họa giao diện thực tế của website bán giày gồm trang chủ, thanh menu phân loại theo hãng, danh sách sản phẩm theo thương hiệu và trang mô tả chi tiết sản phẩm.

Đánh giá kết quả và hướng phát triển

Đánh giá tổng quan các kết quả đạt được về mặt xây dựng giao diện và tài liệu phân tích hệ thống, đồng thời ghi nhận những hạn chế về thời gian thực hiện và đề xuất các hướng nâng cấp chức năng trong tương lai.

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

  • Hệ thống hóa lý thuyết: Báo cáo cung cấp tài liệu tổng hợp có cấu trúc về các công nghệ cốt lõi trong lập trình web giao diện (HTML5, CSS3, JavaScript) và quy trình chuẩn hóa phát triển phần mềm web 8 bước trong thực tế.
  • Mô hình hóa hệ thống hoàn chỉnh: Đã phân tích và đặc tả được hệ thống phân quyền với 2 tác nhân rõ rệt (Khách hàng và Admin), xây dựng sơ đồ Use Case tổng thể cùng kịch bản chi tiết cho các luồng nghiệp vụ: xem sản phẩm, phân loại thương hiệu, quản lý danh mục sản phẩm, quản trị tài khoản và xác thực người dùng.
  • Hiện thực hóa giao diện website bán giày: Đã triển khai được các màn hình giao diện người dùng trực quan, bao gồm trang chủ, bố cục phân loại sản phẩm theo từng hãng sản xuất, khu vực hiển thị thông tin mô tả chi tiết sản phẩm và hệ thống điều hướng toàn trang.

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

  • Hạn chế: Báo cáo ghi nhận do giới hạn về mặt thời gian và nguồn lực trong quá trình làm đồ án môn học, hệ thống vẫn còn một số thiếu sót và chưa hoàn thiện toàn diện tất cả các phân hệ nâng cao.
  • Hướng phát triển:
    • Tiếp tục hoàn thiện việc tích hợp tầng xử lý logic backend bằng Java và kết nối đồng bộ với hệ quản trị cơ sở dữ liệu SQL Server.
    • Tối ưu hóa sâu hơn khả năng hiển thị tương thích đa màn hình (Responsive Web Design) và nâng cao các cơ chế bảo mật cho hệ thống tài khoản và dữ liệu giao dịch.

Giá trị tham khảo

Tài liệu là nguồn tham khảo phù hợp cho sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm đang học tập học phần Công nghệ Web hoặc bước đầu tiếp cận quy trình xây dựng đồ án website bán hàng.

Các nội dung có giá trị tham khảo cao trong tài liệu bao gồm:

  1. Phần tổng hợp lý thuyết cơ bản về HTML/CSS/JavaScript và cơ chế xác thực dữ liệu biểu mẫu.
  2. Tài liệu hướng dẫn quy trình phát triển website 8 bước áp dụng cho các bài toán doanh nghiệp vừa và nhỏ.
  3. Cấu trúc lập hồ sơ phân tích thiết kế hệ thống, phương pháp vẽ biểu đồ và viết bảng đặc tả Use Case chi tiết cho một website thương mại điện tử.

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

1. Đề tài được thực hiện bởi nhóm tác giả nào và thuộc đơn vị đào tạo nào?
Đề tài do Nhóm 20 gồm ba sinh viên: Nguyễn Đức Thuận (MSV: 2155010252), Bùi Sỹ Nguyên (MSV: 2155010187) và Vũ Vân Long (MSV: 2155010157) thực hiện dưới sự hướng dẫn của giảng viên Nguyễn Thị Hạnh, thuộc Bộ môn Công nghệ Web – Khoa Công nghệ Thông tin, Trường Đại học Kiến trúc Hà Nội (tháng 9/2023).

2. Công nghệ chủ đạo được định hướng và sử dụng trong đề tài là gì?
Hệ thống được định hướng xây dựng trên nền tảng ngôn ngữ lập trình Java kết hợp hệ quản trị cơ sở dữ liệu SQL Server, cùng bộ ba công nghệ giao diện web front-end gồm HTML, CSS và JavaScript.

3. Hệ thống phân chia những nhóm tác nhân nào và có các Use Case chính nào?
Hệ thống phân chia thành 2 tác nhân chính:

  • Tác nhân Khách hàng: Đăng ký/đăng nhập, xem thông tin sản phẩm, xem danh mục, chọn sản phẩm đặt hàng, liên hệ hỗ trợ.
  • Tác nhân Admin: Đăng nhập, xem thông tin cá nhân/đổi mật khẩu, quản lý danh mục sản phẩm, quản lý sản phẩm, quản lý danh sách admin/khách hàng và hỗ trợ khách hàng.

4. Báo cáo đề xuất cấu trúc chuẩn của một trang web HTML gồm những thành phần nào?
Cấu trúc một trang web được quy định gồm 4 phần chính: Header (đầu trang chứa logo, banner, form tìm kiếm), Global Navigation (thanh điều hướng liên kết toàn trang), Page Body (thân trang gồm phần Content hiển thị nội dung chính và Sidebar chứa liên kết/quảng cáo phụ), và Footer (chân trang chứa thông tin liên hệ và bản quyền).

5. Quy trình phát triển website chuẩn được nhóm tác giả tổng hợp gồm mấy bước?
Quy trình phát triển web được chuẩn hóa qua 8 bước: (1) Thu thập thông tin và tiếp nhận yêu cầu; (2) Lập kế hoạch (Sitemap, Menu); (3) Lựa chọn tên miền và Hosting; (4) Thiết kế giao diện; (5) Xây dựng tính năng và nội dung; (6) Kiểm tra và chỉnh sửa; (7) Bàn giao và hướng dẫn sử dụng; (8) Bảo trì hệ thống.

Kết luận

Báo cáo môn học "Xây dựng website bán giày online" của nhóm sinh viên Trường Đại học Kiến trúc Hà Nội đã hệ thống hóa đầy đủ kiến thức nền tảng về công nghệ web từ HTML, CSS đến JavaScript và phương pháp xác thực biểu mẫu. Đề tài đã áp dụng thành công phương pháp phân tích thiết kế hướng tác nhân để mô hình hóa và đặc tả chi tiết các Use Case cốt lõi cho một hệ thống bán hàng trực tuyến. Đồng thời, báo cáo đã triển khai xây dựng cấu trúc giao diện trực quan cho website bán giày theo thương hiệu, tạo nền tảng vững chắc để tiếp tục mở rộng và hoàn thiện các chức năng xử lý backend với Java và SQL Server.