TRƯỜNG ĐẠI HỌC SƯ PHẠM ĐÀ NẴNG
KHOA TIN HỌC

BÁO CÁO KHÓA LUẬN TỐT NGHIỆP

Đề tài: THIẾT KẾ VÀ XÂY DỰNG
WEBSITE HIGHLAND COFFEE

GVHD:
SVTH:
Lớp học phần:

TS. Nguyễn Trần Quốc Vinh
Lê Nho Thắng
17CNTTC

Đà Nẵng, ngày … tháng 04 năm 2021


1

1

MỤC LỤC

MỤC LỤC ................................................................................................................................. 2
DANH MỤC HÌNH ẢNH ........................................................................................................ 4
LỜI CẢM ƠN ........................................................................................................................... 6
MỞ ĐẦU.................................................................................................................................. 10
I.

Lý do chọn đề tài......................................................................................................... 10

II.

Mục tiêu. ...................................................................................................................... 11
1.

Mục tiêu chung. ............................................................................................................ 11

2.

Mục tiêu đề tài .............................................................................................................. 11

3.

Kết quả dự kiến............................................................................................................. 12

III.

Đối tượng và phạm vi đề tài. ...................................................................................... 12

1.

Đối tượng nghiên cứu. .................................................................................................. 12

2.

Phạm vi đề tài. .............................................................................................................. 12

3.


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

IV.

Tiêu chí của đề tài. ...................................................................................................... 13

Chương I: TỔNG QUAN VỀ CÔNG NGHỆ ...................................................................... 14
I.

Tổng quan về HTML5/CSS3/JS ................................................................................ 14
1.

Sơ lược về HTML5....................................................................................................... 14

2.

Sơ lược về CSS3 ........................................................................................................... 17

3.

Sơ lược về Js (JavaScript) ............................................................................................ 19

II.

React Js ........................................................................................................................ 22

III.

Cơ sở dữ liệu NoSQL và Firebase Firestore ............................................................ 23


1.

Cơ sở dữ liệu NoSQL ................................................................................................... 23

2.

Firebase Firestore. ........................................................................................................ 25

Chương II: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ..................................................... 27
I.

Giới thiệu bài toán ...................................................................................................... 27
1.

Khảo sát ........................................................................................................................ 27

2.

Phương pháp thu thập dữ liệu ....................................................................................... 28

II.

Phân tích hệ thống ...................................................................................................... 28
1.

Mơ tả bài tốn ............................................................................................................... 28

2.


Biều đồ thuần tự ........................................................................................................... 29

3.

Biều đồ hoạt động ......................................................................................................... 35

4.

Biều đồ trang thái ......................................................................................................... 40

III.

Mô tả hệ thống............................................................................................................. 44

1.

Hoạt động website ........................................................................................................ 44

2.

Yêu cầu về chức năng ................................................................................................... 45

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

2


1
3.


Yêu cầu về phi chức năng............................................................................................. 45

4.

Bảng Demo các yêu cầu chức năng .............................................................................. 46

5.

Mơ hình dữ liệu ............................................................................................................ 47

Chương III: KẾT QUẢ VÀ CÀI ĐẶT WEBSITE .............................................................. 50
I.

Giao diện website ........................................................................................................ 50

II.

Giao diện người dùng ................................................................................................. 52

III.

Giao diện quản trị viên............................................................................................... 54

KẾT LUẬN ............................................................................................................................. 56
I.

Kết quả đạt được ........................................................................................................ 56

II.


Hạn chế của đề tài....................................................................................................... 56

III.

Hướng phát triển ........................................................................................................ 56

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

3


1

DANH MỤC HÌNH ẢNH
Hình 1: Các loại biến ................................................................................................................ 20
Hình 2: Các loại tốn tử ............................................................................................................ 20
Hình 3: Hàm ............................................................................................................................. 21
Hình 4: Ví dụ về Virtual DOM ................................................................................................. 22
Hình 5: Cơ chế one-way data binding ...................................................................................... 22
Hình 6: Các loại cơ sở dữ liệu NoSQL ..................................................................................... 24
Hình 7: Phân biệt cơ sở dữ liệu SQL và NoSQL...................................................................... 25
Hình 8: Sơ đồ Use-case ............................................................................................................ 28
Hình 9: Sơ đồ thuần tự - Đăng nhập ......................................................................................... 30
Hình 10: Sơ đồ thuần tự - Đăng ký........................................................................................... 31
Hình 11: Sơ đồ thuần tự - Tìm kiếm......................................................................................... 32
Hình 12: Sơ đồ thuần tự - Chỉnh sửa thơng tin......................................................................... 32
Hình 13: Sơ đồ thuần tự - Đặt hàng và thanh tốn ................................................................... 33
Hình 14: Sơ đồ thuần tự - Quản lý người dùng ........................................................................ 34
Hình 15: Sơ đồ thuần tự - Thống kê ......................................................................................... 34
Hình 16: Sơ đồ hoạt động - Đăng nhập .................................................................................... 35

Hình 17: Sơ đồ hoạt động - Đăng ký ........................................................................................ 36
Hình 18: Sơ đồ hoạt động - Tìm kiếm ...................................................................................... 37
Hình 19: Sơ đồ hoạt động - Chỉnh sửa thơng tin ...................................................................... 37
Hình 20: Sơ đồ hoạt động - Đặt hàng và thanh tốn ................................................................ 38
Hình 21: Sơ đồ hoạt động - Quản lý người dùng ..................................................................... 39
Hình 22: Sơ đồ hoạt động - Thống kê ...................................................................................... 40
Hình 23: Sơ đồ trạng thái - Đăng nhập ..................................................................................... 41
Hình 24: Sơ đồ trạng thái - Đăng ký ........................................................................................ 42
Hình 25: Sơ đồ trạng thái - Tìm kiếm ...................................................................................... 43
Hình 26: Sơ đồ trạng thái - Chỉnh sửa thơng tin....................................................................... 44
Hình 27: Sơ đồ trạng thái - Quản lý người dùng ...................................................................... 44
Hình 28: Sơ đồ lớp ................................................................................................................... 47
Hình 29: Firebase - bảng sản phẩm .......................................................................................... 48
Hình 30: Firebase - bảng người dùng ....................................................................................... 48
Hình 31: Firebase - Bảng chi nhánh, tọa độ ............................................................................. 49
Hình 32: Giao diện - Trang chủ ................................................................................................ 50
Hình 33: Giao diện - Về chúng tơi ........................................................................................... 50
Hình 34: Giao diện - Tin tức .................................................................................................... 51
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

4


1
Hình 35: Giao diện - Món u thích ......................................................................................... 51
Hình 36: Giao diện - Giỏ hàng ................................................................................................. 51
Hình 37: Giao diện - Đăng ký .................................................................................................. 52
Hình 38: Giao diện - Đăng nhập ............................................................................................... 52
Hình 39: Giao diện - Sản phẩm ................................................................................................ 52
Hình 40: Giao diện - Chi nhánh................................................................................................ 53

Hình 41: Giao diện - Chọn đồ đi kèm ...................................................................................... 53
Hình 42: Giao diện - Chức năng call now ................................................................................ 54
Hình 43: Giao diện - Quản lý sản phẩm ................................................................................... 54
Hình 44: Giao diện - Quản lý người dùng ................................................................................ 54
Hình 45: Giao diện - Quản lý chi nhánh ................................................................................... 55

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

5


1

LỜI CẢM ƠN
Em chân thành cảm ơn các thầy cô trong khoa Tin, trường Đại học Sư phạm,
Đại học Đà Nẵng đã tận tình truyền đạt những kiến thức quý báu suốt những
năm đại học vừa qua, để hôm nay em có thể có đầy đủ kiến thức để thực hiện đề
tài khóa luận này.
Mặc dù đã cố gắng hồn thành đồ án trong phạm vi và khả năng cho phép
nhưng chắc chắn sẽ khơng tránh khỏi những thiếu sót. Em rất mong nhận được
sự thơng cảm, góp ý và tận tình chỉ bảo của q Thầy Cơ và các bạn.
Đặc biệt, em xin chân thành cảm ơn TS. Nguyễn Trần Quốc Vinh, đã tận tình
giúp đỡ, tháo gỡ những khó khăn, và đưa ra những lời khuyên đúng đắn, giúp
em có thể hồn thành tốt những cơng việc được giao và bổ sung thêm nhiều kiến
thức kiến thức.
Xin trân trọng cảm ơn! 

Đà Nẵng, ngày … tháng 4 năm 2021

Sinh viên thực hiện

Lê Nho Thắng

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

6


1

LỜI CAM ĐOAN
Tôi xin cam đoan:
1. Những nội dung trong báo cáo này là do tôi thực hiện dưới sự hướng dẫn
trực tiếp của GVHD TS. Nguyễn Trần Quốc Vinh
2. Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng tên tác
giả, tên cơng trình, thời gian, địa điểm công bố.
3. Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tơi xin
chịu hồn tồn trách nhiệm.

Sinh viên thực hiện,

Lê Nho Thắng

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

7


1

NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN

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

Đà Nẵng, ngày tháng năm 2021
Cán bộ hướng dẫn

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

8


1


NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………
…………………………………………………………………………………………………

Đà Nẵng, ngày tháng năm 2021
Hội đồng phản biện

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

9


1


