BayurNews.com – AJAX memiliki kepanjangan Asynchronous Javascript And XML merupakan suatu teknik baru dalam dunia web. AJAX sudah mulai dilirik oleh para web desainer dan web programmer. Dengan adanya AJAX, akses data ke server yang dikirim melalui client via web dapat lebih cepat daripada mekanisme biasa. Hal ini dikarenakan AJAX tidak perlu melakukan proses loading page (refresh page) atau pindah ke halaman yang lain untuk memproses sebuah printah.

AJAX juga dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP dll yang membuat AJAX lebih powerfull dan menjadi andalan bagi web programmer.

Dalam tulisan ini, Bayur akan membagikan tutorial membuat Kalkulator versi 1.0 dengan bantuan AJAX.

Berikut pembahasannya.

Silahkan siapkan dulu tools-nya.

  1. Xampp
  2. Google Chrome atau Mozilla.
  3. Adobe Dreamweaver CS6, Notepad++ atau Sublime Text (pilih salah satu).

Jika tools diatas sudah ready di computer / laptop kalian, pastikan Xampp sudah dalam keadaan ready atau running.

Oke, yang pertama silahkan buat folder kalkulator pada folder C:/xampp/htdoc/ kemudian didalam folder htdoc silahkan buat file html, dan berinama Kalkulator.html, silahkan perhatikan script dibawah ini.

kalkulator.html

<!DOCTYPE html>
<head> <title>Kalkulator V1</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

Perhatikan Tombol hitung begitu diklik akan menjalankan fungsi hitung() yang ada di script kalkulator.js

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);        }     } }

Sedangkan untuk memproses dari request file html, maka kita harus menambahkan file PHP sebagai yang mengeksekusi perintah, kita buat satu file lagi dengan nama kalkulator.php

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>'; ?>

Nah ini hasil akhirnya.

Bagaimana, mudahkan? silahkan dicoba dan dikembangkan lagi ya, tunggu update selanjutnya.


Wahyu Prasetyo
Wahyu Prasetyo Hanya manusia biasa yang berilmu dan ingin bermanfaat untuk orang lain.