(Tiểu luận) đề tài thiết kế giao diện cho website cửa hàng bán đồ ăn nhanh

Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: chỉ cần có mộtmáy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức… cả thế giới về

Lớp : 20IT12 || 20IT2

LỜI NÓI ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tốmang tính quyết định trong hoạt động của các chính phủ, tổ chức, cũng như của các công ty, nóđóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ

Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng điện tử, công nghệ thông tincũng được những công nghệ có đẳng cấp cao và lần lượt chinh phục hết đỉnh cao này đến đỉnhcao khác Mạng Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trởnên một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàncầu

Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: chỉ cần có mộtmáy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức… cả thế giới về vấn đề

mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hình ảnh và thậm chí đôi lúc có cả những

âm thanh nếu bạn cần… Bằng internet, chúng ta đã thực hiện được nhiều công việc với tốc độnhanh hơn và chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này, đã thúc đẩy

sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thế giới, làmbiến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người

Trong hoạt động sản xuất, kinh doanh, giờ đây, thương mại điện tử đã khẳng định được vai tròxúc tiến và thúc đẩy sự phát triển của doanh nghiệp Đối với một cửa hàng hay shop, việc quảng

bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khác hàng sẽ là cầnthiết Vậy phải quảng bá thế nào đó là xây dựng được một Website cho cửa hàng của mình quảng

bá tất cả các sản phẩm của mình bán

Vì vậy, chúng em đã thực hiện đồ án “THIẾT KẾ GIAO DIỆN CHO WEBSITE CỬA HÀNGBÁN ĐỒ ĂN NHANH”

LỜI CẢM ƠN

Chúng em xin gửi lời cảm ơn chân thành tới nhà trường, khoa Khoa học máy tính đã tận tình chỉbảo, góp ý và tạo điều kiện cho chúng em hoàn thành đề tài nghiên cứu Đồ án cơ sở 1 một cáchtốt nhất

Chúng em xin cảm ơn ThS Đặng Thị Kim Ngân đã nhiệt tình hướng dẫn chúng em trong quátrình thực hiện báo cáo đề tài nghiên cứu

Trong quá trình thực hiện đề tài nghiên cứu, chúng em đã cố gắng nỗ lực, tuy nhiên không tránhkhỏi sai sót Chúng em mong nhận được sự góp ý của thầy cô giáo, và từ phía hội đồng để đề tàinghiên cứu của chúng em được hoàn thiện hơn

Chúng em xin chân thành cảm ơn!

Đà nẵng, tháng 05 năm 2021

NHẬN XÉT (Của giảng viên hướng dẫn)

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

MỤC LỤC Contents

Phần mở đầu 1

1 Tổng quan 1

1.1 Bối cảnh thực hiện 1

1.2 Vấn đề cần giải quyết 1

1.3 Nội dung cần thực hiện 1

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

2.1 Phương pháp 1 1

2.2 Phương pháp 2 2

2.3 Phương pháp 3 2

2.4 Kết luận 2

Chương 1 Cơ sở lý thuyết 3

1.1 Cơ sở lý luận và thực tiễn 3

1.1.1 Website là gì? 3

1.1.2 Lợi ích của Website 3

1.1.3 Tổng quan HTML 4

1.1.4 Tổng quan CSS 4

1.1.4 Tổng quan về ngôn ngữ lập trình JavaScript 5

1.1.5 Giới thiệu thư viện hình ảnh Font Awesome 6

1.1.6 Tổng quan về thức ăn nhanh 6

1.2 Giới thiệu đồ án 7

1.2.1 Công nghệ được sử dụng 7

1.2.2 Bố cục Website 8

1.2.3 Quy mô Website 9

Chương 2 Phân tích thiết kế hệ thống 10

2.1 Mô hình tổng quan của hệ thống nghiên cứu 10

2.1.1 Phân tích thiết kế hướng đối tượng 10

