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[.]
Trang 1TRƯỜ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
Trang 2
MỞ ĐẦU
Ngày nay với thời đại 4.0 các công nghệ ngày càng phát triển nhanhchóng, đối với những người trẻ thì bắt việc bắt kịp xu hướng hiện nay thìkhông có vấn đề gì là quá khó khăn, thậm chí còn tiếp nhận nó một cách rất lànhanh chóng Với tình hình công nghệ phát triển như vậy, các website của cácshop quần áo, quán ăn, đồ uống xuất hiện nhiều trên mạng xã hội Để bắt kịpvới công nghệ đó, nhóm em đã thực hiện và tạo ra trang web cho quán coffeecủa mình theo góc nhìn của chúng em
Với sự hướng dẫn tận tình của thầy Phạm Nguyễn Minh Nhựt người
đã có những đóng góp ý kiến để em có thể hoàn thành đồ án này Mặc dù đãtìm hiểu kĩ và phân tích thiết kế nhưng khó tránh khỏi những thiếu sót khôngmong muốn.Em kính mong nhận được sự thông cảm và góp ý của các quýthầy cô
Em xin kính chúc quý thầy cô dồi dào sức khỏe, tiếp tục đào tạo ranhững thế hệ trẻ, nguồn nhân lực chất lượng tốt cho đất nước Em xin chânthành cảm ơn!
Trang 3
MỤC LỤC Trang MỞ ĐẦU Nhận xét của GVHD 5
Chương 1 Tổng quan 8
1.1 Tên dự án 8
1.2 Sinh viên thực hiện 8
1.3 Nội dung nghiên cứu 8
1.4 Phương pháp, kết quả 8
1.5 Bố cục 8
Chương 2 Cơ sở lý thuyết 9
2.1 Website là gì? 9
2.1.1 Vậy còn trang web là gì? 9
2.1.2 Cấu tạo và hoạt động của website 9
2.1.3 Giao diện website gồm những thành phần nào? 9
2.1.4 Các loại website 10
2.2 Tổng quan về HTML 11
2.2.1 Ưu điểm 11
2.2.2 Khuyết điểm 11
2.3 Tổng quan về CSS 12
2.3.1 Tại sao lại sử dụng CSS 12
2.4 Tổng quan về 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 về 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 về thư viện hình ảnh Font Awesome 14
Chương 3 Triển khai xây dựng 16
Trang 43.1 Giao diện các 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 4 Kết luận và Hướng phát triển 23
4.1 Kết quả đạt được 23
4.2 Hướng phát triển 23
Chương 5 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ừ <https://code.visualstudio.com/docs> 24
5.3 MDN Web Docs JavaScript, 26/5/2021, từ <https://developer.mozilla.org/vi/docs/Web/JavaScript> 24
5.4 MDN Web Docs CSS: Casscading Style Sheets, 26/5/2021, từ <https://developer.mozilla.org/vi/docs/Web/CSS> 24
Trang 5DANH 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
Trang 6Chương 1 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ác công nghệ dùng để xây dựng nên một trang webcộng với những kiến thức đã học và tìm hiểu thị trường web bán các mặt hàngnước uống và coffee nên nhóm em đã chọn thị trường này và làm nên trangweb trecoffee
1.3 Phương pháp, kết quả
- Để thực hiện đề tài này nhóm chúng em đã tìm hiểu trên các trang lớnmạng xã hội hiện nay như Facebook, Instagram,
- Sau khi phân tích những thông tin và nhu cầu của người tiêu dùngnhóm chúng em đã lên nội dung và kế hoạch thực hiện cho dự án này
1.4 Bố cục
Báo cáo Đồ án gồm các 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 và Hướng phát triển
Trang 7Chương 2 CƠ SỞ LÝ THUYẾT
2.1 Website là gì?
Website là một tập hợp các 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… được lưu trữ trên máy chủ (web server)
và có thể truy cập từ xa thông qua mạng ỉnternet
2.1.1 Vậy còn trang web là gì?
Đó là một trang cụ thể nào đó của website và thường được gọi là “webpage” hoặc ngắn gọn hơn là “pages” Là một tài liệu được hiện thị trực tiếp trêntrình duyệt web
2.1.2 Cấu tạo và hoạt động của website
Một website gồm nhiều webpage (trang con), đó là các tập tin dạng htmlhoặc xhtml, được lưu trữ tại một máy tính có chức năng là máy chủ (web server)
và thông tin trên trang web đó có nhiều dạng như: văn bản, âm thanh, hình ảnh,video,…
Các máy tính ở các nơi khác nhau (gọi là máy trạm) sử dụng ứng dụng gọi
là trình duyệt web, thông qua đường truyền dẫn internet để lấy tập tin nêu trên
từ máy chủ về hiển thị lên cho người dùng có thể đọc được
Để website hoạt động được trên môi trường internet, cần có các thành phần chính:
Source Code (mã nguồn): phần mềm website do các 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): là địa chỉ của website để các máy tính ở các nơi trỏ
tới khi muốn truy cập vào website
2.1.3 Giao diện website gồm những thành phần nào?
Trong quá trình hợp tác xây dựng website, rất nhiều khi các bên khônghiểu hoặc hiểu không thống nhất cách gọi tên các thành phần để truyền đạt ýkiến của mình Vì vậy một bố cục phổ biến bao gồm Header, Slide/Carousel,Content Area, Footer và với những trang cụ thể có thể sẽ có thay đổi phù hợpvới nhu cầu hiển thị nội dung và chức năng
2.1.3.1 Header
- Là phần đầu của trang và thường được hiển thị trên tất cả các trang con
Trang 8- Phần này thường có logo, hotline, lựa chọn ngôn ngữ, đăng ký/đăngnhập, menu điều hướng, tìm kiếm, giỏ hàng,
2.1.3.2 Slider/Carousel
- Dưới header thường được thiết kế hình ảnh thu hút và giới thiệu về chủ
đề website như sản phẩm, dịch vụ, kèm theo các câu khẩu hiệu (slogan) củadoanh nghiệp
- Các ảnh có thể được lập trình để trượt ngang (dạng slide), hoặc hiển thịtheo một trục nào đó với hiệu ứng đi kèm (dạng carousel) Khu vực này cũng cóthể có thanh dẫn hướng để người dùng chủ động xem ảnh tiếp theo hoặc trướcđó
2.1.3.3 Content/Area
Là khu vực chính và có vai trò quan trọng nhất trong trang web, là nơi cungcấp nội dung cho đọc giả và nội dung có thể bằng rất nhiều dạng khác nhau như:văn bản, âm thanh, hình ảnh, video, links,…
2.1.4.1 Theo cấu trúc và cách hoạt động
Website tĩnh: chủ yếu sử dụng ngôn ngữ html (và css, javascript), nội
dung trên đó ít khi hoặc hiếm khi được chỉnh sửa (sau khi đăng), thường không
có tương tác với người dùng Do những hạn chế, hiện nay đang dần ít được sửdụng
Website động: ngoài html, css và javascript, còn dùng thêm 1 ngôn ngữ
lập trình server như ASP.NET hay PHP,… và một cơ sở dữ liệu như SQL Server,MySQL,… web có nội dung thường xuyên và dễ dàng thay đổi, có thể dựa trêntướng tác với người dùng Đa số hiện nay đều là web động
Trang 92.1.4.2 Theo mục đích chính của website
Website giới thiệu công ty: chứa đầy đủ các thông tin cần thiết về công
ty, bao gồm cả lịch sử hình thành phát triển, thành tựu, sản phẩm dịch vụ, thôngtin liên lạc,…
Website giới thiệu cá nhân: thường tập trung giới thiệu về thành tựu
của người đó, với vai trò như một bản CV đẹp có sẵn, hoặc với mục đích để xâydựng thương hiệu cá nhân
Website bán hàng: cung cấp thông tin chi tiết về hàng hoá, để giới thiệu
và chào hàng
Website có chức năng đặ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 này chủ yếu để phục vụ cho các doanh nghiệp muốn đặtthiết kế website và người dùng cũng rất hay tìm kiếm những loại website theongà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
HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thểtạo ra các chức năng “động” được Nó chỉ giống như Microsoft Word, dùng để
bố cục và định dạng trang web Khi làm việc với HTML, chúng ta sẽ sử dụng cấutrúc code đơn giản (tags và attributes) để đánh dấu lên trang web
Trang 10HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâmnghiên cứu CERN ở Thụy Sĩ Anh ta đã nghĩ ra được ý tưởng cho hệ thốnghypertext trên nền Internet.
Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cậpngay lập tức Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 baogồm 18 tag HTML Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới vàattributes mới
Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩnmật của một website Các thiết lập và cấu trúc HTML được vận hành và pháttriển bởi World Wide Web Consortium (W3C) Bạn có thể kiểm tra tình trạngmới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website
2.2.1 Ưu điểm
Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗtrợ và cộng đồng sử dụng cực lớn
Sử dụng mượt mà trên hầu hết mọi trình duyệt
Có quá trình học đơn giản và trực tiếp
Mã nguồn mở và hoàn toàn miễn phí
Một số trình duyệt chậm hỗ trợ tính năng mới
Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũkhông render được tag mới)
Trang 112.3 Tổng quan về CSSCSS 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ếtdưới dạng ngôn ngữ đánh dấu, như là HTML Nó có thể điều khiển định dạngcủ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ânbiệ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ềukhiển bố cục, màu sắc, và font chữ
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm
1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùngchọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó
là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó
Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữmarkup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nêngiao diện website), chúng là không thể tách rời
CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ làmột trang chứa văn bản mà không có gì khác
2.3.1 Tại sao lại sử dụng CSS
Sử dụng CSS có nhiều lợi ích nhưng phần lớn chỉ tập trung vào 3 lợi íchchính:
Giải quyết một vấn đề lớn:
Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếpphần tử, đường viền và kích thước phải được lặp lại trên mọi trang web Đây làmột quá trình rất dài tốn thời gian và công sức CSS đã được tạo ra để giải quyếtvấn đề này
Tiết kiệm rất nhiều thời gian:
Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thểthay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp Sử dụng CSS sẽ giúpbạn không cần thực hiện lặp lại các mô tả cho từng thành phần Từ đó lập trìnhviên web sẽ tiết kiệm được tối đa thời gian làm việc với nó, làm cho code ngắnlại giúp kiểm soát dễ dàng hơn các lỗi không đáng có
Trang 12CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trangweb, từ đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau.
Cung cấp thêm các thuộc tính:
CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện củatrang web CSS giúp người dùng nhiều styles trên một trang web HTML nên khảnăng điều chỉnh trang web trở nên vô hạn
2.4 Tổng quan về ngôn ngữ lập trình Javascript
JavaScript là ngôn ngữ lập trình mang đến sự sinh động của website Nókhác với HTML (thường chuyên cho nội dung) và CSS (thường chuyên dùng chophong cách), và khác hẵn với PHP (chạy trên server chứ không chạy dưới máyclient)
JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20năm qua Nó cũng là một trong số 3 ngôn ngữ chính của 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ề của trang web
- JavaScript: Cải thiện cách hoạt động của trang web
2.4.1 Ưu điểm
- Dễ học hơn các ngôn ngữ lập trình khác
- Lỗi dễ phát hiện hơn vì vậy dễ sửa hơn
- Javascript hoạt động trên nhiều nền tảng, trình duyệt,…
- Giúp website tương tác tốt với khách truy cập
- Nhanh hơn và nhẹ hơn các 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 khi truy xuất qua database
- Có thể được dùng để gắn lên các sự kiện cho chuột hay các phần tử htmlcủa trang web
2.4.2 Nhược điểm
Trang 13hacker, scammer và những người ác tâm luôn tìm kiếm lỗ hổng và các lỗi bảomật để lợi dụng nó Một số nhược điểm có thể nhắc đến như là:
- Dễ bị khai thác
- Có thể được dùng để thực thi mã độc trên máy tính của người dùng
- Nhiều khi không được hỗ trợ trên mọi trình duyệt
- Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồngnhất
2.5 Giới thiệu về thư viện Bootstrap
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và nó chứa tất
cả các mẫu thiết kế dựa trên HTML và CSS với nhiều chức năng và thành phầnkhác nhau, như điều hướng, hệ thống lưới, băng chuyền hình ảnh và các nút
Mặc dù Bootstrap giúp tiết kiệm thời gian của nhà phát triển khỏi việc
phải quản lý các template nhiều lần, nhưng mục tiêu chính của nó là tạo racác responsive website Nó cho phép giao diện người dùng của trang web cóthể hoạt động tối ưu trên mọi kích thước màn hình, trên điện thoại màn hìnhnhỏ hoặc máy tính để bàn màn hình lớn Do đó các nhà phát triển không cầnxây dựng các trang web dành riêng cho từng thiết bị và bị giới hạn phạm viđối tượng nữa
Với các thuộc tính về giao diện được quy định sẵn như kích thước, màusắc, độ cao, độ rộng,… do đó bootstrap có 3 file chính:
- Bootstrap.css
- Bootstrap.js
- Glyphicons
2.5.1 Bootstrap.css
- Nó là một Framework CSS có chức năng quản lý và sắp xếp bố cục của
các trang Web HTML có nhiệm vụ quản lý cấu trúc và nội dung thì CSS sẽ xử lý
bố cục của Website Vì vậy mà hai cấu trúc này phải tồn tại cùng nhau để thựchiện được hành động cụ thể
- Giúp tiết kiệm thời gian hơn khi code vì không phải căn chỉnh thủ côngtừng chút một và có thể tạo ra một giao diện thống nhất trên nhiều Website màkhông bị giới hạn
Trang 14- Hàm CSS không chỉ giới hạn ở kiểu văn bản mà còn dùng định dạng nhưbảng, bố cục hình và cần mất một ít thời gian để CSS ghi nhớ hết tất cả các khaibáo và bộ chọn.
2.5.2 Bootstrap.js
- Đây là phần cốt lõi vì chứa các File JavaScript, nó chịu trách nhiệm choviệc tương tác của Website Để tiết kiệm thời gian viết cú pháp JavaScript mànhiều nhà phát triển sẽ sử dụng jQuery Đây là thư viện JavaScript mã nguồn
mở, đa nền tảng giúp thêm nhiều chức năng vào trang Web
- jQuery sẽ thực hiện một số chức năng như:
- Thực hiện các yêu cầu của Ajax như: loại trừ dữ liệu đến từ một vị tríkhác một cách linh hoạt
- Giúp tạo các tiện ích bằng bộ sưu tập Plugin JavaScript
- jQuery sẽ tạo hình động tùy chỉnh bằng các thuộc tính của CSS
2.5.3 Glyphicons
- Trong giao diện trang Web, phần không thể thiếu chính là Icons Chúngthường được liên kết với các dữ liệu nhất định và các hành động trong giao diệnngười dùng
- Bootstrap dùng Glyphicons để đáp ứng nhu cầu trên và nó đã mở khóa
bộ Halflings Glyphicons để người dùng sử dụng miễn phí Tại bản miễn phí, tuychỉ có giao diện chuẩn nhưng phù hợp với các chức năng thiết yếu
2.6 Giới thiệu về thư viện hình ảnh Font Awesome
- Font Awesome là là một thư viện chứa các font chữ ký hiệu hay sử
dụng trong website Font chữ ký hiệu ở đây chính là các icons mà ta thường hay
sử dụng trong các layout website
- Font Awesome được xây dựng thành nhiều định dạng file font khácnhau như file otf, eot, ttf, woff, svg,
- Font Awesome hoạt động hầu hết ở các trình duyệt hiện đại hiệnhay Tuy nhiên với các phiên bản cũ IE7 thì nó không hỗ trợ nữa
