ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: Thiết kế website giới thiệu về cà phê. THS. LÊ KIM TRỌNG

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ế website giới thiệu về cà phê

Sinh viên thực hiện

: PHAN VĂN LAI

Giảng viên hướng dẫn : THS. LÊ KIM TRỌNG
Lớp
: 20IT8

Đà nẵng, tháng 6 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Ở 1

CÀ PHÊ VÀ CÁCH PHA CHẾ

Đà Nẵng, tháng 6 năm 2021

1


MỞ ĐẦU
1. Giới Thiệu

Ngày nay, chúng ta đang được sống trong kỷ nguyên của tin học nhờ
sự vượt bậc sự bùng nổ mạnh mẽ của công nghệ thông tin, Công nghệ
thơng tin khơng ngừng chỉ dừng lại ở mục đích phục vụ cho khoa học kĩ
thuật mà đi sâu vào đời sống, chính trị, kinh tế, xã hội, trở nên thân thiện,
gần gũi, mang lại nhiều lợi ích cho con người. Cơng nghệ thơng tin ngày
càng khẳng định được tính hữu ích và sức mạnh trong mọi phương diện,
mọi ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường hiện
như bây giờ.
Đi kèm theo đó, các hệ thống website cũng phát triển không ngường
với đủ các lĩnh vực: văn hố, thời sự, khoa học cơng nghệ, làm đẹp, nấu ăn,
thể thao, ca nhạc, phim ảnh, giáo dục, y tế… Tuy nhiên, để tạo ra một trang
web có sức sống bền lâu thì bản thân nó phải mạng lại lợi ích cho nhiều
người. Giao diện bắt mắt là yếu tố quan trọng để người xem click chuột đến
website của bạn. Những yếu tố quyết định giữ chân đọc giả lại là nội dung
mà website cung cấp.
Ở Việt Nam, có một thứ q mà người ta thường ví rằng “đen như địa ngục,
đắng như tử thần, ngọt ngào như tình u” đó chính là cà phê, là món q
tuyệt vời được cả thế giới đón nhận, vì thế mà có rất nhiều những câu
chuyện và hành trình khám phá cây cà phê diễn ra một cách rộng lớn và thú
vị.
Cà phê được xem là đồ uống số 1 trên thế giới. Lượng tiêu thụ gần
9.012.540 tấn trên một năm , có rất nhiều sản phẩm từ cà phê và thơng tin ,
cách chế biến của chúng nhưng tìm kiếm ở đâu, vừa chính xác lại vừa đáng
tin cậy thì khơng phải ai cũng biết. COFFEE INFOR là nơi đưa đến cho

bạn những thơng tin cần thiết để có một ly cà phê hồn mỹ.
2. Mục tiêu
Mục tiêu chính của đề tài là thiết kế giao diện website giúp cho người
dùng có thể tìm kiếm thơng tin , cách chế biến và thưởng thức cà phê.

2


3. Phương pháp nghiên cứu
-

Nghiên cứu quy trình phân tích, thiết kế website.
Nghiên cứu cách sử dụng các công nghệ cần thiết để thiết kế, xây dựng một
website như: HTML5, CSS, Javascript, Bootstrap.

3


LỜI CẢM ƠN

Để thực hiện và hoàn thành tốt đồ án này, em đã nhận được sự giúp đỡ và hướng
dẫn rất tận tình của các thầy cơ thuộc Đại Học Công Nghệ Thông Tin Và Truyền Thông
Việt Hàn – Đại Học Đà Nẵng. Em xin cảm ơn các thầy cô thuộc bộ môn chuyên ngành đã
cung cấp cho chúng em các thông tin, kiến
4 thức vô cùng quý báu và cần thiết trong suốt
thời gian quá để em có thể thực hiện và hồn thành đồ án của mình. Đặc biệt em xin chân
thành cảm ơn thầy Lê Kim Trọng, người đã trực tiếp hướng dẫn chúng em trong thời gian
thực hiện đồ án này.
Cuối cùng, xin chân thành cảm ơn các bạn trong ngành công nghệ thông tin đã ủng
hộ, giúp đỡ, chia sẻ kiến thức, kinh nghiệm và tài liệu có được giúp tơi trong q trình

nghiên cứu và thực hiện đề tài.
Do giới hạn về mặt thời gian và kiến thức cũng như kinh nghiệm thực tiễn nên đề
tài khơng tránh khỏi những sai sót. Em rất mong nhận được sự thông cảm của quý thầy cơ
và mong đón nhận những góp ý của thầy cơ và các bạn.
Em xin chân thành cảm ơn!