2.1.2 Mô tả hệ thống 10

2.2 Thiết kế chi tiết 10

Chương 3 Cài đặt xây dựng demo 12

3.1 Giao diện trang chủ 12

3.1.1 Thanh navigation 12

3.1.2 Phần header 12

3.1.3 Phần nội dung 12

3.1.4 Phần footer 17

3.2 Giao diện trang đặt bàn 17

3.3 Giao diện trang thực đơn 18

3.4 Giao diện trang blog 19

3.5 Giao diện trang về chúng tôi 21

3.6 Giao diện trang liên hệ 22

Kết luận và hướng phát triển 24

1 Kết luận 24

2 Hướng phát triển 24

DANH MỤC CÁC BẢNG

Bảng 1 – So sánh các phương pháp nghiên cứu 2

DANH MỤC HÌNH

Hình 1.1 – Logo HTML 4

Hình 1.2 – Logo CSS 5

Hình 1.3 – Logo JavaScript 5

Hình 1.4 – Logo Font Awesome 6

Hình 1.5 – Sự cạnh tranh của các thương hiệu thức ăn nhanh 7

Hình 1.6 – Giao diện đẹp nhờ công nghệ hiện đại 8

Hình 1.7 – Bố cục hợp lý 9

Hình 3.1 – Thanh navigation 12

Hình 3.2 – Header của trang chủ 12

Hình 3.3 – Phần nội dung 1: Đặt bàn 13

Hình 3.4 – Phần nội dung 2: Thực đơn 13

Hình 3.5 – Phần nội dung 3: Về chúng tôi 14

Hình 3.6 – Phần nội dung 4: Điểm nổi bật 14

Hình 3.7: Phần nội dung 5: Đội ngũ 15

Hình 3.8 – Phần nội dung 6: Blog 15

Hình 3.9 – Phần nội dung 7: Liên hệ 16

Hình 3.10 – Màu chủ đạo 1 của website - màu đỏ 16

Hình 3.11 – Màu chủ đạo 2 của website - màu xanh 16

Hình 3.12 – Phần footer 17

Hình 3.13 – Phần đặt bàn 17

Hình 3.14 – Thư viện JS giúp nhập ngày tháng đơn giản hơn 18

Hình 3.15 – Thực đơn sử dụng Menu Tab 18

Hình 3.16 – Phần nội dung bài viết 19

Hình 3.17 – Phần bài đăng mới 20

Hình 3.18 – Phần xem bình luận 20

Hình 3.19 – Phần nhập bình luận 21

Hình 3.20 – Phần về chúng tôi 22

Hình 3.21 – Phần liên hệ 22

Phần mở đầu

1 Tổng quan

1.1 Bối cảnh thực hiện

- Đơn vị khảo sát: Nhà hàng FastFood – chuyên phục vụ các loại thức ăn nhanh phổ biến tại Việt

Nam và trên thế giới

- Hình thức kinh doanh: mua mang về hoặc đặt bàn tại nhà hàng khi khách hàng trực tiếp đến nhàhàng

1.3 Nội dung cần thực hiện

- Thiết kế một Website giúp dễ dàng quảng bá thương hiệu của nhà hàng đến nhiều khách hàng hơn

- Ngoài việc quảng bá thương hiệu, kết hợp hình thức bán hàng qua mạng vào Website bằng cáchcung cấp thực đơn chi tiết và tích hợp chức năng đặt hàng trực tiếp tại Website

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

2.1 Phương pháp 1

- Tên phương pháp: Nghiên cứu thực tế

1

- Cách thực hiện: Khảo sát tại các quán, nhà hàng bán thức ăn nhanh.

2.2 Phương pháp 2

- Tên phương pháp: Nghiên cứu qua sách báo

- Cách thực hiện: Mượn từ thư viện về nghiên cứu

2.3 Phương pháp 3

- Tên phương pháp: Nghiên cứu qua internet

