Đồ Án Cơ Sở 1 Đề Tài- Thiết Kế Website Bán Các Sản Phẩm Công Nghệ Thực Tế Ảo.pdf

Một trang web bán các sản phẩm công nghệ thực tế ảo là cần thiết để người dùng có thể dễ dàng tìm kiếm và quản lý thông tin một cáchhiệu quả, đồng thời giúp các công ty cung cấp sản phẩm

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

Đà Nẵng, ngày 2 tháng 06 năm 2023

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

LỜI CẢM ƠN

Chúng em xin gửi lời cảm ơn chân thành đến Khoa: Khoa học máy tính, TrườngCông nghệ thông tin và truyền thông Việt Hàn đã tạo điều kiện thuận lợi cho chúng emhọc tập và hoàn thành đề tài đồ án cơ sở 1 này Đặc biệt, chúng em xin bày tỏ lòng biết

ơn sâu sắc đến Cô Trịnh Thị Ngọc Linh đã dày công truyền đạt kiến thức và hướngdẫn chúng em trong quá trình làm bài

Chúng em đã cố gắng vận dụng những kiến thức đã học được trong học kỳ qua đểhoàn thành bài tiểu luận Nhưng do kiến thức hạn chế và không có nhiều kinh nghiệmthực tiễn nên khó tránh khỏi những thiếu sót trong quá trình nghiên cứu và trình bày.Rất kính mong sự góp ý của quý thầy cô để bài tiểu luận của em được hoàn thiện hơn Một lần nữa, em xin trân trọng cảm ơn sự quan tâm giúp đỡ của các thầy cô đãgiúp đỡ em trong quá trình thực hiện bài tiểu luận này

1.1.1.1 MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN iii

LỜI CẢM ƠN iv

DANH MỤC HÌNH ẢNH vii

MỞ ĐẦU 1

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài: 1

2 Tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài: 1

3 Bố cục báo cáo 1

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI 2

1 Tổng quan: 2

2 Lý do chọn đề tài 2

3 Phương pháp nghiên cứu 2

4 Phạm vi, đối tượng đề tài 3

CHƯƠNG II: CƠ SỞ LÍ THUYẾT 4

1 Tổng quan về HTML, CSS, Javascript 4

1.1 Tổng quan về HTML 4

1.2 Tổng quan về CSS 4

1.3 Tổng quan về Javascript 4

2 Tổng quan về Bootstrap, JQuery 5

3 Giới thiệu công cụ 5

3.1 Visual Studio Code 5

3.2 XAMPP 5

3.3 PHP 6

3.4 Font Awesome 6

3.5 000Webhost 7

CHƯƠNG III: PHÂN TÍCH VÀ THIẾT KẾ WEBSITE 7

1 Yêu cầu đặt ra 7

2 Xây dựng website 7

2.1 Giai đoạn 1: Thu thập yêu cầu 7

2.2 Giai đoạn 2: Phân tích và lập kế hoạch 7

2.3 Giai đoạn 3: Thiết kế giao diện 7

2.4 Giai đoạn 4: Xây dựng nội dung 8

2.5 Giai đoạn 5: Thiết kế và kết nối Database 8

2.6 Giai đoạn 6: Phát triển và kiểm thử 8

2.7 Giai đoạn 7: Tối ưu hóa và tương thích 8

2.8 Giai đoạn 8: Đánh giá sản phẩm 8

2.9 Giai đoạn 9: Đưa website lên Internet 8

CHƯƠNG IV: TRIỂN KHAI VÀ ĐÁNH GIÁ KẾT QUẢ 9

1 Kết quả và chức năng của website 9

1.1 Các trang chính 9

1.2 Các trang phụ 11

2 Link website 13

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

2.2 Ưu điểm 13

2.3 Nhược điểm 13

3 Hướng phát triển 13

4 Kết luận 14

TÀI LIỆU THAM KHẢO 15

1 Tài liệu trên Internet 15

DANH MỤC HÌNH ẢNH

