(Tiểu luận) thiết kế web (12) đề tài xây dựng website quản lí nhà hàng gold

Chương 1 Giới thiệu1.1 Tên đề tài “XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG GOLD” 1.2 Giới thiệu về dự án - Với sự phát triển của công nghệ thông tin như hiện nay, chúng ta có thể dễ dàng tạo r

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

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

KHOA KHOA HỌC MÁY TÍNH

THIẾT KẾ WEB (12)

ĐỀ TÀI: XÂY DỰNG WEBSITE QUẢN LÍ NHÀ HÀNG GOLD

Giảng viên hướng dẫn: ThS LƯƠNG KHÁNH TÝ

Đà nẵng, tháng 06 năm 2022

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

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

THIẾT KẾ WEB (12)

XÂY DỰNG WEBSITE QUẢN LÍ NHÀ HÀNG GOLD

Đà Nẵng, tháng 06 năm 2022

MỞ ĐẦU

Nhà Hàng GOLD Ẩm Thực Việt có địa chỉ tại số 470 - Trần Đại Nghĩa - Ngũ Hành Sơn - Đà Nẵng Nhà hàng sở hữu một không gian ẩm thực ấm cúng với sự kết hợp tinh tế giữa văn hóa ẩm thực Việt Nam và các nền văn hóa ẩm thực

Á Đông Đến với Nhà Hàng GOLD Ẩm Thực Việt, khách hàng có thể thưởng thức những món ăn độc đáo, sáng tạo và mang đậm dấu ấn đặc trưng Trong đó, ấn tượng và nổi bật nhất với thiết kể ẩm thực chủ đạo gồm những món ăn đặc sắc chế biến từ nguyên liệu truyền thống và các nguyên liệu được nhập khẩu 100% và đảm bảo chất lượng thực phẩm tới cho khách hàng

Nhà Hàng GOLD Ẩm Thực Việt luôn có sức hút kì lạ không chỉ với thực khách trong nước mà còn cả các thực khách ngoại quốc yêu nét đẹp truyền thống Các món ăn Việt Nam luôn mang hương vị đặc trưng cho từng vùng miền Nhà hàng ẩm thực Việt tại Đà Nẵng rất đa dạng và phong phú, tuy nhiên

để tìm được một nơi “đúng chất” thì không mấy dễ dàng Đồng thời trong tương lai đẩy mạnh, phát triển chuỗi nhà hàng chuyên về hải sản cao cấp, thú rừng hoang dã cũng như những món ăn tinh hoa

Thực đơn đa dạng hơn 200 món ăn cùng các set bộ và combo dành cho 2-4 người với mức giá hợp lý Với các món ăn đặc trưng và rất nổi tiếng mà bất cứ thực khách nào đến GOLD ẩm thực Việt cũng không thể bỏ qua

GOLD ẩm thực Việt là điểm đến cho các khách hàng có nhu cầu tiếp khách, tụ tập bạn bè, gia đình, liên hoan sinh nhật

Thông tin liên hệ:

Địa chỉ: Số 470 - Trần Đại Nghĩa - Ngũ Hành Sơn - Đà Nẵng

Điện thoại: 0388281722

Email: goldrestaurant@gmail.com

LỜI CẢM ƠN

Để hoàn thành báo cáo này trước tiên chúng em xin gửi đến thầy giáo Lương Khánh Tý - người trực tiếp hướng dẫn đồ án cơ sở lời cảm ơn sâu sắc nhất

Cảm ơn thầy đã quan tâm, hướng dẫn và định hướng cho chúng em về hướng đi và phát triển của đề tài, cũng như cung cấp kiến thức về lý thuyết để thực hiện sản phẩm

Vì khả năng sinh viên còn hạn chế, trong quá trình học tập, hoàn thiện báo cáo bài tập này sinh viên không tránh khỏi những sai sót, kính mong nhận được những ý kiến đóng góp từ giáo viên hướng dẫn

Cuối cùng chúng em kính chúc thầy giáo dồi dào sức khỏe và đạt được nhiều thành công tốt đẹp trong công việc

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

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

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Đà Nẵng, ngày … tháng 06 năm 2022