- Cách thực hiện: thực hiện đọc thông tin, xem mã nguồn bằng trình duyệt

Nghiên cứu thực tế - Khách quan, trung

- Nguồn thông tin - Kém ưu việtchưa nhiều, không

được cập nhập

- Không biết chọn - Ưu việt nhấtlọc thông tin sẽ gây

rối thông tin

Bảng 1 – So sánh các phương pháp nghiên cứu

2.4 Kết luận

- Kết hợp thực hiện cả 3 phương pháp nghiên cứu nhưng ưu tiên sử dụng phương pháp 3 nhiều hơn

2

Chương 1 Cơ sở lý thuyết

1.1 Cơ sở lý luận và thực tiễn

1.1.1 Website là gì?

Website hay còn gọi là trang web, là một tập hợp trang web, thường chỉ nằm trong một tên miềnhoặc tên miền phụ trên World Wide Web của Internet Một trang web là tập tin HTML hoặcXHTML có thể truy nhập dùng giao thức HTTP Trang mạng có thể được xây dựng từ các tệp tinHTML (trang mạng tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (trang mạng động).Trang mạng có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP, Java, )

Để một website hoạt động cần 3 yếu tố:

Cần có tên miền (domain)

Nơi lưu trữ website (server)

Nội dung các trang web hoặc cơ sở dữ liệu thông tin

1.1.2 Lợi ích của Website

- Tăng khả năng tiếp cận khách hàng

- Tăng năng lực cạnh tranh

- Cập nhật thông tin một cách nhanh chóng

- Dễ dàng lấy ý kiến phản hồi từ khách hàng

- Phân tích sản phẩm

1.1.3 Tổng quan HTML

- HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu vănbản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web.Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết

“phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,

…rất nhiều

Hình 1.2 – Logo CSS

1.1.4 Tổng quan về ngôn ngữ lập trình JavaScript

- JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp phát triển từ C Giốngnhư C, JavaScript có khái niệm từ khóa, do đó, JavaScript gần như không thể được mở rộng.Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output) riêng

- Thư viện Javascript nổi tiếng:

Bộ khung Prototype kết hợp với thư viện Scriptaculous

Thư viện jQuery, tiết kiệm thời gian viết mã lệnh cũng như cung cấp các hàm tương tác với DOM trên các trình duyệt khác nhau

Nodejs, hệ thống chương trình giúp chạy Javascript ngoài trình duyệt

Hình 1.3 – Logo JavaScript

5

1.1.5 Giới thiệu thư viện hình ảnh Font Awesome

- Font Awesome là một bộ công cụ phông chữ và biểu tượng dựa trên CSS và Less Nó được tạo

ra bởi Dave Gandy để sử dụng với Bootstrap, và sau đó được tích hợp vào BootstrapCDN FontAwesome có 38% thị phần được báo cáo trong số các trang web sử dụng tập lệnh phông chữ củabên thứ ba trên nền tảng của họ, xếp nó ở vị trí thứ hai sau Google Fonts

Hình 1.4 – Logo Font Awesome

1.1.6 Tổng quan về thức ăn nhanh

- Việt Nam với hơn 80 triệu dân, trong đó 65% là dân số trẻ ở độ tuổi dưới 35 và tốc độ tăngtrưởng kinh tế vượt bậc trong vòng 5 năm trở lại đây( từ 2005-2010) đang là thị trường vô cùnghấp dẫn đối với các tập đoàn kinh doanh thức ăn nhanh (fastfood)

- Theo số liệu khảo sát 14.134 người tiêu dùng ở 28 quốc gia của AC Nielsen vào cuối năm 2004cho thấy châu Á là thị trường tiêu thụ thức ăn nhanh tăng trưởng nóng nhất trên thế giới Chỉriêng khu vực châu Á Thái Bình Dương, có 30% người tiêu dùng ăn ở ngoài ít nhất 1 lần tuần

- Cụ thể tỷ lệ phần trăm dân số ăn ở ngoài gia đình ít nhất 1 tuần lần là Hồng Kông 61%, Malaysia 59%, Philippines 54%, Singapore 50%

- Cũng theo kết quả nghiên cứu của AC Nielsen, Việt Nam là thị trường sơ khai của fastfood khimới có khoảng 8% người tiêu dùng dùng thức ăn nhanh từ 1-3 lần tháng Con số này quá ít so vớicác nước lân cận như Thái Lan, Malaysia, Trung Quốc, Ấn Độ có hơn 70% người tiêu dùng ănthức ăn nhanh ít nhất 1 lần tháng

6

- Và số lượng khoảng 90% người tiêu dùng Việt Nam chưa quen với thức ăn nhanh sẽ là cơ hội

để các nhà kinh doanh khai thác Ông Leo Maglasang, người quản lý đại diện cho Tập đoànJollibee tại Việt Nam nói: "Chúng tôi đánh giá đây là thị trường tiềm năng và sẽ tăng trưởng rấttốt trong thời gian sắp tới nên đích thân tập đoàn sẽ đầu tư vốn lớn hàng triệu USD, tổ chức cáclớp học bài bản, đưa người Việt Nam ra nước ngoài huấn luyện để chuẩn bị mở hàng loạt cửahàng thức ăn nhanh tại các tỉnh và thành phố lớn trên toàn Việt Nam"

- Cho đến năm 2004, nếu chỉ tính các điểm bán thiết kế theo hệ thống có thương hiệu như KFC,Lotteria, Jollibee, Chicken Town, Manhattan thì có 27 cửa hàng, bên cạnh đó còn có hơn 30 nhàhàng, tiệm bánh quy mô nhỏ đặt trong các siêu thị, trung tâm thương mại, khu vực dân cư đôngđúc chuyên bán bánh pizza, hamburger, mì Ý, salad trộn với các hiệu Win Chicken, Monaco,Hollywood, Mama Đó là chưa kể đến hệ thống hàng trăm xe đẩy, tiệm bán thức ăn nhanh theokiểu Việt Nam với bánh tươi, bánh mì kẹp thịt, các loại bánh làm từ gạo, nếp

Hình 1.5 – Sự cạnh tranh của các thương hiệu thức ăn nhanh

- Trình biên dịch: Nopad++, Sublime và VS code

- Trình duyệt: Google Chrome, Cốc Cốc và Microsoft Edge

7

1.2.2 Bố cục Website

- Bố cục đơn giản, hiện đại giúp mang đến cảm giác dễ chịu cho người dùng

- Thanh Menu để ở vị trí dễ quan sát, phân loại danh mục rõ ràng và hợp lý tương ứng với tên Menu đã lập ra

- Kết hợp tính năng tìm kiếm giúp khách hàng có thể nhanh nhất tìm ra sản phẩm mà họ muốn chọn

8

1.2.3 Quy mô Website

- Gồm 6 trang chính và vài trang phụ

- Mỗi trang có bố cục khác nhau nhưng vẫn dựa trên một phong cách chung, xuyên suốt toàn bộ trang web

9

Chương 2 Phân tích thiết kế hệ thống

2.1 Mô hình tổng quan của hệ thống nghiên cứu

2.1.1 Phân tích thiết kế hướng đối tượng

Truy cập, chỉnh sửa, thêm mới, xóa bớt, cập nhật, các nội dung trên website

Xem đánh giá của khách hàng

Xem, tiếp nhận thông tin của khách hàng đã đặt qua website

2.2 Thiết kế chi tiết

- Trang chủ: giao diện tổng quan Website

- Trang Đặt bàn: giao diện đặt hàng

- Trang thực đơn: giao diện thực đơn các món ăn

- Trang Blog: giao diện các bài viết liên quan

10

