KATEGORİLER

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...

Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

javascript ajax ve php ile form kontrolü