ĐỒ ÁN CƠ SỞ 1 ĐỀ TÀI: WEBSITE BÁN CÂY CẢNH. Giảng viên hướng dẫn : ThS. Ninh Khánh Chi

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:
WEBSITE BÁN CÂY CẢNH

Sinh viên thực hiện : Trần Long Nhật
Giảng viên hướng dẫn : ThS Ninh Khánh Chi
Lớp
: 20IT5

Đà nẵng, tháng 5 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
ĐỀ TÀI:
WEBSITE BÁN CÂY CẢNH

Sinh viên thực hiện :
Giảng viên hướng dẫn :
Lớp
:

Trần Long Nhật
ThS Ninh Khánh Chi
20IT5

Đà Nẵng, tháng 5 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.
Trong thời gian 2 tháng , được sự giúp đỡ của cô giáo Ninh Khánh Chi
tại Đại Học Công Nghệ Thông Tin Và Truyền Thông Việt Hàn – Đại Học
Đà Nẵng, chúng em hoàn thành bài báo với đề tài thiết kế giao diện
website bán cây cảnh.

2. Mục tiêu
Mục tiêu chính của đề tài là cung cấp cho những người chơi cây cảnh có
tầm nhìn về các cây cảnh.
-

Tìm hiểu về những cây cảnh đang hot hiện nay.

-

Tìm hiểu về giá cả của những cây cảnh.

-

Tìm hiểu về những cây cảnh phù hợp với phong thủy.

3. Phạm vi
Cung cấp những cây cảnh đẹp, chất lượng cho những khách hàng có đam
mê về cây cảnh.

1


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

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.

5. Nội dung và tiến độ nghiên cứu
Thời gian

Nội dung thực hiện

Người thực hiện

Từ 20/3/2012 đến

Khảo sát hiện trạng của các Trần Long Nhật

28/3/2021
Từ 29/3/2021 đến

trang website về cây cảnh
Tìm hiểu về các cơng nghệ xây Trần Long Nhật

5/4/2021

dựng website và tìm tài liệu về

Từ 6/4/2021 đến

cây cảnh
Thiết kế

20/4/2021
Từ 21/4/2021 đến

chủ,trang đăng nhập, đăng ký
Thiết kế giao diện giới thiệu, Trần Long Nhật

6/5/2021
Từ 7/5/2021 đến

cây cảnh, liên hệ
Sử lỗi giao diện website và Trần Long Nhật

14/5/2021
Từ 14/5/2021 đến

hoàn thiện
Viết bài báo cáo

22/5/2021
Từ 22/5/2021 đến

Hoàn thiện website và nộp lên Trần Long Nhật

26/5/2021

hệ thống

giao

diện

trang Trần Long Nhật

Trần Long Nhật

2


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 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 cô Ninh Khánh Chi, 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 chúng 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!

3


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

………………………………………………………………………………
………………………………………………………………………………

………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………
………………………………………………………………………………

4


MỤC LỤC
Chương 1 Giới thiệu về thiết kế giao diện website..........................................6
1.1 Tổng quan về đề tài.................................................................................6
Bối cảnh của đề tài........................................................................................6
Ngày nay, Internet đã trở thành phương tiện thông tin phổ biến trên tồn thế
giới. Nguồn tài ngun thơng tin mạng vơ tận đem lại cho các bảo tàng
nhiều lợi ích:.................................................................................................6
Là phương tiện tuyên truyền nhanh nhất trên một phạm vi rộng, giá rẻ.......6
Là nơi để tìm kiếm, tra cứu, cung cấp tài liệu cho mọi người......................6
Có thể tìm kiếm thơng tin tài liệu, chạy trực tiếp trên internet mà không cần
phải tải phần mềm riêng biệt về thiết bị........................................................6
Yêu cầu cần một nơi để có thể giao lưu, trao đổi thơng tin, kiến thức cung

cấp cho kì thi tốt nghiệp quan trọng nhất .....................................................6
Vậy nên cần phải có một website để làm những điều đó, đưa nó ra bên
ngồi thực tế..................................................................................................6
Vấn đề cần giải quyết....................................................................................6
Yêu các nội dung thực hiện...........................................................................6
1.2 Phương pháp, kết quả..............................................................................7
1.3 Cấu trúc đồ án.........................................................................................8
1.4 Các hệ thống website tương tự................................................................8
Có rất nhiều hệ thống website về cây cảnh tiêu biển là các hệ thông website
như:...............................................................................................................8
1.5 Các công cụ hỗ trợ thực hiện thiết kế website.........................................8
Các phần mềm lập trình :..............................................................................8
Các cơng cụ hỗ trợ việc thiết kế :..................................................................9
Chương 2 Nghiên cứu tổng quan...................................................................11
2.1 Các phương pháp..................................................................................11
2.2 Hạn chế, tồn tại của các phương pháp...................................................11
2.3 Kết luận.................................................................................................12
Chương 3 Triển khai xây dựng......................................................................13
3.1 Tìm hiểu layout của một website...........................................................13
3.2 Thiết kế trang chủ website....................................................................13
Thiết kế header............................................................................................13
Bố cục website............................................................................................13
3.3 Thiết kế trang........................................................................................15
Dịch vụ........................................................................................................15
Liên hệ........................................................................................................15
Chương 4 Kết luận và hướng phát triển........................................................17
4.1 Kết luận.................................................................................................17
4.2 Hướng phát triển...................................................................................17

5

Chương 1

Giới thiệu về thiết kế giao diện website

1.1 Tổng quan về đề tài


Bối cảnh của đề tài

Ngày nay, Internet đã trở thành phương tiện thơng tin phổ biến trên
tồn thế giới. Nguồn tài nguyên thông tin mạng vô tận đem lại cho
các bảo tàng nhiều lợi ích:
- Là phương tiện tuyên truyền nhanh nhất trên một phạm vi
rộng, giá rẻ.
- Là nơi để tìm kiếm, tra cứu, cung cấp tài liệu cho mọi người.
- Có thể tìm kiếm thơng tin tài liệu, chạy trực tiếp trên internet
mà không cần phải tải phần mềm riêng biệt về thiết bị.
- Yêu cầu cần một nơi để có thể giao lưu, trao đổi thơng tin,
kiến thức cung cấp cho kì thi tốt nghiệp quan trọng nhất .
- Vậy nên cần phải có một website để làm những điều đó, đưa
nó ra bên ngoài thực tế.


Vấn đề cần giải quyết
Cây cảnh, từ trước đến nay vẫn được xem như vật trang trí, làm đẹp không
gian sống cho con người. Cây để bàn, bonsai, terrarium, cây thuỷ sinh
hoặc cây treo chậu… mỗi loại mỗi cây đều có ý nghĩa và vẻ đẹp riêng của
mình, góp phần đáng kể làm cho cuộc sống chúng ta thêm sinh động, trở

nên đáng yêu và thanh bình hơn.
Vậy nên cần phải tạo ra một trang website cung cấp tài liệu chính xác nhất
cung cấp cho học sinh phục vụ cho kì thi tốt nghiệp sắp tới.



Yêu các nội dung thực hiện

Các nội dung thực hiện gồm :
1. Tra cứu cây cảnh.
2. Tra cứu thông tin liên hệ.
3. Đăng nhập và Đăng ký tài khoản cho người dùng.
6


4. Chạy code người dùng viết lên website.

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

-

Tìm hiểu về các trang website hiện nay như: yeucaycanh.net,
cayvahoa.com, bonsaivietnam.com.vn,…

-

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.

 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 đăng nhập đăng ký,cây
cảnh…

7


Hình 1.2 Trang chủ

1.3 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.4 Các hệ thống website tương tự
Có rất nhiều hệ thống website về cây cảnh tiêu biển là các hệ thông
website như:
-

Caycanhvietnam.com

-

Caycanhvietnam.net

-

Yeucaycanh.com

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á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
8


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

9


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

10


Chương 2

Nghiên cứu tổng quan

2.1 Các phương pháp
 Thu thập thông tin

Website liên quan đến cây cảnh đẹp

Website liên quan đến cung

Các tài liệu đều liên quan đến cây cảnh

cấp cây cảnh uy tín
Các tài liệu đề chú trọng vào

và chậu cảnh

cây cảnh và chậu cảnh chất

Không chú trọng đến chất lượng và

lượng
Không chú trọng đưa ra các

thông tin tài liệu đưa ra
loại cây cảnh không chất lượng
Bảng 2.1 Bảng so sánh các phương pháp

2.2 Hạn chế, tồn tại của các phương pháp
 Website bán cây cảnh

11


Hình 2.1 Mã nguồn
-

Hạn chế:
+ Chưa sản xuất theo yêu cầu thị trường về số
lượng và chất lượng với giá cạnh tranh.
+

Cần phân tích yêu cầu từng thị trường - xu hướng
giá cả hàng hoá cạnh tranh do hội nhập kinh tế.

+ Hàm lượng khoa học công nghệ cao để nâng cao
khả năng cạnh tranh về số lượng, chất lượng và
giá.
+ Chưa phát triển ổn định và bền vững ngành hàng
hoa theo cách tiếp cận chuỗi giá trị.

2.3 Kết luận
Mạng Internet là nơi lưu trữ rất nhiều thông tin tài liệu cục lớn và nhờ vậy
nhóm chúng em đã thu thập được nhiều kiến thức, tư liệu, thông tin,…cần
thiết để đưa vào website.Nhưng việc tìm kiếm tài liệu chất lượng khó khăn
vì q nhiều trang website khác nhau đưa ra nhưng tài liệu khác nhau
không đồng bộ.

12


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 3 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;
+ Footer : Phân trang, khu vực dưới cùng của một website. Đây là
nơi dành để giới thiệu ngắn gọn về website/blog, thông tin liên
hệ, bản đồ,…

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

Thiết kế header
Logo:

Hình 3.1 Logo website


Bố cục website
Bố cục của website nhóm chúng em bao gồm :
+ Trang chủ
13


+ Cây cảnh
+ Giới thiệu
+ Dịch vụ
+ Liên hệ
+ Đăng nhập
+ Đăng kí

Hình 3.1: Trang chủ

Hình 3.2: Hình ảnh sản phẩm

14


Hình 3.3: Footer trang chủ

3.3

Thiết kế trang


Dịch vụ

Hình 3.4 Trang dịch vụ


Liên hệ

Hình 3.5 Trang liên hệ
15




Đăng nhập/ Đăng ký

Hình 3.6: Đăng nhập

Hình 3.7 Đăng ký

16


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 cơ, 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 cây
cảnh như caycanhvietnam.com,caycanhvietnam.net,yeucanhcay.com… 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 cô trong q
trình làm đồ án, để đồ án được hồn thành.

4.2 Hướng phát triển
Đối thủ cạnh tranh: Hiện nay trên mạng có rất nhiều trang web chuyên bán
cây cảnh như:cayvahoa.net, caycanhnoithat.vn, vuonhoa.vn,
webcaycanh.com,bonsaivietnam.com.vn, yeucaycanh.com,…
Hướng phát triển của trang web trong tương lai:
+ Trở trành trang web tin cậy cho các khách hàng chơi cây cảnh
trong cả nước.
+ Tối ưu hóa các trang để website hoàn thiện hơn.

I.

Các trang web
17


1. />2. />3. />4. />5. />
18

PHỤ LỤC
Mã nguồn của Website:

Hình 5 Mã nguồn Trang chủ

19


Hình 6 Mã nguồn trang đăng nhập

20


21