Login formumuzda, kullanıcı Giriş butonuna bastığında girilen bilgileri PHP dosyamıza gönderip, değerleri kontrol ediyoruz. Bu işlem boyunca ekrana “Veriler Kontrol Ediliyor Lütfen Bekleyiniz…” mesajı veriyoruz. Tabi bu mesajımızı ekranı tamamen karartan bir efektle(fade) yapıyoruz ve PHP dosyası ile alışveriş bittikten sonra eğer giriş başarılı ise sayfamızı yönlendiriyoruz, hatalı ise ekranımız tekrar aydınlanarak form tekrar işlevli hale getirilmiş oluyor…
Görselliğe önem vermedim ve kalabalık olmaması için, sade ve basit bir arayüz üzerinde hazırladım.
Demoyu Buradan İnceleyebilirsiniz… Kullanıcı Adı: demo Şifre: demo Önce kutuları boş bırakıp deneyin, sonra hatalı kullanıcı ve şifre girin, en son doğru verileri girerek testi bitirin.
Örneği Buradan İndirebilirsiniz
Form verilerini alıyor ve gerekli kontrolleri yaptıktan sonra eğer herhangi bir sorunumuz yok ise, işlem sonrası gitmek istediğimiz sayfaya yönlendiriyoruz… (Bu sadece bir örnek olduğu için verileri sizlerin databaseden çektiğinizi ve sorgu verilerini güvenli biçimde işlediğinizi varsayıyorum. Bu biçimde hazırlanmış olmasının tek nedeni test edilebilir ve kolayca anlaşılabilir olması için.) Bu arada PHP dosyasındaki 2 saniyelik uyku modunu da kaldırmayı unutmayın, test edilirken olan biten görülebilsin diye 2 sn beklemiş olduk. 🙂
login.php
<?php
if (isset($_POST['adi'])) {
$hata ="";
sleep(2);
$adi = trim($_POST['adi']);
$sifre = trim(md5($_POST['sifre']));
($adi != "demo" or $sifre != "fe01ce2a7fbac8fafaed7c982a04e229" ) ? $hata = "Hatalı Kullanıcı veya Şifre ":null;
$adi == "" ? $hata = "Kullanıcı Adınızı Girmediniz ":null;
if($hata == "") echo '<script type="text/javascript">window.location="http://www.veblebi.com/jquery-ile-basit-bir-login-formu/";</script>';
else echo $hata;
} ?>
POST Sayfamızın Üst Tarafı..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Login Form</title>
Stil kodlarımız… Burada efektle ekranı karartan Div tagımızın id’si “bilgi”, stil dosyamızda ise #bilgi biçiminde yer alıyor. Stil ayarlarımızda durumu gizlidir(display : none;), giriş butonu tıklandığı anda görünür yapacağız, php dosyamızdan cevap geldiğinde ise tekrar gizli hale gelecek ve böylelikle form tekrar işlev kazanacak.
<style type="text/css">
body { text-align: center; overflow:hidden; background-color: #D2D3D7;}
div#form { background-color: #515160;width: 200px; text-align:center; margin: 0 auto; margin-top:100px; border: thin solid #FFF; color: #FFF;}
input[type=text] {background-color: #A5ABB6; padding: 6px; border: thin solid #DCDEE7; color: #FFF;}
input[type=password] { background-color: #A5ABB6; padding: 6px; border: thin solid #DCDEE7;}
input { padding-top: 5px; padding-right: 20px; padding-bottom: 5px; padding-left: 20px;}
#sonuc { font-weight: bold; color: #FFF; background-color: #F00; }
#bilgi { position: absolute; height: 100%; width: 100%; left:0px; top:0px; margin:0;background-color:#333333; display : none; text-align:center; padding-top:200px; color:white; filter:alpha(opacity=90); opacity: 0.9; -moz-opacity:0.9;}
#bilgi>span { background-color: #063; border: thin solid #999; padding: 10px;}
hr { border: thin ridge #999;}
</style>
Javascript Kodlarımız. Burada $(‘#bilgi’) biçimiyle belirttiğimiz ekranı kaplayacak olan elementimizi hem belirtmiş hemde içeriğini doldurmuş oluyoruz, içerik doldurduktan hemen sonrada efektli bir biçimde($(‘#bilgi’).fadeIn(1000);) görünmesini sağlıyoruz. PHP dosyamızda iletişim başarıyla sonlanmış ise ekranı efektli bir biçimde tekrar kullanıma açıyoruz($(‘#bilgi’).fadeOut(1000);) ve dönen hatayı ilgili elemente ($(‘#sonuc’).html(ajaxcevap);) yazdırıyoruz. HTML kodlarında div elemtlerinin ID lerini takip ederseniz javascript kodları içerisinde neyin, nerede işlendiğini görebilirsiniz…
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#login').submit(function(){
$('#bilgi').html("<span>Veriler Kontrol Ediliyor Lütfen Bekleyiniz...</span>");
$('#bilgi').fadeIn(1000);
$.ajax({
type: "POST",
url: "login.php",
data: $('#login').serialize(),
success: function(ajaxcevap){
$('#bilgi').fadeOut(1000);
$('#sonuc').html(ajaxcevap);
}
});
return false;
});
});
</script>
Devam HTML Kodları
<div id="form"> <form id="login"> <label for="adi">Kullanıcı Adı</label> <input id="adi" name="adi" type="text" /> <hr /> <label for="sifre">Şifre</label> <input id="sifre" name="sifre" type="password" /> <hr /> <input name="submit" type="submit" value="Giriş" /> </form></div>