Đồ Án Thiết Kế Website Kinh Doanh Đèn Ngủ Onirique Shop

Đồ án nghiên cứu môn học thiết kế web đề tài thiết kế website kinh doanh đèn ngủ onirique shop, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho bài toán .

• Tác giả: Nguyễn Thị Thương
• Người hướng dẫn: Bùi Duy Tân
• Trường học: Trường Đại Học Nguyễn Tất Thành
• Chuyên ngành: Công Nghệ Thông Tin
• Đề tài: Thiết Kế Website Kinh Doanh Đèn Ngủ Onirique Shop
• Loại tài liệu: Đồ Án Môn Học
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Mục lục chi tiết

• LỜI CÁM ƠN
• LỜI MỞ ĐẦU
• 1. CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI
• 1.1. Giới thiệu đề tài
• 1.2. Giao thức HTTP
• 1.3. Thành phần của Website căn bản: Bố cục và giao diện
• 1.4. Lý do chọn đề tài
• 1.5. Mục tiêu đề tài
• 1.6. Các công cụ hỗ trợ
• 2. CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB
• 2.1. Cây thư mục
• 2.2. Tài nguyên sử dụng xây dựng Website
• 2.3. Mô tả các chức năng có trong các file trong thư mục TN
• 2.4. Mô tả các bước thực hiện của từng trang và kết quả
• 3. CHƯƠNG 3: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
• 3.1. Các vấn đề được giải quyết
• 3.2. Các vấn đề chưa được giải quyết
• 3.3. Hướng phát triển
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan về Thiết Kế Website Kinh Doanh Đèn Ngủ Onirique Shop

Thiết kế website kinh doanh đèn ngủ Onirique Shop không chỉ đơn thuần là việc tạo ra một trang web. Đây là một quá trình kết hợp giữa nghệ thuật và công nghệ, nhằm mang đến trải nghiệm mua sắm trực tuyến tốt nhất cho khách hàng. Website này được xây dựng với mục tiêu cung cấp thông tin chi tiết về các sản phẩm đèn ngủ, đồng thời tạo ra một không gian mua sắm thân thiện và dễ sử dụng.

1.1. Lý do chọn thiết kế website cho Onirique Shop

Việc thiết kế website cho Onirique Shop nhằm đáp ứng nhu cầu ngày càng cao của người tiêu dùng trong việc mua sắm trực tuyến. Đèn ngủ không chỉ là sản phẩm trang trí mà còn là yếu tố quan trọng trong việc tạo ra không gian sống thoải mái.

1.2. Mục tiêu của website Onirique Shop

Mục tiêu chính của website là cung cấp trải nghiệm mua sắm trực tuyến dễ dàng, nhanh chóng và an toàn cho khách hàng. Đồng thời, website cũng hướng đến việc xây dựng thương hiệu và uy tín cho Onirique Shop.

II. Những thách thức trong thiết kế website bán hàng đèn ngủ

Thiết kế website bán hàng đèn ngủ Onirique Shop gặp phải nhiều thách thức, từ việc tối ưu hóa giao diện người dùng đến việc đảm bảo tính năng tương tác. Những thách thức này cần được giải quyết để mang lại trải nghiệm tốt nhất cho khách hàng.

2.1. Tối ưu hóa giao diện người dùng

Giao diện người dùng cần phải thân thiện và dễ sử dụng. Điều này bao gồm việc sắp xếp các sản phẩm một cách hợp lý và dễ dàng tìm kiếm thông tin.

2.2. Đảm bảo tính năng tương tác

Website cần có các tính năng tương tác như giỏ hàng, thanh toán trực tuyến và hỗ trợ khách hàng. Những tính năng này giúp nâng cao trải nghiệm mua sắm cho người dùng.

III. Phương pháp thiết kế website Onirique Shop hiệu quả

Để thiết kế website Onirique Shop hiệu quả, cần áp dụng các phương pháp hiện đại và công nghệ tiên tiến. Việc sử dụng HTML, CSS, JavaScript và các framework như Bootstrap sẽ giúp tạo ra một trang web đẹp và chức năng.

3.1. Sử dụng HTML và CSS trong thiết kế

HTML và CSS là hai ngôn ngữ cơ bản trong thiết kế web. HTML giúp cấu trúc nội dung, trong khi CSS giúp định dạng và tạo phong cách cho trang web.

3.2. Tích hợp JavaScript để tăng tính tương tác

JavaScript cho phép tạo ra các tính năng động và tương tác trên website. Điều này giúp người dùng có trải nghiệm tốt hơn khi mua sắm.

IV. Ứng dụng thực tiễn của website Onirique Shop

Website Onirique Shop không chỉ là nơi bán hàng mà còn là một nền tảng để khách hàng tìm hiểu về sản phẩm. Các bài viết, hình ảnh và thông tin chi tiết về sản phẩm giúp khách hàng đưa ra quyết định mua sắm chính xác.

4.1. Cung cấp thông tin sản phẩm chi tiết

Mỗi sản phẩm trên website đều có thông tin chi tiết, bao gồm mô tả, hình ảnh và giá cả. Điều này giúp khách hàng dễ dàng so sánh và lựa chọn sản phẩm phù hợp.

4.2. Tạo không gian tương tác giữa khách hàng và sản phẩm

Website cho phép khách hàng để lại đánh giá và nhận xét về sản phẩm. Điều này không chỉ giúp cải thiện chất lượng sản phẩm mà còn tạo sự tin tưởng từ phía khách hàng.

V. Kết luận và hướng phát triển của website Onirique Shop

