Báo cáo môn học thiết kế web website Đặt Đồ Ăn

 Quản lý đặt bàn: Khách hàng có thể để lại thông tin liên hệ sau đónhân viên của quán sẽ liên hệ và tư vấn để khách hàng có được mộtbữa ăn thật hoàn hảo.. Đồng thời, hệ thống giúp khách

TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO MÔN HỌC THIẾT KẾ WEB

WEBSITE ĐẶT ĐỒ ĂN

Giảng viên hướng dẫn : Lại Mạnh Dũng

Sinh viên thực hiện 1 : Phạm Anh PhiSinh viên thực hiện 2 : Võ Hữu Thái

Sinh viên thực hiện 3 : Vũ Thanh Hải Sinh viên thực hiện 4 : Trần Văn HoanSinh viên thực hiện 5 : Nguyễn Tiến Mạnh

TP.Hà Nội, ngày 23 tháng 10 năm 2023

DANH MỤC TỪ VIẾT TẮT, CHÚ THÍCH

Với sự phát triển nhảy vọt của công nghệ thông tin hiện nay 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 Dĩ nhiên các bạn đã được nghe nói nhiều về Internet, nói một cách đơn giản, Internet là một tập hợp máy tính nổi kết với nhau, là một mạng máy tính toàn cầu mà bất kì ai cũng có thể kết nối bằng máy tính của họ Với mạng Internet, tin học thật sự tạo nên một cuộc cách mạng trao đôi thông tin trong mọi lĩnh vực văn hóa, xã hội, chính trị, kinh tế …

Trong thời đại ngày nay, thời đại công nghệ phát triển như bây giờ thì việc có một Website để mua sắm hay đặt đồ ăn không còn là điều gì hiếm lạ nữa Thông qua website người dùng có thể dễ dàng tìm hiểu được thông tin về nhà hàng và các món ăn liên quan

Với lí do đó, được sự hướng dẫn và giúp đỡ của thầy Lại Mạnh Dũng,

nhóm em đã chọn đề tài: “Xây dựng Website đặt đồ ăn ”

Trong quá trình thực hiện đề tài này này em đã nhận được sự giúp đỡ, chỉ bảo tận tình của thầy Nhóm em xin chân thành cảm ơn thầy đã hướng dẫn trong quá trình xây dựng Website

Tuy nhiên, do thời gian hạn hẹp, mặc dù đã nỗ lực hết sức mình nhưng chắc rằng đề tài khó tránh khỏi thiểu sót Chúng em rất mong nhận được sự thông cảm, những lời góp ý và chỉ bảo tận tình của thầy và các bạn

Chương 1:GIỚI THIỆU VỀ ĐỀ TÀI VÀ BÀI

TOÁN

1.Sơ lược về hệ thống

Trong thời đại chuyển đổi số hiện nay, với sự phát triển của công nghệ

và xu hướng thương mại điện tử, việc quản lý và kinh doanh trong lĩnh vực nhàhàng, quán ăn cũng đang được cải tiến để thích nghi với nhu cầu ngày càng caocủa khách hàng Việc đặt bàn hay đơn giản chỉ là tìm hiểu trước về quán ănonline ngay tại nhà mà không phải đến tận nơi Từ đó giúp khách hàng tiếtkiệm thời gian và tạo trải nghiệm tiện lợi hơn Đồng thời, quán ăn cũng sẽ thuhút được nhiều khách hàng hơn, bởi lượng người tiếp cận và tìm hiểu về quán

 Giới thiệu ngắn gọn về quán ăn: Cung cấp một mô tả ngắn gọn về quán

ăn, phong cách ẩm thực và đặc sản Hiển thị hình ảnh đẹp mắt của món

ăn hoặc không gian quán

 Cung cấp cho khách hàng thông tin thực đơn: Hiển thị danh sách cácmón ăn với hình ảnh, mô tả và giá Phân loại món ăn: Cung cấp các bộlọc như món khai vị, món chính, món tráng miệng, đồ uống

 Cung cấp cho khách hàng về các sự kiện và các thông tin liên quan như:

o Lịch sự kiện: Cung cấp thông tin về các sự kiện đặc biệt tại quánnhư buổi tiệc, chương trình ca nhạc, hoặc sự kiện ẩm thực

o Đặt chỗ cho sự kiện: Tùy chọn để khách hàng đặt chỗ cho những

sự kiện sắp diễn ra

o Thông tin chi tiết: Mô tả chi tiết về mỗi sự kiện, bao gồm thờigian, địa điểm, giá vé (nếu có) và cách tham gia

 Cung cấp cho khách hàng về dịch vụ đặt bàn, đặt tiệc: Cung cấp mộtform trực tuyến để khách hàng điền thông tin đặt bàn như họ tên, số điệnthoại

 Cung cấp cho khách hàng về các tin tức liên quan đến ẩm thực hay quánăn:

o Cung cấp các bài viết liên quan đến ẩm thực, công thức nấu ăn,mẹo nấu ăn, hoặc các câu chuyện về quán

o Thông báo các cập nhật quan trọng liên quan đến quán như giờ

mở cửa, chính sách mới, hoặc thay đổi dịch vụ

2 Nghiệp vụ của hệ thống (giới thiệu bài toán)

Bài toán: Tạo ra một hệ thống quản lý và dịch vụ cho một quán ăn, giúp

tối ưu hóa quy trình phục vụ khách hàng cũng như tăng cường hiệu suất kinhdoanh Hệ thống này phải đáp ứng nhu cầu đa dạng của khách hàng và giúp cácnhân viên quản lý hoạt động hàng ngày một cách hiệu quả

Các nghiệp vụ chính của hệ thống:

 Quản lý món ăn: Cho phép nhân viên quản lý thực đơn bao gồm việcthêm mới, chỉnh sửa hoặc xóa các món ăn Cần có tính năng để cậpnhật hình ảnh, mô tả và giá món ăn một cách dễ dàng

 Quản lý đặt bàn: Khách hàng có thể để lại thông tin liên hệ sau đónhân viên của quán sẽ liên hệ và tư vấn để khách hàng có được mộtbữa ăn thật hoàn hảo Đồng thời, hệ thống giúp khách hàng một vàigợi ý hoặc đơn giản là các hình ảnh về các bữa ăn đã được quán phục

vụ giúp khách hàng thêm tin tưởng khi đặt bàn tại quán

 Tương tác với khách hàng: Hệ thống cho phép khách hàng để lạiđánh giá và nhận xét về món ăn và dịch vụ Những phản hồi này sẽgiúp quán cải thiện chất lượng phục vụ và món ăn, đồng thời cũnggiúp khách hàng có những đánh giá khách quan về quán

 Quản lý khuyến mãi: Cung cấp cho quán ăn khả năng tạo và quản lýcác chương trình khuyến mãi nhằm thu hút khách hàng Hệ thống sẽcần thông báo cho khách hàng về các chương trình ưu đãi hiện có

3.Mục đích, yêu cầu

Mục đích: Hệ thống website quán ăn được xây dựng với mục đích cung

cấp một nền tảng tích hợp nhằm nâng cao hiệu quả quản lý và trải nghiệm củakhách hàng Mục đích tổng thể bao gồm:

 Cung cấp thông tin đầy đủ cho khách hàng: Đảm bảo khách hàng cóthể dễ dàng truy cập thông tin về quán ăn, thực đơn, giá cả và cácchương trình khuyến mãi Điều này giúp khách hàng đưa ra quyếtđịnh nhanh chóng và chính xác

 Tối ưu hóa quy trình đặt đặt bàn: Giúp khách hàng thực hiện việc đặtmón và đặt bàn trực tuyến một cách dễ dàng và nhanh chóng, từ đótiết kiệm thời gian cho cả khách và nhân viên phục vụ

 Nâng cao khả năng quản lý: Cung cấp cho nhân viên quản lý cáccông cụ để theo dõi và quản lý đặt bàn, cũng như thực đơn một cáchhiệu quả, giúp giảm thiểu rắc rối và sai sót trong quá trình phục vụ

 Tăng cường sự tương tác với khách hàng: Tạo điều kiện cho kháchhàng để lại đánh giá và phản hồi, giúp quán cải thiện dịch vụ và sảnphẩm dựa trên ý kiến của khách hàng, từ đó tạo ra sự gắn kết và lòngtrung thành

Yêu cầu hệ thống:

 Giao diện thân thiện, dễ sử dụng cho cả khách hàng và nhân viênquản lý

 Tích hợp chức năng tìm kiếm món ăn và đặt bàn nhanh chóng

 Cung cấp chức năng quản trị cho nhân viên quản lý thực đơn, đặtbàn và khuyến mãi

CHƯƠNG 2 : KHẢO SÁT PHÂN TÍCH

2.1.Trình bày website cùng chủ đề

Nhóm em đã khảo sát một số website của một số nhà hàng nổi tiếng ở Viêt Nam, bao gồm:

 Website của MIAS Restaurant

 Website của Nhà hàng nét Huế

 Website của Quán quê restaurant

 Website của Phở lý quốc sư

Kết quả khảo sát cho thấy, các website này đều có các điểm chung như sau:

 Cung cấp các thông tin tổng quan về nhà hàng: Các website đều cung cấpcác thông tin tổng quan về nhà hàng của mình, bao gồm: năm thành lập, các món ăn đặc trưng, không gian quán,…

 Cung cấp thông tin về thực đơn : các món ăn, món chính, món phụ, đồ uống, giá, các thành phần của món ăn,…

 Cung cấp các thông tin về các sự kiện sắp tới của nhà hàng

 Cung cấp một số dịch vụ đặt tiệc

 Cung cấp một vài tin tức về các món ăn mới và phổ biến trên cả nướcTuy nhiên, các website này cũng có một số điểm khác biệt như sau:

 Kết cấu và nội dung: Các website có kết cấu và nội dung khác nhau

 Thiết kế và giao diện: Các website có thiết kế và giao diện khác nhau

2.1.Các đối tượng được sử dụng

Hệ thống của Website nhà hàng được thiết kế dành cho các đối tượng sau:

 Khánh hàng muốn tìm hiểu về nhà hàng : hệ thống giúp cho họ có những thông tin cần thiết về nhà hàng

 Khánh hàng muốn đặt bàn : hệ thông cho phép khánh hàng thông tin về các món ăn giá cả, đặt bàn, đặt tiệc

2.2.Các chức năng cơ bản cho từng đối tượng

Dưới đây là các chức năng cơ bản của hệ thống dành cho từng đối tượng sử dụng:

 Khánh hàng muốn tìm hiểu về nhà hàng :

- Hệ thống cung cấp các thông tin tổng quan về nhà hàng, bao gồm: giới thiệu khái quát về nhà hàng, các dịch vụ nhà hàng cung cấp, các giá trị cốt lõi của nhà hàng,…

- Hệ thông cung cấp các thông tin về các món ăn, đồ uống, giá cả,

 Khách hàng muốn đạt bàn

- Các phương thức đặt bàn : Hệ thống cung cấp các phương thức đặt bàn,

- Cung cấp phương thức tư vấn

Ngoài các chức năng cơ bản, hệ thống còn có thể cung cấp các chức năngnâng cao như sau:

 Tính năng tìm kiếm: Hệ thống cung cấp các tính năng tương tác giúpngười dùng được thuân tiện hơn trong qua trình sử dụng trang web

 Chức năng đăng nhập bằng gmail : Hệ thống cung cấp tính năng đăng nhập bằng gmail giúp cho người dùng có thể lưu các thông tin,

và thuận tiên hơn trong việc tìm hiểu và đặt bàn

 Đăng ký đăng nhập bằng username, mật khẩu

Các chức năng nâng cao này sẽ giúp hệ thống trở nên hữu ích và hấp dẫn hơn đối với người dùng

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

3.1 Sơ đồ use-case diagram

Hình 3.1: Use-case diagram

3.2 Sơ đồ site-map

Hình 3.2 Sơ đồ sitemap

3.3 Sơ đồ wireframe

3.3.1 Sơ đồ wireframe của trang “trang chủ”

3.3.2 Sơ đồ wireframe của trang “Thực đơn”

3.3.3 Sơ đồ wireframe của trang “Đặt bàn”

3.3.4 Sơ đồ wireframe của trang “Tin tức”

3.3.5 Sơ đồ wireframe của trang “Liên hệ”

CHƯƠNG 4.TRIỂN KHAI 4.1 Trình bày cấu trúc thư mục dự án

4.2.Giải thích giao diện và cách xây dựng

4.2.1.Giải thích giao diện

+ Với quản trị viên: đăng nhập thành công sẽ chuyển đến trang quản trị

và thực hiện chức năng quản trị

Hình 1.2 Login Popup

Sau khi nhấn nút đăng nhập bằng google thì người dùng sẽ chọn tài khoản của mình để đăng nhập và giao diện người dùng sẽ chuyển về giao diện chính

4.2.1.2.trang chủ

Phần mở đầu của trang chủ trong hình ảnh trên được thiết kế đẹp mắt, nhấn mạnh thông điệp về dịch vụ ẩm thực cao cấp của UTC Kitchen, mang đếntrải nghiệm ăn uống chất lượng ngay tại nhà Slogan "Mang ẩm thực cao cấp đến tận nhà" được trình bày nổi bật, truyền tải thông điệp về việc nhà hàng cung cấp các món ăn cao cấp với dịch vụ giao tận nơi

Dưới câu slogan là nút gọi hành động "Đặt món ngay" khuyến khích khách hàng thực hiện thao tác đặt món nhanh chóng và tiện lợi

Khi click vào nút "Đặt món ngay" thì giao diện sẽ chuyển sang trang

"Thực đơn" để chọn món ăn.

Tiếp theo là phần giới thiệu của nhà hàng, bên dưới góc trái là phần mô

tả về mô hình kinh doanh của UTC Kitchen, góc phải là phần hình ảnh 1 món

ăn trong thực đơn của nhà hàng

Ở cuối phần giới thiệu, có nút gọi hành động màu đỏ "Đặt món ngay"

mời gọi khách hàng thực hiện thao tác đặt món Khi click vào nút này, khách

hàng sẽ được chuyển hướng tới phần Thực đơn, nơi họ có thể khám phá và

chọn lựa các món ăn đa dạng từ UTC Kitchen

Tiếp theo là phần giá trị cốt lõi của nhà hàng, Phần này nhấn mạnh nhữngtiêu chí hàng đầu mà UTC Kitchen luôn hướng tới, từ chất lượng dịch vụ đến sự tiệních trong trải nghiệm, nhằm đáp ứng nhu cầu ngày càng cao của khách hàng

Cuối cùng là phần đăng kí nhận ưu đãi:

Trong phần form đăng ký nhận ưu đãi này, JavaScript giúp:

 Thu thập dữ liệu từ các trường form

 Kiểm tra và xác nhận thông tin người dùng

 Gửi dữ liệu lên máy chủ để lưu trữ hoặc xử lý

 Hiển thị thông báo kết quả cho người dùng

JavaScript giúp cải thiện trải nghiệm người dùng bằng cách xử lý và kiểm tra dữ liệu trên trình duyệt, giúp form hoạt động mượt mà và tiện lợi hơn Cụ thể:

Trong trang, phần Form được thiết kế để thu thập thông tin khách hàng muốn

tư vấn, bảng câu hỏi được js sử dụng Regular Expression ( Biểu thức chính quy ) để kiểm tra thông tin nhập vào Khi khách hàng chưa nhập vào 1 trong các trường thì sẽ có thông báo trả về:

Khi khách hàng nhập sai định dạng của số điện thoại thì sẽ có thông báo trả về:

Khi khách hàng nhập sai định dạng của email thì sẽ có thông báo trả về:

2 Xem các món để order

Để tăng tương tác với người dùng chúng em đã thiết kế giao diện như một list Chúng em sử dụng html,css và đặc biệt áp dụng thêm cả javascrip để tăng sự trải nghiệm của khách hàng và thêm một số chức năng sau :

o Khi khách hàng ấn > thì phần nội dung sẽ trượt qua phải để có

thể tham khảo nhiều món hơn để tăng sự phong phú đa dạng trong sự lựa chọn của khách hàng (và trượt sang trái cho dấu ngược lại )

o Khách hàng có thể dùng lướt bằng touchpad laptop hoặc lướt sang với màn hình có kích thước nhỏ hơn

o Dùng các font awsome để có những icons thật bắt mắt

o Chúng em đang cố gắng phát triển thêm nhiều tính năng với nănglực lực hiện thời chúng em đang có ….v.v

Tiếp theo hãy theo bước chúng em tìm hiểu về …

giác chuyên nghiệp, hấp dẫn,…từ đó khiến khách hàng thêm tin tưởng hơn khi sử dụng cách dịch vụ của quán.

Phần nội dung chính của trang bao gồm các phần:

 Phần giới thiệu: Gồm các hình ảnh minh họa và các phần giới thiệu về chất lượng đồ ăn, nguyên liệu và cả chất lượng dịch vụ của quán.

 Phần cam kết: Phần này gồm các icon và cũng gồm các câu cam kết thêm phần khẳng định hơn cho phần giới thiệu ở trên.

 Phần các loại tiệc: Gồm các hình ảnh và phần giới thiệu ngắn gọn về các loại tiệc để cho khách hàng có thể tham khảo nếu muốn tổ chức tiệc.

 Phần liên hệ: Gồm các trường để khách hàng để lại các thông tin liên lạc như họ tên và số điện thoại từ đó giúp nhân viên liên lạc với khách hàng để khách hàng có nhu cầu đặt bàn hay đặt tiệc và đồng thời khách hàng cũng được tư vấn kĩ càng hơn để có thể có được bữa ăn tuyệt vời nhất.

Trong phần form liên hệ này, JavaScript giúp:

Thu thập dữ liệu từ các trường form

Kiểm tra và xác nhận thông tin người dùng

Gửi dữ liệu lên máy chủ để lưu trữ hoặc xử lý

Hiển thị thông báo kết quả cho người dùng

JavaScript giúp cải thiện trải nghiệm người dùng bằng cách xử lý

và kiểm tra dữ liệu trên trình duyệt, giúp form hoạt động mượt mà và tiện lợi hơn Cụ thể:

+ Khi nhập sai định dạng của thông tin trong các trường thì giao diện sẽ xuất hiện các thông báo giúp người dùng biết rằng mình nhập sai phần nào.

4.2.1.6.Liên hệ

Hình 2.1 Thông tin liên hệ các chi nhánh

Người dùng có thể xem, và liên hệ với các chi nhánh thông qua các mạng xã hội hoặc số điện thoại

Hình 2.2 Bản đồ địa chỉ nhà cửa hàng

Người dùng xem địa chỉ cửa hàng ở phần bản đồ

4.2.2Cách xây dựng

Trang web này được xây dựng bằng các bước sau:

 Kích thước và vị trí của các phần tử : width, height, position,…

 Màu sắc và kiểu chữ của văn bản : font-zize, color,…

 Hình ảnh và bố cục của trang web

 Hiệu ứng hover cho các liên kết trong menu : a:hover, li:hover,

 Hiện thị trên điện thoại, máy tính,

Thêm tính năng JavaScript

JavaScript được sử dụng để thêm tính năng tương tác và động cho trang web JavaScript của trang web này được sử dụng để thêm các tính năng sau:

 Bấm chuột vào sẽ thực hiện hành động

 Lắng nghe phần tử

Chi tiết về HTML, CSS

Dưới đây là một số chi tiết về cách sử dụng CSS để định dạng các phần

tử HTML của trang web:

 Tiêu đề trang được định dạng bằng thẻ <h1> Thẻ này được sử dụng để xác định tiêu đề của trang

 Phần đầu trang được định dạng bằng thẻ <header> Thẻ này được

sử dụng để chứa các thông tin chung về trang, chẳng hạn như logo, tiêu đề trang và một số thông tin cơ bản về trường

 Phần menu được định dạng bằng thẻ <nav> Thẻ này được sử dụng để chứa các liên kết đến các trang khác của trang web

 Phần nội dung được định dạng bằng thẻ <article> hay <section> Thẻ này được sử dụng để chứa nội dung chính của trang

 Phần footer được định dạng bằng thẻ <footer> Thẻ này được sử dụng để chứa các thông tin bổ sung về trang, chẳng hạn như bản quyền và thông tin liên hệ.

 Trang web trên thiết bị máy tính bảng hay điện thoại sẽ được định dạng lại trong file responsive.css

Chi tiết về Javascript

 Lựa chọn phần tử : getElementById(), getElementByTagName,

5.1.Mục tiêu phát hiện lỗi trong quá trình thiết kế

Mục tiêu của kiểm thử trong quá trình thiết kế là phát hiện các lỗi logic,lỗi cấu trúc, lỗi giao diện, trong giai đoạn sớm nhất của quá trình phát triểnphần mềm Điều này giúp giảm thiểu chi phí và thời gian sửa lỗi sau này

5.2.Cách thức xây dựng các test case link, effect, data

Dưới đây là một số cách thức nhóm em xây dựng các test case cụ thể:

 Test case link: Nhóm em sử dụng các phương pháp thủ công như nhập các link vào trình duyệt để kiểm tra, bấm vào các trang xem có chuyển sang trang đó không

 Test case effect: Nhóm em sử dụng các phương pháp thủ công như bấm vào các nút, nhập dữ liệu vào các trường, để kiểm tra hiệu ứng của cácthao tác