Tiểu luận về đồ án cơ sở cửa hàng trực tuyến Double D

Tiểu luận đồ án cơ sở cửa hàng trực tuyến Double D trình bày chiến lược phát triển, thiết kế và quản lý hiệu quả trong kinh doanh trực tuyến.

• Tác giả: Nguyễn Quốc Duy
• 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: Cửa Hàng Trực Tuyến Double D
• Loại tài liệu: Đồ án cơ sở
• Năm xuất bản: 2021 - 2024
• Địa điểm: Tp HCM

Mục lục chi tiết

• LỜI MỞ ĐẦU
• LỜI CẢM ƠN
• PHIẾU CHẤM THI TIỂU LUẬN/ĐỒ ÁN
• 1. CHƯƠNG 1: TỔNG QUAN
• 2. CHƯƠNG 2: PHÂN TÍCH
• 3. CHƯƠNG 3: THIẾT KẾ
• 3.1. Thiết kế trang index
• 3.2. Thiết kế trang single
• 3.3. Thiết kế trang checkout
• 3.4. Thiết kế trang payment
• 3.5. Tạo Move Top Button
• 3.6. Thiết kế trang about
• 3.7. Thiết kế trang contact
• 4. CHƯƠNG 4: KẾT LUẬN
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng quan

Cửa hàng trực tuyến Double D là một nền tảng thương mại điện tử chuyên cung cấp các mặt hàng linh kiện lắp ráp máy tính. Mục tiêu chính của cửa hàng là mang đến cho khách hàng những sản phẩm chất lượng với giá cả hợp lý. Thương mại điện tử đã trở thành một phần không thể thiếu trong kinh doanh hiện đại, giúp doanh nghiệp tiếp cận khách hàng một cách nhanh chóng và hiệu quả. Để xây dựng một cửa hàng trực tuyến thành công, cần phải có một thiết kế website hợp lý, dễ sử dụng và thân thiện với người dùng. Việc này không chỉ giúp tăng cường trải nghiệm của khách hàng mà còn nâng cao khả năng cạnh tranh trên thị trường. Theo đó, việc phân tích thị trường và nhu cầu của người tiêu dùng là rất quan trọng để xác định các sản phẩm phù hợp và chiến lược marketing hiệu quả.

1.1. Giới thiệu về thương mại điện tử

Thương mại điện tử (TMĐT) đã mở ra nhiều cơ hội cho các doanh nghiệp, cho phép họ tiếp cận với một lượng khách hàng lớn mà không bị giới hạn bởi địa lý. Kinh doanh online không chỉ đơn thuần là việc bán hàng qua mạng mà còn bao gồm các hoạt động như quảng bá sản phẩm, chăm sóc khách hàng và quản lý đơn hàng. Để thành công trong lĩnh vực này, các doanh nghiệp cần phải có một chiến lược bán hàng rõ ràng, bao gồm việc tối ưu hóa SEO để tăng cường khả năng hiển thị trên các công cụ tìm kiếm. Việc này sẽ giúp thu hút nhiều khách hàng hơn và tăng doanh thu cho cửa hàng.

II. Phân tích thiết kế

Thiết kế của cửa hàng trực tuyến Double D bao gồm nhiều thành phần quan trọng, từ giao diện người dùng đến hệ thống thanh toán. Giao diện người dùng cần phải thân thiện và dễ sử dụng, giúp khách hàng dễ dàng tìm kiếm và đặt hàng. Các trang chính của website bao gồm: trang chủ, chi tiết sản phẩm, giỏ hàng và thanh toán. Mỗi trang cần được thiết kế sao cho thông tin được trình bày rõ ràng và dễ hiểu. Hệ thống thanh toán cũng cần được tối ưu hóa để đảm bảo tính bảo mật và thuận tiện cho người dùng. Việc sử dụng các công nghệ như HTML, CSS và JavaScript là rất cần thiết để tạo ra một website hiện đại và đáp ứng nhu cầu của người tiêu dùng.

2.1. Sơ đồ tổ chức lưu trữ

Sơ đồ tổ chức lưu trữ của website Double D bao gồm các thư mục chính như: css, js, images và các trang web hiển thị thông tin sản phẩm. Mỗi thư mục có chức năng riêng, giúp quản lý và tổ chức dữ liệu một cách hiệu quả. Thư mục css chứa các file định dạng, thư mục js chứa các file JavaScript hỗ trợ xử lý sự kiện, và thư mục images chứa hình ảnh sản phẩm. Việc tổ chức này không chỉ giúp dễ dàng trong việc bảo trì mà còn nâng cao hiệu suất của website.

III. Thiết kế website

Quá trình thiết kế website cho cửa hàng trực tuyến Double D bao gồm nhiều bước quan trọng. Đầu tiên, cần khai báo các thư viện như Bootstrap để tạo ra một giao diện responsive. Sau đó, các thành phần như header, footer, và main container cần được thiết kế một cách hợp lý. Việc sử dụng các đoạn mã HTML và CSS để tạo ra các phần tử giao diện là rất quan trọng. Bên cạnh đó, việc sử dụng JavaScript để xử lý các sự kiện trên website cũng giúp tăng cường trải nghiệm người dùng. Mỗi trang cần được thiết kế sao cho dễ dàng điều hướng và cung cấp thông tin cần thiết cho khách hàng.

3.1. Thiết kế trang chủ

Trang chủ của website Double D là nơi khách hàng đầu tiên tiếp xúc với cửa hàng. Do đó, cần phải thiết kế sao cho thu hút và dễ dàng sử dụng. Các danh mục sản phẩm cần được hiển thị rõ ràng, cùng với các thông tin nổi bật về sản phẩm. Việc sử dụng hình ảnh chất lượng cao và mô tả sản phẩm chi tiết sẽ giúp khách hàng có cái nhìn tổng quan về các sản phẩm mà cửa hàng cung cấp. Ngoài ra, việc tích hợp các tính năng như tìm kiếm và lọc sản phẩm cũng rất cần thiết để nâng cao trải nghiệm người dùng.

IV. Kết luận

Đồ án cơ sở cửa hàng trực tuyến Double D đã thể hiện rõ những bước cần thiết để xây dựng một website thương mại điện tử hiệu quả. Từ việc phân tích thị trường, thiết kế giao diện đến việc tối ưu hóa SEO, tất cả đều đóng vai trò quan trọng trong việc thu hút khách hàng và tăng doanh thu. Việc áp dụng các công nghệ hiện đại như HTML, CSS và JavaScript không chỉ giúp tạo ra một website đẹp mắt mà còn nâng cao hiệu suất hoạt động. Cửa hàng trực tuyến Double D không chỉ là một nền tảng bán hàng mà còn là một kênh giao tiếp hiệu quả giữa doanh nghiệp và khách hàng.

4.1. Giá trị thực tiễn

Đồ án này không chỉ mang lại kiến thức về thiết kế website mà còn giúp sinh viên hiểu rõ hơn về quy trình kinh doanh trong môi trường trực tuyến. Việc áp dụng lý thuyết vào thực tiễn sẽ giúp sinh viên có cái nhìn sâu sắc hơn về ngành thương mại điện tử, từ đó chuẩn bị tốt hơn cho sự nghiệp trong tương lai. Cửa hàng trực tuyến Double D là một ví dụ điển hình cho việc áp dụng công nghệ thông tin vào kinh doanh, mở ra nhiều cơ hội cho các doanh nghiệp nhỏ và vừa trong việc phát triển và mở rộng thị trường.

Nội dung chính

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

Thương mại điện tử (TMĐT) đã và đang trở thành một phương thức giao thương phổ biến trên phạm vi toàn cầu cũng như tại Việt Nam. Sự phát triển của môi trường Internet mang lại cơ hội mở rộng kênh kinh doanh, tiếp cận thị trường nhanh chóng và tối ưu hóa các hoạt động thương mại từ khâu giới thiệu sản phẩm đến bán hàng và dịch vụ sau bán hàng. Tuy nhiên, đối với các doanh nghiệp, việc xây dựng và duy trì một hệ thống TMĐT hoàn chỉnh đòi hỏi chi phí đầu tư lớn, thời gian triển khai kéo dài và quy trình quản trị, bảo trì phức tạp.

Trong bối cảnh đó, đề tài "Đồ án cơ sở cửa hàng trực tuyến Double D" được sinh viên Nguyễn Quốc Duy (MSSV: 2100007620), lớp khóa 2021 – 2024 thuộc Khoa Công nghệ Thông tin, Trường Đại học Nguyễn Tất Thành thực hiện dưới sự hướng dẫn của giảng viên Bùi Duy Tân. Đồ án tập trung vào việc nghiên cứu, phân tích và hiện thực hóa giao diện website thương mại điện tử chuyên về lĩnh vực bán lẻ linh kiện máy tính.

Nhiệm vụ và mục tiêu chính của đề tài bao gồm:

1. Nghiên cứu tổng quan về phương thức kinh doanh thương mại điện tử và các công nghệ nền tảng trong xây dựng giao diện web (front-end).
2. Phân tích cấu trúc tổ chức dữ liệu tệp tin, sơ đồ liên kết trang và phân bổ bố cục giao diện (Grid Layout) cho toàn bộ hệ thống.
3. Thiết kế và hiện thực hóa các trang chức năng chính của website Double D (bao gồm trang chủ, chi tiết sản phẩm, giỏ hàng, thanh toán, giới thiệu, liên hệ) bằng HTML, CSS, JavaScript, framework Bootstrap và thư viện jQuery.

Đối tượng nghiên cứu của đề tài là hệ thống website bán hàng trực tuyến thương hiệu Double D – đơn vị kinh doanh các mặt hàng linh kiện lắp ráp máy tính. Phạm vi nghiên cứu giới hạn ở cấp độ đồ án cơ sở môn Thiết kế Web, tập trung vào việc xây dựng giao diện người dùng, tổ chức layout và xử lý các tương tác client-side trên trình duyệt web.

---

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

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

Đồ án tiếp cận kiến trúc công nghệ web tiêu chuẩn theo mô hình "3 lớp bánh" (three-layer cake) phối hợp với các framework và công cụ bổ trợ:

• HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bản, đóng vai trò tạo dựng cấu trúc tài liệu, định hình các phần tử cơ bản của trang web như đề mục (headings), liên kết (links), các đoạn văn bản (paragraphs) và phân chia các khối nội dung thông qua hệ thống thẻ (tags).
• CSS (Cascading Style Sheets): Ngôn ngữ định dạng phong cách, chịu trách nhiệm điều khiển toàn bộ bố cục, màu sắc, font chữ và giao diện hiển thị trực quan của các thành phần HTML trên trình duyệt.
• JavaScript: Ngôn ngữ lập trình kịch bản phía máy khách (Client-side Script), được nhúng vào HTML nhằm tạo các hiệu ứng tương tác động, phản hồi thao tác người dùng và xử lý sự kiện trên giao diện.
• Bootstrap (Bootstrap 3 và Bootstrap 4): Framework mã nguồn mở kết hợp HTML, CSS và JavaScript giúp tối ưu hóa hiển thị theo chuẩn Responsive Web Design (thiết kế đáp ứng, ưu tiên giao diện di động). Bootstrap cung cấp sẵn các thành phần như kiểu chữ (typography), biểu mẫu (forms), nút bấm (buttons), bảng biểu (tables), hệ thống lưới (grids) và thanh điều hướng (navigation).
• jQuery: Thư viện JavaScript hỗ trợ đơn giản hóa việc thao tác với DOM (Document Object Model) và quản lý các sự kiện tương tác trên website.
• Công cụ hỗ trợ phát triển: Trình soạn thảo mã nguồn Edit Plus và phần mềm thiết kế đồ họa Adobe Photoshop để xử lý hình ảnh, banner và giao diện.

Phương pháp nghiên cứu và tổ chức

Tác giả sử dụng phương pháp phân tích - tổng hợp và phương pháp thiết kế kỹ thuật giao diện phần mềm:

• Phân tích cấu trúc thư mục lưu trữ và mối liên kết logic giữa các trang web chức năng.
• Thiết kế hệ thống khung lưới phân cấp (Grid Layout) để tái sử dụng giao diện giữa các nhóm trang.
• Hiện thực hóa từng thành phần giao diện (header, slider, main container, footer) theo từng bước từ cấu trúc HTML, định dạng CSS đến lập trình kịch bản sự kiện bằng jQuery.

---

Thiết kế và triển khai

Tổ chức lưu trữ mã nguồn

Hệ thống tệp tin và tài nguyên của website Double D được tổ chức trong một thư mục gốc đồng nhất, phân chia theo từng chức năng kỹ thuật:

Thư mục / Tệp tin	Chức năng và nội dung lưu trữ
css/	Chứa toàn bộ các tệp tin định kiểu CSS cho hệ thống giao diện
webfonts/	Chứa các bộ tệp tin font chữ hiển thị trên website
js/	Chứa các tệp mã nguồn JavaScript và thư viện jQuery hỗ trợ xử lý sự kiện
images/	Chứa hình ảnh sản phẩm linh kiện, banner quảng cáo và hình ảnh trang trí
Các tệp .html	Chứa mã nguồn giao diện các trang: index.html, single.html, checkout.html, payment.html, about.html, contact.html

Bố cục khung giao diện (Grid Layout)

Hệ thống giao diện của website Double D được thiết kế dựa trên hai mẫu bố cục chuẩn nhằm đảm bảo tính nhất quán về mặt thị giác và cấu trúc điều hướng:

Thành phần bố cục	Mẫu 1: HomeLayout	Mẫu 2: ClearLayout
Top Bar Header	Có	Có
Main Header	Có	Có
Main Navigation Header	Có	Có
Slider Banner	Có	Không
Main Container	Có	Có
List Category	Có	Không
Main Footer	Có	Có
Footer Copyright	Có	Có
Phạm vi áp dụng	Trang Chủ, Sản phẩm theo danh mục, Sản phẩm mới, Sản phẩm bán chạy	Chi tiết sản phẩm, Giỏ hàng, Thanh toán, Giới thiệu, Trợ giúp, FAQs, Liên hệ

---

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

Chương 1: Tổng quan

Chương 1 giới thiệu khái quát về dự án cửa hàng trực tuyến Double D – website thương mại điện tử chuyên kinh doanh các mặt hàng linh kiện lắp ráp máy tính với tiêu chí "Giá Rẻ – Chất Lượng". Tác giả trình bày các chức năng chính của website từ góc độ người dùng, bao gồm:

