JQUERY İLE BASİT BİR LOGİN FORMU
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…
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.
<?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 '<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3Ewindow.location%3D%22%0Ahttp%3A%2F%2Fwww.veblebi.com%2Fjquery-ile-basit-bir-login-formu%2F%22%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />';
else echo $hata;
} ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0Abody%20%7B%20%20text-align%3A%20center%3B%20overflow%3Ahidden%3B%20background-color%3A%20%23D2D3D7%3B%7D%0Adiv%23form%20%7B%20%20background-color%3A%20%23515160%3Bwidth%3A%20200px%3B%20text-align%3Acenter%3B%0A%20margin%3A%200%20auto%3B%20margin-top%3A100px%3B%20border%3A%20thin%20solid%20%23FFF%3B%20color%3A%20%23FFF%3B%7D%0A%0Ainput%5Btype%3Dtext%5D%20%20%7Bbackground-color%3A%20%23A5ABB6%3B%20padding%3A%206px%3B%20border%3A%20%0Athin%20solid%20%23DCDEE7%3B%20%20%20%20color%3A%20%23FFF%3B%7D%0Ainput%5Btype%3Dpassword%5D%20%20%7B%20%20%20%20background-color%3A%20%23A5ABB6%3B%20padding%3A%206px%3B%0A%20border%3A%20thin%20solid%20%23DCDEE7%3B%7D%0Ainput%20%7B%20padding-top%3A%205px%3B%20padding-right%3A%2020px%3B%20padding-bottom%3A%205px%3B%0A%0A%20padding-left%3A%2020px%3B%7D%0A%23sonuc%20%7B%20font-weight%3A%20bold%3B%20color%3A%20%23FFF%3B%20background-color%3A%20%23F00%3B%20%7D%0A%23bilgi%20%7B%20position%3A%20absolute%3B%20height%3A%20100%25%3B%20width%3A%20100%25%3B%20left%3A0px%3B%20%0Atop%3A0px%3B%20margin%3A0%3Bbackground-color%3A%23333333%3B%20display%20%3A%20none%3B%20text-align%3Acenter%3B%0A%0A%20padding-top%3A200px%3B%20color%3Awhite%3B%20filter%3Aalpha(opacity%3D90)%3B%20%20opacity%3A%200.9%3B%20%20%20-moz-opacity%3A0.9%3B%7D%0A%23bilgi%3Espan%20%7B%20background-color%3A%20%23063%3B%20%20%20%20border%3A%20thin%20solid%20%23999%3B%20padding%3A%2010px%3B%7D%0Ahr%20%7B%20%20%20%20border%3A%20thin%20ridge%20%23999%3B%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<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…