Siemens Web Server1

2016
Siemens S7 1200 web server

dersleri
Ertuğrul KÖMÜRCÜ
Bilişim Teknolojileri Öğretmeni
03.04.2016
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
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  range
 date  search
 datetime  tel
 datetime-local  time
 email  url
 month  week
 number
Detaylı bilgiye http://www.w3schools.com/html/html5_intro.asp adresinden ulaşabilirsiniz.
1
Hazırlayan: BT Ertuğrul KÖMÜRCÜ ertugrulkomurcu@hotmail.com
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">
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
Sayfa İçeriği... <body>
</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.
2
<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!
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.
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)
3
<!DOCTYPE html>
<html>
<head>
<title>CSS örneği</title>
<style>
body Css kodları sayfa içerisinde <style>

{ </style> etiketleri arasında Genel
metotta bu şekilde yazılır.
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.
4
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>
Kodların düzgün çalışabilmesi için yandaki
</body>
kodların index.html sayfası içerisinde yer
<script type="text/javascript">
alması ve aynı zamanda indirdiğimiz
$(document).ready(function(){
$.ajaxSetup({ cache: false });
jquery dosyasının da aynı dizinde
setInterval(function() { bulunması gerekmektedir.
$.get("IOCounter.htm", function(result){ <script> etiketleri arasına yazılan kodlar
$('#counter').text(result.trim()); jquery kodlarıdır ve burada yapılan işlem
}); IOCounter.htm sayfasından sayaç bilgisini
},1000); dinamik olarak almaktır.
});
</script>
</html>
5
Ş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 Şekil 2 – Siemens S7 1200 veya 1500 PLC
Şekil 3-PLC ve BİLGİSAYAR BAĞLANTISI
İ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.
6
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.
7
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.
8
Bu aşamada program kurulum ayarlarını yapacaktır. Bekleyiniz.
Configure a device ile PLC’mizi Ayarlamak için panele ulaşıyoruz.
9
Add new device ile yeni bir PLC ekliyoruz.
10
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.
11
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.
12
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.
13
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.
14
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.
15
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.
Son aşamada cihazımızla bağlantı kurmak için şekildeki gibi Go online sekmesine tıklayınız.
16
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.
Bu kısım daha sonra

1.Uygulamamız
tekrar ele alınacaktır!
için bir isim 2.Uygulama 3.Uygulamamızın
Şimdilik herhangi bir
giriyoruz dosyalarının ilk açılacak olan
ayar yapmadan
hepsinin yer aldığı ana sayfasını
aşamalara devam
klasörü seçiyoruz. seçiyoruz.
ediniz.
17
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.
1
2
Sürükle bırak
2. Sonraki aşamada Program blocks altında yer alan Add new block seçeneğiyle yeni bir data
block oluşturun.
Bir isim verin
18
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.
19
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: index.htm içerisine yazılan bu kod ile daha önce isim verdiğimiz
</body> “ertu” isimli data block içinde tanımlı olan sayaç değişkenine
</html> ulaşmış oluyoruz.
20
:="ertu".sayac:
Bu tanım şekildeki gibi data block(ertu) ile değişkene(sayaç)
ulaşma metodudur.
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.
kaydet
21
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)
Proje1
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.
22
Generate blocks diyerek DataBase dosyalarının derlenmesini sağlayınız.
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.
Dosyaları Download to device butonu ile PLC’ye yükleyerek devam ediyoruz.
Download to
device
23
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.

24
Finish ile işlemi

sonlandırıyoruz.
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
IP girdiğimizde otomatik
olarak sayfaya yönlendirme
işlemi gerçekleşecektir.
25
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.)
26
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.
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.
27
ÖRNEK 2: Jquery ile dinamik veri gösterimi.
Öncelikle daha önce linkini verdiğimiz (bkz:Jquery) kütüphane dosyalarını temin ediyoruz.
İ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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Javascript Örneği</title>
</head>
<body>
<label id="sayac1">0</label>
</body>
setInterval(function() {
Jquery kodları $.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.
28
<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.
$(document).ready(function(){ Bu değeri javascipt
$.ajaxSetup({ cache: false }); kodumuzda #’ile(id
setInterval(function() { demek) elde
Jquery kodları $.get("sayac.htm", function(result){ edebiliyoruz.
});
},1000);
});
</script>
$(document).ready(function(){ Jquery’nin yapısı gereği

yapılacak işlemler bu
... yapılacak işlemler
kod bloğu içinde
tanımlanmalıdır.
ready function sayfanın hazır
olma durumunda çalışacak
}); olan fonksiyondur.
$.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.
$.get("sayac.htm", function(result){
});
},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.
$.get("sayac.htm", function(result){
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.
29
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.
UserPages klasörümüzün
içeriği son olarak şekildeki gibi
olmalıdır.
sayac.htm
Her Saniye
'#sayac1'
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.
30
Ö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>
PLC’ye
</head>
kaydedilen
değer sayfada
<body>
görüntülenir. Girilen değer
:="ertu".okunan:
<form method="post"> PLC’ye gider
<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">
Form
methodumuz
<input name=' "ertu".okunan' type="text" />
“post” dur.
<button type="submit">Kaydet</button> Böylelikle form
verileri sunucuya
</form> yollanabilir.
Dosyaların yüklenmesi işlemi için aynı işlemleri tekrarlanması gereklidir.( bkz:Dosyaların Yüklenmesi)
31
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)
Ö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>
32
//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.
33

Siemens Web Server1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Siemens Web Server1

Uploaded by

Copyright:

Available Formats

2016

Siemens S7 1200 web server

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

1.TEMEL HTML BİLGİSİ

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

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

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

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

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

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

2.TEMEL CSS BİLGİSİ

Peki ne yapar bu CSS?

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

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)

body Css kodları sayfa içerisinde <style>

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

Css bu işlemi yaparken sayfada yer alan etiketleri

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

3.TEMEL JAVASCRIPT BİLGİSİ

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

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

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

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

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

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

Adresinden bu yazılımları temin edebilirsiniz.

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

Create new project ile yeni bir proje oluşturunuz.

Project name ile projenize bir ad belirleyebilirsiniz.

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

Şeklinde satın almış olduğunuz

Örn: CPU 1212C DC/DC/DC

ADD (ekle) Diyerek devam

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

Bu aşamada Web server aktif hale

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

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

The user is authorized to..

The user is authorized to..

Şekildeki gibi işaretlemeler

Son olarak parolamızı çift

Enter Password: admin

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

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

Accesible devices(erişilebilir cihazlar)

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

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

Bu kısım daha sonra

Bir isim verin

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

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

Web Server altından User-defined web

Default HTML page: index.htm olarak

Application name: Proje1 yazılabilir.

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

Derleme işlemi sonrası System

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

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

Yükleme işlemine Load

Finish ile işlemi