• Trang chủ: Trình bày tổng thể các danh mục linh kiện, banner quảng cáo và các nhóm sản phẩm nổi bật.
• Chi tiết sản phẩm: Cung cấp thông tin chi tiết về sản phẩm được chọn như đơn giá, hình ảnh minh họa, thông số kỹ thuật và mô tả.
• Giỏ hàng: Quản lý danh sách các mặt hàng người dùng đã chọn mua và chuẩn bị chuyển sang bước thanh toán.
• Thanh toán: Cung cấp các phương thức thanh toán và hoàn tất quy trình đặt hàng trực tuyến.
• Các trang thông tin bổ trợ: Trang Liên hệ, Giới thiệu cửa hàng, Trợ giúp và trang giải đáp các câu hỏi thường gặp (FAQs).

Bên cạnh đó, chương này cũng hệ thống hóa các kiến thức lý thuyết nền tảng về HTML, CSS, hệ thống framework Bootstrap (tập trung vào Bootstrap 3 và Bootstrap 4) cùng vai trò của JavaScript và thư viện jQuery trong việc xây dựng website động.

Chương 2: Phân tích

Chương 2 tập trung phân tích kiến trúc tổ chức hệ thống của website Double D:

• Sơ đồ tổ chức lưu trữ: Quy hoạch cấu trúc thư mục logic tại thư mục gốc, phân tách rõ ràng giữa các tệp mã nguồn giao diện, tệp định kiểu, tệp kịch bản và tài nguyên đa phương tiện.
• Sơ đồ liên kết trang: Xây dựng luồng di chuyển của người dùng giữa các trang web. Từ Trang chủ, người dùng có thể điều hướng linh hoạt đến Trang sản phẩm theo danh mục, Sản phẩm mới, Sản phẩm bán chạy, Chi tiết sản phẩm, Giỏ hàng, Thanh toán, Giới thiệu, Liên hệ, Trợ giúp và FAQs.
• Phân tích Layout: Phân định rõ hai cấu trúc hiển thị HomeLayout (dành cho các trang hiển thị sản phẩm tổng hợp cần slider và danh mục lớn) và ClearLayout (dành cho các trang chức năng chuyên sâu cần tập trung vào nội dung chính).

Chương 3: Thiết kế

Chương 3 trình bày chi tiết từng bước xây dựng mã nguồn HTML, CSS và jQuery cho từng trang giao diện cụ thể:

• Thiết kế trang chủ (index.html): Triển khai theo quy trình từng bước gồm:
  1. Khai báo thư viện Bootstrap.
  2. Thiết lập phần Header và thanh điều hướng.
  3. Xây dựng khối Slider Banner hiển thị các chương trình khuyến mãi và hình ảnh nổi bật.
  4. Thiết kế khối nội dung chính (Main Container) chứa danh sách sản phẩm.
  5. Xây dựng khối danh mục sản phẩm (List Category).
  6. Thiết kế khu vực nội dung trung tâm (Middle Section).
  7. Xây dựng chân trang chính (Main Footer).
  8. Thiết kế phần thông tin bản quyền (Footer Copyright).
  9. Gắn mã jQuery xử lý các sự kiện tương tác và hiệu ứng cuộn/chuyển đổi.
• Thiết kế trang chi tiết sản phẩm (single.html): Khởi tạo khung hiển thị gồm Banner thu nhỏ, thanh điều hướng phân cấp (Page Breadcrumb), khối Main Container hiển thị hình ảnh chi tiết, giá bán, mô tả linh kiện và tích hợp jQuery hỗ trợ tương tác sản phẩm.
• Thiết kế trang giỏ hàng (checkout.html): Xây dựng bảng danh sách sản phẩm đã chọn, thông tin số lượng, đơn giá, tổng tiền và các nút điều khiển cập nhật giỏ hàng.
• Thiết kế trang thanh toán (payment.html): Thiết kế form thông tin giao hàng, các tùy chọn phương thức thanh toán và nút xác nhận đặt hàng, chia thành 4 phân đoạn kết quả giao diện.
• Xây dựng nút cuộn lên đầu trang (Move Top Button): Định kiểu bằng CSS và lập trình hiệu ứng cuộn mượt bằng jQuery khi người dùng duyệt qua các nội dung dài.
• Thiết kế các trang phụ trợ (about.html, contact.html): Xây dựng nội dung giới thiệu về cửa hàng Double D và biểu mẫu liên hệ tiếp nhận phản hồi từ khách hàng.

Chương 4: Kết luận

Chương 4 tổng kết lại quá trình nghiên cứu, thiết kế và hiện thực hóa website Double D; đánh giá mức độ hoàn thành các mục tiêu ban đầu về mặt giao diện và tính khả thi của mô hình cửa hàng linh kiện trực tuyến.

