Tutorial Membuat Kalkulator Sederhana Dengan AJAX
Pada postingan kali ini saya akan memberikan sedikit tutorial cara membuat kalkulator sederhana dengan Ajax yang mengolah dua bilangan sebagai input dengan operasi penjumlahan, pengurangan, perkalian dan pembagian. kurang lebih screenshootnya seperti ini.
Pada kalkulator ini output atau respon akan dihasilkan begitu kita klik tombol hitung. Di bawah ini adalah script untuk formnya.
<!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">
<head>
<title>Contoh AJAX Dasar 2</title>
<script type="text/javascript" src="kalkulator.js"></script>
</head>
<body>
<h1>Kalkulator Sederhana dengan AJAX</h1>
<form name="form1">
<!– input bilangan pertama –>
<input type="text" id="bil1" />
<!– pilihan jenis operasi –>
<select id="operasi">
<option value="penjumlahan">dijumlahkan dengan</option>
<option value="pengurangan">dikurangkan dengan</option>
<option value="perkalian">dikalikan dengan</option>
<option value="pembagian">dibagi dengan</option>
</select>
<!– input bilangan kedua –>
<input type="text" id="bil2" /><br />
<!– tombol hitung –>
<input type="button" value="Hitung" onclick="hitung()" />
</form>
<!– bagian untuk menampilkan output –>
<p><div id="output" /></p>
</body>
</html>
Tombol hitung begitu diklik akan menjalankan fungsi hitung() yang ada di script kalkulator.js
Berikut ini adalah script kalkulator.js
var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var xmlHttp;
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
xmlHttp = false;
}
}
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
if (!xmlHttp) alert("Obyek XMLHttpRequest gagal dibuat");
else
return xmlHttp;
}
function hitung()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// mengambil data input dari elemen bernama bil1 dan dikonversi
// ke float / riil supaya dapat dioperasikan secara aritmatika
bil1 =
parseFloat(encodeURIComponent(document.getElementById("bil1").value));
// mengambil data input dari elemen bernama bil2 dan dikonversi
// ke float / riil supaya dapat dioperasikan secara aritmatika
bil2 =
parseFloat(encodeURIComponent(document.getElementById("bil2").value));
// mengambil data input dari elemen bernama operasi
operasi =
encodeURIComponent(document.getElementById("operasi").value);
// proses perhitungan operasi dilakukan di script kalkulator.php
xmlHttp.open("GET", "kalkulator.php?bil1=" + bil1 + "&bil2=" + bil2 +
"&op=" + operasi, true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}
else
setTimeout('hitung()', 1000);
}
function handleServerResponse()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
hasil = xmlDocumentElement.firstChild.data;
document.getElementById("output").innerHTML = hasil;
// setTimeout('process()', 1000);
}
else
{
alert("Ada masalah dalam koneksi ke server: " +
xmlHttp.statusText);
}
}
}
Berikut ini code untuk kalkulator.php
<?php
header('Content-Type: text/xml');
$bil1 = $_GET[‘bil1’];
$bil2 = $_GET[‘bil2’];
$op = $_GET[‘op’];
echo '<output>';
if ($op == "penjumlahan") $hasil = $bil1 + $bil2;
else if ($op == "pengurangan") $hasil = $bil1 – $bil2;
else if ($op == "perkalian") $hasil = $bil1 * $bil2;
else if ($op == "pembagian")
{
if ($bil2 == 0) $hasil = "(ERROR) Divide by zero";
else $hasil = $bil1 / $bil2;
}
echo "Hasil perhitungannya adalah : ". $hasil;
echo '</output>';
?>
Demikian tutorial membuat kalkulator sederhana dengan Ajax, semoga bermanfaat.
