Tiểu luận thiết kế web tên Đề tài thiết kế giao diện người dùng cho website bán hàng thức ăn nhanh

LOI MO DAU Trong xã hội hiện đại 5.0 và công nghệ 4.0 hiện nay với sự phát triển mạnh mẽ của công nghệ thông tin và sự bùng nổ của kỹ thuật số, Internet ngày càng giữ vai trò quan trọng

TRUONG DAI HOC NGUYEN TAT THANH KHOA CONG NGHE THONG TIN

NGUYEN TAT THANH

TIEU LUAN THIET KE WEB

Tén dé tai: THIET KE GIAO DIEN NGƯỜI DÙNG CHO WEBSITE BAN HANG THUC AN NHANH

Giảng viên hướng dan: DANG ĐỨC TRUNG

Sinh viên thực hiện: HUỲNH TẤN ĐẠT

MSSV: 2200007064

Khoá: 2022-2026

Tp HCM, tháng 09 năm 2023

TRUONG DAI HOC NGUYEN TAT THANH KHOA CONG NGHE THONG TIN

NGUYEN TAT THANH

TIEU LUAN THIET KE WEB

Tén dé tai: THIET KE GIAO DIEN NGƯỜI DÙNG CHO WEBSITE BAN HANG THUC AN NHANH

Giảng viên hướng dan: DANG ĐỨC TRUNG

Sinh viên thực hiện: HUỲNH TẤN ĐẠT

MSSV: 2200007064

Khoá: 2022-2026

Tp HCM, tháng 09 năm 2023\

LOI MO DAU Trong xã hội hiện đại 5.0 và công nghệ 4.0 hiện nay với sự phát triển mạnh mẽ của công nghệ thông tin và sự bùng nổ của kỹ thuật

số, Internet ngày càng giữ vai trò quan trọng trong các lĩnh vực khoa học kĩ thuật và đời sống

Các sản phẩm nội dung kỹ thuật số ngày càng được đổi mới và đa

dạng hơn, dần tiếp cận đến nhiều phân khúc người tiêu dùng Đối với Việt Nam, công nghệ thông tin mới chỉ phát triển trong vài năm trở lại đây nhưng những bước phát triển đó đã cho thấy Việt Nam là một nước có tiềm năng về lĩnh vực công nghệ thông tin

Thời đại công nghệ thông tin bùng nổ, cùng với sự phát triển của nền tảng online đã tạo ra một xu hướng mới là Kinh doanh Online Ngành công nghệ thông tin Việt Nam tuy còn non trẻ nhưng đang từng bước bứt phá được những thành công trong việc áp dụng tin học vào việc phát triển kinh tế - xã hội Hơn nữa, thương mại điện tử còn giúp con người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thông tin theo nhu cầu và sở thích của con người

Giờ dây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý

muốn và các website bán hàng trên mạng sẽ giúp chúng ta làm được điều đó Chính vì vậy, trong bài tiểu luận này em đã chọn đề tài:

“Thiết kế giao diện người dùng cho website bán thức ăn nhanh”

LOI CAM ON

Lời đầu tiên, em xin được gửi lời cảm ơn chân thành nhất đến thầy Đặng Đức Trung Trong quá trình học tập và tìm hiểu môn Thiết kế Web, em đã nhận được rất nhiều sự quan tâm, giúp đỡ, hướng dẫn tâm huyết và tận tình của thầy/cô Thầy đã giúp em

tích lũy thêm nhiều kiến thức về môn học này để có thể hoàn

thành được bài tiểu luận về đề tài: Thiết kế giao diện phía người dùng cho website bán hàng thức ăn nhanh

Trong quá trình làm bài chắc chắn khó tránh khỏi những thiếu

sót Do đó, em kính mong nhận được những lời góp ý của

thầy/cô để bài tiểu luận của em ngày càng hoàn thiện hơn

Em xin chân thành cảm ơn!

BM-ChT-

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT KY THI KẾT THÚC HỌC PHẦN

THÀNH HỌC KỲ III NĂM HỌC 2022 - 2023

PHIEU CHAM THI TIEU LUAN/DO AN

"ma Tham gia đóng góp:

đc kh TK KT TK TK TK tha Tham gia đóng góp:

Ngày th: QQQQQQSn SH HH nh hé Phòng thi:

Đề tài tiểu luận/báo cáo của sinh viên : ch reee:

Phần đánh giá của giảng viên:

1 Tên Đề Tài HH HH ng nEnkkk nế nên 8

2 Mục tiêu cảu Đề Tài cccc cuc nnn HH Tnhh Ho 8

3 Ý nghĩa của Đề Tài c0 1v S cv S ngàng ng kg kệt 8

4 Đối tượng của Đề Tài cnnnnnnnnnnnnnn ng nho 8

5 Một số trang chính của Đề Tài tt nhe 8

CHƯƠNG 2 GIỚI THIỆU CÔNG NGHỆ - cà 9

1 Giới thiệu về HTML cc c0 H HS SH HH ng ng nh dư 9 1.1 HTML là QÌ? cc cv nkn nh nn ng nn ng nh ghe 9

1.2 Công dụng của HTML nh Heo 9 1.3 Định dạng của HTML ‹ cv hhree 9

2 Giới thiệu về Visual Studio Code nho 9

4 Ngôn ngữ JaVaSCrIDỂ ng nnnnnn nhe geno 10

CHƯƠNG 3 XÂY DỰNG TRANG WEEB 11

Li TRANG CHUL ceecccccceeccceeeeceeeseeseeeseeeeeeeeeseeeeeseseeeraeeeeataeeeaesenanss 11

4.3 Code thiét KE n.((aốố ố 15

3 Hướng phát triển của đồ án nh Hrree 19

DANH MỤC TÀI LIỆU TAM KHẢO csssssssssxz 20

DANH MỤC HÌNH

I2 12

Ki HIEU CAC CUM TU VIET TAT

, CHUONG1 | TONG QUAN VE Dé TAI

1 Tên Đề Tài

+ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG CHO WEBSITE BÁN THỨC ĂN

NHANH

2 Mục tiêu của Đề Tài

+ Thiết kế Website bán thức ăn nhanh

3 Y nghĩa của Đề Tài

+ Thiết kế giao diện dễ tiếp cận với người tiêu dùng và mang lại cảm giác thân thuộc

+ Quảng bá thương hiệu

4 Đối tượng của Đề Tài

+ Đối tượng chủ yếu là các sản phẩm thức ăn nhanh

5 Một số trang chinh của Website

+ Trang chủ: Đây là trang giới thiệu sơ lược về các sản phẩm của

cửa hàng

+ Trang giới thiệu: Đây là trang giúp cho khách hàng tìm hiểu them

về thông tin của cửa hàng

+ Trang Sản Phẩm: Đây là trang mà khách hàng có thể xem các sản

_ CHUONG 2 - GIỚI THIỆU CÔNG NGHỆ

Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Web browers) cách hiển thị các thành phần của trang như text và graphics

HTML là ngôn ngữ dùng để mô tả những thông tin cần trình bày trong một trang web

HTML không phải là một ngôn ngữ lập trình, HTML chỉ đơn thuần

là một ngôn ngữ

đánh dấu (Markup Language)

Các tập tin được tạo bởi HTML có thể được mở để hiển thị, trình

bày nội dung bằng

Thiết kế được nội dung và hình thức của trang web

Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin

trực tuyến bằng cách dùng các liên kết được chèn vào trang web Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người

Có thể viết trên nhiều trình soạn thảo: Microsoft Fontpage,

notepad và được sử dụng nhiều nhất đó là adobe dreamweaver

và visual studio code

2 Giới thiệu về Visual Studio Code

Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo các đoạn code để hỗ trợ trong quá trình thực hiện xây dựng,

thiết kế website một cách nhanh chóng Visual Studio Code hay còn được viết tắt là VS Code Trình soạn thảo này vận hành mượt

mà trên các nền tảng như Windows, macOS, Linux Hơn thế nữa,

VS Code còn cho khả năng tương thích với những thiết bị máy tính

có cấu hình tầm trung vẫn có thể sử dụng dễ dàng

Visual Studio Code hỗ trợ đa dạng các chức năng Debug, đi kèm với Git, có Syntax Highlighting Đặc biệt là tự hoàn thành mã thông minh, Snippets, và khả năng cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép các lập trình viên thay đối Theme, phím tắt, và đa dạng các tùy chọn khác Mặc

dù trình soạn thảo Code này tương đối nhẹ, nhưng lại bao gồm các tính năng mạnh mẽ

Dù mới được phát hành nhưng VSCode là một trong những Code Editor mạnh mẽ và phổ biến nhất dành cho lập trình viên Nhờ hỗ trợ nhiều ngôn ngữ lập trình phổ biến, tích hợp đầy đủ các tính năng và khả năng mở rộng, nên VSCode trở nên cực kì thân thuộc

với bất kì lập trình viên nào

màu nền, đường viền, hình nền, canh lề, chừa lề,

Cần dùng CSS vì nó cho phép định nghĩa kiểu và cách hiển thị các phần tử

Netscape phat trién

JavaScript duoc phat trién tur Livescript Cua Netscape

Các ứng dụng client chạy trên một trình duyệt web thông thường

Hầu hết

các trình duyệt web hiện nay đều hỗ trợ javascript

= Cung cấp sự tương tác người dùng

“Thay đổi nội dung động

Xác nhận tính hợp lệ của dữ liệu

_—— CHƯƠNG 3 XÂY DỰNG TRANG WEB

Hinh 3.1.1 Giao dién Trang chu 1

- Trang chu thé hién chu dé cua trang web ban cac san pham,

có các mục trên thanh tùy trọn như giới thiệu, thực đơn, về chúng tôi và liên hệ

1.2 Kỹ thuật thiết kế:

- Layout dung thé <div> , <li>,<ul>,<a> <nav>, <i>,<hr>,

<br>, <input>, <button>

- Kỹ thuật thiết kế

* Hình ảnh : img src,background : url

* Liên kết: <a href>

* Định dang: CSS: display, padding, background, align- items

1.3 Code thiét ké:

Hinh 3.1.2 Code thiét ké Trang chu

Hình 3.1.3 Code thiết kế Trang chủ có sử dụng JavaScript

2 Trang giới thiệu

cho bike be của bạn tràn đây nàng lượng và luôn tỐt cho sức khéo

Tình 3.2.1 Giao điện giỏi thiệu được đặt bên dưới Banner Trang chu

- Gidi thiéu service tai cua hang, khang dinh thuong hiệu,

độ tin cậy và sự uy tín

2.2 — Kỹ thuật thiết kế

- Layout dung thẻ <div>, <a>, <p>

2.3

- Ky thuật thiết kế

o Hinh anh: img src, background color

o Dinh dang CSS: margin, width, height

Hinh 3.3.1 Giao điện trang Menu

thông tin chỉ tiết sản phẩm, hình ảnh sản phẩm, và thêm sản phẩm vào giỏ hàng, đặt hàng

Kỹ thuật thiết kế:

Layout dùng thẻ <div, <a>, <p>

- Ky thuat thiét ké:

o Hinh anh: img src

o Lién ké <a href>

o Dinh dang: CSS: margin, padding

- Ky thuat thiét ké:

* Hinh anh : img src

* Lién két: <a href>

* Dinh dang: CSS: margin, text-align, border, color, background color, padding

* Dinh dang: CSS: margin, text-align, border, color, background color, padding

6.2 Ky thuat thiét ké

- Layout dung thé <div> , <a>, <p>, <h1l>

- Kỹ thuật thiết kế:

* Liên kết: <a href>,<div> , <a>, <p>, <hl>, <form>,

<label>, <input>, <button>

* Định dang: CSS: margin, text-align, border, color, background color, padding

b>Password</b label placeholder=

Hình 3.6.2 Code thiết kế trang web Đăng nhập

Hinh 3.7.1 Code CSS cho header va banner 1

zr eeems BOgeN ^ em 2 22250

Hinh 3.7.2 Code CSS cho phan footer

CHUONG 4 KET LUAN

Trong thời buổi công nghệ hiện đại ngày nay, việc buôn bán qua mạng đã trở nên phổ biến với hầu hết mọi người Đây cũng là xu hướng trong xã hội hiện nay khi mọi người chỉ với một vài thao tác đơn giảng là đã có thể đặt mua cho mình những sản phẩm ưng ý

một cách dễ dàng và không cần phải tốn thời gian để đi đến nơi

mua Việc mua bán hàng hóa online giúp tiết kiệm rất nhiều thời gian và tiền bạc của người tiêu dùng, người tiêu dùng có thể thỏa mái lựa chọn những sản phẩm với nhiều mức giá đa dạng khác nhau phù hợp với nhu cầu của mỗi con người

Và website về thức ăn nhanh

1 Ưu điểm

- Hình ảnh minh họa đa dạng

- - Màu sắc bắt mắt phù hợp với đề tài thức ăn

- Giúp người dùng dễ dàng tiếp cận và sử dụng trang web

2 Hạn chế

- _ Lối thiết kế còn đơn giản

- _ Vì là tiểu luận thiết kế giao diện của người dùng nên chưa

tiếp cận đến CSDL và server nên web sẽ còn đơn sơ và

chưa cho vào hoạt động được

- Chưa sử dụng hết các cú pháp đã học

3 Hướng phát triển của đồ án

- Phat tri & thanh 1 trang web ho đ ộg vêê bán thỨc ăn nhanh tại thị trường Việt

Nam

- Binh hướng tương lai sẽ trở trành mỘt trang web phổ biền với mọi người dân Việt

Nam và phù hợp với mọi lứa tuổi.

DANH MUC TAI LIEU THAM KHAO

1, Eric A Meyer (2013), CSS Text

2, George-Alexandru loana (2014), HTMLS & CSS3: The Complete Manual

3 David Sawyer McFarland(2012), CSS3L: the missing manual

4, Eric A Meyer (2015), Basic Visual Formatting in CSS

5 David Matuszek — Quick JavaScript

6 Tài liệu môn Thiết kế Web - GV Đặng Đức Trung - ĐH Nguyễn Tất Thành