3 Eylül Cumartesi ´11   —   4 Yorum
Biliyorsunuz site ustunde buyuk degisikliklerle mesguldum. Nihayet mimari degisiklikler sonuclanmaya basladi, cogu bitti diyebilirim. Hala var fakat artik on yuzde gorunur seyleri de degistirmeye basliyorum. Bunun bir kismi 2-3 haftadir mootools ile jquerynin beraber calisarak bir tasima surecinde olmasi seklinde gecti.

Simdi mootools bagimliligi olan herseyi temizledim. Bazi seyleri sadelestirdim, zamaninda fazla gorseli destekleyen bir javascript yaklasimda kodluyormusum.

Sonuc olarak site artik tamamen jquery ustunde sekilleniyor, eski seyleri tasima bitti. Simdi yavas yavas bunun uzerine gelistirme olarak ilerleyecegim.
Gorunur degisikliklerden biri de footer oldu. Yakinda eskisine yakin bir hale getirecegim fakat tamamen tasarim degisimine de ugrayabilir. Su an fonksiyonel olarak bir kayip yok eskisine gore.
11 Nisan Cuma ´08   —   16 Yorum
Son dönemde smashing magazine'da sağda solda çok fazla jquery plugin-leri vs görmeye başladım. Jquery açısından işin güzel yanı piyasadaki her türlü şaklaban siteler varsa (yani javascriptsel aktiviteleri iyi olan) o sitelerdeki her türlü zamazingoyu jquery-ciler hemen çevirip plugin olarak yazıyorlar.

Mesela aylar önce mfyz.com'daki textarea'ları elle büyütüp küçülttürmek yerine facebook ayarında otomatik yapan bir kütüphane aradım mootools için yazılmış olan fakat bulamadım. Çok şaşırtıcı değil. Google'da gerekli anahtar kelimelerle bu konuyu araştırdığınızda direk jquery eklentileri çıkıyor karşınıza.

İsmi itici, alakasız gelse de jquery için "mootools vs jquery" araması yaptığınızda çıkan neredeyse tüm tartışma konularında, blog girdilerinde yorumlar jquery dostları ile dolu.
Mesela 274 saniye önce okuduğum bir yorumda şöyle diyordu :
ben ve mootools ile çok çalıştık fakat birkaç ay kadar önce jquery'ye geçtik. (seçim yapmadık, ıkına sıkıla geçtik).
Hatta başka bir yerde de

Mootools'u çok sevimli buluyorum. Efektleri ve yaptığı işleri yumuşakca (smoothly'nin Türkçesi, yoksa yumuşakçayı yanlış anlamayın :-) ) yapıyor, fakat aynı işleri jquery ile çok daha kolay, hızlı ve pratik yapıyorum.
Yani çoğunluğun tercihi jquery. Günlerdir karşıma çıkan pluginleri nedeniyle, "jquery nedir?", "nasıl pluginleri var?" gibi soruları kendime sormama, araştırıp merak etmeme yol açtı.

Zaten bir iki aydır elim kodlama görmediğinden şu anda herşeyi unutup yeni bir dille başlayabilirim işlerime. Muhtemelen ileride qjuery kodluyor/kullanıyor olacağım arkadaşlar.

Siz bu konuda ne düşünüyorsunuz?

Korkmayın

Döküman başlığı anlaşılmaz olsa da şimdi olayı kavrayacaksınız :-) Html elemanlarımızı css ile yerleştirirken css'de nesnelerin etiket adları, kimlikleri (id) ve sınıflarına (class) göre seçici cümleler oluştururuz. Mesela tüm bağlantılar için
a {

}
kullanırız. Ya da tüm "ipucu" sınıfına ait elemanları seçmek için
.ipucu
tanımı kullanırız. Hatta tüm ipucu sınıfındaki sadece bağlantıları seçmek için
a.ipucu
veya icerik kimliği içindeki tüm ipucu sınıflı span'ları seçmek istersek de
#icerik span.ipucu
adreslemesini kullanırız. Bu adresleme aslında nesnelere erişimimizi oldukça kolaylaştırır. Gerek tek nesneye ulaşırken gerek de birden fazla nesneye ulaşırken css adreslemeleri bu konuda oldukça pratiktir.

JavaScript ile ne ilgisi var peki?

DOM'da seçici fonksiyonlar vardır bilirsiniz. getElementById(), getElementsByClass() gibi. Fakat son verdiğim örnekteki nesnelere ulaşmak için birkaç döngü kurmanız gerekir, daha karışık nesene seçimlerinde de bizi uğraştırabilir. Mootools'u yine seveceksiniz, çünkü mootools'da seçici fonksiyonlar var ve bunlardan bir tanesi (muhtemelen en çok kullanılan) css adreslemelerine göre elemanlar seçiyor.


$ Fonksiyonu elemanları kimliklerine göre seçer. getElementById(); ile aynı işi yapıyor aslında
eleman = document.getElementById('anasayfa_butonu');
// ile aşağıdaki tanım aynı işi görür
eleman = $('anasayfa_butonu');
$$ Fonksiyonu az önce yazdığımız css adreslemesinde bulduğu elemanları nesne dizesi olarak verir.

Örneğin ipucu sınıfındaki tüm linkleri seçtirelim
$$('a.ipucu')
icerik kimliği içindeki ipucu sınıflı tüm linker :
$$('#ipucu a.ipucu')
ya da birden fazla sınıf adreslemesine ait elemanların hepsi :
$$('a.ipucu, a.eposta, span.bilgi')
Şimdilik pek oturmadı farkındayım ama birkaç örnek yapalım eminim daha iyi anlayacaksınız :

Mesela elimizde 4-5 linkten oluşan bir menü olsun. Aynı zamanda sayfamızın içeriğinde de linkler, span'lar bold metinler vs bir sürü elemanımız var. Sadece css ile yerleştirilip düzenlenmiş durumda. Örnek HTML şöyle :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Sayfa Basligi</title>
  </head>
<body>
  
  <h1>Canım Sitem</h1>
  
  <div id="menu">
    <a href="anasayfa.html" title="Anasayfa'ya gider">Anasayfa</a> |
    <a href="dokumanlar.html" title="Yazdığım dökümanlar">Dökümanlar</a> |
    <a href="fotolar.html" title="Fotoğraflarım">Fotoğraflar</a> |
    <a href="hakkinda.html" title="Mehmet Fatih YILDIZ hakkında">Hakkımda</a> |
    <a href="iletisim.html" title="Benimle İletişin">İletişim</a>
  </div>
  
  <div id="icerik">
    <!--
      HTML SAYFA ICERIGI BURADA
    --> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  
  <div id="linklerim">
    <h3>Linklerim</h3>
    <a href="http://www.mfyz.com">MFYZ.Com</a> <br>
    <a href="http://www.google.com">google</a> <br>
    <!--
      YUZLERCE LINK OLDUGUNU DUSUNELIM
    -->
    <a href="http://www.yahoo.com">yahoo</a>
  </div>
  
</body>
</html>
Gördüğünüz gibi basit bir html dosyası. Şimdi menudeki tüm linkleri seçip bir güzellik yapalım :-)
$$('#menu a').each(function(link){
  alert( link.getProperty('title') );
});
$$ ile aldığımız nesneleri each ile dönüyoruz. içerideki fonksiyona verdiğimiz link parametresi dizi dönerken elemanın nesnesini ifade ediyor. Böylece o elemanlar üzerinde istediğimizi yapabiliyoruz. İçeride basitçe linklerdeki title argümanına atadığım açıklama metinlerini alert ettirdim. Ama bu sayfa yüklenirken yapılır be birşey anlamazsınız. Daha güzel bir örnek vermek gerekirse :
$$('#menu a').each(function(link){
  link.addEvents({
    'mouseover': function(){
      window.status = link.getProperty('title');
    },
    'mouseout': function(){
      window.status = '';
    }
  });
});
Linklerin üzerine geldiğinizde sayfa statusbar'ında linklerin url'leri yerine açıklamaları çıkar :-) Bu kısımlar dökümanla ilgili değil, onun için geçiyorum.

Mesela kullanılabilir bir örnek için de sayfada içerikten sonraki linkler kısmında birşeyler yapalım. O linkler site dışı linkler ve target'ları yok gördüğünüz gibi. Yani linkler doğrudan sayfa üzerinde açılacaklar. Bu linkleri yeni pencerede açtıralım.
$$('#linklerim a').each(function(a){
  a.setProperty('target', '_blank');
});
kodu işimizi görecektir. Bu kod işletildikten sonra o linkler yeni pencerede açılacaktır.
Bu örnek css seçicileri anlamanızı sağlamıştır umarım.


