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 : PHẠM VĂN NHẬT
Giảng viên hướng dẫn : THS. ĐỖ CÔNG ĐỨC
Lớp
: 20IT11

Đà 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

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


MỞ ĐẦU
Với sự phát triển mạnh mẽ của cách mạng 4.0, bầu khơng khí trên trái đất
đang bị đe dọa nghiêm trọng. Tuy nhiên nó lại mang lại một cuộc sống văn minh
và hiện đại hơn, đem đến một cách nhìn khác về thế giới xung quanh của chúng

ta. Với sự phát triển này mọi hoạt động đều trở nên dễ dàng, thúc đẩy tăng trưởng
kinh tế nhanh chóng mặt. Đặc biệt ngành công nghệ đang là bước phát triển mũi
nhọn nó khám phá và tìm ra những điều mà con người chúng ta không bao giờ
suy nghĩ đến, là cơng cụ chính giúp con người có thể chinh phục những bí ẩn
chưa được biết đến của vũ trụ.
Nhưng để đánh đổi những thành tựu to lớn đó trái đất của chúng ta ngày
càng bị đe dọa vì vậy em đã thực hiện đồ án “ WEBSITE BÁN CÂY CẢNH ”
với mong muốn mang khơng khí trong lành đến mọi nhà, cho mọi người thấy
được tầm quan trọng của cây xanh, có ý thức hơn trong việc trồng thật nhiều cây
xanh để bảo vệ trái đất và an toàn của chính bản thân mình.


LỜI CẢM ƠN
Với sự hướng dẫn tận tình của Ths. Đỗ Cơng Đức em đã hồn thành bài
báo cáo đồ án này. Tuy đã rất cố gắng để hoàn thành tốt nhất có thể nhưng cũng
khơng tránh được những thiếu sót em rất mong nhận được sự thơng cảm và góp ý
của các Thầy cơ. Em xin chân thành cảm ơn.


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

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



MỤC LỤC
Trang
MỞ ĐẦU..............................................................................................................3
Chương 1 GIỚI THIỆU.........................................................................................1
1.1 Tổng quan....................................................................................................1
1.2 Lý do chọn đề tài.........................................................................................1
1.3 Giới hạn và phạm vi của đề tài.....................................................................1
1.4 Yêu cầu website...........................................................................................1
1.5 Phương pháp, kết quả...................................................................................1
1.6 Cấu trúc đồ án..............................................................................................1
Chương 2 PHÂN TÍCH VÀ LỰA CHỌN CƠNG NGHỆ.....................................2
2.1 Ngôn ngữ HTML.........................................................................................2
2.1.1 Giới thiệu..............................................................................................2
2.1.2 Lịch sử của HTML................................................................................2
2.1.3 Cách HTML hoạt động.........................................................................3
2.1.4 Các tag thông dụng của HTML.............................................................3
2.1.5 Ưu điểm và nhược điểm của HTML.....................................................4
2.2 CSS..............................................................................................................4
2.2.1 Giới thiệu..............................................................................................4
2.2.2 Sử dụng CSS.........................................................................................4
2.3 JavaScript.....................................................................................................5
2.4 Bootstrap......................................................................................................5
2.4.1 Giới thiệu..............................................................................................5
2.4.2 Các file chính của bootstrap..................................................................5
2.5 Jquery........................................................................................................... 6
Chương 3 XÂY DỰNG TRANG WEB.................................................................8
3.1 Các chức năng của trang web.......................................................................8
3.1.1 Người quản trị.......................................................................................8
3.1.2 Người dùng...........................................................................................9

Chương 4 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN...........................................13
1. Kết quả đạt được..........................................................................................13
2. Hướng phát triển..........................................................................................13
DANH MỤC TÀI LIỆU THAM KHẢO............................................................14


DANH MỤC HÌNH
Trang


DANH MỤC CỤM TỪ VIẾT TẮT
STT
1
2
3

Cụm từ
Khoa học máy tính
Cơng nghệ thông tin
Công nghệ

Viết tắt
KHMT
CNTT
CN


Chương 1

GIỚI THIỆU


1.1 Tổng quan
-

Bối cảnh thực hiện đề tài: Xã hội phát triển nhanh chóng tiềm ẩn nhiều hệ
lụy trong cuộc sống của chúng ta, đặc biệt về vấn đề môi trường sống đang
bị ảnh hưởng tiêu cực bởi hiện tượng nóng lên tồn cầu.

-

Vấn đề cần giải quyết: Làm hạn chế q trình của hiện tượng nóng lên toàn
cầu.

-

Đề xuất nội dung thực hiện: Để hạn chế được tình trạng này em làm ra
website bán cây cảnh với mong muốn mang đến cho mọi người một không
gian trong lành, thoải mái hơn.