---

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

Kết quả đạt được

Đồ án đã hoàn thành các sản phẩm kỹ thuật cụ thể theo đúng kế hoạch đề ra:

• Xây dựng hoàn chỉnh bộ giao diện web tĩnh và động cho cửa hàng trực tuyến Double D với 6 trang chức năng chính (index.html, single.html, checkout.html, payment.html, about.html, contact.html) cùng các trang bổ trợ (FAQs, Trợ giúp).
• Ứng dụng thành công hệ thống lưới của Bootstrap 3 và Bootstrap 4 để tạo bố cục giao diện chuẩn, tương thích với các kích thước màn hình khác nhau.
• Tích hợp thư viện jQuery để xử lý các sự kiện giao diện như điều hướng trang, nút cuộn "Move Top", hiệu ứng slider và tương tác biểu mẫu.
• Chuẩn hóa cấu trúc thư mục mã nguồn giúp việc quản lý, mở rộng và bảo trì mã giao diện trở nên thuận tiện.

Đóng góp của đề tài

• Đưa ra một mô hình thiết kế giao diện hoàn chỉnh, có cấu trúc chặt chẽ cho một website thương mại điện tử chuyên ngành linh kiện máy tính ở cấp độ đồ án cơ sở.
• Minh họa chi tiết quy trình xây dựng giao diện từng bước (step-by-step) từ khâu khai báo thư viện, dàn layout đến viết mã định dạng CSS và kịch bản jQuery cho sinh viên ngành CNTT.

---

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

Hạn chế

• Hệ thống tập trung chủ yếu vào phần xây dựng giao diện phía người dùng (Front-end), chưa tích hợp hệ thống xử lý phía máy chủ (Back-end) và Cơ sở dữ liệu (CSDL) để lưu trữ động thông tin sản phẩm, đơn hàng và tài khoản người dùng.
• Các chức năng giỏ hàng và thanh toán trên trang payment.html mới dừng lại ở mức độ biểu diễn giao diện và xử lý kịch bản client-side, chưa tích hợp cổng thanh toán trực tuyến thực tế.

Hướng nghiên cứu tiếp

• Nghiên cứu và xây dựng hệ quản trị cơ sở dữ liệu (như MySQL, PostgreSQL) để quản lý danh mục linh kiện máy tính, tồn kho và thông tin đơn hàng.
• Phát triển phần mềm quản trị phía máy chủ bằng các ngôn ngữ lập trình back-end (như PHP, Node.js, Python/Django) để xử lý logic nghiệp vụ và kết nối CSDL.
• Tích hợp các cổng thanh toán điện tử và hệ thống xác thực người dùng bảo mật nhằm hoàn thiện một nền tảng TMĐT hoàn chỉnh.

---

Giá trị tham khảo

Tài liệu đồ án này mang lại giá trị tham khảo hữu ích cho:

• Sinh viên ngành Công nghệ thông tin: Làm tài liệu tham khảo trực tiếp cho các môn học như Thiết kế Web, Đồ án cơ sở hoặc Đồ án chuyên ngành.
• Người học lập trình Front-end cơ bản: Cung cấp phương pháp phân chia layout (HomeLayout, ClearLayout), cách tổ chức cây thư mục chuẩn và quy trình từng bước xây dựng các thành phần giao diện TMĐT bằng Bootstrap và jQuery.

---

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

1. Đề tài "Cửa hàng trực tuyến Double D" kinh doanh mặt hàng gì và do ai thực hiện?
Website Double D chuyên kinh doanh các mặt hàng linh kiện lắp ráp máy tính trực tuyến với tiêu chí "Giá Rẻ – Chất Lượng". Đề tài do sinh viên Nguyễn Quốc Duy (MSSV: 2100007620), khóa 2021 – 2024, Khoa Công nghệ Thông tin - Trường Đại học Nguyễn Tất Thành thực hiện dưới sự hướng dẫn của giảng viên Bùi Duy Tân.

2. Hai mẫu layout chính được sử dụng trong hệ thống website Double D là gì và áp dụng cho các trang nào?
Hệ thống sử dụng 2 mẫu layout:

• HomeLayout: Bao gồm Top Bar Header, Main Header, Main Navigation Header, Slider, Main Container, List Category, Main Footer, Footer Copyright; áp dụng cho Trang Chủ, Sản phẩm theo danh mục, Sản phẩm mới và Sản phẩm bán chạy.
• ClearLayout: Lược bỏ Slider và List Category; áp dụng cho trang Chi tiết sản phẩm (single.html), Giỏ hàng (checkout.html), Thanh toán (payment.html), Giới thiệu (about.html), Trợ giúp, FAQs và Liên hệ (contact.html).