Hình 1: Visual Studio Code 5

Hình 2: XAMPP 6

Hình 3: PHP 6

Hình 4: Font Awesome 6

Hình 5: 000webhost 7

Hình 6: HOME 9

Hình 7:PRODUCTS 10

Hình 8: ABOUT 10

Hình 9: CONTACT 11

Hình 10: Messenger 12

Hình 11: Login 13

Hình 12: Liên hệ và đặt câu hỏi 13

Hình 13: Database 14

MỞ ĐẦU

1 Tổng quan tình hình nghiên cứu thuộc lĩnh vực của đề tài:

Hiện nay, trong thời đại công nghiệp 4.0, việc phát triển các hoạt động liên quanđến công nghệ ngày càng gia tăng, đặc biệt là trong lĩnh vực thực tế ảo Sự phát triểnnày tạo ra một nhu cầu ngày càng lớn về thông tin và tin tức liên quan đến các sảnphẩm và công nghệ trong lĩnh vực này Để đáp ứng nhu cầu này, cần có một phươngtiện để dễ dàng truyền đạt thông tin, tìm kiếm, trao đổi và mua bán các sản phẩm côngnghệ thực tế ảo

Trong bối cảnh nhu cầu tìm kiếm và mua sắm sản phẩm công nghệ thực tế ảo ngàycàng tăng cao, việc tìm kiếm những sản phẩm phù hợp và lưu giữ thông tin về cáccông ty quan tâm trở nên quan trọng Một trang web bán các sản phẩm công nghệ thực

tế ảo là cần thiết để người dùng có thể dễ dàng tìm kiếm và quản lý thông tin một cáchhiệu quả, đồng thời giúp các công ty cung cấp sản phẩm dễ dàng tiếp cận và trao đổivới khách hàng

Trang web này sẽ tập trung vào người dùng muốn mua sắm các sản phẩm côngnghệ thực tế ảo và các công ty cung cấp sản phẩm này Trang web sẽ mang đến mộttrải nghiệm tìm kiếm đơn giản và tiện lợi, giúp người dùng dễ dàng quản lý thông tin

và tìm kiếm những sản phẩm phù hợp nhất

2 Tính cấp thiết, ý nghĩa khoa học và thực tiễn của đề tài:

Việc phát triển một trang web bán các sản phẩm công nghệ thực tế ảo mang lạinhiều lợi ích quan trọng cho người dùng:

Mở rộng lựa chọn sản phẩm: Trang web cung cấp một nền tảng đa dạng và phongphú về các sản phẩm công nghệ thực tế ảo Người dùng có thể dễ dàng tìm kiếm vàchọn lựa từ một loạt sản phẩm phù hợp với nhu cầu và sở thích cá nhân Điều này giúp

mở rộng lựa chọn và mang đến trải nghiệm mua sắm đa dạng

Trải nghiệm trực tuyến tốt hơn: Trang web cung cấp thông tin chi tiết về các sảnphẩm công nghệ thực tế ảo, kèm theo hình ảnh và mô tả chi tiết Người dùng có thểkhám phá sản phẩm từ mọi góc độ và có cái nhìn chân thực nhất về tính năng và hiệusuất của chúng Điều này giúp tạo ra một trải nghiệm trực tuyến tốt hơn và giúp ngườidùng có quyết định mua hàng thông minh hơn

Hỗ trợ khách hàng chuyên nghiệp: Trang web bán hàng cung cấp dịch vụ chăm sóckhách hàng chuyên nghiệp, giúp người dùng giải đáp các câu hỏi, yêu cầu hỗ trợ vàgiải quyết các vấn đề liên quan đến sản phẩm và giao dịch Điều này mang lại sự tintưởng và sự hài lòng cho người dùng và tạo nên một quan hệ lâu dài với khách hàng

Cuối cùng là Tài liệu tham khảo và Phụ lục liên quan đến đề tài.

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI

1 Tổng quan:

Trang web bán các sản phẩm thực tế ảo đóng vai trò quan trọng trong việc truyềntải thông tin về các sản phẩm và dịch vụ thực tế ảo từ các nhà cung cấp đến kháchhàng Đây là nơi mà khách hàng có thể tìm kiếm các sản phẩm mới nhất, tìm hiểuthông tin về nhà cung cấp và thực hiện mua hàng một cách nhanh chóng và thuận tiện.Các trang web bán hàng chuyên nghiệp đóng vai trò như một trợ thủ đắc lực cho cácdoanh nghiệp, giúp họ tiếp cận và thu hút khách hàng

Đối với các doanh nghiệp: Trang web bán hàng cho phép doanh nghiệp hiển thịsản phẩm và dịch vụ của mình, cung cấp thông tin chi tiết về chúng và tạo điều kiệncho khách hàng tìm hiểu và mua hàng một cách dễ dàng Đồng thời, trang web cũnggiúp tạo ra sự tương tác và tạo dựng lòng tin với khách hàng thông qua các đánh giá,phản hồi và chia sẻ kinh nghiệm

Đối với người mua: Người mua chỉ cần truy cập trang web, tìm kiếm sản phẩmthực tế ảo theo nhu cầu của mình, xem thông tin chi tiết và hình ảnh về sản phẩm, sau

đó thực hiện việc mua hàng trực tuyến một cách tiện lợi và an toàn Việc mua sắmthông qua trang web bán hàng cung cấp sự linh hoạt và thuận tiện, giúp tiết kiệm thờigian và công sức của người mua

Tóm lại, việc phát triển một trang web bán các sản phẩm thực tế ảo mang lạinhiều lợi ích cho cả doanh nghiệp và khách hàng, bao gồm việc hiển thị sản phẩm vàdịch vụ, tạo tương tác và tạo dựng lòng tin với khách hàng, cung cấp trải nghiệm muasắm thuận tiện và an toàn

2 Lý do chọn đề tài

Sự phát triển của công nghệ thực tế ảo (Virtual Reality - VR): Công nghệ thực tế

ảo đang ngày càng phổ biến và có tiềm năng phát triển lớn trong tương lai Việc tạo ramột trang web bán đồ công nghệ thực tế ảo sẽ đáp ứng nhu cầu của một thị trườngđang mở rộng

Tiện ích mua sắm trực tuyến: Mua sắm trực tuyến đang trở thành xu hướng phổbiến Một trang web bán đồ công nghệ thực tế ảo sẽ cung cấp tiện ích mua sắm trựctuyến cho khách hàng, cho phép họ tìm kiếm, so sánh và mua các sản phẩm VR mộtcách dễ dàng và thuận tiện

3 Phương pháp nghiên cứu

Nghiên cứu về HTML, CSS, JavaScript: Hiểu các nguyên tắc, cú pháp, tính năng

và ứng dụng của mỗi ngôn ngữ này để áp dụng vào việc xây dựng giao diện, tương tácngười dùng và quản lý dữ liệu trên website

Tìm hiểu về Bootstrap, JQuery: nghiên cứu và sử dụng các khung công cụ và thưviện pnày để tối ưu hóa quá trình phát triển website Việc này giúp tiết kiệm thời gian

và nâng cao hiệu quả trong việc xây dựng giao diện đẹp mắt, tương tác mượt mà vàtích hợp các chức năng phức tạp

4 Phạm vi, đối tượng đề tài

Phạm vi của website bán đồ công nghệ là tất cả mọi người

Đối tượng hướng đến là khách hàng đa dạng, bao gồm mọi đối tượng và độ tuổi, từtrẻ em, thanh thiếu niên, người trưởng thành cho đến người già

CHƯƠNG II: CƠ SỞ LÍ THUYẾT

1 Tổng quan về HTML, CSS, Javascript

HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu được sử dụng để xây dựngcấu trúc và định dạng nội dung trên các trang web Được phát triển bởi Tim Berners-Lee và đội ngũtại CERN vào những năm đầu của World Wide Web, HTML đóng vai trò quan trọng trong việc xácđịnh cấu trúc logic của trang web và tạo ra một giao diện mà trình duyệt web có thể hiểu

