Ocak

2010

Basit Bir AJAX Hesap Makinesi

Geçen hafta PHP kursunda amacımızı biraz aşıp, istemci taraflı kütüphanelere daldık. AJAX’ın ne olduğu, neden AJAX’a ihtiyaç duyduğu, kısa bir tarihçesi gibi konular üzerinde durduktan sonra, popüler kütüphanelerden jQuery yardımı ile, AJAX yöntemini kullanan bir hesap makinesi yazdık.

Amacı ne, PHP’ye ne gerek var, JavaScript zaten toplama çıkarma yapabiliyor diyecek olursanız, sonuna kadar haklısınız. Bu programcıkta amaç, AJAX’ı basit bir şekilde örneklemek, öğrenebilmek, anlayabilmek…

…diyor ve sizi kodlarla baş başa bırakıyorum.

AJAX Konusu ile İlgili Öğretici Bir Sunum (İngilizce)
Kaynak Kodları (zip, sıkıştırılmış)

Eğer kodları indirmeden incelemek isterseniz, yazının devamına bakabilirsiniz.

bizimkodlar.js

$(document).ready(function() { 
/* Buranın içindeki kodlar, sayfa yüklenmesi tamamlanınca çalışacak. Genel geçer olarak,
jQuery kodları bu blok içine yazılır. */
   var sayac = 0; /* Değişken tanımlama. */
 
   /* Bir "event". makine id'li form submit olunca aşağıdaki kod parçası çalışır. Daha ayrıntılı bilgi için
   jQuery dokümantasyonundan selector ve events konularına bakınız.*/
   $("#makine").submit(function() {
 
      $.ajax({ /* jQuery kütüphanesinin sunduğu cross-browser ajax metodu */
         type: "POST", /* http veri aktarım metodu */
         url: "hesap.php", /* isteğin yapılacağı adres */
         cache: false, /* sorgu tarayıcı önbelleğine alınabilir mi? */
         data: $(this).serialize(), 
         /* gönderilecek veri. this.serialize ile, submit edilen formun içindeki tüm bilgiler gönderilmektedir. */
         dataType: "json", /* dönüş için beklenen veri tipi */
         error: function(request) { /* isteğin yapılamaması sonucu gerçekleşecek kod parçası */
            alert("Hata oluştu."); /* ekrana mesaj kutusu çıkartır. */
         },
         success: function(request) { /* isteğin başarılı olması sonucu gerçekleşecek kod parçası */
            if(!request.hatali) {
               sayac++;
               $('#sonuc').append(sayac + " numaralı islemin sonucu: " + request.sonuc + "<br />"); 
               /* json ile gelen verilere dizi elemanıymış gibi erişilebilir.  */
            } else {
               alert("Sonuc hatalı. Gelen mesaj: " + request.hata);
            }
         }      
      });
      return false; /* varsayılan submit olayının olmasını (formun normal yöntemlerle gönderilmesini) engeller. */
      /* AJAX ASENKRONDUR. KOD PARÇASININ BU SATIRINA GELMESİ İÇİN AJAX SORGUSUNUN BİTMESİ
      GEREKMEMEKTEDİR. */
   });   
});

index.php

<?php 
   /* AJAX 101 - http://www.ubenzer.com/ */
   header("Content-Type: text/html; charset=utf-8"); 
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">
<head profile="http://gmpg.org/xfn/1">
   <!-- EgeBK PHP Kursu Örnek Kaynak Kodları -->
   <title>AJAX Hesap Makinesi</title>
   <!-- jQuery Kütüphanesini Ekleyelim. Dikkat edin bu bir JavaScript kütüphanesi ve istemci tarafında çalışmak
   üzere tarayıcıya gönderiliyor. Yani kodlar halka açık. -->
   <script type="text/javascript" src="jquery.js"></script>
 
   <!-- jQuery kütüphanesini kullanarak işlem yapacağımız kod parçaları. JacaScript dosyalarının
   eklenme sırası önemlidir. -->
   <script type="text/javascript" src="bizimkodlar.js"></script>
 
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <meta http-equiv="author" content="Umut Benzer" />
</head>
<body>
<form action="hesap.php" id="makine" method="post"><!-- FORM ID'SİNE DİKKAT EDİNİZ -->
   1. Değer: <input type="text" name="deger1" /><br />
   2. Değer: <input type="text" name="deger2" /><br />
   <select name="islem">
      <option>Topla</option>
      <option>Cikar</option>
      <option>Carp</option>
      <option>Bol</option>
   </select>
   <input type="submit" value="AJAX'la Hesapla" />
</form>
<div id="sonuc">Sonuç burada görünecek.<br /></div><!-- DİV İD'SİNE DİKKAT EDİNİZ. -->
</body>

hesap.php

<?php
// echo var_dump($_REQUEST);
header("Content-Type: application/json; charset=utf-8");
 
if (!(isset($_REQUEST['islem']) && 
      ($_REQUEST['islem'] == "Topla" || $_REQUEST['islem'] == "Cikar" || 
       $_REQUEST['islem'] == "Carp" || $_REQUEST['islem'] == "Bol"))) {
   hataVer(); /* Hata mesajı yaz ve çık */
}
$islem = $_REQUEST['islem']; /* Bu noktadan sonra $islem'e güvenilir. */
 
/* Birinci sayı atanmış ve sayısal bir değer mi? */
if (!(isset($_REQUEST['deger1']) && is_numeric($_REQUEST['deger1']))) {
   hataVer(); /* Hata mesajı yaz ve çık */
}
$deger1 = $_REQUEST['deger1'];
 
/* İkinci sayı atanmış ve sayısal bir değer mi? */
if (!(isset($_REQUEST['deger2']) && is_numeric($_REQUEST['deger2']))) {
   hataVer(); /* Hata mesajı yaz ve çık */
}
$deger2 = $_REQUEST['deger2'];
 
if($islem == "Topla") {
   $sonuc = $deger1 + $deger2;
} elseif ($islem == "Carp") {
   $sonuc = $deger1  * $deger2;
} elseif ($islem == "Cikar") {
   $sonuc =  $deger1 - $deger2;
} else {
   if($deger2 == 0) {
      hataVer("Sıfıra bölüyorsunuz.");
   }
   $sonuc =  $deger1  / $deger2;
}
 
echo json_encode(array("sonuc" => $sonuc, "hatali" => false));
/* json_encode fonksiyonunun içindeki array'in key'lerine ve bizimkod.js dosyasına
(istemci tarafta) kullanılan json verisine erişilirken kullanılan key'lere dikkat edin. */
 
function hataVer($mesaj = null) {
   if (is_null($mesaj)) $mesaj = "Hatali bir veri var! Siz kimi kandiriyorsunuz?";
   die(json_encode(array("hata" => $mesaj,"hatali" => true)));
 
   /* Die, bir mesaj vererek programın çalışmasını durdurur. */
}

bu yazı 2.158 defa okundu

Site hoşunuza gitti mi? Belki arkadaşlarınızın da gider.

Aaa Reklam

+ Yorumunuzu Ekleyin 4 yorum

etem 18 Ocak 2010 14.48

güzelmiş teşekkürler.

+ Cevap Verin
Yakup Gövler 24 Nisan 2010 10.38

Güzel bir uygulama olmuş. Teşekkürler.

+ Cevap Verin
Ufuk 23 Ocak 2011 13.56

Öncelikle Merhaba ,
Yaptığın Uygulama güzel . fakat php sayfasındaki header yollamak hani php sayfasının app type = app/json demişsin ya onu kaldırınca undefined diyor . sanırsam data : "json" olduğu için alınan sayfanın json olması gerekiyor neyse.

birde karakter sorunu var. nasıl çözebilirim . ?

+ Cevap Verin
- Umut 23 Ocak 2011 19.46
  
  Eğer bahsettiğiniz satır hesap.php'nin 3.satırıysa:
  
  O satırın orada olmasının bir amacı var. Bu yüzden kaldırınca hata vermesi normaldir. Satır, aktarılacak verinin json tipinde olduğunu ve UTF-8 karakter kodlaması ile aktarılacağını belirtir. Kaldırdığınızda veri tipi ve karakter kodlaması ile ilgili sorun yaşarsınız.
  
  Satırı geri eklerseniz problem çözülür.
  
  + Cevap Verin

Yorumunuzu Bırakın

