Ajax ile kullanıcı girişi

02 / Nisan / 2008 Author

İsa Engiz

ajax

ajax

8 Yorum Yapilmis.

Web siteleri hazırlarken her sayfanın herkes tarafından görülmesini istemeyiz, kimi sayfalar ancak üye kullanıcılar tarafından görülebilir, kimileri ise yönetici üye tarafından görülebilir. Böyle bir görevi yerine getirebilmek için kullanıcılarınızın belirli sayfalara erişmelerini sağlamak ya da kısıtlamak için “kullanıcı girişi” yaptırmanız gerekir.

giris_resim

Bu yazımızda ise ajax tekniği ile kullanıcı girişinin nasıl yapılacağını tartışacağız. Ancak tabi ki böyle bir giriş sisteminin POST metodu ile yapılması gerektiği için bu metodu kullanacağız. Yazının geri kalanını okumadan evvel örnek sayfamıza göz atmak isteyebilirsiniz, ya da uygulamanın dosyalarını buradan indirebilirsiniz.

Index sayfası

Index sayfamızın iki temel unsuru var, birincisi, uyarı yazılarının geleceği bölümü önceden tanımlamamız gerekiyor.

<div id="uyari">
Lütfen aşağıdaki formu doldurunuz:
<br />
ipucu:admin-admin
</div>

id’si “uyarı” olan bölümü tanımladık. Bundan sonra kullanıcı adını ya da şifresini yanlış girerse, bu bölümde uyarı yazısı çıkaracağız.

İkinci önemli bölüm ise, form düğmemize ekleyeceğimiz javascript fonksiyonu:

<input type="button" onclick="giris()" value="GİRİŞ->" />

Kullanıcı bu düğmeye tıkladığında giris() isimli fonksiyonumuz çağrılacak ve aslında her şey ondan sonra başlayacak!

Javascript kodları

Javascript bölümünde her zamanki gibi öncelikle tarayıcımıza göre “istek” nesnemizi oluşturuyoruz:

var istek =false;
 
if (window.XMLHttpRequest)
{
	istek = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
	istek = new ActiveXObject("Microsoft.XMLHTTP");
}

Ardından ise giris() fonksiyonumuz geliyor:

function giris()
{
	document.getElementById("uyari").innerHTML = "işleminiz gerçekleştiriliyor. Lütfen bekleyiniz.";
	var isim = document.getElementById("isim").value;
	var parola = document.getElementById("parola").value;
 
	veri = "isim" + "=" + encodeURIComponent(isim) + "&" + "parola" + "=" + encodeURIComponent(parola);
 
	istek.open("POST", "giris.php", true);
	istek.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	istek.onreadystatechange = verileriAl;
	istek.send(veri);
}

giris() fonksiyonu çağrılır çağrılmaz yaptığı ilk iş “uyarı” id’sine sahip doküman elemanının içeriğini “işleminiz gerçekleştiriliyor. Lütfen bekleyiniz.” şeklinde bir yazı ile değiştirmek. Ardından ise form alanına girilmiş olan değerleri alıp “isim” ve “parola” isimli değişkenlere atıyoruz:

var isim = document.getElementById("isim").value;
var parola = document.getElementById("parola").value;

Ardından post ile gönderilecek olan verilerin, “veri” isimli değişkende toplanmasını sağlıyoruz:

veri = "isim" + "=" + encodeURIComponent(isim) + "&" + "parola" + "=" + encodeURIComponent(parola);

burada yaptığımız iş aslında GET metodunu uygularken oluşturduğumuz adrese benziyor, sonuçta ortaya şöyle bir şeyin çıkmasını hedefliyoruz:

isim=admin&parola=admin

Ve formdan aldığımız verileri, bunları işleyecek php dosyasına asenkronize olarak gönderiyoruz:

istek.open("POST", "giris.php", true);
istek.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
istek.onreadystatechange = verileriAl;
istek.send(veri);

POST metodunu uygularken önceki kodlarımıza göre tek farkı “istek.send()” ile “null” göndermek yerine “veri” isimli değişkenimizi yolluyoruz.

Php kodu

giris.php dosyamızın içinde basit bir kod parçası bulunuyor:

<?php
 
$isim = $_POST["isim"];
$parola = $_POST["parola"];
 
if ($isim != "admin" && $parola != "admin")
{
	echo "Girdiğiniz isim ve parola eşleşmiyor.";
}
else if ($isim == "admin" && $parola == "admin")
{
	session_start();
	$_SESSION["isim"] = $isim;
	echo "ok";
	exit;
}
else
{
	echo "Girdiğiniz isim ve parola eşleşmiyor.";
}
?>

