Javascript, AJAX ve PHP ile Form Kontrolü
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.
PLAIN TEXTHTML:
<html>
<head>
<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>
<body>
<form method="post" action="form_isle.php" name="frmKayitFormu"
onsubmit="return formKontrol(this);">
E-Posta: <input type="text" name="email" maxlength="50"/><input type="submit"
value=" Gönder "/>
</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"
PHP ile Form Kontrolü
Şimdi sadece PHP kullanarak kullanıcının girmiş olduğu e-posta
adresini yazım kurallarına göre ve veritabanında bulunup
bulunmadığına göre kontrol edeceğiz.
Önce kullanıcının göreceği formu hazırlayalım. Fazla detaya gerek
yok. Sadece bir kutu olsun ve kullanıcı bu kutuya e-posta adresini
girerek "Sorgula" düğmesine tıklasın. posta.htm isimli bir dosya
yaratarak şu kodları içine yerleştiriyoruz.
PLAIN TEXTHTML:
<html>
<head>
<title>Yakuter'den Form Kontrolü</title>
</head>
<body>
<form action="kontrol.php" method="POST">
E-posta Adresiniz:
<input type="text" name="epostaadresi" />
<input type="submit" value="Sorgula" />
</form>
</body>
</html>
Form kısmı tamamlandı. Şimdi parça parça kontrol kısmını
oluşturalım.
Veritabanından kontrol için önce bir veritabanı tablosu yaratıp
içini 4 kişinin isim, soyisim ve e-posta bilgilerini dolduruyoruz.
PLAIN TEXTSQL:
CREATE TABLE `kontrol` (
`no` int(11) NOT NULL AUTO_INCREMENT,
`isim` varchar(100) NOT NULL DEFAULT '',
`soyad` varchar(100) NOT NULL DEFAULT '',
`eposta` varchar(100) NOT NULL DEFAULT '',
PRIMARY KEY (`no`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;
INSERT INTO `kontrol` VALUES (1, 'erhan', 'yakut', 'erhan@yakut.com');
INSERT INTO `kontrol` VALUES (2, 'erhan', 'burhan', 'erhan@burhan.com');
INSERT INTO `kontrol` VALUES (3, 'onur', 'köse', 'onur@kose.com');
INSERT INTO `kontrol` VALUES (4, 'ibrahim', 'demir', 'ibrahim@demir.com');
Bundan sonra sıra geldi kontrol.php dosyasına. Önce yazım
kurallarının kontrolünü yapacağımız fonksiyonu oluşturalım.
PLAIN TEXTPHP:
function email_kontrol ($eposta) {
return preg_match("/[A-Za-z0-9_.-]+@([A-Za-z0-9_]+\.)+[A-Za-z]{2,4}/i",
$eposta);
}
Daha sonra veritabanına bağlanmak ve istediğimiz veritabanını
seçmek için gerekli kodları belirtelim.
PLAIN TEXTPHP:
$kullaniciadi="aaa";
$sifre= "bbb";
$host="localhost";
$veritabani="kontrol";
$baglan=mysql_connect($host,$kullaniciadi,$sifre);
mysql_select_db($veritabani,$baglan);
Veritabanından konrol için de şunları yazalım.
PLAIN TEXTPHP:
$sorgu="SELECT no FROM kontrol WHERE
eposta='".$_POST['epostaadresi']."'";
$sonuc=mysql_query($sorgu);
$satir = mysql_num_rows($sonuc);
if ($satir> 0)
echo "Veritabaninda bulundu...";
else
echo "Veritabaninda bulunamadi!";
Parça parça oluşturduğumuz kontrol.php dosyamızı bütünleştirirsek
şunu elde ederiz.
PLAIN TEXTPHP:
<?php
function email_kontrol ($eposta) {
return preg_match("/[A-Za-z0-9_.-]+@([A-Za-z0-9_]+\.)+[A-Za-z]{2,4}/i",
$eposta);
}
if ( email_kontrol($_POST['epostaadresi']) )
echo "E-posta adresi dogru...<br><br>";
else
echo "Hatali e-posta adresi girdiniz!<br><br>";
$kullaniciadi="root";
$sifre= "";
$host="localhost";
$veritabani="bulusma";
$baglan=mysql_connect($host,$kullaniciadi,$sifre);
mysql_select_db($veritabani,$baglan);
$sorgu="SELECT no FROM kontrol WHERE eposta='".$_POST['epostaadresi']."'";
$sonuc=mysql_query($sorgu);
$satir = mysql_num_rows($sonuc);
if ($satir> 0)
echo "Veritabaninda bulundu...";
else
echo "Veritabaninda bulunamadi!";
?>
Farkettiyseniz kontrol.php dosyasının içindeki yazım kurallarına
göre kontrol ve veritabanından kontrol işlemlerini birbirinden
bağımsız yaptım. Yani girilen bir mail adresi yazım kurallarına
uyduğu halde veritabanında bulunmayabilir. Bunu açık bir şekilde
göstermek için kontrolleri ayrı ayrı yazdım.
Kontrol işlemimiz bu sefer javascript'e göre daha yavaş gerçekleşmiş
olacak fakat ek olarak veritabanı kontrolü de gerçekleştirmiş
olacak.
Buraya kadar javascript ve php ile form kontrolünü gördük. Avantaj
ve dezavantajlarını özetleyelim.
Javascript: Form bilgileri başka bir sayfaya gönderilmeden kontrol
edildiği için daha hızlı. Fakat kabiliyetleri sınırlı olduğu için
(veritabanı kontrolü yapamaması gibi) kullanım imkanı da kısıtlı.
PHP: Form bilgileri farklı bir sayfaya gönderildiği ve bu sayfada
değerlendirildiği için yavaş. Fakat yazım kurallarının yanında
veritabanına bağlanmak gibi imkanları olduğu için daha geniş bir
kullanım alanına sahip.
Gördüğünüz gibi iki uygulama artıları ve eksileriyle birbirini
tamamlar cinsten. Peki yok mu bunun ortası? Gelin bu sorunun
cevabını AJAX'te arayalım
AJAX ve PHP ile Form Kontrolü
Burayı anlatırken kodlara fazla değinmeyeceğim çünkü PHP ile Form
Kontrolünde kullanmış olduğum formu (posta.htm) ve kontrol dosyasını
(kontrol.php) biraz düzenleyerek AJAX ile kontrol edilebilir hale
getirdim. Sadece dikkatinizi çekmek istediğim konu 30 Saniyede AJAX
makalesindeki XmlHttpRequest nesnesini çağırmak için kullandığım
basit fonksiyonun biraz daha gelişmişini ve kararlısını kullandım.
Bu seferki dosyalarımızın isimleri ajaxposta.htm ve ajaxkontrol.php
olsun.
ajaxposta.htm dosyası
PLAIN TEXTHTML:
<html>
<head>
<title>Yakuter'den Form Kontrolü</title>
<script type="text/javascript">
function AJAX() {
var ajax = false;
// Internet Explorer (5.0+)
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP"); // yeni versiyon xmlhttp
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP"); // eski versiyon
xmlhttp
} catch (e) {
ajax = false;
}
}
// Mozilla ve Safari
if ( !ajax && typeof XMLHttpRequest != 'undefined' ) {
try{
ajax = new XMLHttpRequest();
}catch(e) {
ajax = false;
}
}
// Diger
if ( !ajax && window.createRequest ) {
try{
ajax = window.createRequest();
}catch(e) {
ajax = false;
}
}
return ajax;
}
function kontrolet() {
ajax = new AJAX();
var bilgi= document.kformu.epostaadresi.value;
var dosya= 'ajaxkontrol.php?epostaadresi=';
if ( ajax ) {
ajax.onreadystatechange = function () {};
ajax.abort();
}
ajax.open('GET', dosya + bilgi, true);
ajax.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00
GMT");
ajax.setRequestHeader("Connection", "close");
ajax.send(null);
ajax.onreadystatechange = function () {
if( ajax.readyState == 4 ) {
document.getElementById('cevap').innerHTML = ajax.responseText;
function AJAX() {};
}
}
}
</script>
</head>
<body>
<form name="kformu" action="javascript:void(0)" method="GET">
E-posta Adresiniz:
<input type="text" name="epostaadresi" />
<input type="button" onclick="kontrolet();" value="Sorgula" />
</form>
<span id="cevap"></span>
</body>
</html>
ajaxkontrol.php dosyası
PLAIN TEXTPHP:
<?php
function email_kontrol ($eposta) {
return preg_match("/[A-Za-z0-9_.-]+@([A-Za-z0-9_]+\.)+[A-Za-z]{2,4}/i",
$eposta);
}
if ( email_kontrol($_GET['epostaadresi']) )
$durum= "E-posta adresi dogru...<br><br>";
else
$durum= "Hatali e-posta adresi girdiniz!<br><br>";
$kullaniciadi="root";
$sifre= "";
$host="localhost";
$veritabani="bulusma";
$baglan=mysql_connect($host,$kullaniciadi,$sifre);
mysql_select_db($veritabani,$baglan);
$sorgu="SELECT no FROM kontrol WHERE eposta='".$_GET['epostaadresi']."'";
$sonuc=mysql_query($sorgu);
$satir = mysql_num_rows($sonuc);
if ($satir> 0)
$durum.= "Veritabaninda bulundu...";
else
$durum.= "Veritabaninda bulunamadi!";
echo $durum;
?>
Bu örneğimizi çalıştırdığınızda göreceksiniz ki Javascript'ten yavaş
ama PHP'den hızlı ve tüm fonksiyonlara sahip bir kontrol sistemine
oluşturmuş olacaksınız. Çünkü hem form başka bir sayfaya
gönderilmiyor (aslında gönderiliyor fakat sayfa yenilenmeden) hem de
tüm fonksiyonlara sahip.
Sonuç
Öncelikle neler öğrendik?
Javascript ile Form (e-posta) Kontrolü
PHP ile Form (e-posta, veritabanı) Kontrolü
AJAX ve PHP ile Form (e-posta, veritabanı) Kontrolü
Konumuzun başında en ideal form kontrolünü aradığımızdan
bahsetmiştik. Cevap olarak da şunları söyleyebiliriz:
Javascript en hızlı olandır fakat yetersizdir.
PHP daha yavaştır fakat tüm fonksiyonlara sahiptir.
AJAX ve PHP hem hızlıdır hem de tüm fonksiyonlara sahiptir.
Peki ideal olan hangisi mi? Bu sizin ihtiyacınıza göre değişir.
Sizin ihtiyacınızı en iyi karşılayacak olan tip en ideal olandır.
Hatta burada bahsetmedim fakat şu da olabilir ki Javascript, PHP ve
AJAX'in birlikte kullanıldığı bir kontrol formu
Bu makalemde size form kontrol yöntemlerini anlattım, doğrusunu
bulmak ve geliştirmek size kalmış. Kolay gelsin...
|