jQuery Ajax Uygulaması

73 gün önce yazıldı
Anasayfa » javascript, Php » jQuery Ajax Uygulaması
770 kez okundu
jquery-logo

JavaScript’in en yaygın kullanılan kütüphanelerinden jQuery ile bir uygulamayı anlatarak bloğun sessizliğini bozmak istedim. Bu uygulamayı bir e-ticaret sitesi için yazmıştım aslında sonrasında sizlerinde ihtiyacı olabileceğini düşünerek paylaşmaya karar verdim.  Bu uygulama; en, boy ve genişliğini kullanıcı tarafından alır ve sonrasında belirlediğiniz birim fiyata göre işlem yapar, kullanıcıya ürünün fiyatını anlık hesaplayarak gösterir. Uygulamanın ne işe yaradığını anlattığıma göre kodlama bölümüne geçebiliriz.

  • index.html ve hesapla.php adında iki dosya oluşturalım, sonrasında aşağıda verdiğim kodları index.html dosyasının içerisine ekleyiniz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jQuery Ajax Uygulaması - Safa Kara</title>
	<style type="text/css">
	body{margin:0px; padding:0px;}
	table{border:none padding:5px}
	h1{margin:0; padding:0;}
	a{color:#000}
	#genel{width:400px; margin:20px auto; border:3px solid #000}
	#genel h1{font:22px Arial; background-color:#000; color:#fff; padding:10px; margin-bottom:10px}
	.input{width:80px}
	.icerik{font:bold 15px Arial; padding-right:10px}
	.bilgi{font:normal 11px Arial; color:#999}
	.sonuc{font-style:italic; margin-left:5px}
	.sonuc span{font-weight:bold; color:red}
	</style>
	<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
	<script type="text/javascript">
	function hesapla(){
        var en=$("input[name=en]").val();
			en=jQuery.trim(en);

		var boy=$("input[name=boy]").val();
			boy=jQuery.trim(boy);

		var genislik=$("input[name=genislik]").val();
			genislik=jQuery.trim(genislik);

		if(en!="" && boy!="" && genislik!=""){

			var degerler = "en="+en+"&boy="+boy+"&genislik="+genislik;

			$.ajax({
				type: "POST",
				url: "hesapla.php",
				data: degerler,
				success: function(sonuc){
					$(".sonuc").html("");
					$(".sonuc").append(sonuc);
				}
			});
		}
	}
	</script>
</head>
<body>
<div id="genel">
	<h1>jQuery Ajax Uygulaması - Safa Kara</h1>
	<div id="uygulama">
		<table>
			<tr>
				<td class="icerik">En:</td>
				<td><input type="text" name="en" class="input" onKeyUp="hesapla();"/></td>
				<td class="bilgi">cm</td>
			</tr>

			<tr>
				<td class="icerik">Boy:</td>
				<td><input type="text" name="boy" class="input" onKeyUp="hesapla();"/></td>
				<td class="bilgi">cm</td>
			</tr>

			<tr>
				<td class="icerik">Genişlik:</td>
				<td><input type="text" name="genislik" class="input" onKeyUp="hesapla();"/></td>
				<td class="bilgi">cm</td>
			</tr>
		</table>
		<p class="sonuc">&nbsp; </p>

	</div>
</div>
</body>
</html>


Gelelim bu kodların ne işe yaradığına.

- style; etiketleri arasında sayfa görünümüyle ilgili işlemleri yapıyoruz, detaya girmeyeceğim.

-script; etiketlerinin ilkinde jquery kütüphanemizi sayfamıza çağırıyoruz; ikincisinde ise sayfada istediğimiz işlemleri yapıyoruz. Biraz daha detaylı anlatmak istiyorum bu kısmı; 21. satırda hesapla(); fonksiyonumuzu çağırıyoruz. 22. satırda var en=$(“input[name=en]“).val();  işlemiyle en adında bir değişken oluşturuyor, $(“input[name=en]“) diyerek bu 55. satırdaki input alanımızın ulaşıyor ve val() metodumuzlada değerini elde ediyoruz. 23. satırda da bu input alanından elde ettiğimiz değerdeki boşluk karakterlerini temizliyoruz. Ardından diğer iki değişkenler içinde aynı işlemleri yaparak, 31. satırda bu değerlerin NULL olup olmadıklarını kontrol ediyoruz.
Ardından 33. satırda ajax metodunda kullanmak üzere degerler adında string oluşturuyoruz. 35. satırda ise $.ajax({  işlemiyle ajax metodumuzu başlatıyoruz, 36. satırda metodumuzun type‘ını post olarak belirliyoruz. 37. satırda hedef url’yi yazıyoruz. 38. satırda gönderilecek data parametresini belirliyoruz. 39. satırda gelecek olan değerin fonksiyonunu oluşturup sonuc parametresiyle yakalıyoruz. 40. satırda class’ı sonuc olan paragrafımızı boş hale getiriyoruz ve 41.satırda hesapla.php dosyasından gelecek değeri bu class’a gönderiyoruz. Html dosyamızla ilgili anlatmak istediklerim bu kadar.

  • Bu adımda hesapla.php dosyamızı açıyoruz ve aşağıdaki vereceğim kodları kaydediyoruz.
<?php
#Ahmet Safa Kara

//kullanıcıdan alınan bilgiler
$en=$_POST["en"];
$boy=$_POST["boy"];
$genislik=$_POST["genislik"];

//Birim Fiyat
$birimFiyat=15.96;

//Kontrol İşlemleri
if(is_numeric($en) AND is_numeric($boy) AND is_numeric($genislik)){
$sonuc=($en/100)*($boy/100)*$birimFiyat*$genislik; // Fiyat hesaplanması
echo "Tutar: <span> $sonuc €</span>"; //Hesaplanılan sonuç
}
else{
echo "Lütfen <b>nümerik</b> karakter giriniz."; //Uyarı Yazısı
}
?>


Php dosyamızda bu kadar, css’te olduğu gibi bu adımda da detaya girip konuyu dağıtmak istemiyorum. hesapla.php dosyamızıda kodladığımıza göre uygulamamızın sonuna gelmiş bulunuyoruz. Umarım faydalı sizler için faydalı olmuştur, iyi kullanımlar, hoşçakalın..

jQuery Ajax UygulamasıjQuery Ajax Uygulaması Download

dipnot: Tanıl; projen için bahsettiğim uygulama tam olarak buydu.

, ,