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

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.. Mạng Internet mang lại rất nhiều tiện íc

BQ GIAO THONG VAN TAI

DAI HOC GIAO THONG VAN TAI THANH PHO HO CHI MINH

KHOA ĐIỆN - ĐIỆN TỬ VIỄN THÔNG

xàj[]#a

BAO CAO BAI TAP LON MON HOC SCADA

NANG CAO

DE TAI: NHA THONG MINH

GVHD: Th.S Tran Quang Vinh

Nhom thuc hién:Nhom 7

I DAT VAN DE 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à loT (Internet of Things - Internet van vat), 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ư 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Ề MANG INTERNET

2.1 Gidi thiéu Internet là một hệ thống thông tin toà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 toà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

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

Dia Chi 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

+ 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)

Application Application

————> Presentation

Session Transport + Transport

Internet le Network Data Link -.—> Data Link Network

Access Physical ®—————> Pysical

Hình 2-2 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:

«ồ = 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é chuc nang bién dich dia chi IP cua may dich thanh dia chi MAC (Media Access Control)

« ICMP (Internet Control Message Protocol): Cé chuc nang 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é chic nang dié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 bao 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à yê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 Ung dung 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à:

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

- - DNS (Domain Name System): Hệ thống tên miền + 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 thc truyén tap tin binh thuong

, 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 Mac du khéng su dung 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:

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ó

luôn 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): truéng nay mdi thuc su xac định sự

bắt đầu của một khung Nó luôn mang giá trị 10101011

« Cac trường Destination và Source: mang dia 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

ll WEB SERVER VA CO SO DU LIEU

3.1 Cac 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 vu cho trang cần được hiển thi 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

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 quát 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ở va déng van ban <p> va </p>

<p>Day la cach ban thém đoạn văn trong HTML.</p>

<p>Bạn có thể thêm nhiéu doan van! </p>

3.2.2 Lich su cua HTML HTML được sáng tạo bởi Tim Berners-Lee, nha vat ly hoc cua 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 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 dụng khác

3.2.4 Ưu điểm và nhược điểm của HTML

a) Ưu điểm: se 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« Sử dụng mượt mà trên hầu hết mọi trình duyệt se Có quá trình học đơn giản và trực tiếp

se Mã nguồn mở và hoàn toàn miễn phí

se Markup gọn gàng và đồng nhất e« Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C)

e Dé dang tich hop vdi cac ngén ngữ backend như PHP và Node.js b) Khuyét diém:

e Duoc 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

se 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

se Một số trình duyệt chậm hỗ trợ tính năng mới se Khó kiểm soá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 quát 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

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 tach bạch hơn trong việc định dạng hiển thị Từ đó, quá 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 ngoài vì vậy có

thể thay đổi toà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 soá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 chỉ 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 cap thé <style 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 <link rel=”stylesheet” type=”text/css” href=”đường dẫn đến tập tin CSS”> dat 6 phan head (cap 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à hoàn toà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

| Visual Studio Code

8 File Eda View Goto Help

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

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

Visual Studio Code 50.7% E000) Visual Studio 31.5% (I

Notepad++ 30.5% (III ị intelli) 25.4% (|

Lập trình viên chuyên nghiệp Người yêu thích công việc lập trình hoặc đang theo học

chuyên ngành công nghệ thông tin

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