đồ án môn học thiết kế web đề tài thiết kế website kinh doanh đèn ngủ onirique shop

Nhằm bổ trợ cho giấc ngủ, tạo ra một giấc ngủ ngon,sâu, thoải mái, tận dụng sức mạnh của công nghệ để sáng tạovà tạo ra những chiếc đèn ngủ mang tính đột phá, sáng tạo.Phục vụ cho nhu cầ

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC: THIẾT KẾ WEBĐỀ TÀI: THIẾT KẾ WEBSITE KINH DOANH ĐÈN

NGỦ ONIRIQUE SHOP

Giảng viên giảng dạy: BÙI DUY TÂNSinh viên thực hiện: NGUYỄN THỊ THƯƠNG

Mã số sinh viên: 2200002013

Tháng 1/2024

BỘ GIÁO DỤC VÀ ĐÀO TẠOTRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC: THIẾT KẾ WEBĐỀ TÀI: THIẾT KẾ WEBSITE KINH DOANH ĐÈN

NGỦ ONIRIQUE SHOP

Giảng viên giảng dạy: BÙI DUY TÂN

THƯƠNG

Mã số sinh viên: 2200002013

Tháng 1/2024

NHẬN XÉT CỦA GIẢNG VIÊN

- Điểm 2:

- Điểm tổng kết:

TPHCM, Ngày… tháng… năm 2024

PHÂN CÔNG NHIỆM VỤSinh viên 1: Trần Yến Nhi

MSSV: 2200002325

 Thiết kế trang chủ (index.html) Trang giới thiệu (about.html) Sản phẩm (detail.html) Tìm kiếm hình ảnh và thông tin sản phẩm và chi tiết sản

phẩm (kèm theo file css và js) Soạn báo cáo

Sinh viên 2: Nguyễn Thị ThươngMSSV: 2200002013

 Thiết kế trang tin tức (allnew.html) Trang thanh toán (checkout.html) Slider, Pop-up đăng nhập và chi tiết sản phẩm (kèm theo file

css và js) Soạn báo cáo

LỜI CÁM ƠN

Đầu tiên em xin gửi lời cám ơn đến trường Đại họcNguyễn Tất Thành vì đã đưa môn học Thiết kế web vàochương trình giảng dạy Cám ơn toàn thể giảng viên khoaCông Nghệ Thông Tin vì các thầy cô đã cùng nhau làm ra giáoán môn học phù hợp nhất và hiệu quả nhất với chúng em Vàđặc biệt cũng không thể quên giảng viên giảng dạy thầy BùiDuy Tân vì đã tận tình dãy dỗ chúng em hết lòng trong thờigian qua

Trong thời gian qua em đã học được rất nhiều kiến thứcmới về web và các kỹ năng để có thể thiết kế web trong môitrường học tập thoải mái, năng động Tuy không phải môn họctrong chuyên ngành nhưng bộ môn có tính thực tế cao sẽ giúpích được cho chúng em vào công việc sau này

Tuy nhiên vốn kiến thức là vô hạn nhưng sự tiếp nhận kiếnthức của mỗi bản thân vẫn còn nhiều hạn chế Mặc dù chúngem đã cố gắng hết sức nhưng không thể nào tránh khỏinhững sai, thiếu sót không đang có, kính mong thầy xem xétvà góp ý cho em để bài tiểu luận có thể hoàn thiện nhất

Một lần nữa em xin chân thành cám ơn quý thầy cô cũngnhư nhà trường Chúc thầy cô luôn có thật nhiều sức khoẻ vàgặt hái được nhiều thành công trên con đường sự nghiệpgiảng dạy của mình

Sinh viên thực hiện

(Ký tên)

LỜI MỞ ĐẦU

Công nghệ 4.0 đã mở ra một thế giới mới, nơi con ngườichúng ta chìm đắm vào nền văn minh tiên tiến với tốc độkhông ngừng Sự phát triển của công nghệ không chỉ tạo ranhững cơ hội mới mà còn thúc đẩy sự sáng tạo và tư duy củachúng ta Trong thời đại của mô hình và lối sống công nghệ,việc cập nhật kiến thức mới một cách liên tục và hiệu quả trởnên quan trọng để theo kịp xu hướng đang diễn ra.Thời đạicông nghệ 4.0 đã làm bùng nổ lên cuộc cách mạng “Khoa HọcCông Nghệ” ở Việt Nam nói riêng và các nước trên thế giới nóichung Để đáp ứng những nhu cầu này, sự hiểu biết và tiếpxúc với nhu cầu của nhân loại trở nên quan trọng hơn bao giờhết

