Disini saya akan membuat sebuah tutorial yang mungkin akan bermanfaat dalam
pembelajaran pemrograman khususnya pada mata kuliah pemrograman web. Topik utama
yang diberikan oleh dosen saya adalah “Tutorial program dengan jquery”, saya
sendiri memilih judul seperti diatas. Yaitu tutorial mengkonversi angka menjadi
nilai rupiah. Pertama-tama mari kita mengenal sedikit apa itu jquery? Jquery
adalah sebuah library pada JavaScript. Dalam bahasa pemrograman library dikenal
dengan pengertian kumpulan dari berbagai fungsi yang ‘siap pakai’ yang akan
memudahkan dalam penulisan kode JavaScript.
Setelah membahas sedikit tentang pengertian jquery dan fungsi utamanya, maka
selanjutnya kita masuk ke topik utama pada artikel ini yaitu tutorial
mengkonversikan nilai mata uang rupiah dengan jquery. Saya disini menggunakan fungsi
jquery-MaskMoney yang diciptakan oleh Diego Plentz. Plugin ini memiliki
keunggulan dalam hal kemudahan penerapannya, serta berbagai pilihan tampilan,
seperti pengaturan simbol mata uang (prefix), pemisah ribuan dan pecahan serta
dapat menerapkan untuk gaya tampilan HTML5.
Berikut deskripsi dan kode untuk membuat program konversinya :
-
Dekripsi
Dalam penerapan
plugin jquery maskMoney langkah pertama yang harus dilakukan adalah menyertakan
library yang diperlukan. Pada baris ke-5 disertakan library jquery.js dan pada
baris ke-6 disertakan file library jquery.maskMoney.min.js. Selanjutnya
disiapkan obyek form inputan yang akan di format. Dalam kode akan terlihat pada
baris ke-18 sampai 21.
<!doctype
html>
<html>
<head>
<title>Inputan Format
Angka</title>
<script
type="text/javascript"
src="libs/jquery.latest.js"></script>
<script
type="text/javascript" src="libs/jquery.maskMoney.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
$('#angka1').maskMoney();
$('#angka2').maskMoney({prefix:'US$'});
$('#angka3').maskMoney({prefix:'Rp.
', thousands:'.', decimal:',', precision:0});
$('#angka4').maskMoney();
});
</script>
</head>
<body>
<form action=""
method="post">
Input angka (default): <input
type="text" name="angka1" id="angka1"/>
<br/>Input angka (US$):
<input type="text" name="angka2"
id="angka2"/>
<br/>Input angka (Rp. ):
<input type="text" name="angka3"
id="angka3"/>
<br/>Input angka (Rp. ) -
HTML5: <input type="text" name="angka4"
id="angka4" data-affixes-stay="true" data-prefix="Rp.
" data-thousands="." data-decimal="," />
<br/><input
type="submit" name="submit" value="Submit"/>
</form>
<?php
if(isset($_POST['submit']))
{
echo "<pre>";
print_r($_POST);
echo "</pre>";
}
?>
</body>
</html>
-
Tampilan
Demikian tutorial sederhana yang saya tampilkan diatas, semoga bermanfaat dan dapat membantu kalian dalam mencari pembelajaran baru dalam jquery dan lainnya. Terima kasih.
