báo cáo bài tập lớn môn học scada nâng cao đề tài nhà thông minh

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.57 MB, 59 trang )

BỘ GIAO THÔNG VẬN TẢI
ĐẠI HỌC GIAO THÔNG VẬN TẢI THÀNH PHỐ HỒ CHÍ MINH
KHOA ĐIỆN – ĐIỆN TỬ VIỄN THÔNG

BÁO CÁO BÀI TẬP LỚN MÔN HỌC SCADA NÂNG CAO
ĐỀ TÀI: NHÀ THƠNG MINH
GVHD: Th.S Trần Quang Vinh
Nhóm thực hiện: Nhóm 7

0

download by :

MỤC LỤC
LỜI MỞ ĐẦU............................................................................................................................ 2
PHẦN 1: GIỚI THIỆU......................................................................................................... 3
PHẦN 2: WEB SCADA........................................................................................................ 3
I.ĐẶT VẤN ĐỀ......................................................................................................................... 3
II.TỔNG QUAN VỀ MẠNG INTERNET.................................................................. 4
2.1 Giới thiệu.............................................................................................................................. 4
2.2 Hoạt động của mạng internet..................................................................................... 4
2.3 Giao thức TCP/ IP............................................................................................................ 5
2.4 Công nghệ Ethernet........................................................................................................ 8
III. WEB SERVER VÀ CƠ SỞ DỮ LIỆU.................................................................. 9
3.1 Các ngôn ngữ lập trình cho Website....................................................................... 9
3.2 Khái qt về ngơn ngữ HTML.................................................................................. 10
3.2.1 HTML là gì? Giải thích rõ về ngơn ngữ Markup Hypertext...................10
3.2.2 Lịch sử của HTML...................................................................................................... 10
3.2.3 HTML hoạt động như thế nào?............................................................................. 10
3.2.4 Ưu điểm và nhược điểm của HTML................................................................... 11

3.3 Khái quát về ngôn ngữ CCS....................................................................................... 12
3.3.1 CSS là gì?.......................................................................................................................... 12
3.3.2 Tại sao sử dụng CSS?................................................................................................. 12
3.3.3 Cách nhúng CSS vào website................................................................................. 13
IV. LẬP TRÌNH WEBSITE................................................................................................ 13
4.1 Phần mềm lập trình cho website............................................................................... 13
4.2 Website................................................................................................................................... 18
PHẦN 3: MOBILE APP....................................................................................................... 33
I.TỔNG QUAN VỀ MOBILE APP................................................................................ 33
1. Mobile app là gì?................................................................................................................. 33
2. Những ưu điểm của mobile app................................................................................... 34
II.ỨNG DỤNG MOBILE APP TRONG ĐỒ ÁN MÔN HỌC........................... 34
1.Tạo phần mềm Android với MIT App Inventor 2................................................ 34
2.Giao diện phần mềm........................................................................................................... 35
3.Phần code lập trình của giao diện................................................................................ 35
PHẦN 4: DESKTOP.............................................................................................................. 37
I.TẠO GIAO DIỆN TRÊN MÁY TÍNH TRONG ĐỒ ÁN MÔN HỌC......37
1.Giới thiệu Visual Studio.................................................................................................... 37
2.Giao diện phần mềm........................................................................................................... 38
3.Phần code lập trình của giao diện................................................................................ 39
TÀI LIỆU THAM KHẢO................................................................................................... 52

1

download by :

LỜI MỞ ĐẦU

Với sự bùng nổ mạnh mẽ và ngày càng phát triển không ngừng của thời

đại công nghệ 4.0 cùng với mong muốn một cuộc sống tiện nghi, thoải
mái nhất thì nhà thơng minh là bước tiến của xu hướng trong tương lai.
Nếu sở hữu một ngôi nhà thông minh Smarthome đồng nghĩa với việc sẽ
có trọn bộ các tiện ích thơng minh và hiện đại. Sự tiện nghi của nhà
thơng minh mà nó mang lại đó là các bạn có thể điều khiển các thiết bị
thơng minh thơng qua smartphone hay bằng giọng nói.
Hệ thống điện tử này có thể giao tiếp với người dùng thơng qua bảng
điều khiển điện tử lắp đặt trong nhà, máy tính bảng, ứng dụng trên điện
thoại di động hoặc giao diện web.
Nói một cách đơn giản hơn, nhà thông minh smarthome là các thiết bị
điện trong ngôi nhà được kết nối với nhau về một trung tâm để dễ dàng
cho người dùng kiểm sốt và điều khiển thơng qua điện thoại hay máy
tính ở bất cứ nơi đâu. Các hệ thống điện này có thể chạy một cách tự
động theo lịch hẹn sẵn hoặc theo sự điều khiển của người sử dụng.
Với những kiến thức đã được học, tìm hiểu từ trưởng học và khoa học
công nghệ của cuộc sống hiện đại, nhóm em cũng có mong muốn góp
phần nào sự phát triển xã hội bằng cách học hỏi và đưa ra những sản
phẩm có ích cho cuộc sống. Nhóm em xin giới thiệu sản phẩm: “Hệ
thống ngôi nhà thông minh“.

