membuat format rupiah dengan javascript

share

  • membuat format rupiah dengan javascript

    Membuat Format Rupiah dengan Javascript


    Tutorial cara membuat format rupiah dengan javascript ke dalam form input nominal secara otomatis yang dipisahkan oleh tanda titik pada tiap 3 digit angka terakhir satuan ribuan, jutaan, milyar dan seterusnya.
  • membuat format rupiah dengan javascript
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • membuat format rupiah dengan javascript
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • membuat format rupiah dengan javascript Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • membuat format rupiah dengan javascript
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Membuat Format Rupiah dengan Javascript

Pada kesempatan ini kita akan belajar tutorial tentang cara membuat format rupiah dengan javascript ke dalam form input nominal secara otomatis yang dipisahkan oleh tanda titik pada tiap 3 digit angka terakhir. Maksudnya adalah ketika kita ketik angka nominal rupiah di kolom input yang berjumlah lebih dari ribuan, jutaan atau milyaran, maka otomatis akan tampil tanda titik di tiap 3 digit terakhir nominal input tersebut. Membuat format rupiah secara otomatis ini sangat dibutuhkan pada aplikasi keuangan yang mengaharuskan menampilkan pemisah satuan. Kemudian bagaimana bentuk format rupiah javascript tersebut? dan seperti apa kode javascript untuk membuat format rupiah otomatis ini.

Tutorial cara membuat format rupiah dengan javascript pada kolom input dengan pemisah 3 digit angka lengkap dengan script ini kami lakukan pada localhost menggunakan XAMPP ver 5.6 include dengan database MySQL. Untuk mengikuti tutorial ini pastikan komputer anda telah completed install web server XAMPP tersebut. Sehingga tutorial format rupiah javascript dapat diikuti dengan lancar.

Berikut langkah - langkah atau cara membuat format rupiah dengan javascript ke dalam kolom input nominal yang secara otomatis akan dipisahkan oleh tanda titik:

Membuat Format Rupiah dengan Javascript



format rupiah javascript

membuat format rupiah dengan javascript

1. Membuat Folder Direktori Project.

Folder direktori ini dapat kita buat langsung di htdocs atau bebas di mana saja karena file project bukan dalam script php, sebagai contoh nama folder nya adalah "rupiah-javascript". Kegunaan folder ini adalah untuk menyimpan seluruh file yang akan kita buat untuk menjalankan tutorial membuat format rupiah dengan javascript.

2. Membuat Form Input Format Rupiah Javascript

Sebagaimana telah dijelaskan bahwa format rupiah otomatis ini berjalan pada kolom input nominal angka yang akan dipisahkan oleh tanda titik pada setiap 3 digit angka satuan. Sehingga hasilnya akan terlihat langsung saat kita mengetik nominal rupiah nya pada kolom input yang tersedia. Form input format rupiah ini kita buat sebagai homepage atau index, javascript untuk memproses format rupiah juga akan kita buat pada file ini.

Berikut adalah kode javascript nya, simpan sebagai index.html

<html>
<head>
	<title>Membuat Format Rupiah Dengan Javascript - Tutorial</title>
	<style type="text/css">
	body {
		font-family: sans-serif;
	}
	.kotak {
		width: 300px;
		padding: 5px;
	}
	p{
		margin-bottom: 20px;
		color: #0004ff;
	}
	input {
		text-align: right;
		width: 100%;
		margin-bottom: 20px;
		margin-top: 10px;
		padding: 7px 10px;
		font-size: 18px;
	}
	</style>
</head>
<body> 
	<h2>Membuat Format Rupiah dengan Javascript</h2>
	<h4>Form Input Nominal:</h4>
	<div class="kotak">
		Nominal: <input type="text" id="rupiah"/>
	</div>
	<script type="text/javascript">
		var rupiah = document.getElementById('rupiah');
		rupiah.addEventListener('keyup', function(e){
			// tambahkan 'Rp.' pada saat ketik nominal di form kolom input
			// gunakan fungsi formatRupiah() untuk mengubah nominal 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 satuan 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>

Kode untuk membuat format rupiah dengan javascript yang di embed ke dalam html di atas jika dijalankan akan menampilkan form input angka. Kemudian ketika diketik akan menampilkan format rupiah dengan tanda titik pada tiap satuan ribuan, ratusan ribu, jutaan, milyaran dan seterusnya.

Jika dijalankan pada web browser akan menampilkan interface format rupiah javascript seperti gambar di bawah ini.

membuat format rupiah dengan javascript
Form Input Format Rupiah Javascript

Form input format rupiah dalam kolom tersebut terletak pada baris kode ke-29 hingga ke-31, yaitu pada kode html berikut ini.

<div class="kotak">
	Nominal: <input type="text" id="rupiah"/>
</div>

Perhatikan atribut-atribut pada tag input di atas terdapat id="rupiah", hal ini harus diperhatikan pada variable di kode javascript. Nama id harus sama dengan getElementById di kode javascript yaitu pada bagian var rupiah = document.getElementById('rupiah');.

Untuk membuktikan tutorial cara membuat format rupiah dengan javascript berhasil atau tidak, silahkan ketik angka berapapun hingga melebihi satuan ribuan. Seharusnya menampilkan format rupiah sebagaimana gambar di bawah ini.

membuat format rupiah dengan javascript
Format Rupiah Javascript Berhasil

Sampai pada tahap ini tutorial cara membuat format rupiah dengan javascript telah selesai dan berhasil di jalankan pada web browser. Inti dari kode javascript yang merubah format angka menjadi format rupiah menggunakan function terletak mulai pada baris kode ke-33 hingga baris kode ke-55, yaitu pada bagian kode javascript berikut ini.

var rupiah = document.getElementById('rupiah');
rupiah.addEventListener('keyup', function(e){
	// tambahkan 'Rp.' pada saat ketik nominal di form kolom input
	// gunakan fungsi formatRupiah() untuk mengubah nominal 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 satuan ribuan
	if(ribuan){
		separator = sisa ? '.' : '';
		rupiah += separator + ribuan.join('.');
	}
 
	rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
	return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
}

Tutorial Membuat Format Rupiah dengan Javascript

Sekian penjelasan dari kami tentang tutorial bagaimana cara membuat format rupiah dengan javascript menggunakan function formatRupiah() lengkap dengan source code nya. Untuk mendapatkan source code nya Anda dapat langsung copas melalui sumber kode pada artikel di atas, jika terjadi gagal atau error atau tidak berjalan baik mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Membuat Format Rupiah dengan Javascript

Tags: format rupiah dengan javascript, membuat format rupiah javascript, membuat format rupiah, format rupiah javascript, membuat format rupiah dengan javascript


Reliable

membuat format rupiah dengan javascript

Advertise

jasa pasang iklan murah

Payment & Donation

membuat format rupiah dengan javascript

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

membuat format rupiah dengan javascript

Account :

andihatmoko@gmail.com

Live Chat

regista2021-01-20, 10:45 am
Hallo kak info saya ingin download aplikasi rental barang kak
Akbar2021-01-18, 14:36 pm
Terima kasih programnya, sebagai referensi tugas akhir
Helina Amira2021-01-12, 03:15 am
Dear Friend, I hope this message does not end up in spam_ Good day to you and I hope you are keeping safe from COVID
Rahma2021-01-07, 14:52 pm
Min, mau tanya aplikasi SIPAS, apakah kami mendapatkan source code ketika melakukan pembelian?
ronzi2015-03-27, 12:44 pm
ini gimana cara kerjanya
intan2015-03-05, 22:22 pm
kalo ingin membuat halaman admin dari program chat seperti ini bagaimana script php nya ???
dalid2015-03-04, 13:58 pm
Mantap
anisa2015-02-18, 14:38 pm
salam kenal :)
Amat2015-01-21, 19:03 pm
Untuk kolom bawaan gimana isinya
untung ja2014-12-05, 09:47 am
heelo bisa gabung dgn kalian??
andela2014-09-11, 09:01 am
saya memerlukan aplikasi/softwere untuk membuat website bagaimana caranya?
Andreas2014-05-22, 19:40 pm
Isi artikelnya bagus, mudah di ikuti buat praktek langsung. Thanks admin
Nanda2014-05-17, 02:07 am
Cara pemesanan aplikasi berbasis web nya gimana, apa bisa scriptnya saja yang dikirim?
Edo2014-01-29, 06:13 am
Dear Admin, Kalo mau order script bagaimana caranya?
Irwan2014-01-22, 03:44 am
Pak admin, kapan free aplikasi nya di release?
angelo2014-01-11, 03:17 am
pak admin websitenya keren abis, kapan kita berkumpul ya
Sania2014-01-04, 03:21 am
Bagaimana cara instal template yg sudah didownload?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
membuat format rupiah dengan javascript