4


NHẬN XÉT
(Của giảng viên hướng dẫn)

.......................................................................................................................
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………… ..............................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................

...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...........................................................................

5


...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
......................................................................................................................... .........
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................

...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
...................................................................................................................................
................................................................................................................

6


(Mẫu)

MỤC LỤC
Trang
MỞ ĐẦU...............................................................................................................2
Các phần mềm lập trình :............................................................................12
Các cơng cụ hỗ trợ việc thiết kế :................................................................13
11........................................................................................................................ 14
Chương 2 Nghiên cứu tổng quan........................................................................15
2.1 Mơ hình......................................................................................................15
13........................................................................................................................ 16
Chương 3 Triển khai xây dựng...........................................................................17
3.1 Tìm hiểu layout của một website..............................................................17
3.2 Thiết kế trang chủ website.........................................................................17

3.2.1 Thiết kế header....................................................................................17
3.2.2 Bố cục website....................................................................................17
3.3 Thiết kế trang tài liệu chi tiết.....................................................................19
3.3.1 Trang chủ............................................................................................19
3.3.2 Thông tin về chúng tôi.......................................................................19
3.3.3 Danh sách sản phẩm...........................................................................20
3.3.4 Trang liên hệ.......................................................................................20
18........................................................................................................................ 21
Chương 4 Kết luận và Hướng phát triển.............................................................22
Giai đoạn 1:.....................................................................................................22
Giai đoạn 2:.....................................................................................................22
Giai đoạn 3:.....................................................................................................22
DANH MỤC TÀI LIỆU THAM KHẢO..............................................................22

7


Chương 1
1.2

GIỚI THIỆU

Giới thiệu đề tài:

Cà phê không biết từ bao giờ đã trở nên gần gũi và quen thuộc với
người dân Việt Nam đến thế. Cái vị đăng đắng, đầm đậm bên đầu lưỡi,
hương thơm dịu, mùi đất lan tỏa bên tách cà phê khiến cho người ta phải
ngất ngây…
Và cứ thế,cà phê đi vào lòng người Việt một cách đằm thắm nhẹ
nhàng. Người ta thưởng thức cà phê trong khi làm việc, khi gặp gỡ - bàn

chuyện cùng đối tác, khi trò chuyện cùng bạn bè, người thân… Cà phê
đóng góp một phần khơng nhỏ trong cuộc sống, trong cơng việc của mỗi
người.
Người Việt có phong cách thưởng thức cà phê rất riêng, họ không coi
cà phê là thức uống nhanh, có tác dụng chống buồn ngủ như người Mỹ mà
thưởng thức cà phê như một thứ văn hóa: nhâm nhi và suy tưởng. Ngồi bên
tách cà phê, vừa nhấp từng ngụm nhỏ vừa đọc báo, nghe nhạc, trò chuyện
cùng bạn bè, cùng đối tác làm ăn, hay ngồi làm việc, và còn để suy ngẫm về
cuộc sống, về con người,…
Dựa trên tình hình thực tế đó, Chúng tơi đã khảo sát và đặt ra bài tốn
thiết kế Website Cà phê và cách pha chế. Là website giúp mọi người
dùng có thể tìm kiếm thơng tin ,cách pha chế và thưởng thức một
cách khoa học và chính xác nhất.
1.3

Phương pháp, kết quả
 Phương pháp triển khai thực hiện đề tài.
-

Thu thập thơng tin : tài liệu cho website,tìm hiểu về các công nghệ
cần thiết để xây dựng website như:HTML,Bootstrap,CSS,
Javascript,…

-

Sử dụng Visual code để xây dựng website.

-

Tạo logo cho trang website.

-

Lên ý tưởng cho trang website.

-

Xây dưng trang website.
8

 Kết quả đã đạt được


-

Thiết kế được logo cho trang web.

Hình 1.1 Logo

1.4

1.5

-

Thu thập được nhiều thông tin về giao diện trang website.

-

Thiết kế giao diện cho website trang chủ, trang ăn vặt, coffee,..

Cấu trúc đồ án
-

Nguyên cứu tổng quan.

-

Triển khai xây dựng.

-

Kết luận và hướng phát triển

Các công cụ hỗ trợ thực hiện thiết kế website
Các phần mềm lập trình :
-

Visual Studio Code

Ưu điểm của các phần mềm này là nó rất dễ để có thể cài đặt và sử dụng,
tất cả đều được tối ưu cho ngôn ngữ HTML và các ngôn ngữ lập trình web. Các
phần mềm đều có trình kiểm tra chính tả, số dịng, tự động hồn thành, xem trước
trang và là công cụ soạn thảo văn bản và hình ảnh. Và đều tối ưu cho hệ điều
hành Windows. Hỗ trợ mạnh mẽ cho cộng đồng nhiều Plugins, snippets, code
auto complete, highlight beautiful, tùy biến giao diện, phím tắt, và rất nhiều thứ
khác nữa. Phát triển rất tích cực với sự hỗ trợ của Microsoft. Các tài liệu chính
9

thức được duy trì tốt. Có sự hỗ trợ rất tích cực của cộng đồng với tất cả các
plugin bạn cần. Nếu gửi một lỗi trên GitHub, bạn thường sẽ nhận được phản hồi
trong vịng 4 ngày. Thực hiện tính năng tìm kiếm và thay thế vơ cùng dễ dàng,
chính vì vậy giúp cho chúng ta nhanh chóng chỉnh sửa những đoạn code bị lỗi.
Tự động báo lỗi trong quá trình viết chương trình. Phần mềm Bracker được tích
hợp sẵn tính năng Quick Edit giúp cho mọi người có thể dễ dàng và nhanh chóng
soạn thảo các chương trình. Tự động báo lỗi khi lập trình javascript với cơng cụ
JSLint.
Nhược điểm của các phần mềm này là chưa tối ưu hồn tồn về ngơn ngữ, sẽ
rất khó giải quyết khi gặp các lỗi bug, code,... Các phím tắt mặc định khơng có ý
nghĩa và người dùng phải cấu hình lại gần như tất cả chúng. Các phần mềm chia
được ít cột hiện thi tập tin. Đối với eclipse, phần mềm này khá tốn dung lượng bộ
nhớ. Một số phần mềm cần phải trả phí như Sublime Text….

Các cơng cụ hỗ trợ việc thiết kế :
Thư viện Bootstrap là một thư viện sẵn có nên việc sử dụng nó sẽ giúp
bạn phát triển nhanh chóng website của mình. Rất dễ sử dụng, vì nó được viết
bằng html, css, javascript nên bạn chỉ cần có kiến thức cơ bản về 3 cái đó là có thể
sử dụng bootstrap tốt. Tính năng Responsive hữu ích: Bootstrap xây dựng sẵn
reponsive css trên các thiết bị mobiles, tablets, và desktops nên bạn sẽ không mất
thời gian viết cái đống css lằng nhằng nữa. Tương thích với trình duyệt: Nó tương
thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and
Opera).
Javascript sẽ giúp tăng tính tương tác trên website. Script này chạy trên
các trình duyệt của người dùng thay vì trên server và thường sử dụng thư viện của
bên thứ 3 nên có thể tăng thêm chức năng cho website mà không phải code từ
đầu.
Photoshop CS6 để khắc phục được hầu hết những lỗi trên hình ảnh.
Photoshop cho phép bạn đổi màu, thêm bớt, xố bỏ vật thể. Bạn cũng có thể dễ
dàng tạo ra những hiệu ứng tuyệt đẹp bằng photoshop.

Responsive để làm cho website có thể tự điều chỉnh kích thước theo màn hình,
giúp cho người dùng có được trải nghiệm tối ưu mà không ảnh hưởng bởi loại
10


thiết bị mà họ dùng để truy cập vào website. Lợi ích đầu tiên là trang web có thể
tải một cách nhanh chóng mà khơng bị biến dạng, để cho người dùng không cần
phải resize bằng tay.

1.6

Ý tưởng:

- Mạng Internet hiện nay đã trở thành một phần không thể thiếu của cuộc sống
con người . Hiện nay, người dùng có thể dễ dàng sử dụng các thiết bị như máy
tính, thiết bị di động để tìm kiếm thơng tin doanh nghiệp, sản phẩm , dịch vụ và
mua hàng trên Internet thông qua công cụ website . Đời sống vật chất , tinh thần
ngày được nâng cao thì việc tìm kiếm những thông tin và cách pha chế cà phê để
nhâm nhy, thưởng thức sau một ngày làm việc , học tập mệt mỏi đã trở nên phổ
biến . Chính vì vậy nên thiết kế website cung cấp thông tin bổ ích và pha chế cà
phê để quảng bá hình ảnh ,văn hóa uống cà phê là cần thiết ở thời điểm hiện tại
cững như trong tương lai . Khách hàng ở bất kỳ nơi đâu cũng có thể tìm kiếm và
biết đến thương hiệu của bạn thơng qua trang web.

1.7
•
•
•
•
•

•

Mục tiêu:
Ý tưởng thiết kế mang nét riêng thương hiệu
Giao diện thiết kế đẹp mắt
Tính năng linh hoạt
Thân thiện với người truy cập thông qua những chức năng tối ưu
Thiết kế tối ưu SEO trên các bộ máy tìm kiếm
Thiết kế Responsive, thân thiện với mọi thiết bị di động
Website được cập nhật thường xuyên, để nội dung của trang luôn
mới.Khách hàng, những người quan tâm đến giá trị website của bạn, họ
quan tâm đến chất lượng nội dung mà bạn cung cấp trên website.

11


Chương 2

Nghiên cứu tổng quan

2.1
Mơ hình
- Website “COFFEE INFOR” gồm các phần :
+ Trang chủ: thông tin về cà phê, thông tin về các sản phẩm nổi bật,
các sản phẩm chính của website và kiến thức về cà phê.
+ Thơng tin về chúng tôi: giới thiệu trang web, ưu điểm khi sử dụng
website , lời cam kết
+ Danh sách sản phẩm: tất cả sản phẩm của website
+ Liên hệ: số điện thoại , email , địa chỉ , liên lạc
Tổng hợp lại ý kiến của người dùng, sửa lỗi và hoàn tất hệ thống và

chứng tỏ được các yêu cầu của trang web được thỏa mãn.
- Website được cập nhật liên tục gồm: điều chỉnh các lỗi mà chưa được
phát hiện trong các giai đoạn trước, nâng cấp hệ thống và cập nhật các
địa điểm mới nhất.
2.2

Tính khả thi
- Giao diện dễ sử dụng cho tất cả mọi người
Chi phí phát triển không quá cao , dễ dàng thu hút được nhà đầu tư.
- Lợi thế :
Hiện nay có các website tương tự đã có trên thị trường tuy nhiên chưa
đáp ứng đầy đủ nhu cầu của người sử dụng , do đó chúng ta có thể học
hỏi chọn lọc và cải tiến những vấn đề còn tồn đọng để gia cơng hồn
chỉnh .
- Đang là xu thế của giới trẻ hiện nay, đa phần người dùng chúng ta
hướng tới đều thực hiện tìm kiếm trên thiết bị thơng minh nên những
ứng dụng như này rất được sự ủng hộ chủa đông đảo người dùng.

2.3

Xây dựng Website

 Xác định điều gì là quan trọng nhất đối với website?
Tạo dấu ấn với người sử dụng: Trước tiên cần phải chuyên nghiệp trong

từng chi tiết. Do vậy các tính năng cần được sắp xếp một cách khoa học, dễ
tìm kiếm và đáp ứng nhu cầu của khách hàng khi ghé vào web.
Tạo dựng được lịng tin: Đối với người dùng thì lịng tin rất quan trọng, một
website chuyên nghiệp mang lại dấu ấn sâu sắc với khách hàng từ đó làm
cho họ có cảm giác tin tưởng về những chỉ số về những địa điểm, thông tin

phù hợp với mỗi người.
12


Tính chia sẻ website cao: Muốn website được chia sẻ nhiều trên cộng đồng

thì chất lượng bài viết cần hay và lơi cuốn, bên cạnh đó thiết kế với tính
thẩm mỹ cao, tạo ấn tượng đặc biệt với người xem.
 Các chức năng ( Module) cơ bản khi thiết kế website
1. Trang chủ:

- Thiết kế trang chủ đẹp, chuyên nghiệp, bố cục theo trình tự logic và khoa
học
- Thiết kế banner, logo, sologan...phù hợp, bắt mắt.
- Hiển thị hình ảnh tổng thể website.
- Liệt kê các tin tức mới, tin tức nổi bật trên trang chủ.
2. Module Giới thiệu:

- Giới thiệu chung về website.
- Review của một số người dùng sau khi sử dụng.
3. Module Liên hệ:

- Các form liên hệ cơ bản để nhận phản hồi của người truy cập
- Liên hệ hỗ trợ trực tuyến

13


Chương 3

Triển khai xây dựng

3.1 Tìm hiểu layout của một website
Thơng qua việc tìm hiểu về layout của một số website nhóm chúng em
nhận một website cơ bản bao gồm 2 phần:
+ Header: Phần đầu trang, đây là khu vực người ta thường đặt
logo, banner, khẩu hiệu của website/blog.
+ Content: Phần nội dung, nó có thể là nội dung một bài viết hoặc
danh sách các bài viết;

3.2

Thiết kế trang chủ website
Trang chủ của website là phần đầu tiên đập vào mắt của người dùng, trang

chủ cần phải có màu sắc hài hòa , giao diện đơn giản,dễ sử dụng.
3.2.1
Logo:

Thiết kế header

Hình 3.1 Logo website
3.2.2 Bố cục website
Bố cục của website nhóm chúng em bao gồm :
+ Trang chủ
+ Thơng tin về chúng tôi

14

+ Danh sách sản phẩm
+ Liên hệ

Hình 3.1: Trang chủ

Hình 3.2: Hình ảnh trang chủ

15


3.3

Thiết kế trang tài liệu chi tiết

3.3.1 Trang chủ
Trang chủ sẽ hiển thị các thơng tin về website của nhóm em như:
-

Thông tin về cà phê

-

Một số sản phẩm nổi bật

-

Kiến thức về cà phê

3.3.2 Thông tin về chúng tôi

Coffee Infor sẽ bao gồm đầy đủ các thông tin về :
+ Giới thiệu về website
+ Ưu điểm của website
+ Lời cam kết

Hình 3.2: Thơng tin về chúng tơi

16


3.3.3 Danh sách sản phẩm
Trang sẽ hiển thị đầy đủ các sản phẩm của website

Hình 3.3: Danh sách sản phẩm

3.3.4 Trang liên hệ
Trang liên hệ bao gồm thông tin, địa chỉ và form điền các góp ý nếu người
sử dụng cần được giải đáp thắc mắc.
17


Hình 3.6: Trang liên hệ

18


Chương 4
4.1

Kết luận và Hướng phát triển

Kết luận

Trong quá trình làm đồ án, chúng em cũng gặp rất nhiều khó khăn nhưng
được sự giúp đỡ tận tình của thầy, nhóm em đã hồn thành đồ án.Chúng em đã
tìm hiểu và tham khảo các trang web chuyên cung cấp tài liệu. Từ đó nhóm đưa
ra các ý tưởng, định hướng về giao diện web. Trong khi làm đồ án kiến thức có
hạn nên khơng tránh khỏi các sai sót , mong thầy cơ và các bạn đóng góp ý kiến
để đồ án được hoàn thiện tốt hơn, để đáp ứng với nhu cầu thực tế.
Cuối cùng chúng em xin chân thành cảm ơn sự giúp đỡ của thầy trong quá
trình làm đồ án, để đồ án được hoàn thành.
Tuy nhiên, vẫn cịn nhiều hạn chế:
- Mặc dù đã có nhiều cố gắng, tìm hiểu kiến thức đã học, kết hợp tra cứu
các tài liệu chuyên ngành nhưng do hạn chế về khả năng và kinh nghiệm nên
không thể tránh khỏi những thiếu sót nhất định.
- Báo cáo chưa giải quyết được trọn vẹn những vấn đề phát sinh trong quá
trình quản lý.
- Báo cáo chưa đạt tính thẩm mĩ cao, phong cách hành văn còn lủng củng,
còn nhiều vấn đề chưa chính xác cần khắc phục trong q trình phát triển, nâng
cấp phần mềm giai đoạn sau.

4.2 Hướng phát triển
Giai đoạn 1:
6 tháng trước khi tung sản phẩm đến với thị trường: Hồn thành tạo Website
chính cho sản phẩm.

Giai đoạn 2:
Ngay sau khi tung sản phẩm đến sau 3 tháng: Khảo sát mức độ tiếp nhận
của thị trường mục tiêu

Giai đoạn 3:
Bắt đầu từ năm thứ 2 trở đi, liên tục khảo sát nhu cầu khách hàng và nâng
cấp website với nhiều tính năng hơn ở giai đoạn cần thiết và cung cấp giá trị gia
tăng.

19


TÀI LIỆU THAM KHẢO
1.
2.
3.

20


21