#JavaScript

Membuat Format Rupiah Dengan Javascript

By Diki Alfarabi Hadi
18 September 2018
JavaScript

Membuat Format Rupiah Dengan Javascript

Membuat Format Rupiah Dengan Javascript, Seperti yang kita sudah ketahui, javascript memiliki kegunaan yang besar dalam pengembangan sebuah website atau aplikasi. salah satunya adalah kita bisa membuat format rupiah javascript.

Jika mungkin teman-teman sedang mengerjakan sebuah aplikasi keuangan yang mengharuskan teman-teman untuk membuat format rupiah secara otomatis pada saat mengetik angka. maka angka akan secara otomatis menampilkan pemisah satuannya.

Misalnya pada saat angka yang di ketik berjumlah ribuan, maka akan muncul titip pada 3 angka terakhir, begitu juga dengan format angka jutaan, milyaran dan seterusnya.

Membuat Format Rupiah Dengan Javascript

Pada tutorial Membuat Format Rupiah Dengan Javascript ini. kita akan belajar tentang cara membuat format rupiah javascript.

Kita akan membuat sebuah form input, dimana form input tersebut akan kita buat sebuah fitur yang akan mengubah angka yang di input secara otomatis menjadi format angka.

Sekedar penginat kembali, silahkan teman-teman baca juga tutorial javascript dasar di www.malasngoding.com. pada tutorial javascript sebelumnya sudah di jelaskan tentang dasar-dasar dari javascript. jadi akan sangat memudahkan teman-teman dalam mengikuti dan mempelajari materi tutorial Membuat Format Rupiah Dengan Javascript ini.

Tutorial dasar javascript lengkap bahasa indonesia

Langsung saja, kita buat dulu sebuah form sebagai contoh, project ini saya buat dalam folder dengan nama “rupiah_javascript”. atau teman-teman bisa langsung menerapkan pada project teman-teman.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat Format Rupiah Dengan Javascript - www.malasngoding.com</title>

</head>

<body>

body {

font-family: sans-serif;

}

.kotak {

width: 350px;

margin: auto;

margin-top: 15px;

padding: 10px;

}

margin-bottom: 20px;

color: #0004ff;

}

input {

text-align: right;

width: 100%;

margin-bottom: 20px;

margin-top: 10px;

padding: 7px 10px;

font-size: 18px;

}

</style>

<h1>Membuat Format Rupiah Dengan Javascript <br/> www.malasngoding.com</h1>

</center>

<p>Ketik jumlah nominal pada form di bawah ini.</p>

<span>Nominal Rupiah. :</span>

</div>

var rupiah = document.getElementById('rupiah');

rupiah.addEventListener('keyup', function(e){

// tambahkan 'Rp.' pada saat form di ketik

// gunakan fungsi formatRupiah() untuk mengubah angka yang di ketik menjadi format angka

rupiah.value = formatRupiah(this.value, 'Rp. ');

});

/* Fungsi formatRupiah */

function formatRupiah(angka, prefix){

var number_string = angka.replace(/[^,\d]/g, '').toString(),

split = number_string.split(','),

sisa = split[0].length % 3,

rupiah = split[0].substr(0, sisa),

ribuan = split[0].substr(sisa).match(/\d{3}/gi);

// tambahkan titik jika yang di input sudah menjadi angka ribuan

if(ribuan){

separator = sisa ? '.' : '';

rupiah += separator + ribuan.join('.');

}

rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');

}

</script>

</body>

</html>

akan saya jelaskan terlebih dulu, baru kemudian kita akan melihat hasilnya.

Pertama kita buat sebuah form penginputan untuk angka.

Referensi source code untuk belajar

Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website

<p>Ketik jumlah nominal pada form di bawah ini.</p>

<span>Nominal Rupiah. :</span>

</div>

membuat format rupiah dengan javascript

dan kemudian kita berikan sentuhan CSS nya, supaya lebih terlihat ganteng.

body {

font-family: sans-serif;

}

.kotak {

width: 350px;

margin: auto;

margin-top: 15px;

padding: 10px;

}

margin-bottom: 20px;

color: #0004ff;

}

input {

text-align: right;

width: 100%;

margin-bottom: 20px;

margin-top: 10px;

padding: 7px 10px;

font-size: 18px;

}

</style>

dan terakhir pada bagian javascript nya. kita deklarasikan id rupiah ke dalam variabel.

kemudian kita beri perintah untuk mengirim data yang di input ke function formatRupiah().

rupiah.addEventListener('keyup', function(e){

// tambahkan 'Rp.' pada saat form di ketik

// gunakan fungsi formatRupiah() untuk mengubah angka yang di ketik menjadi format angka

rupiah.value = formatRupiah(this.value, 'Rp. ');

dan function formatRupiah berisi syntax untuk membuat format angka. dengan menggunakan titik.

/* Fungsi formatRupiah */

function formatRupiah(angka, prefix){

var number_string = angka.replace(/[^,\d]/g, '').toString(),

split = number_string.split(','),

sisa = split[0].length % 3,

rupiah = split[0].substr(0, sisa),

ribuan = split[0].substr(sisa).match(/\d{3}/gi);

// tambahkan titik jika yang di input sudah menjadi angka ribuan

if(ribuan){

separator = sisa ? '.' : '';

rupiah += separator + ribuan.join('.');

}

rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');

}

hasil akhirnya kita return atau kembalikan penulisan yang dalam bentuk Rp.

Di sini kita juga menyeleksi penginputan selain angka akan di hapus jadi fungsi ini akan menghapus inputan selain angka.

Coba kita lihat hasilnya.

membuat format rupiah dengan javascript

Nah selesai, format rupiah javascript pun selesai.

See the Pen Format Rupiah Javascript by Malas Ngoding (@malasngoding) on CodePen.0

Mungkin sekian tutorial Membuat Format Rupiah Dengan Javascript. semoga dapat bermanfaat.

DEMO

DOWNLOAD SOURCE CODE

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.