Trong đó, giấc ngủ là một nhu cầu quan trọng của mỗi conngười Nhằm bổ trợ cho giấc ngủ, tạo ra một giấc ngủ ngon,sâu, thoải mái, tận dụng sức mạnh của công nghệ để sáng tạovà tạo ra những chiếc đèn ngủ mang tính đột phá, sáng tạo.Phục vụ cho nhu cầu có một giấc ngủ trọn vẹn trong đời sốngthì việc tạo ra các ứng dụng hoặc các website để phục vụ chongười dùng là điều tất yếu nhất trong đời sống kỹ thuật sốhiện nay Về mặt tối ưu hóa trong việc truy cập và dễ tiếp cậnvới người dùng thì nhu cầu tạo ra website là dễ dàng đáp ứngnhu cầu của hầu hết các người dùng nhất Việc xây dựng cáctrang web kinh doanh “giấc ngủ ngon” trở thành bước quantrọng để nâng cao trải nghiệm mua sắm và tạo ra không giantương tác giữa người mua và sản phẩm Sự kết hợp của thiếtkế giao diện sáng tạo, tính năng tương tác linh hoạt tạo rakhông gian mua sắm trực tuyến đẳng cấp và thú vị Với mụctiêu tạo ra được một trang web mang lại nhiều tính năng hữuích và mang lại trải nghiệm tuyệt vời nhất, áp dụng nhữngkiến thức đã học về HTML, CSS, JavaScript, Bootstrap, JQueryđể thực hiện

MỤC LỤC

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

1.1 Giới thiệu đề tài 1

3.2 Các vấn đề được giải quyết 29

3.3 Các vấn đề chưa được giải quyết 30

3.4 Hướng phát triển 30

TÀI LIỆU THAM KHẢO 32

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ònlà sự thuận tiện tối đa cho người tiêu dùng trong thời đại côngnghệ số Đèn ngủ, không chỉ là vật trang trí, mà còn là điểmnhấ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 đènngủ 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 1.1 Hình trang chủ Index

Giao diện trang web được thiết kế để đơn giản, dễ sử dụngvà tối ưu hóa cho mọi thiết bị, mang đến trải nghiệm mua sắmtrực tuyến linh hoạt và thuận lợi Website được chia thành cáctrang 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

b.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ẩmcủa cửa hàng

c.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ấcngủ …v.v

d.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

e.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ốtnhấ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ậntiện cho việc đặt hàng

g.Đă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 muahàng tiếp theo

h.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ẩmmuốn mua, số tiền phải chi trả và tiến hành thanh toán

i 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.1.1 Giao thức HTTP

Http (HyperText Transfer Protocol) là giao thức truyền tảisiêu văn bản được sử dụng trong www dùng để truyền tải dữ liệugiữa Web server đến các trình duyệt Web và ngược lại Giao thứcnà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ệtWeb, lúc này trình duyệt Web sẽ gửi 1 yêu cầu qua giao thứcHttp đế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

<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

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

Với mong muốn mang đến cho khách hàng trải nghiệm muasắ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ênmôi trường sống thoải mái và ấm áp Xu hướng mua sắm trựctuyến ngày càng gia tăng, và việc cung cấp một trang webchuyên nghiệp về đèn ngủ là cơ hội tốt để tiếp cận và phục vụnhu cầu mua sắm trực tuyến của mỗi con người

1.3 Mục tiêu đề tài

Tạo ra một trang web thân thiện với người dùng, có giaodiện đẹp, dễ sử dụng và tương thích trên mọi thiết bị Cung cấptrải nghiệm mua sắm trực tuyến thoải mái và thuận lợi chokhách hàng Xây dựng niềm tin và uy tín thông qua việc cungcấp những sản phẩm chất lượng, an toàn và đẹp mắt

1.4 Cơ sở lý thuyết1.4.1 HTML

Hình 1.3 HTML

