bài báo cáo cuối kỳ môn lập trình đề tài thức ăn nhanh

Đề án thiết kế trang web phục vụ nhu cầu cấp thiết của công tyvà khách hàng.. Html Là cái sườn để tạo nên giao diện của trang web  Thêm tiêu đề, định dạng đoạn văn, ngắtdòng điều khiển

TRƯNG ĐI HC VĂN LANG KHOA THƯƠNG MI

-o0o -BI TIỂU LUẬN CUỐI KỲ VỀ THIẾT KẾ TRANG WEB THEO ĐỀ TI ĐỒ ĂN VẶT

MÔN: PHÁT TRIỂN WEB CƠ BẢN

Giảng viên: Nguyễn Minh Tân

Tp H$ Ch% Minh – năm 2022

TÊN THNH VIÊN MÃ SỐ SINH VIÊN

TRẦN HIẾU THẢO NHI 197TM06773LÊ THỊ KIM NGÂN 197TM06680NGUYỄN NGỌC CHÂU QUỲNH 197TM29599NGUYỄN BẢO TRINH 197TM19733

BI TIỂU LUẬN CUỐI KỲ VỀ THIẾT KẾ TRANG WEB THEO CHỦ ĐỀ ĐỒ ĂN VẶT M'C L'C

1 GI I THI UỚ Ệ 1

1.1 Doanh nghi p Aholaệ 1

1.2 Đềề án thiềết kềế trang web 1

3.2.2 Trang liền h (lienhe.html)ệ 9

3.2.3 Trang gi i thi u (gioithieu.html)ớ ệ 9

4.5 Phầền Body – m c Vềề C a Hàngụ ử 15

4.6 Phầền Body – m c Liền Hụ ệ 15

4.7 Phầền Footer 16

4.8 Phầền body c a trang liền hủ ệ 16

4.9 Phầền body c a trang Gi i Thi uủ ớ ệ 17

4.10 Phầền Body c a trang D ch Vủ ị ụ 18

Ậ 18

Danh sách b ng ả

B ng 1.a Ngôn ng l p trình trong trang webữ ậ 2

B ng 2.a Phầền tiều đềề c a trang webủ 5

B ng 8.a D li u cho trang lienhe.htmlữ ệ 9

B ng 9.a D li u cho trang gioithieu.htmlữ ệ 10

B ng 10.a D li u cho trang dichvu.htmlữ ệ 11

B ng 11.a D li u cho phầền cuôếi trang web - Footerữ ệ 12

ể

Bi u Đôề 1.ê Quy trình th c hi n đềề ánự ệ 2Bi u Đôề 2.ê Cầếu trúc các trang web html 3Bi u Đôề 3.ê Cầếu trúc trang css 3

ê

Hình nh 11.Ả Thông tin c a trang lienhe.htmlủ 16

Hình nh 12.Ả Video c a trang lienhe.htmlủ 17

Hình nh 13.Ả Thông tin c a trang gioithieu.htmlủ 17

1GIỚI THIỆU 1.1 Doanh nghiệp Ahola

Công ty Ahola là công ty khởi nghiệp về lĩnh vực ẩm thực tại thành phố H$ Ch% Minh Côngty kinh doanh các món ăn vặt thơm ngon với tôn chỉ ba luôn : “Luôn ngon, luôn rẻ, luôn hàilòng khách hàng”

Công ty luôn đảm bảo chất lượng đ$ ăn và dịch vụ hàng đầu, đề cao sự tiện nghi và tiện dụngđối với khách hàng Công ty luôn cố gắng sáng tạo, nhằm có thể đưa những món ăn ngon bổrẻ ra thị trường

Trong thời kỳ đại dịch Covid-19, lĩnh vực thực phẩm bán tại chỗ bị ảnh hưởng nghiêm trọng.Do đó, để th%ch nghi với những ảnh hưởng từ đại dịch, công ty Ahola quyết định bán hàngonline thông qua các website Đề án thiết kế trang web phục vụ nhu cầu cấp thiết của công tyvà khách hàng

1.2 Đề án thiết kế trang web

Giao diện trang web được thiết kế nhẹ nhàng theo tông màu h$ng nhạt chủ đạo Trang webg$m một trang chủ và nhiều trang web con, cho phép khách hàng truy cập xem và đặt cácmón ăn online Các trang web được lưu trữ trên trang lập trình github.com Các trang webđược thiết kế theo kết cấu như hình dưới đây:

H@nh Anh 1 Cấu trúc một trang web điển h@nh

1.3 Ngôn ngữ lập tr@nh

Trang web được thiết kế sử dụng hai ngôn ngữ lập trình chủ đạo là html và css Ngoài ra, mộtbộ phận được sử dụng ngôn ngữ lập trình thông dụng là javascript để tạo hiệu ứng cho trangweb Mỗi ngôn ngữ đều có công dụng và hiệu quả riêng

Html Là cái sườn để tạo nên

giao diện của trang web  Thêm tiêu đề, định dạng đoạn văn, ngắtdòng điều khiển

 Tạo danh sách, nhấn mạnh văn bản, tạoký tự đặc biệt, chèn hình ảnh, tạo liên kết Xây dựng bảng, điều khiển một số kiểu

mẫu

Css Là trang tr% cho các phần

tử html của trang web 

Tạo phong cách và định kiểu cho nhữngyếu tố trong html

 Phân biệt cách hiển thị của trang web vớinội dung ch%nh của trang bằng cách điềukhiển bố cục, màu sắc, và font chữ

Javascrip t

Là lập trình cách màchương trình hoạt độngdưới sự tương tác củangười dùng với website

 Hỗ trợ phản ứng nhanh các hiệu ứng baog$m thư viện ảnh, bố cục có t%nh thayđổi

 Tạo nên các hành vi động cho trang web

BSng 1 Ngôn ngữ lập tr@nh trong trang web

1.4 Quy tr@nh thực hiện

Đề án được thực hiện theo quy trình như sau:

Biểu ĐX 1 Quy tr@nh thực hiện đề án

Thông tin dữ liệu và hình ảnh được tạo ra hoặc thu thập trên Internet Sau đó, các dữ liệu vàhình ảnh này được bỏ vào trong các thẻ html Các trang web html, bao g$m trang chủ(index.html), trang liên hệ (lienhe.html), trang giới thiệu công ty (gioithieu.html), và trangdịch vụ (dichvu.html), được tạo ra dựa theo kết cấu của hình ảnh 1 Định dạng (từ filestyle.css) được sử dụng để tại nên thiết kế đơn giản nhưng bắt mắt, thu hút khách hàng Hiệuứng (từ file main.js) được sử dụng để đem đến những hiệu ứng động, và giúp hoạt động củacác trang web thêm mượt mà và trơn tru

2 CẤU TRÚC ĐỀ ÁN

Cấu trúc của đề án được định hình, theo thứ tự lần lượt là html, css, và javascript như sau:

Biểu ĐX 2 Cấu trúc các trang web html

Biểu ĐX 3 Cấu trúc trang css

Biểu ĐX 4 Cấu trúc trang main.js

Đề án g$m một trang ch%nh (index.html), và ba trang con (lienhe.html, gioithieu.html, vàdichvu.html) để tương tác Html được sử dụng để cung cấp cấu trúc cơ bản trang web, baog$m các hình ảnh và dữ liệu Css (style.css) được sử dụng để tạo kiểu dáng cho trang web vớimục đ%ch trình bày và định dạng phù hợp Để tăng t%nh tương tác cho trang web, một phầnjavascript (main.js) được sử dụng tạo nên các hiệu ứng bắt mắt

Style.css

Margin & Padding

Đ nh ị d ng ạ

Màu sắếc, kích c , ki u ỡ ê

chữ Hình nh a Bi u t ê ượ ng icon

Nút bầếm button Khôếi block

Các class Các id

3 NỘI DUNG ĐỀ ÁN

Trang chủ index.html bao g$m phần đầu trang header, phần thân trang body – chứa các mụchome, menu, dịch vụ, về cửa hàng, liên hệ, và phần cuối trang web footer Mỗi phần hoặcmục được phân biệt rõ ràng với ghi chú trong code

Trang con lienhe.html chỉ g$m phần đầu trang header, phần thân trang body chứa hai mục làvề cửa hàng và video, và phần cuối trang web footer

Trang con gioithieu.html chỉ g$m phần đầu trang header, phần thân trang body chứa một mụcduy nhất là về cửa hàng, và phần cuối trang web footer

Trang con dichvu.html cũng chỉ bao g$m phần đầu trang header, phần thân trang body chứamột mục duy nhất là dịch vụ, và phần cuối trang web footer

Điểm chung của các trang web là có cùng header và footer Phần khác biệt là nội dung thântrang body

3.1 Header

Phần header trang web bao g$m các banner liên kết, button,… được cố định trên đỉnh đầu

trang web Phần tương ứng trong code là thẻ <header id= “header” class=”menu-header”>.

Tên nhà hàng Hiển thị tên nhà hàng là Aloha

Các thẻ liên kết Liên kết tới các mục khác nhau trong trang web Chứa tổng

cộng 5 thẻ liên kết khác nhau: Home

 Menu Dịch vụ Về cửa hàng Liên hệ

Các công cụ đặc biệt Dùng để chuyển giữa giao diện sáng và tối Khi bấm vào sẽ

chuyển từ sáng sang tối và ngược lại. : sáng

 :tối

BSng 2 Phần tiêu đề của trang web

3.2 Body

Phần thân của trang web (body) bao g$m các mục home, menu, dịch vụ, về cửa hàng, và liênhệ Phần thân được kết hợp giữa các ngôn ngữ lập trình html, css, và javascript

3.2.1 Trang chủ (index.html) 3.2.1.1 Mục Home

Mục Home dùng để đưa ra những món đặc biệt nhất của quán tạo điểm nhấn cho trang web.Mục tương ứng trong code là thẻ <section class= “home” id= “home”>

Khách Hàng Khách hàng là trung tâm của cửa hàng chúng tôi Sự hài lòng của khách hàng là niềm vui và động lực.

Giao Hàng Cửa hàng chúng tôi đSm bSo việc giao hàng nhanh chóng và thuận lợi.

BSng 5 Dữ liệu cho mục dịch vụ3.2.1.4 Mục Về Cửa Hàng

Mục về cửa hàng đề cập đến những tiêu ch% làm nền thương hiệu đ$ ăn vặt Ahola Mục này có

hình ảnh và nội dung Mục tương ứng trong code là thẻ <section class= “about section

body-container” id= “about”>.

Tiêu đề: Những món ăn Thơm ngon, vệ sinh, và đầy dinh dưỡng của chúng tôi sẽ đem đến nguXn năng lượng, sự hào hứng, khởi đầu ngày mới của bạn.

Cửa hàng Ahola luôn mong được phục vụ quý khách.

BSng 6 Dữ liệu cho mục về cửa hàng3.2.1.5 Mục Liên hệ

Mục liên hệ tạo điều kiện cho khách hàng liên hệ với cửa hàng ăn vặt ngay lập tức Mục này

có thông tin và nút button để liên hệ Mục tương ứng trong code là thẻ <section class=

“contact section body-container” id= “contact”>.

Thông tin

Tiêu đề: Cửa hàng Ahola Nội dung: Quý khách muốn đặt hàng hay có phSn hXi về sSn phẩm cũng như dịch vụ của cửa hàng Xin hãy liên hệ với chúng tôi ngay!

Button: Liên hệ ngay

BSng 7 Dữ liệu cho mục liên hệ

3.2.2 Trang liên hệ (lienhe.html)

Trang liên hệ chứa những thông tin bổ %ch giúp khách hàng nhanh chóng đưa ra quyết địnhđặt hàng Phần body của trang có hai mục là đội ngũ nhân viên và video từ youtube

Đội ngũ nhân viên Luôn chuyên nghiệp, sáng tạo, tận tâm, để đem đến những món ăn vặt trên cS tuyệt vời Cửa hàng Ahola luôn mong được phục vụ quý khách.

Xin hãy đừng ngần ngại liên hệ với chúng tôi theo số điện thoại, email, hay đặt hàng trực tuyến!

Và đây là một tip làm bánh flan siêu ngon, siêutuyệt vời, xin được chia sẻ!

Cửa hàng Ahola luôn mong được phục vụ quýkhách

Dịch Vụ Cửa hàng chúng tôi cung cấp những món ăn tuyệt hSo, với chất lượng tốt nhất, đSm bSo vệ sinh an toàn thực phẩm.

Khách Hàng Khách hàng là trung tâm của cửa hàng chúng tôi Sự hài lòng của khách hàng là niềm vui và động lực.

Giao Hàng Cửa hàng chúng tôi đSm bSo việc giao hàng nhanh chóng và thuận lợi.

Thông tin H@nh Snh

Freeship Trong vòng bán kính 5km xung quanh cửa hàng, hoàn toàn miễn phí ship!!!

Sale Mua hàng online sẽ được nhận rất nhiều ưu đãi khác nhau!!!

Voucher Mua hàng tại cửa hàng sẽ có cơ hội bốc thăm trúng những vocher giá trị tại các cửa hàng tiện lợi như GS25, Minimart, và CircleK!!!

BSng 10 Dữ liệu cho trang dichvu.html

3.3 Footer

Phần cuối trang web là mục footer, nơi này dùng để chứa các thông tin như các đường iconschứa đường links tới các mạng xã hội, các dịch vụ, giới thiệu, và địa chỉ liên hệ Bấm vàotừng bộ phận hoặc là dẫn ra những đường links tương ứng bên ngoài hoặc là liên kết với bộ

phận tương ứng trong trang web Phần tương ứng trong code là thẻ <footer class= “footer

section body-container”>.

Cửa Hàng Ahola  Facebook

 Instagram TwitterSử dụng các biểu tượng từ favicon:

Dịch Vụ

 Bấm vào các đường link sẽ dẫn tới trang dichvu.html

 Vận chuyển Giá tiền Đặt món Code giảm giá

Giới Thiệu

 Bấm vào các đường link sẽ dẫn tới trang gioithieu.html

 Sự kiện Hợp đ$ng Ch%nh sách cá nhân Điều khoản sử dụng

và 0159-357-842 (Mr.B) Email: Ahola@gmail.com

BSng 11 Dữ liệu cho phần cuối trang web - Footer

H@nh Anh 3 Home 1 của index.html

H@nh Anh 4 Home 2 của index.html

H@nh Anh 5 Home 3 của index.html

4.7 Phần Footer

H@nh Anh 10 Footer của đề án

Các trang web con bao g$m lienhe.html, gioithieu.html, và dichvu.html sử dụng header vàfooter tương tự như trang web ch%nh index.html

4.8 Phần body của trang liên hệ

H@nh Anh 11 Thông tin của trang lienhe.html

H@nh Anh 12 Video của trang lienhe.html

4.9 Phần body của trang Giới Thiệu

H@nh Anh 13 Thông tin của trang gioithieu.html

4.10 Phần Body của trang Dịch Vụ

H@nh Anh 14 Thông tin của trang dichvu.html

5 KẾT LUẬN

Đề án trang web của công ty Ahola đã được thiết kế đơn giản nhưng đem lại hiệu quả chodoanh nghiệp Sự kết hợp tốt giữa html và css đã tạo nên nhưng trang web chuyên nghiệp vàphù hợp với mục đ%ch kinh doanh của cửa hàng Thêm vào đó, những hiệu ứng từ javascriptnhư thanh trượt, chuyển đổi trang web giữa ngày và đêm, cũng như hiệu ứng khi đăng hìnhảnh/block/văn bản lên, đã làm cho trang web trở nên mượt mà và thỏa mãn khách hàng