Ajax ve php ile basit anlamda bir login uygulaması
Comments(7) Webde 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 sql 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 ;
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;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
İyi çalışmalar...
elinize saglık
Sade bir anlatım eline sağLık.Jquery ile ajax gerçekden çok kolay.
yanlız if($num==1) ile tek kullanıcı şeklinde düşünülmüş bi sistem sanırım.Diğer şekilde düşünürsek yani çok kullanıcılı login kısmında
if deyiminin küçük bir derlemeye ihtiyacı var.
teşekkür ederim elimden geldiğince sade tutmaya çalıştım
aslında tek kullanıcı düşünülerek yapılmış bi şey degil.
sadece girilen kullanıcı adı ve şifreye göre sadece 1 kişinin uygun olmasını istiyorum. e mantık olarak da aynı kullanıcı adı "ve" şifreye sahip birden fazla kişi olamayacağı için uygulamada bir yanlış olduğunu düşünmüyorum.
yorumunuz için teşekkür ederim
Eline sağlık arkadaşım. ajax ve jquery e merak saldığım bir zamanda çok işime yaradı bunlar. anlatımın güzel olmuş. php kısmına gelincede bence php kısmında bir hata yok kişinin yazımına göre değişebilir fakat mantığının doğru olduğuna bende katılıyorum. başarılar.
@akın teşekkür ederim yorumun için. şimdi baktım da yazıyı yazalı neredeyse bir yıl olmuş. hala işe yarıyor olması sevindirici bir durum.
elinize sağlık gerçekten güzel bi anlatım olmuş hele benim gibi yeni başlayan birisi için merak ettiğim bi konu var şimdi ajaxle php dosyasına post ediyoruz aynı html de post eder gibi phpde veri işleniyor ordan dönen hangi değeri olumlu olarak anlıyor orasını anlamadım ben session yerine cookie kullanıyorum yani userpass doğruysa çerez yazdırıyorum bu işlemlerden hangisini ajax doğru olarak algılıyor orasını anlamadım sadece teşekkürler başarılar.
ilk olarak yorumun için teşekkür ederim.
soruna gelirsek anladığım kadarı ile post sonucu gelen değeri kontrol ettirme de sorun yaşıyorsun.
//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");
}
gördüğün gibi burda dönen değerin kontrol edildiği bir kısım var. sen php kısmında ister cookie'e yazdır, ister db'ye farketmez. önemli olan senin ordan ne döndüreceğindir. ben true/false döndürmüşüm.
umarım soruna cevap verebilmişimdir.