ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE QUÁN COFFEE. Giảng viên hướng dẫn : T.S.PHẠM NGUYỄN MINH NHỰT

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 Sinh viên thực : VÕ TÁ TRƯỜNG TÂN Lớp : 20IT11 Giảng viên hướng dẫn : T.S.PHẠM NGUYỄN MINH NHỰT Đà nẵng, tháng năm 2021 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Ở THIẾT KẾ GIAO DIỆN WEBSITE QUÁN COFFEE Đà Nẵng, tháng năm 2021 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 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! Nhận xét GVHD …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… …………………………………………………………………… Đà Nẵng, tháng , năm 2020 CHỮ KÍ GVHD TS PHẠM NGUYỄN MINH NHỰT MỤC LỤC Trang MỞ ĐẦU Nhận xét GVHD Chương TỔNG QUAN 1.1 Tên đề tài 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 Chương CƠ SỞ LÝ THUYẾT .10 2.1 Website gì? 10 2.1.1 Vậy cịn trang web gì? 10 2.1.2 Cấu tạo hoạt động website .10 2.1.3 Giao diện website gồm thành phần nào? 10 2.1.4 Các loại website 11 2.2 Tổng quan HTML .12 2.2.1 Ưu điểm 13 2.2.2 Khuyết điểm 13 2.3 Tổng quan CSS 13 2.3.1 Tại lại sử dụng CSS 14 2.4 Tổng quan ngôn ngữ lập trình Javascript .14 2.4.1 Ưu điểm 15 2.4.2 Nhược điểm .15 2.5 Giới thiệu thư viện Bootstrap 15 2.5.1 Bootstrap.css .16 2.5.2 Bootstrap.js .16 2.5.3 Glyphicons 16 2.6 Giới thiệu thư viện hình ảnh Font Awesome .17 Chương TRIỂN KHAI XÂY DỰNG 18 3.1 Giao diện trang web 18 3.1.1 Giao diện trang chủ 18 3.1.1.1 Phần top 18 3.1.1.2 Phần navigation .18 3.1.1.3 Phần body 18 3.1.1.4 Phần footer 20 3.1.2 Giao diện sản phẩm 20 3.1.3 Giao diện mua hàng 21 3.1.4 Giao diện tin tức .22 3.1.5 Giao diện liên hệ 23 3.1.6 Giao diện đăng nhập/ đăng ký 23 Chương Kết luận Hướng phát triển .26 4.1 Kết đạt 26 4.2 Hướng phát triển 26 Chương DANH MỤC TÀI LIỆU THAM KHẢO 28 5.1 Tutorialpoint MySQL – Introduction, 26/5/2021, từ < https://www.tutorialspoint.com/mysql/mysql-introduction.htm> 28 5.2 Visual Studio Code Getting Started, 26/5/2021, từ 28 5.3 MDN Web Docs JavaScript, 26/5/2021, từ .28 5.4 MDN Web Docs CSS: Casscading Style Sheets, 26/5/2021, từ 28 DANH MỤC HÌNH Trang Hình 3-1 Top .18 Hình 3-2 Navigation 18 Hình 3-3 Banner .19 Hình 3-4 Body 19 Hình 3-5 Body 20 Hình 3-6 Footer 20 Hình 3-7 Sản phẩm 20 Hình 3-8 Sản phẩm 21 Hình 3-9 Mua hàng 21 Hình 3-10 Tin tức .22 Hình 3-11 Tin tức .22 Hình 3-12 Liên hệ 23 Hình 3-13 Liên hệ 23 Hình 3-14 Đăng nhập .24 Hình 3-15 Đăng ký 25 Chương TỔNG QUAN 1.1 Tên đề tài - Thiết kế giao diện Website quán coffee 1.2 Sinh viên thực - Võ Tá Trường Tân - MSV: 20IT528 1.3 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.4 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.5 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 10 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 q 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 sốt dễ dàng lỗi khơng đáng có 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) 14 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 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 15 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 - 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 16 - 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ợ 17 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 18 Hình 3-3 Banner Hình 3-4 Body 19 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 20 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 21 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 22 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ệ 3.1.6 Giao diện đăng nhập/ đăng ký Khi bấm vào nút đăng nhập lên bảng đăng nhập nhỏ hình thay phải chuyển người dùng sang trang khác để đăng nhập, 23 người dùng đăng nhập phải nhập đầy đủ thơng tin không nhập đầy đủ mà bấm đăng nhập thông báo đỏ yêu cầu người dùng nhập lại Hình 3-14 Đăng nhập Khi bấm vào nút đăng ký lên bảng cho người dùng nhập thông tin mà không chuyển người dùng sang trang khác, người dùng muốn đăng ký phải nhập đầy đủ thông tin yêu cầu điền không đầy đủ thông báo đỏ yếu cầu người dùng nhập lại 24 Hình 3-15 Đăng ký 25 Chương Kết luận Hướng phát triển 4.1 Kết đạt Trang web có xây dựng chức sau: - Đăng nhập/ Đăng ký - Đăng - Chỉnh sửa 4.2 Hướng phát triển - Vì trang web với việc vận dụng kiến thức học nên cịn nhiều bất cập xảy ra, đóng góp ý kiến giúp nhóm chúng em dễ dàng việc khắc phục phát triển - Tìm hiểu, tiếp tục phát triển thêm chức như: + Tìm kiếm người/ viết + Trò chuyện trực tiếp người mua người bán + Tìm kiếm sản phẩm 26 27 Chương DANH MỤC TÀI LIỆU THAM KHẢO 5.1 Tutorialpoint MySQL – Introduction, 26/5/2021, từ < https://www.tutorialspoint.com/mysql/mysql-introduction.htm> 5.2 Visual Studio Code Getting Started, 26/5/2021, từ 5.3 MDN Web Docs JavaScript, 26/5/2021, từ 5.4 MDN Web Docs CSS: Casscading Style Sheets, 26/5/2021, từ 28