3. Những công nghệ và công cụ nào đã được tác giả sử dụng để phát triển website?
Website được phát triển dựa trên bộ công nghệ web gồm HTML, CSS, JavaScript, framework Bootstrap (Bootstrap 3 và 4), thư viện jQuery, cùng các công cụ hỗ trợ là trình soạn thảo Edit Plus và phần mềm đồ họa Photoshop.

4. Cấu trúc thư mục mã nguồn của dự án Double D được tổ chức như thế nào?
Mã nguồn dự án được lưu trữ trong thư mục gốc gồm các thư mục con chuyên biệt: css/ (chứa file định dạng), webfonts/ (chứa font chữ), js/ (chứa kịch bản JavaScript/jQuery), images/ (chứa ảnh sản phẩm và trang trí) cùng các tệp mã nguồn trang .html.

---

Kết luận

Đồ án cơ sở "Cửa hàng trực tuyến Double D" của tác giả Nguyễn Quốc Duy đã hoàn thành việc nghiên cứu và xây dựng hệ thống giao diện cho website thương mại điện tử chuyên ngành linh kiện máy tính. Thông qua việc ứng dụng kết hợp HTML, CSS, framework Bootstrap và thư viện jQuery, tác giả đã thiết kế đồng bộ các trang chức năng từ trang chủ, chi tiết sản phẩm, giỏ hàng đến thanh toán theo hai mô hình layout chuẩn hóa. Đây là tài liệu tham khảo có giá trị thực tiễn cho sinh viên Công nghệ Thông tin trong quá trình học tập và thực hành môn Thiết kế Web cơ sở.

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

CHƯƠNG 1 TỔNG QUAN.9 CHƯƠNG 2 PHÂN TÍCH.12 CHƯƠNG 3 THIẾT KẾ. Thiết kế trang index. Thiết kế trang single. Thiết kế trang checkout (Chi tiết giỏ hàng):.

Thiết kế trang payment. Tạo Move Top Button:. Thiết kế trang about. Thiết kế trang contact.

CHƯƠNG 4 KẾT LUẬN. TÀI LIỆU THAM KHẢO.50 v DANH MỤC BẢNG, HÌNH Bảng 1. Ghi chú: - Xếp sau trang Mục lục - Số thứ nhất chỉ số thự tự chương - Số thứ hai chỉ thứ tự bảng biểu trong mỗi chương - Tên đề của bảng biểu nằm phía trên của bảng phải có ghi chú, giải thích, nêu rõ nguồn trích hoặc sao chụp vi DANH MỤC HÌNH Hình 1. Một đoạn code HTML của phần Main Container.

Một đoạn code CSS của phần Header. Một phần code JQuery của phần Footer. Kết quả phần Header. Một đoạn code HTML của phần Slider Banner.

Một đoạn code CSS của phần Slider Banner. Kết quả của phần Slider Banner. Một đoạn code HTML của phần Main Container. Một đoạn code CSS của phần Main Container.

Kết quả của phần Main Container. Một đoạn code HTML của phần List Cagetory. Một đoạn code CSS của phần List Cagetory. Kết quả của phần List Cagetory.

Một đoạn code HTML của phần Middle Section. Một đoạn code CSS của phần Middle Section. Kết quả của phần Middle Section. Một đoạn code HTML của phần Main Footer.

Một đoạn code CSS của phần Main Footer. Kết quả của phần Main Footer. Một đoạn code HTML của phần Footer Copyright. Một đoạn code CSS của phần Footer Copyright.

Kết quả của phần Footer Copyright. Một đoạn code HTML của phần Banner trang single.2, Một đoạn code CSS của phần Banner trang single. Kết quả của phần Banner trang single. Một đoạn code HTML của phần Page Breadcrumb.

Một đoạn code CSS của phần Page Breadcrumb. Kết quả của phần Page Breadcrumb. Một đoạn code HTML của phần Main Container. Một đoạn code JQuery của phần Main Container trang single.

Kết quả phần Main Container trang single. Một đoạn code HTML của phần Main Container trang checkout. Một đoạn code CSS của phần Main Container trang checkout,html. Kết quả phần Main Container trang checkout.

Một đoạn code JQuery của phần Main Container trang checkout. Một đoạn code HTML của phần Main Container trang payment. Một đoạn code CSS của phần Main Container trang payment. Kết quả phần Main Container (1) của trang payment.

Kết quả phần Main Container (2) của trang payment. Kết quả của phần Main Container (3) trang payment. Kết quả của phần Main Container (4) trang payment. Một đoạn code JQuery của phần Main Container trang payment.

Một đoạn code CSS của phần Move Top Button. Một đoạn code JQuery của phần Move Top Button. Kết quả của phần Move Top Button. Một đoạn code HTML của phần Main Container trang about.

Một đoạn code CSS của phần Main container trang about. Kết quả phần Main Container trang about. Một đoạn code HTML của phần Main Container trang contact. Một đoạn code CSS của phần Main Container trang contact.