HTML sử dụng cú pháp dựa trên các thẻ (tags) để xác định các phần tử trên trang web Mỗithẻ bắt đầu bằng dấu nhắc mở (<) và kết thúc bằng dấu nhắc đóng (>) Các thẻ có thể chứa nộidung bên trong hoặc được sử dụng một cách đơn giản để chỉ định một phần tử

HTML cung cấp các thẻ cơ bản để định dạng và hiển thị các phần tử như tiêu đề, đoạn vănbản, hình ảnh, liên kết, bảng, danh sách và biểu mẫu Ngoài ra, HTML hỗ trợ các thẻ để nhúng nộidung đa phương tiện như video, âm thanh và đồ họa vector

Với HTML, bạn có thể xác định cấu trúc và tổ chức nội dung trên trang web, tạo liên kết giữacác trang, xác định các phần tử như tiêu đề và đoạn văn bản, thêm hình ảnh và đa phương tiện, tạobảng và biểu đồ, tạo biểu mẫu và xử lý dữ liệu người dùng

HTML tiếp tục được phát triển và cập nhật để đáp ứng các yêu cầu và xu hướng mới trongphát triển web Phiên bản hiện tại của HTML là HTML5, nó mang lại nhiều tính năng và khả năngmạnh mẽ hơn cho việc xây dựng các trang web đa phương tiện và tương tác

CSS (Cascading Style Sheets) là một ngôn ngữ định dạng được sử dụng để kiểm soát kiểudáng và trình bày của các phần tử HTML trên trang web CSS cho phép bạn áp dụng các quy tắc vàlựa chọn để thay đổi màu sắc, font chữ, kích thước, độ căn chỉnh, đường viền và các thuộc tínhkhác của các phần tử, nhằm tạo ra giao diện web hấp dẫn và đồng nhất trên nhiều trình duyệt vàthiết bị khác nhau

CSS được sử dụng để tách biệt cấu trúc và nội dung HTML với kiểu dáng và trình bày củatrang web Bằng cách áp dụng CSS, bạn có thể tạo ra các hiệu ứng hình ảnh, định dạng văn bản,tạo kiểu cho liên kết, bảng, danh sách, hình ảnh, biểu đồ và nhiều phần tử khác trên trang web củabạn

Một trong những đặc điểm quan trọng của CSS là khả năng kế thừa và ưu tiên CSS cho phépbạn áp dụng kiểu dáng cho một phần tử cụ thể hoặc nhóm các phần tử, và kiểu dáng này có thểđược kế thừa và ưu tiên theo cấu trúc cây của các phần tử HTML Điều này giúp bạn thay đổi kiểudáng toàn bộ trang web chỉ bằng một số quy tắc CSS cơ bản

CSS cũng hỗ trợ các khả năng tiên tiến như tạo hiệu ứng chuyển động, hiển thị linh hoạt trêncác thiết bị và màn hình khác nhau, tạo các kiểu dáng đáp ứng và điều chỉnh kiểu dáng theo sựtương tác của người dùng

Với CSS, bạn có thể tạo ra các trang web có kiểu dáng đẹp, linh hoạt và chuyên nghiệp, tạotrải nghiệm người dùng tốt hơn và đồng nhất trên các nền tảng và thiết bị khác nhau

JavaScript là một ngôn ngữ lập trình phía máy khách (client-side) được sử dụng rộng rãi trêncác trang web để tạo ra các hiệu ứng tương tác và chức năng động Với JavaScript, bạn có thể thayđổi nội dung của trang web, xử lý sự kiện từ người dùng, tạo hiệu ứng động, gửi và nhận dữ liệu từmáy chủ, và thực hiện các tác vụ phức tạp khác trên trang web

JavaScript được tích hợp sẵn trong các trình duyệt web hiện đại, giúp mã JavaScript đượcthực thi trực tiếp trên máy tính của người dùng mà không cần phải cài đặt thêm phần mềm Điều

