Haziran 10

Evet mi Hayır mı?

AJAX & Hazır Kütüphaneler eburhan

4. index.php dosyasını hazırlayalım

index.php dosyasında AJAX işlemlerini yapacağız. AJAX tekniğini kullanarak cevapAl.php ve cevapKaydet.php dosyalarıyla iletişim kuracağız.

PLAIN TEXT
HTML:
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title>OylaX  v1.0</title>
  5.     <link rel="stylesheet" type="text/css" href="stil.css" />
  6.     <script type="text/javascript" src="prototype.js"></script>
  7. </head>
  9.  
  10. <div id="kapsayici">&nbsp;</div>
  11.  
  12. </body>
  13. </html>

index.php dosyasının şablonu bu. Sayfamızdaki nesneleri biçimlendirmesi için stil.css dosyasını dahil ediyoruz. Ayrıca Prototype.js kütüphanesini kullanacağımız için de yine prototype.js dosyasını sayfamıza dahil ediyoruz. Bununla birlikte ekranda görüntülenecek olan Soruyu ve Evet/Hayır linklerini, ID'si kapsayici olan bölge içerisine göndereceğiz.

Şimdi de AJAX tekniğini kullanabilmemiz için gerekli olan JavaScript fonksiyonlarını yazacağız. Alttaki kodları, üstteki şablonun 6. satırından itibaren yazmaya başlamalıyız.

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript">
  2.     Event.observe(window, 'load', aktifOylama, false);
  3.  
  4.     function aktifOylama()
  5.     {   
  6.         cevapAl(1); 
  7.     }
  8.  
  9.     function cevapKaydet(cevapTuru, soruNo)
  10.     {   
  11.         $('cevap').innerHTML = 'Oy kaydediliyor ...';
  12.        
  13.         var myAjax = new Ajax.Updater(
  14.             'cevap',
  15.             'cevapKaydet.php',
  16.             {
  17.                 method: 'post',
  18.                 parameters: 'cevapTuru=' + cevapTuru + '&soruNo=' + soruNo,
  19.                 onComplete: aktifOylama
  20.             }); 
  21.     }
  22.    
  23.     function cevapAl(soruNo)
  24.     {   
  25.         $('kapsayici').innerHTML = 'Sonuç alınıyor ...';
  26.        
  27.         var myAjax = new Ajax.Updater(
  28.             'kapsayici',
  29.             'cevapAl.php',
  30.             {
  31.                 method: 'post',
  32.                 parameters: 'soruNo=' + soruNo
  33.             }); 
  34.     }
  35. </script>

Ajax tekniği için Prototype.js kütüphanesinin Ajax.Updater nesnesini kullanıyoruz. Hemen kısaca kullanımına bakalım.

Ajax.Updater(ID, dosya, { parametreler });

AJAX ile aldığımız veriyi sayfanın neresinde göstermek istiyorsak ID yazan yere konumunu belirtiyoruz. dosya yazan yere ise AJAX ile iletişim kurduğumuz sayfanın tam ismini yazıyoruz. Ve son olarak köşeli parantezler içerisine de Ajax.Updater nesnesinin alabileceği ek parametreleri bildiriyoruz. Örneğin verilerin POST yöntemiyle mi yoksa GET yöntemiyle mi gönderileceğini, eğer veriler POST yöntemiyle gönderilecekse bu verilerin ne olduğunu "parametreler" bölümüne belirtiyoruz. Ajax.Updater ile ilgili daha fazla bilgiyi bu sayfada bulabilirsiniz.

Yukarıda yazdığımız JavaScript kodlarına geri dönersek... aktifOylama isimli fonksiyon ekranda görüntülecek olan soruyu ve Evet/Hayır sonuçlarını çağırıyor. Bu çağırma işlemin sayfa yüklendiğinde tetiklenmesi için Prototype.js kütüphanesinin Event.observe nesnesinden faydalınıyoruz. Bu nesne bir olay dinleyici gibi çalışır. Daha fazla bilgi için bu sayfaya bakabilirsiniz.

cevapKaydet(cevapTuru, soruNo) fonksiyonu ile kullanıcının Evet linkine mi yoksa Hayır linkine mi tıkladığını ve sorunun numarasını alıyoruz. Aldığımız bu bilgileri AJAX ile cevapKaydet.php dosyasına yolluyoruz.

cevapAl(soruNo) fonksiyonu ise ekranda görünecek olan soruyu ve Evet/Hayır sonucunu göstermek için. Ekranda hangi soruyu ve o sorunun sonuçlarını görmek istiyorsak, bu fonksiyona soru numarasını bildirmemiz yeterli oluyor. Örneğin veritabanındaki "oylama" tablosunda kayıtlı olan 4. sorunun bilgilerin görünmesini istiyorsak bu fonksiyonu cevapAl(4) şeklinde kullanmamız yeterli oluyor. Yaptığımız bu örnek uygulamada ben 1 nolu sorunun bilgileri göstermek istedim. Bu yüzden aktifOylama fonksiyonu içerisinde cevapAl(1) tanımlaması yapmış olduğuma dikkat edin.

