AJAX & JavaScript & DOM & Php yakuter
Günümüzün sitelerinin artık vazgeçilmez bir öğesi formlar. Yorum yazma formu, kullanıcı girişi formu, e-posta göndermek için form vs vs... Peki bu formları kullanırken kullanıcılar her zaman bizim onlardan beklediğimiz şeyleri mi yazıyorlar? Mesela website kutusuna "www.benimsitemyok.com" yazanı hiç görmedik mi veya eposta adresine "sanane@yokmalesef.com" yazanları... İşte böyle bir durumda bu formların bizim için bir faydası kalır mı, hayır! O halde kullanıcıların girmiş olduğu bilgileri kontrol etmeliyiz. Peki ya bu kontrolü en uygun ve hızlı bir şekilde nasıl sağlayabiliriz? Acaba Javascript mi kullansak, sadece PHP vb. bir dil mi kullansak yoksa Javascript, AJAX ve PHP'nin birlikte çalıştığı bir kontrol düzeneği mi oluştursak? Gelin makalemizde adım adım bu sorunun cevabını bulmaya çalışalım.
Javascript ile Form Kontrolü
Javascript, form kontrolü için şüphesiz ki en hızlı yoldur. Peki form kontrollerinde hız yeterli midir veya ihtiyacımız olan sadece hız mıdır? Bir örnek üzerinden düşünelim.
Eğer kullanıcıdan istediğimiz sadece uygun bir e-posta adresi olsaydı bunu javascript ile kontrol edebilirdik. Girilmiş olan e-posta adresinin yazım kurallarına uyup uymadığının (@ işareti var mı, yok mu vs.) kontrollerini yapar ve anında değerlendirip sonucu kullanıcıya bildirirdik. Bu isteğimizi aşağıdaki gibi bir kod rahatlıkla karşılayabilir. jsposta.htm adında bir dosya yaratarak aşağıdaki kodları içine yapıştırıp kaydedin. Bu kodlarda eğer girilmiş olan posta adresi doğru ise bilgiler form_isle.php dosyasına yönlenir.
-
<script language=JavaScript>
-
function regKontrol(pattern, value)
-
{
-
r = new RegExp(pattern, "g");
-
return r.test(value);
-
}
-
-
function formKontrol(form)
-
{
-
patternEposta = "^"+"([abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0-9_\.\-]+)"+"@"+"([abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0-9_\.\-]+)"+"[\.]"+"([abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0-9_\.\-]+)"+"$";
-
-
if ( !regKontrol(patternEposta,form.email.value))
-
{
-
alert("Lütfen Doğru Bir E-posta Adresi Giriniz.");
-
form.email.value="";
-
form.email.focus();
-
return false;
-
}
-
return true;
-
}
-
</script>
-
</head>
-
-
-
<form method="post" action="form_isle.php" name="frmKayitFormu" onsubmit="return formKontrol(this);">
-
</form>
-
</body>
-
</html>
Kodun kaynağı: Mydesign
Bu formda kullanıcı e-posta adresini girdiğinde ve "Gönder"e tıkaldığında eğer adres hatalıysa (e-posta adresi yazım kurallarına aykırıysa) hata mesajı alacaktır ve doğru bir e-posta adresi girene kadar formu gönderemeyecektir.
Farkettiyseniz biz sadece e-posta adresinin yazım kurallarına uyup uymadığını kontrol ettik. Ya işin içinde veritabanı olsaydı ve kullanıcının e-posta adresinin veritabanında olup olmadığını kontrol etmek isteseydik ne yapacaktık? Cevabı söyleyeyim, üzücü ama javascript ile yollarımızı ayırmak zorunda kalırdık
. Zaten javascript'in bize yetmediği nokta da burası.
Şimdi örneğimizi geliştirelim ve bir üyelik sistemi hayal edelim. Bu üyelik sisteminde kullanıcı adı olarak üyelerin e-posta adreslerini kullandığımızı varsayalım. Artık form girişinde yazım kurallarına uyan bir e-posta adresinin yanında, girilen e-posta adresinin veritabanında bulunması gerekli. Aslında mantık olarak hatalı bir durum. Diyebilirsiniz ki "madem veritabanından da kontrol edeceğiz, neden yazım kurallarına bakıyoruz?" Makaleyi öğretmek amacıyla yazdığım için böyle bir duruma katlanalım. Böylece hem PHP ile e-posta yazım kurallarının nasıl kontrol edildiğini, hem de veritabanından kontrolün nasıl yapıldığını öğrenmiş olacağız. Yani "Bahaneye değil konuya odaklanalım"
Toplamda 24132 kez okunmuÅŸ.
Åžu an 1 kiÅŸi okuyor.
En fazla 6 kişi aynı anda okumuş.
Bugün 3 kez okunmuş.
Etiketler: ajax, javascript, orta, php
Trackback Yorumları takip et Baskı Önizleme

(57 oy, ortalama 4.75)
# grkn | 09 Åžubat 2007, 02:12
çok güzel ve açıklayıcı bir makale olmuş yakuter.. hata varsa söyle dedin ancak; ben göremedim
teÅŸekkürler…
# yakuter | 09 Åžubat 2007, 02:34
Gürkan teşekkür ederim yorumun ve kontrolün için. Bu sitedeki tüm yazarlar, bir yazıyı yazmadan önce o kadar çok kontrol ediyoruz ki anlatamam
Bir de makaleler uzun olunca insanın dikkati dağılabiliyor.
# eburhan | 09 Åžubat 2007, 11:24
AJAX’in en uygun kullanım alanlarından birisi formlardır. Ve sen bunu en iyi ÅŸekilde anlatmışsın. Tebrik ederim. Çok güzel ve yararlı bir yazı olmuÅŸ
# ismailaltuntas | 09 Åžubat 2007, 12:59
TeÅŸekkürler çok güzel olmuÅŸ…
# ibrahim | 10 Åžubat 2007, 09:14
Dostum ellerine sağlık.
Aslında ben bu yazıyı dün okumuştum ama aceleyle okuduğum için bugün tekrardan okudum ve 5 yılıdızı da verdim.
Bir uygulama içerisinden arka planda veritabanı bağlantısı kurmak ve bunun yanında bir de forma girilen bilgileri yollamak gerçekten büyük bir maliyettir ve ölçeklnebilirliği çok düşüktür. Yani 3-5 kullanıcı sistemdeyken birşey olmaz ama aynı anda binlerce kişinin kullanacağı bir sistemde işleri zorlaştırır.
Åžimdi benim bu yazıdan anladığım: öncelikle iÅŸleri halledebiliyorsak kullanıcı tarafında hallediyoruz , eÄŸer daha farklı ihtiyaçlarımız varsa kullanıcıya çaktırmadan server’a gidip geliyoruz.
Kolay gelsin YakutER
# yakuter | 10 Åžubat 2007, 11:32
@ibrahim aynen dediÄŸin gibi. Web üzerinde performans düşünüldüğü zaman ekstra uÄŸraÅŸlardan kaçınmalıyız. Elektronikçiler daha doÄŸrusu sinyalciler veri iletiÅŸiminde “bantgeniÅŸliÄŸinin” parayla eÅŸanlamda olduÄŸunu bilirler
Ayrıca Türkiye’de bantgeniÅŸliÄŸi gerçekten pahalıdır. EÄŸer çok fazla para ödeyebilecek durumda deÄŸilsek sahip olduÄŸumuz miktarı en uygun ÅŸekilde kullanmalıyız. Bazı sitelerde uygulanan bir hata ile gerçekçi bir örnek vereyim.
AJAX’ın öncülerinden “prototype” kütüphanesi çok kaliteli ve geliÅŸtirilmeye müsait olsa da benim makalede verdiÄŸim örnekte kullanılamayacak kadar büyük bir kütüphanedir. Yani kullanılır fakat 2 veya 3 kb’lık bir javascript kodu yerine yaklaşık 70 kb’lık bir kütüphane kullanılmış olursunuz. Åžimdi düşünelim, siteye günde 1,000 kiÅŸi girse bu 70 mb eder. BantgeniÅŸliÄŸinin ay bazında tutulduÄŸunu düşünürsek 30,000 kiÅŸiden 2.1 gb eder. Görüyoruz ki sadece bir dosya ile bant geniÅŸliÄŸinin 2.1 gb’ını bitirdik. kb’lar gibi küçük hesaplardan yola çıktık, bir bakmışız ki gb’ları tüketmiÅŸiz. Demek ki form kontrolü deyip geçmemek lazım.
Bu söylediÄŸim sadece formlarda deÄŸil sitenin resimlerinde, css dosyasında ve diÄŸer öğelerinde de dikkat edilmesi gereken bir husus ve Hepsi için ayrıca tedbir alınabilir. Css’ler için “css optimizer”lar, fotoÄŸraflar için Photohop’ta kalite düşürmeler, Web için Kaydet seçeneÄŸi bu maksatla kullanabileceÄŸimiz öğeler.
Düşündüm de aslında bu konuda bir makale yazmak lazım
# ibrahim | 10 Åžubat 2007, 12:48
@yakuter haklısın bence de. Benim bir felsefem vardır her iÅŸimde o da: “BAÅžTAN ADAM GİBİ” yap felsefesi. Yani sen siteni production aÅŸamasına aldın diyelim , ilk zamnalar günde 30-40 kiÅŸi anca gelecektir diye düşünüp de iÅŸleri baÅŸtan savarak yaparsan , siteni 1000 kiÅŸi ziyaret ettiÄŸinde iÅŸ iÅŸten çoktan geçmiÅŸ olur.
Dediğin gibi bant genişliği ciddi bir yük. Bunun sadece görselliğe harcanmaması için tasarım tarafında her türlü optimizasyonu yapmalıyız.
. Benim tek yaptığım şey ekran görüntülerini jpeg olarak kaydedip boyutlarıyla oynamak. Grafik optimizasyonu için elimden gelen bu
Eminim güzel bir yazı ile burada çok önemli fikirler paylaşılabilir.
Yine aynı şekilde server tarafında da yükü azaltmak için iş mantığımızı iyi oluşturmamız gerekir.
Aslında bu tip optimizasyonlar için de bir makale yazılabilir. Ben pek grafik olayından anlamam bana da faydası olur
Bir de web uygulaması geliÅŸtiren arkaÅŸlara tavsiyem etrafta olup bitenleri takip etsinler. Mesela bir site Yeni arayüzümüzle hizmetinizdeyiz dedi ve oraya da deÄŸiÅŸikliklerin olduÄŸu bir link koymuÅŸ . Mutlaka bakın nelerin deÄŸiÅŸtiÄŸine çünkü bu size iyi fikirler verebilir. Benim en çok dikkatimi çeken ASP.NET ile hazırlanmış sitelerde TABLE yapısından CSS’e geçilmesi oldu çünkü table ile yapılan tasarımlarda yükleme iÅŸlemi daha uzun sürmekteydi.
Özetle optimizasyon en baştan yapılarak uygulamaya kademeli olarak entegre edilmelidir , işleri biriktirip optimizasyon yapmaya kalmamanızı sizlere tavsiye ediyorum.
# Ali AltuÄŸ KOCA | 10 Åžubat 2007, 23:38
güzel bi makele olmuş yakuter emeklerine sağlık.
fakat benim aklıma takılan bir nokta var.yorumunda band genişliğinden bahsetmişsin be prototype kütüphanesini her kullanıcıya yüklemekten bahsetmişsin.benim bildiğim kadarıyla kullanıcıya bizim yazacağımız class dosyaları gitmiyor.Sadece serverda çalıştırılan dosyadan output olarak gelen veriyi kullanıcı çekiyor.
Bu şekilde belirttiğin gibi büyük bir kütüphanenin olması serverın CPU kullanım süresini arttırır, bandgenişliğine pek etkisi olmaması gerekiyor.Yoksa ben mi yanlış düşünüyorum.
# yakuter | 11 Åžubat 2007, 00:41
@Ali, senin sorun üzerine hemen bir deneme yaptım. Sitede arama kısmı ajax ile oluÅŸturulmuÅŸ ve livesearch.js kullanan bir site buldum. Önce ie’de siteyi açtım. Ondan sonra aynı tarayıcıda google’ı açtım. Sonra ie’nin “Dosya” menüsünden “Çevirimdışı Çalış”ı seçtim. Ardından tekrar siteyi açtım. Site çevirimdışı olarak yani hafızada sorunsuz bir ÅŸekilde açıldı. Bu arada bahsettiÄŸim site “www.photoshop-tr.com” Neyse ardından arama bölümüne bir kelime yazdım. EÄŸer js dosyası yüklenmiÅŸse js dosyası arama yapacak ÅŸekilde çalışmalıydı. Aksi takdirde hiç bir cevap almamam gerekirdi. Peki ne oldu dersen, kelimeyi yazdığım anda yükleniyor resmi çıktı, yani js dosyası çalışıyordu ki form devreye girdi. İnternet olmadan çalıştığına göre bilgisayarda bir yerlere yüklenmiÅŸ olması gerekirdi. Neresi olduÄŸu önemli deÄŸil çünkü biz konuya sitenin yapımcısı gözünden bakıyoruz. Demek ki sitemizdeki js dosyaları da indiriliyor.
Umarım açıklayabilmiÅŸimdir…
# mustafa | 11 Åžubat 2007, 18:44
Çok başarılı tebrik ederim
Ama bu örnekleri online olarak da görmek isteriz.
# yakuter | 11 Åžubat 2007, 22:11
@Mustafa isteÄŸinde çok haklısın. Örnek olarak koyacaktım fakat iÅŸin içinde basit bir veritabanı baÄŸlantısı olunca biraz çekindim. Ciddi güvenlik problemi yaratabilirdi çünkü. Onun dışında ise tüm makalelerimizde örnek sunamya çalışacağız…
# enes | 12 Åžubat 2007, 20:04
Tamamen Harika.. Ne kadar iyi anlatılabilir diye birilerinle iddaya girdiyseniz.. İddia siz dedir ama böyle güzel anlatmlar için teÅŸekkür ediyor ve devamanı diliyorum….
# Osman Erdogan | 24 Åžubat 2007, 03:19
@yakuter Merhaba öncelikle.
Örneklerini Free Hostlarda veya Subdomain altında yapsan çok güzel olur. Örnekleri gördükten sonra incelemek ve kullanmak daha elverişli gelebilir.
Başarılar güzel site. Desteklenmesini dilerim.
# yakuter | 24 Åžubat 2007, 21:22
Merhaba Osman, haklısın, bu oldukça mantıklı
Derhal çalışmalara başlıyorum
# Sinan Eldem | 03 Mart 2007, 16:29
Ellerine saÄŸlık kardeÅŸ, güzel ve açıklayıcı bir yazı olmuÅŸ…
# Åžeref AYDIN | 16 Mart 2007, 20:22
Gerçekten çok güzel bir makale olmuÅŸ.Yazıların devamının gelmesi dileÄŸi ile teÅŸekkürler…
# hasan | 29 Mart 2007, 05:05
ben daha yeni basladim ajax a gercekten cok yararli bir kaynak olmus tesekkurler ancak bisi sormak istiyorum vertabaninda sorgulama yapmaya calisiyorum ancak bi turlu beceremedim kodlari asagiya ekliyorum tyardimci olursaniz sevinirim simdiden cok teseekurler
execsql($sql);
echo ‘Kullanici :’.$_GET[’kullanici’].'’.
‘Üye Adı : ‘.$rs->fields[’adi’].'’.
‘Üye Soyadı : ‘.$rs->fields[’soyadi’].'’;
?>
# » Blog Archive » Php ve Ajax ile Mail Kayıt ve Kontrolü | 06 Nisan 2007, 19:07
[…] Makalenin kaynağı. […]
# » Blog Archive | 11 Nisan 2007, 10:24
[…] Makalenin kaynağı. Makalenin kaynağı. […]
# Yakup Gövler | 28 Mayıs 2007, 15:01
PHP dosyamızdan geri dönen deÄŸerleri, deÄŸiÅŸkenlere nasıl aktarabiliriz? BaÅŸka bir ifade ile Ajax + PHP ile bir kiÅŸinin ad, soyad, yaÅŸ gibi bilgilerini kaydediyoruz diyelim. Hem ajax hem de php tarafından filtreledikten sonra, ajax’a girilen deÄŸerlerin filtrelenmiÅŸ hallerini nasıl aktarabiliriz. Burada yapmak istediÄŸim, PHP’den dönen filtrelenmiÅŸ deÄŸerleri tekrar metin kutularına aktarmak, aynı zamanda hata varsa bunu da metin kutularında göstermek istiyorum.
İlk anda aklıma gelen şey, PHP ile geri dönüşlerde adı###Soyadı###Yaşı şeklinde çıktı alıp, javascriptteki split fonksiyonu ile dönen değeri parçalayıp, değişkenlere aktararak işlem yapmak. Ancak bunun daha programlamaya uygun yöntemi var mı?
# Özgür Can Karagöz | 08 Haziran 2007, 01:25
Sevgili arkadaşım öncelikle yazın mükemmel olmuş ve seni çok tebrik ediyorum.
Hocam 1 tane örnek verebilirmisiniz.Mesela veritanınandan kontrol yapmayı.
Ben PHP bilirim.Ajax’a yeni baÅŸlıyorum.DeÄŸerli Hocam burada MYSQL ile baÄŸlantı yapmak inanın çok zor.Neden derseniz Ajax’a yeni baÅŸlayan biri için zor oluyor
# Ercan | 04 Temmuz 2007, 16:34
yakuter gercekten guzel bir makale olmus. ajax ve js ile ilgilenmeye yeni baslayan biri olarak oldukca faydalı buldum. ancak bir sorum olacak.
sadece javascript ile yapılan form kontrollerini kullanıcı js kapatıp atlatamaz mı? yani gelen degerleri ne olursa olsun sunucu tarafında her zaman kontrol etmeliyiz degil mi?
# yakuter | 07 Temmuz 2007, 14:25
@Ercan formun gönderilmesini de eğer javascripte bağlarsan ve form.submit ile gönderirsen kullanıcı mecburen javascripti açmak zorunda kalacaktır. Aksi takdirde form gönderilmez. Ama hile yapıp kendisi bir form yaratıp deneyebilir de. Bu durumda aynen dediğin gibi alıcı tarafta güvenlik açısından gelen formun nerden geldiğini ve bilgileri kontrol etmemiz gerekir. Güvenliğin önemli olduğu formlarda mutlaka bu şekilde sunucu taraflı kontrol yapılmalıdır ama kimi önemsiz ve güvenlik sorunu yaratmayan formlarda hızlı olması açısından javascript kontrolü uygudur
# Ercan | 07 Temmuz 2007, 16:14
@yakuter, tesekkurler detaylı cevap icin. php ile form alırken javascript ile yollamadan once kontrolleri yapıp hata mesajlarını uretmek ve sunucu tarafında da dogru hata dondurmeyle ugrasmayıp sadece regular expression ile sonucları dogrulamak yeterince guvenli gibi geldi. bu sekilde kullanmaya karar verdim.
# Anıl KAN | 26 Temmuz 2007, 00:35
yakuter de olmasa bize kim yardım edicek ya
)
# yakuter | 26 Temmuz 2007, 02:07
@Siz yeter ki okuyup, öğrenmeye çalışın. Ben usanmadan yazarım…
# hasan | 26 Temmuz 2007, 07:17
yeni yeni yetisen bir bilgisayar programcisi olarak denilecek bir sey bulamiyorum bi iki ay once ajax ile ugrasiyordum ama bu aralar vaktim olamadigindan ugrasamiyorum daha cok islere yonelmek durumundaydim ama bazi yerlerde hala ajax a basvuruyorum makele gercektende cok aciklayici olmus cok tesekkurler bir kac degisiklikle kullanici adi vs gibi konularada entegrelenebilir bu konuyu hazirlayanlara gercekten cok tesekkur ederim basarilarinin dewamini dilerim kolay gele saygılar
# yakuter | 26 Temmuz 2007, 10:10
@hasan, faydalanmanıza sevindim
# ajax ile from kontrolü yapmak - Webmaster Forum | 27 Temmuz 2007, 15:59
[…] Javascript, AJAX ve PHP ile Form Kontrolü […]
# skaratoz | 17 AÄŸustos 2007, 13:31
Merhaba, eklediğin örnek çok güzel. sade bir dille hazırlamışsın. Fakat takıldığım konular var.
1. Ajax demişsin ama ben sadece Javascript ile form veri kontrolü görüyorum. Burada Ajax uygulaması yok.
2. Bir formdaki verileri sadece Javascript ile kontrol etmek çok büyük bir güvenlik açığıdır. Bütün verileri server tarafında kontrol etmelisin.
3. Javascript uygulamaları dışardan da tetiklenebilir. Yani kullanıcı dışardan document.forms[0].submit() komutunu çalıştırabilir.
O yüzden mümkün olduÄŸunca iÅŸlemleri Javascript ile halletmeye çalışmak çok büyük bir güvenlik sorununu da beraberinde getiriyor. Kullanıcı tüm Javascript kodlarını görebildiÄŸi için onları geçmek için yöntem hazırlayabilir. Javascript’ta yaptığınız kontrollerin aynısını Server tarafında da yaparsanız çift taraflı bir koruma saÄŸlarsınız ayrıca server maliyetlerini düşürürsünüz.
Herkese iyi çalışmalar.
# yakuter | 17 AÄŸustos 2007, 18:15
@skaratoz sanırım makalenin 3ncü sayfasına bakmamışsın. Orada AJAX’i görebilirsin.
Ayrıca bir formdaki kontrollerin sadece javascript ile yapılması güvenlik açığı oluşturur demişsin. Eğer ki form oldukça önemsiz bir form ise ve aşıldığı anda bile güvenlik sorunu yaratmıyorsa o halde javascript kullanmanın herhangi bir dezavantajı olamaz. Bu yüzden formların kontrolleri için bir standart olamaz. İstenilirse hiçbir güvenlik açığı olmadan javascript kontroller yapılabilir. Eğer her şeyi sunucu tarafında kontrol edersen belki maliyetten kazanırsın fakat zaman kaybedersin.
# Leon | 19 Eylül 2007, 01:58
Peki, kullanici tarayicisindan Javascript’i kapattigi zaman form kontrolleri sunucu tarafli olarak gene yapiliyor mu? Yoksa form gönderilemiyor ve kayit asamasi gerceklestirilemiyor mu?
# Realmucit | 18 Ekim 2007, 03:11
İyide bu çok basit bi mysql bağlantısı ajaxla bi alakası yok nede javascript var.
# ORaNGe | 17 Kasım 2007, 21:08
Merhaba,
Çok güzel bir önek olmuş elinize sağlık.
Benim yapmak istediğim tek bir input kontrolu değilde bir form içerisindeki birden fazla input değerinin kontrolu yani bir iletişim formunun kontrolu makalede sadece bir input değerinin kontrolu anlatılmış sanırım js kodları içinde küçük değişiklikler yapmam gerekiyor.
#
unction kontrolet() {
#
ajax = new AJAX();
#
var bilgi= document.kformu.epostaadresi.value;
#
var dosya= ‘ajaxkontrol.php?epostaadresi=’;
bu kodlara ek kodlar yazmam gerekiyormu çünkü burada input name kısmındaki değer kullanılmış buraya diğer input name değerlerinide yazmamız gerekiyormu ?
Teşekkürler.
# han | 01 Ocak 2008, 23:51
İşime epey yaradı sağol
Güzel olmuş
# Mustafa | 26 Ocak 2008, 16:48
Çok güzel bir anlatım olmuş, teşekkürler.
Daha önceden HTML, PHP ve hazır JS kodlarını değiştirecek kadar JS bilgim olduğu için çok kolayca anladım.
Ancak işin içine AJAX girdikten sonra ki kısmın nasıl çalıştığını, orada hangi işlemlerin yapıldığını anlatmamışsınız.
Yani kontrolet() fonksiyonunun içinde yapılanları hiç anlamadım. Orada yapılan işlemlerden de bahsetmeni mümkün mü?
Belki, buradakileri kopyala yapıştır yaparak işimi halledebilirim ancak bu sefere öğrenemem.
Teşekkürler.