Kết quả phần Main Container trang conatct.47 viii KÍ HIỆU CÁC CỤM TỪ VIẾT TẮT Chữ viết tắt Ý nghĩa Ví dụ: CSDL Cơ sở dữ liệu ix CHƯƠNG 1 TỔNG QUAN 1. Giới thiệu: DoubleD – Chuyên Kinh Doanh Các Mặt Hàng Linh Kiện Lắp Ráp Máy Tính Giá Rẻ – Chất Lượng. DoubleD là website thương mại điện tử. Khách hàng xem các sản phẩm được nhà cung cấp đăng lên trên trang web, chọn sản phẩm và đặt hàng.

DoubleD là một website chuyên kinh doanh về các mặt hàng linh kiện lắp ráp máy tính trực tuyến. Website được chia thành các trang web gồm có: a. Trang chủ: Hiển thị các danh mục sản phẩm. Chi Tiết Sản Phẩm: Hiện thị thông tin chi tiết của sản phẩm được chọn( đơn giá, mô tả, hình ảnh sản phẩm,… ).

Giỏ Hàng: Hiển thị các sản phẩm khách hàng chọn mua và tiến hành thanh toán. Thanh Toán: Hiển thị các phương thức thanh toán và tiến hành đặt hàng. Liên hệ: Khách hàng liên hệ với chúng tôi. Giới Thiệu: Giới thiệu về cửa hàng DoubleD.

Trợ giúp: Cho phép khách hàng gửi câu hỏi đến cửa hàng để nhờ trợ giúp. Faqs: Hiển thị những thắc mắc được hỏi nhiều nhất.HTML:  HTML viết tắt của chữ HyperText Markup Language 10 (ngôn ngữ đánh dấu siêu văn bản), nó được dùng để tạo ra các tài liệu hiện thị được trên trình duyệt.  HTML đóng vai trò giúp người dùng có thể định dạng, thiết kế cấu trúc các thành phần của một trang web hay các ứng dụng, heading, links, hoặc phân chia giữa các đoạn văn.  Một tập tin HTML được hình thành từ các phần tử HTML, trong đó nó đã được quy định bởi các cặp thẻ (gọi là tag), và lưu dưới dạng đuôi mở rộng là.

CSS:  CSS (viết tắt của cụm từ Cascade Style Sheet) là ngôn ngữ đóng vai trò giúp trình duyệt hiểu được tất cả các định dạng và bố cục của trang web.  CSS còn mang đến tính năng cho phép người dùng sử dụng duy nhất một vùng chọn để điều khiển thiết kế của các thành phần có trong HTML. Bootstrap ( Bootstrap 3 và 4 ):  Bootstrap là một framework (mã nguồn mở) bao gồm các HTML, CSS và JavaScript.  Trong bootstrap có các thành tố có sẵn như typography (kiểu chữ), forms (biểu mẫu), buttons (nút), tables (bảng), grids (bản mô tả ngắn), navigation (điều hướng trang web), image (ảnh),.

tóm lại là các template (mẫu có sẵn) dùng để thiết kế và tối ưu website.  Bên cạnh việc tiết kiệm thời gian khi quản lý các template web, mục tiêu chính của bootstrap là tối ưu hiển thị website.  Bootstrap 4 (viết tắt là BS4) là phiên bản mới của Bootstrap, là framework HTML, CSS và JavaScript phổ biến nhất để thiết kế web đáp ứng, ưu tiên trên nền tảng di động.  Tương tự như Bootstrap 3, Bootstrap 4 hoàn toàn miễn phí tải về và tự do sử dụng, tiện lợi cho sinh viên thực hành và các lập trình viên sử dụng.

JavaScript: 11  Javascript chính là một ngôn ngữ lập trình web rất phổ biến ngày nay. Javascript được tích hợp đồng thời nhúng vào HTML để hỗ trợ cho website trở nên sống động hơn.  Chúng cũng đóng vai trò tương tự như một phần của website, cho phép Client-side Script từ người dùng tương tự máy chủ (Nodejs) để tạo ra những website động.  JavaScript đóng vai trò như một phần của website, được tích hợp hoặc nhúng vào HTML để tạo sự sống động cho các trang web.

Như vậy có thể thấy 3 lớp bánh của công nghệ web tiêu chuẩn sẽ gồm HTML, CSS, JavaScript trong đó JavaScript chính là lớp thứ 3. Cả ba lớp này xây dựng chồng lên nhau cùng hỗ trợ để tạo nên những tính năng tuyệt vời cho website. Công cụ thực hiện đồ án: Edit Plus, Photoshop, … 12 CHƯƠNG 2 PHÂN TÍCH 3. Sơ đồ tổ chức lưu trữ của website: Thư Mục Gốc: Chứa các trang web và các thư mục chứa CSS, javascript, hình ảnh các sản phẩm.

