Haziran 10

Evet mi Hayır mı?

AJAX & Hazır Kütüphaneler eburhan

Uzun bir aradan sonra yeniden merhaba. Uzun zamandır Prototype.js kütüphanesi ile ilgili sizlere bilgiler sunuyorduk. Prototype.js rehberimizin son bulmasından sonra bilgilerimizi pekiştirmek adına örnek bir uygulamanın zamanı gelmişti. Bu örnek uygulamamızda Prototype.js kütüphanesinin AJAX sınıfını kullanarak basit bir oylama sistemi hazırlayacağız. Ziyaretçinin, sorduğumuz bir soruya evet veya hayır şeklinde oy verebilmesini sağlayacağız.

Neler yapacağız?

İlk önce yapacak olduğumuz uygulamaya göz gezdirelim ve yapısını anlamaya çalışalım. Alttaki resimde de gördüğünüz gibi son derece basit bir örnek. Çünkü bu yazıdaki asıl hedef nokta, Prototype.js kütüphanesinin AJAX sınıfının nasıl kullanıldığını görmek ve bu konudaki bilgilerimizi pekiştirmek.

Uygulamanın Son Hali
Resim 1

OylaX ismini verdiğim bu uygulamada veritabanından soruyu alıyoruz. Aynı zamanda bu soruya kaç kişinin Evet, kaç kişinin Hayır oyu verdiği bilgisini de alıyoruz. Biraz matematik ile sonuçları yüzde şeklinde görüntülüyoruz. Oyu kullanmak isteyen kişinin ise normal bir şekilde Evet veya Hayır linkine tıklaması yeterli. Yapacağımız bu örnekte soruyu ve cevap yüzdelerini ekrana AJAX ile görüntüleyeceğiz. Cevabı kaydederken de yine AJAX tekniğini kullanacağız.

Uygulamada Kullanılan Dosyalar
Resim 2

Uygulamadaki dosyalara da göz atalım. stil.css dosyasında css kodlarımız yer alıyor. prototype.js dosyası ise javascript kütüphanemiz. cevapAl.php dosyası veritabanından soruyu ve evet/hayır sonuçlarını alıyor. Alınan verileri toparladıktan sonra resim 1'deki görüntüyü elde etmemizi sağlıyor. cevapKaydet.php dosyası ise kendisine gönderilen oylama sonucunu veritabanına kaydetmekle yükümlü. index.php dosyası ise ana dosyamız. cevapAl.php ve cevapAl.php dosyalarına AJAX ile bu dosyadan ulaşıyoruz. Bütün AJAX ve JavaScript kodlarımız bu dosya içerisinde.

Tüm bunlardan sonra iş listemizi oluşturmak gerekirse;

  1. veritabanındaki tabloyu inceleyeceğiz
  2. cevapAl.php dosyasında soruyu ve evet/hayır sonuçlarını alacağız
  3. cevapKaydet.php dosyasında oylama sonucunu alıp veritabanına kaydedeceğiz
  4. index.php dosyasında da cevapAl.php ve cevapKaydet.php dosyalarıyla iletişim kuran JavaScript ve AJAX kodlarını yazacağız

1. Veritabanındaki işlemler

Veritabanı üzerinde yalnızca 1 adet tablo kullanacağız. Ben tablonun ismini oylama olarak kullandım. Altaki resimde de gördüğünüz gibi "oylama" isimli tablonun basit bir yapısı var. no alanı, sorulara benzersiz (unuqie) soru numaraları atamamız için. soru alanında ise ziyaretçinize yöneltmek istediğiniz sorular tutuluyor. Eğer ziyaretçiniz Evet yanıtını verirse, evet alanı 1 artıyor. Aynı şekilde Hayır yanıtını verirse de hayır alanı 1 artıyor.

Veritabanıdaki tablo
Resim 3

Bu yazının sonunda bu veritabanını MySQL veritabanı üzerinde tek hamlede oluşturabilmenizi sağlayan SQL dosyası mevcut. Dosyayı oradan alabilirsiniz.

2. cevapAl.php dosyasını hazırlayalım

cevapAl.php dosyasında resim 3'deki tablomuzdan soruyu ve evet/hayır sonuçlarını çekeceğiz. Kaç no'lu sorunun çekileceğini cevapAl.php dosyasına POST ettiğimiz bir veri ile belirleceğiz. Şimdi kodlamaya geçelim.

PLAIN TEXT
PHP:
  1. <?php
  2.     // Soru numarasını al
  3.     $soruNo = $_POST['soruNo'];
  4.  
  5.     // Veritabanına bağlan
  6.     $baglan = mysql_connect("localhost", "kullanici", "parola");
  7.               mysql_select_db("veritabani", $baglan);
  8.               mysql_query("SET NAMES 'utf8'");
  9.    
  10.     // Soru numarasına göre bilgileri sorgula
  11.     $sql = "SELECT * FROM oylama WHERE no = $soruNo";
  12.     $sorgu = mysql_query($sql, $baglan);
  13.     $veri = mysql_fetch_assoc($sorgu);
  14.    
  15.     // Veritabanından alınan bilgiler
  16.     $no = $veri['no'];
  17.     $soru = $veri['soru'];
  18.     $evet = $veri['evet'];
  19.     $hayir = $veri['hayir'];
  20.    
  21.     // Yüzdeleri hesapla
  22.     $toplamOy = $evet + $hayir;
  23.     $evetYuzde = @round( ($evet / $toplamOy) * 100 );
  24.     $hayirYuzde = @round( ($hayir / $toplamOy) * 100 );
  25. ?>
  26.  
  27. <p id="soru">
  28.     <?php echo $soru; ?>
  29. </p>
  30. <p id="cevap">
  31.     <a href="javascript:cevapKaydet('e', <?php echo $no; ?>);" title="<?php echo $evet ; ?> kişi">Evet</a> (%<?php echo $evetYuzde; ?>)
  32.     &nbsp;&nbsp;
  33.     <a href="javascript:cevapKaydet('h', <?php echo $no; ?>);" title="<?php echo $hayir; ?> kişi">Hayır</a> (%<?php echo $hayirYuzde; ?>)
  34. </p>

Yaptığımız ilk iş 3. satırda bu dosyaya gönderilmiş soru numarasını almak. Daha sonra veritabanı bağlantısı kuruyoruz. 11. satırdan itibaren veritabanımızdaki "oylama" isimli tablomuza sorgu gönderiyoruz. Bu sorgulama soru numarasına göre yapılıyor. 16. satırdan itibaren veritabanından dönen bilgileri daha rahat kullanabilmemiz için değişkenlere atıyoruz. 22. satırdan sonra ise evet ve hayır sonuçlarını ekranda yüzde olarak gösterebilmemizi sağlayan matematiksel işlemleri yapıyoruz. PHP'nin yerleşik round fonksiyonu ile elde ettiğimiz sonucu tam sayı olarak yuvarlıyoruz. Böylece sonuç %55,53 gibi bir değer çıkarsa ekranda %55 olarak görünüyor. 27. satırdan itibarense, Resim 1'deki görüntüyü elde etmek için HTML kodlarıyla biçimlendirme yapıyoruz. Ayrıca Evet ve Hayır linklerine cevapKaydet isimli JavaScript fonksiyonunu da ekliyoruz. Bu fonksiyonu index.php sayfasında ayrıntısıyla ele alacağız.

Sayfalar: 1 2 3

Toplamda 9839 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 6 kişi aynı anda okumuş.
Bugün 23 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ı