💻 Bilgisayar, 💾 Programlama

Basit Bir AJAX Hesap Makinesi

php logoGeç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

$(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 - https://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. */
}
👋 🚨 Yeni yazılardan haberdar olmak ister misiniz? 👇

Basit Bir AJAX Hesap Makinesi 4 yorum aldı.

  1. Ö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 . ?

    1. 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.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir