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

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ữn

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

Đà 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

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 naythí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ờiwebsite 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 quên được

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ônchuyê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à hoàn thành đồ áncủ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ôngtin đã ủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúpchúng tôi trong quá 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ễnnê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ảmcủ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!

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

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.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

MỤC LỤC HÌNH ẢNH

Hình 1: Logo……… 09

Hình 2: Trang chủ 10

Hình 3: Trang giới thiệu 11

Hình 4: Trang Albums ảnh cưới 12

Hình 5: Trang váy cưới 13

Hình 6: Trang dịch vụ, liên hệ 13

Hình 7: Form liên hệ 14

CHƯƠNG 1: GIỚI THIỆU

1.1 Giới thiệu đề tài:

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áilựa chọn cho mình những món ăn để mình thưởng thức trong bữa ănWebsite được tạo ra ngoài việc đem lại sự thư giãn cho mọi người còn đem lạithê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ếncho 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ệttrở nên cao hơn bao giờ hết Đây chính là cơ hội cho pizza – một món ăn đặctrư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àngtiề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ìnhnhư 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 :

Đá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ớ

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 trangcòn lại Bao thực đơn, khuyến mãi, lien hệ, chính sách, đặt hàng, tài khoản Trangchủ giúp người dùng xem được tổng quan của trang web, và người dùng muốnxem chi tiết phần nào thì có thể chuyển tab rất dễ dàng

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 muahàng thì khách hàng nhấn vào chữ “ MUA HÀNG” thì trang web sẽ tiến hànhchuyển đến trang mua hàng và khách hàng chỉ cần nhâp đầy đủ thông tin và tiếnhành đặt hàng

2.3.3 Trang khuyến mãi

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ủacử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ệ.

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

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ảomậ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ịuthiệt thòi khi có sự cố

2.3.6 Trang đặt hàng.

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ệnthoạ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

Trang tài khoản khách hàng có thể đăng kí nếu chưa có tài khoản chỉ cầnmộ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ớitài khoản vừa đăng kí là xong.

- 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

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ẫngiúp cho website thân thiện với mọi người dùng và mọi thiết bị, các chươngtrình máy tính, trình duyệt web…

4.1.2 Ưu điểm của HTML5.

- Quá trình học đơn giản và miến phí

- Mã nguồn mở và hoàn toà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 WebConsortium

- Dễ dàng tích hợp nhiều ngôn ngữ khác

4.1.3 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 Sheetlanguage 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ữ

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ểnweb 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ỉnhkí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

- 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

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à REXXcủ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 quá trình biênsoạ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

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 hoàn thiện và có thể áp dụng vào sử dụng được Bên cạnh đó, trong quá 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 hoàn thành bài làm này