Giảng viên hướng dẫn

TS LƯƠNG KHÁNH TÝ

MỤC LỤC

Chương 1 Giới thiệu 1

1.1 Tên đề tài 1

1.2 Giới thiệu về dự án 1

1.3 Mục tiêu 1

1.4 Logo website 1

Chương 2 Công cụ thiết kế 2

2.1 Tìm hiểu về HTML 2

2.1.1 HTML là gì? 2

2.1.2 Cấu trúc HTML của Website 2

2.2 Tìm hiểu về CSS 2

2.2.1 CSS là gì? 2

2.3 Tìm hiểu về JS 2

2.3.1 JS là gì? 2

2.3.2 JS dùng làm gì? 2

2.4 Tìm hiểu về jQuery 2

2.4.1 jQuery là gì? 2

2.5 Tìm hiểu về SCSS 3

2.5.1 SCSS là gì? 3

2.6 Tìm hiểu về Sublime Text 3 3

2.6.1 Sublime Text 3 là gì? 3

2.6.2 Tại sao nên lựa chọn Sublime Text 3? 3

Chương 3 Phần Website 4

3.1 Giới thiệu trang web 4

3.2 Nội dung trang web và các chức năng ở bên trong 4

3.3 Hình ảnh website quản lý nhà hàng gold 5

3.3.1 Thanh header, menu 5

3.3.2 Thanh footer 5

3.3.3 Trang chủ 6

3.3.4 Trang giới thiệu 7

3.3.5 Trang menu lẩu 8

3.3.6 Trang menu nướng BBQ 8

3.3.7 Trang menu buffet 9

3.3.8 Trang menu đồ uống 9

3.3.9 Trang đặt bàn 10

3.3.10 Trang tin tức 10

3.3.11 Trang liên hệ 11

Chương 4 Kết luận 12

4.1 Kết quả 12

4.2 Hạn chế 12

4.3 Hướng phát triển 12

DANH MỤC HÌNH

Hình 1 – Logo website nhà hàng gold 1

Hình 2 - Thanh header, menu 5

Hình 3 - Thanh footer 5

Hình 4 - Trang chủ và Slide 6

Hình 5 - Trang chủ - Buffet 6

Hình 6 - Trang chủ - Lẩu 6

Hình 7 – Trang chủ - Drink 7

Hình 8 – Trang chủ - BBQ 7

Hình 9 – Trang chủ - Ý kiến khách hàng 7

Hình 10 - Trang giới thiệu 8

Hình 11 – Trang menu lẩu 8

Hình 12 - Trang menu BBQ 9

Hình 13 - Trang menu buffet 9

Hình 14 - Trang menu đồ uống 10

Hình 15 - Trang đặt bàn 10

Hình 16 - Trang tin tức 11

Hình 17 – Trang liên hệ - Map 11

Hình 18 – Trang liên hệ - Ý kiến 11

DANH MỤC CỤM TỪ VIẾT TẮT

Chương 1 Giới thiệu

1.1 Tên đề tài

“XÂY DỰNG WEBSITE QUẢN LÝ NHÀ HÀNG GOLD”

1.2 Giới thiệu về dự án

- Với sự phát triển của công nghệ thông tin như hiện nay, chúng ta có thể dễ dàng tạo ra các website quản lý nhà hàng đẹp mắt để phục vụ nhu cầu ăn uống của khách hàng tiện lợi và dễ dàng hơn khi xưa

- Đề tài này nhằm mục tiêu xây dựng một website để quản lý một nhà hàng trong việc các khách hàng sẽ thông qua website này để tiến hành lựa chọn thực đơn, tìm hiểu kĩ càng hơn về nhà hàng cũng như tiến hành việc đặt bàn để cho tiện lợi hơn cho nhu cầu ăn uống của khách hàng

1.3 Mục tiêu

Xây dựng trang web gồm các trang cơ bản sau:

1.4 Logo website

Hình 1 – Logo website nhà hàng gold

