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

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 đại 4.0 các công nghệ ngày càng phát triển nhanh
chó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à q 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ác
shop quần áo, quán ăn, đồ uống xuất hiện nhiều trên mạng xã hội. Để bắt kịp
với công nghệ đó, nhóm em đã thực hiện và tạo ra trang web cho qn coffee
củ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ể hồ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ơng
mong muốn.Em kính mong nhận được sự thơng cảm và góp ý của các q
thầy cơ.
Em xin kính chúc q thầy cơ dồi dào sức khỏe, tiếp tục đào tạo ra
những thế 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 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

2.4

Tại sao lại sử dụng CSS.....................................................................12

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
2


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
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ừ <
/>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ừ
< />
3


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

4

Chương 1

TỔNG QUAN
1.1 Tên đề tài

-

Thiết kế giao diện Website qn 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 web
cộ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àng
nước uống và coffee nên nhóm em đã chọn thị trường này và làm nên trang
web 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ớn
mạ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ùng
nhó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

5


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 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à “web
page” 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ên
trì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 html
hoặ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ể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ợp
vớ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.
6


- 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
doanh 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 cung
cấ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.3.4 Footer
Là phần chân trang nằm dưới cùng của trang web, thường dùng để bố trí
thơng tin bản quyền, các liên kết nhanh, fanpage, social, network,…
2.1.4 Các loại website
Có nhiều tiêu chí về website nên cách phân loại nó cũng khác nhau tuy vậy
cũng có những các phổ biến đang được sử dụng hiện nay:

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ên
tướng tác với người dùng. Đa số hiện nay đều là web động.

7


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ông
tin 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ây
dự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 hố, để 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 đặt
thiết kế website và người dùng cũng rất hay tìm kiếm những 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 về HTML
HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng
tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các
đoạn văn, heading, links, blockquotes, ...
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ấu
trúc code đơn giản (tags và attributes) để đánh dấu lên trang web.

8


HTML được sáng tạo bởi Tim Berners-Lee, nhà vật lý học của trung tâm
nghiên cứu CERN ở Thụy Sĩ. Anh ta đã nghĩ ra được ý tưởng cho hệ thống
hypertext 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ập
ngay lập tức. Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao
gồ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ẩn
mậ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át
triển bởi World Wide Web Consortium (W3C). Bạn có thể kiểm tra tình trạng
mớ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à hồn tồn miễn phí.
 Markup gọn gàng và đồng nhất.
 Chuẩn chính của web được vận hành bởi World Wide Web Consortium
(W3C).
 Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.
2.2.2 Khuyết điểm
 Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử
dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
 Nó có thể thực thi một số logic nhất định cho người dùng. Vì vậy, hầu
hết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố,

như là headers hay footers.
 Một số trình duyệt chậm hỗ trợ tính năng mới.
 Khó kiểm số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)

9


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ết
dưới dạng ngôn ngữ đánh dấu, như là HTML. Nó có thể điều khiển định dạng
củ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ân
biệ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ề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.

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ùng
chọ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ên
giao 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 ích
chí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ếp
phầ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ết
vấ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 ngồ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úp
bạ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ình
viê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ại giúp kiểm sốt dễ dàng hơn các lỗi khơng đáng có.
10


CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang
web, 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ủa
trang 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 cho

phong cách), và khác hẵn với PHP (chạy trên server chứ không chạy dưới máy
client).
JavaScript là ngơn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20
nă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ử html
củ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ữ đó
khi phát triển đến một mức độ như Javascript, nó cũng sẽ thu hút lượng lớn
11


hacker, scammer và những người ác tâm ln tìm kiếm lỗ hổng và các lỗi bảo
mậ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 đồng
nhấ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ần
khá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á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ì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â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à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ực
hiệ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ơng
từ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.
12


- 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 khai
bá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 cho
việ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
thườ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ện
ngườ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í, tuy
chỉ 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ác
nhau 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ện
hay. Tuy nhiên với các phiên bản cũ IE7 thì nó khơng hỗ trợ nữa.

13


Chương 3

TRIỂN KHAI XÂY DỰNG
3.1 Giao diện các trang
web

3.1.1 Giao diện trang chủ
3.1.1.1 Phần top
Phần top là 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 các mục điều hướng tới các trang: logo, trang
chủ, sản phẩm, giao hàng, tin tức, về 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 các slider/carousel giới thiệu về các sản phẩm

nổi bật của trang web và nút mua ngay và đặt chỗ.
Footer: về phần footer thì có hiển thị logo của trang web địa chỉ và các
hotline để liên hệ, các đường dẫn liên kết nhanh đến các trang, ô nhập email
đăng kí nhận thơng báo và các đường dẫn liên kết đến các page của web ở các
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 thì các loại sản phẩm thức uống chủ yếu của quán
được miêu tả bằng 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 sẽ hiện lên các mục điền thông tin sản phẩm
và thông tin liên hệ của khách hàng rồi gửi về 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 sẽ thấy đa số là các bài viết và
các nút truy cập nhanh vào các bài viết hoặc các chủ đề bàn luận cũng như là các
nút truy cập nhanh vào với từng 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 sẽ được thấy rõ hơn về thông tin và địa chỉ
liên lạc của shop và có 1 bản đồ địa chỉ của nhóm quản lý ở phía bên phải. Cũng
sẽ có một bảng nhập dữ liệu người dùng và ý 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