Upload
vuduong
View
239
Download
7
Embed Size (px)
Citation preview
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
month
number
range
search
tel
time
url
week
Detaylı bilgiye http://www.w3schools.com/html/html5_intro.asp adresinden ulaşabilirsiniz.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
2 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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>
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
3 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
<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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
4 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
<!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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
5 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
6 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
Ş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
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
7 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
8 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
9 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
Bu aşamada program kurulum ayarlarını yapacaktır. Bekleyiniz.
Configure a device ile PLC’mizi Ayarlamak için panele ulaşıyoruz.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
10 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
Add new device ile yeni bir PLC ekliyoruz.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
11 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
12 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
13 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
14 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
15 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
16 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
17 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
18 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
19 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
20 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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>
<meta charset="utf-8">
<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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
21 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
22 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
23 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
24 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
25 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
26 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.)
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
27 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
28 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
Ö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>
<meta charset="utf-8">
<title>Javascript Örneği</title>
<script src="jquery-2.2.2.min.js"></script>
</head>
<body>
<label id="sayac1">0</label>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
setInterval(function() {
$.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ı
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
29 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
<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.
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
setInterval(function() {
$.get("sayac.htm", function(result){
$('#sayac1').text(result.trim());
});
},1000);
});
</script>
$(document).ready(function(){
... yapılacak işlemler
... yapılacak işlemler
... 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.
setInterval(function() {
$.get("sayac.htm", function(result){
$('#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.
$.get("sayac.htm", function(result){
$('#sayac1').text(result.trim());
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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
30 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
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'
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
31 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
Ö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
<!-- AWP_In_Variable Name='"ertu".okunan -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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>
<!-- AWP_In_Variable Name='"ertu".okunan --> 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.
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
32 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
Ö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:
<!-- AWP_In_Variable Name='"ertu".okunan' -->:="ertu".okunan:
gonder.html sayfamızın içeriği: (Buradan yeniden düzenliyoruz.)
<!-- AWP_In_Variable Name='"ertu".okunan' -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dinamik Veri</title>
<script src="jquery-2.2.2.min.js"></script>
</head>
<body>
<!--bu etiketin değeri JavaScript ile dinamik olarak alınacaktır-->
<label id="okunan1" name="okunan1">:="ertu".okunan:</label>
</br>
<input id='degerim' type="text" />
<!--Bu buton sayesinde ise JavaScript postback(sayfa geri gönderme) olmadan veriyi değişkene yazacak.-->
<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)
SIEMENS S7 1200 WEB SERVER İÇİN TEMEL HTML, CSS VE JQUERY(JAVASCRIPT) DERSLERİ
33 Hazırlayan: BT Ertuğrul KÖMÜRCÜ [email protected]
<script type="text/javascript">
$(document).ready(function(){
//okunan.htm sayfasından her saniye içerik alınacak
$.ajaxSetup({ cache: false });
setInterval(function() {
$.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.