AJAX PHP ( Membuat Kalkulator Sederhana dengan Ajax Jquery PHP )

Posted on
Kalkulator+Transparan+3

Halo rekan-rekan cara membuat kalkulator online dengan php , kali ini saya pun akan membagikan kepada sahabat sebuah panduan sekaligus sourcecode Ajax mengenai cara membuat kalkulator dengan menggunakan ajax jquery serta php. akan tetapi untuk sahabat yang belum paham apa itu ajax, jangan berkecil hati karena sahabat dapat mengetahuinya lewat postingan saya sebelumnya mengenai Dasar Pemahaman Ajax yang harus diketahui oleh pemula . Oke mungkin sebahagian dari sahabat tak sabar lagi ingin mengetahuinya, oleh karena itu mari kita seketika bahas satu-persatu dibawah ini.
Pada penyusunan kalkulator dengan ajax ini kita pun menggunakan manfaat sebuah form yang bermanfaat bagi men-submit hasil dari perhitungan kita agar diproses oleh kode php yang kita bikin. Bikin sahabat yang belum paham cara merancang submit form menggunakan ajax jquery dan php , sahabat dapat baca disini , dan untuk sahabat yang telah mengetahuinya, mari kita lanjut ketopik pembahasan kita yang pertama-tama.

1. Bikin 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-tama –>
<input type=”text” id=”bil1″ />
<!– alternatif 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 bagi menampilkan output –>
<p><div id=”output” /></p>
</body>
</html>

Halaman diatas berfungsi selaku halaman utama sekaligus halaman tempat penginputan angka yang akan diproses.

2. Bikin 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 yaitu : “. $hasil;
echo ‘</output>’;
?>

Halaman php ini berfungsi bagi halaman proses inti dari apa yang kita input di halaman kalkulator.html.

3. Berikutnya bikin 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 dikerjakan”);
else
return xmlHttp;
}
function hitung()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// mengambil data input dari unsur bernama bil1 dan dikonversi
// ke float / riil supaya dapat dioperasikan secara aritmatika
bil1 =
parseFloat(encodeURIComponent(document.getElementById(“bil1”).value));
// mengambil data input dari unsur bernama bil2 dan dikonversi
// ke float / riil supaya dapat dioperasikan secara aritmatika
bil2 =
parseFloat(encodeURIComponent(document.getElementById(“bil2”).value));
// mengambil data input dari unsur 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 pada koneksi ke server: ” +
xmlHttp.statusText);
}
}
}

Nah, halaman ini adalah halaman yang berfungsi selaku perantaran antara halaman input “kalkulator.html” dengan halaman proses “kalkulator.php” , seandainya sahabat telah membaca postingan saya mengenai dasar pemahaman ajax bagi pemula tadi, karenanya diinginkan sahabat telah paham dengan yang saya maksud.

Bagi menjalankan program tersebut, untuk yang belum tahu , sahabat dapat mengetikkan di address bar browser sahabat masing-masing “http://localhost/calculator/kalkulator.htm” tapi jangan hingga lupa mengaktifkan “Apache” untuk sahabat yang menggunakan Xampp.

Atau untuk sahabat yang ingin mengunduh seketika sourcecode nya secara complete, sahabat dapat mendownloadnya di link unduh dibawah ini.

Download disini

Terimaksih bikin para rekan-rekan setia blog belajar pintar php, jangan lupa share dan like nya selaku upah capek saya mengetik ilmu yang bermanfaat ini kepada sahabat seluruh, selamat berkreasi bikin calon programer dunia, Salam hangat dari admin .

Leave a Reply

Your email address will not be published. Required fields are marked *