Basit Bir AJAX Hesap Makinesi

php-logo php-logo   {right}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.

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

bizimkodlar.js

[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. */ }); }); [/js]

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. */ }