này làm cho JavaScript trở thành một công cụ mạnh mẽ để tạo ra trải nghiệm tương tác trực tiếptrên trang web.

Với JavaScript, bạn có thể kiểm tra và xử lý dữ liệu người dùng, tạo và điều khiển các phần tửHTML và CSS, thực hiện các tác vụ phức tạp, tạo hiệu ứng động và tương tác với người dùng.JavaScript có cú pháp dễ hiểu và linh hoạt, cho phép bạn viết mã ngắn gọn và dễ đọc

JavaScript cũng có sẵn nhiều thư viện và framework phát triển, như jQuery, React, Angular vàVue.js, giúp giảm thiểu công việc lặp lại và tăng tốc độ phát triển

Với JavaScript, bạn có thể tạo ra các trang web tương tác, đáp ứng và linh hoạt Nó là mộtcông cụ không thể thiếu để thực hiện các chức năng động và mang lại trải nghiệm người dùng tốthơn trên trang web

2 Tổng quan về Bootstrap, JQuery

Bootstrap và jQuery là hai công cụ quan trọng trong việc phát triển web hiện đại Bootstrap,với bộ sưu tập các thành phần giao diện đồng nhất và hệ thống lưới linh hoạt, giúp tạo ra các trangweb đẹp mắt và đáp ứng trên nhiều thiết bị Nó giúp tiết kiệm thời gian và công sức trong việc xâydựng giao diện, đồng thời mang lại tính nhất quán cho trang web

Với Bootstrap, chúng ta có thể tận dụng các lớp CSS và JavaScript có sẵn để tạo ra các thànhphần như menu điều hướng, nút bấm, biểu đồ, biểu mẫu, hộp thoại modal, carousel, v.v Bất kểkích thước màn hình, giao diện xây dựng bằng Bootstrap vẫn sẽ hiển thị một cách tốt và tự độngthích ứng với các thiết bị di động

Với jQuery, việc thao tác và tương tác với các phần tử trên trang web trở nên dễ dàng hơn.jQuery cung cấp cú pháp đơn giản và gọn nhẹ để xử lý sự kiện, thực hiện hiệu ứng động và gửi yêucầu AJAX một cách thuận tiện Điều này giúp chúng ta tạo ra các trang web tương tác, nâng caotrải nghiệm người dùng và cung cấp các chức năng phức tạp một cách dễ dàng

Sự kết hợp giữa Bootstrap và jQuery mang lại lợi ích lớn cho việc phát triển web Bootstrapgiúp xây dựng giao diện hấp dẫn và đáp ứng, trong khi jQuery hỗ trợ tương tác và xử lý sự kiện Sửdụng hai công cụ này giúp giảm thời gian và công sức phát triển, đồng thời đảm bảo tính nhất quán

và tương thích trên nhiều trình duyệt và thiết bị

3 Giới thiệu công cụ

Visual Studio Code là phần mềm lập trình được phát triển bởi Microsoft trên ba nền tảng khácnhau và hỗ trợ đa ngôn ngữ Ngoài ra, Visual Studio Code còn có chức năng tự hoàn thành lệnhthông minh và cải tiến mã nguồn

Hình 1: Visual Studio Code

XAMPP là một phần mềm cho phép giả lập môi trường server hosting ngay trên máy tính của

XAMPP hay được phục vụ cho hoạt động học tập giảng dạy thực hành và phát triển web

Hình 2: XAMPP3.3. PHP

PHP là từ viết tắt của thuật ngữ Personal Home Page Đây là một dạng mã lệnh hoặc một chuỗingôn ngữ kịch bản Trong đó, ngôn ngữ PHP chủ yếu được phát triển để dành cho những ứng dụngnằm trên máy chủ Mỗi khi các lập trình viên PHP viết các chương trình thì các chuỗi lệnh sẽ đượcchạy ở trên server, từ đó sinh ra mã HTML Nhờ vậy mà những ứng dụng trên các website có thểchạy được một cách dễ dàng

