Halo sobat cara menciptakan kalkulator online dengan php , kali ini aku juga akan membagikan kepada anda suatu bimbingan sekaligus source code Ajax tentang cara menciptakan kalkulator dengan memakai ajax jquery serta php. Tapi bagi anda yang belum mengetahui apa itu ajax, jangan berkecil hati alasannya adalah anda dapat mengetahuinya lewat postingan aku sebelumnya tentang Dasar Pemahaman Ajax yang mesti dikenali oleh pemula . Oke mungkin sebagian dari anda tidak tabah lagi ingin mengetahuinya, oleh alasannya adalah itu mari kita pribadi diskusikan satu-persatu dibawah ini.
Dalam pembuatan kalkulator dengan ajax ini kita juga menggunakan fungsi suatu form yang berkhasiat untuk men-submit hasil dari perhitungan kita semoga diproses oleh aba-aba php yang kita buat. Buat anda yang belum mengetahui cara menciptakan submit form menggunakan ajax jquery dan php , anda bisa baca disini , dan untuk 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.
Kalkulator Sederhana dengan AJAX PHP
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
$bil1 = $_GET[‘bil1’];
$bil2 = $_GET[‘bil2’];
$op = $_GET[‘op’];
echo ‘‘;
?>
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, kemudian copy-pastekan saja seluruh script dibawah ini kedalamnya
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
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 selaku perantaran antara halaman input “kalkulator.html” dengan halaman proses “kalkulator.php” , kalau anda sudah membaca postingan saya perihal dasar pemahaman ajax bagi pemula tadi, maka dibutuhkan anda telah mengetahui dengan yang aku maksud.
Untuk melaksanakan acara tersebut, bagi yang belum tahu , anda dapat mengetikkan pada address kafetaria browser anda masing-masing “http://localhost/calculator/kalkulator.htm” tapi jangan sampai lupa mengaktifkan “Apache” untuk anda yang menggunakan Xampp.
Atau untuk anda yang ingin mendownload eksklusif source code nya secara complete, anda mampu mendownloadnya pada link download dibawah ini.
Terimaksih buat para sobat setia blog mencar ilmu cerdik php, jangan lupa share dan like nya sebagai upah kelelahan saya mengetik ilmu yang berguna ini terhadap anda semua, selamat berkreasi buat calon programer dunia, Salam hangat dari admin .
Seorang pengajar dan pembelajar yang mengurus lembaga pelatihan dan kursus komputer bernama LKP Naura