Twitler yükleniyor... 5 saniye sonra

Bıdı bıdı bıdı bıdı dıdı dıdı dudu dudu hıdı hıdı hödü hödü yüklüyoruz öhüm öhüm bıdı bıdı vs vs... 6 nanosaniye önce

Yüklenmenin geç olmasının sebebi ben değilim, Twitter API'sinin yavaş olması. Gudu gudu hıdı hödö büdü büdü... 25697 asır önce

Ha tabi bunları okumuşsan, bu sitenin çok gizli bir özelliğini bulmuşsun demektir. ;) Tebrikler. Bu "sürpiz yumurta"yı bulduğunu bana da haber verir misin? Tıkla! 6 dinazor önce

Geçen Yıllarda Bu Hafta

2011

2009

Kısık Işık

Tavana asılmış tek beyaz floresan lambayı sevemedim bir türlü… “Ben ...

Antalya Toplu Taşıma Sisteminin Sorunları - 1

Antalya’da ulaşım bir ölüm. Trafik sıkışıklığı, haftada bir yönü değişen ...

2008

Son Yorumlar

“katılıyorum sana:)”
atacan, “de, da” eki nasıl yazılır? için yazdı.
“galaxy s e 2.3.5 yükleyecem acaba semaphore 2.1.1 yüklersem uyumlu...”
halil, Samsung Galaxy S i9000 Semaphore Kernel için yazdı.
“Merhaba, Cok guzel bir paylasim olmus tesekkurler. Benim bir...”
baran, SQL Server’ı Uzaktan Bağlantı İçin Ayarlamak için yazdı.
“Aynı sorun başka bir custom romda bende de olmuştu. Dil ayarlarından...”
Fuat, Bir Android dağıtımı olarak MIUI için yazdı.
“Çok seviyorum burayı. Giriyorum, çeşitli hesaplamalar...”
Aziz Bağırsaksız, Dönem Sonu Not Ortalaması Hesaplayıcı için yazdı.
“Değerli arkadaşlarım,eğer hattınız avea ise benim son dönemde yaşadığım...”
mehtap, AVEA’dan Nefret Etme Sebepleri için yazdı.
“Ellerinize sağlık oyunu açma şansım olmadı ama network ekranı...”
Emrah, Red Alert 2’yi Vista’da Multiplayer Oynamak için yazdı.
“Eyvah Eyvah… Benim aynısından Altta 2 tane, üstte yarım çıkmış 1 tane var…...”
Kübra, 20′lik Uğraş için yazdı.
“muafiyet sınavıyla geçilen dersin etkisi oluyo mu ?”
adnn, Dönem Sonu Not Ortalaması Hesaplayıcı için yazdı.
“(öncelikle üstteki "Egemen" nickli arkadaştan...”
ramazan, Bir Müşterinin Webadam Hakkında Görüşleri için yazdı.

Basit Bir AJAX Hesap Makinesi

bizimkodlar.js

index.php

hesap.php

Site hoşunuza gitti mi? Belki arkadaşlarınızın da gider.

Aaa Reklam

+ Yorumunuzu Ekleyin 4 yorum

Yorumunuzu Bırakın

Geçen Yıllarda Bu Hafta

2011

Bunun Burada Ne İşi Var?

Windows 7’de Bilgisayarınızın Aldığı Puanı Değiştirin

Dördüncü Sınıfın Birinci Döneminden Öğrenci Görüşleri

UBenzer’den Alın!

2009

Kısık Işık

Antalya Toplu Taşıma Sisteminin Sorunları - 1

2008

14 Şubat

Uyumadan Önce Son Boşluk

NES Emulatörleri

Son Yorumlar

En Çok Yorumlananlar

Tavsiyeler

popüler etiketler

en çok okunanlar

hakkında

bizimkodlar.js

index.php

hesap.php

Site hoşunuza gitti mi? Belki arkadaşlarınızın da gider.

Aaa Reklam

Benzer Yazılar

+ Yorumunuzu Ekleyin 4 yorum

Yorumunuzu Bırakın

Geçen Yıllarda Bu Hafta

2011

2009

2008

Son Yorumlar

En Çok Yorumlananlar

Tavsiyeler

popüler etiketler

en çok okunanlar

hakkında