CSS seçiciler ile tek eleman seçtirmek


CSS seçiciler ile tek eleman seçtirmek istediğinizde, mesela bir sürü eleman içinden css adresiyle bir eleman seçtiriyorsunuz :
#linklerim a.google
az önceki örnekte alttaki linklerin etiketinde hepsine sınıf eklediğimizi düşünelim. Google linkine de google sınıfı atadık. Fakat bu sınıfa tek eleman var. Sadece o link var. Ancak CSS seçiciler her zaman dizi döner.
$$('#linklerim a.google')
olarak seçmek istediğinizde tek elemanlı bir dizi dönecektir.
$$('#linklerim a.google')[0]
ile kolayca elemanınıza ulaşabilir, üzerinde işlemler yapabilirsiniz.


Hazırlayan : Mehmet Fatih YILDIZ
6 Şubat Çarşamba ´08   —   11 Yorum

Ajax Nedir?


Ajax aslında modern tarayıcıların desteklediği XMLHttpRequest özelliğini kullanarak sayfa yenilemeden istek yapıp cevap almamızı sağlayan birşeydir.

XMLHttpRequest hakkında bilgi için buraya tıklayın.

Çoğu sitede görmeye alışık olduğumuz birşey haline gelmeye başladı aslında ajax. Çünkü web 2.0 uygulamalarının neredeyse ana çatısını oluşturuyor. Web 2.0 yazılımları 2.0 yapan şey aslında kullanıcı etkileşimi ve bu etkileşimden kastımız aslında bir web uygulamasının sanki masaüstü uygulaması gibi çalışması. Bu da aslında Sunucu-Kullanıcı istek-cevap ilişkisini sayfa yenilemeden yani kullanıcı için hazırladığınız ARAYÜZü yenilemeden birçok işi yapmaktan geçiyor. Tabiki bunu da XMLHttpRequest'i kolay hale getirip kullanmamızı sağlayan ajax kütüphaneleri yapıyor.

İnternette çok sayıda ajax kütüphanesine rastlayabilirsiniz, genellikle 3-5 satır kod ile istek ve cevabı işleyebiliyor. Fakat bu sitede mootools odaklı gittiğim için bu dökümanda mootools ile ajax eklentisini kullanmayı göreceğiz. Diğer kütüphaneleri de kullanarak farkı görebilirsiniz.


Mootools ve ajax


http://mootools.net/ adresinden mootools'u ajax seçeneği ile derleyerek indirmelisiniz. Sayfa başında mootools.js dosyasını include edin. Basitçe ajax isteği için kod bloğu şöyle :
new Ajax('icerik_alinacak_dosya.php', {
  method: 'get',
  update: $('icerik_basilacak_element_id')
}).request();
Çoğu mootools eklentisi, nesnesindeki gibi zorunlu kısımlar nesneye ilk parametrelerde veriliyor. Sonra da bir ayar dizesi (nesne olarak)
şeklinde 2. parametre belirleniyor.

Burada ilk parametre string olarak istek yapılacak url, yani istek yapılacak dosya adı. Bir php dosyası veya html dosyası veya dışarıda bir web sayfası urlsi olabilir. Ayar dizesindeki parametrelerden önemli olanların açıklamaları da şöyle :
data            Gönderilecek url parametreleri. Aşağıda açıklamasını yapacağım.

method          İstek methodu, get veya post olabilir.

update          Cevap geldiği zaman içeriğin yerleştirileceği html nesnesi adresi

onComplete      Cevap geldiği zaman işletilecek javascript kodu, fonksiyon olarak
                belirtilmesi gerekiyor ve fonksiyonun ilk parametresi cevap dönen
                içeriği string olarak fonksiyona sokar.

evalScripts     XMLHttpRequest ve çoğu diğer ajax kütüphanelerindeki ana sorun,
                cevap gelen içerik içerisinde eğer bir javascript kod bloğu veya
                dosya include varsa Normalde bu kısımlar çalıştırılmaz.
                Bu popüler bir sorundur, bu parametreye true değeri vererek
                bu sorunu aşabilirsiniz (Mootools'u seviyorum).
Şimdi bu parametreleri örneklerle açıklama çalışacağım. Önce bir bağlantıyı (link) ajax ile çağırıp dönen içeriği ekranda bir bölüme yazdıralım.
...
<a href="#" onClick="ajax_istek('hakkinda.html');">Hakkında</a>
<a href="#" onClick="ajax_istek('iletisim.html');">iletişim</a>
...
<div id="icerik"></div>
...
Bu sayfamız olsun. Linke tıklantığında ajax_istek fonksiyonunu url parametresiyle çağırıyor görüldüğü gibi. Ayrıca icerik kimlikli bir div var. İçeriği buraya basacağız.
function ajax_istek(hedef){
  new Ajax(hedef, {
    update: $('icerik')
  }).request();
}
Basit bir ajax isteği gördüğünüz gibi. Şimdi bunu biraz geliştirelim ve linke tıklandığında sayfa içeriği "Yükleniyor" olsun, içerik geldiğinde de zaten yükleniyor kalkacak.
function ajax_istek(hedef){
  $('icerik').setHTML('Yükleniyor');
  new Ajax(hedef, {
    update: $('icerik')
  }).request();
}
Biraz daha geliştirip yüklenme işlemi bittiğinde birşeyler yaptıralım.
function ajax_istek(hedef){
  $('icerik').setHTML('Yükleniyor');
  new Ajax(hedef, {
    update: $('icerik'),
    onComplete: function(){
      alert("Sayfa Yüklendi");
    }
  }).request();
}
Örneğin burada alert yerine sayfanın bir köşesinde bu uyarıyı gösterip gizletebilirsiniz, Ya da içeriği basmayıp bir işlem yaptırabilirsiniz. Bunu örneklemek için işe biraz form katacağım. mfyz.com'da üye kayıt sayfasında kullanıcı adı kontrol mekanizmasını anlatacağım. Kayıt formuna girdiğinizde kullanıcı adı seçip yazdıktan sonra bilgi giriş kutusundan çıktığınızda (yani başka bir nesenye odaklandığınızda) otomatik olarak kullanıcı adının veritabanında olup olmadığını sorgulayıp cevabı geliyor ve ona göre kutu yeşil veya kırmızı oluyor farkında iseniz.
<input type="text" id="kadi" onBlur="kullanici_adi_kontrol_et(this.value);">
şeklinde bir inputum var ve onBlur olayına yani kutudan odak gittiğinde bir fonksiyon çağırıyorum.
function kullanici_adi_kontrol_et(kadi){

  // kullanici adini veritabanindan kontrol
  // edecek php dosyasina sorgulatiyorum
  new Ajax('kullanici_adi_kontrol.php', {
    method : 'get',
    data: 'kadi = ' + kadi,
    onComplete: function(cevap){
      if(cevap == 'OK'){
        // kullanici adi giris kutusunun kenrlığını yeşil yapalım
        $('kadi').setStyles({
          'border' : '1px solid green'
        });
      }else{
        // kullanici adi giris kutusunun kenrlığını kırmızı yapalım
        $('kadi').setStyles({
          'border' : '1px solid red'
        });
        // ve gelen hatayi basalim
        alert(cevap);
      }
    }
  }).request();

}
Bakın burada 2 parametreyi örnekledim. Birisi data parametresi diğeri de update kullanmak zorunda olmadığımız. Ayrıca onComplete'de tanımladığımız fonksiyonun ilk parametresi yani cevap değişkeni ajax ile dönen içeriği alıyor.

Yukarıda yaptırdığım işlem özetle şöyle: kullanici_adi_kontrol.php dosyası get methodu ile gelen kadi değişkenindeki string'i veritabanında aratıyor. Eğer yoksa ekrana sadece "OK" basıyor. Eğer başka bir hata varsa hatayı basıyor. Mesela kullanıcı adında geçersiz karakterler var veya veritabanında o kullanıcı mevcut. Yani hata varsa "OK" dışında birşeyler oluyor. PHP hatası da olabilir.

onComplete'da cevap değişkenini kontrol ettiriyorum. Eğer "OK" string'i ise kullanıcı adı yok yani ekrana başarı sinyali vermem gerek. Ben de etkileşimli olması için bilgi giriş kutusunun çerçevesini yeşil yapıyorum. Mootools ile css özniteliklerini değiştiriyorum. Eğer OK değilse bir hata vardır. Çerçeveyi kırmızı yapıp cevap değişkenini yani dönen hatayı ekrana yazdırıyorum alert ile.

Bu istekleri ve cevap işleme tekniklerini uygulamanıza göre geliştireceksiniz, Zaten burada o istek-cevap ilişkisinin boyutu önemli değil. Yani çok büyük istekler de yapabilirsiniz çok küçük de.


Formları otomatik ajax ile post etmek


Mootools'da çok güzel bir özellik daha var. Formunuzu çok pratik bir şekilde ajax ile göndermek.
<form id="bilgi_formu" action="kayit.php" method="post">
  Ad : <input type="text" name="ad"><br>
  Soyad : <input type="text" name="soyad"><br>
  <input type="submit" value="Gönder">
</form>
böyle bir formunuz olduğunu varsayalım. Oldukça basit yani. Gönder butonuna basıldığında normal şekilde kayit.php dosyasina post methodu ile 2 değişken gidiyor biliyorsunuz. kayit.php'de de bu değişkenleri işliyorsunuz.
$('bilgi_formu').send();
kodu sayesinde formu ajax ile gönderebilirsiniz. Gideceği url, methodu ve datası otomatik olarak bulunup gönderiliyor. Örnek kullanımını da şu kodlar özetleyebilirim :
<form id="bilgi_formu" action="kayit.php" method="post">
  Ad : <input type="text" name="ad"><br>
  Soyad : <input type="text" name="soyad"><br>
  <input type="button" onClick="gonder()" value="Gönder">
</form>

<script>
function gonder(){
  $('bilgi_formu').send({
    onComplete: function(){
      alert("Başarıyla gönderildi");
    }
  });
}
</script>
Gördüğünüz gibi submit yerine buton kullanarak bir fonksiyon çağırıyorum. ajax için kullandığımız send fonksiyonunun ilk parametresi ajax için kullandığımız ayar dizesi oluyor. Yani update ile gelen içeriği biryere yazdırabilir veya ajax için uyguladığımız taklaları burada da attırabilirsiniz.


Mootools ajax dökümantasyonu :http://docs.mootools.net/Remote/Ajax.js
Ajax Demoları :http://demos.mootools.net/Ajax
http://demos.mootools.net/Ajax.Form
Not : Nesnelere olay ekleyip bu işleri yaptırmak daha kolaydır. Mesela form ajax ile post etmek için submiti butona çevirmek ilkel bir mantıktır. Forma doğrudan onSubmit olayı ile kural belirleyerek yaparız aslında bu işlemleri. Fakat dökümanda daha fazla kafa karışıklığı yaratmaması için doğrudan fonksiyon çağırtıp işlem yaptırdım.
Hazırlayan : Mehmet Fatih YILDIZ

Popüler Etiketler

icon ikon grafik download firefox banner calendar php logo mfyz mobile table iphone css media twitter statistics istatistik insanlar facebook api opengraph fql optimization örnek kod apple social sosyal medya radio button switch workspace startups linux konsol xmlhttprequest ajax iOS javascript cache htaccess apache web app open source portfolio subversion svn auth date diff zaman tarih xml http server internet explorer object js html html5 rss parse dokuman google service mysql db code wanda digital git version control deployment mod_rewrite url cookie assets development screen terminal css3 form style wireless less ipad lifestream tool kurulum nasıl mail signature imza subdomain job webkit app music doritos tytz query select applications macosx free regex integration network blog bootstrap nedir license lisans spam mootools proje kampanya input textarea jquery mssql sql optimizasyon analyse procedure kitap ui design ios itunes session injection while sitemap seo ipucu wordpress cms route router kontrol yapıları if chart osx login ubuntu ntfs fstab ie support browser www redirect crossdomain language oyun app store store in-app purchase purchase verification storekit itunes connect tebrik framework compile xhtml search meta compiler windows on-the-fly generator plugin link ux icons graph developer share ruffles browsers newsletter laptop notebook pharma hack ide editor phpstorm jetbrains coding subscription gimp howto widget mdb2 pear player connect box prepare execute export database pgsql internet