KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ 1ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE NHÀ HÀNG PIZZA

ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE
NHÀ HÀNG PIZZA

Sinh viên thực hiện

: NGUYỄN THỊ OANH Lớp: 19IT1

Giảng viên hướng dẫn : ThS. NGUYỄN VĂN BÌNH

Đà nẵng, ngày 01 tháng 08 năm 2020


ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1
ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE
NHÀ HÀNG PIZAA

Đà Nẵng, ngày 01 tháng 8 năm 2020

2


MỞ ĐẦU

Cuộc sống ngày càng phát triển, con người ngày càng hiện đại hơn trong nhu cầu ăn ở.
Cùng với đó thói quen ẩm thực cũng khác hơn trước. Chính điều đó tạo ra cơ hội cho
kinh doanh pizza trở nên phổ biến hơn bao giờ hết.
Với tính chất cơng việc cũng như nhu cầu ăn ở ngày nay thì đa số khách hàng hiện
nay thích ở nhà và có người ship đồ ăn tới hơn là phải ra tới quán. 1 website sẽ giúp
bạn giải quyết được những thắc mắc cũng như các đơn hàng từ phía khách một cách tự
động mà không cần mất quá nhiều thời gian để tiếp nhận bằng điện thoại.
Chỉ với những cú click nhanh chóng đơn giản website, khách hàng đã tự mình tìm
hiểu được tất cả các loại pizza mà nhà hàng của bạn đang cung cấp để mua. Đồng thời
website là nơi cập nhật các thông tin khuyến mãi hấp dẫn nhất cho khách hàng trung
thành để theo dõi.
Thế giới đang dần thay đổi với tốc độ chóng mặt và người dùng internet ngày càng
nhiều thì cửa hàng nhận diện thương hiệu vẫn chưa đủ để thu hút khách hàng, 1
website đẹp hỗ trợ bạn xây dựng được hình ảnh chuyên nghiệp từ màu sắc cho tới
nhận diện thương tạo nên giá trị cao cho mặt hàng của chính đơn vị bạn đang kinh
doanh. Song song đó, thiết kế website nhà hàng pizza với những chiếc bánh hấp dẫn,
cùng tính chân thực đến từng chi tiết có đậm dấu ấn thương hiệu sẽ khiến khách hàng
khó lịng qn được.

1


LỜI CẢM ƠN
Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ và
hướng dẫn rất tận tình của các thầy cơ thuộc Khoa Công nghệ Thông tin Và
Truyền thông – Đại học Đà Nẵng. Em xin cảm ơn các thầy cô thuộc bộ môn
chuyên ngành đã cung cấp cho chúng em các thông tin, kiến thức vô cùng quý
báu và cần thiết trong suốt thời gian quá để em có thể thực hiện và hồn thành đồ
án của mình. Đặc biệt em xin chân thành cảm ơn thành thầy Nguyễn Văn Bình
người đã trực tiếp hướng dẫn chúng em trong thời gian thực hiện đồ án này.

Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thông
tin đã ủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp
chúng tơi trong q trình nghiên cứu và thực hiện đề tài.
Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễn
nên đề tài khơng tránh khỏi những sai xót. Em rất mong nhận được sự thông cảm
của quý thầy cô và mong đón nhận những góp ý của thầy cơ và các bạn.
Em xin chân thành cảm ơn!

2


NHẬN XÉT
CỦA GIÁO VIÊN HƯỚNG DẪN
...................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
.
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
....................................................................................................................................
........................................................
Đà Nẵng, ngày 01 tháng 08 năm 2020

Giảng Viên Hướng Dẫn

ThS. NGUYỄN VĂN BÌNH

3


MỤC LỤC
MỞ ĐẦU ……………………………………………………….1
LỜI CẢM ƠN ………………………………………………......2
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN …………….... 3
CHƯƠNG 1: GIỚI THIỆU…………………………………….. 7
1.1 Giới thiệu về đề tài…………………………………. 7
1.2 Phương pháp thực hiện……………………………...7
1.3 Cấu trúc đồ án ………………………………………7
CHƯƠNG 2: GIỚI THIỆU WEBSITE NHÀ HÀNG PIZZA…..8
2.1 Tên Website ………………………………………... 8
2.2 Cấu trúc Website ……………………………………8
2.3 Chi tiết……………………………………………….8
2.3.1 Trang chủ ………………………………….... 8
2.3.2 Trang thực đơn………………………………. 9
2.3.3 Trang khuyến mãi ……………………………9
2.3.4 Trang liên hệ ………………………………..10
2.3.5 Trang chính sách ……………………………11
2.3.6 Trang đặt hàng……………………………… 11
2.3.7 Trang tài khoản………………………………12
CHƯƠNG 3: ĐẶT VẤN ĐỀ- MỤC ĐÍCH THIẾT KẾ………..14
CHƯƠNG 4: CƠNG NGHỆ SỬ DỤNG CHO WEBSITE …….15
4.1 HTML5 ……………………………………………..15
4.1.1 HTML5 là gì ?...................................................15

4.1.2 Ưu điểm của HTML5…………………………15
4.1.3 Nhược điểm của HTML5……………………..15
4,2 CSS…………………………………………………..15
4.2.1 CSS là gì ?.........................................................15
4.2.2 Ưu điểm của CSS …………………………….16
4.3 Boostrap……………………………………………..16
4.3.1 Boostrap là
gì?...................................................16
4.3.2 Ưu điểm của Boostrap………………………..16
4.4 Jquery………………………………………………..16
4.4.1 Jquery là gì?.......................................................16
4


4.4.2 Ưu điểm của Jquery…………………………..16
4.5 Javascrip…………………………………………….17
4.5.1 Javascrip là gì?.................................................17
4.5.2 Ưu điểm của Javascrip……………………….17
CHƯƠNG 5 : KẾT LUẬN……………………………………..18

5


MỤC LỤC HÌNH ẢNH

CHƯƠNG 1: GIỚI THIỆU
1.1 Giới thiệu đề tài:
6

Sau khi tìm hiểu và nghiên cứu thơng tin, xác định được khách hàng mục
tiêu, website “NHÀ HÀNG PIZZA” được xây dựng.
Website chủ yếu giới thiệu về các món ăn uống cho khách hàng thoải mái
lựa chọn cho mình những món ăn để mình thưởng thức trong bữa ăn
Website được tạo ra ngoài việc đem lại sự thư giãn cho mọi người còn đem lại
thêm kiến thức và sự hiểu biết về lịch sử và văn hóa của đất nước Ý.
Cuộc sống hiện đại hóa cùng với mức sống của con người ngày càng cao, khiến
cho việc du nhập của món ăn và thói quen thưởng thức ẩm thực của người VIệt
trở nên cao hơn bao giờ hết. Đây chính là cơ hội cho pizza – một món ăn đặc
trưng của ẩm thực Ý có cơ hội “tỏa sáng”.
Vì vậy cần một website thương mại điện tử để tiếp cận đến những khách hàng
tiềm năng và giới thiệu về món pizza thơm ngon của mình một cách thực sự
chuyên nghiệp.
1.2 Phương pháp thực hiện:
- Trước tiên ta tìm hiểu tham khảo những website nhà hàng pizza đã có.
- Thống kê những gì cần làm trong giao diện website .
- Thiết kế CSDL.
- Thiết kế giao diện website nhà hàng pizza bằng việc sử dụng ngôn ngữ
HTML thư viện Boostrap, JavaScript, sử dụng một số cơng cụ để lập trình
như Sublime Text, …
- Sửa và bổ sung cho đồ án
- Làm báo cáo đồ án.
1.3 Cấu trúc đồ án:
- Giới thiệu website nhà hàng Pizza.
- Đặt vấn đề - Mục đích thiết kế.
- Công nghệ sử dụng cho trang web
- Kết luận.

CHƯƠNG 2: GIỚI THIỆU WEBSITE NHÀ HÀNG PIZZA.
2.1 Tên website :

7


Đáp ứng nhu cầu ăn uống hiện nay của người sử dụng và sự đóng góp ý kiến
của thầy hướng dẫn nên em đã quyết định thiết kế “Website nhà hàng
Pizza” . Giúp người dùng dễ dàng tìm kiếm và gợi nhớ .
2.2 Cấu trúc website:
Website gồm có các phần :
- Trang chủ
- Trang thực đơn
- Trang khuyến mãi
- Trang liên hệ
- Trang chính sách
- Trang đặt hàng
- Trang tài khoản
2.3 Chi tiết :
2.3.1 Trang chủ

Hình 1: Trang chủ
Ở trên là Trang chủ của website. Trang chủ liên kết với tất cả những trang
còn lại. Bao thực đơn, khuyến mãi, lien hệ, chính sách, đặt hàng, tài khoản. Trang
chủ giúp người dùng xem được tổng quan của trang web, và người dùng muốn
xem chi tiết phần nào thì có thể chuyển tab rất dễ dàng.
8


2.3.2 Trang thực đơn

Hình 2: Trang thực đơn
Trang này sẻ giới thiệu tất cả các món ăn mà nhà hàng có như pizza, nước,

salad, một số combo mà khách có thể tham khảo và một số món khác,.. Trên hình
ảnh mõi món sẽ có tên sản phẩm, giá sản phẩm, và nút mua hàng. Khi muốn mua
hàng thì khách hàng nhấn vào chữ “ MUA HÀNG” thì trang web sẽ tiến hành
chuyển đến trang mua hàng và khách hàng chỉ cần nhâp đầy đủ thông tin và tiến
hành đặt hàng.
2.3.3 Trang khuyến mãi

9


Hình 3: Trang khuyến mãi
Trang khuyến mãi sẽ giúp khách hàng biết được có nhưng khuyến mãi của
cửa hàng và khách hàng khơng thể bỏ lỡ những khuyến mãi đó .
2.3.4 Trang liên hệ.

10


Hình 4: Trang liên hệ
Tại đây khách hàng có thể lien hệ trực tiếp đến cửa hàng với số điện thoại
với nhu cầu đặt hàng hoặc phản ánh chất lượng dịch vụ. Người dùng cũng có thể
liên hệ qua địa chỉ email cũng như tới địa chỉ của nhà hàng . Bên phỉa là bản đồ
giúp khách hàng định vị rõ hơn về địa chỉ của nhà hàng, xác định được khoảng
cách đối với nhà hàng.
2.3.5 Trang chính sách

11


Hình 5: Trang chính sách

Trang này cung cấp những chính sách mà khách hàng có thể tìm hiểu như
giao hàng miễn phí, thời gian làm việc của cửa hàng, chính sách giao hàng và bảo
mật thông tin của khách hàng. Khách hàng có thể tìm hiểu để khơng phải chịu
thiệt thịi khi có sự cố.
2.3.6 Trang đặt hàng.

12


Hình 6: Trang đặt hàng
Ở trang này khách hàng điền những thông tin như họ tên, email, số điện
thoại, địa chỉ sản phẩm mình muốn mua để tiến hành đặt hàng.
2.3.7 Trang tài khoản.

Hình 7: Trang tài khoản
13


Trang tài khoản khách hàng có thể đăng kí nếu chưa có tài khoản chỉ cần
một số thơng tin đơn giản khác hàng đã có tài khoản sau đó chỉ cần đăng nhập với
tài khoản vừa đăng kí là xong.

14


CHƯƠNG3: ĐẶT VẤN ĐỀ- MỤC ĐÍCH THIẾT KẾ
-

Giúp khách hàng có thể dễ dàng tìm kiếm những món ăn đáp ứng đủ nhu
cầu.

Cung cấp đủ thông tin quan trọng của nhà hàng để khách hàng có thể nắm
bắt rõ thơng tin về nhà hàng.
Quảng bá thương hiệu nhà hàng pizza để nhiều người có thể biết đến nhà
hàng.
Thuận tiện và nhanh chóng trong việc tìm kiếm và xem chi tiết sản phẩm.
Giao diện đẹp, bắt mắt, hấp dẫn, màu sắc nổi bật.
Dễ quản trị, chỉnh sửa và update sản phẩm mới hoặc thông tin khách hàng.

15


CHƯƠNG 4: CÔNG NGHỆ SỬ DỤNG CHO WEBSITSE
4.1 HTML5
4.1.1 HTML5 là gì?
HTML5 là một ngơn ngữ lập trình được phát triển trên nền tảng ngôn ngữ
HTML và quan trọng nhất của World Wide Web (WWW). Nó được sử dụng
để thiết kế và cấu trúc các website, hỗ trợ cho đa phương tiện tối đa nhưng vẫn
giúp cho website thân thiện với mọi người dùng và mọi thiết bị, các chương
trình máy tính, trình duyệt web…
4.1.2
4.1.3
-

Ưu điểm của HTML5.
Q trình học đơn giản và miến phí.
Mã nguồn mở và hồn tồn miễn phí.
Có cách đánh dấu gọn gang và đồng nhất.
Chuẩn chính của web được vận hành bởi World Wide Web
Consortium.
Dễ dàng tích hợp nhiều ngơn ngữ khác.

Nhược điểm của HTML5.
Được dung chủ yếu cho website tĩnh.
Chỉ có thể thực thi một số lệnh logic nhất định cho người dung.
Một số trình duyệt chậm khơng hổ trợ tính năng mới.

4.2 CSS
4.2.1 CSS là gì?
CSS là ngơn ngữ tạo phong cách cho trang web – Cascading Style Sheet
language. Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết
dưới dạng ngơn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng
của nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web. Nó
phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách
điều khiển bố cục, màu sắc, và font chữ.
16


4.2.2 Ưu điểm của CSS.
- Khả năng điều chỉnh trang gần như vô hạn
- không cần lặp lại các mô tả cho từng thanh phần
- giúp HTML markup rõ ràng và dễ quản lý hơn nhiều
4.3 Boostrap
4.3.1 Boostrap là gì ?
Bootstrap là một thư viện html, css và js. Bootstrap sử dụng html, css và js tạo
ra những mẫu cơ bản như: form, button, table, navigation… giúp nhà phát triển
web dễ dàng tạo ra những giao diện web tương thích với màn hình điện thoại.
4.3.2 Ưu điểm của bootstrap.
- Bootstrap dễ dàng sử dụng, chỉ cần bạn có kiến thức cơ bản về html,
css
- Ưu điểm nổi bật nhất của bootstrap là khả năng tự động điểu chỉnh
kích thước trang web phù hợp với các loại màn hình: điện thoại,

tablets, laptop hay máy tính để bàn.
- Bootstrap tương thích với tất cả các trình duyệt hiện đại như:
chrome, firefox, internet explorer, cốc cốc, safari và opera.
4.4. Jquery
4.4.1 Jquery là gì?
Là thư viện mã nguồn mở viết bằng ngôn ngữ javascript, giúp đơn giản
cách viết javascript và tăng tốc độ xử lý các xự kiện trên trang web.
4.4.2 Ưu điểm của Jquery.
- Dễ sử dụng
- Là một thư viện lớn của javascript
- Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn)
- Có nhiều tài liệu và hướng dẫn chi tiết
- Hỗ trợ ajax

17


4.5 Javascrip.
4.5.1 Javascript là gì?
JavaScript là một ngơn ngữ kịch bản từ Netscape. Nó tương tự như khả
năng Visual Basic của Microsoft , Sun’s Tcl , Perl của UNIX và REXX
của IBM . Nói chung, ngơn ngữ kịch bản được dễ dàng hơn và nhanh hơn
để mã trong hơn các ngơn ngữ có cấu trúc và biên soạn hơn như C và C+
+.Ngơn ngữ kịch bản nói chung mất nhiều thời gian hơn q trình biên
soạn ngơn ngữ, nhưng rất hữu ích cho các chương trình ngắn hơn.
4.5.2 Ưu điểm của Javascript
- Javascript được thực hiện ở phía khách hàng
- Javascript là một ngôn ngữ tương đối dễ dàng Ngôn ngữ
- Javascript tương đối nhanh đối với người dùng cuối
- Các tính năng bổ sung cho các trang web Các trình

CHƯƠNG 5: KẾT LUẬN
18


Trên cơ học tập về ngôn ngữ web và các ứng dụng lập trình. Dưới sự
hướng dẫn của thầy Nguyễn Văn Bình, em đã thiết kế được một trang web Pizza.
Tuy kết quả đạt được chưa cao,website còn nhiều điểm hạn chế chưa khắc phục
được, nhưng đó cũng là bước khởi đầu để em có thể hướng tới một trang web
hồn thiện và có thể áp dụng vào sử dụng được. Bên cạnh đó, trong q trình xây
dựng website, em cũng đã học hỏi được rất nhiều, những kĩ thuật bootstrap,
javascritp,css để có thể thiết kế được những trang web có chất lượng cao hơn sau
này.
Chúng em mới là những sinh viên bước đầu học lập trình, nên trang web
cũng không thể tránh khỏi những lỗi , những điểm chưa hợp lí, và em sẽ khơng
ngừng học hỏi, học tập để có kiến thức am hiểu về tâm lý khách hàng.
Một lần nữa, em xin gửi lời cảm ơn chân thành đến các thầy cô và đặc biệt
là thầy Nguyễn Văn Bình Giáo viên hướng dẫn em hồn thành bài làm này.

19