benzinlikteki genç adam

Şu ana kadar bir türlü javascript framework'lerine ısınamadım. Zira, gereğinden fazla sistem kaynağı harcıyorlar, kullanmadığım bir çok kod bloğunu sisteme include etmek zorunda kalıyordum. Geçenlerde eburhan'ın jquery dünyasına adım atıyoruz adlı blog girdisini okuyunca fikirlerim değişti. Zira, hem ufak bir kütüphane olması hem de hız sorununu yeni versiyon ile halletmiş olması beni cezbetti açıkcası. Kullanımı da oldukça basit, hemen hemen her türlü özelliğini seviyorum, sadece lisp'ten nefret eden biri olarak çok fazla parantezli syntax biraz canımı sıktı ama alışacağız artık.

jquery ile ara ara ufak uygulamalar/örnekler geliştirip blogta paylaşmayı planlıyorum. Ama öğrenirken öğreteceğim için belki yazdığım kodlarda yanlış yaklaşımlar, gereksiz fazlalıklar olabilir. Dolayısıyla ortaya çıkabilecek herhangi bir sorun için şimdiden özür dileyeyim. Neyse, artık jquery'i biraz tanıyalım ve ilk örnek uygulamamızı geliştirelim;

başlangıç

jquery kütüphanesini jquery.com adresinden edinebilirsiniz. Sıkıştırılmış ve sıkıştırılmamış olarak 2 paket mevcut. İsteğinize göre dosyayı seçip indirin.

Artık jquery'i sayfamıza dahil edelim ve ilk uygulamıza geçelim.

uygulama: ajax ile kullanıcı adı kontrolü

İlk önce sayfamıza jquery kütüphanesini dahil edelim.

 
<script src="jquery.js" type="text/javascript"></script>

Şimdi, ufak bir form yazıyoruz;

 
<form>
<p class="baslik">Ajax ile kullanıcı adı kontrolü
 
<label for="name">Nick</label>
<input id="name" name="isim" />
 
	<label for="isim">isim</label>
<input id="isim" name="isim" />
 
	<label for="city">Şehir</label>
<input id="city" name="sehir" />
 
        <label for="submit"></label>
<input id="submit" value="yolla" onclick="javascript:void(0);" type="button" />
</form>
 

Şimdi basitçe ajax isteği yapacağımız dosyayı yazalım, bu dosya alınmış nickleri tutan dosya. Gelen isteğe göre nick alınmış, veya nick alınmamış şeklinde çıktı verecek.

 
$nick = @$_GET["nick"];
if(empty($nick)) die;
 
$alinan_nickler = array(
                        "yns",
                        "benzinliktekiadam",
                        "abdagli",
                        "sinem",
                        "cjohn",
                        "asptr"
                       );
 
if(in_array($nick,$alinan_nickler)) {
   echo " nick kullanımda ";
}
else {
   echo " nick alınabilir ";
}

Buraya kadar salt HTML ve salt PHP yazdık. Şimdi asıl noktaya Jquery'i yi nasıl kullanacağımıza geçiyoruz.

İlk önce, salt javascriptte window.onload'ın yansısı olan $(document).ready yordamını kullanacağız.

Basitçe, sayfa yüklenirken yapılması gereken işlemleri burada yapıyoruz. Biz ise, ilk olarak id'si name olan input'un onBlur event'ını istek_yap(); fonksiyonuna dahil ediyoruz.
Ayrıca, sonucu göstereceğimiz katmanı (uyarı) görünmez hale getiriyoruz.

Jquery'i sisteme dahili ettiğimiz satırın altına yeni bir script etiketi ekleyip şunları yazalım;

 
$(document).ready(function(){
    $('#name').blur(function(){ istek_yap(); });
    $('#uyari').css( { display: "none" } );
});

Bu eklemeden sonra istek_yap(); fonksiyonunu yazacağız. Bu fonksiyonda yapacağımız işlemler sırasıyla şu şekilde;

1. input içinden gelen veriyi değişkene al
2. uyarı katmanını güncelle ve içeriğine loading.gif grafiğini yerleştir.
3. kontrol.et.php'ye yeni bir ajax isteğinde bulun ve sonucu uyarı katmanına yazdır.

Birinci kısımda, input içinden gelen veriyi jquery ile şu şekilde alabiliyoruz:

 
var isim = $('#name').val();

Kullanımı oldukça basit, name yazan yere içeriğini almak istediğiniz katmanın id'sini yazıyorsunuz.Şimdi uyarı katmanını görünebilir yapıp, içine loading grafiğini yerleştirelim.

 
$('#uyari').css( { display: "block" } );
    $('#uyari').html('   <img src="loading.gif" />');

Css özelliklerine $('#katman_id').css( { özellik:"değer" } ); şeklinde değiştirebiliyoruz. Katman içeriğini ise $('#katman_id').html('yeni_icerik...'); şeklinde değiştirebiliyoruz.

Şimdi sadece ajax isteğini yapmak kaldı geriye; jquery'de ajax isteği yapmak oldukça kolay. jquery'nin dökümantasyonda farklı kullanımları olmasına rağmen en sık kullanılan şekli şu;

$.ajax({
url : 'test.php',
type: 'GET',
data: 'deger=yns',
success: function(sonuc){
alert(sonuc)
}

url parametresi istek yapılacak dosyayı, type istek tipini ( POST, GET..), data gönderilecek değişkenleri, success ise istek başarıyla yapıldıktan sonra yapılacak işlemi belirtiyor.
success içine yazdığınız fonksiyonun ilk parametresi (örnekte sonuc) ajax isteğinden gelen sonucu barındırır.

Şimdi biz uygulama için gerekli ajax kodlarını yazalım;

 
$.ajax({
    url : 'kontrol_et.php',
    type: 'GET',
    data: 'nick=' + isim,
    success: function(sonuc){
        $('#uyari').css( { display: "none" } );
        $('#uyari').html('   '+sonuc);
        $('#uyari').fadeIn('slow');
    }

İşlem tamam, function içinde ilk önce uyarı katmanını görünmez yaptık, sonra içeriğine dönen sonucu ekledik, son olarak jquery'in fadeIn efektiyle ekrana gösterdik.

Çalışan uygulamayı buradan kontrol edebilir, kodları buradan çekebilirsiniz.

sonuç...

jquery ile hem ajax isteği yapmak, hem katmanlarla oynamak hem fade efekti yapmak bizim için sadece 10-15 satıra mal oldu. Bunu salt Javascript ile yapsaydık eminim kaç satır olduğunu saymak istemezdik

Jquery hakkında benim gördüğüm kadarıyla fazla Türkçe dökümantasyon yok, fakat Burcu Doğan'ın ve eburhan'ın blogunu takip etmekte fayda var.

Eğer bildiğiniz başka jquery kaynakları/yazıları varsa bildirirseniz sevinirim. jquery notlarım ben yeni bir şey öğrendikçe bu adres altından devam edecek...