2

download by :

PHẦN 1: GIỚI THIỆU
Công nghệ, kỹ thuật và các lĩnh vực trí tuệ nhân tạo hay nhà thơng minh ngày
càng phát triển mạnh mẽ. Cùng với sự phủ sóng rộng khắp của mạng internet
đã làm thay đổi thế giới, cũng như đời sống mỗi người chúng ta. Từ điện thoại
thông minh, trí tuệ nhân tạo (AI) đã làm cho cuộc sống mỗi người ngày càng

tiện nghi và nhanh chóng hơn bao giờ hết.
Cùng với sự phát triển đó, ngơi nhà chúng ta đang sống hay các thiết bị mà
chúng ta vẫn thường sử dụng cũng đã trở nên thông minh hơn chứ khơng cịn
là những vật dụng “vơ tri” nữa. Chúng có thể giao tiếp, thực hiện mệnh lệnh và
tối ưu các mong muốn của chúng ta một cách mãnh mẽ… Nhà thơng minh theo
đó cũng sẽ xuất hiện nhiều hơn. Tuy nhiên, khơng phải ai cũng có khả năng
biết tới nó. Nếu đã tìm hiểu về nhà thơng minh, hẳn bạn cũng thấy rằng nhà
thông minh là một sản phẩm của nền cách mạng công nghiệp 4.0. Nhờ ứng
dụng các công nghệ như hồng ngoại, điện thoại thông minh, IoT, cơng nghệ
đám mây…Nhà thơng minh có thể tự động giúp bạn làm những công việc
trong nhà.
PHẦN 2: WEB SCADA
I. ĐẶT VẤN ĐỀ
Với sự phát triển của khoa học kỹ thuật, cơng nghệ thơng tin ngày càng diễn ra
nhanh chóng, kéo theo xu hướng phát triển mới ở tất cả các quốc gia, trong đó có
Việt Nam. Đó là các lĩnh vực ứng dụng công nghệ 4.0 vào trong các lĩnh vực công
nghiệp cũng như trong đời sống. Đồng thời, sự phổ biến của Internet và các thiết bị
di động thông minh đã tạo nên khái niệm mới là IoT (Internet of Things – Internet
vạn vật), do đó vấn đề ứng dụng các thành tựu này vào việc điều khiển các thiết bị
điện trở nên tất yếu, giúp các thiết bị trở nên thơng minh và tính tự động hóa cao,
kèm theo đó việc điều khiển của người dùng trở nên dễ dàng hơn. Xuất phát từ thực
tế này, chúng tôi đã nghiên cứu và lựa chọn đề tài: “Thiết kế hệ thống điều khiển
và giám sát nồng độ khí ở môi trường thông qua Webserver sử dụng board
Arduino và Esp8266” để bước đầu tiếp cận được công nghệ trong thời đại 4.0.
Hệ thống sử dụng tài nguyên của Arduino và Esp8266 được thiết kế chuyên cho
các ứng dụng IoT (Internet of Things) với công suất nhỏ. Với hệ thống này thì việc
giám sát thiết bị trở nên rất dễ dàng, khi mà thông số thời gian hoạt động, cũng như
3

download by :

trạng thái của thiết bị sẽ được đưa lên website để người dùng có thể tương tác một
cách trực quan về hệ thống.
II.TỔNG QUAN VỀ MẠNG INTERNET
2.1 Giới thiệu
Internet là một hệ thống thơng tin tồn cầu có thể được truy cập cơng cộng gồm
các mạng máy tính được liên kết với nhau. Hệ thống này truyền thông tin theo kiểu
nối chuyển gói dữ liệu (packet switching) dựa trên một giao thức liên mạng đã được
chuẩn hóa (giao thức IP). Hệ thống này bao gồm hàng ngàn mạng máy tính nhỏ hơn
của các doanh nghiệp, của các viện nghiên cứu và các trường đại học, của người
dùng cá nhân, và các chính phủ trên tồn cầu. Chúng cung cấp một khối lượng thông
tin và dịch vụ khổng lồ trên internet.
Mạng Internet mang lại rất nhiều tiện ích hữu dụng cho người sử dụng, một trong
các tiện ích phổ thơng của Internet là hệ thống thư điện tử (email), trò chuyện trực
tuyến (chat), máy truy tìm dữ liệu (search engine), các dịch vụ thương mãi và chuyển
ngân, và các dịch vụ về y tế giáo dục như là chữa bệnh từ xa hoặc tổ chức các lớp
học ảo.
Nguồn thông tin khổng lồ kèm theo các dịch vụ tương ứng chính là hệ thống các
trang Web liên kết với nhau và các tài liệu khác trong www (World Wide Web).
Internet là một tập hợp các mạng máy tính kết nối với nhau bằng dây đồng, cáp
quang, v.v..; còn www hay Web là một tập hợp các tài liệu liên kết với nhau bằng các
siêu liên kết (hyperlink) và các địa chỉ URL, và nó có thể được truy nhập bằng cách
sử dụng Internet.
2.2 Hoạt động của mạng Internet
Các Giao Thức (Protocols): là tập các luật mà các máy tính phải tuân theo khi giao
tiếp trên Internet.

4

download by :

Tranmission Control Protocol (TCP): thiết lập kết nối giữa hai máy tính để truyền
tải dữ liệu, chia dữ liệu thành những gói nhỏ và đảm bảo việc truyền nhận dữ liệu.
TCP là giao thức hướng kết nối (connection-oriented protocol).
User Datagram Protocol (UDP): thiết lập kết nối nhanh nhưng không chắc chắn
giữa các máy tính để truyền tải dữ liệu, cung cấp ít dịch vụ đểkhắc phục lỗi.
Internet Protocol (IP): điều chỉnh đường đi của những gói dữ liệu đường truyền
nhận trên Internet. TCP là giao thức phi kết nối (connectionless protocol).
HTTP: cho phép trao đổi thông tin trên Internet.
FTP: cho phép truyền nhận file trên Internet.
SMTP: cho phép gửi thư điện tử trên Internet.
POP3: cho phép nhận thư điện tử trên Internet.
TCP/IP được dùng làm giao thức chuẩn khi giao tiếp trên Internet vì nó độc lập
với nền của hệ thống (platform independent) và khơng có tổ chức nào có quyền sở
hữu giao thức này.
Địa Chỉ IP (IP Adress).
Internet là một mạng kết nối rộng lớn giữa các máy tính. Để xác định một máy
tính trên mạng này, người ta dùng một con số gọi là địa chỉ IP. Địa chỉ IP gồm một
tập 4 số nhỏ hơn 255 và được ngăn cách bởi các dấu ‘.’
Ví dụ: 192.168.1.1
Hệ Thống Tên Miền (DNS- Domain Name System): mỗi máy tính trên mạng
Internet được xác định bằng địa chỉ IP, nhưng con số này rất khó nhớ. Để khắc phục
nhược điểm này, người ta dùng hệ thống tên miền để đặt tên cho máy tính.
Ví dụ: tên miền www.yahoo.com ứng với địa chỉ IP 216.109.127.28.
2.3 Giao thức TCP/IP
TCP/IP là bộ giao thức cho phép kết nối các hệ thống mạng không đồng nhất với
nhau. TCP/IP là viết tắt của Transmission Control Protocol (Giao thức Điều khiển
Truyền thông)/Internet Protocol (Giao thức Internet). Ngày nay TCP/IP được sử

dụng rộng rãi trong c ác mạng cục bộ cũng như trên mạng Internet toàn cầu. TCP/IP
5

download by :

khơng chỉ gồm 2 giao thức mà thực tế nó là tập hợp của nhiều giao thức. Chúng ta
gọi đó là 1 hệ giao thức hay bộ giao thức (Suite Of Protocols). TCP/IP được xem là
giản lược của mơ hình tham chiếu OSI với bốn tầng, trong mơ hình này là (theo thứ
tự từ trên xuống):
+

Tầng ứng dụng (Application Layer)

+ Tầng giao vận (Transport Layer)
+Tầng mạng (Internet Layer)
+

Tầng liên mạng (Network Interface Layer)

Hình 1: Mơ hình TCP/IP
Tần liên mạng (Network Interface Layer): Tầng liên mạng có trách nhiệm đưa dữ
liệu tới và nhận dữ liệu từ phương tiện truyền dẫn. Tầng này bao gồm các thiết bị
giao tiếp mạng (Card Mạng và Cáp Mạng) và chương trình cung cấp các thơng tin
cần thiết để có thể hoạt động, truy nhập đường truyền vật lý qua thiết bị giao tiếp
mạng đó.
Tầng mạng (Internet Layer): nằm trên tầng liên mạng, tầng này có chức năng gán
địa chỉ, đóng gói và định tuyến (Route) dữ liệu. Bốn giao thức quan trọng nhất trong
tầng này gồm:

6

download by :

•

IP (Internet Protocol): Có chức năng gán địa chỉ cho dữ liệu trước khi truyền

và định tuyến chúng tới đích.
•

ARP (Address Resolution Protocol): Có chức năng biên dịch địa chỉ IP của

máy đích thành địa chỉ MAC (Media Access Control).
•

ICMP (Internet Control Message Protocol): Có chức năng thơng báo lỗi trong

trường hợp truyền dữ liệu bị hỏng.
•

IGMP (Internet Group Management Protocol): Có chức năng điều khiển

truyền đa hướng (Multicast).
Tầng giao vận (Transport Layer): Có trách nhiệm thiết lập phiên truyền thơng giữa
các máy tính và quy định cách truyền dữ liệu 2 giao thức chính trong tầng này gồm
có hai giao thức chính: TCP (Transmission Control Protocol) và UDP (User
Datagram Protocol).
•

TCP cung cấp các kênh truyền thơng hướng kết nối và đảm bảo truyền dữ liệu

một cách tin cậy, nó cung cấp một luồng dữ liệu tin cậy giữa hai trạm, nó sử dụng
các cơ chế như chia nhỏ các gói tin của tầng trên thành các gói tin có kích thước
thích hợp cho tầng mạng bên dưới, báo nhận gói tin, đặt hạn chế thời gian time-out
để đảm bảo bên nhận biết được các gói tin đã gửi đi. TCP thường truyền các gói tin
có kích thước lớn và u cầu phía nhận xác nhận về các gói tin đã nhận. Do tầng này
đảm bảo tính tin cậy, tầng trên sẽ khơng cần quan tâm đến nữa.
•

UDP cung cấp một dịch vụ đơn giản hơn cho tầng ứng dụng. UDP cung cấp

kênh truyền thơng phi kết nối, nó chỉ gửi các gói dữ liệu từ trạm này tới trạm kia mà
khơng đảm bảo các gói tin đến được tới đích. Các ứng dụng dùng UDP thường chỉ
truyền những gói có kích thước nhỏ, độ tin cậy dữ liệu phụ thuộc vào từng ứng dụng.
Các cơ chế đảm bảo độ tin cậy cần được thực hiện bởi tầng trên.
Tầng ứng dụng (Application Layer): Tầng ứng dụng là tầng trên cùng của mơ hình
TCP/IP bao gồm các tiến trình và các ứng dụng cung cấp cho người sử dụng để truy
cập mạng. Một số giao thức thông dụng trong tầng này là:
7

download by :

•

DHCP (Dynamic Host Configuration Protocol): Giao thức cấu hình trạm

•

DNS (Domain Name System): Hệ thống tên miền

động.

•
SNMP (Simpe Network Management Protocol): Giao thức quản lý mạng
đơn
giản.
•

FTP (File Transfer Protocol): Giao thức truyền tập tin

•
TFTP (Trivial File Transfer Protocol): Giao thức truyền tập tin bình
thường.
•
SMTP (Simple Mail Transfer Protocol): Giao thức truyền thư đơn giản.
2.4 Công nghệ Ethernet
Ethernet ra đời mang lại một mạng truyền dữ liệu nối tiếp tốc độ cao, nó đã trở
thành một chuẩn được chấp nhận khắp thế giới, và là giao thức thống trị các mạng
LAN, hơn 85% kết nối mạng được cài đặt trên thế giới là Ethernet. Tốc độ truyền dữ
liệu phổ biến nhất của Ethernet là 10 triệu bit/s (10 Mbps), mặc dù vậy, hầu hết các
mạng hiện nay đang được nhanh chóng nâng cấp lên Fast Ethernet với tốc độ 100
Mbps. Ethernet thường gắn với hệ điều khiển công nghiệp qua một điều khiển độc
lập kết nối với PC hay mạng bằng cáp Ethernet.
Chuẩn Ethernet 10Mbps đầu tiên được xuất bản năm 1980 bởi sự phối hợp phát
triển của 3 hãng: DEC, Intel và Xerox. Chuẩn này có tên DIX Ethernet (lấy tên theo
3 chữ cái đầu của tên các hãng). Uỷ ban 802.3 của IEEE đã lấy DIX Ethernet làm
nền tảng để phát triển. Năm 1985, chuẩn 802.3 đầu tiên đã ra đời với tên IEEE 802.3

Carrier Sense Multiple Access with Collition Detection (CSMA/CD) Access Method
vesus Physical Layer Specification. Mặc dù không sử dụng tên Ethernet nhưng hầu
hết mọi người đều hiểu đó là chuẩn của cơng nghệ Ethernet. Ngày nay chuẩn IEEE
802.3 là chuẩn chính thức của Ethernet. IEEE đã phát triển chuẩn Ethernet trên nhiều
công nghệ truyền dẫn khác nhau vì thế có nhiều loại mạng Ethernet. Các chuẩn
Ethernet đều hoạt động ở tầng Data Link trong mơ hình 7 lớp OSI vì thế đơn vị dữ
liệu mà các trạm trao đổi với nhau là các khung (frame). Cấu trúc khung Ethernet
như sau:
8

download by :

Hình 2: Cấu trúc khung tin Ethernet
Các trường quan trọng trong phần mào đầu sẽ được mơ tả dưới đây:
•

Preamble: trường này đánh dấu sự xuất hiện của khung bit, nó ln mang giá

trị 10101010. Từ nhóm bit này, phía nhận có thể tạo ra xung đồng hồ 10 Mhz.
•

SFD (start frame delimiter): trường này mới thực sự xác định sự bắt đầu của

một khung. Nó ln mang giá trị 10101011.
•

Các trường Destination và Source: mang địa chỉ vật lý của các trạm nhận và

gửi khung, xác định khung được gửi từ đâu và sẽ được gửi tới đâu.
•
LEN: giá trị của trường nói lên độ lớn của phần dữ liệu mà khung mang
theo.
•

FCS mang CRC (cyclic redundancy checksum): phía gửi sẽ tính tốn trường

này trước khi truyền khung. Phía nhận tính tốn lại CRC này theo cách tương tự.
Nếu hai kết quả trùng nhau, khung được xem là nhận đúng, ngược lại khung coi như
là lỗi và bị loại bỏ.
III. WEB SERVER VÀ CƠ SỞ DỮ LIỆU
3.1 Các ngôn ngữ lập trình cho Website
Bản chất của phát triển website là phát triển các giao tiếp. Cụ thể hơn đó là giao
tiếp giữa hai chủ thể khác nhau thông qua giao thức HTTP:
Server: giữ vai trò phục vụ cho trang cần được hiển thị
Client: gửi yêu cầu trang đến server, và hiển thị chúng trên trình duyệt cho người
dùng. Trong hầu hết các trường hợp, client thường là trình duyệt web.

9

download by :

Việc lập trình bằng ngơn ngữ nào phụ thuộc vào việc sẽ chạy nó trên máy nào,
server hay là client. Chính vì vậy nên có thể chia ngơn ngữ lập trình cho website
thành 2 phía: phía server (server-side) và phía client (client-side).
Nếu như nhiệm vụ của các ngôn ngữ lập trình chạy trên client là giúp hiển thị nội
dung của trang web trên trình duyệt, tạo ra các trang tương tác, gửi yêu cầu cho

server và nhận phản hồi từ nó, thì các ngơn ngữ lập trình phía server lại hoạt động
phức tạp hơn nhiều. Các ngôn ngữ này được web server thông dịch và trả về các
phản hồi, quản lí yêu cầu người dùng, xử lý sự kiện, lưu trữ - trích xuất dữ liệu từ cơ
sở dữ liệu.
3.2 Khái qt về ngơn ngữ HTML
3.2.1 HTML là gì? Giải thích rõ về ngơn ngữ Markup Hypertext
HTML là chữ viết tắt của Hypertext Markup Language. Nó giúp người dùng
tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn
văn, heading, links, blockquotes, vâng vâng.
HTML khơng phải là ngơn ngữ lập trình, đồng nghĩa với việc nó khơng thể tạo
ra các chức năng “động” được. Nó chỉ giống như Microsoft Word, dùng để bố cục
và định dạng trang web.
Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và
attributes) để đánh dấu lên trang web. Ví dụ, chúng ta có thể tạo một đoạn văn
bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản

và

Đây là cách bạn thêm đoạn văn trong HTML.

Bạn có thể thêm nhiều đoạn văn!

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

download by :

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 Developer 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ật 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). Bạn 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.
3.2.3 HTML hoạt động như thế nào?
HTML documents là files kết thúc với đuôi .html hay .htm. Bạn 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 chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng.
Mỗi trang HTML chứa một bộ các tag (cũng được gọi là elements), bạn có thể
xem như là việc xây dựng từng khối của một trang web. Nó tạo thành cấu trúc cây
thư mục bao gồm section, paragraph, heading, và những khối nội dung khác.
3.2.4 Ưu điểm và nhược điểm của HTML
a) Ưu điểm:
Ngơn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và
cộng đồng sử dụng cực lớn.
Sử dụng mượt mà trên hầu hết mọi trình duyệt.
Có q trình học đơn giản và trực tiếp.
Mã nguồn mở và hồn tồn miễn phí.
11

