Bu video dersimizde genel olarak, onkeyup() nesnesi, onkeypress() nesnesi, Ajax ile PHP sayfasına veri gönderme ve gelen bu verileri yorumlayıp aynı sayfa içerisinde kullanıcı ile etkileşim kurmaktan bahsettim.
Dersimizin başlığından da anlaşılacağı gibi, anında form kontrolü uygulaması yaptık. Daha açık anlatmak gerekirse, hani bazı sitelerde rastlarsınız, bir yazı kutusuna e-mail adresinizi yazarken hemen yanında bir kutucuk belirir ve bu mail adresinin uygun olup olmadığını anlık olarak sizlere gösterip bilgilendirme yapar. Biz de işte buna benzer bir uygulama yaptık. Umarım bu işi gerçekten öğrenmek isteyenlere bir yardımımız dokunur. Dipnot: Form kontrolü yapılmıştır, ancak veritabanına kayıt yapılmamıştır. |
26 Haziran 2012 Salı
Anında Form Kontrolü
0
yorum
Jquery dersleri bölüm 4 (Toggle Methodu)
Toggle Methodu
Toggle methodu çok kullanışlı bir methoddur bir çok sitede rasgelmişsinizdir aslında show ve hide methodlarının karışımıdır diyebiliriz.Zaten Türkçe olarak bir işlemden diğerine geç gibi bir anlamı var.
kullanımına bakalım;
toggle()
toggle(4000) // 4000 zaman belirtir. 4000 = 4 saniye
toggle('slow') // slow'un Türkçe karşılığı yavaş demektir.
HTML-Kodu:
<!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>Untitled Document</title>
<script src="jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#box {
background-color: red;
width: 300px;
height: 300px;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#box').toggle('slow');
});
});
</script>
</head>
<body>
<div id="box"></div>
<a href="#">Tıkla beni!</a>
</body>
</html>
AJAX ile Eş Zamanlı Form Kontrolü
Kısaca konuyu anlatmak gerekirse eski usulde form kontrolünde tüm formu doldururdunuz ve bittiği zaman "Gönder" düğmesine basardınız. Eğer girmiş olduğunuz kullanıcı adı veya e-posta adresi başkası tarafından kullanılıyorsa ancak tüm formu doldurup gönderdikten sonra bunu öğrenebilirdiniz. Oysa ki AJAX ile o an doldurmuş olduğunuz metin kutusunu eş zamanlı olarak kontrol edilmesini sağlama imkanınız var. Yani kontrolü, gönder butonuna basmadan önce, form elemanı doldurulduğu anda yapabileceğinizi kastediyorum. Konuyu anlatırken AJAX-TR için hazırladığım ve AJAX Tab Kontrol ismini verdiğim örnek uygulamayı kullanacağım. İsmine "Tab kontrol" dedim çünkü Tab tuşuna basıldığı anda veya kutudan çıkıldığı anda kontrolün yapılışını anlatacağım.
DosyalarUygulamada ana sayfayı oluşturan index.php dosyası, kontrolün yapıldığı ve bilginin gönderildiği kontrol.php dosyası ile eyceks kütüphanesinin dosyaları (loading.gif, eyceks.js) bulunmakta.
İlk Adım Kontrol edeceğimiz formu index.php dosyasında oluşturuyoruz. Sadece bir metin kutusu bize yetecektir. Yanına da yeşillik niyetine parola kutusu koydum
PLAIN TEXTHTML:
<form action="void(0)" method="POST" name="form1">
<table>
<tr><td colspan="2"><b>ÜYE GİRİŞİ</b><br><br></td></tr>
<tr><td width="100">Kullanıcı Adı</td><td width="350">: </td></tr>
<tr><td>Parola</td><td>: </td></tr>
<tr><td></td><td></td></tr>
</table>
</form>
Dikkat ederseniz kullanıcı adı metin kutusunun onblur olayına kontrol_et() işlemini yapmasını belirttim. Bu kontrol_et() fonksiyonu form bilgisini kontrol.php dosyasına gönderecek olan fonksiyon. Aşağıda bu fonksiyonu açıklayacağım.
Formumuzu hazırladık diyelim. Bizim burada yapacağımız şey kontrol butonuna basılmadan kullanıcı adının girildiği kutuyu, biz parola hanesine geçerken kontrol edilmesini sağlamak. Kontrolde, girilen kullanıcı isminin var olup olmadığına bakılmasını ve kullanıcıyı buna göre uyarmasını istiyoruz.
İkinci AdımAJAX Tab Kontrol'de bu sitenin yazarı eburhan'ın arkadaşımızın eyceks kütüphanesini kullandım.
Bu ikinci aşamada eyceks'i form kontolü yapacağımız index.php dosyasına çağıralım.
PLAIN TEXTJAVASCRIPT:
[/javascript]
Bu işlemi de tamamladıktan sonra sıra geldi <strong>Tab</strong> tuşuna bastığımızda işlemesi gereken javascript fonksiyonuna.
<h3>Üçüncü Adım</h3>
[javascript]function kontrol_et(){
var sc = 'uyeadi='+ document.form1.kullanici_adi.value;
JXP(1, "sonuc", "kontrol.php", sc);
}
İşte bu kodlarla tabtuşuna basılıp parola kutusuna geçerken eyceks kutuphanesini de kullanarak kontrol.php dosyasına kullanıcı adını POST metoduyla (JXP) yolladık. Gelecek olan cevabı da "sonuc" id'sine sahip elemanda görünecek şekilde ayarladık.
Son AdımSon adım ise kontol.php dosyasını oluşturduğumuz kısım. Bu dosyada kontrolü dilediğiniz gibi ayarlayabilirsiniz. İster veritabanına bağlantı kurun, isterseniz de bir e-posta adresinin uygun yazılıp yazılmadığını kontrol edin. Burası size kalmış. Ben ise sadece 5 tane üye ismi belirledim ve girilen ismin bunlardan birisiyle aynı olup olmadığını kontrol ediyorum. Ne de olsa önemli olan mantığı kavramak
kontol.php
PLAIN TEXTPHP:
isim zaten mevcut :-(</font>';
break;
case "":
echo '<font>isim girmediniz!</font>';
break;
default:
echo '<font color="blue">isim uygun :-)</font>';
}
?>
DosyalarUygulamada ana sayfayı oluşturan index.php dosyası, kontrolün yapıldığı ve bilginin gönderildiği kontrol.php dosyası ile eyceks kütüphanesinin dosyaları (loading.gif, eyceks.js) bulunmakta.
İlk Adım Kontrol edeceğimiz formu index.php dosyasında oluşturuyoruz. Sadece bir metin kutusu bize yetecektir. Yanına da yeşillik niyetine parola kutusu koydum
PLAIN TEXTHTML:
<form action="void(0)" method="POST" name="form1">
<table>
<tr><td colspan="2"><b>ÜYE GİRİŞİ</b><br><br></td></tr>
<tr><td width="100">Kullanıcı Adı</td><td width="350">: </td></tr>
<tr><td>Parola</td><td>: </td></tr>
<tr><td></td><td></td></tr>
</table>
</form>
Dikkat ederseniz kullanıcı adı metin kutusunun onblur olayına kontrol_et() işlemini yapmasını belirttim. Bu kontrol_et() fonksiyonu form bilgisini kontrol.php dosyasına gönderecek olan fonksiyon. Aşağıda bu fonksiyonu açıklayacağım.
Formumuzu hazırladık diyelim. Bizim burada yapacağımız şey kontrol butonuna basılmadan kullanıcı adının girildiği kutuyu, biz parola hanesine geçerken kontrol edilmesini sağlamak. Kontrolde, girilen kullanıcı isminin var olup olmadığına bakılmasını ve kullanıcıyı buna göre uyarmasını istiyoruz.
İkinci AdımAJAX Tab Kontrol'de bu sitenin yazarı eburhan'ın arkadaşımızın eyceks kütüphanesini kullandım.
Bu ikinci aşamada eyceks'i form kontolü yapacağımız index.php dosyasına çağıralım.
PLAIN TEXTJAVASCRIPT:
[/javascript]
Bu işlemi de tamamladıktan sonra sıra geldi <strong>Tab</strong> tuşuna bastığımızda işlemesi gereken javascript fonksiyonuna.
<h3>Üçüncü Adım</h3>
[javascript]function kontrol_et(){
var sc = 'uyeadi='+ document.form1.kullanici_adi.value;
JXP(1, "sonuc", "kontrol.php", sc);
}
İşte bu kodlarla tabtuşuna basılıp parola kutusuna geçerken eyceks kutuphanesini de kullanarak kontrol.php dosyasına kullanıcı adını POST metoduyla (JXP) yolladık. Gelecek olan cevabı da "sonuc" id'sine sahip elemanda görünecek şekilde ayarladık.
Son AdımSon adım ise kontol.php dosyasını oluşturduğumuz kısım. Bu dosyada kontrolü dilediğiniz gibi ayarlayabilirsiniz. İster veritabanına bağlantı kurun, isterseniz de bir e-posta adresinin uygun yazılıp yazılmadığını kontrol edin. Burası size kalmış. Ben ise sadece 5 tane üye ismi belirledim ve girilen ismin bunlardan birisiyle aynı olup olmadığını kontrol ediyorum. Ne de olsa önemli olan mantığı kavramak
kontol.php
PLAIN TEXTPHP:
isim zaten mevcut :-(</font>';
break;
case "":
echo '<font>isim girmediniz!</font>';
break;
default:
echo '<font color="blue">isim uygun :-)</font>';
}
?>
25 Haziran 2012 Pazartesi
Yeni Firefox Görücüye Çıktı!
Firefox, yuvarlak köşeli yeni şık tasarımını görücüye çıkardı! İşte o tasarım ve onu deneme şansı...
Mozilla, bir yandan bir yandan Firefox'un yeni sürümünü çoklu platform desteğiyle sunma çalışmalarını sürdürürken, bir yandan da popüler tarayıcının tasarımını elden geçiriyor. Yeni ortaya çıkan bir test sürümü, köşeleri yuvarlanmış sekmelerikullanıcıların beğenisine sundu. Mozilla, tasarımcılardan birinin blogunda tanıttığı yeni sürüm için kullanıcıların yorumyapmasını istedi. Yeni tasarımda etkin sekme yuvarlak köşeleriyle görünür halde olacak ve diğer sekmeler sadece başlık halinde görülecek.
Sürüm şimdilik sadece Windows altında çalışıyor.
Tarayıcının yeni görünümünü merak ediyor ve yorumlarınızla katkıda bulunmak istiyorsanız, bu adresi ziyaret edebilirsiniz.
Mozilla, bir yandan bir yandan Firefox'un yeni sürümünü çoklu platform desteğiyle sunma çalışmalarını sürdürürken, bir yandan da popüler tarayıcının tasarımını elden geçiriyor. Yeni ortaya çıkan bir test sürümü, köşeleri yuvarlanmış sekmelerikullanıcıların beğenisine sundu. Mozilla, tasarımcılardan birinin blogunda tanıttığı yeni sürüm için kullanıcıların yorumyapmasını istedi. Yeni tasarımda etkin sekme yuvarlak köşeleriyle görünür halde olacak ve diğer sekmeler sadece başlık halinde görülecek.
Sürüm şimdilik sadece Windows altında çalışıyor.
Tarayıcının yeni görünümünü merak ediyor ve yorumlarınızla katkıda bulunmak istiyorsanız, bu adresi ziyaret edebilirsiniz.
Kaydol:
Kayıtlar (Atom)
