Đồ Án Cơ Sở 1 Đề Tài Thiết Kế Giao Diện Website Quán Coffee.doc

MẪU ĐỒ ÁN KHOÁ LUẬN TỐT NGHIỆP TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI THIẾT KẾ GIAO DIỆN WEBSITE QUÁN COFFEE MỞ ĐẦU Ngày nay với thời[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH ĐỒ ÁN CƠ SỞ ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE QUÁN COFFEE MỞ ĐẦU Ngày với thời đại 4.0 cơng nghệ ngày phát triển nhanh chóng, người trẻ bắt việc bắt kịp xu hướng khơng có vấn đề q khó khăn, chí cịn tiếp nhận cách nhanh chóng Với tình hình cơng nghệ phát triển vậy, website shop quần áo, quán ăn, đồ uống xuất nhiều mạng xã hội Để bắt kịp với cơng nghệ đó, nhóm em thực tạo trang web cho qn coffee theo góc nhìn chúng em Với hướng dẫn tận tình thầy Phạm Nguyễn Minh Nhựt người có đóng góp ý kiến để em hồn thành đồ án Mặc dù tìm hiểu kĩ phân tích thiết kế khó tránh khỏi thiếu sót khơng mong muốn.Em kính mong nhận thơng cảm góp ý q thầy Em xin kính chúc q thầy cô dồi sức khỏe, tiếp tục đào tạo hệ trẻ, nguồn nhân lực chất lượng tốt cho đất nước Em xin chân thành cảm ơn! MỤC LỤC Trang MỞ ĐẦU Nhận xét GVHD Chương Tổng quan 1.1 Tên dự án .8 1.2 Sinh viên thực 1.3 Nội dung nghiên cứu 1.4 Phương pháp, kết 1.5 Bố cục .8 Chương Cơ sở lý thuyết 2.1 Website gì? 2.1.1 Vậy trang web gì? 2.1.2 Cấu tạo hoạt động website 2.1.3 Giao diện website gồm thành phần nào? .9 2.1.4 Các loại website .10 2.2 Tổng quan HTML 11 2.2.1 Ưu điểm 11 2.2.2 Khuyết điểm 11 2.3 Tổng quan CSS 12 2.3.1 2.4 Tại lại sử dụng CSS 12 Tổng quan ngơn ngữ lập trình Javascript 13 2.4.1 Ưu điểm 13 2.4.2 Nhược điểm 13 2.5 Giới thiệu thư viện Bootstrap 13 2.5.1 Bootstrap.css 14 2.5.2 Bootstrap.js 14 2.5.3 Glyphicons .14 2.6 Giới thiệu thư viện hình ảnh Font Awesome 14 Chương Triển khai xây dựng 16 3.1 Giao diện trang web .16 3.1.1 Giao diện trang chủ 16 3.1.1.1 Phần header 16 3.1.1.2 Phần navigation .16 3.1.1.3 Phần body 16 3.1.1.4 Phần footer 17 3.1.2 Giao diện giới thiệu 17 3.1.3 Giao diện cửa hàng 18 3.1.4 Giao diện tin tức .19 3.1.5 Giao diện liên hệ .20 3.1.6 Giao diện đăng nhập/ đăng ký 21 Chương Kết luận Hướng phát triển 23 4.1 Kết đạt 23 4.2 Hướng phát triển 23 Chương DANH MỤC TÀI LIỆU THAM KHẢO .24 5.1 Tutorialpoint MySQL – Introduction, 26/5/2021, từ < https://www.tutorialspoint.com/mysql/mysql-introduction.htm> .24 5.2 Visual Studio Code Getting Started, 26/5/2021, từ 24 5.3 MDN Web Docs JavaScript, 26/5/2021, từ 24 5.4 MDN Web Docs CSS: Casscading Style Sheets, 26/5/2021, từ 24 DANH MỤC HÌNH Trang Hình 3-1 Header 13 Hình 3-2 Navigation 13 Hình 3-3 Body 13 Hình 3-4 Body 14 Hình 3-5 Body 14 Hình 3-6 Footer 14 Hình 3-7 Giới thiệu 15 Hình 3-8 Giới thiệu 15 Hình 3-9 Cửa hàng .16 Hình 3-10 Tin tức .16 Hình 3-11 Tin tức .17 Hình 3-12 Liên hệ .17 Hình 3-13 Liên hệ .18 Hình 3-14 Đăng nhập 18 Hình 3-15 Đăng ký 19 Chương TỔNG QUAN 1.1 Tên đề tài - Thiết kế giao diện Website quán coffee 1.2 Nội dung nghiên cứu Nhóm em tìm hiểu cơng nghệ dùng để xây dựng nên trang web cộng với kiến thức học tìm hiểu thị trường web bán mặt hàng nước uống coffee nên nhóm em chọn thị trường làm nên trang web trecoffee 1.3 Phương pháp, kết - Để thực đề tài nhóm chúng em tìm hiểu trang lớn mạng xã hội Facebook, Instagram, - Sau phân tích thơng tin nhu cầu người tiêu dùng nhóm chúng em lên nội dung kế hoạch thực cho dự án 1.4 Bố cục Báo cáo Đồ án gồm chương sau:  Chương 1: Tổng quan  Chương 2: Cơ sở lý thuyết  Chương 3: Triển khai xây dựng  Chương 4: Kết luận Hướng phát triển Chương CƠ SỞ LÝ THUYẾT 2.1 Website gì? Website tập hợp trang thơng tin có chứa nội dung dạng văn bản, chữ số, âm thanh, hình ảnh, video, v.v… lưu trữ máy chủ (web server) truy cập từ xa thơng qua mạng ỉnternet 2.1.1 Vậy cịn trang web gì? Đó trang cụ thể website thường gọi “web page” ngắn gọn “pages” Là tài liệu thị trực tiếp trình duyệt web 2.1.2 Cấu tạo hoạt động website Một website gồm nhiều webpage (trang con), tập tin dạng html xhtml, lưu trữ máy tính có chức máy chủ (web server) thơng tin trang web có nhiều dạng như: văn bản, âm thanh, hình ảnh, video,… Các máy tính nơi khác (gọi máy trạm) sử dụng ứng dụng gọi trình duyệt web, thơng qua đường truyền dẫn internet để lấy tập tin nêu từ máy chủ hiển thị lên cho người dùng đọc Để website hoạt động môi trường internet, cần có thành phần chính:  Source Code (mã nguồn): phần mềm website lập trình viên thiết kế xây dựng  Web hosting (Lưu trữ web): dùng để lưu trữ mã nguồn  Tên miền (domain): địa website để máy tính nơi trỏ tới muốn truy cập vào website 2.1.3 Giao diện website gồm thành phần nào? Trong trình hợp tác xây dựng website, nhiều bên không hiểu hiểu không thống cách gọi tên thành phần để truyền đạt ý kiến Vì bố cục phổ biến bao gồm Header, Slide/Carousel, Content Area, Footer với trang cụ thể có thay đổi phù hợp với nhu cầu hiển thị nội dung chức 2.1.3.1 Header - Là phần đầu trang thường hiển thị tất trang - Phần thường có logo, hotline, lựa chọn ngơn ngữ, đăng ký/đăng nhập, menu điều hướng, tìm kiếm, giỏ hàng, 2.1.3.2 Slider/Carousel - Dưới header thường thiết kế hình ảnh thu hút giới thiệu chủ đề website sản phẩm, dịch vụ, kèm theo câu hiệu (slogan) doanh nghiệp - Các ảnh lập trình để trượt ngang (dạng slide), hiển thị theo trục với hiệu ứng kèm (dạng carousel) Khu vực có dẫn hướng để người dùng chủ động xem ảnh trước 2.1.3.3 Content/Area Là khu vực có vai trị quan trọng trang web, nơi cung cấp nội dung cho đọc giả nội dung nhiều dạng khác như: văn bản, âm thanh, hình ảnh, video, links,… 2.1.3.4 Footer Là phần chân trang nằm trang web, thường dùng để bố trí thông tin quyền, liên kết nhanh, fanpage, social, network,… 2.1.4 Các loại website Có nhiều tiêu chí website nên cách phân loại khác có phổ biến sử dụng nay: 2.1.4.1 Theo cấu trúc cách hoạt động  Website tĩnh: chủ yếu sử dụng ngôn ngữ html (và css, javascript), nội dung khi chỉnh sửa (sau đăng), thường khơng có tương tác với người dùng Do hạn chế, dần sử dụng  Website động: ngồi html, css javascript, cịn dùng thêm ngơn ngữ lập trình server ASP.NET hay PHP,… sở liệu SQL Server, MySQL,… web có nội dung thường xuyên dễ dàng thay đổi, dựa tướng tác với người dùng Đa số web động 2.1.4.2 Theo mục đích website  Website giới thiệu công ty: chứa đầy đủ thông tin cần thiết cơng ty, bao gồm lịch sử hình thành phát triển, thành tựu, sản phẩm dịch vụ, thông tin liên lạc,…  Website giới thiệu cá nhân: thường tập trung giới thiệu thành tựu người đó, với vai trị CV đẹp có sẵn, với mục đích để xây dựng thương hiệu cá nhân  Website bán hàng: cung cấp thông tin chi tiết hàng hoá, để giới thiệu chào hàng  Website có chức đặc biệt, phức tạp: chợ điện tử, mạng xã hội, diễn đàn, wiki, web-app,… 2.1.4.3 Theo lĩnh vực cụ thể Cách phân loại chủ yếu để phục vụ cho doanh nghiệp muốn đặt thiết kế website người dùng hay tìm kiếm loại website theo ngành nghề này:  Website tin tức  Web du lịch, bán vé máy bay  Website nội thất, xây dựng  Website bất động sản  Web nhà hàng, khách sạn  Website giáo dục, đào tạo, học tiếng Anh  Website logictics,… 2.2 Tổng quan HTML HTML chữ viết tắt Hypertext Markup Language Nó giúp người dùng tạo cấu trúc thành phần trang web ứng dụng, phân chia đoạn văn, heading, links, blockquotes, HTML ngơn ngữ lập trình, đồng nghĩa với việc khơng thể tạo chức “động” Nó giống Microsoft Word, dùng để bố cục định dạng trang web Khi làm việc với HTML, sử dụng cấu trúc code đơn giản (tags attributes) để đánh dấu lên trang web HTML sáng tạo Tim Berners-Lee, nhà vật lý học trung tâm nghiên cứu CERN Thụy Sĩ Anh ta nghĩ ý tưởng cho hệ thống hypertext Internet Hypertext có nghĩa văn chứa links, nơi người xem truy cập Anh xuất phiên HTML năm 1991 bao gồm 18 tag HTML Từ đó, phiên HTML có thêm tag attributes Nhanh chóng phổ biến mức độ chóng mặt, HTML xem chuẩn mật website Các thiết lập cấu trúc HTML vận hành phát triển World Wide Web Consortium (W3C) Bạn kiểm tra tình trạng ngôn ngữ lúc trang W3C’s website 2.2.1 Ưu điểm  Ngôn ngữ sử dụng rộng lớn có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng cực lớn  Sử dụng mượt mà hầu hết trình duyệt  Có q trình học đơn giản trực tiếp  Mã nguồn mở hoàn toàn miễn phí  Markup gọn gàng đồng  Chuẩn web vận hành World Wide Web Consortium (W3C)  Dễ dàng tích hợp với ngôn ngữ backend PHP Node.js 2.2.2 Khuyết điểm  Được dùng chủ yếu cho web tĩnh Đối với tính động, bạn cần sử dụng JavaScript ngơn ngữ backend bên thứ PHP  Nó thực thi số logic định cho người dùng Vì vậy, hầu hết trang cần tạo riêng biệt, kể sử dụng yếu tố, headers hay footers  Một số trình duyệt chậm hỗ trợ tính  Khó kiểm sốt cảnh thực thi trình duyệt (ví dụ, trình duyệt cũ khơng render tag mới) 2.3 Tổng quan CSS 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ữ CSS phát triển W3C (World Wide Web Consortium) vào năm 1996, HTML khơng thiết kế để gắn tag để giúp định dạng trang web Phương thức hoạt động CSS tìm dựa vào vùng chọn, vùng chọn tên thẻ HTML, tên ID, class hay nhiều kiểu khác Sau áp dụng thuộc tính cần thay đổi lên vùng chọn Mối tương quan HTML CSS mật thiết HTML ngôn ngữ markup (nền tảng site) CSS định hình phong cách (tất tạo nên giao diện website), chúng tách rời CSS lý thuyết khơng có được, website khơng trang chứa văn mà khơng có khác 2.3.1 Tại lại sử dụng CSS Sử dụng CSS có nhiều lợi ích phần lớn tập trung vào lợi ích chính:  Giải vấn đề lớn: Trước có CSS, thẻ phơng chữ, màu sắc, kiểu nền, xếp phần tử, đường viền kích thước phải lặp lại trang web Đây trình dài tốn thời gian công sức CSS tạo để giải vấn đề  Tiết kiệm nhiều thời gian: Định nghĩa kiểu CSS lưu tệp CSS bên ngồi thay đổi tồn trang web cách thay đổi tệp Sử dụng CSS giúp bạn không cần thực lặp lại mô tả cho thành phần Từ lập trình viên web tiết kiệm tối đa thời gian làm việc với nó, làm cho code ngắn lại giúp kiểm soát dễ dàng lỗi khơng đáng có 10 CSS tạo nhiều style khác nên áp dụng với nhiều trang web, từ giảm tránh việc lặp lại định dạng trang web giống  Cung cấp thêm thuộc tính: CSS cung cấp thuộc tính chi tiết HTML để định nghĩa giao diện trang web CSS giúp người dùng nhiều styles trang web HTML nên khả điều chỉnh trang web trở nên vô hạn 2.4 Tổng quan ngôn ngữ lập trình Javascript JavaScript ngơn ngữ lập trình mang đến sinh động website Nó khác với HTML (thường chuyên cho nội dung) CSS (thường chuyên dùng cho phong cách), khác hẵn với PHP (chạy server không chạy máy client) JavaScript ngôn ngữ lập trình phổ biến giới suốt 20 năm qua Nó số ngơn ngữ lập trình web: - HTML: Giúp bạn thêm nội dung cho trang web - CSS: Định dạng thiết kế, bố cục, phong cách, canh lề trang web - JavaScript: Cải thiện cách hoạt động trang web 2.4.1 Ưu điểm - Dễ học ngơn ngữ lập trình khác - Lỗi dễ phát dễ sửa - Javascript hoạt động nhiều tảng, trình duyệt,… - Giúp website tương tác tốt với khách truy cập - Nhanh nhẹ ngơn ngữ lập trình khác - Có thể dùng Javascript để kiểm tra input giảm thiểu việc kiểm tra thủ công truy xuất qua database - Có thể dùng để gắn lên kiện cho chuột hay phần tử html trang web 2.4.2 Nhược điểm Mọi ngơn ngữ lập trình có khuyết điểm Một phần ngơn ngữ phát triển đến mức độ Javascript, thu hút lượng lớn 11 hacker, scammer người ác tâm ln tìm kiếm lỗ hổng lỗi bảo mật để lợi dụng Một số nhược điểm nhắc đến là: - Dễ bị khai thác - Có thể dùng để thực thi mã độc máy tính người dùng - Nhiều khơng hỗ trợ trình duyệt - Có thể bị triển khai khác tùy thiết bị dẫn đến việc không đồng 2.5 Giới thiệu thư viện Bootstrap Bootstrap sưu tập miễn phí mã nguồn mở chứa tất mẫu thiết kế dựa HTML CSS với nhiều chức thành phần khác nhau, điều hướng, hệ thống lưới, băng chuyền hình ảnh nút Mặc dù Bootstrap giúp tiết kiệm thời gian nhà phát triển khỏi việc phải quản lý template nhiều lần, mục tiêu tạo responsive website Nó cho phép giao diện người dùng trang web hoạt động tối ưu kích thước hình, điện thoại hình nhỏ máy tính để bàn hình lớn Do nhà phát triển khơng cần xây dựng trang web dành riêng cho thiết bị bị giới hạn phạm vi đối tượng Với thuộc tính giao diện quy định sẵn kích thước, màu sắc, độ cao, độ rộng,… bootstrap có file chính: - Bootstrap.css - Bootstrap.js - Glyphicons 2.5.1 Bootstrap.css - Nó Framework CSS có chức quản lý xếp bố cục trang Web HTML có nhiệm vụ quản lý cấu trúc nội dung CSS xử lý bố cục Website Vì mà hai cấu trúc phải tồn để thực hành động cụ thể - Giúp tiết kiệm thời gian code khơng phải chỉnh thủ cơng chút tạo giao diện thống nhiều Website mà không bị giới hạn 12 - Hàm CSS không giới hạn kiểu văn mà dùng định dạng bảng, bố cục hình cần thời gian để CSS ghi nhớ hết tất khai báo chọn 2.5.2 Bootstrap.js - Đây phần cốt lõi chứa File JavaScript, chịu trách nhiệm cho việc tương tác Website Để tiết kiệm thời gian viết cú pháp JavaScript mà nhiều nhà phát triển sử dụng jQuery Đây thư viện JavaScript mã nguồn mở, đa tảng giúp thêm nhiều chức vào trang Web - jQuery thực số chức như: - Thực yêu cầu Ajax như: loại trừ liệu đến từ vị trí khác cách linh hoạt - Giúp tạo tiện ích sưu tập Plugin JavaScript - jQuery tạo hình động tùy chỉnh thuộc tính CSS 2.5.3 Glyphicons - Trong giao diện trang Web, phần khơng thể thiếu Icons Chúng thường liên kết với liệu định hành động giao diện người dùng - Bootstrap dùng Glyphicons để đáp ứng nhu cầu mở khóa Halflings Glyphicons để người dùng sử dụng miễn phí Tại miễn phí, có giao diện chuẩn phù hợp với chức thiết yếu 2.6 Giới thiệu thư viện hình ảnh Font Awesome - Font Awesome là thư viện chứa font chữ ký hiệu hay sử dụng website Font chữ ký hiệu icons mà ta thường hay sử dụng layout website - Font Awesome xây dựng thành nhiều định dạng file font khác file otf, eot, ttf, woff, svg, - Font Awesome hoạt động hầu hết trình duyệt đại hay Tuy nhiên với phiên cũ IE7 khơng hỗ trợ 13 Chương TRIỂN KHAI XÂY DỰNG 3.1 Giao diện trang web 3.1.1 Giao diện trang chủ 3.1.1.1 Phần top Phần top phần để liên hệ thẳng đến người code Hình 3-1 Top 3.1.1.2 Phần navigation Phần navigation bao gồm mục điều hướng tới trang: logo, trang chủ, sản phẩm, giao hàng, tin tức, chúng tơi Hình 3-2 Navigation 3.1.1.3 Phần body Phần body bao gồm: Banner: có chứa câu slogan slider/carousel giới thiệu sản phẩm bật trang web nút mua đặt chỗ Footer: phần footer có hiển thị logo trang web địa hotline để liên hệ, đường dẫn liên kết nhanh đến trang, ô nhập email đăng kí nhận thơng báo đường dẫn liên kết đến page web mạng xã hội khác 14 Hình 3-3 Banner Hình 3-4 Body 15 Hình 3-5 Body 3.1.1.4 Phần footer Hình 3-6 Footer 3.1.2 Giao diện sản phẩm Ở trang sảm phẩm loại sản phẩm thức uống chủ yếu quán miêu tả hình ảnh Hình 3-7 Sản phẩm 16 Hình 3-8 Sản phẩm 3.1.3 Giao diện mua hàng Khi truy cập vào mua hàng lên mục điền thông tin sản phẩm thông tin liên hệ khách hàng gửi cho nhân viên chốt đơn Hình 3-9 Mua hàng 17 3.1.4 Giao diện tin tức Khi truy cập vào trang tin tức người dùng thấy đa số viết nút truy cập nhanh vào viết chủ đề bàn luận nút truy cập nhanh vào với loại sản phẩm phía bên phải Hình 3-10 Tin tức Hình 3-11 Tin tức 18 3.1.5 Giao diện liên hệ Ở trang liên hệ người dùng thấy rõ thông tin địa liên lạc shop có đồ địa nhóm quản lý phía bên phải Cũng có bảng nhập liệu người dùng ý kiến muốn phản hồi đến trang web Hình 3-12 Liên hệ Hình 3-13 Liên hệ 19