Ajax ve php login uygulaması web de program geliştirmeye yeni başlandığında ilk ihtiyaçlardan biri kullanıcı giriş panelinin yapılmasıdır.
Kullanıcı girişinin güvenilirliği sistemin güvenliği ile eş değerdir diyebiliriz. Çünkü kullanıcı giriş paneli sisteme saldırmak isteyecek kişilerin ilk saldıracakları kısımdır.
Güvenlik dışında kullanışlı bir giriş paneli yapmakta önemlidir. Özellikle ajax teknolojisi ile birlikte pu panellerin efektifliği de önem kazanmıştır.
Bu yazımda sizlere jquery kütüphanesini ve ajax yöntemini kullanarak kullanıcı giriş paneli yapmayı detaylarıyla anlatacağım.

İlk yapacağımız iş veritabanını ve tabloyu hazırlamaktır.
ajax_login isimli bir veritabanı oluşturduktan sonra admin tablosu oluşturmak için aşağıdaki sol kodunu  kullanıyoruz.

 

CREATE TABLE `admin` (

`id` int(11) NOT NULL auto_increment,

`username` varchar(64) NOT NULL,

`password` varchar(32) NOT NULL,

PRIMARY KEY  (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Ajax ve php login uygulaması için daha sonra formumuzu hazırlıyoruz. Tasarım konusunda istediğiniz gibi bir şey çıkarabilirsiniz. Bu tamamen sizin hayal gücünüze kalmış bir durum  Sayfamızın ismi login.php olsun.

 

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

</head>

<body>

<form>

<table width=”400″ align=”center” cellpadding=”5″ cellspacing=”5″>

<tr>

<th colspan=”2″>Kullanıcı Girişi</th>

</tr>

<tr>

<td>Kullanıcı adı:</td>

<td><input type=”text” name=”username” id=”username”></td>

</tr>

<tr>

<td>Şifre:</td>

<td><input type=”password” name=”password” id=”password”></td>

</tr>

<tr>

<td colspan=”2″><input type=”button” name=”Giriş” id=”Giriş” value=”GİRİŞ YAP”></td>

</tr>

</table>

</form>

</body>

</html>

login.php dosyamızın içeriği şimdilik bu kadar. Adım adım gittikçe sayfamızın içeriğini de artıracağız.
Sırada ne var?
Şimdi ise jquery kütüphanesini kullanmak için js isimli bir dizin açıyoruz ve jquery’nin son sürümünü http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js&downloadBtn= adresinden indiriyoruz. Sayfamızın üst kısmına ise jquery kütüphanemizi include ediyoruz.
<script type=”text/javascript” src=”jquery.js”></script>
Sırada ise forma girdiğimiz datalarımızı ajax yolu ile harici bir php dosyasına yollamaya geldi. Bunun için adımlarımız şöyle olacak:

* İlk olarak butonumuzun onclick event ‘ına bir js fonksiyonu yazacağı.
* Daha sonra sayfamızın üst kısmında bu fonksiyonu oluşturacağız ve ajax isteğinde bulunacağız.
* Bu ajax isteği sonucunda gelen değere göre kullanıcıyı yönlendireceğiz.

İlk adımda söyledğimiz gibi formumuzda bulunan butonumuzu şu şekilde değiştiriyoruz:
<input type=”button” name=”Giriş” id=”Giriş” value=”GİRİŞ YAP” onclick=”fnc_login();”>

Sayfamızın üst kısmına <head>…</head> arasına javascript fonksiyonumuzu şu şekilde yazıyoruz:

 

<script>

function fnc_login()

{

//form text alanlarından girdiğimiz dataları id’lerine göre alıyoruz

//bunları birer değişkene atıyoruz

var username = $(‘#username’).val();

var password = $(‘#password’).val();

 

$.ajax({

type: “POST”,

url: “ajax.login.php”,

data: “username=”+username+”&amp;amp;amp;amp;amp;amp;amp;amp;password=”+password,

success: function(msg){

//ajax request başarı ile gerçekleşmişse bu kısım işlenir

alert(msg);

}

});

 

}

</script>

Kodun içerisindeki açıklamalar ile fonksiyonun nasıl çalıştığını anlattık. Şimdi sırada ise username ve password değişkenlerinin gideceği ve bize sonuç döndürecek olan ajax.login.php dosyasının hazırlanması var.

ajax.login.php dosyasının içeriği ise şu şekilde olacak:

<?php

//database’e bağlantı işlemini gerçekleştiren connect.php dosyasını include ediyoruz
include_once(“connect.php”);

//ajax ile gelen değişkenleri mysql_real_escape_string fonksiyonundan geçirerek
//dışardan gelecek sql injection ataklarına karşı güvenliğimizi alıyoruz
$username    =    mysql_real_escape_string($_POST[“username”]);
$password    =    md5(mysql_real_escape_string($_POST[“password”]));
//password değişkenimiz database de md5 şifreleme formatında tutulduğu için değişkenimizi md5 ile şifreliyoruz

//sql cümlemizi oluşturarak database e yolluyoruz
$sql = mysql_query(“SELECT id FROM admin WHERE username=’$username’ AND password=’$password'”);

//kaç adet dönen değer olduğunu buluyoruz
$num = mysql_num_rows($sql);

if($num==1)
{
//eğer dönen değer 1’e eşitse yani yani girdiğimiz kullanıcı adı ve şifremiz databasede mevcutsa
list($user_id) = mysql_fetch_array($sql);
session_start();
$_SESSION[“user_id”] = $user_id;
echo true;
}
else
{
echo false;
}

?>

Ajax isteğinde bulunduğumuz php dosyamızı da oluşturduktan sonra sıra geldi js fonksiyonumuzn success kısmını düzenlemeye. Çok basit. Sadece dönen değeri daha doğrusu ajax.login.php dosyasında echo yaptığımız değeri tekrar js içerisinde kontol etmek.

//ajax request başarı ile gerçekleşmişse bu kısım işlenir

if(msg == true)

{

//eğer dönen değer true ise Giriş başarılı şeklinde  uyarı verecek

alert(“Giriş başarılı”);

}

else

{

//dönen değer false ise Giriş başarısız şeklinde uyarı verecek

alert(“Giriş başarısız”);

}

İşte bu kadar

Notlar:

* Burda yaptığım çalışma çok basit anlamda olmuştur. Zamanla geliştirilecektir ya da geliştirilmeye açıktır. Başlangıç seviyesinde olan arkadaşlara yardımcı olmak istedim.
* Olayın şeklinden çok tekniğini anlatmaya çalıştım. Mutlaka herkes şurası şöyle burası böyle olabilirdi diyecektir.
* Tasarımda table kullandım. Sadece basit anlamda bir form olduğu için işimi göreceğini düşündüm. tableless tasarımın destekcisiyim yanlış anlaşılmasın
* He bir de tablonuza bir kullanıcı eklerseniz sevinirim. password ü md5 ile şifrelemeyi unutmayın

Ajax ve php login uygulaması işte bu kadarda zor bir şey değildir.

İyi çalışmalar…

 

CEVAP VER