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.

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.