download by :

Markup gọn gàng và đồng nhất.

Chuẩn chính của web được vận hành bởi World Wide Web Consortium
(W3C).
Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.
b)

Khuyết điểm:

Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử
dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
Nó có thể thực thi một số logic nhất định cho người dùng. Vì vậy, hầu hết các
trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là
headers hay footers.
Một số trình duyệt chậm hỗ trợ tính năng mới.
Khó kiểm sốt cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ
khơng render được tag mới)
3.3 Khái qt về ngơn ngữ CSS
3.3.1CSS là gì?
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngơn ngữ được sử
dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu
(HTML). Nói ngắn gọn hơn là ngơn ngữ tạo phong cách cho trang web. Bạn có thể
hiểu đơn giản rằng, nếu HTML đóng vai trị định dạng các phần tử trên website như
việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể
thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ,
font chữ, thay đổi cấu trúc…
CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì
HTML khơng được thiết kế để gắn tag để giúp định dạng trang web.
Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn
có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ
áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.
Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup

(nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện
website), chúng là không thể tách rời.
12

download by :

3.3.2 Tại sao sử dụng CSS?
a) Giải quyết một vấn đề lớn
Trước khi có CSS, các thẻ như phơng chữ, màu sắc, kiểu nền, các sắp xếp phần
tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một quá
trình rất dài tốn thời gian và cơng sức. Ví dụ: Nếu bạn đang phát triển một trang
web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành
một quá trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là
một khuyến cáo của W3C.
Nhờ CSS mà source code của trang Web sẽ được tổ chức gọn gàng hơn, trật tự
hơn. Nội dung trang web sẽ được tách bạch hơn trong việc định dạng hiển thị. Từ
đó, q trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối
cho mã HTML.
b) Tiết kiệm rất nhiều thời gian
Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngồi vì vậy có thể thay
đổi tồn bộ trang web bằng cách thay đổi chỉ một tệp. Sử dụng CSS sẽ giúp bạn
không cần thực hiện lặp lại các mơ tả cho từng thành phần. Từ đó, bạn có thể tiết
kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm sốt dễ
dàng hơn các lỗi khơng đáng có.
CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web,
từ đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau.
c) Cung cấp thêm các thuộc tính
CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của
trang web. CSS giúp người dùng nhiều styles trên một trang web HTML nên khả

năng điều chỉnh trang của bạn trở nên vô hạn.
3.3.3 Cách nhúng CSS vào website
a)

Inline CSS

Đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là
các cặp thuộc tính định dạng CSS. Mã CSS chỉ tác động nên chính phần tử đó.
b)

Internal CSS

Đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ type=”text/css”></style>
Cặp thẻ <style type=”text/css”></style> thì được đặt bên trong cặp thẻ
<head></head>
c)

External CSS

Với External CSS: Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS.
Đây là một tập tin hoàn toàn độc lập so với file (File này thường được đặt phần mở
rộng là .css) sau đó dùng thẻ link 13

download by :

href=”đường dẫn đến tập tin CSS”> đặt ở phần head (cặp thẻ <head></head> của
các tập tin HTML) để có thể thực hiện nhúng tập tin CSS vào trang web.

IV LẬP TRÌNH WEBSITE
4.1 Phần mềm lập trình cho Website
a) Visual Studio Code là gì?
Visual Studio Code là cơng cụ soạn thảo mã nguồn do Microsoft phát triển. Nó
được giới thiệu lần đầu tiên vào năm 2015 và chính thức được phát hành vào năm
2016.
Visual Studio Code (VS Code) có dung lượng khá nhẹ và khả năng vận hành
mạnh mẽ trên cả 3 nền tảng được phát triển bởi Microsoft là: macOS, Linux và
Windows. Đặc biệt, VS Code là một mã nguồn mở và hồn tồn miễn phí. Vì vậy,
nó trở thành cái tên quen thuộc của nhiều lập trình viên.

Hình 3: Phần mềm Visual Studio Code
Có thể nói, Visual Studio Code là sự kết hợp cực kỳ hoàn hảo giữa IDE và
Code Editor. Nó hỗ trợ cho người dùng rất nhiều tiện ích như: đổi theme, hỗ trợ
Git, cải tiến mã nguồn, có syntax highlighting, hỗ trợ cho q trình gõ code, sử
dụng các phím tắt và nhiều tùy chọn khác nhau,…
Hiện nay, Visual Studio Code chiếm ưu thế ở hầu hết các mơi trường phát triển
dành cho lập trình viên. Trong một khảo sát của Stack Overflow (năm 2019),
Visual Studio Code được đánh giá là môi trường phát triển được dùng phổ biến
nhất với hơn 50% lượt bình chọn trong tổng số hơn 90 nghìn người dùng tham gia
khảo sát. Trong khi đó, con số này của năm 2018 chỉ có 35%. Điều này cho thấy
độ phủ sóng ngày càng rộng rãi và sự hữu ích mà VSCode mang lại cho lập trình
viên.
14