Website Onirique Shop đã đạt được nhiều thành công trong việc cung cấp sản phẩm đèn ngủ chất lượng. Tuy nhiên, vẫn còn nhiều cơ hội để phát triển và cải thiện hơn nữa. Việc liên tục cập nhật công nghệ và xu hướng mới sẽ giúp website duy trì vị thế cạnh tranh.

5.1. Đánh giá hiệu quả hoạt động của website

Cần thường xuyên theo dõi và đánh giá hiệu quả hoạt động của website thông qua các chỉ số như lượng truy cập, tỷ lệ chuyển đổi và phản hồi từ khách hàng.

5.2. Định hướng phát triển trong tương lai

Trong tương lai, Onirique Shop có thể mở rộng thêm các sản phẩm mới và cải thiện các tính năng của website để đáp ứng tốt hơn nhu cầu của khách hàng.

Nội dung chính

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

Sự bùng nổ của cuộc Cách mạng Công nghiệp lần thứ tư đã thúc đẩy quá trình chuyển đổi số trong mọi lĩnh vực đời sống, trong đó thương mại điện tử trở thành một phương thức mua sắm trực tuyến phổ biến nhờ sự tiện lợi tối đa cho người tiêu dùng. Cùng với sự phát triển của lối sống hiện đại, nhận thức về việc chăm sóc sức khỏe thể chất và tinh thần ngày càng được nâng cao, đặc biệt là nhu cầu về một giấc ngủ trọn vẹn, sâu và thoải mái sau thời gian làm việc. Trong không gian sống, đèn ngủ không đơn thuần đóng vai trò là một vật trang trí nội thất mà còn là thiết bị tạo điểm nhấn, mang đến nguồn ánh sáng dịu nhẹ, tạo môi trường sống ấm áp và hỗ trợ cải thiện chất lượng giấc ngủ.

Xuất phát từ thực tiễn đó, việc thiết lập các nền tảng số chuyên biệt phục vụ kinh doanh sản phẩm giấc ngủ trở nên cần thiết. Đồ án môn học Thiết kế Web với đề tài "Thiết kế website kinh doanh đèn ngủ Onirique Shop" được nhóm tác giả thực hiện nhằm xây dựng một trang web thương mại điện tử chuyên cung cấp các dòng sản phẩm đèn ngủ được chọn lọc nguồn cung ổn định, kiểm soát chất lượng, đồng thời tối ưu hóa giao diện nhằm nâng cao trải nghiệm mua sắm trực tuyến của người dùng.

Theo văn bản đồ án, mục tiêu nghiên cứu và xây dựng hệ thống bao gồm ba nhiệm vụ cụ thể:

1. Tạo ra một trang web thân thiện với người dùng, sở hữu giao diện trực quan, dễ thao tác và tương thích trên nhiều thiết bị khác nhau (responsive design).
2. Cung cấp không gian tương tác và trải nghiệm mua sắm trực tuyến thoải mái, thuận lợi cho khách hàng.
3. Xây dựng niềm tin và uy tín thương hiệu thông qua việc giới thiệu các sản phẩm đèn ngủ chất lượng, an toàn và thẩm mỹ.

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

• Đối tượng nghiên cứu: Thiết kế giao diện người dùng (Front-end UI/UX), cấu trúc bố cục và các tính năng tương tác trực tuyến cho website kinh doanh đèn ngủ Onirique Shop.
• Phạm vi không gian và thời gian: Đồ án được thực hiện tại Khoa Công nghệ Thông tin, Trường Đại học Nguyễn Tất Thành trong khuôn khổ môn học Thiết kế Web (lớp học phần 22DMK4A), hoàn thành vào tháng 1 năm 2024.
• Phạm vi kỹ thuật và dữ liệu: Hệ thống tập trung xây dựng ở tầng giao diện phía người dùng (Client-side), chưa triển khai cơ sở dữ liệu động phía máy chủ. Toàn bộ hình ảnh sản phẩm, thông tin mô tả, thông số kỹ thuật và giá bán tham khảo được thu thập từ các nền tảng thương mại điện tử phổ biến gồm Shopee, Lazada và TikTok Shop.

Nhiệm vụ nghiên cứu và phát triển được phân công cụ thể giữa hai thành viên thực hiện đồ án như sau:

Thành viên thực hiện	Mã số sinh viên	Nhiệm vụ thiết kế giao diện và chức năng	Sản phẩm báo cáo
Trần Yến Nhi	2200002325	- Thiết kế Trang chủ (index.html) - Thiết kế Trang giới thiệu (about.html) - Thiết kế Trang chi tiết sản phẩm (detail.html) - Tìm kiếm hình ảnh, thông tin sản phẩm và thông số chi tiết - Xây dựng các tệp CSS và JavaScript tương ứng	Soạn thảo báo cáo đồ án
Nguyễn Thị Thương	2200002013	- Thiết kế Trang tin tức (allnew.html) - Thiết kế Trang thanh toán (checkout.html) - Xây dựng Slider hoạt ảnh, Pop-up đăng nhập và hiệu ứng chi tiết sản phẩm - Xây dựng các tệp CSS và JavaScript tương ứng	Soạn thảo báo cáo đồ án

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

Đồ án tiếp cận nghiên cứu dưới góc độ thiết kế kỹ thuật giao diện web, tổng hợp hệ thống lý thuyết mạng máy tính cơ bản, chuẩn cấu trúc tài liệu siêu văn bản và các công nghệ lập trình front-end tiêu chuẩn:

• Giao thức truyền tải siêu văn bản (HTTP): Giao thức mạng tầng ứng dụng được sử dụng trong World Wide Web (WWW) để truyền tải dữ liệu giữa máy chủ Web (Web server) và trình duyệt Web của người dùng thông qua cổng mạng mặc định 80 (port 80). Giao thức vận hành theo cơ chế gửi yêu cầu (request) từ trình duyệt và nhận dữ liệu phản hồi (response) từ máy chủ để hiển thị trang web.
• Cấu trúc HTML và các thẻ ngữ nghĩa (Semantic Elements): HTML (HyperText Markup Language) đóng vai trò định hình khung xương, phân chia cấu trúc trang web thông qua hệ thống thẻ và thuộc tính (tags và attributes). Đồ án ứng dụng các thẻ ngữ nghĩa của HTML5 nhằm tối ưu hóa bố cục, bao gồm: <header> (vùng đầu trang chứa biểu trưng, điều hướng và biểu ngữ), <nav> (tập hợp liên kết điều hướng trang), <section> (phân đoạn nội dung chuyên biệt trong tài liệu), <article> (khối nội dung độc lập, khép kín), <aside> (khối thông tin phụ trợ đặt bên cạnh) và <footer> (khối chân trang chứa thông tin bản quyền và liên hệ).
• Ngôn ngữ định dạng tầng hiển thị (CSS) và các bộ tiền xử lý (Preprocessors):
  • CSS thuần: Chuẩn định dạng được Hiệp hội Web Quốc tế (W3C) phát triển từ năm 1996, cho phép tùy chỉnh màu sắc, kiểu phông, kích thước, khoảng cách lề, viền và bố cục hiển thị của các phần tử HTML.
  • SCSS/SASS: Bộ tiền xử lý CSS ra đời sau SASS nhưng có cú pháp tương đồng với CSS, hỗ trợ cú pháp kiểu Ruby với các tính năng: quy tắc xếp chồng (Nested Rules), khai báo biến (Variables), kế thừa thuộc tính (Extends), nhúng tệp (Import), vòng lặp (Loops) và mệnh đề điều kiện (IF).
  • LESS CSS: Bộ tiền xử lý CSS giúp quản lý giao diện thông qua việc sử dụng các thành phần hỗ trợ như biến, toán tử, hàm và đặc biệt là Mixins (cho phép nhúng toàn bộ thuộc tính của một lớp CSS vào một lớp khác nhằm tối ưu khả năng tái sử dụng mã nguồn).
• Ngôn ngữ kịch bản và thư viện hỗ trợ tương tác:
  • JavaScript: Ngôn ngữ kịch bản ban đầu do Sun Microsystems và Netscape phối hợp phát triển, vận hành ở cả phía máy khách (Client-side script) và phía máy chủ (Server-side script), có nhiệm vụ xử lý logic tương tác động trên tài liệu HTML.
  • Thư viện jQuery: Thư viện JavaScript mã nguồn mở hoạt động theo phương châm "Write less – Do more", đơn giản hóa thao tác điều khiển cấu trúc DOM (Data Object Model), xử lý sự kiện (Event), hiệu ứng hiển thị (Effect), thao tác biểu mẫu (Form), điều khiển thuộc tính đối tượng (Attributes) và xử lý cuộc gọi bất đồng bộ Ajax.
• Khung giao diện và thư viện biểu tượng:
  • Bootstrap 5: Bộ khung giao diện (Front-end framework) mã nguồn mở hỗ trợ thiết kế đáp ứng (Responsive Design), tích hợp sẵn các thành phần chuẩn hóa như kiểu chữ (typography), biểu mẫu (forms), nút bấm (buttons), bảng biểu (tables), thanh điều hướng (navigation), cửa sổ bật lên (modals) và trình chiếu ảnh (carousels).
  • Font Awesome 5: Thư viện phông chữ ký hiệu đồ họa được Dave Gandy phát triển (phiên bản 5 phát hành ngày 7/12/2017), tích hợp biểu tượng véc-tơ hỗ trợ nhiều định dạng tệp (.otf, .eot, .ttf, .woff, .svg) hoạt động trên hầu hết các trình duyệt hiện đại.
• Khái niệm Siêu dữ liệu (Metadata): Đồ án ghi nhận nguồn gốc thuật ngữ do Jack Myers (nhà sáng lập Metadata Information Partners) khởi xướng từ năm 1969 và đăng ký nhãn hiệu năm 1986. Trong thiết kế web, siêu dữ liệu được thể hiện qua các thẻ <meta> nhằm mô tả nội dung, xác lập từ khóa liên kết phục vụ công cụ tìm kiếm và hỗ trợ hiển thị kết quả truy vấn.
• Phương pháp và công cụ triển khai: Phương pháp nghiên cứu thực nghiệm thiết kế hệ thống giao diện, sử dụng bộ công cụ phát triển gồm trình biên tập mã nguồn Visual Studio Code (kèm tiện ích mở rộng Live Server), Microsoft Visual Studio, nền tảng thiết kế đồ họa Canva (tạo biểu trưng, phông nền), tài liệu tham khảo W3Schools cùng các tiện ích bổ trợ trên trình duyệt Google Chrome gồm ColorPick Eyedropper (trích xuất mã màu) và PageRuler (đo lường kích thước pixel giao diện).

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

Hệ thống website Onirique Shop được tổ chức mã nguồn theo mô hình phân tách tài nguyên Front-end rõ ràng, bao gồm thư mục gốc và thư mục tài nguyên chính TN/:

Onirique_Shop/

Tầng định dạng CSS trong thư mục TN/Css/ được chia tách thành các tệp chuyên biệt nhằm tối ưu hóa việc quản lý kiểu dáng giao diện cho từng màn hình chức năng:

Tên tệp định dạng	Vai trò và phạm vi xử lý giao diện
base.css	Thiết lập các quy tắc định dạng nền tảng, căn lề và thuộc tính dùng chung cho toàn bộ website.
style.css	Tệp định dạng trung tâm quy định kích thước tổng thể, khung hình, màu sắc, kiểu chữ và bố cục các khối chính.
about.css	Định dạng giao diện hoàn chỉnh cho trang Giới thiệu (about.html), xử lý kiểu dáng các lớp trình bày câu chuyện thương hiệu.
shop.css	Định dạng trang hiển thị danh mục sản phẩm chính của cửa hàng.
detail.css	Thiết lập bố cục, thuộc tính hiển thị hình ảnh phóng to, thông số kỹ thuật và khu vực đánh giá cho trang Chi tiết sản phẩm.
allnews.css	Định dạng trang tổng hợp danh sách các bài viết tin tức liên quan đến sức khỏe giấc ngủ.
news.css	Định dạng chi tiết nội dung cho các bài viết tin tức đơn lẻ.
cart.css	Định dạng giao diện bảng giỏ hàng, chứa thuật toán hiển thị tính toán tổng tiền sau khi trừ chiết khấu giảm giá.
contact.css	Định dạng trang hiển thị biểu mẫu thông tin liên hệ, bản đồ địa chỉ và hộp thư góp ý.
login.css	Thiết lập kiểu dáng cho cửa sổ pop-up đăng nhập và giao diện đăng ký tài khoản khách hàng thân thiết.
reponsive.css	Thiết lập các điểm ngắt truy vấn đa phương tiện (media queries), xử lý định dạng biểu mẫu nhập dữ liệu (email, tên, địa chỉ).
elegant-icon	Tệp stylesheet hỗ trợ hệ thống biểu tượng giao diện đồ họa.

Quy trình xây dựng giao diện trang chủ (index.html) được nhóm tác giả triển khai tuần tự theo 5 bước từ trên xuống dưới, từ ngoài vào trong:

1. Bước 1: Xây dựng khối Đầu trang (Header):
   • Tích hợp biểu trưng (Logo) được thiết kế từ Canva, chèn vào mã HTML theo đường dẫn img/ORE.png với độ rộng thiết lập cố định ở mức width: 6%.
   • Thiết lập thanh điều hướng (<nav>) bằng cấu trúc danh sách liên kết (<a>, <li>), tích hợp menu đa cấp (Subnav).
   • Thiết lập các nút chức năng nhanh gồm nút giỏ hàng (button icon buy) và nút tài khoản cá nhân (button icon user) dẫn thẳng đến trang giỏ hàng hoặc kích hoạt cửa sổ đăng nhập.
2. Bước 2: Xây dựng biểu ngữ và thanh trượt hoạt ảnh (Slider):
   • Thiết lập khung chứa hoạt ảnh có độ rộng toàn màn hình width: 100% và chiều cao cố định height: 1550px.
   • Ứng dụng thư viện slick-slider tạo thanh trượt với 4 điểm chuyển trang (dots).
   • Cấu hình tham số hiển thị: slidesToShow: 1 và slidesToScroll: 1 (chỉ hiển thị một ảnh trong mỗi khung trượt), kích hoạt chế độ tự động chạy (autoplay) với chu kỳ thời gian trượt ảnh là 3 giây (3s).
   • Định dạng ảnh biểu ngữ đạt chiều cao chữ font-height: 500, kéo giãn kích thước 100% kết hợp thuộc tính object-fit: cover nhằm chống biến dạng tỷ lệ khung hình.
   • Định vị đoạn văn bản quảng cáo .slider__text bằng thuộc tính position: relative giúp khối chữ nổi trên bề mặt hình ảnh và tự động chuyển đổi tương ứng khi thanh trượt chuyển ảnh mới.
3. Bước 3: Xây dựng khối Thân trang (Section):
   • Bố trí danh mục các sản phẩm nổi bật, sản phẩm ưu đãi và nhóm sản phẩm giảm giá 50%.
   • Thiết lập hiệu ứng chuyển đổi trạng thái (hover): khi người dùng rê chuột vào vùng thẻ sản phẩm, nút "Thêm vào giỏ hàng" tự động chuyển sang màu đỏ.
   • Nhúng liên kết chuyển hướng từ thẻ sản phẩm sang trang chi tiết (detail.html) để theo dõi thông số, đánh giá, cùng nút "Xem tất cả" để mở rộng toàn bộ danh mục hàng hóa.
4. Bước 4: Xây dựng khối Chân trang (Footer):
   • Phân chia bố cục chân trang bằng lưới Bootstrap với lớp col-lg-8, khối biểu trưng footer__logo và hệ thống liên kết điều hướng footer__nav.
   • Tạo danh sách các cột thông tin hỗ trợ khách hàng và điều khoản liên hệ (footer-col).
   • Tích hợp khối liên kết mạng xã hội (footer-colsocial-links) dẫn đến 4 nền tảng: Facebook, Twitter, Instagram và LinkedIn.
   • Nhúng thuật toán xử lý nút cuộn nhanh lên đầu trang (#scrollToTopButton) thông qua mã kịch bản trong tệp main.js, gắn thuộc tính vị trí cố định tương đối để tự động đưa trang hiển thị về điểm xuất phát khi nhấp chuột.
5. Bước 5: Tích hợp thư viện kịch bản và hoàn thiện liên kết:
   • Nhúng 9 tệp kịch bản JavaScript (bao gồm mã tự viết trong main.js, thư viện jQuery và Bootstrap) đặt ngay phía trên thẻ đóng </body> nhằm bảo đảm tài liệu HTML và CSS được tải hoàn tất trước khi kịch bản vận hành.

Hệ thống phân chia tổng thể thành 10 trang và màn hình chức năng độc lập:

• Trang chủ (index.html): Hiển thị biểu ngữ, khẩu hiệu thương hiệu, danh mục sản phẩm bán chạy, chương trình khuyến mãi theo thời gian thực và chính sách hậu mãi.
• Trang giới thiệu (about.html): Chứa thông điệp chào mừng và câu chuyện định hướng phát triển cửa hàng.
• Trang danh mục sản phẩm (shop.css): Trình bày toàn bộ các mẫu đèn ngủ đang kinh doanh.
• Trang chi tiết sản phẩm (detail.html): Cung cấp thông số kỹ thuật, hình ảnh góc cạnh, mô tả chất liệu và mục đánh giá phản hồi.
• Trang tin tức (allnew.html): Tổng hợp các bài viết khoa học về tầm quan trọng của giấc ngủ và tác động sinh học của quang phổ ánh sáng đèn ngủ.
• Trang liên hệ (contact.css): Hiển thị thông tin địa chỉ, số điện thoại, phương thức kết nối và biểu mẫu hòm thư góp ý.
• Màn hình đăng nhập: Cửa sổ pop-up cho phép nhập thông tin tài khoản thành viên để hưởng chính sách khách hàng thân thiết.
• Trang đăng ký: Biểu mẫu khởi tạo tài khoản hội viên mới.
• Trang giỏ hàng (cart.css): Quản lý danh mục hàng hóa đã chọn, tùy chỉnh số lượng, hiển thị mức giảm giá và tổng kinh phí phải thanh toán.
• Trang thanh toán (checkout.html): Tiếp nhận địa chỉ nhận hàng và hỗ trợ người dùng lựa chọn phương thức thanh toán.

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

Báo cáo đồ án được phân chia thành 3 chương nội dung chính với cấu trúc cụ thể:

Chương 1: Tổng quan đề tài

Chương mở đầu tập trung khái quát bối cảnh thương mại điện tử, nhu cầu cải thiện chất lượng giấc ngủ và định vị thương hiệu Onirique Shop. Tác giả trình bày chi tiết cơ chế hoạt động của giao thức mạng HTTP (port 80), cấu trúc phân đoạn trang web căn bản theo các thẻ ngữ nghĩa của HTML (<header>, <nav>, <section>, <article>, <aside>, <footer>). Tiếp đó, chương phân tích sâu lý do chọn đề tài và xác lập 3 mục tiêu trọng tâm của dự án.

Phần trọng tâm của chương 1 dành cho việc trình bày cơ sở lý thuyết của các công nghệ phát triển web: ngôn ngữ đánh dấu HTML; ngôn ngữ kịch bản JavaScript (phân biệt kịch bản client-side và server-side); ngôn ngữ định kiểu CSS cùng hai bộ tiền xử lý SCSS (với các cấu trúc vòng lặp, kế thừa, biến) và LESS CSS (ứng dụng Mixins); khung giao diện Bootstrap 5; thư viện jQuery (phân tích 6 module chức năng: Ajax, Event, Attributes, DOM, Effect, Form); thư viện đồ họa Font Awesome 5; khái niệm và lịch sử phát triển của Metadata (Jack Myers năm 1969/1986). Cuối chương giới thiệu danh mục các công cụ hỗ trợ gồm Visual Studio Code, Live Server, Canva, W3Schools cùng hai tiện ích mở rộng ColorPick Eyedropper và PageRuler.

Chương 2: Thiết kế và xây dựng trang web

Nội dung chương 2 mô tả chi tiết toàn bộ kiến trúc vật lý và các bước hiện thực hóa trang web. Tác giả phác thảo sơ đồ liên kết giữa các trang và cấu trúc cây thư mục dự án với thư mục gốc và thư mục con TN/ (chứa các nhánh con den/, Css/, Fonts/, Img/, JS/). Nguồn dữ liệu hình ảnh, giá bán và thông số sản phẩm được minh chứng trích xuất từ các sàn thương mại điện tử Shopee, Lazada và TikTok Shop.

Tiếp theo, chương đi sâu mô tả chức năng của từng tệp stylesheet trong thư mục Css/ (từ base.css, style.css, cart.css đến reponsive.css), các thành phần giao diện của khối Header (biểu trưng Canva với width: 6%, thanh điều hướng, nút giỏ hàng và tài khoản), khối Section và thanh trượt hoạt ảnh (cấu hình thư viện slick-slider với thời gian trượt tự động 3 giây, slidesToShow: 1, chiều cao height: 1550px, ảnh banner thiết lập object-fit: cover, khối văn bản định vị position: relative), khối Footer (lưới Bootstrap col-lg-8, nút #scrollToTopButton, hệ thống cột liên kết mạng xã hội). Cuối chương trình bày cụ thể quy trình 5 bước xây dựng giao diện trang chủ và hiện thực hóa các trang chức năng con.

Chương 3: Kết luận và hướng phát triển

Chương kết luận đánh giá mức độ hoàn thành nhiệm vụ của đồ án Onirique Shop đối với các yêu cầu giao diện của một trang web bán hàng cơ bản. Tác giả tổng kết các kết quả đạt được về mặt giao diện, mức độ thuần thục trong việc phối hợp công nghệ (HTML, CSS, JavaScript, Bootstrap 5) và các kỹ năng phát triển phần mềm (ghi chú mã nguồn, phân tích cấu trúc trang web).

Bên cạnh đó, chương thẳng thắn thừa nhận các hạn chế kỹ thuật còn tồn đọng như thiếu hụt cơ sở dữ liệu khách hàng, các liên kết mạng xã hội còn để trống, dữ liệu sản phẩm chưa sát thực tế và phương thức thanh toán hạn chế. Từ đó, tác giả vạch ra lộ trình 4 hướng phát triển hệ thống tiếp theo gồm: nâng cấp bộ lọc tìm kiếm thông minh, đa dạng hóa danh mục sản phẩm đèn ngủ, tích hợp cơ chế tích điểm phân hạng hội viên, và xây dựng cơ sở dữ liệu quản trị tập trung đi kèm giải pháp bảo mật thông tin.

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

Về mặt kết quả kỹ thuật, đồ án đã hoàn thành việc xây dựng một giao diện website thương mại điện tử hoàn chỉnh ở tầng Front-end đáp ứng các chức năng mua sắm cơ bản:

• Xây dựng thành công hệ thống 10 trang và màn hình chức năng bao gồm: Trang chủ (index.html), Giới thiệu (about.html), Chi tiết sản phẩm (detail.html), Tin tức (allnew.html), Thanh toán (checkout.html), cùng các phân hệ Giỏ hàng, Đăng nhập, Đăng ký và Liên hệ.
• Thiết lập thành công hoạt ảnh trình chiếu tự động (Auto slider) sử dụng thư viện slick-slider với chu kỳ chuyển đổi 3 giây, hỗ trợ thanh điều hướng 4 chấm (dots) và tối ưu hóa hiển thị ảnh toàn màn hình thông qua thuộc tính object-fit: cover.
• Tích hợp thành công hiệu ứng tương tác trực quan: nút "Thêm vào giỏ hàng" tự động đổi màu đỏ khi người dùng di chuột qua (hover effect); tính năng cuộn trang nhanh về đầu trang được xử lý thông qua định danh #scrollToTopButton trong tệp main.js.
• Bố cục giao diện đáp ứng (Responsive Design) được kiểm soát qua tệp reponsive.css và hệ thống lưới của Bootstrap 5, hỗ trợ co giãn linh hoạt trên các thiết bị.

Về mặt đóng góp học thuật và rèn luyện kỹ năng cá nhân:

• Tác giả hệ thống hóa quy trình thiết kế giao diện từ khâu phân tích bố cục, dựng khung ngữ nghĩa HTML5 đến việc phân chia các tệp CSS độc lập cho từng mô-đun chức năng, giúp mã nguồn mạch lạc và dễ bảo trì.
• Nâng cao kỹ năng lập trình giao diện thực tế thông qua việc ứng dụng đồng thời các tiền xử lý CSS (SCSS, LESS) và kết hợp các thư viện bổ trợ (jQuery, Bootstrap 5, Font Awesome 5).
• Rèn luyện kỹ năng tổ chức mã nguồn thông qua việc chú thích mã (Comment Code) chi tiết và sử dụng hiệu quả các công cụ đo đạc thiết kế (Canva, PageRuler, ColorPick Eyedropper).

Ghi nhận đặc điểm văn bản: Trong phần đánh giá kết quả tại Chương 3, báo cáo đồ án có xuất hiện một nội dung nhận xét chưa nhất quán với mục tiêu đề tài: "Người dùng có thể truy cập website để trải nghiệm nghe nhạc một cách thoải mái, giải trí lành mạnh". Đây là chi tiết xuất hiện trực tiếp trong văn bản gốc của tác giả, phản ánh khả năng có sự nhầm lẫn câu chữ trong quá trình biên soạn báo cáo đồ án từ các tài liệu tham khảo khác.

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

Dựa trên nội dung tự đánh giá trong báo cáo đồ án, hệ thống còn tồn tại một số hạn chế cụ thể:

• Hệ thống dữ liệu tĩnh: Trang web hoàn toàn chưa được kết nối với hệ thống quản trị cơ sở dữ liệu (Database) phía máy chủ; toàn bộ dữ liệu người dùng, thông tin giỏ hàng và danh mục hàng hóa đều hoạt động ở dạng mô phỏng tĩnh, chưa có khả năng lưu trữ hay đồng bộ thực tế.
• Dữ liệu sản phẩm và giá cả: Dữ liệu thông tin và hình ảnh sản phẩm mới dừng lại ở mức thu thập tham khảo từ các sàn thương mại điện tử bên ngoài (Shopee, Lazada, TikTok Shop), việc phân tích đặc tính kỹ thuật sản phẩm chưa sâu và mức giá hiển thị chưa phản ánh sát thị trường thực tế.
• Tính năng thanh toán và kết nối bên ngoài: Các phương thức thanh toán trực tuyến chưa được tích hợp cổng thanh toán thực tế mà chỉ dừng lại ở giao diện điền biểu mẫu giao hàng; hệ thống liên kết ngoại vi dẫn đến các tài khoản mạng xã hội (Facebook, Twitter, Instagram, LinkedIn) tại chân trang vẫn còn để trống.

Báo cáo đề xuất 4 nhóm giải pháp nhằm phát triển và hoàn thiện hệ thống trong tương lai:

1. Nâng cấp khả năng tìm kiếm và đề xuất: Tích hợp công cụ tìm kiếm nhanh đa tiêu chí, cho phép khách hàng lọc và sắp xếp sản phẩm linh hoạt theo mức giá, màu sắc, kích thước và chủng loại; đồng thời phát triển thuật toán gợi ý sản phẩm tự động dựa trên lịch sử mua sắm và sở thích cá nhân.
2. Đa dạng hóa danh mục sản phẩm đèn ngủ: Mở rộng danh mục sản phẩm ra nhiều phân khúc thiết kế mới như đèn ngủ treo tường, đèn ngủ dạng đứng và đèn ngủ trần; thường xuyên cập nhật mẫu mã theo xu hướng thị trường và thị hiếu thẩm mỹ của người tiêu dùng.
3. Phát triển hệ thống hội viên và tích điểm: Xây dựng chức năng tích lũy điểm thưởng dựa trên giá trị đơn hàng thực tế để khuyến khích tỷ lệ khách hàng quay lại mua sắm; thiết lập cơ chế phân hạng hội viên (thành viên thân thiết) đi kèm các chính sách ưu đãi và quyền lợi tương ứng.
4. Xây dựng cơ sở dữ liệu và hoàn thiện bảo mật: Triển khai hạ tầng cơ sở dữ liệu tập trung để quản lý thông tin khách hàng, đơn hàng và danh mục sản phẩm; tích hợp tính năng đăng nhập nhanh qua liên kết tài khoản mạng xã hội từ bên thứ ba; thiết lập các quy định và giải pháp kỹ thuật bảo mật nhằm bảo vệ an toàn thông tin dữ liệu cá nhân của người dùng.

Giá trị tham khảo

Tài liệu đồ án Onirique Shop mang lại giá trị tham khảo thiết thực cho các đối tượng và phạm vi học tập cụ thể:

• Đối tượng tham khảo: Sinh viên chuyên ngành Công nghệ Thông tin, Hệ thống Thông tin Quản lý hoặc Thương mại Điện tử đang tiếp cận học phần Thiết kế Web căn bản hoặc làm đồ án môn học liên quan đến xây dựng giao diện Front-end cho website bán hàng.
• Nội dung cấu trúc thư mục: Cung cấp mô hình phân chia thư mục tài nguyên dự án trực quan (phân tách rõ ràng giữa Css, JS, Fonts, Img và dữ liệu hình ảnh sản phẩm den), thích hợp làm tài liệu mẫu cho người mới bắt đầu học cách tổ chức mã nguồn web.
• Nội dung tổ chức tệp CSS: Cách thức phân chia mã kiểu dáng thành các tệp CSS độc lập gắn liền với từng màn hình (about.css, cart.css, detail.css, news.css, reponsive.css) là ví dụ thực tế giúp người học tránh việc dồn toàn bộ mã định dạng vào một tệp duy nhất gây khó khăn khi gỡ lỗi.
• Kỹ thuật tích hợp thư viện: Tài liệu cung cấp cấu hình thực tế của thư viện slick-slider (cách thiết lập các thuộc tính slidesToShow, slidesToScroll, autoplay, kết hợp CSS object-fit: cover) và thuật toán viết sự kiện nút cuộn trang #scrollToTopButton trong main.js.
• Mô hình làm việc nhóm: Bảng phân công nhiệm vụ chi tiết theo từng trang giao diện và khối chức năng cụ thể giữa hai thành viên trong nhóm 2 người là một gợi ý thực tế về phương pháp phân chia khối lượng công việc cho sinh viên thực hiện đồ án môn học.

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

1. Kích thước và thông số cấu hình của thanh trượt hoạt ảnh (Slider) trên trang chủ Onirique Shop được thiết lập như thế nào?
Thanh trượt hoạt ảnh trên trang chủ được thiết lập độ rộng toàn màn hình width: 100% và chiều cao cố định height: 1550px. Slider sử dụng thư viện slick-slider với 4 thanh chuyển trang dạng dots, cấu hình hiển thị và trượt đồng thời 1 màn ảnh (slidesToShow: 1, slidesToScroll: 1), bật chế độ tự động chuyển ảnh (autoplay) với chu kỳ thời gian trượt là 3 giây. Hình ảnh biểu ngữ được định dạng chiều cao chữ font-height: 500 và áp dụng thuộc tính object-fit: cover để không bị méo ảnh; đoạn văn bản .slider__text được gắn thuộc tính position: relative để nổi trên bề mặt hình ảnh.

2. Dự án phân chia các tệp định dạng giao diện trong thư mục TN/Css/ như thế nào?
Dự án phân chia thành 12 tệp CSS chuyên biệt đảm nhiệm từng phần giao diện khác nhau: base.css (thuộc tính nền tảng), style.css (định dạng trung tâm cho kích thước, màu sắc, khung hình, phông chữ toàn trang), about.css (trang giới thiệu), shop.css (trang sản phẩm chính), detail.css (trang chi tiết sản phẩm), allnews.css (trang tổng hợp tin tức), news.css (trang chi tiết bài viết), cart.css (trang giỏ hàng và thanh toán, chứa thuật toán tính tổng tiền sau giảm giá), contact.css (trang biểu mẫu liên hệ), login.css (giao diện đăng nhập), reponsive.css (đáp ứng đa thiết bị và định dạng biểu mẫu nhập liệu) và elegant-icon (hệ thống biểu tượng).

3. Chức năng cuộn nhanh lên đầu trang (Back to top) được hiện thực hóa bằng kỹ thuật gì?
Chức năng Back to top được tích hợp ở khu vực chân trang (Footer), sử dụng mã kịch bản JavaScript gắn vào định danh khóa #scrollToTopButton trong tệp main.js. Khi người dùng nhấp chuột vào biểu tượng nút này, trình duyệt sẽ tự động kích hoạt truy vấn để điều hướng màn hình hiển thị trực tiếp quay trở lại vị trí đầu trang.

4. Dữ liệu hình ảnh và thông tin sản phẩm của website Onirique Shop có nguồn gốc từ đâu?
Toàn bộ hình ảnh sản phẩm đèn ngủ, thông tin mô tả, giá bán và thông số kỹ thuật được nhóm tác giả thu thập tham khảo thực tế từ các gian hàng kinh doanh trên mạng tìm kiếm Google và các ứng dụng sàn thương mại điện tử trực tuyến bao gồm Shopee, Lazada và TikTok Shop. Riêng hình ảnh biểu trưng của website (img/ORE.png) được tự thiết kế thông qua công cụ Canva.

5. Báo cáo đồ án ghi nhận những công cụ và tiện ích mở rộng cụ thể nào hỗ trợ quá trình lập trình?
Quá trình xây dựng đồ án sử dụng các công cụ phần mềm: trình soạn thảo Visual Studio Code (kèm tiện ích máy chủ ảo Live Server để chạy thử dự án), Microsoft Visual Studio, công cụ thiết kế Canva (tạo biểu trưng, icon, phông nền), trang tra cứu W3Schools và hai tiện ích mở rộng trên trình duyệt Google Chrome gồm ColorPick Eyedropper (trích xuất mã màu giao diện) và PageRuler (đo lường kích thước pixel của các phần tử).

Kết luận

Đồ án môn học "Thiết kế website kinh doanh đèn ngủ Onirique Shop" của nhóm sinh viên Trường Đại học Nguyễn Tất Thành đã hoàn thành việc xây dựng khung giao diện thương mại điện tử hoàn chỉnh ở tầng Front-end với 10 màn hình chức năng chuyên biệt. Đề tài vận dụng hiệu quả các công nghệ và thư viện web nền tảng như HTML5, CSS3, JavaScript, jQuery, Bootstrap 5 và Slick Slider để tạo nên một giao diện trực quan, có tính tương tác và tương thích trên nhiều thiết bị. Mặc dù hệ thống còn tồn tại những hạn chế do mang tính chất của một website tĩnh, chưa kết nối cơ sở dữ liệu động và chưa tích hợp cổng thanh toán thực tế, đồ án vẫn cung cấp một giải pháp thiết kế bố cục mạch lạc và là tài liệu tham khảo bổ ích cho sinh viên tiếp cận bộ môn Thiết kế Web căn bản.

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

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài Việc mua sắm trực tuyến không chỉ là một xu hướng mà còn là sự thuận tiện tối đa cho người tiêu dùng trong thời đại công nghệ số. Đèn ngủ, không chỉ là vật trang trí, mà còn là điểm nhấn quan trọng tạo nên không gian sống ấm áp và thoải mái. Oriniqueshop là một trang web chuyên cung cấp các loại đèn ngủ khác nhau được chọn lựa từ những nguồn cung ổn định và kiểm tra chất lượng nghiêm ngặt, đảm bảo rằng bạn sẽ nhận được những sản phẩm và trải nghiệm tốt nhất. Hình trang chủ Index Giao diện trang web được thiết kế để đơn giản, dễ sử dụng và tối ưu hóa cho mọi thiết bị, mang đến trải nghiệm mua sắm trực tuyến linh hoạt và thuận lợi.

Website được chia thành các trang web gồm có: a. Trang chủ: Hiển thị các slogan cửa hàng, sản phẩm nổi bật, các chương trình khuyến mãi lớn, chính sách hậu đãi. Sản phẩm: Gồm trang thể hiện tất cả sản phẩm có trong trang web và trang chi tiết sản phẩm cho từng sản phẩm của cửa hàng.Tin tức: Thể hiện các bài báo liên quan đến việc quan trọng của giấc ngủ, ánh sáng đèn ngủ ảnh hưởng đến tình trạng giấc ngủ …v. Liên hệ: Thể hiện địa chỉ, các phương thức liên hệ đến cửa hàng khi khách hàng có nhu cầu, ngoài ra còn có hộp thư góp ý đến cửa hàng.

Giới thiệu: Câu chào từ cửa hàng thể hiện sự tâm huyết khi lập nên website và cửa hàng để mang lại trải nghiệm tốt nhất cho khách hàng f. Đăng nhập: Cho phép người dùng đăng nhập để nhận ưu đãi khách hàng thân thiết, hội viên, lưu thông tin giao hàng thuận tiện cho việc đặt hàng. Đăng ký: Cho phép người dùng đăng ký thành khách hàng thân thiết, hội viên để hưởng ưu đãi trong những lần mua hàng tiếp theo. Giỏ hàng: Thể hiện danh mục hàng hóa khách hàng đã chọn, giảm giá trên từng sản phẩm, chọn số lượng sản phẩm muốn mua, số tiền phải chi trả và tiến hành thanh toán.

Thanh toán: Cho phép người dùng điền thông tin giao hàng và chọn hình thức thanh toán phù hợp.1 Giao thức HTTP Http (HyperText Transfer Protocol) là giao thức truyền tải siêu văn bản được sử dụng trong www dùng để truyền tải dữ liệu giữa Web server đến các trình duyệt Web và ngược lại. Giao thức này sử dụng cổng 80 (port 80) là chủ yếu. Hay bạn có thể hiểu khi bạn gõ vào 1 địa chỉ vào trình duyệt Web, lúc này trình duyệt Web sẽ gửi 1 yêu cầu qua giao thức Http đến Web server. Web server và sẽ nhận yêu cầu này và trả lại kết quả cho trình duyệt Web.2 Giao thức HTTP 1.2 Thành phần của Website căn bản: Bố cục và giao diện  <header>{- Xác định tiêu đề cho một tài liệu hoặc một phần o <header> được phân phối để sắp xếp các hình ảnh, văn bản, điều hướng, hình ảnh phổ biến, vv ở đầu trang Website.

 Logo  Biểu ngữ  Văn bản giới thiệu  <nav>{- Xác định một tập hợp các liên kết điều hướng  <section>{- Xác định một phần trong tài liệu  <article>{- Xác định nội dung độc lập, khép kín  <aside>{- Xác định nội dung ngoài nội dung (như thanh bên)  <footer>{- Xác định chân trang cho một tài liệu hoặc một phần 3 1.2 Lý do chọn đề tài Với mong muốn mang đến cho khách hàng trải nghiệm mua sắm trực tuyến độc đáo và đầy ấn tượng. Đèn ngủ không chỉ là vật trang trí mà còn đóng vai trò quan trọng trong việc tạo nên môi trường sống thoải mái và ấm áp.