Đồ án môn học thiết kế web

Thì với một nhà hàng hay quán ăn cũng cần phải có một website riêng cho mình.Để thiết kế một website cho nhà hàng hay quán ăn cần phải tạo được sự hấp dẫn và chuyên nghiệp để tạo nên điể

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA QUẢN TRỊ KINH DOANH

ĐỒ ÁN MÔN HỌC

………Thiết kế Web…………

Giảng viên hướng dẫn : ThS Hồ Khôi

Sinh viên thực hiện : Nguyễn Quang Huy

TP Hồ Chí Minh, tháng 12 năm 2023.

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT

THÀNH

TRUNG TÂM KHẢO THÍ

KỲ THI KẾT THÚC HỌC PHẦN HỌC KỲ III NĂM HỌC 2022 - 2023

PHIẾU CHẤM THI TIỂU LUẬN/BÁO CÁO

Môn thi: Mã lớp học phần:

Sinh viên thực hiện :

Ngày thi: Phòng thi:………

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

Phần đánh giá của giảng viên (căn cứ trên thang rubrics của môn học):

Tiêu chí (theo CĐR

HP) Đánh giá của GV

Điểm tối đa

Điểm đạt được

Nội dung

 Các nội

dung thành phần

Chương 2: Bao gồm phần trình bày và Code HTML

6

Giảng viên chấm thi

(ký, ghi rõ họ tên)

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT

THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

🙜 🙜 🙜

CỘNG HÒA XÃ HỘI CHỦ NGHĨA

VIỆT NAM

Độc lập – Tự do – Hạnh phúc

🙜 🙜 🙜

NHIỆM VỤ ĐỒ ÁN MÔN HỌC

(Sinh viên phải đóng tờ này vào cuốn báo cáo)

Họ và tên sinh viên: Nguyễn Quang Huy MSSV: 2200003340

Chuyên ngành: Marketing Lớp: 22DMK1B

Email: huy2212asd@gmail.com SĐT: 0974540412

Tên đề tài: Thiết kế Website nhà hàng

Giảng viên giảng dạy: Hồ Khôi

Thời gian thực hiện: từ ngày 16/10/2023 đến 25/12/2023

Nhiệm vụ:

Nội dung:

Phương pháp:

Nội dung và yêu cầu đã được thông qua Bộ môn.

TRƯỞNG BỘ MÔN

(Ký tên)

TP HCM, ngày tháng … năm 2023

GIẢNG VIÊN GIẢNG DẠY

(Ký tên)

ThS

LỜI CẢM ƠN

Trước tiên với tình cảm sâu sắc và chân thành nhất, cho phép em được bày tỏ lòng biết ơn đến nhà trường và thông qua thầy Hồ Khôi đã tạo điều kiện hỗ trợ, giúp

đỡ em trong suốt quá trình học tập và nghiên cứu đề tài này Trong suốt thời gian làm đồ án em đã nhận được rất nhiều sự quan tâm, giúp đỡ của Thầy và bạn bè

Với lòng biết ơn sâu sắc nhất, em xin gửi đến Thầy Hồ Khôi ở Khoa công nghệ thông tin đã truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập Nhờ có những lời hướng dẫn, dạy bảo của các thầy nên đề tài nghiên cứu của em mới có thể hoàn thiện tốt đẹp

Bước đầu đi vào thực tế của em còn hạn chế và còn nhiều bỡ ngỡ nên không tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng góp quý báu của quý Thầy để kiến thức của em trong môn học này được hoàn thiện hơn đồng thời có điều kiện bổ sung, nâng cao ý thức của mình

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

Sinh viên thực hiện (Ký tên)

LỜI MỞ ĐẦU

Với sự phát triển mạnh mẽ của khoa học công nghệ thế giới, có thể nói rằng ngành Công nghệ thông tin phát triển mạnh mẽ với tốc độ ngày càng nhanh và ngày càng thể hiện vai trò to lớn, hết sức quan trọng đối với con người Hầu hết các lĩnh vực trong xã hội đều ứng dụng Công nghệ thông tin vào đời sống, nhiều phần mềm đã mang lại hiệu quả không thể phủ nhận hơn Song thực tiễn luôn đặt ra những yêu cầu mới đòi hỏi ngành Công nghệ thông tin không ngừng phát triển để thỏa mãn và đáp ứng những thay đổi của cuộc sống hiện nay

Đối với lĩnh vực về ẩm thực hiện nay, việc xây dựng giao diện đã không còn xa lạ, nhưng để tạo ra một website ẩm thực đẹp mắt và chất lượng là một vấn đề không hề

dễ Để xây dựng được một website như vậy đòi hỏi lập trình viên phải hiểu được về công cụ và ngôn ngữ lập trình

Đây là bài báo cáo đồ án môn học đầu tiên được thực hiện trong khoảng thời gian gần 2 tháng Bước đầu đi vào thực tế của em còn hạn chế và còn nhiều bỡ ngỡ nên không tránh khỏi những thiếu sót, em rất mong nhận được những ý kiến đóng góp quý báu của quý Thầy Cô để kiến thức của em trong lĩnh vực này được hoàn thiện hơn đồng thời có điều kiện bổ sung, nâng cao ý thức của mình

Mục lục

LỜI MỞ ĐẦU 6

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 8

1 Lý do chọn đề tài 8

2 Mục tiêu của đề tài 8

3 Môi trường phát triển 8

4 Các công cụ hỗ trợ 13

CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB 14

1) Thiết kế các chức năng: 14

2) Trang chủ có giao diện: 15

3) Trang thiết kế: 16

4) Hướng dẫn sử dụng: 17

I KẾT LUẬN 18

II TÀI LIỆU THAM KHẢO 18

1 Link source code: 19

2 Code mẫu: 19

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI

1 Lý do chọn đề tài

Ngày nay mọi người thường có xu hướng tìm kiếm những nhà hàng, quán ăn thông qua các công cụ tìm kiếm hoặc những trang web về ẩm thực Những thông tin tổng quan về nhà hàng và các hình ảnh về món ăn sẽ giúp mọi người biết được thông tin, các món ăn nhà hàng cung cấp Vì thế thiết kế website nhà hàng giúp thu hút được nhiều khách hàng hơn

Với sự phát triển hiện đại như ngày nay,Internet marketing được ứng dụng lên tất cả các ngành nghề, lĩnh vực Thì với một nhà hàng hay quán ăn cũng cần phải có một website riêng cho mình

Để thiết kế một website cho nhà hàng hay quán ăn cần phải tạo được sự hấp dẫn và chuyên nghiệp để tạo nên điểm khác biệt và thu hút nhiều khách hàng hơn bên cạnh những đối thủ cạnh tranh khác Để có được điều này, mọi người có thể lựa chọn SIKIDO để tạo nên một website không chỉ đẹp mắt mà còn có giao diện thân thiện

Với những thông tin chung trên mọi người có thể hiểu được tầm quan trọng và cần thiết của một website cho nhà hàng của mình Hãy cùng SIKIDO tìm hiểu rõ hơn về những lợi ích mà thiết kế website mang lại

2 Mục tiêu của đề tài

 Tiếp cận khách hàng nhanh chóng

 Quảng bá hình ảnh nhà hàng

 Khách hàng có thể đặt bàn trực tuyến thuận tiện

3 Môi trường phát triển

 Internet

 Internet là một mạng toàn cầu gồm nhiều máy tính khác nhau chúng kết nối với nhau thông qua một ngôn ngữ chung Chúng rất đơn giản như một mạng điện thoại quốc tế không một ai sở hữu hay điều khiển hệ thống nay nhưng

nó làm việc như một mạng diện rộng Có vô số các máy chủ trên Internet, mỗi máy chủ cung cấp thông tin và dịch vụ khác nhau

 Web

Hình 1.3: WorldWideWeb

 World Wide Web (www), gọi tắt là web, là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (gửi và nhận thông tin) qua các máy tính nối với mạng Internet Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet Nhưng web thực ra chỉ là một trong các dịch vụ chạy trên Internet

 Các tài liệu trên web được lưu trữ trong một hệ thống siêu văn bản (Hypertext) đặt tại các máy Webserver nối mạng Internet Người dùng phải

sử dụng một chương trình được gọi là trình duyệt web (Web Browser) để xem các siêu văn bản này Chương trình này sẽ nhận thông tin tại ô địa chỉ URL do người sử dụng yêu cầu, sau đó trình duyệt sẽ tự động gửi thông tin đến máy Webserver và hiển thị trên màn hình máy tính của người xem

 HTML

Hình 1.4: HTML

➢ Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là một trong các loại ngôn ngữ được sử dụng trong lập trình web Khi truy cập một trang web cụ thể là click vào các đường link, bạn sẽ được dẫn tới nhiều trang các nhau, và các trang này được gọi là một tài liệu HTML (tập tin HTML)

➢ Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag Bạn có thể phân biệt một trang web được viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó Ở cuối các trang HTML thường hay có đuôi là .HTML hoặc HTM

➢ HTML là ngôn ngữ lập trình web được đánh giá là đơn giản Mọi trang web, mọi trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML Hiện nay, phiên bản mới nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với các phiên bản HTML cũ

 CSS

Hình 1.5: CSS

➢ 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) Bạn 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,… rất nhiều

➢ Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

 JAVASCRIPT

Hình 1.6: JavaScript

➢ JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong

suốt 20 năm qua Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

1 HTML: Giúp bạn thêm nội dung cho trang web

2 CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.

3 JavaScript: Cải thiện cách hoạt động của trang web

➢ JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github

 BOOTSTRAP

Hình 1.7 Bootstrap

➢ Bạn có thể đã quen thuộc với chức năng của frameworks là gì Nó tập hợp các cú pháp dành riêng cho nhiệm nào đó trong một bộ sưu tập để giúp các web developer xây dựng website nhanh hơn nhiều, vì họ không cần phải lo về các lệnh và chức năng cơ bản

➢ Mặc dù vậy, vẫn thiếu sự thống nhất do việc các thư viện được sử dụng quá nhiều, cần phải thay đổi liên tục Bootstrap là câu trả lời cho vấn đề này ➢ Front-end framework là mã nguồn mở, ban đầu được xây dựng bởi Mark Otto và Jacob Thornton để lập trình web front-end nhanh hơn và dễ dàng hơn

➢ Nó chứa tất cả các mẫu thiết kế dựa trên HTML và CSS với nhiều chức năng và thành phần khác nhau, như điều hướng, hệ thống lưới, băng chuyền hình ảnh và các nút

➢ Mặc dù Bootstrap giúp tiết kiệm thời gian của nhà phát triển khỏi việc phải quản

lý các template nhiều lần, nhưng mục tiêu chính của nó là tạo ra các responsive

website Nó cho phép giao diện người dùng của trang web có thể hoạt động tối ưu trên mọi kích thước màn hình, trên điện thoại màn hình nhỏ hoặc máy tính để bàn màn hình lớn

➢ Do đó, các nhà phát triển không cần xây dựng các trang web dành riêng cho từng thiết bị và bị giới hạn phạm vi đối tượng nữa

➢ Do sự phổ biến của nó, ngày càng nhiều cộng đồng Bootstrap xuất hiện Đó là một nơi tuyệt vời để các nhà phát triển và nhà thiết kế trao đổi kiến thức và thảo luận về các bản vá framework mới

4 Các công cụ hỗ trợ

 Visual Studio Code

Hình 1.8: 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

➢ Visual Studio Code là gì được rất nhiều người tìm hiểu Đây cũng là một trong các ứng dụng được dân IT “săn đón” và tải về và sử dụng rất nhiều Visual Studio Code cũng luôn có những cải tiến và tạo ra đa dạng các tiện ích đi kèm từ đó giúp cho các lập trình viên sử dụng dễ dàng hơn Trong đó có thể kể đến những ưu điểm sau:

• Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như HTML, CSS, JavaScript, C++,…

• Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung

• Các tiện ích mở rộng rất đa dạng và phong phú

• Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc

xử lý vòng lặp (Debug),…

• Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống

➢ Visual Studio Code là một trong những trình biên tập Code rất phổ biến nhất hiện nay Ứng dụng này cũng ngày càng chứng tỏ ưu thế vượt trội của mình khi so sánh với những phần mềm khác Tuy bản miễn phí không có nhiều các tính năng nâng cao nhưng Visual Studio Code thực sự có thể đáp ứng được hầu hết nhu cầu cơ bản của lập trình viên

CHƯƠNG 2: THIẾT KẾ VÀ XÂY DỰNG TRANG WEB

1) Thiết kế các chức năng:

Layout Website

 Bố cục trang web (Website Layout hay Layout Website) là sự sắp xếp của tất cả các phần tử trực quan trên trang web và các mối quan hệ giữa chúng Thông qua việc định vị có chủ đích các phần tử của trang, bố cục trang web có thể cải thiện

khả năng truyền tải thông điệp của trang web cũng như khả năng sử dụng của

nó

 Bố cục trang web là một thành phần quan trọng của thiết kế web Nó xác định trình tự các phần tử trang web được trình bày cho những người truy cập, phần

tử nào thu hút sự chú ý nhiều nhất và sự cân bằng tổng thể trong thiết kế

 Nói một cách dễ hiểu, thiết kế bố cục trang web tốt có thể thu hút sự chú ý của người dùng và dẫn dắt họ đi có chủ đích Nó có thể giúp chủ sở hữu webstie điều hướng người dùng đến những thứ quan trọng nhất trước, và sau đó tiếp tục đến các phần tiếp theo trong kịch bản dựng sẵn

2) Trang chủ có giao diện:

Trang chủ

Giới thiệu

Sản Phẩm

Thông Tin dịch vụ

Thông tin thiết kế

Các gói

Mô tả: Đây là hình ảnh lớn nhất và nổi bật nhất trên trang chủ, thường là ảnh chụp không gian nhà hàng hoặc các món ăn đặc trưng Ảnh bìa cần có chất lượng cao và hấp dẫn để thu hút sự chú ý của khách hàng

3) Trang thiết kế:

Giao diện:

Mô tả: là phần giới thiệu ngắn gọn về nhà hàng, bao gồm các thông tin như địa chỉ,

số điện thoại, giờ hoạt động, loại hình ẩm thực, các món ăn nổi bật, Mô tả cần súc tích và đầy đủ thông tin để khách hàng có thể nắm được các thông tin cơ bản về nhà hàng

4) Hướng dẫn sử dụng:

Khi login vào trang Web:

Mô tả: Menu là phần quan trọng nhất trên trang chủ của một website nhà hàng Menu cần hiển thị đầy đủ các món ăn và giá cả của nhà hàng Menu cần được trình bày khoa học và dễ nhìn để khách hàng có thể dễ dàng lựa chọn món ăn

 Xây dựng được một trang web giới thiệu về nhà hàng

 Được nâng cao kiến thức và hiểu rõ hơn về HTML, CSS, Bootstrap, Javascript.

 Giúp thu hút khách hàng.

 Quảng bá nhà hàng tới nhiều người.

Hướng phát triển:

 Mở rộng khả năng đặt đồ ăn ngay tại nhà

 Nâng cấp hệ thống để khách hàng sử dụng nhanh chóng.

 Đơn giản hóa quy trình đặt bàn trực tuyến.

II TÀI LIỆU THAM KHẢO

 Trang web W3Schools Online Web Tutorials, tham khảo vào tháng 8/2022: W3Schools Online Web Tutorials

 Trang web F8 – Học lập trình online, tham khảo vào tháng 8/2022: F8 - học lập trình để đi làm! | Học lập trình online | Học lập trình Javascript (fullstack.edu.vn)

 Trang web Bootstrap, tham khảo vào tháng 8/2022: Bootstrap · The most popular HTML, CSS, and JS library in the world (getbootstrap.com)

 Trang Wikipedia, tham khảo vào tháng 8/2022: https://www.wikipedia.org/

PHỤ LỤC CODE

1 Link source code:

https://docs.google.com/document/d/11oU8Hu0uP-LJnCVumy0usKmEy4svLM59lYWQiWNEKsI/edit?

usp=sharing

2 Code mẫu:

Tạo menu giao diện trang Web.