Trong thư mục gốc gồm: a. Thư Mục Gốc: Chứa các trang web và các thư mục chứa css, javascript, hình ảnh các sản phẩm. Trong thư mục gốc gồm:  Thư Mục css: Chứa các file định dạng css.  Thư Mục webfonts: Chứa các file font.

 Thư Mục js: Chứa các file javascript, hỗ trợ xử lý các sự kiện trong website.  Thư Mục images: Chứa các file hình ảnh về các sản phẩm của cửa hàng, các hình ảnh trang trí cho các trang web trong website.  Các trang web hiển thị thông tin, sản phẩm, giỏ hàng, thanh toán… của cửa hàng. Các trang web hiển thị thông tin, sản phẩm, giỏ hàng, thanh toán,blog,chi tiết sản phẩm… của cửa hàng.

Sơ Đồ Liên Kết Của Website: Chi tiết sản phẩm Sản phẩm theo danh mục Sản phẩm mới Giỏ hàng Trang chủ Giới thiệu Thanh toán Trợ giúp Faqs Liên hệ Sản phẩm bán chạy Sơ Đồ Liên Kết Các Trang Web Trong Website 14 Ghi Chú: : Thể hiện của 1 Trang Web. : Liên kết từ trang web này sang trang web khác theo hướng mũi tên. Grid Layout của Các Nhóm Trang Web Top Bar Header Main Header Main Navigation Header Slider Main Container List Cagetory Main Footer Footer Copyright Layout 1 – HomeLayout Các trang web sử dụng HomeLayout: Trang Chủ, Sản phẩm theo danh mục, Sản phẩm mới, Sản phẩm bán chạy. 16 Top Bar Header Main Header Main Navigation Header Main Container Main Footer Footer Copyright Layout 2 - ClearLayout Các trang web sử dụng ClearLayout: Chi Tiết Sản Phẩm, Giỏ hàng, Thanh Toán, Giới thiệu, Trợ giúp, FAQs, Liên hệ.

17 CHƯƠNG 3 THIẾT KẾ Mô tả các bước thực hiện các trang và kết quả. Thiết kế trang index.html (trang chủ): - B1: Khai báo bootstrap sử dụng cho trang web. - B2: Tạo Header: Hình 1. Một đoạn code HTML của phần Main Container.

Một đoạn code CSS của phần Header. - B9: Sử dụng Jquery cho các sự kiện trên trang web: Hình 1. Một phần code JQuery của phần Footer. 19 Kết quả: Hình 1.

Kết quả phần Header. Tạo Slider Banner: Hình 1. Một đoạn code HTML của phần Slider Banner. Một đoạn code CSS của phần Slider Banner.

21 Kết quả: Hình 1. Kết quả của phần Slider Banner. Tạo Main Container: Hình 1. Một đoạn code HTML của phần Main Container.

Một đoạn code CSS của phần Main Container. 23 Kết quả B4: Hình 1. Kết quả của phần Main Container. 24 - B5: Tạo List Cagetory: Hình 1.

Một đoạn code HTML của phần List Cagetory. Một đoạn code CSS của phần List Cagetory. 26 Kết quả: Hình 1. Kết quả của phần List Cagetory.

27 - B6: Tạo Middle Section: Hình 1. Một đoạn code HTML của phần Middle Section. Một đoạn code CSS của phần Middle Section. Kết quả: Hình 1.

Kết quả của phần Middle Section. 28 Kết quả Bước 4,5,6: Hình 1. 29 - B7: Tạo Main Footer: Hình 1. Một đoạn code HTML của phần Main Footer.

Một đoạn code CSS của phần Main Footer. 30 Kết quả: Hình 1. Kết quả của phần Main Footer. - B8: Tạo Footer Copyright: Hình 1.

Một đoạn code HTML của phần Footer Copyright. Một đoạn code CSS của phần Footer Copyright. Kết quả: 31 Hình 1. Kết quả của phần Footer Copyright.

Thiết kế trang single.html (chi tiết sản phẩm): - B1: Khai báo Bootstrap sử dụng cho trang web(Tương tự như phần 1.Thiết kế trang index. - B2: Tạo Header (Tương tự như phần 1.Thiết kế trang index. - B3: Tạo Banner: Hình 2. Một đoạn code HTML của phần Banner trang single.25, Một đoạn code CSS của phần Banner trang single.

Kết quả: Hình 2. Kết quả của phần Banner trang single. 32 - B4: Tạo Page Breadcrumb: Hình 2. Một đoạn code HTML của phần Page Breadcrumb.

Một đoạn code CSS của phần Page Breadcrumb. Kết quả: Hình 2. Kết quả của phần Page Breadcrumb. 33 - B5: Tạo Main Container: Hình 2.

Một đoạn code HTML của phần Main Container. - B6: Tạo Middle Section: (Tương tự như phần 1.Thiết kế trang index. - B7: Tạo Footer: (Tương tự như phần 1.Thiết kế trang single. - B8: Sử dụng Jquery cho các sự kiện trên trang web: Hình 2.