HTML{là viết tắt của cụm từ{Hypertext MarkupLanguage{(tạm dịch là Ngôn ngữ đánh dấu{siêu vănbản).{HTML{được sử dụng để tạo và cấu trúc các thành phần

trong trang web hoặc ứng dụng, phân chia các đoạn văn,heading, titles, blockquotes… và{HTML{không phải là ngôn ngữlập trình

Một tài liệu HTML được hình thành bởi các phần tử HTML(HTML Elements) được quy định bằng các cặp thẻ (tag vàattributes)

1.4.2 JavaScript

Hình 1.4 JavaScript

JavaScript là một ngôn ngữ kịch bản (Scripting language)được dùng để tạo các script ở máy client (client-side script) vàmáy server (server-side script) Các script ở máy client đượcthực thi tại trình duyệt, các script ở máy server được thực hiệntrên server Chương này sẽ giới thiệu cho chúng ta về ngôn ngữJavascript, và cách chèn một script vào trong tài liệu HTML

HTML lúc đầu được phát triển như là một định dạng của tàiliệu có thể chuyển dữ liệu trên Internet Tuy nhiên, không lâu sauđó, trọng tâm của HTML nặng tính hàn lâm và khoa học dầnchuyển hướng sang người dùng thường nhật vì ngày nay ngườidùng xem Internet như là một nguồn thông tin và giải trí Cáctrang Web ngày càng mang tính sáng tạo và đẹp mắt hơn nhằmthu hút nhiều người dùng hơn Nhưng thực chất kiểu dáng và nộidung bên trong vẫn không thay đổi Và người dùng hầu nhưkhông thể điều khiển trên trang Web mỗi khi nó được hiển thị

Javascript được phát triển như là một giải pháp cho vấn đềnêu trên Javascript là một ngôn ngữ kịch bản được SunMicrosystems và Netscape phát triển Nó được dùng để tạo cáctrang Web động và tương tác trên Internet Đối với những ngườiphát triển HTML, Javascript rất hữu ích trong việc xây dựng cáchệ thống HTML có thể tương tác với người dùng

1.4.3 CSS

Hình 1.5 CSS

CSS{là chữ viết tắt của Cascading Style Sheets, nó là mộtngôn ngữ được sử dụng để{tìm và định dạng{lại các phần tửđược tạo ra bởi các ngôn ngữ đánh dấu (HTML) Nói ngắn gọnhơn là ngôn ngữ tạo phong cách cho trang web Bạn có thể hiểuđơn giản rằng, nếu HTML đóng vai trò định dạng các phần tửtrên website như việc tạo ra các đoạn văn bản, các tiêu đề,bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phầntử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, fontchữ, thay đổi cấu trúc…

CSS được phát triển bởi{W3C{(World Wide WebConsortium) vào năm 1996, vì HTML không được thiết kế đểgắn tag để giúp định dạng trang web

Bootstrap cũng cung cấp cho bạn khả năng tạo ra các

responsive designs một cách dễ dàng Hình 1.6 Bootstrap 5

1.4.5 JQUERY

Hình 1.7 JQUERY

jQuery†là một thư viện được viết bằng{JavaScript†đa tính

năng, nhanh và nhỏ gọn jQuery hoạt động theo phươngchâm{Write less – Do more{(viết ít hơn, làm nhiều hơn) Mục đíchcủa jQuery là làm cho việc sử dụng JavaScript trên trang web trởnên dễ dàng hơn

jQuery thực hiện rất nhiều tác vụ phổ biến đòi hỏi nhiềudòng mã JavaScript để hoàn thành và gói chúng thành cácphương thức mà có thể gọi bằng một dòng mã jQuery cũng đơngiản hóa rất nhiều thứ phức tạp từ JavaScript, AJAX call và thaotác DOM.

jQuery được tích hợp từ nhiều module khác nhau Cácmodule phổ biến của jQuery bao gồm:

Ajax:{Xử lý Ajax.Event:{Xử lý sự kiện.Atributes:{Xử lý các thuộc tính của đối tượng{HTML.DOM:{Xử lý Data Object Model

Effect:{Xử lý hiệu ứng.Form:{Xử lý sự kiện liên quan tới form

1.4.6 FONT AWESOME

Font Awesome là một thư viện chứa các Font chữ dạng kýhiệu thư viện dựa trên CSS và LESS Được tạo bởi Dave Gandydùng để sử dụng với Bootstrap, sau đó được tích hợp vàoBootstrapCDN.{

Font Awesome 5 được phát hành vào ngày 7/12/2017 với1.278 biểu tượng Các Font này cũng chính là icon thường đượcdùng để đưa vào thiết kế web Có nhiều định dạng file khácnhau như otf, eot, ttf, woff, svg…

Hình 1.8 FontAwesome

Dạng Font này có thể hoạt động trên hầu hết mọi trìnhduyệt như Google Chrome, Firefox, Opera… Tuy nhiên với cácphiên bản cũ như IE7 nó không hoạt động Hơn nữa IE7 đã trởnên lỗi thời và hầu như không còn được sử dụng

1.4.7 SCSS

Hình 1.9 SCSS

SASS/SCSS là một chương trình tiền xử lý CSS (CSS preprocessor) Nó giúp bạn viết CSS theo cách của một ngôn ngữ lập trình,

có cấu trúc rõ ràng, rành mạch, dễ phát triển và bảo trì code hơn Ngoài ra nó có rất nhiều các thư viện hỗ trợ kèm theo giúp bạn viết code CSS một cách dễ dàng vào đơn giản hơn Có rất nhiều loại CSS Preprocessor trong đó bao gồm SASS, Stylus hay LESS

SCSS sử dụng cú pháp giống với Ruby (vì đơn giản nó được thiết kế bởi

các lập trình viên Ruby) Có phần mở rộng là scss , SCSS ra đời sau SASS và cócú pháp viết tương tự như cách viết CSS

Các tính năng cơ bản của SCSS:

 Xếp chồng – Nested Rules Biến – Variable

 Kế thừa – Extends Import

 Vòng lặp Mệnh đề điều kiện IF

1.4.8 METADATA

Hình 1.10 Metadata

Metadata giữ vai trò cực kỳ quan trọng trong quá trình xây dựng website Theo đó, siêu dữ liệu làm nhiều chức năng chứa mô tả nội dung trang web, cùng với đó là hệ thống key word liên kết chặt chẽ với nội dung

Chính những metadata đó sẽ hiển thị trong kết quả tìm kiếm Điều này có nghĩa độ chính xác của chúng ảnh hưởng trực tiếp đến việc người dùng có thể truy cập vào website nào đó hay không Phần lớn thông tin đều thể hiện theo dạng thẻ meta

Jack E Myers - nhà sáng lập của Metadata Information Partners lần đầu sử dụng thuật ngữ metadata từ năm 1969 Đến năm 1986, Myers chính thức đăng kýnhãn hiệu metadata

Trong thực tế, metadata thường thể hiện theo nhiều định dạng Chẳng hạn như metadata trong thư viện, metadata trong mạng internet và metadata trong tệptin

1.4.9 LESS CSS

Hình 1.11 Less Css

LESS{là một trong các CSS preprocessor, hỗ trợ bạn viết mã

CSS thể hiện định dạng giao diện website theo hướng: Đơn giản hơn

 Ngắn gọn hơn. Hiệu quả hơn. Dễ quản lý hơn qua việc sử dụng các thành phần hỗ trợ từ LESS như biến,

mixins, toán tử và hàm

Mixins cho phép gắn toàn bộ thuộc tính của một class trong

CSS vào trong class khác bằng một cách khá đơn giản là thêm tên class này như một thuộc tính của class kia Bạn có thể hiểu như việc bạn gọi 1 class đã định nghĩa trước đó trong 1 class bất kỳ nào đang định nghĩa để sử dụng lại các giá trị của chúng

o Canva: Thiết kế logo, icon, background

Hình 1.15 ColorPick

 PageRuler

Hình 1.16 PageRuler

CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB2.1 Cây thư mục

Thư mục gốc: chứa các file trang web (index.html, about.html v.v.v) và các thư mục chứa các file css, javascript,

hình ảnh và các sản phẩm Trong thư mục gồm cóo Thư mục TN: Chứa các file định dạng css và javascript

cho website

Trong thư mục TN gồm có:

 Thư mục den: Chứa các sản phẩm liên quan đến trang Web

 Thư mục Css: chứa các file liên quan có đuôi css gồm có ablout.css, allnews.css, cart.css, contact.css, responsive, style.css, các file của thư viện…

 Thư mục Fonts: chứa các file font.

 Thư mục Img: chứa các file hình ảnh.

 Thư mục JS: chứa các file liên quan có đuôi js gồm có

main.js các file của các thư viện Hỗ trợ xử lý định dạng trongwebsite, xử lý chức năng các flugin của website

o Các trang web có đuôi html như index.html, about.html, checkout.html, cart.html, shop.html,contact.html v.v.vo Sơ đồ liên kết các trang Web:

2.2 Tài nguyên sử dụng xây dựng Website2.2.1 Mã màu

2.2.2 Data

Các hình ảnh sản phẩm, thông tin, giá bán và thông số sản phẩm được tham khảo qua các web bán hàng trên Google, các trang bán hàng tromg ứng dụng Shopee, Lazada,

TiktokShop…