Sayfaya gönderilen değişkenleri normal şekilde alıp $isim ve $parola isimli değişkenlere atıyoruz ve basit bir if() deyimiyle isim ve parolanın admin olup olmadığına bakıyoruz.

Eğer ikisi de “admin” ise oturum başlatıyoruz ve admin ismini session değişkenine yüklüyoruz ve “ok” şeklinde bir değer geri döndürüyoruz.

verileriAl()

PHP dosyası işini bitirdikten sonra dönecek verileri işleyecek fonksiyonumuz ise verileriAl():

function verileriAl ()
{
	if (istek.readyState == 4 && istek.status == 200)
	{
 
		var cevap = istek.responseText;
		if (cevap == "ok")
		{
			setTimeout('yonlendir()', 2000);
			document.getElementById("uyari").innerHTML = "Giriş başarılı! <br />Diğer sayfaya yönlendiriliyorsunuz...";
			document.getElementById("uyari").style.backgroundColor="#CDEB8B";
		}
		else
		{
			document.getElementById("uyari").innerHTML = cevap;
			document.getElementById("uyari").style.backgroundColor="#FFFF88";
		}
	}
}

Bu fonksiyonun yaptığı ilk iş, PHP dosyasından dönen veriyi “cevap isimli değişkene yüklemek. PHP dosyasından beklediğimiz cevap aslında “ok” şeklinde bir cevap ve beklediğimiz bu cevap dönmemişse if-else deyiminin else kısmı çalışıyor:

else
{
	document.getElementById("uyari").innerHTML = cevap;
	document.getElementById("uyari").style.backgroundColor="#FFFF88";
}

Eğer “ok” cevabı dönmüşse kodun ilk bölümü çalışıyor ve ekrana “giriş başarılı yazdırılıyor:

if (cevap == "ok")
{
	setTimeout('yonlendir()', 2000);
	document.getElementById("uyari").innerHTML = "Giriş başarılı! <br />Diğer sayfaya yönlendiriliyorsunuz...";
	document.getElementById("uyari").style.backgroundColor="#CDEB8B";
}

Giriş başarılı ise istenilen sayfaya yönlendirme yapılacak, bunu sağlayan kod parçası ise “setTimeout()” fonksiyonu. Bu fonksiyon, belirtilen kodun, belirtilen bir süre sonra çalıştırılmasını sağlıyor. Burada yonlendir() isimli bizim yazdığımız bir fonksiyon, 2000 mikro saniye sonra çalışacak. (1s = 1000mikro s) Biz bu sırada ekrana “giriş başarılı, yönlendiriliyorsunuz!” diye yazdırıyoruz ve “uyarı” id’sine sahip doküman elemanının arka planını yeşil’e yakın bir renge bürüyoruz. (olumlu bir iş yapıldı havasını vermek için!)

yonlendir fonksiyonumuz ise:

function yonlendir()
{
	window.location.href = "index2.php";
}

Sonuç

Yazının bu kadar uzun olduğuna bakmayın, yapılan iş gerçekten çok kısa kolay. Ancak şunu düşünmemiz gerekiyor, “kullanıcı girişi” olayında ajax tekniğini kullanmanın faydaları nelerdir, gerekliliği nedir? Öncelikle çok basit bir şekilde işlemi oldukça hızlandırdığını söyleyebiliriz, kullanıcı yanlış parola girdiğinde bol resimli olan kullanıcı giriş sayfasının tekrar yüklenmesi zaman alabilir, hatta bu durum kullanıcının sayfayı terk etmesine bile yol açabilir iki kez yanlış girilen parolanın ardından. Ayrıca doğru yapılan girişlerin ardından kullanıcıyı direk üye sayfasına yönlendirmek yerine girişin doğru yapıldığına dair bir uyarı vermek de iyi olabilir. Tabi kullanıcıyı bu ekranda fazla tutmamak gerekir, 10 saniye boyunca “giriş başarılı, bravo” şeklinde bir yazıya bakan kullanıcı aptal yerine koyulmuş gibi hissedebilir!

Bu seferlik bu kadar, bir daha ki ajax yazısında görüşmek üzere!

Bu uygulamanın dosyalarını buradan indirebilirsiniz. Ajax ile ilgili diğer yazılara ise buradan göz atabilirsiniz.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!