MỞ ĐẦU
I. Lý do chọn đề tài
Theo mọi người biết thì Highland Coffee hiện đang là một trong những quán Cafes
đang rất nổi tiếng ở Việt Nam. Do đó việc cạnh tranh trong mảng dịch vụ, giải trí cũng
trở nên gắt gao hơn, chuyên nghiệp hơn. Qua đó thúc đẩy cách làm việc của con
người, sử dụng nhiều trí óc, tiện ích, mơ hình kinh doanh trở mở rộng, phát triển hơn.
Bạn đang kinh doanh trong lĩnh vực nào đó và muốn phát triển nó đồng nghĩa với
việc quản lý nó trở nên càng ngày càng khó khăn, tốn nhiều cơng sức. Việc quản lý nó
trên mạng internet, qua một phần mềm quản lý chuyên nghiệp đang là sự lựa chọn
hàng đầu cho công việc kinh doanh đang là xu hướng chung của thế giới. Từ đó
internet, những ứng dụng quản lý trở thành một lựa chọn tối ưu và thiết yếu trong việc
kinh doanh là dễ hiểu vì nó có những ưu điểm siêu việt mà cách quản lý qua sổ sách và
giấy tờ khơng thể có được. Và những cửa hàng coffee cũng khơng nằm ngồi vịng
xốy, dịng chảy của sự hiên đại hóa, văn minh hóa, yêu cầu khắc khe, khó tính trong
kinh doanh. Khi những cửa hàng coffee mọc lên hàng ngày, đủ thể loại, đủ phong
cách. Một người mở cửa hàng coffee khơng cịn theo định nghĩa “một chủ một cửa
hàng” nữa, mà thay vào đó là một người mở một chuỗi cửa hàng coffee, có thể ở một
thành phố, một đất nước hay nằm rải rác trên toàn thế giới. Câu hỏi đặt ra là người chủ
sẽ quản lý nó như thế nào, và tốn bao nhiêu tiền của để quản lý nó một cách tối ưu
nhất?
Website Highland Coffee là câu trả lời hoàn hảo cho việc này. Những ưu điểm phần
mềm này là vơ cùng tiện lợi và góp phần trong cơng việc kinh doanh, cạnh tranh kinh
doanh với những chuỗi cửa hàng khác. Tại sao lại có thể nói nó góp phần quan trọng
trong việc cạnh tranh với những cửa hàng khác:
Lý do thứ nhất: (Đây cũng coi là lý do vô cùng quan trọng trong của phần mềm
này mang lại) chúng ta chỉ cần một phép tính đơn giản thơi, bạn phải tốn bao nhiêu
tiền trong việc thuê nhiều nhân viên, quản lý, đi lại giữa những cửa hàng của bạn?
Trong khi có phần mềm này bạn có thể làm cơng việc quản lý bất cứ nơi đâu thông
qua mạng internet, tiết kiệm thời gian. Những ly coffee, thức uống của bạn được định

giá bằng hao phí sức lao động, mặt bằng, thuế, giá của nguồn hàng. Ở đây là hao phí
sức lao động, khi có phần mềm này bạn có thể tối ưu nhất số lượng nhân viên trong
chuỗi cửa hàng của bạn qua đó hạ giá thành thức uống của bạn xuống mức thấp nhất
nhưng vẫn đem lại nguồn lợi nhuận, gia tăng mức độ cạnh tranh, đem lại lợi thế giá
thành.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

10


1

Lý do thứ hai: Sự tiện lợi. Khi bạn không tốn thời gian công sức trong việc di
chuyển qua lại giữa những cửa hàng của bạn để kiểm tra, quản lý đây chính là tiết
kiệm cơng sức. Và bạn có thể dành những cơng sức, tâm trí trong việc đó để phát triển
thêm nhiều cửa hàng, hay làm mới , phát triển cửa hàng của bạn.
Lý do thứ ba: Đó chính là độ chính xác, quản lý nguồn tiền, doanh thu do nhiều
nguyên nhân chủ quan hay khách quan, ở đây chính là sai lầm của con người. Con
người khơng có ai hồn hảo, có thể duy trì sự tập trung, chính xác trong một thời gian,
thời điểm nào đó, nhưng phần mềm này có thể giải quyết cơng việc này một cũng dễ
dàng và lâu dài.
Highland Coffee, cái tên rất thương hiệu trên đất nước Việt Nam hay thậm chí có
thể vươn ra ngồi tầm thế giới. Đây có lẽ là nơi được rất nhiều bạn trẻ ngày nay ưa
thích. Từ tình u với Việt Nam và niềm đam mê cà phê, năm 1999, thương hiệu
Highlands Coffee ra đời với khát vọng nâng tầm di sản cà phê lâu đời của Việt Nam
và lan rộng tinh thần tự hào, kết nối hài hoà giữa truyền thống với hiện đại..
Qua một chặng đường dài, Highland đã không ngừng mang đến những sản phẩm cà
phê thơm ngon, sánh đượm trong không gian thoải mái và lịch sự. Những ly cà phê
của chúng tôi không chỉ đơn thuần là thức uống quen thuộc mà cịn mang trên mình
một sứ mệnh văn hóa phản ánh một phần nếp sống hiện đại của người Việt Nam.

