Web Programlama

Evet uzun bir aradan sonra web programlama icin yeni bir konuyla geri donduk. Bugun JavaScript’te yapilabilecek cok basit, ama bir o kadar da ilgi cekici ve yerine gore kullanisli bir konuyu isleyecegiz. Amacimiz kullanici giris yaparken guvenligi bir kademe daha arttiran sanal klavye uygulamasinin nasil olabilecegine dair sizi fikir sahibi yapmak. Aslinda bu fikir keylogger’dan korunmak icin ortaya cikmistir. Keylogger’lar, bilgisayariniza yerlesen bir process’in arkada hic ses cikarmadan calisip, sizin yazdiginiz herseyi kaydeden ve/veya bir e-mail’e yonlendiren casus programciklar. Eger yeterli bilgisayar bilginiz yoksa, bilgisayarinizda calisan bu casus programcigi hic bi zaman farkedemezsiniz. Bunun icin ozellikle banka islemleri yaptiginiz sayfa gibi ozel onem arzeden yerlere baglanirken, guvenlik seviyenize boyle bir koruma katmani daha katmak isteyebilirsiniz.

Sanirim bu kadar sozden sonra artik kodumuza ve aciklamasina gecebiliriz. Baktim wordpress’ten hayir gelmeyecek, dosyalari baska sever’a koydum, ordan bakip burdan kodu takip edebilirsiniz. Ya da JavaScript ise acin kaynak kodunu direk bakin. Iste gecenlerde soz ettigim dijital saatin link. Simdi de birazdan anlatacak oldugumuz sanal klavye‘ye bir goz atin.

Gecelim kodu anlatmaya. Oncelikle 2 adet giris kutumuz(textbox) var, bunlardan biri kullanici adi, digeri sifre icin. Bu sayfada kullanici adi herhangi harf dizileriyle sayilardan olusabilir ve sifre sadece sayilardan olusabilir. Tabi bu benim varsayimim, siz kendi zevkinize gore degistirebilirsiniz. 4 adet fonksiyonumuz var.Bunlardan ikisi giris alanlari secildiginde gerekli olan klavyeyi gosterip digerini gizliyor,kalan iki fonksiyonumuz da klavyelerden her birine basildiginda gidip textbox’larimizin icine basilan karakteri yaziyor. Connect dugmemiz de baglanacak normalde ama burda hic bisey yaptigi yok:) Iste fonksiyonlarimizin kodlari:

function first_text() {
document.all.second.style.display = “none”;
document.all.first.style.display = “block”;
}

function second_text() {
document.all.second.style.display = “block”;
document.all.first.style.display = “none”;
}

function first_keyboard(key) {
document.all.uname.value += key.value;
}

function second_keyboard(key) {
document.all.pword.value += key.value;
}

Burda gordugumuz gibi aslinda tavsiye edilmeyen bir yontem kullandim. Normalde document.all diye hic bi elemana erismemiz uygun bulunmuyor artik. Sadece document.getElementById metodunu kullanmamiz isteniyor. Ben sadece bunun nasil calistigini gostermek icin kullandim. Bazen ihtiyac olabiliyor cunku kendi yaptiginiz yanlisin farkina varmaniz icin:) Neyse fonksiyonlari cok aciklamaya hacet oldugunu dusunmuyorum. Cunku isimleri kendilerini ele veriyor. Son iki fonksiyonumuza basilan tusun gonderildigini de acikca goruyorsunuz. Yaptiklari is su anda giris yapilan textbox’in degerine yeni basilan karakteri eklemek. Ustteki diger iki fonksiyonda gormus oldugunuz sytle.display’e block ve none yazmak, goruntude olup olmamasini belirliyor. Yani aslinda her iki sanal klavye de orda, ama bi anda biz sadece birini kullaniciya gosteriyoruz ki kafakaris olmasin. Hemen klavyemizin tuslarinin kodlarindan bir ornek gostereyim:

<input type=”button” id=”1q” name=”1q” value=”q” onclick=”first_keyboard(this)” />
<input type=”button” id=”1w” name=”1w” value=”w” onclick=”first_keyboard(this)” />
<input type=”button” id=”1e” name=”1e” value=”e” onclick=”first_keyboard(this)” />
<input type=”button” id=”11″ name=”11″ value=”1″ onclick=”first_keyboard(this)” />
<input type=”button” id=”12″ name=”12″ value=”2″ onclick=”first_keyboard(this)” />
<input type=”button” id=”13″ name=”13″ value=”3″ onclick=”first_keyboard(this)” />
<input type=”button” id=”21″ name=”21″ value=”1″ onclick=”second_keyboard(this)” />
<input type=”button” id=”22″ name=”22″ value=”2″ onclick=”second_keyboard(this)” />
<input type=”button” id=”23″ name=”23″ value=”3″ onclick=”second_keyboard(this)” />

Orneklerden de gordugumuz gibi her biri ayri bir id’ye sahip, ve tiklandiginda gerekli olan fonsiyonu cagiriyor. Bundan gerisi artistlik. Siz de kendi dusuncelerinizi ekleyip, kendi ihtiyaclariniza uygun olan sanal klavyeyi yapabilirsiniz.

Evet biraz aradan sonra programlama yazilarimiza devam ediyoruz. Aslinda yazim hazirdi fakat bir sure kodun calisan halini sayfaya koyabilir miyiz diye arastirdik, fakat maalesef javascript kodu ileti icinde calismiyor. Simdilik sadeec anlatimla kalacagiz.

Ilk olarak anlattigim dillerin icinde en yaygin ve en kolay olani Javascript’ten kucuk bir ornek ile baslayacagiz. Ornegimiz dijital bir saat. Ilk once html kismini yazip ne kadar kolay oldugunu gostermek istiyorum:

<html>
<head>
<title> Clock </title>
</head>

<body>
<input type=”text” id=”time” disabled size=”5″ />
<button onClick=”StopIt();” > Stop the Clock </button>
<input type=”hidden” id=”Stop” value=”1″ />
</body>

</html>

Gordugumuz gibi html kismi cok kolay. Bir adet yazi kutusu (textbox), bir adet dugme (button), son olarak da bir tane hidden (gizli) elemanimiz var. Simdi bunlari kisaca aciklayalim.Textbox asikar ki bir deger girmeye yarayan bilesenimiz. Yalniz ben burda kullanicidan deger almak icin degil, elimdeki degeri bastirip gostermek icin kullandim. Bu sebeple etkisiz (disable) hale getirdim. Diger bilesenimiz dugme ve basildiginda tepki vermesi icin onClick ozelligine JavaScript kodu yazdik. Oradaki StopIt yanindaki parantezlerden anlasilacagi gibi bir fonksiyon. Son olarak da gizli bir bilesen koydum ki saati durdurmak istedigimizde bizi anlasin diye. Bunu binlerce yolla yapmak mumkun, fakat ben bu ilk anlatimimiz oldugu icin farkli bilesenler ve kombinasyonlar kullanmayi sectim. Cunku amac saat yapmak degil, kodun nasil yazilacagini ogrenmek. Siz de bu kismi degistirerek hangilerinin ne ise yaradigini ogrenebilir, daha cekici tasarimlar ortaya cikarabilirsiniz. Simdi de JavaScript kismina gecelim:

<script type=”text/JavaScript”>

var now = new Date();

changeTime();

function changeTime(){
if(now.getHours() < 10)
hours = “0” + now.getHours();
else
hours = now.getHours();
if(now.getMinutes() < 10)
minutes = “0” + now.getMinutes();
else
minutes = now.getMinutes();

if(now.getSeconds() < 10)
seconds = “0” + now.getSeconds();
else
seconds = now.getSeconds();

document.getElementById(“time”).value = hours + “:” + minutes + “:” + seconds;

if(document.getElementById(“Stop”).value == “1”)
setTimeout(changeTime,1000);
time = now.getTime();
now.setTime(time+1000);
}

function StopIt(){
document.getElementById(“Stop”).value = 0;
}

</script>

Bu kisim programciligi iyi bilmeyenler icin biraz zor gelebilir, ama herhangi bir dilde program yazan birine cok kolay gelecegine eminim. Oncelikle bir degisken tanimlayip su anki zamani onun icine yaziyoruz. Daha sonra da zamani degistiren fonksiyonumuzu calistiriyoruz. Iste bu kadar:) Tabi fonsiyonun ici en onemli olan kismi. Bastaki if/else bloguna bakmayin, onu sonra aciklayacagim. “document.getElementById” ile textbox’imizin icindeki degeri su anki zamanda yaptigimiz saatle dolduruyoruz. Sonra saati durdurma emrini aldik mi almadik mi onu kontrole diyoruz, almadiysak 1 sn’lik bir beklemeden sonra fonsiyonumuzu tekrar cagiriyoruz. Bu ne demek? Aslinda cok basit: 1 saniye bekle, sonra su anki zamani textbox’in icine yaz, sonra dur komutu gelmediyse tekrar 1 sn.bekle ve o anki saati kutuya yaz. Boylece her gecen saniye yeni zamani kutumuza yaziyoruz. Cok basit bir mantik. Daha sonraki iki satir o anki zamani, degiskenimizin icindeki 1 saniye onceki zamanla degistirmeye yariyor. Ve son olarak da durdurma komutumuz StopIt gizli elemanimizin degerini 0 (sifir) yaparak fonsiyonumuzun tekrar cagirilmasini onluyor. Iste butun espiri bu kadar. Yukardaki if/else blogunun aslinda hic bir islevselligi yok, sadece tek basamakli sayilarin yanina 0 (sifir ) ekleyerek 2 basamakli gozukmelerini sagliyor, boylece daha guzel bir dijital saat gorunumu elde ediyoruz. Ama bunu yapmazsak da saatimiz tikir tikir calisir.

Peki bu saat her zaman dogruyu gosterir mi? Aslinda hayir. Cunku bilgisayar komutlarinin da harcadigi bir zaman vardir, hepsinin cycle dedigimiz milisaniyelerle ifade edilen isgal ettigi zamani hesaplayip 1000 milisaniye bekleme suresinden cikartmamiz gerekir eger dosdogru bir saat istiyorsak. Fakat butun bu kod 10-20 ms icinde islendigi icin bu farki cok da onemsemedik. Yani kabaca bir saat icinde 3 kere saatimizin degismedigini ayni saati gosterdigini gorecegiz.
Asagida calisan hali var fakat gorebileceginizi hic sanmiyorum cunku wordpress calistirmiyor. Yine de sizin cok kolaylikla calistirabileceginiz bir program oldugu icin asagidaki kodun pek bir onemi yok. Ben yine de koyuyorum cunku bir gun yazilarda javascript calistirma ozelligini eklerlerse asagidaki saati gorebileceksiniz. Bir dahaki yazida gorusmek uzere..

Stop the Clock

Hepimizin az cok ilgilendigi, duyup bildigi konulardan biridir web’de program gelistirmek (web development). Bazilarinizin cok derin bilgisi olabilir, bazilariniz yalnizca kullanicidir, belki bazilariniz baslayacak bir nokta ariyorlardir. Kim bilir belki de o nokta bu yazidir:) Bu yazida genel olarak internet teknolojilerinden bahsedecegim. Ilerde ise bu teknolojilerle ilgili basit ve kucuk capli uygulama ornekleri sunup ne gibi seyler yapilabilecegine dair fikir sahibi olmanizi saglayacagim. Tabi bu bir paylasim, siz de yorumlarinizla benim dusunemedigim noktalari belirtip, ufkumu acacaksiniz. Oncelikle herkesin asina oldugu HTML (HyperText Markup Language)’den bahsetmek istiyorum. Aslinda “tag” dedigimiz belirleyicilerden olusan bu sistem bir dil olarak degil de platform olarak gorulebilir. Daha da basit anlatmak gerekirse; bir dosyaya ozel bir sistemle yazilmis bir yazinin islenerek kullaniciya hitap eden bicimde sunulmasi. Bilgisayar dillerinde bir derleyici (compiler/interpreter) ve derleyicinin tanidigi ozel kelimeler (reserved words) vardir. HTML de ise buyuk kucuk isareti arasina ne yazarsaniz yazin –parser tanidigi surece- kodun bir parcasi oluverir (parser kelimesine takilmayin, ilerleyen yazilarda aciklanacaktir). Hemen kucuk bir ornekle devam edelim:

<html>
<head>
<title> Ilk Sayfam </title>
</head>
<body>
<center> Merhaba Dunya </center>
</body>
</html>

Bir cogumuza cok basit geldi tabi gulmeye basladiniz:) Olsun yeni baslayanlari da dusunmek lazim. Simdi bunu nasil calistiracagim diye dusunuyo cunku onlar. Hemen acikliyim. Masaustunde farenin sag tusuna tiklayip “Yeni” ve “Metin Belgesi” olusturun, yukaridaki kodu kopyalayip icine yapistirin ve “Dosya” menusunden “Farkli Kaydet..” secenegi ile ismini istediginiz sekilde degistirin. Burda dikkat etmeniz gereken kisim “Dosya Turu”nun “Butun Dosyalar”da durmasi ve “Dosya Ismi”nin sonuna .html yazilmasi. Ornek vermek gerekirse Sayfam.html, sonra da kaydet tusuyla masaustune kaydediyoruz. Uzerine cift tikladigimiz zaman kodumuzun calistigini ve kullaniciya hitap eden seklini goruyoruz. Kodumuzu tekrar duzenlemek istersek sag tiklayip “Duzenle”yi secmemiz gerekiyor. Sanirim bu kadar giris seviyesi yeter. HTML’i web programciliginda herkes mecbur kullaniyo. Peki bununla ilgili bilmemiz gereken neler var. DOM bunlarin en basinda geliyor. Document Object Model dedikleri dilden ve platformdan bagimsiz bir standart. HTML icinde gordugumuz her bir nesnenin aslinda icindeki yazidan, cerceve rengine kadar hepsinin yazili oldugu modelleme sistemi budur. Kullanici tarafindaki scripting dilleri (Client-side scripting) ile kontrol edilebilir. Mesela Javascript ya da VB Script gibi. Bu iki dilin en az birinde islerin nasil yurudugunu bilmemiz bize cok kolaylik saglayacaktir. Ilerde Javascript ile yazilmis basit uygulamari konusacagiz. Peki neden kullanici tarafinda diye ayirmislar bu kodlari? Cunku kullanicinin gorebildigi, muhadale edebildigi guvenlik icin degil, kullanim kolayligi icin kullanilan diller bunlar. Goze hos gelen renkler, kapanip acilan menuler, otomatik dolup bosalan text kurulari hep bu dillerin eseri. Diger ihtiyaci karsilayan grup ise sunucu tarafindaki diller (server-side scripting). Bunlar web programcisi (web developer) tarafindan sunucuya (server) yuklenir ve sorgu yapan herkese derlenmis hali gonderilir. Yani kullanici kodu degil, kodun sonunda ortaya cikan HTML ciktisini gorur. Bu dillerle kullanici tarafindaki scripting dilleri de yazdirilabilir. Peki neden bu sunucu tarafindaki dillere ihtiyacimiz var? Cunku veritabanina (database) baglanmaya, sifresini giren kullanicinin dogru degerleri girip girmedigini kontrol etmeye ve dosya islemleri yapmaya ihtiyacimiz var ve bu ihtiyaclari bu tip sunucu tarafindaki diller karsiliyorlar. Cesitleri cok olsa da en unluleri; PHP, ASP (.NET), JSP, Python, Perl ve Ruby. ColdFusion diye uyduruk bi dil daha var html tag sistemine benzeyen ama ona deginmeye degmez. Bu dillerle dosya ve veri tabani islemleri yapabilir, kullanici oturum (session) bilgilerini bir sayfadan digerine tasiyabiliriz. Bunlar haricinde digerlerine gore yeni sayilabilecek diger bir teknolojiden bahsedip bu genel bilgilendirme yazima son noktayi koymak istiyorum. AJAX’i belki de son gunlerde cok duydunuz, ama hic yeni bir olayi yok. Kullandigi teknolojiler eski aslinda ama getirdigi fikir yeni. Maksadi sayfayi hic yenilemeye gerek duymadan, sunucu tarafindaki kodu calistirip, kullanici tarafindaki scripting ile sonucu dinamik olarak gostermek. Tabi eger siz daha giris seviyesindeyseniz neden bahsettigimi anlamamis olabilirsiniz, dert etmeyin:) Fakat bu yaziyi “yahu ne basit anlatmis” diye okuyanlar varsa onlar anladilar bile:) Bundan sonra bu bahsettigim teknolojileri kullanarak basit dinamik sayfalar nasil yapabiliriz onlarin orneklerini vermeye calisacagim. O zaman butun bu anlattiklarim yerine oturmaya baslayacak.