siemens s7 1200 web server dersleri · pdf file(örn: javascrip, css ve meta etiketleri)...

2016

Ertuğrul KÖMÜRCÜ

Bilişim Teknolojileri Öğretmeni

03.04.2016

Siemens S7 1200 web server dersleri

SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ

1 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]

GİRİŞ

Siemens S7 1200 PLC içerisinde barındırdığı WEB Sunucu(server) sayesinde plc içerisindeki

değişkenlerin bir internet sayfası arayüzü ile kontrol edilmesi(verilerin gösterilmesi ve yeni verilerin

dışarıdan eklenmesi) mümkün kılınmıştır.

Bu web server yalnızca HTML(Hyper Text Markup Leanguage) , CSS(Cascading Style Sheets)

ve JAVASCRIPT(Tarayıcı tabanlı script dili ve onunla geliştirilmiş Jquery kütüphanesi) kodlarını

destekler. Bu da demektir ki sunucu, adında server olmasına rağmen, bu plc ile sunucu tabanlı(server

side) bir programlama dilinin(php, asp, aspx, perl vs) kullanılmasının mümkün olmadığıdır!

Ancak yine de yapabileceklerimiz pek de az sayılmaz. Bu üç dili kullanarak da (HTML,CSS,

JAVASCRIPT) PLC için gerekli programlama işlemlerini kullanıcı taraflı(client side)

gerçekleştirebileceğiz.

1.TEMEL HTML BİLGİSİ

HTML dili bir işaretleme dilidir. Yani bu dil ile sadece ve sadece sayfa tasarımı yapılabilmektedir!

HTML içerisinde normal bir programlama dili değildir(c,c# java vs gibi bir dil değildir). Özetle Html

içerisinde bir değişken tanımlaması yapılamaz. Benzer şekilde bir döngü(for, while) veya bir kontrol

yapısı(if,switch case) kullanılamaz.

HTML ile sayfa üzerindeki nesnelerin(örn: resim, yazı, video) nerede, hangi boyutlarda, hangi renkte,

hangi sırada yer aldığı gibi bilgilerin tanımı etiket(tag) denen kod yapısı sayesinde bir hiyerarşi

içerisinde gerçekleşmektedir.

HTML sürümlerinin sonuncusu 5.0 hayatımıza girdiğinden beri sayfalarımızı daha dinamik ve daha

fazla tümleşik kontrol kullanım imkanı doğmuştur. İnput(form elemanı) tiplerine yeni eklenen

özelliklerle eskiden CSS ve Javascript kullanarak birkaç beyin fırtınası ile gerçekleştirilen kontroller

böylelikle tek satır tanımlama ile yapılabilir hale gelmiştir. Örn:

<input type="number" name="quantity" min="1" max="5"> number(sayı) türde veri

girişi yeni eklenmiştir

HMTL 5’in desteklediği input türleri şunlardır.

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

Detaylı bilgiye http://www.w3schools.com/html/html5_intro.asp adresinden ulaşabilirsiniz.

http://www.w3schools.com/html/html5_intro.asp



Sözü fazla uzatmadan html kodlarının Web server için yeterli seviyede anlatımına geçelim.

Aşağıda temel bir HTML sayfasında bulunması gereken kodlar yer almaktadır.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Sayfa Başlığı</title>

</head>

<body>

Sayfa İçeriği...

</body>

</html>

Burada birkaç noktayı açıklamakta fayda var.

<!DOCTYPE html>

Bu kod satırı HTML 5 için mutlaka sayfa direktifi olarak yazılmalıdır. Tarayıcıların sağlıklı bir şekilde

sayfalarımızı Html 5 standardında yorumlaya bilmesi için bu kurallara uymamız hatalar konusunda

alınacak önlemlerin başında gelir.

Html’de her etiket(tag) istisnalar haricinde mutlaka kapatılmadır.

Örn: <html> … </html> etiketleri ile sayfa içinde html kodlarının başlangıç ve kapsamları belirtilmiş

olur. <html> ile etiket açılmış ve </html> ile etiket kapatılmış olur.

Aynı şekilde;

<head>………….. </head> kısmı da bu kurala uymuştur.

Html de sayfa tasarımları insan vücuduna benzer. Yani Html bir baş kısım(<head>) ve bir

gövdeden(<body>) oluşur.

Nasıl düşüncelerimiz beynimizin içerisinde yer alır ve sadece biz biliriz <head> kısmı da öyledir. Bu

alana yazılan kodların sayfa üzerinde fiziksel bir karşılığı yoktur. Ancak bu kısma yazılan bir çok kod ile

(örn: javascrip, css ve meta etiketleri) sayfa yönetimi ve içeriklerin yönetimi

gerçekleştirilebilmektedir.

<head> içindeki <title> </title> kısmına yazılan yazılar sayfanın sekme bölümünde başlık olarak

görünürler.

<meta charset="UTF-8"> bu kısım ile sayfadaki yazılarımızın Türkçe karakter sorunu

yaşamaması için önlem almış oluyoruz.

<body>

<head>



<body> ise sayfa üzerindeki tüm görsel işitsel kontrollerin( yazıların, butonların, textboxların vs) yer

aldığı kısımdır. Özetle sayfa tasarımı bu kısımda yapılır!

2.TEMEL CSS BİLGİSİ

CSS(Cascading Style Sheets) yani çok katmanlı stil sayfaları bize Html’in yanı sıra daha güçlü ve esnek

sayfa tasarımları yapabilme ve yönetebilme şansını getirmiştir. Özellikle CSS 3.0 ile kod yapısı birçok

tarayıcıda uyum göstermiş ve tek bir yerden bir çok sayfanın tasarımı daha yönetilebilir bir hal

almıştır.

Css kodları ile HTML kodları birbiri içerisine geçmiş olan klasik tasarım anlayışının yerine Html

etiketleri ile stil özelliklerini ayrı ayrı tanımlama şansını tanımaktadır.

Peki ne yapar bu CSS?

Css kodları html etiketlerini şekillendirir, renklendirir ve kısmen de olsa dinamiklik kazandırı.

Yani bir butonun renk, boyut, konum vs aklınıza gelebilecek tüm özelliklerini değiştirebilir. Kısacası

tüm html etiketlerinin tasarlanması artık klasik html özelliklerinin yanında css kodları ile

gerçekleştirilmektedir.

Css kodları web sayfalarımızda 3 şekilde kullanılabilir.

1.si Global tanımla(css dosyasını ayrı bir sayfa olarak hazırlamak ve kullanılan sayfaya import(dahil)

etmek)

2.si Genel tanımlama( biz örneklerimizi genellikle bu yöntemle gerçekleştireceğiz)

3.sü Satır içi( klasik html içerisinde kullanım)

Bu noktada şunu belirtmeliyim. HTML, CSS ve Javascript kodları tarayıcı sayfalara bağımlı olarak

yorumlandığından dolayı her tarayıcıda özelliklede internet Explorer’da sayfa görüntüsü

istediğimiz gibi olmaya bilir. Css kodumuzu entegre etmede veya javascript kodunu %100

desteklemede sıkıntı yaşayabiliriz. Bu yıllardır Web geliştiriciler tarafından bilinen ve tarayıcılara

özgü önlem alınarak çözülebilen bir problem olarak halen karşımızda durmaktadır.



<!DOCTYPE html>

<html>

<head>

<title>CSS örneği</title>

<style>

body

{

background-color:red;

}

</style>

</head>

<body>

</body>

</html>

Yukarıdaki kodun çalıştırlması sonucu ekran

görüntüsü yandaki gibi olacaktır.

Burada

body

{

background-color:red;

}

ile body yani sayfanın tamamı background-

color:red; ile kırımızı renge boyanmıştır.

Css bu işlemi yaparken sayfada yer alan etiketleri

(body) kullanabileceği gibi etiketlerin içinde

yapacağımız class(sınıf) veya id(identy)

tanımlamalarıyla da görünüm üzerinde etkisini sürdürebilir. Bu kısım ile ilgili uygulama aşamasında

gerekli bilgi verilecektir.

Detaylı kullanım için referans sayfasına bakabilirsiniz. http://www.w3schools.com/css/default.asp

3.TEMEL JAVASCRIPT BİLGİSİ

İlk olarak Netscape internet tarayıcısı ile hayatımıza giren javascript bugün kendisiyle geliştirilmiş

birçok kütüphanenin atasıdır. Örn: jquery farklı bir dil gibi görünebilir ancak tarayıcı tabanlı javascript

sayesinde hazırlanmış ve fonksiyonel hale getirilmiş bir uygulama kütüphanesinden başka bir şey

değildir.

Css kodları sayfa içerisinde <style>

</style> etiketleri arasında Genel

metotta bu şekilde yazılır.

http://www.w3schools.com/css/default.asp



Peki bu dil ile ne yapılır? Niye gerek duyulmuştur?

Javascript dili tarayıcı da çalışan ve aslında bir programlama dilinde olması gereken tüm özellikleri

kendisinde barındıran bir script dilidir. Script dili olması şu anlama gelir. Yazdığınız tüm kodlar

önceden derlenmeye gerek olmadan web sayfası yüklendiği an veya bir butona tıklandığında vs bir

olayın gerçekleşmesi esnasında derlenerek o an çalışabilen kodlardır.

Bu nedenle bu dil normal bir programlama dilinin tüm güçlü yönlerini üzerinde taşımasının yanında

hiçbir platforma bağımlı olmadan çalışabilme ve kullanıcının bilgisayarının kaynaklarını kullanarak

performans sağlaması yönlerinden çok büyük bir avantaja sahiptir.

Javascript içinde değişken tanımlaması yapılabilir. İf else gibi kontroller gerçekleştirilebilir. Döngü

oluşturulabilir veya bir olaya(event) bağlı işlemler bir fonksiyona atanarak gerçekleştirilebilir.

Bunların yanında bu dil ile birlikte çalıştığı tarayıcının tüm özelliklerine(ekran boyutu, yeni sayfa açma,

url bilgisi vs.. ) elde edilerek farklı uygulamalar gerçekleştirmektedir. Biz Web server içerisinde daha

ziyade bu kod yapısını Asenkron veri iletişimi için kullanacağız. Yani sayfamızdaki verileri dinamik

olarak gönderip almak için bu dilin güçlü yanlarından Jquery Kütüphanesi kullanarak yararlanacağız.

Normal de tarayıcıların javascript desteği bulunmaktadır ancak Jquery bir kütüphane olduğu için ve

Web serverda kullanılabilmesi için bu kütüphanenin elde edilmesi gerekmektedir.

http://code.jquery.com/jquery-2.2.2.min.js adresinden kütüphanenin sıkıştırılmış halini

edinebilirsiniz. http://www.w3schools.com/js/default.asp adresinden javascript ile ilgili detaylı bilgi

alabilirsiniz.

Örnek bir Jquery ise söyle tanımlanabilir.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Javascript Example</title>

<script src="jquery-2.2.2.min.js"></script>

</head>

<body>

<label id="counter">0</label>

</body>

<script type="text/javascript">

$(document).ready(function(){

$.ajaxSetup({ cache: false });

setInterval(function() {

$.get("IOCounter.htm", function(result){

$('#counter').text(result.trim());

});

},1000);

});

</script>

</html>

Kodların düzgün çalışabilmesi için yandaki

kodların index.html sayfası içerisinde yer

alması ve aynı zamanda indirdiğimiz

jquery dosyasının da aynı dizinde

bulunması gerekmektedir.

<script> etiketleri arasına yazılan kodlar

jquery kodlarıdır ve burada yapılan işlem

IOCounter.htm sayfasından sayaç bilgisini

dinamik olarak almaktır.

http://code.jquery.com/jquery-2.2.2.min.js

http://www.w3schools.com/js/default.asp



Şimdiye kadar olan kısımda Web server için gerekli olan kod yapılarına kısaca baktık. Şimdi ise yavaş

yavaş uygulama düzeyinde anlatımlarla konuyu ele alacağız.

1.Aşama: Plc ile Bilgisayarın Haberleşmesi(Bağlanması)

Şekil 1-CAT5 veya CAT6 kablo

İlk olarak sahip olduğumuz plc’yi bilgisayarımızla iletişim kurabilmesini sağlamak için cat5 veya cat6

diye bilinen normal Ethernet kablosunu kullanarak birbirine bağlamalıyız.

Şekil 2 – Siemens S7 1200 veya 1500 PLC

Şekil 3-PLC ve BİLGİSAYAR BAĞLANTISI



2.Aşama: Bilgisayara Siemens TIA Portal V13 Programını kurmak

Bu aşamada PLC’nize uygun olan Portal yazılımına ihtiyacınız olacak.

https://support.industry.siemens.com/cs/document/106448872/simatic-step-7-(tia-portal)-v13-sp1-

trial-download?dti=0&lc=en-WW

Adresinden bu yazılımları temin edebilirsiniz.

Kurulum aşaması sisteminize bağlı olarak yarım saat ile 1 buçuk saat arasında sürebilir. Bu aşamada

sabırla kurulum süreçlerini tamamlayınız.

Yazılım için en az Windows 7 Pro. sp1 yüklü ve en az C sürücünüzde 4GB boş yeriniz olmalı. Program

çok fazla ram tükettiği için de yine en az 2GB ram’e ihtiyacınız var.

Kurulumdan sonra karşınıza aşağıdaki gibi masaüstünüzde programın kısa yolu görünecektir.



3.Aşama: Siemens TIA Portal ile PLC kurulum ayarları(ilk proje)

Programı çalıştırdığımızda karşımıza ilk olarak aşağıdaki ekran gelecek ve bizden yeni proje açmamızı

isteyecektir.

Create new project ile yeni bir proje oluşturunuz.

Project name ile projenize bir ad belirleyebilirsiniz.

Path seçeneğiyle projenizi nerede depolayacağınızı seçin. Author kısmında proje yazarı bilgileri ve

Comment kısmında proje için gerekli açıklama bilgilerini yazabilirsiniz. Biz varsayılan olarak Create

deyip bu aşamayı geçiyoruz.



Bu aşamada program kurulum ayarlarını yapacaktır. Bekleyiniz.

Configure a device ile PLC’mizi Ayarlamak için panele ulaşıyoruz.



Add new device ile yeni bir PLC ekliyoruz.



Bu panelden SIMATIC S7-1200

ailesinin işlemcilerini

görüntülemek için sırasıyla

önce

>SIMATIC S7-1200

>CPU

>CPU version

Şeklinde satın almış olduğunuz

PLC’nin üzerinde yer alan

versiyonu bularak

seçeneklerde ilerleyiniz.

Örn: CPU 1212C DC/DC/DC

6ES7 212-1AE40-0XB0

ADD (ekle) Diyerek devam

ediyoruz.



Ve işte nihayet karşımızda PLC’miz ver Portal programımız. Artık Programlamaya başlayabiliriz.

4.Aşama: PLC konfigürasyonları(ayarlar)

Properties sekmesinde yer alan Web Server sekmesinden Activate web serber on this module

seçeneğini işaretleyiniz.

Bu aşamada Web server aktif hale

getirilir. Güvenlik önlemlerinin

alınması için (dışarıdan cihaz

erişimini açık hale getireceğimiz için)

bizi uyarmaktadır.



Permit access only with HTTPS (sadece güvenli bağlantı) seçeneğini iptal ederek devam ediniz.

İkinci aşama Web server’a erişim için bir kullanıcı yaratmaktır.

Biz bu aşamada Kullanıcı adı:admin ve Parola:admin olacak şekilde bir yönetici kullanıcısı yaratacağız

ve bu kullanıcıya tüm erişim yetkilerini tanımlayarak sunucu üzerinde oturum yöneticisi

tanımlamasını yapmış olacağız.

Öncelikle yine web server sekmesinden User management sekmesine ulaşıyoruz.

<Add new user> kısmına yeni bir kullanıcı adı giriyoruz. Yani admin.



The user is authorized to..

Bu kısımdan kullanıcımızı

yönetici yetkisiyle

yetkilendiriyoruz. Yani tüm

seçenekleri işaretli hale

getiriyoruz.

The user is authorized to..

Şekildeki gibi işaretlemeler

yapıldığında Minimum

yazan kısmın

Administrative şeklinde

değiştiğini görmemiz

gerekir.

Password

Son olarak parolamızı çift

tıklayarak açılan

Enter Password: admin

Confirm Password: admin

girerek onaylıyoruz.



Cihazın ip’sinin ayarlanması aşamaları.

Yukarıdaki panelleri kullanarak önce cihazımızın bağlı olduğu Ethernet portunu kontrol eden nic

kartının(burda Broadcom 440x10/100) Online & diagnostics kısmına oradan da açılan panelden

Functions kısmına ulaşarak IP adresinizi değiştirebilirsiniz.

Varsayılan adres 192.168.0.1 olarak gelecektir. Biz adresimizi 192.168.0.62 olarak değiştirdik siz böyle

de bırakabilirsiniz.

Ancak burada unutulmaması gereken şey bu adresin web server’a tarayıcı(chrome, iexplorer vs)

üzerinden erişim için kullanılacağından unutulmaması gerektiğidir.



Son aşamada cihazımızla bağlantı kurmak için şekildeki gibi Go online sekmesine tıklayınız.

Sonraki aşamada CTR+U kısa yolu veya

Online menüsünden Accesible

devices(erişilebilir cihazlar) sekmesi

seçilerek devam edilir.

Accesible devices(erişilebilir cihazlar)

sekmesinde eğer ip adresimizde

herhangi bir hata yok ise cihazımız

görülecektir.

Show diyerek cihazı görüntülüyoruz.



5.Aşama: Web Server’a dosya yükleme(HTML,CSS,JAVASCRIPT)

Online olarak gördüğümüz ve bağlantı testi yaptığımız PLC’nin artık içerisine bir data yükleyebiliriz.

Bunun için öncelikle cihazımızı tekrar Offline mode çekmemiz gerekmektedir.

PLC’mizi seçerek tekrar Properties penceresinden >Web Server alanına oradan da >User-defined

Web pages(kullanıcı tanımlı web sayfaları) ulaşıyoruz.

1.Uygulamamız

için bir isim

giriyoruz

2.Uygulama

dosyalarının

hepsinin yer aldığı

klasörü seçiyoruz.

3.Uygulamamızın

ilk açılacak olan

ana sayfasını

seçiyoruz.

Bu kısım daha sonra

tekrar ele alınacaktır!

Şimdilik herhangi bir

ayar yapmadan

aşamalara devam

ediniz.



Buraya kadar olan kısımda sadece neyin ne şekilde yapılacağından bahsettik. Şimdi ise program

içerisinde genel ayarların yapımından söz edeceğiz.

1. Main Block içerisine web server senkronizasyonunu sağlayacak olan bir www_function

eklemek. Bu işlem sayesinde PLC’miz artık tarayıcı(browser) üzerinden daha önceden

verdiğimiz IP adresi(192.168.0.62) ile uzaktan erişilebilir olacaktır. Başka bir değişle User

Page(bizim oluşturduğumuz web sayfaları) erişimi sağlanmış olacaktır.

2. Sonraki aşamada Program blocks altında yer alan Add new block seçeneğiyle yeni bir data

block oluşturun.

1 2

3

Sürükle bırak

Bir isim verin

1

2

3

4



3. Oluşturduğunuz data block Program blocks altında aşağıdaki gibi görüntülenecektir. Çift

tıklayarak içerisine aşağıdaki alanları veri türleri int(sayı) olacak şekilde giriniz.

Bu alanlar sayac, okunan ve yazilan şeklindedir. Böylelikle web sayfası üzerinden değer

alırken veya değer gönderirken kullanacağımız değişkenlerimizi tanımlamış oluyoruz.

4. Son olarak Main Block’a tekrar dönerek içerisini aşağıdaki gibi yapılandırıyoruz. Bir

counter(sayaç) ekleyerek işe başlıyoruz.

Network1 ve

Network2

şekildeki gibi

yapılandırılacaktır.



5. Simdi de sırasıyla web sayfalarımızı oluşturacağız.

Daha önce anlatıldığı gibi sayfalarımız HTML, CSS ve birazda JAVASCRİPT(jquery) ile

oluşturulacaktır. Bunun için öncelikle bilgisayarınızda herhangi bir isimle (örn:UserPages) bir

klasör oluşturunuz. Çünkü PLC’içerisine göndereceğimiz sayfamıza ait tüm dosyalar bir klasör

içerisinde gönderilmektedir. Burada belirtilen index.htm (uzantısı .html’de olabilir) sayfası ise

varsayılan olarak ayarlı ilk açılış sayfamız olacaktır. İstenirse bu sayfa adları farklı verilebilir.

Ancak PLC WEB SERVER parametrelerinden daha önce belirtiğimiz şekilde bu sayfanın

seçilmesi gerekecektir. (bkz:anasayfa)

Yukarıdaki örnek html sayfası sadece sayfaya Hello Word (merhaba dünya) yazmaya yarar.

Biz bu temel HTML omurgası üzerine eklemeler yaparak PLC değişkenlerini sayfamızda

göstereceğiz veya form elemanları üzerinden PLC değişkenlerinin değerlerini gireceğiz.

1.Örnek: Counter(sayaç) değerini sayfada görüntülemek

<!DOCTYPE html>

<html>

<head>


<title>Sayaç Örneği</title>

</head>

<body>

:="ertu".sayac:

</body>

</html>

index.htm içerisine yazılan bu kod ile daha önce isim verdiğimiz

“ertu” isimli data block içinde tanımlı olan sayaç değişkenine

ulaşmış oluyoruz.



2. İndex.html’in oluşturulması

HTML sayfaları herhangi bir text(metin) editörü ile yazılabilir. Biz ilk etapta notepad++ ile bu

kodlarımızı oluşturacağız.

https://notepad-plus-plus.org/download/v6.9.1.html sayfasında güncel sürümü

edinebilirsiniz.

Kurulum sonrası programı açarak kodlarımızı yazıp kaydediyoruz.

:="ertu".sayac: Bu tanım şekildeki gibi data block(ertu) ile değişkene(sayaç)

ulaşma metodudur.

kaydet

https://notepad-plus-plus.org/download/v6.9.1.html



Kaydet butonunu tıkladıktan sonra sayfamızı index.htm ismiyle, data önce oluşturduğumuz

UserPages isimli klasör içerisine kaydediyoruz.

3. Dosyaların yüklenmesi

Artık geriye sadece tüm klasörü web server yüklemek kaldı.(Bkz:User Defined Web Pages)

Web Server altından User-defined web

pages sekmesinden HTML directory’ye

tıklayarak daha önce oluşturduğumuz

UserPages klasörünü(içinde index.htm

olan) seçiyoruz.

Default HTML page: index.htm olarak

kalacaktır.

Application name: Proje1 yazılabilir.

Proje1



Generate blocks diyerek DataBase dosyalarının derlenmesini sağlayınız.

Dosyaları Download to device butonu ile PLC’ye yükleyerek devam ediyoruz.

Derleme işlemi sonrası System

blocks içinde Web Server altında

şekildeki gibi DB 333 ve DB 334

şekilde(daha fazla da olabilirler) veri

tabanı dosyalarının oluştuğunu

görebilirsiniz. Artık dosyalarımızı

sunucumuza yükleyebiliriz.

Download to

device



Derleme işlemi için bir süre bekleyebilirsiniz.

Yükleme işlemine Load

diyerek başlayabilirsiniz.

Yükleme işlemi

Konfigurasyon ayarlarından

sonra son bulacaktır.



2. PLC’ye tarayıcı üzerinden erişim

Tarayıcımızı(Chrome, Firefox, Iexplorer vs) açarak IP adresimizi(192.168.0.62) giriyoruz

Finish ile işlemi

sonlandırıyoruz.

IP girdiğimizde otomatik

olarak sayfaya yönlendirme

işlemi gerçekleşecektir.



Daha önceden ayarladığımız Admin

kullanıcısı ile oturum

açıyoruz.(bkz:oturum)

Kullanıcı adı: admin

Parola: admin

Sayfalarımıza

ulaşmak için

tıklıyoruz.

Sayfalarımıza ulaşmak için

tıklıyoruz. (Burada Uygulama

Sayfasına verdiğimiz ismin

göründüğünü fark etmişsinizdir.)



Böylelikle ilk uygulamamızı gerçekleştirmiş bulunuyoruz. Bir sonraki örneğimizde sayaç değerini

dinamik olarak sayfamızda göstermek için yapılması gereken(javascript kodu ekleme) işlemlere göz

atacağız.

Sayfamızı yenilediğimiz taktirde

sayaç değerinin arttığını

rahatlıkla görebilirsiniz.

Ayrıca Portal ekranından da data

block altından değişkenlerimizin

değerini kontrol edebiliriz.



ÖRNEK 2: Jquery ile dinamik veri gösterimi.

Öncelikle daha önce linkini verdiğimiz (bkz:Jquery) kütüphane dosyalarını temin ediyoruz.

<!DOCTYPE html>

<html lang="en">

<head>


<title>Javascript Örneği</title>


</head>

<body>

<label id="sayac1">0</label>

</body>





$.get("sayac.htm", function(result){

$('#sayac1').text(result.trim());

});

},1000);

});

</script>

</html>

<script src="jquery-2.2.2.min.js"></script> bu kod ile

kütüphanenin yolunu ve ismini src kısmına yazarak belirtiyoruz.

İndirdiğiniz jquery

sürümünü UserPages

klasörümüze şekildeki gibi

yerleştiriyoruz. İsterseniz

bu dosyayı bir başka

klasör içerisine de

koyabilirsiniz ancak html

kodlarında dizin yolunu

değiştirmeniz

gerekecektir.

Jquery kodları



<label id="sayac1">0</label> bu kod satırı ile de sayaç değerini sayfa üzerinde

bir label’da(etiket) göstermek için id değerini sayac1 olarak veriyoruz.







});

},1000);

});

</script>


... yapılacak işlemler



});

$.ajaxSetup({ cache: false }); bu kod satırı asenkron(dinamik) olarak

sayfada işlem yapabilmek için yazılmalıdır. cache:false ile hafızada

bilginin saklanmayacağı bildirilmiştir. Varsayılan değeri true’dur.



$('#sayac1').text(result.trim()); });

},1000);

setInterval komutu 1000 ile yazılan kısımdaki milisaniye cinsinden değere göre

süre dolduğunda kendini otomatik çağıran bir fonksiyondur. Yani her 1000 ms

(1sn)’de bir kendisini çağıran ve içerisindeki işlemleri yerine getiren bir

fonksiyondur.



Bu kodlar ile sayac.htm sayfasını(birazdan yazacağımız) değer olarak alıp #sayac1

id’si ile etiketlediğimiz kısımda göstermeye yarıyor.

Jquery kodları

Bu değeri javascipt

kodumuzda #’ile(id

demek) elde

edebiliyoruz.

Jquery’nin yapısı gereği

yapılacak işlemler bu

kod bloğu içinde

tanımlanmalıdır. ready function sayfanın hazır

olma durumunda çalışacak

olan fonksiyondur.



sayac.htm içeriğinin ayarlanması

sayaç sayfamızın içerisinde sadece PLC’den elde ettiğimiz sayaç değişkeni

tanımlaması bulunacaktır.

Yani :="ertu".sayac: ifadesi yer alacaktır.

Kod çevrimi yukarıdaki şekilde açıklanmıştır. Her saniye sayac.htm içeriği

#sayac1 id’li etikette gösterilecek şekilde ayarlanmıştır.

UserPages klasörümüzün

içeriği son olarak şekildeki gibi

olmalıdır.

sayac.htm

Her Saniye

'#sayac1'

ÖRNEK 3: PLC’içerisine dışarıdan(formdan) bilgi göndermek ve almak.

Form’lar web sayfalarındaki bilgi girişi yaptığımız elemanları barındıran HTML yapısıdır.

Örn: kullanıcı adı ve parola girişi için kullandığımız metin kutuları, butonlar, açılır listeler, dosya

yükleme düğmeleri vs.. kısaca veri taşıyan her türlü nesne bizim için bir form elemanıdır.

http://www.w3schools.com/html/html_forms.asp detaylı bilgiyi buradan temin edebilirsiniz.

Sözü çok uzatmadan hemen ilgili kodlarımızın yazımına geçelim. Sayfamızın adı gonder.html



<!DOCTYPE html>

<html lang="en">

<head>


<title>Veri Girişi</title>

</head>

<body>

:="ertu".okunan:

<form method="post">

<input name='"ertu".okunan' type="text" />

<button type="submit">Kaydet</button>

</form>

</body>

</html>

 kod satırı mutlaka formumuzun

üstünde olması gereken kodların başında geliyor. Çünkü ancak bu direktif ile PLC

içindeki değişkenlere erişim sağlayabiliyoruz.

<form method="post">

<input name=' "ertu".okunan' type="text" />

<button type="submit">Kaydet</button>

</form>

Dosyaların yüklenmesi işlemi için aynı işlemleri tekrarlanması gereklidir.(bkz:Dosyaların Yüklenmesi)

Form

methodumuz

“post” dur.

Böylelikle form

verileri sunucuya

yollanabilir.

Girilen değer

PLC’ye gider

PLC’ye

kaydedilen

değer sayfada

görüntülenir.

http://www.w3schools.com/html/html_forms.asp

ÖRNEK 4: PLC’içerisine dışarıdan(formdan) bilgi göndermek ve almak(dinamik olarak).

Şimdiye kadar yapılan işlemleri tek bir uygulamada birleştirecek bir örnekle işlemlerimize devam

ediyoruz.

Bu örneğimizde yine Plc değişkenlerini formdan gönderdiğimiz veriyle değiştireceğiz ancak bu veriyi

dinamik olarak post işleminde sayfa gönderimini ajax(asenkron) ile yapacağız.

Öncelikle veriyi çekeceğimiz sayfamızın kodunu yazıyoruz.

okunan.htm sayfamızın içeriği:

:="ertu".okunan:

gonder.html sayfamızın içeriği: (Buradan yeniden düzenliyoruz.)



<!DOCTYPE html>

<html lang="en">

<head>


<title>Dinamik Veri</title>


</head>

<body>



<label id="okunan1" name="okunan1">:="ertu".okunan:</label>

</br>

<input id='degerim' type="text" />



<button>Güncelle</button>

</body>

UserPages klasörümüzün son hali

yandaki şekilde verilmiştir.

Tüm klasörü PLC’ye yükledikten sonra

yine IP adresimizden sayfamıza oturum

açarak ulaşıyoruz. (bkz:Oturum Açma)





//okunan.htm sayfasından her saniye içerik alınacak



$.get("okunan.htm", function(result){

$('#okunan1').text(result);

});

},1000);

//okunan değeri butona tıklandığında değiştirilecek

$("button").click(function(){

url="okunan.htm";

name='"ertu".okunan';

val=$('input[id=degerim]').val();

sdata=escape(name)+'='+val;

$.post(url,sdata,function(result){});

});

});

</script>

</html>

UserPages klasörümüzün son

hali yanda gösterilmiştir. Bu

dosyaları da yine sunucuya

yükleyerek sonucu test

edebilirsiniz.

siemens s7 1200 web server dersleri · pdf file(örn: javascrip, css ve meta etiketleri)...

Documents