Hình 3: PHP

2023, Font Awesome chiếm 31% thị phần sử dụng tập lệnh phông chữ của bên thứ biến phổ biến

tượng phổ biến nhất thế giới" khi sở hữu lên tới 26.107 biểu tượng

Hình 4: Font Awesome

000webhost là một trong nhiều các nhà cung cấp dịch vụ hosting trên thế giới Điều khiếnngười ta nhớ đến họ gắn liền với gói dịch vụ hosting miễn phí Trải qua nhiều năm, gói dịch vụhosting miễn phí đó vẫn duy trì và giải quyết được nhiều nhu cầu cá nhân của mọi người

Hình 5: 000webhost

CHƯƠNG III: PHÂN TÍCH VÀ THIẾT KẾ WEBSITE

1 Yêu cầu đặt ra

Giao diện hấp dẫn và trực quan: Website cần có một giao diện hấp dẫn, thu hút người dùngngay từ cái nhìn đầu tiên Thiết kế nên đơn giản, dễ sử dụng và có cấu trúc rõ ràng để người dùng

có thể dễ dàng tìm kiếm thông tin và tương tác trên trang web

Cung cấp thông tin về các sản phẩm thực tế ảo, hiển thị giá cả rõ ràng và chi tiết cho từng sảnphẩm, kèm theo chính sách về giao hàng, bảo hành, và đổi trả Điều này giúp khách hàng có cáinhìn tổng quan về mức độ cạnh tranh của giá cả và chọn một giao dịch tốt nhất

Đảm bảo tương thích và responsive trên các thiết bị di động: Website cần được thiết kế và tối

ưu hóa để đảm bảo hiển thị đúng và tương thích trên các thiết bị di động như điện thoại di động vàmáy tính bảng Điều này giúp đảm bảo trải nghiệm người dùng tốt và tiếp cận với đối tượng đọcsách một cách thuận tiện và linh hoạt

Tạo khả năng tương tác và trò chuyện trực tuyến: Cung cấp khả năng tương tác trực tuyếnthông qua hệ thống chat hoặc hộp thoại để người dùng có thể trò chuyện, gửi câu hỏi hoặc nhậnđược sự hỗ trợ từ nhóm quản lý website

2 Xây dựng website

Giai đoạn này tập trung vào việc hiểu rõ yêu cầu của dự án:

Giao tiếp với khách hàng hoặc nhóm người dùng để xác định mục tiêu, chức năng vànội dung cần có trên website

Thu thập thông tin về các sản phẩm thực tế ảo

Trong giai đoạn này, cần:

Phân tích yêu cầu thu thập được để xác định các trang chủ yếu, cấu trúc thông tin,luồng trải nghiệm người dùng và các yếu tố thiết kế khác

Xây dựng sơ đồ trang (site map) và thiết kế giao diện sơ bộ

Giai đoạn này tạp trung thiết kế giao diện đồ họa cho website:

Xác định các yếu tố thiết kế như màu sắc, font chữ, hình ảnh, biểu đồ và các yếu tốtrực quan khác để tạo nên giao diện hấp dẫn và phù hợp với văn hóa đọc

Sử dụng công cụ thiết kế đồ họa để tạo ra giao diện dựa trên nguyên tắc thiết kế vàphong cách của dự án

Giai đoạn này tập trung vào việc tạo nội dung cho website:

Chuẩn bị và sắp xếp thông tin về các sản phẩm

Xây dựng nội dung hấp dẫn, dễ hiểu, chính xác và phải đảm bảo tương thích với giaodiện

Thiết kế và kết nối cơ sở dữ liêu để lưu trữ và quản lí thông tin:

Dựa trên nội dung đã xây dựng, xác định cấu trúc cơ sở dữ liệu

Xác định các bảng, trường và quan hệ giữa chúng

Xây dựng website dựa trên thiết kế và nội dung đã xây dựng: