Dalam pembuatan kalkulator dengan ajax ini kita juga menggunakan fungsi sebuah form yang berguna untuk men-submit hasil dari perhitungan kita agar diproses oleh kode php yang kita buat. Buat anda yang belum mengerti cara membuat submit form menggunakan ajax jquery dan php , anda bisa baca disini , dan bagi anda yang sudah mengetahuinya, mari kita lanjut ketopik pembahasan kita yang pertama.
1. Buat sebuah halaman html dengan nama kalkulator.html , lalu ketikkan atau copy-paste saja seluruh script dibawah ini kedalamnya.
<!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>Kalkulator sederhana dengan Ajax</title>
<script type="text/javascript" src="kalkulator.js"></script>
</head>
<body>
<h1>Kalkulator Sederhana dengan AJAX PHP</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>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kalkulator sederhana dengan Ajax</title>
<script type="text/javascript" src="kalkulator.js"></script>
</head>
<body>
<h1>Kalkulator Sederhana dengan AJAX PHP</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>
Halaman diatas berfungsi sebagai halaman utama sekaligus halaman tempat penginputan angka yang akan diproses.
2. Buat halaman php dengan nama kalkulator.php dan kemudian ketikkan atau copy-pastekan seluruh script php dibawah ini kedalamnya
<?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>';
?>
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>';
?>
Halaman php ini berfungsi untuk halaman proses inti dari apa yang kita input pada halaman kalkulator.html.
3. Selanjutnya buat sebuah halaman Javascript dengan nama kalkulator.js, lalu copy-pastekan saja seluruh script dibawah ini kedalamnya
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);
}
}
}
Nah, halaman ini merupakan halaman yang berfungsi sebagai perantaran antara halaman input "kalkulator.html" dengan halaman proses "kalkulator.php" , jika anda sudah membaca postingan saya mengenai dasar pemahaman ajax bagi pemula tadi, maka diharapkan anda sudah mengerti dengan yang saya maksud. 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);
}
}
}
Untuk menjalankan program tersebut, bagi yang belum tahu , anda dapat mengetikkan pada address bar browser anda masing-masing "http://localhost/calculator/kalkulator.htm" tapi jangan sampai lupa mengaktifkan "Apache" bagi anda yang menggunakan Xampp.
Atau bagi anda yang ingin mendownload langsung source code nya secara complete, anda bisa mendownloadnya pada link download dibawah ini.
Download disini
Terimaksih buat para sahabat setia blog belajar pintar php, jangan lupa share dan like nya sebagai upah capek saya mengetik ilmu yang bermanfaat ini kepada anda semua, selamat berkreasi buat calon programer dunia, Salam hangat dari admin Belajar Pintar PHP.
