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.
Vấn đề cần giải quyết
- Chưa quảng bá được thương hiệu của nhà hàng tới những hàng ở xa, ngoại tỉnh, khách du lịch, trong khi quy mô nhà hàng khá lớn.
- Chưa triển khai được hình thức giao hàng tận nhà do khách hàng không hình dung được menu nếu không đến cửa hàng làm đi một lượng khách hàng không nhỏ.
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ách cung 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.
Phương pháp 1
- Tên phương pháp: Nghiên cứu thực tế.
- 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.
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.
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.
Tên Phương Pháp Ưu điểm Hạn chế Kết luận
Nghiên cứu thực tế - Khách quan, trung thực - Tốn kém, mất nhiều thời gian - Kém ưu việt Nghiên cứu qua sách báo - Thông tin cô đọng, dễ tiếp thu - Nguồn thông tin chưa nhiều, không được cập nhập.
Nghiên cứu qua Internet - Dễ dàng thực hiện.
- Thông tin được cập nhật thường xuyên.
- Không biết chọn lọ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
Cơ sở lý thuyết
Cơ sở lý luận và thực tiễn
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ền hoặc tên miền phụ trên World Wide Web của Internet Một trang web là tập tin HTML hoặc XHTML 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 tin HTML (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
- Tăng khả năng tiếp cận khách hàng.
- Tăng phạm vi khách hàng
- Xúc tiến kinh doanh hiệu quả
- Dịch vụ khách hàng hiệu quả
- Nền tảng cho sản phẩm bán hàng
- Xác định khách hàng tiềm nă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
- HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bả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 kế website.
- Hiện nay, phiên bản mới nhất của ngôn ngữ này là HTML5.
- CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngô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 (ví dụ như HTML).
- 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 một chú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,
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ống như 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.
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. Font Awesome 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ủa bên thứ ba trên nền tảng của họ, xếp nó ở vị trí thứ hai sau Google Fonts.
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ăng trưở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ùng hấ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
2004 cho 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 khi mớ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ới cá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 ăn thức ăn nhanh ít nhất 1 lần tháng.
- 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àn Jollibee 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ất tố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ác lớ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ửa hà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 theo kiể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
Giới thiệu đồ án
- Tên đồ án: Thiết kế giao diện Website cho nhà hàng bán thức ăn nhanh - FastFood
1.2.1 Công nghệ được sử dụng
- Thiết kế giao diện của Website dựa trên các nền tảng: HTML, CSS, thư viện Bootstrap 4 và ngôn ngữ lập trình JavaScript.
- Trình biên dịch: Nopad++, Sublime và VS code.
- Trình duyệt: Google Chrome, Cốc Cốc và Microsoft Edge.
Hình 1.6 – Giao diện đẹp nhờ công nghệ hiện đại
- 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.
Hình 1.6 – Bố cục hợp lý
- 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
Phân tích thiết kế hệ thống
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
Đăng nhập / đăng kí tài khoản: tên đăng nhập, mật khẩu, Họ tên, năm sinh, email, số điện thoại, địa chỉ.
Truy cập các trang trong website.
Đánh giá sản phẩm, nhà hà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.
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.
- 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.
Cài đặt xây dựng demo
Giao diện trang chủ
- 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.
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.
- 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
Hình 3.5 – Phần nội dung 3: Về chúng tôi
Hình 3.6 – Phần nội dung 4: Điểm nổi bật
Hình 3.7: Phần nội dung 5: Đội ngũ
Hình 3.8 – Phần nội dung 6: Blog
Hình 3.9 – Phần nội dung 7: Liên hệ
- 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
- Đượ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.
Giao diện trang đặ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.
Hình 3.14 – Thư viện JS giúp nhập ngày tháng đơn giản hơn
- 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.
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.
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.
Hình 3.17 – Phần bài đăng mới
- 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
Hình 3.19 – Phần nhập bình luận
- 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.
Giao diện trang về chúng tôi
Hình 3.20 – Phần về chúng tôi
- Phần này giúp cung cấp thông tin của nhà hàng đến với thực khách.
Giao diện trang liên hệ
- 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.