1.2 Lý do chọn đề tài
Ngày nay, sự phát triển nhanh chóng về mọi lĩnh vực, con người đang dần
biến trái đất thành một quả cầu lửa đe dọa trực tiếp đến cuộc sống của chính
mình. Để góp phần hạn chế q trình đó diễn ra nhanh hơn em đã chọn đề tài
“Website bán cây cảnh” nhằm lan tỏa tầm quan trọng của cây xanh đối với
cuộc sống.

1.3 Giới hạn và phạm vi của đề tài
-

Ngôn ngữ HTML, Css, Bootstrap, Javascript, Jquery.


1.4 Yêu cầu website
Xây dựng một trang web có giao diện đẹp mắt thu hút được nhiều người
xem và mua. Đáp ứng được nhu cầu và mong muốn của khách. Lan tỏa tình
u thiên nhiên, có ý thức hơn trong việc bảo về và trồng thật nhiều cây xanh.

1.5 Phương pháp, kết quả
-

Trình bày phương pháp triển khai thực hiện đề tài: sử dụng phần mềm
Sublime text 3 để xây dựng và thiết kế website.
Kết quả đạt được: Trang web bán cây cảnh đẹp mắt, sáng tạo và thu hút
được nhiều người mua.

1.6 Cấu trúc đồ án
Chương 2 Phân tích và lựa chọn cơng nghệ
Chương 3 Xây dựng trang web
Chương 4 Kết luận và hướng phát triển
1


Chương 2

PHÂN TÍCH VÀ LỰA CHỌN CƠNG NGHỆ

2.1 Ngơn ngữ HTML
2.1.1 Giới thiệu
HTML(viết tắt của từ Hypertext Markup Language, hay là “Ngôn ngữ
Đánh dấu Siêu văn bản” ) là một ngôn ngữ đánh dấu được thiết kế ra để tạo
nên các trang web trên World Wide Web. Cùng với CSS và JavaScript, HTML

là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website.
HTML là xương sống của một trang web. Nó giúp cấu thành các cấu trúc cơ
bản của một website, làm cho trang web trở thành một hệ thống hồn chỉnh.
Ngơn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành
phần trang web. Đồng thời nó cịn hỗ trợ khai báo các file kỹ thuật số như
nhạc, video, hình ảnh,…
2.1.2 Lịch sử của HTML
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.
Theo Mozilla Deverloper Network: HTML Element Reference, hiện tại có
hơn 140 HTML tags, mặc dù một vài trong số chúng đã bị tạm ngưng (khơng
hỗ trợ bởi các trình duyệt hiện đại). Nhanh chóng phổ biến ở mức độ chóng
mặt, HTML được xem như là chuẩn mực 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). Chúng ta 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.3 Cách HTML hoạt động
Khi chúng ta gõ ra 1 tên miền, trình duyệt mà chúng ta đang sử dụng
(chẳng hạn như Chrome) sẽ kết nối tới 1 máy chủ web, bằng cách dùng 1 địa
chỉ IP, vốn được thấy bằng cách phân giải tên miền đó (DNS). Máy chủ web
chính là một máy tính được kết nối tới internet và nhận các yêu cầu tới trang

web từ trình duyệt của chúng ta. Máy chủ sau đó sẽ gửi trả thơng tin về trình
duyệt, là 1 tài liệu HTML, để hiển thị trang web.
Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới
đuôi mở rộng là .html hoặc .htm. Khi một tập tin HTML được hình thành,
việc xử lý nó sẽ do trình duyệt web đảm nhận. Trình duyệt sẽ đóng vai trị đọc
hiểu nội dung HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đã
được đánh dấu để đọc, nghe hoặc hiểu.
Chúng ta có thể xem chúng bằng cách sử dụng bất kỳ trình duyệt web nào
(như Google Chrome, Safari, hay Mozilla Firefox). Trình duyệt đọc các files
HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem
được nó. Thơng thường, trung bình một web chứa nhiều trang web HTML, ví
dụ như: trang home, trang product, trang blog…
2.1.4 Các tag thông dụng của HTML
Trong file HTML, block-level tags cùng inline tags là các thẻ được dùng
chủ yếu.
- Block-level tags của mỗi trang HTML cần có những tag như là <html>,
<head>, và <body>.
+ Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang
HTML.
+ Tag <head></head> chứa các thông tin meta như là tiêu đề trang và
charset.
+ Cuối cùng <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện
trên trang.
- Inline tags thường được dùng để định dạng, tạo bố cục cho nội dung bên
trong của block-level tags.. Ví dụ như, tag <strong></strong> sẽ định dạng chữ
in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên.
Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để
xác định link cụ thể: