Webserver s7 - 1200

7/17/2019 Webserver s7 - 1200

http://slidepdf.com/reader/full/webserver-s7-1200 1/37

7/17/2019 Webserver s7 - 1200


Di ễn Đàn PLC Việt Nam – [email protected] CHÂU VĨNH LỢI

1Lời mở đầu

L

ờ

i m

ở

đầ

u

Ngày nay, khoa học công nghệ đang phát triển với t ốc độ r ấ t nhanh. Các sản ph ẩm công nghệ

do đó cũng phải b ắt kịp xu th ế của thời đại và đáp ứng yêu c ầu của người sử dụng. Chính vì vậy

các nhà sản xu ấ t luôn luôn cập nhật và không ngừng đổi mới để tạo ra những sản ph ẩm có tính

ứng dụng cao.

Siemens là một trong những nhà sản xu ất đi đầu v ề việc tạo ra các sản ph ẩm ứng dụng công

nghệ hiện đại. D ễ th ấ y r ằng các sản ph ẩm g ần đây của Siemens trong lĩnh vực tự động hóa công

nghiệp đều được tích hợp khả năng truyền thông mạng mạnh mẽ mà S7-1200 là dòng sản ph ẩm

tiêu bi ểu nh ấ t.

Một trong những tính năng đáng chú ý của dòng S7-1200 đó là Webserver. Thực ra tính năngnày không phải mới lạ nhưng việc tích hợp c ổng truy ền thông PROFINET cùng mức giá h ấ p d ẫn

đã làm cho S7-1200 trở nên ph ổ bi ến và tính năng Webserver cũng được khai thác mạnh mẽ.

Với tính năng Webserver, bạn có

th ể điều khi ển và giám sát hệ th ống b ằng các thi ế t bị di động

có h ỗ trợ k ế t n ối mạng. Điều này

cho phép bạn có th ể truy cập

vào hệ th ống ở mọi lúc mọi nơi.

Webserver trên S7-1200 bao

g ồm 2 thành ph ần chính đó làHTML và AWP. Ngoài ra còn có

các thành ph ần b ổ trợ khác như

CSS hay Javascript. Tài liệu này

sẽ tập trung vào việc hướng d ẫn bạn cách tạo một trang web b ằng ngôn ngữ HTML và tích hợp

AWP để tạo thành một Webserver hoàn chỉnh.

Để có th ể hi ểu rõ được tài liệu này, yêu c ầu bạn phải có:

Ki ế n thức căn bản v ề máy tính

Ki ế n thức căn bản v ề PLC S7-1200 và cách sử dụng ph ần m ềm TIA Portal

PLC S7-1200 (vì hiện tại chưa thể mô phỏng được dòng PLC này, chúng ta sẽ download

và ki ểm tra trực ti ế p)

Tài li ệu này đượ c biên soạn nh ằm mục đích giúp bạn rút ng ắn thờ i gian t ự nghiên cứ u.

Tác gi ả có sử d ụng một s ố tài li ệu tham khảo sau:

Hướ ng d ẫn thi ế t k ế Web – Aweb.vn

S7-1200 System Manual - Siemens

7/17/2019 Webserver s7 - 1200



2 HTML và Webserver S7-1200

Khái niệm về HTML và AWP

HTML là gì?

HTML (Hyper Text Makeup Language) là ngôn ngữ lập trình web đơn giản, được tạo thành từ

các thẻ và nội dung dạng text. M ỗi thẻ bao quanh một đối tượng và có th ể quy ết định các thuộc

tính liên quan đến đối tượng đó. Do sự đơn giản này, ta có th ể dùng một chương trình soạn

thảo văn bản b ất kì để tạo file html (như Word, Notepad,…). File HTML đó được gọi là “trangweb”.

Trong tài liệu này, tác giả sẽ sử dụng ph ần m ềm Notepad++ để vi ế t code web. Notepad++ là

một công cụ hữu ích cho các lập trình viên, h ỗ trợ nhi ều loại ngôn ngữ lập trình khác nhau trong

đó có HTML. Notepad++ có thể phân chia b ố cục rõ ràng cho các thành ph ần trong code do đócó th ể giúp người lập trình có th ể quản lí t ốt chương trình mình đang viế t. Bạn có th ể download

Notepad++ theo địa chỉ: http://notepad-plus-plus.org/

AWP là gì

AWP (Automation Web Programming) là ngôn ngữ web do Siemens phát tri ển cho các dòng PLC

được tích hợp tính năng Webserver. AWP thực ch ấ t là các dòng ghi chú trong trang HTML

nhưng PLC có thể biên dịch và hi ểu được. Từ đó chúng ta có thể truy cập dữ liệu trên PLC thông

qua AWP.

http://notepad-plus-plus.org/




7/17/2019 Webserver s7 - 1200



3Thi ế t k ế một trang web đơn giản

HTML ăn bản

Thi

ế

t k

ế

m

ột trang web đơn giả

n

C ấ u trúc cơ bản của một trang HTML

Giải thích:

Một cặp thẻ HTML bao g ồm <Tên thẻ (b ắt đầu)>Nội dung</Tên thẻ (k ế t thúc)>

Trong ví dụ trên ta th ấ y có các cặp thẻ sau:

<HTML>…..</HTML> dùng để định nghĩa đó là một trang HTML;

<HEAD>…..</HEAD> dùng để định nghĩa phần tiêu đề cho trang HTML;

<BODY>…..</BODY> dùng để định nghĩa phần thân của trang HTML;

<TITLE>…..</TILTE> dùng để xác định tiêu đề trang web;

<meta ….. /> là một thẻ đặc biệt dùng để định nghĩa các thuộc tính của trang web nhưloại mã sử dụng, thời gian refresh…;

<h1>…..</h1> dùng để xác định nội dung bên trong là một đề mục;

<p>…..</p> dùng để xác định đây là đoạn văn bản chứa nội dung web;

<br /> là thẻ dùng để xu ống dòng (brake);

<b>…..</b> là thẻ dùng để in đậm nội dung bên trong;

HTML Structrue

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

<TITLE>Tiêu đề trang Web</TITLE>

</HEAD>

<BODY>

<h1>Đề mục</h1>

<p>nội dung thứ nh ấ t</p>

<p>nội dung thứ hai</p>

…

</BODY>

</HTML>

7/17/2019 Webserver s7 - 1200




<i>…..</i> là thẻ dùng để in nghiên nội dung bên trong;

<u>…..</u> là thẻ dùng để gạch chân nội dung bên trong;

Bài tập nhỏ Hãy soạn một trang HTML đơn giản như sau:

CODE

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<TITLE>Thi ế t k ế Webserver S7-1200</TITLE>

</HEAD>

<BODY>

<h1>Di ễn đàn PLC Việt Nam</h1>

<p>Di ễn đàn PLC Việt Nam là một trong những di ễn đàn tự động hóa n ổi ti ế ng và có uy tín

nh ất nước ta. Với đội ngũ hỗ trợ nhiệt tình, dày dạn kinh nghiệm cùng ki ế n thức chuyên môn

vững ch ắc, di ễn đàn PLC Việt Nam đã trở thành một nơi giao lưu học hỏi hiệu quả cho anh em

ngành kĩ thuật nói chung và tự động hóa nói riêng.</p>

<p>Nội dung trên di ễn đàn rất đa dạng phong phú với nhi ều mảng ki ế n thức khác nhau từ

ph ần m ềm, thi ế t bị đế n những dự án thực t ế hay thậm chí là những tâm tình, những trăn trở

và băn khoăn trong ngh ề.</p>

<br />

<b>Các hoạt động thực t ế </b>

<p>H ằng năm diễn đàn thường t ổ chức các bu ổi hội thảo chuyên đề để chia sẻ kinh nghiệm

thực t ế và giới thiệu những công nghệ mới. Thường xuyên mở các khóa đào tạo giúp mọi

người ti ế p cận với công nghệ tự động hóa một cách nhanh nh ấ t.</p>

<p>Ngoài ra, di ễn đàn cũng thường t ổ chức các bu ổi họp mặt offline để các thành viên có dịp

giao lưu chia sẽ kinh nghiệm trong ngành. Từ khi thành lập đế n nay, di ễn đàn đã trở thành một

c ầu n ối vững ch ắc, liên k ế t bộ phận kĩ sư, kĩ thuật viên, sinh viên và những người làm kĩ thuật

nói chung tạo nên một kh ối vững ch ắc, một n ền kĩ thuật lớn mạnh của nước nhà.</p>

<br />

<p>Với phương châm chia sẻ và học hỏi, di ễn đàn PLC Việt Nam hi vọng sẽ có th ể đóng gópnhi ều hơn vào nền công nghiệp của đất nước, đưa nền kĩ thuật nước ta ti ế n lên ngang b ằng với

các nước trong khu vực và th ế giới.</p>

<b><i>Chung tay xây dựng một cộng đồng tự động hóa PLC Việt Nam</i></b>

</BODY>

</HTML>

7/17/2019 Webserver s7 - 1200



5Thi ế t k ế một trang web đơn giản

Hướng d ẫn thực hiện:

Mở chương trình Notepad++, chuy ển sang ngôn ngữ lập trình HTML và mã UTF-8 như hình

dưới:

Gõ lại đoạn code trên vào Notepad++

1

2

3

4

5

7/17/2019 Webserver s7 - 1200




Save lại và mở b ằng trình duyệt b ất kì ta được k ế t quả như sau:

7/17/2019 Webserver s7 - 1200



7Định dạng trang HTML

Đị

nh d

ạ

ng trang HTML

Như vậy chúng ta đã biế t cách tạo một trang HTML, trong ph ần này tác giả sẽ hướng d ẫn cách

định dạng cho các thành ph ần trong HTML.

Tạo một danh sách

Danh sách thông thườngĐể định dạng danh sách ki ểu thông thường, ta dùng cặp thẻ <UL>…..</UL> và <LI>…..</LI>.

Thẻ <UL>…..</UL> dùng để xác định vị trí

đầu và cu ối của danh sách.

Thẻ <LI>…..</LI> dùng để xác định nội dung

của các ph ần tử trong danh sách.

Danh sách ki ểu menu

Để định dang danh sách ki ểu menu, ta dùng cặp thẻ <OL>…..</OL> và <LI>…..</LI>.

Thẻ <Ol>…..</OL> dùng để xác định vị trí

đầu và cu ối của danh sách.

Thuộc tính Type của thẻ <OL> xác định ki ểu

đánh thứ tự của từng ph ần tử trong danhsách như kiểu s ố (1,2,3…) kiểu chữ in hoa

(A,B,C…)…

Thẻ <LI>…..</LI> dùng để xác định nội dung

của từng mục lớn trong danh sách.

Thuộc tính Type của thẻ <LI> xác định ki ểu

đánh thứ tự của từng ph ần tử trong danh

sách như chấm tròn đậm, ch ấ m tròn, hình

vuông.

M ỗi mục lớn sẽ g ồm những mục nhỏ hơnđược s ắp x ế p thành danh sách dạng

thường.

CODE

<UL>

<LI>Ph ần tử thứ nh ấ t</LI>

<LI>Ph ần tử thứ hai</LI>

…

<LI>Ph ần tử thứ n</LI>

</UL>

CODE

<OL Type=1/A/a/I/i>

<LI Type=disc/circle/square>Loại 1</LI>

Danh sách thường loại 1

<LI Type=disc/circle/square >Loại 2</LI>

Danh sách thường loại 2

…

<LI Type=disc/circle/square >Loại n</LI>

Danh sách thường loại n

</OL>

7/17/2019 Webserver s7 - 1200




Định dạng văn bảnĐể định dạng văn bản trong HTML (màu s ắc, font chữ, kích thước,…), ta có thể dùng cặp thẻ

<FONT>…..</FONT> Cú pháp như sau:

Với “Kiểu chữ” là tên Font chữ bạn chon (ví dụ “Arial”), “Màu chữ” là dãy số hex g ồm 6 chữ s ố

mô tả mức độ của các màu cơ bản RGB (ví dụ màu tr ắng “FFFFFF”), “Cỡ chữ” là một s ố nguyên

lớn hơn 0 (ví dụ “15”).

Bài tập nhỏ Hãy soạn trang HTML có nội dung như sau:

CODE

<FONT FACE =”Kiểu chữ” COLOR=”Màu chữ” SIZE =”Cỡ chữ”>Nội dung</FONT>

CODE

<HTML>

<HEAD>



</HEAD>

<BODY>

<h1><FONT FACE=”Corbel” COLOR=”EFEFEFEF” SIZE=”15”>Diễn đàn PLC Việt

Nam</FONT></h1>

<h2>Các chuyên mục trên di ễn đàn</h2>

<OL Type=A>

<LI>Tự động hóa và ứng dụng</LI>

<UL>

<LI>Siemens Automation</LI>

<LI>Mitsubishi Electric</LI>

<LI>ABB Automation</LI>

<LI>Omron Automation</LI>

<LI>Rockwell Automation</LI>

<LI>Schneider Electric</LI>

<LI>IVNT Automation</LI>

<LI>Honeywell Automation</LI>

<LI>HMI và SCADA</LI>

7/17/2019 Webserver s7 - 1200



9Định dạng trang HTML

CODE

<LI>Hệ th ống điều khi ển phân tán</LI>

<LI>Hệ th ống BMS và nhà thông minh</LI>

<LI>Hệ th ống HVAC</LI>

<LI>Động cơ DC – Servo – Step – Drive</LI>

<LI>…</LI>

<LI>Học tập tự động hóa online</LI>

</UL>

<LI>Cơ – điện – điện tử - IT</LI>

<UL>

<LI>Thi ế t k ế M&E – điện công nghiệp</LI>

<LI>Vi điều khi ển</LI>

<LI>…</LI>

<LI>Thư viện tài liệu</LI>

</UL>

<LI>Đối tác ngành giáo dục đào tạo</LI>

<UL>

<LI>Khóa học TĐH – Cơ điện – điện tử tại TP.HCM</LI>

<LI>Khóa học TĐH – TT CĐT Hải Dương</LI>

<LI>…</LI>

<LI>Thông tin dự án trọng điểm</LI>

</UL>

</OL>

</BODY>

</HTML>

7/17/2019 Webserver s7 - 1200




Ta được k ế t quả như sau:

7/17/2019 Webserver s7 - 1200



11Thẻ <BODY> - Tạo liên k ết và định dạng liên k ế t

Th

ẻ

<BODY> T

ạ

o liên k

ết và đị

nh d

ạ

ng liên k

ế

t

Thẻ <BODY>Ở các ph ần trước ta đã biế t thẻ <BODY> dùng để xác định ph ần thân của trang HTML. Thẻ

<BODY> còn có th ể được dùng để xác định các thuộc tính của trang HTML như hình nền, màu

n ền, canh l ề trang…

C ấu trúc đầy đủ của thẻ <BODY> như sau:

Giải thích:

LINK: màu của liên k ế t hi ển thị trong trang web

ALINK: màu của liên k ết đang chọn

VLINK: màu của liên k ết đã từng được chọn (từng click vào)

BGCOLOR: màu n ền của trang web

TEXT: màu chữ chung của cả trang web

T ấ t cả các thuộc tính màu s ắc trên là dãy s ố hex g ồm 6 chữ s ố mô tả mức độ của các màu cơbản RGB (ví dụ màu tr ắng “FFFFFF”).

BACKGROUND: đường d ẫn đế n hình n ền trang web. Mặc định HTML sẽ dò trong thư mục cùngc ấ p chứa file HTML n ếu như đường d ẫn chỉ có tên file.

Ví dụ BACKGROUND=“hinhnen.png” trong trường hợp này file hinhnen.png n ằm cùng

một thư mục với file HTML.

Đối với trường hợp file hình n ằm trong một thư mục khác, ta c ần địa chỉ đầy đủ d ẫn đế n file

hình đó.

Ví dụ BACKGROUND=“D:\My Pictures\wallpapers\hinhnen.png”

Đối với trường hợp file hình n ằm trong thư mục con của thư mục g ốc chứa file HTML, ta chỉ c ần

đường d ẫn b ắt đầu từ thư mục g ốc.

CODE

<BODY

LINK =“màu liên kết”

ALINK=“màu liên kết đang được chọn”

VLINK=“màu liên kết đã được chọn”

BACKGROUND=“hình nền trang web”

BGCOLOR=“màu nền trang web”

TEXT=”màu chữ”

>

Nội dung trang web

7/17/2019 Webserver s7 - 1200




Ví dụ ta có file HTML n ằm ở địa chỉ “D:\documents\HTML\My webpage\test web.html”

File hình n ằm ở địa chỉ: “D:\documents\HTML\My webpage\background\hinhnen.png”

Như vậy ta chỉ c ần khai báo thuộc tính BACKGROUND=“background\hinhnen.png”

Tạo liên k ết và định dạng liên k ế t

Để tạo liên k ế t ta sử dụng cú pháp sau:

Giải thích:

HREF: liên k ế t c ần tạo, ví dụ: http://plcvietnam.com.vn

NAME: Tên của liên k ết (để quản lí trong trang HTML)

TITLE: Văn bản hi ển thị khi rê chuột vào liên k ế t

TARGET: có một trong 2 tùy chọn là “_blank” hoặc “_self”.

“_blank”: mở liên k ế t trong trang mới, “_self”: mở liên k ế t thay th ế trang hiện tại.

Bài tập nhỏ Hãy mở lại trang HTML của ph ần trước (Định dạng trang HTML) ta sẽ thêm vào một s ố thuộc

tính và chèn liên k ế t vào

CODE

<A HREF=“liên kế t c ần tạo” NAME=“Tên liên kết” TILTLE=“tiêu đề liên k ết” TARGET=“phươngthức mở liên k ết”> Tên rút gọn của liên k ế t </A>

CODE

<HTML>

<HEAD>



</HEAD>

<BODY BACKGROUND=“D:\Documents\Hoc tap\HTML\AWeb\CUSTOM\Test web\4.png”

TEXT=”FFFFFF” >

<h1><FONT FACE=”Corbel” COLOR=”EFEFEFEF” SIZE=”15”>Diễn đàn PLC Việt

Nam</FONT></h1>

<h2>Các chuyên mục trên di ễn đàn</h2>

…..

<A HREF=“http://plcvietnam.com.vn” NAME=“forum” TILTLE=“link” TARGET=“_blank”>

Di ễn đàn PLC Việt Nam

</A> …..

http://plcvietnam.com.vn/




7/17/2019 Webserver s7 - 1200



13Thẻ <BODY> - Tạo liên k ết và định dạng liên k ế t

Ph ần chữ in nghiêng là ph ần ta vừa thêm vào, hình n ền có th ể dùng b ấ t kì hình nào khác có trên

máy của bạn. Save lại và mở b ằng trình duyệt b ấ t kì ta có k ế t quả như sau:

Liên k ế t vừa thêm vào

7/17/2019 Webserver s7 - 1200




Hình

ả

nh trong HTML

Để chèn hình ảnh vào trang web, bạn dùng cú pháp sau:

Giải thích:

SRC: đường d ẫn đế n file ảnh có c ấu trúc như đã trình bày ở ph ần hình n ền trang web

HSPACE/VSPACE: kích thước vùng tr ống được xác định b ằng một s ố nguyên, ví dụ “3”

BORDER: kích thước vi ền bao được xác định b ằng một s ố nguyên, ví dụ “5”

ALT: văn bản hi ển thị khi rê chuột vào ảnh, ví dụ “ảnh 1”

WIDTH: chi ều rộng bạn mu ốn hi ển thị trên web, ví dụ “320”

HEIGHT: chi ều cao bạn mu ốn hi ển thị trên web, ví dụ “240”

Bài tập nhỏ Soạn file HTML có nội dung như sau: (Xem trang k ế )

CODE

<IMG

SRC=“đường d ẫn đế n file âm ảnh”

HSPACE=”kích thước vùng tr ống theo chi ều ngang”

VSPACE=”kích thước vùng tr ống theo chi ều dọc”

BORDER=”kích thước vi ền bao”

ALT=”văn bản hi ển thị khi rê chuột vào ảnh”

WIDTH=”chiều rộng của ảnh”

HEIGHT=”chiều cao của ảnh”

>

7/17/2019 Webserver s7 - 1200



15Hình ảnh trong HTML

CODE

<HTML>

<HEAD>


<TITLE>Di ễn đàn PLC Việt Nam</TITLE>

</HEAD>

<BODY bgcolor="006633" text="FFFFFF">

<IMG alt="Header" align="bottom" src=" D:\Documents\PLCVietnam\banner\header.png"

width="990" height="87">

<h1>Di ễn Đàn PLC Việt Nam</h1>

<p>Di ễn đàn PLC Việt Nam là một trong những di ễn đàn tự động hóa n ổi ti ế ng và có uy tín nh ấ tnước ta. Với đội ngũ hỗ trợ nhiệt tình, dày dạn kinh nghiệm cùng ki ế n thức chuyên môn vững

ch ắc, di ễn đàn PLC Việt Nam đã trở thành một nơi giao lưu học hỏi hiệu quả cho anh em ngành

kĩ thuật nói chung và tự động hóa nói riêng.</p>

<p>Nội dung trên di ễn đàn rất đa dạng phong phú với nhi ều mảng ki ế n thức khác nhau từ ph ần

m ềm, thi ế t bị đế n những dự án thực t ế hay thậm chí là những tâm tình, những trăn trở và bănkhoăn trong nghề.</p>

<br />

b>Các hoạt động thực t ế </b>

<p>H ằng năm diễn đàn thường t ổ chức các bu ổi hội thảo chuyên đề để chia sẻ kinh nghiệm

thực t ế và giới thiệu những công nghệ mới. Thường xuyên mở các khóa đào tạo giúp mọi người

ti ế p cận với công nghệ tự động hóa một cách nhanh nh ấ t.</p>

<p>Ngoài ra, di ễn đàn cũng thường t ổ chức các bu ổi họp mặt offline để các thành viên có dịpgiao lưu chia sẽ kinh nghiệm trong ngành. Từ khi thành lập đế n nay, di ễn đàn đã trở thành một

c ầu n ối vững ch ắc, liên k ế t bộ phận kĩ sư, kĩ thuật viên, sinh viên và những người làm kĩ thuật

nói chung tạo nên một kh ối vững ch ắc, một n ền kĩ thuật lớn mạnh của nước nhà.</p>

<br />

<p>Với phương châm chia sẻ và học hỏi, di ễn đàn PLC Việt Nam hi vọng sẽ có th ể đóng gópnhi ều hơn vào nền công nghiệp của đất nước, đưa nền kĩ thuật nước ta ti ế n lên ngang b ằng với

các nước trong khu vực và th ế giới.</p>

<b><i>Chung tay xây dựng một cộng đồng tự động hóa PLC Việt Nam</i></b>

</BODY>

</HTML>

7/17/2019 Webserver s7 - 1200




Save lại và mở b ằng trình duyệt b ấ t kì, ta có k ế t quả như sau:

Bảng trong HTML

Bảng là một thành ph ần h ế t sức quan trọng trong HTML. Người ta thường dùng bảng để trình

bày các s ố liệu, th ống kê, thông s ố… và chức năng quan trọng nh ấ t là tạo giao diện cho trang

HTML. Hãy hình dung bạn có một trang web với b ố cục như sau:

Header

Navigator Content

Footer

7/17/2019 Webserver s7 - 1200



17Bảng trong HTML

Trong đó Header là phần tiêu đề trang web (Banner, câu chào…), Navigator là bảng liên k ết đế ncác trang khác, Content là nội dung trang đang hiển thị, Footer là ph ần k ế t của trang web (dùng

cho các thông tin v ề liên hệ, bản quy ền…).

Chúng ta sẽ dùng bảng để tạo các ô chứa những thành ph ần trên. C ấ u trúc lệnh tạo bảng nhưsau:

CODE

<TABLE

ALIGN=”Canh vị trí bảng”

BORDER=”Kích thước vi ền”

BORDERCOLOR=”Màu viền”

BACKGROUND=”Hình nền”

BGCOLOR=”Màu nền”

CELLSPACING=”Khoảng cách giữa các ô”

CELLPADDING=”Khoảng cách từ rìa ô đế n nội dung chứa trong ô”

>

<TR ALIGN=”Canh lề cho nội dung trong hàng” VALIGN=”Canh lề dọc cho nội dung trong

dòng”>

<TD>Nội dung hàng 1 cột 1</TD>


…

</TR>

<TR>



…

</TR>

…

</TABLE>

7/17/2019 Webserver s7 - 1200




Giải thích:

<TR>…</TR> Cặp thẻ xác định hang

<TD>…</TD> Cặp thẻ xác định cột trong một hàng

ALIGN: Canh l ề trái “LEFT”, phải “RIGHT”, giữa “CENTER”.

BORDER: Kích thước vi ền là một s ố nguyên ví dụ “2”. Giá trị “0” sẽ định dạng bảng không có

vi ền bao.

BORDERCOLOR: Màu vi ền là dãy s ố hex g ồm 6 chữ s ố mô tả mức độ của các màu cơ bản RGB (ví

dụ màu tr ắng “FFFFFF”).

BACKGROUND: Đường d ẫn đế n file ảnh mu ốn sử dụng làm n ền cho bảng có dạng như đã mô tả

trong mục “Thẻ <BODY>”.

BGCOLOR: Màu n ền tương tự thuộc tính BORDERCOLOR.

CELLSPACING: Khoảng cách giữa các ô, là một s ố nguyên, ví dụ “2”.

CELLPADDING: Khoảng cách từ vi ền ô đế n nội dung chứa trong ô, là một s ố nguyên, ví dụ “2”.

VALIGN: Nội dung ở ph ần đầu ô “TOP”, giữa ô “MIDDLE”, cuối ô “BOTTOM”.

7/17/2019 Webserver s7 - 1200



19Bảng trong HTML

Bài tập nhỏ Hãy soạn một trang HTML có nội dung như sau:

CODE

<HTML>

<HEAD>


<TITLE>Hệ th ống giám sát</TITLE>

</HEAD>

<BODY>

<TABLE border="2" cellspacing="0" cellpadding="0" align="center">

<TR HEIGHT="10" align="center">

<TD WIDTH="100">Module</TD>

<TD WIDTH="200">Mô tả</TD>

<TD WIDTH="100">Trạng thái</TD>

</TR>

<TR HEIGHT=”10”>

<TD WIDTH="100">M1</TD>

<TD WIDTH="200">Động cơ kéo số 1</TD>

<TD WIDTH="100">Đang chạy</TD>

</TR>

<TR HEIGHT="10">

<TD WIDTH="100">M2</TD>

<TD WIDTH="200">Động cơ kéo số 2</TD>

<TD WIDTH="100">Đã dừng</TD>

</TR>

</TABLE>

</BODY>

</HTML>

7/17/2019 Webserver s7 - 1200




Lưu lại và mở b ằng một trình duyệt b ất kì ta được k ế t quả như sau:

Webserver và AWP

Standard Webpages

S7-1200 cung c ấ p s ẵn trang web dạng chu ẩn cung c ấ p các thông tin cơ bản v ề PLC. Để truy cập

được trang này, bạn phải kích hoạt chức năng webserver trên PLC theo các bước sau:

Click phải vào PLC c ần kích hoạt, chọn Properties

1

2

7/17/2019 Webserver s7 - 1200



21Standard Webpages

Cửa s ổ c ấ u hình PLC hiện ra, click chọn mục Webserver, sau đó check vào ô Enable… để

kích hoạt

Hộp thoại Security Note hiện ra, click OK để ti ế p tục

Sau đó Click OK ở cửa s ổ c ấu hình để hoàn t ấ t

1

2

7/17/2019 Webserver s7 - 1200




Như vậy chúng ta đã hoàn tấ t việc kích hoạt tính năng Webserver trên S7-1200, bây giờ

chúng ta sẽ mở trình duyệt để truy cập vào server trên PLC. Mở trình duyệt, nhập địa chỉ IP của PLC vào thanh địa chỉ r ồi nh ấn Enter. Sau đó bạn sẽ th ấ y trang welcome xu ấ thiện, click Enter để ti ế p tục.

Để điều khi ển và giám sát PLC, bạn c ần đăng nhập vào Webserver với Name là admin và

khung password chừa tr ống. Trường hợp bạn đã cài đặt password cho PLC, hãy đăngnhập b ằng password đã tạo.

Sau khi đăng nhập, trang đầu tiên (Start Page) sẽ được hi ển thị như sau.

Trang này hi ển thị các thông tin v ề PLC như tên, địa chỉ IP và tác vụ cơ bản là RUN/STOPFLASHLED…

7/17/2019 Webserver s7 - 1200



23Standard Webpages

Ti ế p theo bạn hãy xem qua trang Variable Status.

Trang này cho phép chúng ta xem và thay đổi trạng thái của một bi ế n b ấ t kì trên PLC

tương tự Watch Table trên TIA Portal.

K ế ti ế p là Diagnostic Buffer.

Trang này hi ển thị thông tin v ề lịch sử hoạt động của PLC, ta có th ể dựa vào các thông

tin đó để ch ẩn đoán lỗi cho PLC.

Datalogs

Trang này hi ển thị các file Log được lưu trên PLC nế u bạn dùng chức năng Data Logging.Tại trang này, chúng ta có th ể download file log ở dạng excel v ề thi ế t bị để xem.

7/17/2019 Webserver s7 - 1200




Cu ối cùng là trang Update Firmware

Trang này cho phép cập nhật firmware của PLC ngay trên trình duyệt.

Bạn có th ể tự mình duyệt qua các trang còn lại để n ắm được các thành ph ần có trong

Standard Webpage.

User Defined Webpage

Standard Webpage có th ể đáp ứng được các yêu c ầu cơ bản trong giám sát và điều khi ển. Tuy

nhiên để tạo sự thuận lợi cho người dùng cu ối, chúng ta c ần một trang web với giao diện trực

quan hơn. Do vậy Siemens đã hỗ trợ thêm hình thức User Defined Webpage.

Tài liệu này sẽ tập trung vào việc hướng d ẫn bạn tạo một trang web theo ki ểu User Defined

Webpage.

AWPĐể tạo một trang User Defined Webpage, bạn c ần tìm hi ểu qua AWP.

Như đã trình bày ở ph ần đầu thì AWP chỉ là ph ần chú thích trong trang HTML.

7/17/2019 Webserver s7 - 1200



25User Defined Webpage

AWP bao g ồm 3 tác vụ cơ bản là đọc giá trị từ PLC (Read), ghi giá trị xu ống PLC (Write) và thayth ế giá trị dạng s ố b ằng dạng văn bản (Enum).

Đọc giá trị từ PLC

Cú pháp

CODE

:=<Tên bi ế n>:

AWP

7/17/2019 Webserver s7 - 1200




Ví dụ

Đọc giá trị từ ô nhớ I0.5

Đọc giá trị từ ô nhớ Q0.1

Đọc giá trị từ vùng nhớ MW10

Đọc giá trị từ Tag “Motor”

Đọc giá trị từ Tag “Sensor” trong Datablock1

Lưu ý:

Đố i v ớ i Tag, tên Tag phải được đặt trong cặ p d ấu “…” Còn với Datablock, tên Datablock cũng

phải đặt trong d ấu “…” nhưng tên biến trong Datablock đó thì không.

Bài tập nhỏ

Hãy soạn một trang HTML có nội dung như sau (Xem trang kế ):

CODE

:=I0.5:

CODE

:=Q0.1:

CODE

:=MW10:

CODE

:=”Motor”:

CODE

:=”Datablock1”.Sensor:

7/17/2019 Webserver s7 - 1200




Dòng lệnh [<meta http-equiv="Refresh" content="5" >] sẽ cài đặt trang web tự động refresh

sau 5 giây để cập nhật thông s ố. Bạn có th ể thay đổi giá trị “5” bằng một s ố khác tùy theo yêu

c ầu. Hãy lưu trang web này lại, chúng ta sẽ download và ki ểm tra trên PLC sau.

Ghi giá trị xu ố ng PLC

Cú pháp

Để ghi giá trị xu ống PLC, trước h ế t chúng ta c ần khai báo bi ế n mu ốn ghi giá trị

Sau đó bạn dùng một form với phương thức POST để ghi giá trị vào bi ế n. Ch ẳng hạn:

Form text input

CODE

<HTML>

<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<meta http-equiv="Refresh" content="5" >

<TITLE>S7 1200 Webserver</TITLE>

</HEAD>

<BODY>

<P>Trạng thái của Bit I0.0: :=I0.0:</P>

</BODY>

</HTML>

CODE



CODE


<form method="post">

<p><Dòng mô tả>: <input name='<Tên bi ế n>' type="text">

</p>

</form>

7/17/2019 Webserver s7 - 1200




Form select

Ví dụ

Dùng text input

Form này thực hiện ghi giá trị vào Tag “Tank Level”.

CODE



<select name='[Tên bi ế n]'>

<option value=:[Tên bi ế n]:> </option>

<option value=[Giá trị 1]>[Tùy chọn 1]</option>

<option value=[Giá trị 2]>[Tùy chọn 2]</option>

</select>

<input type="submit" value="[Tên nút nh ấ n]">

</form>

CODE




<p>Cài đặt mức nước: <input name='"Tank_Level"' type="text">

</p>

</form>

7/17/2019 Webserver s7 - 1200




Dùng Select form

Form này cho phép lựa chọn giá trị là On hoặc Off cho Tag “Switch”, sau khi chọn xong nh ấ n

“Xác nhận” để gửi dữ liệu v ề PLC.

Bài tập nhỏ

Hãy soạn một trang HTML có nội dung như sau:

CODE




<select name='"Switch"'>

<option value=:"Switch":> </option>

<option value=1>On</option>

<option value=0>Off</option>

</select><input type="submit" value="Xác nhận"></form>

CODE





<HTML>

<HEAD>



</HEAD>

<BODY>


<select name='"Switch"'>

<option value=:"Switch":> </option>

<option value=1>On</option>

<option value=0>Off</option>

</select><input type="submit" value="Xác nhận"></form>

</BODY>

</HTML>

7/17/2019 Webserver s7 - 1200




Ở trang này ta không c ần dòng lệnh tự refresh do chỉ dùng để điều khi ển chứ không giám sát.

Hãy lưu trang web này lại, chúng ta sẽ download và ki ểm tra trên PLC sau.

Thay th ế giá trị s ố b ằng văn bản

Trong thực t ế đối với người dùng cu ối (end-user), việc giám sát hệ th ống thông qua những con

s ố là sự phi ền toái. Có nghĩa là trang web của chúng ta kém thân thiện với người dùng.

Ch ẳng hạn bạn có 2 giá trị của một bi ế n là 0 hoặc 1. Nhưng thay vì sử dụng 2 giá trị này để hi ển

thị, ta có th ể dùng 2 từ g ần gũi với người dùng hơn là “Bật” “Tắt”, “Chạy” “Dừng” hay “On”“Off”.

Ta có th ể làm được điều này thông qua Javascript. Tuy nhiên, S7-1200 đã hỗ trợ s ẵn câu lệnh

giúp bạn thực hiện điều này một cách d ễ dàng. Đó chính là Enum.

Cú pháp

Để sử dụng Enum, trước h ế t bạn c ần phải khai báo.

Sau đó bạn sẽ xác định bi ế n nào sử dụng Enum này.

Ví dụ

Khi Tag động cơ mang giá trị 0, S7-1200 sẽ tương đương giá trị này với dòng chữ “Đã dừng”.

Khi Tag động cơ mang giá trị 1, S7-1200 sẽ tương đương giá trị này với dòng chữ “Đang chạy”.

CODE



CODE



CODE





7/17/2019 Webserver s7 - 1200




Bài tập nhỏ

Hãy soạn một trang HTML có nội dung như sau:

Hãy lưu trang web này lại, chúng ta sẽ download và ki ểm tra trên PLC sau.

CODE













<HTML>

<HEAD>


<meta http-equiv="Refresh" content="5" >


</HEAD>

<BODY>

<P>Trạng thái của Bit Start: :=”Start”:<P>

</BODY>

</HTML>

7/17/2019 Webserver s7 - 1200




Làm việc với Webserver S7-1200

Download chương trình và nạp trang web xu ố ng PLC

Mở TIA Portal và kích hoạt tính năng Webserver như đã hướng d ẫn ở mục Standard Webpage.

Tại mục User-defined webpage, click chọn đường d ẫn đến thư mục chứa file HTML mà bạn vừa

tạo trong bài tập nhỏ ở ph ần Enum.

1

7/17/2019 Webserver s7 - 1200




Sau đó xác định file HTML được mở trong mục Default HTML Page

Click nút Generate blocks để TIA Portal ti ế n hành đóng gói dữ liệu web thành các Datablock

Hãy chú ý mục Web DB number

Click OK để hoàn t ấ t quá trình khai báo User-defined webpage.

2

3

7/17/2019 Webserver s7 - 1200




Mở kh ối OB1

Tại mục Communication bên phải, click chọn mục WEB server

4

5

7/17/2019 Webserver s7 - 1200




Kéo thả kh ối WWW vào OB1

Khai báo các thông s ố cho kh ối WWW như trong hình, chú ý rằng giá trị tại chân CTRL_DB chính

là giá trị tại ô Web DB number.

Tạo một tag với tên “Start” và địa chỉ là I0.0 trên TIA Portal (ở mục PLC tags) sau đó lưu chươngtrình lại và Download xu ống PLC. Bây giờ bạn đã có thể truy cập vào Webserver trên PLC.

Truy cập User-defined webpage trên PLC

Mở trình duyệt, nhập địa chỉ IP của PLC vào thanh địa chỉ r ồi nh ấ n Enter. Ti ế p tục truy cập vào

Standard Webpage như đã hướng d ẫn ở ph ần trước.

Đăng nhập trang web với quy ền admin. Khi đăng nhập với quy ền admin, bạn sẽ được phép truy

cập vào t ấ t cả các thành ph ần của Webserver bao g ồm cả User-defined webpage.

Chuy ển đế n trang User Pages r ồi click vào đường d ẫn “Homepage of the application”

6

7/17/2019 Webserver s7 - 1200



Trang web bạn tạo sẽ hi ển thị trên trình duyệt, bây giờ hãy thay đổi trạng thái của bit Start

(chân I0.0) và quan sát sự thay đổi trên trang web. Ti ế p tục ki ểm tra với các trang web bạn đãvi ế t ở những ph ần trước để n ắm được các thao tác khi làm việc với User-defined webpage.

Lưu ý: khi muốn thay đổ i trang Web đang sử d ụng trong Project, bạn phải khai báo l ại các mục

HTML Directory và Default HTML page đồng thờ i xóa các kh ố i d ữ li ệu web đã tạo trước đó bằng

cách click vào nút Delete blocks. Sau đó click lại vào nút Generate blocks để t ạo kh ố i d ữ li ệu mớ ivà thao tác như bình thườ ng.

*****

Chúc bạn thành công