II. Mục tiêu.
1. Mục tiêu chung.
Đề tài được xây dựng trên mục đích tạo ra một website mà ở đó các khách hàng ở
Việt Nam có nhu cầu uống cà phê hay là tiết kiệm thời gian khi đặt cà phê trang
website một cách tiện lợi.
2. Mục tiêu đề tài
Để thực hiện được mục tiêu chung của để tài, các mục tiêu của đề tài cần đạt được:
- Xây dựng thành công hệ thống đăng ký, đăng nhập.
- Xem sản phẩm, thêm sản phẩm vào giỏ hàng.
- Xây dựng hệ thống đăng ký, đăng nhập, phân quyền dành cho quản trị viên và quản
lý.
- Xây dựng hệ thống thực đơn đa dạng theo nhiều thể loại.
- Xây dựng hệ thống thực đơn đúng theo yêu cầu cũng như những sản phẩm được ưa
thích.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

11


1

- Cập nhật những tin tức mới nhất về trang web, sự kiện, khuyến mãi.
- Mua hàng trực tiếp trên website.
- Có thể chọn thêm các loại thạch đi kèm, kích cỡ sản phẩm theo ý muốn, …
- Áp dụng bản đồ vào website
- Chức năng gọi điện thoại tự động
3. Kết quả dự kiến
Sau khi thực hiện đề tài thì cần đạt được một số chức năng sau:
- Đăng ký, đăng nhập tài khoản.
- Quản lý tài khoản: tài khoản người dùng

- Quản lý sản phẩm
- Xem sản phẩm, thêm sản phẩm vào giỏ hàng
- Đặt hàng trực tiếp trên website
- Có thể chọn thêm các loại thạch đi kèm, kích cỡ sản phẩm theo ý muốn, …
- Phân quyền quản trị viên và khách hàng,…
- Áp dụng bản đồ để hiện thị toàn bộ chi nhánh của Highland Coffee trên khu vực
Thành phố Đà Nẵng
- Gọi điện thoại trực tiếp trên nền tảng moblie và website
III. Đối tượng và phạm vi đề tài.
1. Đối tượng nghiên cứu.
Đối tượng nghiên cứu bao gồm:
• Tất cả những con người trong nước tùy theo những cửa hàng đang được kinh doanh
và phát triển tại đó.
• Sở thích của từng người.
• Các nơi cung cấp cà phê, thực phẩm sạch.
2. Phạm vi đề tài.
• Các đối tượng có nhu cầu uống cà phê, ăn bánh, hay thậm chí là tìm một nơi để thư
giản.
• Ứng dụng được sử dụng tại các cửa hàng muốn bán các loại đồ ăn, thức uống thông
qua website
3. Phương pháp nghiên cứu
• Phương pháp tham khảo tài liệu: gồm có tham khảo các tài liệu chuyên ngành, các
tài liệu về lập trình web, tham khảo các báo cáo và các trang thơng tin trên mạng
Internet.
• Phương pháp tham khảo ý kiến chuyên gia: trong quá trình thực hiện, em sẽ tham
khảo ý kiến của giáo viên hướng dẫn, các thầy cô trong khoa.

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

12



1

IV. Tiêu chí của đề tài.
Sản phẩm là website Highland với đầy đủ các chức năng giành cho các đối tượng
người dùng và quản trị viên.
Một số tiêu chí về chức năng:
▪ Người dùng
• Giao diện website đơn giản, dễ sử dụng và có tính thẩm mỹ cao.
• Giao diện thiết kế đảm bảo nội dung hiển thị chính xác và đầy đủ các thơng tin.
• Người dùng có thể nhìn thấy tồn bộ sản phẩm được chia theo đúng với từng thể
loại của chúng.
• Cung cấp thơng tin về thương hiệu Highland, các thơng tin đảm bảo độ chính xác và
được cập nhật liên tục.
• Có thể mua hàng trực tiếp trên website.
• Người dùng cần phải đăng ký tài khoản sau đó có thể đăng nhập và tiến hành mua
hàng.
• Có thể nhìn thấy các chi nhánh của Highland trên bản đồ
• Có thể gọi điện thoại trực tiếp trên website hoặc điện thoại
▪ Quản trị viên:
• Giao diện đơn giản, cụ thể, rõ ràng, đầy đủ các thơng tin
• Cho phép xem thơng tin đăng ký của người dùng.
• Cập nhật các thực đơn theo từng thể loại.
• Cập nhật thơng tin về các thơng tin sự kiện, khuyến mãi.
• Quản lý hệ thống các địa điểm khác trên toàn nước.

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

13



1