Công cụ thiết kế website

- Sử dụng ngôn ngữ lập trình web HTML, JavaScript, jQuery và các công cụ hỗ trợ định dạng như CSS, SCSS để tạo một website tĩnh

- Sử dụng Sublime Text 3: là phần mềm lập trình đa nền tảng, là một editor nổi tiếng cho các lập trình viên có thể chạy trên nhiều hệ điều hành máy tính

1

Chương 2 Công cụ thiết kế

2.1 Tìm hiểu về HTML

2.1.1 HTML là gì?

HTML (HyperText Markup Language) là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong website Là ngôn ngữ đánh dấu siêu văn bản Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes…

2.1.2 Cấu trúc HTML của Website

Một website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng HTML không phải ngôn ngữ lập trình cho nên không thể thực hiện các chức năng động, chỉ có tác dụng bố cục và định dạng trang web cho nên phải kết hợp với CSS (Cascading Style Sheets) và JavaScript

2.2 Tìm hiểu về CSS

2.2.1 CSS là gì?

CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để tạo nên phong cách cho Website Có thể hiểu là công cụ giúp chúng ta thêm vào những thay đổi về mặt hình thức như bố cục màu sắc, font chữ… Hoạt động bằng cách khoanh vùng chọn dựa trên 1 thẻ HTML, ID hay Class từ đó áp dụng những thuộc tính cần thay đổi lên vùng được chọn Có thể hiểu nếu một website không có CSS thì đó sẽ chỉ đơn thuần là một trang chứa văn bản với hai màu chủ đạo là trắng và đen

2.3 Tìm hiểu về JS

2.3.1 JS là gì?

JS (JavaScript) là ngôn ngữ lập trình website, được tích hợp và nhúng trong HTML giúp website sống động hơn Các slide show, pop-up quảng cáo

và tính năng autocomplete của Google đều được viết bằng JS JS hỗ trợ hầu hết các trình duyệt trên máy tính và điện thoại

2.3.2 JS dùng làm gì?

Khi tải một trang web, trình duyệt phân tích cú pháp HTML và tạo ra một loại dữ liệu gọi là DOM từ nội dung DOM thể hiện chế độ xem trực tiếp của trang web với mã JavaScript Đoạn mã này thực hiện cập nhật cho DOM và được trình bày ngay lập tức cho người dùng

Trình duyệt cũng ghi nhận các sự kiện giao diện người dùng như: di chuyển chuột, nhấp chuột, v.v Sau đó, tùy theo phản hồi của người dùng, đoạn mã sẽ thực hiện công việc được lập trình tương ứng Sử dụng tất cả các tiện ích này, bạn có thể xây dựng các ứng dụng nhỏ để phục vụ cho một vài mục đích được cho phép

2.4 Tìm hiểu về jQuery

2.4.1 jQuery là gì?

JQuery được tích hợp nhiều module khác nhau Từ module hiệu ứng cho đến module truy vấn selector JQuery được sử dụng đến 99% trên tổng số

2

website trên thế giới jQuery không phải là một ngôn ngữ lập trình riêng biệt

mà hoạt động liên kết với JavaScript Với jQuery, bạn có thể làm được nhiều

việc hơn mà lại tốn ít công sức hơn

JQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý

sự kiện và thao tác AJAX đơn giản hơn

2.5 Tìm hiểu về SCSS

2.5.1 SCSS là gì?

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

2.6 Tìm hiểu về Sublime Text 3

2.6.1 Sublime Text 3 là gì?

Sublime Text 3 là phần mềm lập trình đa nền với những ưu điểm như cho phép mở file nhanh chỉ với vài phím tắt, lựa chọn thao tác nhiều đơn vị cùng lúc, chế độ hạn chế mất tập trung, chuyển đổi giữa các dự án nhanh chóng, tùy biến dễ dàng và chia sẻ màn hình dễ dàng để chỉnh sửa

2.6.2 Tại sao nên lựa chọn Sublime Text 3?