- Trang Về chúng tôi: giao diện thông tin về đội ngũ nhân viên, nhà hàng.

- Trang Liên hệ: giao diện thông tin liên hệ, địa chỉ nhà hàng

11

Chương 3 Cài đặt xây dựng demo

3.1 Giao diện trang chủ

3.1.1 Thanh navigation

Hình 3.1 – Thanh navigation

- Thanh cân đối, dễ nhìn, màu sắc dễ nhìn

- Thanh gồm logo nhà hàng nằm bên trái và các menu lựa chọn nằm bên phải

- Thanh luôn được cố định tại đầu trang

- Thiết kế bằng các lớp navbar của Bootstrap 4

3.1.2 Phần header

Hình 3.2 – Header của trang chủ

- Thiết kế đơn giản nhưng thu hút người xem

- Thiết kế bằng Bootstrap 4 + CSS

3.1.3 Phần nội dung

12

- Phần nội dung đơn giản nhưng đầy đủ nội dung, bố cục hợp lí, tạo cảm giác dễ chịu cho người xem.

- Phần này thiết kế bằng Bootstrap, CSS, JavaScript, iframe của google map và FontAwesome

Hình 3.3 – Phần nội dung 1: Đặt bàn

Hình 3.4 – Phần nội dung 2: Thực đơn

13

Hình 3.6 – Phần nội dung 4: Điểm nổi bật

14

Hình 3.8 – Phần nội dung 6: Blog

15

- Các chi tiết phối hợp hài hòa, thống nhất với 2 màu chủ đạo của trang: xanh và đỏ.

Hình 3.10 – Màu chủ đạo 1 của website - màu đỏ

Hình 3.11 – Màu chủ đạo 2 của website - màu xanh

16

3.1.4 Phần footer

Hình 3.12 – Phần footer

- Được thiết kế đơn giản, màu sắc nhẹ nhàng, hài hòa

- Bố cục cân đối, hợp lí

- Thể hiện đầy đủ thông tin cần có: địa chị, liên kết và ô nhận thông báo

3.2 Giao diện trang đặt bàn

Hình 3.13 – Phần đặt bàn

- Form này giúp khách hàng điền thông tin và tiến hành đặt hàng

17

- Giúp khách hàng nhập thông tin một cách nhanh chóng và chính xác hơn nhờ sử dụng JS.

3.3 Giao diện trang thực đơn

Hình 3.15 – Thực đơn sử dụng Menu Tab

- Giúp khách hàng thao tác xem sản phẩm trong thực đơn thuận tiện và chuyên nghiệp hơn

18

3.4 Giao diện trang blog

Hình 3.16 – Phần nội dung bài viết

- Thiết kế bố cục đẹp mắt với phần bên trái chứa nội dung bài viết

19

- Các bài viết mới được bố trí xếp theo hàng dọc ở phía bên phải của trang.

Hình 3.18 – Phần xem bình luận

20

- Và ở phần bên dưới với giao diện được thiết kế giúp khách hàng xem bình luận của mọi người hoặc để lại chính bình luận của bản thân.

3.5 Giao diện trang về chúng tôi

21

- Phần này giúp cung cấp thông tin của nhà hàng đến với thực khách.

3.6 Giao diện trang liên hệ

Hình 3.21 – Phần liên hệ

22

- Khách hàng có thể tìm thấy địa chỉ, thông tin liên hệ hoặc để lại đánh giá, góp ý tại trang này.

23

Kết luận và hướng phát triển

1 Kết luận

- Đánh giá được thị trường thức ăn nhanh

- Thực hiện thành công phần giao diện cho Website bằng HTML, CSS và JavaScript

2 Hướng phát triển

- Tiếp tục phát triển phần giao diện thêm thẩm mỹ

- Bổ sung cơ sở dữ liệu

- Hoàn thành website hoàn chỉnh bằng những ngôn ngữ lập trình sẽ được học trong các kì tới

24