Chươ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
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
Trang 2Đà nẵng, tháng 5 năm 2021
1
Trang 3TRƯỜ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 THIẾT KẾ GIAO DIỆN WEBSITE
QUÁN COFFEE
Trang 4
MỞ ĐẦU
3
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 5Nhận xét của GVHD
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
Đà Nẵng, tháng 8 , năm 2020
CHỮ KÍ GVHD
TS PHẠM NGUYỄN MINH NHỰT
Trang 6
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
3.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
5
Trang 73.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 8DANH 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
7
Trang 9Chương 1 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 hiện
- 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á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 trang webtrecoffee
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 11Chươ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ông hiểuhoặ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ủamình Vì vậy một bố cục phổ biến bao gồm Header, Slide/Carousel, ContentArea, Footer và với những trang cụ thể có thể sẽ có thay đổi phù hợp với nhu cầuhiể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 12- Phần này 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 đượ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ủa doanhnghiệ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
2.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,…
11
Trang 13 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ây dựngthươ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
HTML đượ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
Trang 14Nhanh 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í
là headers hay footers
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)
2.3 Tổng quan về CSS
CSS 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ạng củanhiề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ệtcá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ữ
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
13
Trang 15Phươ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ắn lạigiúp kiểm soát dễ dàng hơn các lỗi không đáng có
CSS 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)
Trang 16JavaScript 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
Mọi ngôn ngữ lập trình đều có khuyết điểm Một phần là vì ngôn ngữ đó khiphát triển đến một mức độ như Javascript, nó cũng sẽ thu hút lượng lớn hacker,scammer và những người ác tâm luôn tìm kiếm lỗ hổng và các lỗi bảo mật để lợidụ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 ra cácresponsive website Nó cho phép giao diện người dùng của trang web có thể
15
Trang 17hoạ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ình nhỏ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ần xâydựng các trang web dành riêng cho từng thiết bị và bị giới hạn phạm vi đốitượ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àu sắ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
- 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úng