Membuat Convert Mata Uang Asing ke Rupiah dengan AJAX dan API

Membuat Convert Mata Uang Asing ke Rupiah dengan AJAX dan API

Pada artikel sebelumnya, kita sudah belajar bagaimana Cara Menampilkan Data Dari Fetch JSON. Kali ini kita juga akan menggunakan cara yang hampir sama, namun akan ada proses dimana akan Membuat Convert Mata Uang Asing ke Rupiah dengan AJAX dan API. Aplikasi yang akan kita buat saat ini memungkinkan kita mengetahui nilai mata uang asing ke rupiah dengan realtime.

Untuk membuat aplikasi convert mata uang tersebut, kita memerlukan sebuah API sehingga data yang ditampilkan akurat. Disini kita akan membuatnya dengan API yang sudah disediakan oleh Bank BTPN. Tanpa panjang kata lagi, langsung saya ke materi pembahasannya.

Convert Mata Uang Asing ke Rupiah

Pertama yang harus dilakukan adalah membuat tampilan seperti apa nantinya. Disini kita akan membuatnya sesederhana mungkin. Kamu bisa mengembangkannya sendiri dengan tampilan yang kamu inginkan.

<input type="number" id="uang" placeholder="100">
<select id="MataUang" class="form-control">
<option value selected disabled>Pilih Mata Uang</option>
</select>
<div>Uang <span id="jumlah"></span> <span id="kurs"></span> = <span id="total"></span> dengan rate saat ini <span id="rate"></span>
</div>

Tampilannya akan menjadi seperti. Sangat sederhana namun bisa berjalan dengan baik.

Uang = dengan rate saat ini

Selanjutnya, kamu memerlukan JQuary Library agar script yang akan kita gunakan dapat berjalan dengan baik. Sebenarnya kamu bisa membuatnya tanpa menggunakan JQuery, namun untuk mempermudah pekerjaan, kamu bisa memanfaatkan Library yang sudah ada.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

Selanjutnya, tambahkan kode script dibawah ini yang berfungsi untuk memproses data yang sudah didapatkan dari API.

<script>
$(document).ready(function(){
var harga, mataUang,total, rate;
harga = $("#uang");
$.getJSON("https://kurs-btpn.vercel.app/api", function(result){ //mengambil data
console.log("success");
$.each(result, function(i, data){ // memproses data
$("#MataUang").append('<option value="'+data.currency+'" data-sell="'+data.sell+'">'+data.currency+'</option>');
});
//end getjson
});
function rupiah(uang){ // mengubah format ke rupiah
uang = Math.ceil(uang);
var reverse = uang.toString().split('').reverse().join(''),
ribuan = reverse.match(/d{1,3}/g);
ribuan = "Rp " + ribuan.join('.').split('').reverse().join('') + ",-";
return ribuan;
//ubah ke rupiah
}
$("#MataUang").change(function(){ //ketika #MataUang berubah
rate = $(this).find(':selected').data('sell');
mataUang = $(this).val();
if(harga.val() == ""){
harga.val("1");
}
order();
//end #matauang
});
$("#uang").change(function(){ // ketika jumlah uang berubah
order();
//end hargaproduk
});

function order(){ // proses penghitungan dan penempatan
$("#kurs").text(mataUang);
$("#jumlah").text( harga.val());
$("#rate").text(rupiah(rate));
total = rate * harga.val();
$("#total").text(rupiah(total));
// end order
}
// end document ready
});

</script>

Untuk penjelasan alur sederhananya seperti ini :

  1. Ketika browser selesai load data, script akan menjalankan $.getJSON untuk memanggil file API yang sudah disediakan.
  2. Jika data sukses diambil, data tersebut diproses dan melakukan generate kode HTML berupa daftar mata uang.
  3. Selanjutnya, ketika ada perubahan pada input data dengan ID #MataUang dan #uang, maka script akan memanggil fungsi order yang bertugas melakukan penghitungan dan menampilkan hasil.
Kode sudah bisa kamu gunakan dan kamu bisa mencobanya sendiri. Untuk kode lengkapnya, seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="number" id="uang" placeholder="100">
<select id="MataUang" class="form-control">
<option value selected disabled>Pilih Mata Uang</option>
</select>
<div>Uang <span id="jumlah"></span> <span id="kurs"></span> = <span id="total"></span> dengan rate saat ini <span id="rate"></span>
</div>
<script>
$(document).ready(function(){
var harga, mataUang,total, rate;
harga = $("#uang");
$.getJSON("https://kurs-btpn.vercel.app/api", function(result){ //mengambil data
console.log("success");
$.each(result, function(i, data){ // memproses data
$("#MataUang").append('<option value="'+data.currency+'" data-sell="'+data.sell+'">'+data.currency+'</option>');
});
//end getjson
});
function rupiah(uang){ // mengubah format ke rupiah
uang = Math.ceil(uang);
var reverse = uang.toString().split('').reverse().join(''),
ribuan = reverse.match(/d{1,3}/g);
ribuan = "Rp " + ribuan.join('.').split('').reverse().join('') + ",-";
return ribuan;
//ubah ke rupiah
}
$("#MataUang").change(function(){ //ketika #MataUang berubah
rate = $(this).find(':selected').data('sell');
mataUang = $(this).val();
if(harga.val() == ""){
harga.val("1");
}
order();
//end #matauang
});
$("#uang").change(function(){ // ketika jumlah uang berubah
order();
//end hargaproduk
});

function order(){ // proses penghitungan dan penempatan
$("#kurs").text(mataUang);
$("#jumlah").text( harga.val());
$("#rate").text(rupiah(rate));
total = rate * harga.val();
$("#total").text(rupiah(total));
// end order
}
// end document ready
});

</script>

</body>
</html>

 

Semoga artikel yang berjudul Membuat Convert Mata Uang Asing ke Rupiah dengan AJAX dan API bermanfaat dan membantu. Terima kasih.