Cara menggunakan format_currency php

Question

Terkadang kita butuh format text atau number ke bentuk format currency rupiah. Di flutter terdapat function yang bisa digunakan untuk kebutuhan format tersebut menggunakan package intl.dart. Cara membuat format currency rupiah di flutter sangat mudah. Perhatikan contoh berikut:

Table of Contents Show

I. Membuat Format Rupiah Dengan Javascript – Cara Mudah
Cara lebih singkat
II. Mendukung Koma (Desimal)
III. Menerapkan Format Rupiah Pada Form
1. Event Keyup
2. Penambahan Event Keydown
IV. Kesimpulan
Subscibe Now

Untuk memformat output data database ke dalam bentuk rupiah, kita gunakan program serverside, seperti PHP.Ã‚Â Hal ini tidak efektif jika menggunakan program client side seperti javascript, karena harus menunggu semua dokumen di load.

Lalu, untuk tujuan apa membuat format rupiah dengan javascript?

Umumnya, format rupiah dengan javascript ini digunakan untuk mengelolaÃ‚Â inputan dari user pada form baik secara langsung maupun tidak langsung.Ã‚Â Tidak langsung dalam hal ini misal membuat total dari semua inputan secara realtime.

DEMO

DOWNLOAD

I. Membuat Format Rupiah Dengan Javascript – Cara Mudah

Diinternet terdapat banyak script untuk membuat format rupiah dengan javascript. Kali ini saya menggunakan cara berbeda yaitu menggunakan regex, yang lebih simpel dan mudah dipelajari.

Adapun script jadinya adalah sebagai berikut:

var bilangan = 23456789;
	
var	number_string = bilangan.toString(),
	sisa 	= number_string.length % 3,
	rupiah 	= number_string.substr(0, sisa),
	ribuan 	= number_string.substr(sisa).match(/\d{3}/g);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}

// Cetak hasil
document.write(rupiah); // Hasil: 23.456.789

Script diatas akan menghasilkan angka 23.456.789.

Penjelasan:

Pertama, karena kita akan memecah angka menggunakan fungsi untuk string, maka Ã‚Â kita ubah format angka menjadi string dengan fungsi toStringÃ‚Â bilangan.toString()
Selanjutnya kita cek apakah jumlah digit bukan kelipatan 3 (number_string.length % 3), hasilnya kita simpan pada variabel rupiah.
Nilai variabel rupiah ini ada nilainya jika banyaknya angka tidak kelipatan 3, dan akan bernilai kosong jika banyaknya angka kelipatan 3. Pada contoh kali ini, nilai awal rupiah adalah 23.
Selanjutnya, dengan regex yang simpel, kita kelompokkan sisanya per tiga digit, sisa ini berbentuk array dan disimpan ke dalam variabel ribuan. Dalam contoh ini, variabel ribuan akan berisi ["444"]["555"]

Jika variabel ribuan ada nilainya: Jika jumlah digit tidak kelipatan 3 (variabel sisa ada isinya) maka separator bernilai titik (

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

0), jika tidak, maka separator bernilai kosong.

Hal ini untuk menghindari titik didepan angka jika jumlah angkan kelipatan 3, seperti:

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

1

Terakhir, dengan operator += kita gabung nilai varibel rupiah.

Untuk lebih jelasnya, perhatikan gambar berikut:

DEMO: untuk demonya, silakan klik disini.

Cara lebih singkat

Sebenarnya ada cara lebih singkat lagi, yaitu:

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

Penjelasan:

Pertama, kita ubah bilangan menjadi string ( bilangan.toString() ), kemudian kita balik urutan angka tersebut (

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

3 ), hasilnya

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

4 kita simpan pada variabel

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

5

Selanjutnya, dengan regex, kita pecah angka tersebut per tiga bagian menjadi array:

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

6.

Regex

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

7: artinya kita ambil angka (Ã‚Â

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

8Ã‚Â dapat diganti

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

9 ) dengan panjang digit 1-3, diambil yang terbanyak dahulu yaitu 3, artinya jika bisa menemukan tiga karakter, maka diambil 3 karakter, jika tidak 2, jika tidak 1.

Kemudian kita gabung array tersebut dengan titik (

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

0 ), hasil:

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

1, dan kita balik hasilnya (Ã‚Â

var 	bilangan = 23456789;
		
var	reverse = bilangan.toString().split('').reverse().join(''),
	ribuan 	= reverse.match(/\d{1,3}/g);
	ribuan	= ribuan.join('.').split('').reverse().join('');

// Cetak hasil	
document.write(ribuan); // Hasil: 23.456.789

3 ), hasilnya:

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

3

Untuk lebih jelasnya, perhatikan gambar berikut:

DEMO: Untuk demo penggunaan script ini, dapat dilihat disini.

Karena cara kedua ini banyak menggunakan fungsi array yaitu split, reverse, dan join, maka waktu eksekusi script ini 3x lebih lambat daripada cara pertama, sehingga pada pembahasan selanjutnya, kita akan menggunakan cara pertama. Namun demikian, sobat bebas memilih cara yang ingin digunakan

II. Mendukung Koma (Desimal)

Pada rupiah, kita mengenal istilah desimal atau sen, meski jarang digunakan, pada sistem yang detail, penggunaan koma ini masih sering digunakan.

Untuk itu, mari kita sedikit ubah script kita, sehingga dapat mendukung koma/sen

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

Script diatas tetap kompatibel baik untuk bilangan bulat maupun bilangan yang memiliki pecahan/sen. Adapun perbedaan dari script sebelumnya hanya di baris 4 dan 13.

Penjelasan:

Pada baris 4, dengan method split, kita pecah bilangan menjadi dua berdasarkan tanda koma, yaitu bilangan utuh (sebelum koma) dan bilangan pecahan (sesudah koma), hasilnya kita simpan pada variabel split.
Selanjutnya, untuk bilangan bulat, kita gunakan split[0], sedangkan untuk pecahan, kita gunakan split[1]

Pada baris ke 13, kita tes, apakah bilangan mengandung pecahan (

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

4 ) jika, ya, maka kita gabungkan pecahan dengan bilangan jadi.

III. Menerapkan Format Rupiah Pada Form

Format rupiah dengan javascript paling sering digunakan pada inputan form yang terkait dengan nilai nominal misal harga, jumlah diskon,Ã‚Â total harga, dan lain-lain.

Nah, script untuk menerapkanÃ‚Â format rupiah pada form input ini, sama seperti script yang telah kita bahas sebelumnya, bedanya, kita menggunakan event

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

5 dan

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

6

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

5 artinya event yang terjadi ketika tombol keyboard kita lepas (setelah kita tekan)Ã‚Â sedangkanÃ‚Â

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

6 artinya event yang terjadi ketika kita menekan tombol pada keyboard.

1. Event Keyup

Untuk menangkap event keyup, kita menggunakan method

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

9. Method ini sudah didukung oleh semua browser modern, namun khusus untuk IE, baru mendukungnya versi 9 ketas.

Adapun script yang kita gunakan:

var input = document.getElementById('input-rupiah');
input.addEventListener('keyup', function(e)
{
	var 	number_string = bilangan.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{1,3}/gi);
		
	if (ribuan) {
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
	
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
});

Script diatas sama persis dengan script sebelumnya, hanya saja, ada beberapa yang kita tambahkan:

Pada fungsi diatas kita menambahkan kodeÃ‚Â

var input = document.getElementById('input-rupiah');
input.addEventListener('keyup', function(e)
{
	var 	number_string = bilangan.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{1,3}/gi);
		
	if (ribuan) {
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
	
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
});

0 yang digunakan untuk menghilangkan semua karakter selain koma dan bilangan (Ã‚Â

var input = document.getElementById('input-rupiah');
input.addEventListener('keyup', function(e)
{
	var 	number_string = bilangan.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{1,3}/gi);
		
	if (ribuan) {
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
	
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
});

1 ). Sehingga, ketika user menekan huruf selain koma dan digit, maka akan langsung hilang.

Kedua, kita menambahkan kodeÃ‚Â

var input = document.getElementById('input-rupiah');
input.addEventListener('keyup', function(e)
{
	var 	number_string = bilangan.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{1,3}/gi);
		
	if (ribuan) {
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
	
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
});

2 untuk menambahkan prefix (dalam contoh ini Rp.) jika user menghendaki adanya prefix.

DEMO: Untuk demonya, silakan klik disini.

2. Penambahan Event Keydown

Ketika menggunakan event keyup, maka ketika user menekan huruf

var input = document.getElementById('input-rupiah');
input.addEventListener('keyup', function(e)
{
	var 	number_string = bilangan.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{1,3}/gi);
		
	if (ribuan) {
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
	
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
});

3 pada keyboard, maka teks a tersebut akan muncul, namun ketika user melepas tombol a tad, maka seketika huruf a tersebut akan hilang.

Nah, event keydown ini dapat membatasi sehingga tombol a benar-benar tidak berfungsi alias ketika user menekan tombol a, maka tidak terjadi apa-apa.

Keterbatasan dari metode ini adalah kita harus menentukan huruf mana saja yang akan kita disable, untuk itu kita harus mengetahui keycode dari masing masing huruf. Keycode tersebut dapat dilihat .

Fungsi yang kita gunakan adalah:

var input = document.getElementById('input-rupiah');
input.addEventListener('keydown', function(event) {
{
	key = event.which || event.keyCode;
	if ( 	key != 188 // Comma
		 && key != 8 // Backspace
		 && key != 17 && key != 86 & key != 67 // Ctrl c, ctrl v
		 && (key < 48 || key > 57) // Non digit
		 // Dan masih banyak lagi seperti tombol del, panah kiri dan kanan, tombol tab, dll
		) 
	{
		event.preventDefault();
		return;
	}
});

DEMO: Untuk demonya, silakan klik disini.

Teknik yang pertama (

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

5) yang paling umum digunakan untuk membatasi inputan karakter pada form, karena masih ada reaksi ketika user menekan tombol keyboard.

Dengan demikian user tahu bahwa ada pembatasan inputan karakter. Jika menggunakan metode

var 	bilangan = "23456789,32";
	
var	number_string = bilangan.toString(),
	split	= number_string.split(','),
	sisa 	= split[0].length % 3,
	rupiah 	= split[0].substr(0, sisa),
	ribuan 	= split[0].substr(sisa).match(/\d{1,3}/gi);
		
if (ribuan) {
	separator = sisa ? '.' : '';
	rupiah += separator + ribuan.join('.');
}
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;

// Cetak hasil	
document.write(rupiah); // Hasil 23.456.789,32

6, karena tidak ada reaksi ketika keyboard ditekan, mungkin user akan menduga apakah keyboardnya yang bermasalah?

IV. Kesimpulan

Membuat format rupiah dengan javascript dapat dilakukan dengan banyak cara, beberapa diantaranya telah kita bahas diatas.

Mana yang seharusnya kita gunakan?

Berdasarkan pembahasan kita diatas, yang paling umum digunakan adalah menggunakan event keyup (bagian III.1) untuk lebih meningkatkan fungsionalitas, kita dapat menambahkan event keydown (bagian III.2)

Demikian pembahasan mengenai cara format rupiah dengan javascript, semoga bermanfaat.