Building an AJAX currency converter with PHP, jQuery and Google

As you may already know, Google has a calculator feature built in their search engine, which can be used to convert measures, currencies, get stock quotes, weather data and many other features. You can see this features explained here.

Why wouldn’t we use it for something useful and build a simple AJAX currency converter using Google currency converter feature? We need some time, jQuery, Google, great music and of course, this tutorial.

So, let’s start. Create new file, call it index.php and make some basic markup for our converter:

[code lang=”html”]
Amount:

From:
Euro – EURUnited States Dollars – USDUnited Kingdom Pounds – GBPCanada Dollars – CADAustralia Dollars – AUDJapan Yen – JPYIndia Rupees – INRNew Zealand Dollars – NZDSwitzerland Francs – CHFSouth Africa Rand – ZARAlgeria Dinars – DZDArgentina Pesos – ARSAustralia Dollars – AUDBahrain Dinars – BHDBrazil Reais – BRLBulgaria Leva – BGNCanada Dollars – CADChile Pesos – CLPChina Yuan Renminbi – CNYRMB (China Yuan Renminbi) – CNYColombia Pesos – COPCosta Rica Colones – CRCCroatia Kuna – HRKCzech Republic Koruny – CZKDenmark Kroner – DKKDominican Republic Pesos – DOPEgypt Pounds – EGPEstonia Krooni – EEKEuro – EURFiji Dollars – FJDHong Kong Dollars – HKDHungary Forint – HUFIceland Kronur – ISKIndia Rupees – INRIndonesia Rupiahs – IDRIsrael New Shekels – ILSJamaica Dollars – JMDJapan Yen – JPYJordan Dinars – JODKenya Shillings – KESKorea (South) Won – KRWKuwait Dinars – KWDLebanon Pounds – LBPMalaysia Ringgits – MYRMauritius Rupees – MURMexico Pesos – MXNMorocco Dirhams – MADNew Zealand Dollars – NZDNorway Kroner – NOKOman Rials – OMRPakistan Rupees – PKRPeru Nuevos Soles – PENPhilippines Pesos – PHPPoland Zlotych – PLNQatar Riyals – QARRomania New Lei – RONRussia Rubles – RUBSaudi Arabia Riyals – SARSingapore Dollars – SGDSlovakia Koruny – SKKSouth Africa Rand – ZARSouth Korea Won – KRWSri Lanka Rupees – LKRSweden Kronor – SEKSwitzerland Francs – CHFTaiwan New Dollars – TWDThailand Baht – THBTrinidad and Tobago Dollars – TTDTunisia Dinars – TNDTurkey Lira – TRYUnited Arab Emirates Dirhams – AEDUnited Kingdom Pounds – GBPUnited States Dollars – USDVenezuela Bolivares – VEBVietnam Dong – VNDZambia Kwacha – ZMK

To:
United States Dollars – USDUnited Kingdom Pounds – GBPCanada Dollars – CADAustralia Dollars – AUDJapan Yen – JPYIndia Rupees – INRNew Zealand Dollars – NZDSwitzerland Francs – CHFSouth Africa Rand – ZARAlgeria Dinars – DZDArgentina Pesos – ARSAustralia Dollars – AUDBahrain Dinars – BHDBrazil Reais – BRLBulgaria Leva – BGNCanada Dollars – CADChile Pesos – CLPChina Yuan Renminbi – CNYRMB (China Yuan Renminbi) – CNYColombia Pesos – COPCosta Rica Colones – CRCCroatian Kuna – HRKCzech Republic Koruny – CZKDenmark Kroner – DKKDominican Republic Pesos – DOPEgypt Pounds – EGPEstonia Krooni – EEKEuro – EURFiji Dollars – FJDHong Kong Dollars – HKDHungary Forint – HUFIceland Kronur – ISKIndia Rupees – INRIndonesia Rupiahs – IDRIsrael New Shekels – ILSJamaica Dollars – JMDJapan Yen – JPYJordan Dinars – JODKenya Shillings – KESKorea (South) Won – KRWKuwait Dinars – KWDLebanon Pounds – LBPMalaysia Ringgits – MYRMauritius Rupees – MURMexico Pesos – MXNMorocco Dirhams – MADNew Zealand Dollars – NZDNorway Kroner – NOKOman Rials – OMRPakistan Rupees – PKRPeru Nuevos Soles – PENPhilippines Pesos – PHPPoland Zlotych – PLNQatar Riyals – QARRomania New Lei – RONRussia Rubles – RUBSaudi Arabia Riyals – SARSingapore Dollars – SGDSlovakia Koruny – SKKSouth Africa Rand – ZARSouth Korea Won – KRWSri Lanka Rupees – LKRSweden Kronor – SEKSwitzerland Francs – CHFTaiwan New Dollars – TWDThailand Baht – THBTrinidad and Tobago Dollars – TTDTunisia Dinars – TNDTurkey Lira – TRYUnited Arab Emirates Dirhams – AEDUnited Kingdom Pounds – GBPUnited States Dollars – USDVenezuela Bolivares – VEBVietnam Dong – VNDZambia Kwacha – ZMK

[/code]

Basically, we have two drop downs with currencies, amount field and a button. Below is a div with id results which will hold our result data.

Now let’s add some jQuery to handle AJAX call and filling result data into our markup:

[code lang=”javascript”]
$(document).ready(function() {

$(‘#submit’).click(function(){

//Get the values
var amount = $(‘#amount’).val();
var from = $(‘#from’).val();
var to = $(‘#to’).val();

var params = “amount=” + amount + “&from=” + from + “&to=” + to;

$.ajax({
type: “POST”,
url: “convert.php”,
data: params,
success: function(data){
$(‘#results’).html(data);
}
});
});
});
[/code]

We are making an ajax call to convert.php and on success filling the data into results div.

And here is convert.php :

[code lang=”php”]
// sanitizing input using built in filter_input available from PHP 5.2
$amount = filter_input(INPUT_POST, ‘amount’, FILTER_VALIDATE_INT);
$from = filter_input(INPUT_POST, ‘from’, FILTER_SANITIZE_SPECIAL_CHARS);
$to = filter_input(INPUT_POST, ‘to’, FILTER_SANITIZE_SPECIAL_CHARS);

// building a parameter string for the query
$encoded_string = urlencode($amount) . urlencode($from) . ‘%3D%3F’ . urlencode($to);

$url = ‘http://www.google.com/ig/calculator?hl=en&q=’ . $encoded_string;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FAILONERROR, 1);

$results = curl_exec($ch);

// this is json_decode function if you are having PHP < 5.2.0 // taken from php.net $comment = false; $out = '$x='; for ($i=0; $i