download by :

Hình 4: Khảo sát về mơi trường phát triển 2019
Visual Studio Code là môi trường phát triển được ưa chuộng nhất năm 2019

b) Visual Studio Code dành cho những đối tượng nào?
VSCode thích hợp sử dụng cho nhiều đối tượng khác nhau như:
Lập trình viên chun nghiệp.
Người u thích cơng việc lập trình hoặc đang theo học chun
ngành cơng nghệ thơng tin.
Tester
Các data administrator.
Nhìn chung, hầu hết những người u thích và quan tâm đến lập trình
đều có thể sử dụng Visual Studio Code phục vụ cho công việc cũng như mục
đích học tập cá nhân.
c) Những tính năng nổi bật của Visual Studio Code là gì?
Intellisense
Intellisense là sự kết hợp giữa trí tuệ nhân tạo và code auto-complete. Nó sẽ
cung cấp hàng loạt các đề nghị, gợi ý và mô tả ngắn khi chúng ta đang viết code.
Những gợi ý sẽ được tính tốn dựa trên nhiều nhân tố như: cú pháp, ngơn ngữ lập
trình, hàm, biến,…

15

download by :

Hình 5: Phần mềm Visual Studio Code
Visual Studio Code cung cấp sẵn Intellisense sử dụng cho các ngơn ngữ lập
trình như: JSON, JavaScript, TypeScript, CSS, HTML, Less và Sass. Tuy nhiên,
bạn cũng có thể cài thêm IntelliSense thơng qua extension cho các ngơn ngữ khác
hoặc cũng có thể tự custom tính năng này cho phù hợp với nhu cầu sử dụng.
Tích hợp sẵn Git
Git trên Visual Studio Code sẽ cung cấp cho bạn tất cả các git action cơ bản
như: push, commit code,… Đặc biệt, qua từng phiên bản khác nhau thì tính năng

hỗ trợ Git ngày càng đầy đủ và tiện ích.
Debugger
Hỗ trợ debug là một tính năng hữu ích của VSCode. Theo mặc định, VSCode
chỉ đính kèm chương trình Debug hỗ trợ riêng cho Node JS. Tuy nhiên, bạn hồn
tồn có thể cài đặt thêm extension để có thể debug cho những ngôn ngữ khác theo
nhu cầu sử dụng.
Tích hợp Terminal
Terminal là chương trình giao diện cửa sổ dịng lệnh. Đây là một tính năng vơ
cùng quan trọng với lập trình viên. Khi sử dụng VSCode, bạn có thể mở một hoặc
có thể mở nhiều tab terminal tại thư mục bạn đang làm việc, giúp nâng cao hiệu
quả công việc.
Khả năng mở rộng và tùy chỉnh
Visual Studio Code cung cấp cho người dùng khả năng tùy chỉnh tuyệt vời như:
tùy chỉnh theme, kích thước, font chữ, keyboard shortcut, coding style, tùy
16

download by :

chỉnh tính năng,… một cách linh hoạt. Bên cạnh đó, bạn cũng có thể tùy chỉnh
trên từng workshop vơ cùng tiện lợi.
Code Spell Checker
Tính năng này cho phép người dùng kiểm tra tên hàm, các comment, tên biến
sai chính tả một cách nhanh chóng. Từ đó giúp bạn có thể chỉnh sửa dễ dàng và
nhanh chóng hơn.
Live Server
Xây dựng server chạy CSS/HTML/JS thơng qua tính năng Live Server. Tính
năng này sẽ tự động refresh lại trình duyệt mỗi khi bạn chỉnh sửa code, giúp tiết
kiệm rất nhiều thời gian.
Ngoài ra, VSCode cịn cung cấp rất nhiều tính năng hữu ích khác.

d)

Lý do nên sử dụng Visual Studio Code?

Nhỏ gọn và tiện lợi
VScode có dung lượng nhỏ nên khơng chiếm nhiều RAM. Đặc biệt, sự tích hợp
giữa Code Editor và DIE giúp bạn có thể linh hoạt sử dụng mà khơng phải tốn quá
nhiều thời gian như khi sử dụng các phần mềm hỗ trợ khác.
Tốc độ nhanh
VSCode có tốc độ làm việc nhanh, cho phép người dùng có thể sử dụng nhiều
tính năng cùng lúc như: đối sánh dấu ngoặc, đánh dấu cú pháp,… Đồng thời, bạn
cũng có thể xây dựng, chỉnh sửa và gỡ lỗi một cách đơn giản, dễ dàng.

17

download by :

Hình 6: Lập trình trong Visual
Hỗ trợ đa ngơn ngữ lập trình
VSCode hỗ trợ nhiều ngơn ngữ lập trình khác nhau như: C#, C/C+, HTML,
Visual Basic, F#, JavaScript, CSS,… Do vậy, nó có thể dễ dàng phát hiện và đưa
ra thơng báo khi chương trình xuất hiện lỗi.
Kho lưu trữ an toàn
Đây là một trong những ưu điểm nổi bật nhất của VSCode. Nó có thể dễ dàng
kết nối với Git hay bất kỳ kho lưu trữ nào hiện có. Vậy nên, bạn hồn tồn có thể
n tâm khi sử dụng.
Hỗ trợ web
VSCode hỗ trợ nhiều ứng dụng web khác nhau. Đồng thời, nó cũng có 1 trình
soạn thảo và thiết kế website.

Lưu trữ dữ liệu theo dạng phân cấp
Những tệp lưu trữ đoạn mã đều được đặt trong những thư mục tương tự nhau.
Bên cạnh đó, VSCode cịn cung cấp các thư mục dành riêng cho một số tệp quan
trọng khác.

18

download by :

Hỗ trợ viết code
Một số đoạn code có thể sẽ được thay đổi nhằm mang lại sự thuận tiện cho
người dùng. Lúc đó, Visual Studio Code sẽ đề xuất các tùy chọn thay thế (nếu có)
cho bạn.
Hỗ trợ thiết bị đầu cuối
VSCode tích hợp các thiết bị đầu cuối. Điều này giúp người dùng sẽ không phải
chuyển đổi giữa hai màn hình hay trở về thư mục gốc để thực hiện các thao tác
khác.
Giao diện dễ sử dụng, thân thiện với người dùng
Hệ thống các phím tắt đa dạng giúp bạn dễ dàng quan sát cũng như thao tác làm
việc nhanh chóng hơn. Từ đó giúp nâng cao hiệu suất và tăng hiệu quả làm việc.
Màn hình đa nhiệm
Visual Studio Code cho phép người dùng có thể mở nhiều tệp và thư mục cùng
lúc. Mặc dù giữ chúng khơng có sự liên quan với nhau.
4.2 Website
a) Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF -8 ">

<b>SMART HOME</b>

</div>
</slogan>
<bang>
<div class="row">
<div id="box1">
<div id="khung1">

<b>Nhiệt Độ</b>

</div>
<div id= "khung3" >

<b>Khơng khí</b>

</div>

alt="">
<button type="button" id="btn1"class="btn waves-effect waveslights">ON</button>
<button type="button" id="btn2"class="btn waves-effect waveslights">OFF</button>
</div>
<div id="box2">
<div id="khung2" >

<b>Độ ẩm</b>

</div>
<img src="img/lab2-denoff.jpg" class="denon" id="tuoi" alt="">

id="maylanh" alt="">
<button type="button" id="btn3"class="btn waves-effect waveslights">ON</button>
<button type="button" id="btn4"class="btn waves-effect waveslights">OFF</button>
<button type="button" id="btn5"class="btn waves-effect waveslights">ON</button>
<button type="button" id="btn6"class="btn waves-effect waveslights">OFF</button>
</div>
</div>
</bang>
20

download by :

<footer>
</footer>
</div>

download by :

var onden = "on";
var offden = "off";
var onmaylanh ="11";
var offmaylanh = "22";
var stateAir = false;
function InsertData(){
document.getElementById("quat").setAttribute("src","./img/lab2quaton.png");
set(ref(db,"hahaha"),{
Den: onquat,
})
}
Btn1.addEventListener('click', InsertData);
function offquat1(){
document.getElementById("quat").setAttribute("src","./img/lab2quatoff.png");
set(ref(db,"hahaha"),{
Den: offquat,
})
}
Btn2.addEventListener('click', offquat1)
function onden1(){
document.getElementById("tuoi").setAttribute("src","./img/sang.png");
set(ref(db,"hahaha"),{
Den: onden,
})
}
Btn3.addEventListener('click', onden1)
function offden1(){

document.getElementById("tuoi").setAttribute("src","./img/lab2-denoff.jpg");
set(ref(db,"hahaha"),{
Den: offden,
})
}
22

download by :