Ve bitirirken...

Bu kadar basit bir uygulama için biraz uzun bir yazı oldu. Bu yüzden sizi sıktıysam kusuru bakmayın. Elimden geldiğimce herşeyi açıklamaya çalıştım. Eğer unutmuş olduğum veya eksik kalan noktalar varsa yorum bölümünden bana yazabilirsiniz. Tekrar görüşmek üzere ...

Uyarı: Anlatımı basitleştirmek adına bu uygulamada herhangi bir güvenlik önlemi alınmamıştır. Bu yüzden buradaki uygulamayı birebir kendi uygulamalarınızda asla ve asla kullanmayın. Meydana gelebilecek problemlerden Ajax-Tr yazarları sorumlı tutulamaz !


Sayfalar: 1 2 3

Toplamda 9850 kez okunmuş.
Şu an 2 kişi okuyor.
En fazla 6 kişi aynı anda okumuş.
Bugün 4 kez okunmuş.

Etiketler: , , , , , , , 

1 oy2 oy3 oy4 oy5 oy (32 oy, ortalama 3.97) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

15 yorum var

  1. # ismailaltuntas | 10 Haziran 2007, 10:11 Gravatar

    Güzel makale olmuş tebrikler…

  2. # eburhan | 10 Haziran 2007, 10:22 Gravatar

    Bu uygulamayı temel alarak şunun gibi web sitelerini rahatça yapabilirsiniz.

    http://www.evet-hayir.com/

    http://www.left-or-right.com/

  3. # grkn | 10 Haziran 2007, 11:06 Gravatar

    başarılı bir makele eburhan, teşekkürler ve tebrikler.

  4. # Erdem | 10 Haziran 2007, 19:03 Gravatar

    Peki bu uygulamayı nasıl döngü içine sokacağız? mesela forech döngüsüyle veritabanından alınan sırasıyla yazılar var tek sayfada ve bunlara nasıl ekleyeceğiz? id si 1 den başlayıp 5 kadar giden tek sayfada farklı makaleler diğelim. hepsinin ayrı ayrı oylaması olacak.

  5. # bgoral | 11 Haziran 2007, 10:23 Gravatar

    Merhaba,
    Makaleniz güzel tebrikler, ancak bence bu sitede daha ziyade örnek uygulamalar vermek yerine, teknolojik gelişmeler paylaşılıp tartışılmalı. Mesela,
    1. google gears ve client caching nedemek, gereklimi,
    2. grease monkey’e millet neden kasıyor. sadece hack amaçlımı.
    3. Scripletler gereklimi, neden gerekli, ne demek bu scriptlet.
    4. Flex diye bişey var, caching, proxying, veya xmlhttp layeri olarak kullanılıyor, eskiden kullanılan flash yerine. Niye bu adamlar bunları kullanıyor. XmlHttpRequest neden yetmiyor.
    5. Ajaxta serverside ne olmalı. RoR,Python, Php,lisp,java,perl hangisi neden önemli neden önemsiz. Hangisi kullanılabilir. Php bazı uygulamaları yapmak için neden yeterli değil, yetersiz olduğu noktalar neler.
    6. AjaxTr prototype, jquery, mootools, dojo extensionlarımızı paylaştığımız bir yer olsunmu gibi :) Kendi kütüphanemizi yazalımmı, yazarsak ne kazanırız. Ne kaybederiz? Niye herkesin ajax kütüphanesi var, kurallar belli değilmi, niye hergün kütüphane çıkıyor? Hepsi gerçekten birbirinden farklımı.

    Umarım çok şey istemiyorumdur, ama bence şu öğrenme ve öğretme modundan çıkıp, tartışma ve paylaşma moduna geçersek bu konuda çok hızlı ilerleriz.

    Bir de bir link vermek istiyorum. ben tüm videoları izlemedim ama eminim izleyip javascript konusunda bir çok yanlışımızdan kurtulabiliriz.

    http://video.yahoo.com/video/profile?sid=33385

    Teşekkürler.

  6. # eburhan | 11 Haziran 2007, 13:10 Gravatar

    @bgoral
    Bu tartışmalar için zaten bir “tartışma grubu” mevcut. Buradan ulaşabilirsin. Bu grupta istediğin gibi tartışma açabilirsin.

  7. # orhan | 12 Haziran 2007, 15:30 Gravatar

    Ellerine sağlık @eburhan, gerçekten bu kadar teorik bilginin üzerine enfes bir uygulama olmuş, tebrikler.

  8. # Murat | 13 Haziran 2007, 10:50 Gravatar

    Erdem’in sordugu soruyu soracaktim ben de. Bu ajax ile birden fazla oylanabilen anketi nasıl gösteririz?

  9. # Hasan | 15 Haziran 2007, 21:45 Gravatar

    Tşekkürler gerçekten güzel bir makale olmuş.

  10. # Ahmet Eyüp ARTIR | 17 Haziran 2007, 12:59 Gravatar

    elinize sağlık , çok faydalı olacağına eminim…

  11. # yakuter | 17 Haziran 2007, 17:20 Gravatar

    @murat ve Erdem, bahsettiğiniz konuyu ancak kod ile açıklayabiliriz ki bu da yorumlarla olacak şey değil. Ajax Nedir e-posta grubunda dilediğiniz gibi görüşebiliriz ;)

    @bgoral, yorumun için çok teşekkürler. Aslında biz hem öğretmek hem de paylaşmak istiyoruz. Sonuçta bilgi olmadan tartışma olmaz. Siteyi kurarken ilk amacımız AJAX konusunu öğretmek ve örnekler, uygulamalar sunmaktı. Sonradan gördük ki bu konuyu enine boyuna tartışmak da gerekli fakat eburhan ve ben malesef bu hıza yetişemiyoruz. Bir makaleyi yazmak bile 2 saati bulabiliyor.

    Benim stajım Erhan’ın da sınav stresi bitsin, bakacağız duruma ;)

  12. # Harun | 26 Haziran 2007, 19:40 Gravatar

    Güzel makale elinize sağlık

  13. # Emre | 10 Ekim 2007, 12:45 Gravatar

    Merhaba
    gerçekten güzel bir makale ancak localhost um da deniyorum ve veritabanından sadece 1 id numaraları soruyo çekiyor 1 den sonrakiler ekrana gelmiyor sorun bende mi acaba :)

  14. # Yusuf Bekar | 28 Aralık 2007, 19:34 Gravatar

    Asp olarakda cevirdim :)

    Default.asp

    ____________________________________

    Oyla v1.0 ( Professional Web Developer Mc YuSuF)

    Event.observe(window, ‘load’, aktifOylama, false);

    function aktifOylama()
    {
    cevapAl(1);
    }

    function cevapKaydet(cevapTuru, soruNo)
    {
    $(’cevap’).innerHTML = ‘Oy kaydediliyor …’;

    var myAjax = new Ajax.Updater(
    ‘cevap’,
    ‘Kaydet.asp’,
    {
    method: ‘post’,
    parameters: ‘cevapTuru=’ + cevapTuru + ‘&soruNo=’ + soruNo,
    onComplete: aktifOylama
    });
    }

    function cevapAl(soruNo)
    {
    $(’kapsayici’).innerHTML = ‘Sonuç alınıyor …’;

    var myAjax = new Ajax.Updater(
    ‘kapsayici’,
    ‘Cevap.Asp’,
    {
    method: ‘post’,
    parameters: ’soruNo=’ + soruNo
    });
    }

     

    __________________________________________

    Cevap.asp

    ________________________________________________

    0 Then

    EvetYuzde = int((Evet / Toplam) * 100)
    HayirYuzde = int((Hayir / Toplam) * 100)

    Else

    EvetYuzde = 0
    HayirYuzde = 0

    End IF
    %>

    );” title=” kisi”>
    EVET     (%)
          
    );” title=” kisi”>
    HAYIR     (%)

    _____________________________________________

    kaydet.asp

    _____________________________________________

    Set Conn=Server.CreateObject(”Adodb.Connection”)
    Conn.Open “Provider=Microsoft.Jet.oleDb.4.0;Data Source=” & Server.Mappath(”Db.mdb”)

    Turu = Request.Form(”cevapTuru”)
    SoruID = Request.Form(”soruNo”)

    IF Turu=”e” Then

    Conn.ExeCute(”Update Sorular Set Evet = Evet + 1 Where ID=”&SoruID&”")

    Else

    Conn.ExeCute(”Update Sorular Set Hayir = Hayir + 1 Where ID=”&SoruID&”")

    End If

    ___________________________________________________

    veritabanı Acces

    Tablo adı : Sorular

    Sütün adı Türü
    ID otomatik sayı
    Soru not
    Evet sayı
    hayır sayı

    kolay gelsin

  15. # Cem | 20 Şubat 2008, 22:52 Gravatar

    cok güzel bir calisma Allah razi olsun. Yalniz Erdem’in sordugu soruyu ben de tekrar dile getirmek istiyorum : “bu uygulamayi nasil döngü icine sokacagiz?”

    sevgili yakuter, Ajax Nedir e-posta grubunda, konunun aciklanabilecegini yazmisti ancak orada da arastirmalarima ragmen, ne yazik ki bu konuyla ilgili bir bilgi bulamadim. yardimci olabilirseniz cok sevinirim.

    kolay gelsin

Yorum yazın

sayfa sayacı