Sublime Text 3 là một editor phổ biến cho các nhà ngôn ngữ lập trình, với giao diện sử dụng thân thiện cùng với khả năng tùy chỉnh linh hoạt Tuy ra đời sau Notepad++ nhưng ứng dụng này được đánh giá là mang đến những trải nghiệm người dùng tốt hơn hẳn phù hợp để xây dựng website quản lí nhà hàng

3

Chương 3 Phần Website

3.1 Giới thiệu trang web

- Đây là website quản lý nhà hàng online nhằm mục đích phục vụ nhu cầu ăn uống của khách hàng

+ Tìm hiểu về nét đặc trưng của văn hóa cũng như ẩm thực của nhà hàng gold

+ Thông qua website để đặt bàn trước thuận tiện cho việc ăn uống

+ Biết trước được các loại thực đơn, thức ăn và cũng như giá cả

để tiện lợi lên kế hoạch hơn trước khi đến nhà hàng

+ Thông qua thông tin cá nhân của khách hàng đã đặt bàn trước trên website thực hiện quy trình chuẩn bị

+ Cập nhật giá cả hay bất kì vấn đề nào đối với các phát sinh trong nhà hàng để các khách hàng kịp thời theo dõi

3.2 Nội dung trang web và các chức năng ở bên trong

Các trang web đều có liên kết để kết nối với nhau Mọi trang đều có thanh menu để có thể chuyển trang một cách dễ dàng, có thể thực hiện tìm kiếm các thông tin của nhà hàng hay các món ăn để thực hiện việc lựa chọn tốt nhất để có thể đem đến trải nghiệm hoàn mỹ cho bản thân khách hàng

Trang chủ:

- Hiển thị các thông tin sơ lược về nhà hàng

- Chuyển sang các trang khác

- Hiển thị địa chỉ cũng như hotline của nhà hàng Trang giới thiệu:

- Có các hình ảnh bao quát được phong cảnh, sắc đẹp của các phòng

ăn trong nhà hàng gold

- Xem được thông tin về không gian của nhà hàng cũng như nét văn hóa ẩm thực

Trang menu lẩu:

- Chứa các món lẩu đa dạng cùng với những loại thực phẩm thơm ngon và bổ dưỡng

Trang menu nướng BBQ:

- Chứa các món nướng đầy đủ các loại và không thể thiếu các nguyên liệu độc tôn cho các món nướng là hải sản và thịt

Trang menu buffet:

- Có 2 loại buffet cho khách hàng lựa chọn Trang menu đồ uống:

4

- Với đầy đủ các loại thức uống có trên thị trường Trang đặt bàn:

- Khách hàng sẽ điền thông tin cá nhân cũng như thông tin về các vấn

đề liên quan để nhân viên quản lý có thể chuẩn bị

- Có hiển thị gợi ý về thông tin đặt bàn cho khách hàng dễ dàng lựa chọn

Trang tin tức:

- Tất cả các tin tức liên quan đến nhà hàng đều ở đây

- Có thể tìm kiếm các tin tức muốn tìm hiểu

Trang liên hệ:

- Hiển thị vị trí địa chỉ nhà hàng gold trên google map

- Để lại ý kiến cho nhà hàng nếu gặp phải bất kì vấn đề gì

3.3 Hình ảnh website quản lý nhà hàng gold

3.3.1 Thanh header, menu

Nằm ở trên cùng của web, chứa logo của website, địa chỉ và hotline của nhà hàng, các đường dẫn sang các trang khác Xuất hiện ở tất cả các trang HTML thuộc website quản lý nhà hàng gold

Hình 2 - Thanh header, menu

3.3.2 Thanh footer

Nằm ở dưới cùng của web, chứa đường dẫn tới các trang mạng xã hội thuộc website nhà hàng gold, logo web, địa chỉ và cũng như cách thức liên hệ với nhà hàng gold Xuất hiện ở tất cả các trang HTML thuộc website nhà hàng gold

Hình 3 - Thanh footer

5

3.3.3 Trang chủ

Gồm 2 phần chính là slide và các thông tin về các loại thực đơn, phần slide hiển thị các hình ảnh món ăn đặc trưng cho nhà hàng để khách hàng vừa truy cập vào website sẽ có cảm giác hấp dẫn ngay từ ánh nhìn đầu tiên và bên cạnh đó sẽ có nhiều thông tin liên quan đến các khái niệm của từng loại thực đơn trong nhà hàng để khách hàng nhận biết Ý kiến của các khách hàng cũng

sẽ được hiển thị ở đây

Hình 4 - Trang chủ và Slide

Hình 5 - Trang chủ - Buffet

Hình 6 - Trang chủ - Lẩu

6

Hình 8 – Trang chủ - BBQ

Hình 9 – Trang chủ - Ý kiến khách hàng

3.3.4 Trang giới thiệu

Hiển thị những hình ảnh sơ lược của từng phòng và bàn ăn của nhà hàng cũng như những thông tin về phong cách nền văn hóa cũng như ẩm thực nhà hàng gold

7

3.3.5 Trang menu lẩu

Chứa các tên món lẩu và hình ảnh minh họa cũng như các nguyên liệu cho các món lẩu để khách hàng tự do lựa chọn

Hình 11 – Trang menu lẩu

3.3.6 Trang menu nướng BBQ

Chứa các loại món nướng hấp dẫn kèm hình ảnh minh họa bắt mắt và các nguyên liệu cho món nướng được chia ra để cho khách hàng dễ dàng chọn lựa

8

3.3.7 Trang menu buffet

Hiển thị 2 loại buffet với 2 loại giá khác nhau cho khách hàng chọn lựa cũng như hiển thị các list thức ăn có trong từng loại buffet

Hình 13 - Trang menu buffet

3.3.8 Trang menu đồ uống

Chứa đầy đủ các loại đồ uống khác nhau từ rượu, bia cho đến các nước giải khát với giá cả khác nhau

9

3.3.9 Trang đặt bàn

Khách hàng sẽ điền thông tin theo gợi ý mà nhà hàng đã hiển thị trên trang đặt bàn và điền vào form đã cho để thực hiện quá trình đặt bàn

Hình 15 - Trang đặt bàn

3.3.10 Trang tin tức

Chứa các tin tức hằng ngày liên quan tới nhà hàng và khi có bất kì vấn đề nào sẽ được cập nhật ở đây cho khách hàng theo dõi cũng như liên quan đến các vấn đề khác

1 0

3.3.11 Trang liên hệ

Hiển thị vị trí nhà hàng trên bản đồ cũng như các thắc mắc hay có vấn đề

gì cần ý kiến sẽ được khách hàng thực hiện ở trang này

Hình 17 – Trang liên hệ - Map

Hình 18 – Trang liên hệ - Ý kiến

1 1

Chương 4 Kết luận

4.1 Kết quả

- Kinh nghiệm về Website, Sublime Text 3, CSS, JS, Font Awesome,

- Thành thạo Sublime Text 3

- Thiết kế website với kiến thức đã có

- Hiểu sâu hơn kiến thức về ngôn ngữ HTML và kĩ năng thiết kế website

- Tìm hiểu được nhiều điều và rút ra được nhiều kinh nghiệm quý báu

4.2 Hạn chế

Vì kiến thức còn hạn chế nên mới chỉ làm được những chức năng đơn giản áp dụng kiến thức đã học vì vậy vấn đề phân tích hệ thống chưa thật

sự đầy đủ và đi sâu vào lĩnh vực, và không thể áp dụng vào thực tế Một

số hạn chế trong bài:

- Mức độ tìm hiểu còn sơ sài, đơn giản, chưa mang đến tính hiệu quả cao

để giải quyết bài toán triệt để với mức độ lớn hơn

- Chương trình xây dụng chưa có tính thực tế cao, chưa đáp ứng được các yêu cầu trong thực tế

4.3 Hướng phát triển

Phát triển chương trình đồ án thành một: Ứng dụng quản lí nhà hàng thành công và hữu ích, có thể giúp đỡ các doanh nhân nói riêng và mọi người nói chung

1 2