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Ở ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE NHÀ HÀNG PIZZA Sinh viên thực : 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Ở ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE NHÀ HÀNG PIZAA Đà Nẵng, ngày 01 tháng năm 2020 MỞ ĐẦU Cuộc sống ngày phát triển, người ngày đại nhu cầu ăn Cùng với thói quen ẩm thực khác trước Chính điều tạo hội cho kinh doanh pizza trở nên phổ biến hết Với tính chất cơng việc nhu cầu ăn ngày đa số khách hàng thích nhà có người ship đồ ăn tới phải tới quán website giúp bạn giải thắc mắc đơn hàng từ phía khách cách tự động mà không cần nhiều thời gian để tiếp nhận điện thoại Chỉ với cú click nhanh chóng đơn giản website, khách hàng tự tìm hiểu tất loại pizza mà nhà hàng bạn cung cấp để mua Đồng thời website nơi cập nhật thông tin khuyến hấp dẫn cho khách hàng trung thành để theo dõi Thế giới dần thay đổi với tốc độ chóng mặt người dùng internet ngày nhiều cửa hàng nhận diện thương hiệu chưa đủ để thu hút khách hàng, website đẹp hỗ trợ bạn xây dựng hình ảnh chuyên nghiệp từ màu sắc nhận diện thương tạo nên giá trị cao cho mặt hàng đơn vị bạn kinh doanh Song song đó, thiết kế website nhà hàng pizza với bánh hấp dẫn, tính chân thực đến chi tiết có đậm dấu ấn thương hiệu khiến khách hàng khó lịng qn LỜI CẢM ƠN Để thực hoàn thành tốt đồ án này, em nhận giúp đỡ hướng dẫn tận tình thầy thuộc Khoa Cơng nghệ Thông tin Và Truyền thông – Đại học Đà Nẵng Em xin cảm ơn thầy cô thuộc môn chuyên ngành cung cấp cho chúng em thông tin, kiến thức vô quý báu cần thiết suốt thời gian để em thực hồn thành đồ án Đặ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 thời gian thực đồ án Cuối cùng, xin chân thành cảm ơn bạn ngành công nghệ thông tin ủng hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm tài liệu có giúp chúng tơi q trình nghiên cứu thực đề tài Do giới hạn mặt thời gian kiến thức kinh nghiệm thực tiễn nên đề tài khơng tránh khỏi sai xót Em mong nhận thông cảm quý thầy cô mong đón nhận góp ý thầy 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 ……………………………………………… NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN …………… CHƯƠNG 1: GIỚI THIỆU…………………………………… 1.1 Giới thiệu đề tài………………………………… 1.2 Phương pháp thực hiện…………………………… 1.3 Cấu trúc đồ án ………………………………………7 CHƯƠNG 2: GIỚI THIỆU WEBSITE NHÀ HÀNG PIZZA… 2.1 Tên Website ……………………………………… 2.2 Cấu trúc Website ……………………………………8 2.3 Chi tiết……………………………………………….8 2.3.1 Trang chủ ………………………………… 2.3.2 Trang thực đơn……………………………… 2.3.3 Trang khuyến ……………………………9 2.3.4 Trang liên hệ ……………………………… 10 2.3.5 Trang 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 ? 15 4.1.2 Ưu điểm HTML5…………………………15 4.1.3 Nhược điểm HTML5…………………… 15 4,2 CSS………………………………………………… 15 4.2.1 CSS ? .15 4.2.2 Ưu điểm CSS …………………………….16 4.3 Boostrap…………………………………………… 16 4.3.1 Boostrap gì? 16 4.3.2 Ưu điểm Boostrap……………………… 16 4.4 Jquery……………………………………………… 16 4.4.1 Jquery gì? .16 4.4.2 Ưu điểm Jquery………………………… 16 4.5 Javascrip…………………………………………….17 4.5.1 Javascrip gì? .17 4.5.2 Ưu điểm Javascrip……………………….17 CHƯƠNG : KẾT LUẬN…………………………………… 18 MỤC LỤC HÌNH ẢNH CHƯƠNG 1: GIỚI THIỆU 1.1 Giới thiệu đề tài: Sau tìm hiểu nghiên cứu thơng tin, xác định khách hàng mục tiêu, website “NHÀ HÀNG PIZZA” xây dựng Website chủ yếu giới thiệu ăn uống cho khách hàng thoải mái lựa chọn cho ăn để thưởng thức bữa ăn Website tạo việc đem lại thư giãn cho người đem lại thêm kiến thức hiểu biết lịch sử văn hóa đất nước Ý Cuộc sống đại hóa với mức sống người ngày cao, khiến cho việc du nhập ăn thói quen thưởng thức ẩm thực người VIệt trở nên cao hết Đây hội cho pizza – ăn đặc trưng ẩm thực Ý có hội “tỏa sáng” Vì cần website thương mại điện tử để tiếp cận đến khách hàng tiềm giới thiệu pizza thơm ngon cách thực 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 website nhà hàng pizza có - Thống kê cần làm giao diện website - Thiết kế CSDL - Thiết kế giao diện website nhà hàng pizza việc sử dụng ngôn ngữ HTML thư viện Boostrap, JavaScript, sử dụng số cơng cụ để lập trình Sublime Text, … - Sửa 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 người sử dụng đóng góp ý kiến thầy hướng dẫn nên em định thiết kế “Website nhà hàng Pizza” Giúp người dùng dễ dàng tìm kiếm gợi nhớ 2.2 Cấu trúc website: Website gồm có phần : - Trang chủ - Trang thực đơn - Trang khuyến - Trang liên hệ - Trang 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ủ Ở Trang chủ website Trang chủ liên kết với tất trang lại Bao thực đơn, khuyến mãi, lien hệ, sách, đặt hàng, tài khoản Trang chủ giúp người dùng xem tổng quan trang web, người dùng muốn xem chi tiết phần chuyển tab dễ dàng 2.3.2 Trang thực đơn Hình 2: Trang thực đơn Trang sẻ giới thiệu tất ăn mà nhà hàng có pizza, nước, salad, số combo mà khách tham khảo số khác, Trên hình ảnh mõi có tên sản phẩm, giá sản phẩm, nút mua hàng Khi muốn mua hàng khách hàng nhấn vào chữ “ MUA HÀNG” trang web tiến hành chuyển đến trang mua hàng khách hàng cần nhâp đầy đủ thông tin tiến hành đặt hàng 2.3.3 Trang khuyến Hình 3: Trang khuyến Trang khuyến giúp khách hàng biết có khuyến cửa hàng khách hàng khơng thể bỏ lỡ khuyến 2.3.4 Trang liên hệ 10 Hình 4: Trang liên hệ Tại khách hàng 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 phản ánh chất lượng dịch vụ Người dùng liên hệ qua địa email tới địa nhà hàng Bên phỉa đồ giúp khách hàng định vị rõ địa nhà hàng, xác định khoảng cách nhà hàng 2.3.5 Trang sách 11 Hình 5: Trang sách Trang cung cấp sách mà khách hàng tìm hiểu giao hàng miễn phí, thời gian làm việc cửa hàng, sách giao hàng bảo mật thơng tin khách hàng Khách hàng tìm hiểu để khơng phải chịu thiệt thịi có cố 2.3.6 Trang đặt hàng 12 Hình 6: Trang đặt hàng Ở trang khách hàng điền thông tin họ tên, email, số điện thoại, địa sản phẩm 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 đăng kí chưa có tài khoản cần số thơng tin đơn giản khác hàng có tài khoản sau cần đăng nhập với tài khoản vừa đăng kí xong 14 CHƯƠNG3: ĐẶT VẤN ĐỀ- MỤC ĐÍCH THIẾT KẾ - Giúp khách hàng dễ dàng tìm kiếm ăn đáp ứng đủ nhu cầu Cung cấp đủ thông tin quan trọng nhà hàng để khách hàng nắm bắt rõ thơng tin nhà hàng Quảng bá thương hiệu nhà hàng pizza để nhiều người biết đến nhà hàng Thuận tiện nhanh chóng việc tìm kiếm xem chi tiết sản phẩm Giao diện đẹp, bắt mắt, hấp dẫn, màu sắc bật Dễ quản trị, chỉnh sửa update sản phẩm 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 gì? HTML5 ngơn ngữ lập trình phát triển tảng ngôn ngữ HTML quan trọng World Wide Web (WWW) Nó sử dụng để thiết kế cấu trúc website, hỗ trợ cho đa phương tiện tối đa giúp cho website thân thiện với người dùng thiết bị, chương trình máy tính, trình duyệt web… 4.1.2 4.1.3 - Ưu điểm HTML5 Quá trình học đơn giản miến phí Mã nguồn mở hồn tồn miễn phí Có cách đánh dấu gọn gang đồng Chuẩn web vận hành World Wide Web Consortium Dễ dàng tích hợp nhiều ngôn ngữ khác Nhược điểm HTML5 Được dung chủ yếu cho website tĩnh Chỉ thực thi số lệnh logic định cho người dung Một số trình duyệt chậm khơng hổ trợ tính 4.2 CSS 4.2.1 CSS gì? CSS ngơn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dùng để tạo phong cách định kiểu cho yếu tố viết dạng ngôn ngữ đánh dấu, HTML Nó điều khiển định dạng nhiều trang web 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ị trang web với nội dung trang cách điều khiển bố cục, màu sắc, font chữ 16 4.2.2 Ưu điểm CSS - Khả điều chỉnh trang gần vô hạn - không cần lặp lại mô tả cho phần - giúp HTML markup rõ ràng dễ quản lý nhiều 4.3 Boostrap 4.3.1 Boostrap ? Bootstrap thư viện html, css js Bootstrap sử dụng html, css js tạo mẫu như: form, button, table, navigation… giúp nhà phát triển web dễ dàng tạo giao diện web tương thích với hình điện thoại 4.3.2 Ưu điểm bootstrap - Bootstrap dễ dàng sử dụng, cần bạn có kiến thức html, css - Ưu điểm bật bootstrap khả tự động điểu chỉnh kích thước trang web phù hợp với loại hình: điện thoại, tablets, laptop hay máy tính để bàn - Bootstrap tương thích với tất trình duyệt đại như: chrome, firefox, internet explorer, cốc cốc, safari opera 4.4 Jquery 4.4.1 Jquery gì? Là thư viện mã nguồn mở viết ngơn ngữ javascript, giúp đơn giản cách viết javascript tăng tốc độ xử lý xự kiện trang web 4.4.2 Ưu điểm Jquery - Dễ sử dụng - Là thư viện lớn 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 hướng dẫn chi tiết - Hỗ trợ ajax 17 4.5 Javascrip 4.5.1 Javascript gì? JavaScript ngơn ngữ kịch từ Netscape Nó tương tự khả Visual Basic Microsoft , Sun’s Tcl , Perl UNIX REXX IBM Nói chung, ngơn ngữ kịch dễ dàng nhanh để mã ngơn ngữ có cấu trúc biên soạn C C+ +.Ngơn ngữ kịch nói chung nhiều thời gian q trình biên soạn ngơn ngữ, hữu ích cho chương trình ngắn 4.5.2 Ưu điểm Javascript - Javascript thực phía khách hàng - Javascript ngơn ngữ tương đối dễ dàng Ngôn ngữ - Javascript tương đối nhanh người dùng cuối - Các tính bổ sung cho trang web Các trình CHƯƠNG 5: KẾT LUẬN 18 Trên học tập ngôn ngữ web ứng dụng lập trình Dưới hướng dẫn thầy Nguyễn Văn Bình, em thiết kế trang web Pizza Tuy kết đạt chưa cao,website nhiều điểm hạn chế chưa khắc phục được, bước khởi đầu để em hướng tới trang web hồn thiện áp dụng vào sử dụng Bên cạnh đó, q trình xây dựng website, em học hỏi nhiều, kĩ thuật bootstrap, javascritp,css để thiết kế trang web có chất lượng cao sau Chúng em sinh viên bước đầu học lập trình, nên trang web tránh khỏi lỗi , điểm chưa hợp lí, em khơng ngừng học hỏi, học tập để có kiến thức am hiểu 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 thầy cô đặc biệt thầy Nguyễn Văn Bình Giáo viên hướng dẫn em hoàn thành làm 19