Halo sahabat Belajar Pintar PHP, Setelah sebelumnya saya membagikan kepada anda semua sebuah source code mengenai cara membuat kalkulator online dengan php , kali ini saya juga akan membagikan kepada anda sebuah tutorial sekaligus source code Ajax mengenai cara membuat kalkulator dengan menggunakan ajax jquery serta php. Tapi bagi anda yang belum mengerti apa itu ajax, jangan berkecil hati karena anda dapat mengetahuinya melalui postingan saya sebelumnya mengenai Dasar Pemahaman Ajax yang harus diketahui oleh pemula . Oke mungkin sebagian dari anda tidak sabar lagi ingin mengetahuinya, oleh karena itu mari kita langsung bahas satu-persatu dibawah ini.
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.html" tapi jangan sampai lupa mengaktifkan "Apache" bagi anda yang menggunakan Xampp.
0 komentar:
Posting Komentar