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

Đ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 hoá, 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ế…

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

Đà 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 hoá, 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ứ quà 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 yêu” đó chính là cà phê, là món quà 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ê hoà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ộtwebsite như: HTML5, CSS, Javascript, Bootstrap

3

LỜI CẢM ƠN

4

Để 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ônchuyên ngành đã cung cấp cho chúng em các thông tin, kiến 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à hoàn thành đồ án củamình Đặc biệt em xin chân thành cảm ơn thầy Lê Kim Trọng, người đã trực tiếphướ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 quá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

Chương 1 Giới thiệu 8

1.1 Tên đề tài: Cà phê và cách pha chế 8

1.2 Giới thiệu đề tài 8

1.3 Phương pháp, kết quả 8

1.4 Cấu trúc đồ án…….……… ……… 9

1.5 Các công cụ hỗ trợ thực hiện thiết kế Website………9

1.6 Ý tưởng………11

1.7 Mục tiêu………11

Chương 2 Nghiên cứu tổng quan 13

2.1 Mô hình 13

2.2 Tính khả thi 13

2.3 Xây dựng Website 13

Chương 3 Triển khai xây dựng 14

3.1 Tìm hiểu layout của 1 website 14

3.2 Thiết kế trang chủ Website 14

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

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

4.1 Kết luận 19

4.2 Hướng phát triển 19

DANH MỤC TÀI LIỆU THAM KHẢO 22

7

Chương 1 GIỚI THIỆU

1.2 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 toá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

- 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,

1.4 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

1.5 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ácphần mềm đều có trình kiểm tra chính tả, số dòng, tự động hoàn thành, xem trướctrang 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ềuhành Windows Hỗ trợ mạnh mẽ cho cộng đồng nhiều Plugins, snippets, codeauto 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ácplugin 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ồitrong 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íchhợp sẵn tính năng Quick Edit giúp cho mọi người có thể dễ dàng và nhanh chóngsoạ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 hoàn toà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úpbạn phát triển nhanh chóng website của mình Rất dễ sử dụng, vì nó được viếtbằ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ẵnreponsive css trên các thiết bị mobiles, tablets, và desktops nên bạn sẽ không mấtthờ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ươngthích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, andOpera)

Javascript sẽ giúp tăng tính tương tác trên website Script này chạy trêncá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ủabê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, xoá 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ầnphải resize bằng tay.

- 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

 Ý 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

3.2 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 hoà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

- 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.3 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.3.1 Thiết kế header

Logo:

Hình 3.1 Logo website

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

3.4.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

Hình 3.6: Trang liên hệ

18

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

4.1 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 đã hoà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 quá trình phát triển, nâng cấp phần mềm giai đoạn sau

19

TÀI LIỆU THAM KHẢO

1 https://getbootstrap.com

2 https://github.com

3 https://www.google.com

20

21