Chương I: TỔNG QUAN VỀ CÔNG NGHỆ
I. Tổng quan về HTML5/CSS3/JS
1. Sơ lược về HTML5
1.1. Tổng quan về HTML
a. Định nghĩa
HTML (tiếng Anh, viết tắt cho 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 với các mẩu thơng tin được trình bày trên World Wide Web.
HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng
trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một
chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản
chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã
thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp với phiên
bản HTML5 hứa hẹn mang lại diện mạo mới cho Web.
HTML khơng phải là ngơn ngữ lập trình, nó là ngơn ngữ trình bày.
b. Cấu trúc
Cấu trúc cở bản và các câu lệnh của HTML
" /><html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
</body>
</html>
Các thẻ cơ bản hay sữ dụng trong HTML
<div> : Xác định một phân chia khu vực hay một vùng trong văn bản.

tới

: Xác định tiêu đề html.
<img >: Hiển thị một image.
<input >: Xác định một điều khiển nhập.
<label>: Tạo một nhãn cho thành phần input.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

14


1

<button>: Xác định một button.
<hr >: Tạo một đường ngang.
<i>: Hiển thị chữ in nghiên.
<li>: Xác định danh sách item.
<ul>: Định nghĩa một danh sách khơng có thứ tự.
<ol>: Định nghĩa một danh sách có thứ tự.
<a>: Định nghĩa một đường liên kết link tới trang khác.
<b>: Định nghĩa một từ được in đậm.
<u>: Định nghĩa một từ được gạch chân.

: Thẻ xuống dòng.
<span>: Định nghĩa một khối văn bản.
Form: Tag <form> được dùng để tạo một "biểu mẫu" HTML cho người dùng,được
dùng để truyền dữ liệu lên máy chủ.Tag <form> không nên dùng để điều khiển layout.
Cấu trúc: Trong <form> bắt buộc phải có tham số action.

<form action=""></form> một <form> có thể chứa thành phần <input>, <select>,
<texarea>, <fieldset>, <legend>, <label>, có thể chứa các tag khác.
Vídụ:
<form action="#">
<ul>
<li>Họ tên: <input type="text" size="30" /></li>
<li>Email: <input type="text" size="30" /></li>
<li>Ngày sinh: <input type="text" size="10" /></li>
</ul>

<input type="submit" value="Gửi" />

</form>
+ Frame: <frame > định nghĩa một cửa sổ riêng (khung - frame) trong
một <frameset>.
Cấu trúc: tag <frame> đươc viết bên trong thành phần <frameset>
<html>
<frameset>
<frame src = "frame.html"></frame>
</frameset >
</html>
+ Table: Tag <table> dùng để tạo một bảng trong html
<tr> xác định hàng của table.
<th> xác định phần tử tiêu đề của table.
<td> xác định phần tử nội dung của table.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

15


1

1.2
Tổng quan về HTML5
HTML ngày nay được gọi là HTML4, được xuất bản lần đầu tiên vào năm 1997.
Đến khoảng năm 2000, ngôn ngữ đánh dấu song song được gọi là XHTML bắt đầu
được phát triển và được sử dụng trong nhiều năm qua. Mặc dù XHTML và HTML4
khá giống nhau, tuy nhiên XHTML tuân thủ các chuẩn nghiêm ngặt hơn.
HTML4 giới hạn chức năng. Nó phải được mở rộng thông qua các plugin như
Flash để cung cấp các văn bản và hình ảnh đơn giản hơn. Với tất cả plugin sẽ trở nên
khó khăn để duy trì các chuẩn phù hợp. Giải pháp lý tưởng nhất là mỗi trình duyệt
hiển thị các trang web theo cùng một cách để mang lại trải nghiệm tương tự cho người
dùng
HTML4 hoạt động khá tốt, nhưng vấn đề ở đây là nó giới hạn chức năng. Nhóm
phát triển HTML5 đã bổ sung thêm các tính năng cao cấp trong phiên bản HTML tiếp
theo, tức là HTML5 phải được xây dựng dựa trên các nguyên tắc:
- Ít phụ thuộc vào plugin chức năng.
- Script nên được thay thế bằng markup bất cứ khi nào có thể.
- Tính độc lập của thiết bị (nghĩa là có sẵn trên tất cả các thiết bị và cung cấp trải
nghiệm kết thúc tương tự).
- Quá trình phát triển cơng cộng để mọi người có thể nhìn thấy những gì đang diễn ra.
HTML5 đã bổ sung thêm rất nhiều các thẻ đánh dấu (markup) mới:
Các thẻ <header> và <footer> giúp bạn tách các phần trên và dưới của các block nội
dung. Để có thể sử dụng nhiều lần trên một trang duy nhất.
Thẻ <article> giúp xác định một phần cụ thể về nội dung, ví dụ, một bài blog hoặc
một bình luận của độc giả.
Thẻ <nav> để xác định những phần nào được coi là khối điều hướng.
Thẻ <section> cho phép bạn xác định một phần nội dung nào đó; tương tự như các
thẻ <div> hiện nay.
Các thẻ <audio> và <video> để đánh dấu những nội dung bao gồm âm thanh hoặc
video.
Thẻ <canvas> cho phép bạn vẽ đồ họa sử dụng một ngôn ngữ kịch bản riêng biệt.

Thẻ <embed> dùng để nhúng các nội dung hoặc các ứng dụng bên ngoài vào trang
web.
HTML5 cũng bỏ đi một số thẻ: <acronym>, <applet>, <font>, <frame>,
<frameset>, <noframes>, và một số thẻ khác.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

16


1

1.3 Sự khác biệt giữa HTML và HTML5
SVG, canvas và những hình dạng vector đều được hỗ trợ bởi HTML5, khi HTML
nếu muốn sử dụng hình vector chỉ có thể dùng nó trong một cơng nghệ khác như,
Flash, VML và silver light.
HTML5 sử dụng web SQL databases, application cache để lưu dữ liệu tạm, trong
khi đó, HTML chỉ có cache của trình duyệt được dùng cho mục đích này.
Một khác biệt nữa giữa HTML và HTML5 đáng nhắc đến là HTML khơng cho
phép JavaScript chạy trong web browser (thay vì vậy nó chạy trong interface thread
của browser), trong khi đó HTML5 hỗ trợ hoàn toàn cho JavaScript để chạy nền (nhờ
vào JS web worker API của HTML5).
HTML5 không dựa trên SGML, cho phép nó tăng luật parsing, có thể tương thích
mạnh mẽ hơn
Trong HTML5, inline MathML và SVG có thể được dùng trong văn bản nơi mà
không được hỗ trợ trong HTML.
Một số elements lỗi thời đã bị loại bỏ hoàn toàn là: isindex, noframes, acronym,
applet, basefont, dir, font, frame, frameset, big, center, strike, tt.
HTML5 hỗ trợ nhiều loại điều khiển form, ví dụ: ngày giờ, email, số lượng, khoảng,
số điện thoại, URL, tìm kiếm, vâng vâng
Có nhiều element được giới thiệu trong HTML. Một vài trong số chúng là quan

trọng nhất: summary, time, aside, audio, command, data, datalist, details, embed, wbr,
figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter,
nav, output, progress, rp, rt, ruby, section, source, track.
2. Sơ lược về CSS3
CSS là chưc viết tắt của cụm từ tiếng anh (Cascading Style Sheet), CSS được tổ
chức Word Wide Web (W3C) giới thiệu vào năm 1996. CSS chỉ đơn thuần là một file
có phần mở rộng là .css, trong file này chứa những câu lệnh CSS, mỗi câu lệnh CSS sẽ
định dạng một thành phần nhật định của tài liệu HTML như màu sắc, font chữ…
CSS tách riêng phần định dạng ra khỏi nội dung trang web giúp người thiết kế kiểm
sốt tồn bộ giao diện nhanh nhất và hiệu quả nhất, tiết kiệm được nhiều thời gian
trong chỉnh sửa, đặc biệt là các dự án lớn được kết cấu từ nhiều trang HTML.
Do được tách rời khỏi nội dung của trang web, nên các mã HTML sẽ gọn gàng hơn,
giúp bạn thuận tiện hơn trong việc chỉnh sửa giao diện. Kích thước của file .html cũng
được giảm đáng kể. Hơn thế nữa sẽ được trình duyệt tải một lần và dùng nhiều lần
(cache), do đó giúp trang web được load nhanh hơn.
CSS có nhiều kiểu nhưng gom lại thì sẽ có các thể loại thơng dụng như sau:
-

Background : CSS tùy chỉnh hình nền.

-

Text : CSS tùy chỉnh cách hiển thị text.

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

17


1

-

Font : CSS tùy chỉnh kích thước, kiểu chữ.

-

Link : CSS tùy chỉnh link.

-

List CSS tùy chỉnh danh sách.

-

Table : CSS tùy chỉnh bảng.

-

Box model : Mơ hình box model kết hợp padding, margin, border.

-

…

Chúng ta có 3 cách để khai báo CSS trong tài liệu HTML là:
-

CSS cục bộ : viết mã CSS trực tiếp trong thẻ HTML, cụ thể là trong thuộc
tính style, CSS cục bộ chỉ có tác dụng trong thẻ HTML được khai báo.

Đoạn văn này sẽ bị ảnh
hưởng khi khai báo CSS cục bộ

-

CSS nội tuyến là phần mã CSS được khai báo trong cặp thẻ <style> và đặt
trong phần <head> của tài liệu HTML. Khi sử dụng CSS nội tuyến nó sẽ có
tác dụng lên file html được khai báo nhưng không ảnh hưởng đến các file
khác trong cùng một website.
<style>
h1,h2,h3 {font-size: 14px;}
p {color: blue;}
</style>

-

CSS ngoại tuyến:
• Đây là cách khai báo CSS được sử dụng nhiều nhất trong thực tế, và
cách khai báo này mới tận dụng được hết thế mạnh mà CSS mang lại,
tách biệt hoàn toàn khoải tài liệu HTML, người thiết kế chỉ cần viết một
file CSS duy nhất mà sử dụng nhiều lần trong ứng dụng của họ.
• Nó có phạm vi ảnh hưởng tồn bộ đến website chứ khơng chỉ có một file
.html riêng biệt. Do đó mỗi khi muốn thay đổi thuộc tính hiển thị của
một thành phần nào đó trong website thì chỉ cần chỉnh sửa file CSS này
thay vì chỉnh sửa tất cả các file .html trong ứng dụng. Đến đây chúng ta
thấy được sự cần thiết và hiệu quả mà CSS mang lai.

Để khai báo CSS ngoại tuyến, ta chỉ cần tạo ra một file style.css chẳng hạn, sau đó
chèn đoạn code sau trong phần <head></head> của trang web.

screen” >
Thứ tự ưu tiên trong Css: Css cục bộ >> Css nội tuyến >> Css ngoại tuyến >> Css
mặc định của trình duyệt.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

18


1

Chúng ta cần phân biệt rõ giữa CSS và Style trong HTML. Nếu như Style được
dùng để định dạng nội dung trong HTML thì CSS là một file chứa Style.
3. Sơ lược về Js (JavaScript)
JavaScript (viết tắt là "js") là một ngơn ngữ lập trình mang đầy đủ tính năng của
một ngơn ngữ lập trình động mà khi nó được áp dụng vào một tài liệu HTML, nó có thể
đem lại khả năng tương tác động trên các trang web. Cha đẻ của ngôn ngữ này
là Brendan Eich, đồng sáng lập dự án Mozilla, quỹ Mozilla, và tập đoàn Mozilla.
Bản thân Javascript là một ngôn ngữ linh động. Các nhà phát triển đã viết ra một số
lượng lớn các công cụ thuộc top của core Javascript, mở ra một lượng lớn tính năng bổ
sung với ít nỗ lực nhất. Nó bao gồm:
• Giao diện lập trình ứng dụng trên trình duyệt (API) — Các API được xây dựng bên
trong các trình duyệt web, cung cấp tính năng như tạo HTML động, cài đặt CSS, thu
tập và điều khiển video trực tiếp từ webcam của người dùng hoặc sinh ra đồ dọa 3D
và các mẫu audio.
• Các API bên thứ ba cho phép nhà phát triển kết hợp tính năng trong website của họ
từ người cung cấp nội dung khác chẳng hạn như Twitter hay Facebook.
• Từ các framework và thư viện bên thứ ba bạn có thể áp dụng tới tài liệu HTML của
bạn, cho phép bạn nhanh chóng xây dựng được các trang web và các ứng dụng.
Một vài khái niệm cơ bản :
Biến:

Biến là các thùng chứa các giá trị bên trong. Bạn có thể bắt đầu khai báo một biến với
từ khoá var theo sau bởi tên biến.

Sau khi khai báo biến, bạn có thể gán giá trị cho nó:

Bạn có thể thực hiện cả hai phép tốn này trong cùng một dịng nếu muốn:

Bạn có thể lấy ra giá trị chỉ bằng cách gọi tên biến:

Sau khi gán giá trị cho biến, bạn có thể thay đổi giá trị của nó:

+ Mỗi biến có kiểu dữ liệu khác nhau:
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

19


1

Hình 1: Các loại biến

Tốn tử: là ký hiệu tốn học mà tạo ra kết quả dựa trên hai giá trị (hoặc biến).

Hình 2: Các loại tốn tử

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

20

1

Hàm: là một cách để đóng gói tính năng mà bạn muốn tái sử dụng. Khi cần thực thi
thủ tục nào đó, bạn chỉ cần gọi hàm, với tên hàm là đủ, thay vì phải viết lại cả đoạn
code loằng ngoằng.

Hình 3: Hàm

Sự kiện
• Tương tác thực trên website cần sự kiện. Đây là những cấu trúc mã nguồn lắng nghe
những thứ xảy ra trong trình duyệt và chạy mã tương ứng. Ví dụ gần gũi nhất là sự
kiện click, sẽ nổ ra trên trình duyệt khi bạn bấm vào gì đó bằng con chuột của mình.
Để dễ hiểu, nhập đoạn code sau vào console của bạn, rồi click vào trang đang mở:

• Có nhiều cách để gắn sự kiện cho một phần tử. Ở đây ta chọn phần tử HTML, cài đặt
thuộc tính xử lý onclick cho nó thành hàm không tên, mang theo đoạn code mà ta
muốn sự kiện click event chạy.
• Hãy nhớ rằng

tương tự với

Chỉ ngắn hơn thôi.

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

21


1

II. React Js
React (hay ReactJs, React.js) là một thư viện javascript mã nguồn mở để xây dựng
các thành phần giao diện có thể tái sử dụng.
React khơng chỉ hoạt động trên phía client, mà cịn được render trên server và có thể
kết nối với nhau. React so sánh sự thay đổi giữa các giá trị của lần render này với lần
render trước và cập nhật ít thay đổi nhất trên DOM.
Một số khái niệm cơ bản trong reactjs:
➢ Virtual DOM:
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có
trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree
cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. React JS sử
dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.Virtual DOM là một object
Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu
thay đổi nó sẽ tính tốn sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hố
việc re-render DOM tree thật.

Hình 4: Ví dụ về Virtual DOM

React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được
truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ
dàng kiểm soát cũng như sửa lỗi.

Hình 5: Cơ chế one-way data binding
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

22


1

➢ JSX:
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm:
Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript.
Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết
trực tiếp bằng Javascript. Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu
statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++. Vì thế
các lỗi sẽ được phát hiện ngay trong q trình biên dịch. Ngồi ra, nó cũng cung cấp
tính năng gỡ lỗi khi biên dịch rất tốt. Easier: Dễ dàng hơn. JSX kế thừa dựa trên
Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascripts có thể sử dụng
➢ Components:
React được xây dựng xung quanh các component, chứ không dùng template như các
framework khác. Trong React, chúng ta xây dựng trang web sử dụng những thành phần
(component) nhỏ. Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các
trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành
phần khác. Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và
React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái. Mọi thứ
React đều là component. Chúng giúp bảo trì mã code khi làm việc với các dự án lớn.
Một react component đơn giản chỉ cần một method render. Có rất nhiều methods khả
dụng khác, nhưng render là method chủ đạo
➢ Props và State :
Props: giúp các component tương tác với nhau, component nhận input gọi là props,
và trả thuộc tính mơ tả những gì component con sẽ render. Prop là bất biến.
State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời
render lại để cập nhật UI.
III. Cơ sở dữ liệu NoSQL và Firebase Firestore
1. Cơ sở dữ liệu NoSQL
Cơ sở dữ liệu NoSQL (tên gốc là "Non SQL" (phi SQL) hoặc "non relational" (phi
quan hệ))[1] cung cấp một cơ chế để lưu trữ và truy xuất dữ liệu được mô hình hóa
khác với các quan hệ bảng được sử dụng trong các cơ sở dữ liệu kiểu quan hệ.
1.1 Phân loại các cơ sở dữ liệu NoSQL

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

23


1

Hình 6: Các loại cơ sở dữ liệu NoSQL

a. Xử lý dữ liệu quan hệ
Do hầu hết các cơ sở dữ liệu NoSQL thiếu khả năng kết nối trong các truy vấn, lược
đồ cơ sở dữ liệu nói chung cần phải được thiết kế khác nhau. Có ba kỹ thuật chính để
xử lý dữ liệu quan hệ trong một cơ sở dữ liệu NoSQL.
b. Đa truy vấn :
Thay vì lấy tất cả các dữ liệu với một truy vấn, ta thường thực hiện nhiều truy vấn
khác nhau để có được các dữ liệu mong muốn. Các truy vấn NoSQL thường nhanh
hơn so với truy vấn SQL truyền thống vì vậy chi phí của việc phải thực hiện các truy
vấn bổ sung có thể chấp nhận được. Nếu số lượng truy vấn quá nhiều là cần thiết, một
trong hai phương pháp khác sẽ thích hợp hơn.
c. Dữ liệu hóa bộ nhớ đệm/ sao chép/ khơng-chuẩn hóa
Thay vì chỉ lưu giữ các từ khóa ngoại lai, ta thường lưu trữ các giá trị thực tế ngoại lai
cùng với dữ liệu của mô hình.
1.2 Phân biệt cơ sở dữ liệu NoSQL và cơ sở dữ liệu SQL

SVTH: Lê Nho Thắng – Lớp: 17CNTTC

24

1

Hình 7: Phân biệt cơ sở dữ liệu SQL và NoSQL

2. Firebase Firestore.
2.1 Giới Thiệu
Cloud Firestore là một Database linh hoạt và dễ mở rộng cho mobile, web và
server được phát triển từ Firebase and Google Cloud Platform. Cũng giống như
Firebase realtime database Cloud Firestore giúp cho việc đồng bộ dữ liệu giữa các ứng
dụng phía client một các nhanh chóng (Realtime) và hộ trợ lưu offline data trong ứng
dụng của bạn.
Cloud Firestore là một cloud-hosted, NoSQL database mà các ứng dụng phía
client có thể trực tiếp truy cập thơng qua native SDKs. Nó lưu dữ liệu theo mơ hình dữ
liệu NoSQL. Dữ liệu được lưu trữ trong các file tài liệu chứa các trường được ánh xạ
vào các giá trị. Các file tài liệu này được lưu trữ trong các tập hợp chúng có thể sử
dụng nó để tổ chức dữ liệu và truy vấn dữ liệu. Cloud Firestore hỗ trợ rất nhiều kiểu
dữ liệu từ đơn giản như String, Integer hay những kiểu dữ liệu phức tạp như các nested
object.
2.2 Chức năng
Tính linh hoạt: Cloud Firestore hỗ trợ các cấu trúc dữ liệu linh hoạt, phân cấp
dữ liệu. Lưu trữ dữ liệu của bạn trong các document, được tổ chức thành các
collection. Các document có thể chứa các đối tượng phức tạp.
Truy vấn tượng trưng: Bạn có thể sử dụng các truy vấn để truy xuất các
document riêng lẻ hoặc để truy xuất tất cả các document trong collection khớp với các
tham số truy vấn của bạn. Các truy vấn của bạn có thể bao gồm nhiều bộ lọc, kết hợp
giữa bộ lọc và sắp xếp.
SVTH: Lê Nho Thắng – Lớp: 17CNTTC

25