Format Mata Uang Rupiah dalam PHP dan Javascript

Dalam pembangunan dan pengembangan aplikasi berbasis web, kenyamanan pengguna merupakan salah satu hal yang penting untuk diperhatikan. Walaupun banyak juga yang mengabaikannya. Sesuatu yang kecil seperti pemilihan warna, pengaturan posisi atau layout, penyajian gambar, pemilihan jenis tulisan, penyajian tabel dan sebagainya, jika tidak dilakukan dengan benar dapat mengganggu kenyamanan pengguna aplikasi, yang pada akhirnya akan mempengaruhi tingkat kepuasan pengguna terhadap aplikasi.

format-angka-3

Termasuk diantara hal kecil yang cukup penting namun kadang diabaikan oleh programmer adalah penyajian angka mata uang. Sebagai contoh, angka 1 juta rupiah ditampilkan dengan 1000000 akan lebih sulit dibaca dibandingkan jika ditampilkan dengan 1.000.000 (dengan pemisah ribuan). Demikian juga dalam hal inputan angka rupiah. Tentunya pengguna akan merasa lebih nyaman jika pada saat menginput angka rupiah di suatu textbox langsung ditambahkan pemisah ribuan pada angka yang dimasukkan.

Lalu bagaimana melakukannya? Dalam tutorial singkat ini akan dibahas cara menampilkan angka mata uang menggunakan fungsi yang tersedia di PHP. Selanjutnya akan dicontohkan juga bagaimana memformat angka mata uang secara otomatis menggunakan Javascript dan Jquery dalam sebuah inputan. Mari kita mulai.

Menampilkan Format Mata Uang Rupiah dengan PHP

Dalam buku gratis “Pemrograman Web dengan PHP dan MySQL” yang bisa didownload di website http://achmatim.net, terdapat pembahasan khusus mengenai fungsi-fungsi penanganan String. Salah satu fungsi tersebut adalah number_format() yang dapat digunakan untuk mengatur tampilan dari suatu angka. Salah satu kegunaannya, tentu menampilkan angka dalam format mata uang seperti rupiah.

Berikut ini contoh program penggunaan fungsi number_format() yang diambil dari buku tersebut:

  1. <?php
  2. $number = 1234.56;
  3. // format mata uang inggris (default)
  4. $english_format_number = number_format($number);
  5. echo "<br>".$english_format_number; // 1,235
  6.  
  7. // format mata uang perancis
  8. $nombre_format_francais = number_format($number, 2, ',', ' ');
  9. echo "<br>".$nombre_format_francais; // 1 234,56
  10.  
  11. //format mata uang indonesia
  12. $format_indonesia = number_format ($number, 2, ',', '.');
  13. echo "<br>".$format_indonesia; //1.234,56
  14. ?>

Demo program di atas dapat dilihat di http://codepad.org/r1PbX5Tv

Fungsi number_format() memiliki 1 (satu) parameter wajib yaitu angka yang akan diformat dan beberapa parameter pilihan. Berikut ini format umum fungsi tersebut yang disadur dari manual PHP.

number-format-1

Dari format umum tersebut dapat dipahami beberapa parameter fungsi number_format() sebagai berikut:

  1. float $number : parameter wajib, berupa angka bertipe float.
  2. int $decimals : berapa digit angka di belakang koma (angka pecahan)
  3. string $dec_point : simbol pemisah angka pecahan
  4. string $thousands_sep : simbol pemisah ribuan

Membuat Inputan Format Mata Uang dengan Javascript

Fungsi PHP number_format() umumnya digunakan untuk mengatur tampilan angka yang diambil dari database atau angka hasil olahan di PHP. Sebagai contoh untuk keperluan menampilkan laporan keuangan atau laporan gaji pegawai. Lalu bagaimana jika yang diperlukan adalah memformat angka pada saat proses input? Tentunya pilihan penggunaan fungsi PHP tidak terlalu tepat. Sedikit repot, karena PHP berjalannya di sisi server.

Oleh karena itu, penggunaan Javascript merupakan salah satu pilihan terbaik untuk memformat angka di suatu form inputan. Logikanya, saat kita mengetikkan angka pada suatu inputan, kita bisa membuat fungsi untuk mengubah tampilan angka ke dalam format yang diinginkan. Fungsi dapat kita buat sendiri atau tinggal memakai fungsi atau library yang dibuat oleh orang lain.

Dalam tutorial ini, kita akan coba memanfaatkan plugin jQuery-MaskMoney yang dibuat oleh Diego Plentz. Plugin dapat ditemukan dan diunduh di situs Github https://github.com/plentz/jquery-maskmoney.

Plugin tersebut memiliki keunggulan dalam hal kemudahan penerapannya, serta memiliki berbagai pilihan tampilan, termasuk pengaturan prefix (simbol mata uang), pemisah ribuan dan pemisah pecahan. Selain itu, penerapan plugin dapat menggunakan selector jQuery maupun gaya penerapan HTML5 menggunakan tag data-*.

Langsung aja kita lihat contohnya sebagai berikut:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Inputan Format Angka</title>
  5. <script type="text/javascript" src="libs/jquery.latest.js"></script>
  6. <script type="text/javascript" src="libs/jquery.maskMoney.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9. $('#angka1').maskMoney();
  10. $('#angka2').maskMoney({prefix:'US$'});
  11. $('#angka3').maskMoney({prefix:'Rp. ', thousands:'.', decimal:',', precision:0});
  12. $('#angka4').maskMoney();
  13. });
  14. </script>
  15. </head>
  16. <body>
  17. <form action="" method="post">
  18. Input angka (default): <input type="text" name="angka1" id="angka1"/>
  19. <br/>Input angka (US$): <input type="text" name="angka2" id="angka2"/>
  20. <br/>Input angka (Rp. ): <input type="text" name="angka3" id="angka3"/>
  21. <br/>Input angka (Rp. ) - HTML5: <input type="text" name="angka4" id="angka4" data-affixes-stay="true" data-prefix="Rp. " data-thousands="." data-decimal="," />
  22. <br/><input type="submit" name="submit" value="Submit"/>
  23. </form>
  24. <?php
  25. if(isset($_POST['submit'])) {
  26. echo "<pre>";
  27. print_r($_POST);
  28. echo "</pre>";
  29. }
  30. ?>
  31. </body>
  32. </html>

Demo program di atas dapat dilihat di http://jsfiddle.net/achmatim/5pfm2Lg4/

Penjelasan singkat dari program di atas. Untuk menerapkan plugin jQuery maskMoney, langkah pertama 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 diformat. Pada program di atas tampak pada baris ke-18 sampai 21. Terdapat 4 (empat) inputan dengan masing-masing atribut ID: angka1, angka2, angka3 dan angka4.

Langkah ketiga adalah memanggil atau mengaktifkan fungsi maskMoney(). Perhatikan baris ke-8 hingga 14. Untuk mengaktifkan fungsi maskMoney() pada dasarnya mudah saja, tinggal mengimplementasikan fungsi maskMoney() pada selector dari form inputannya. Secara default, fungsi maskMoney() akan memformat angka dalam format Inggris / Amerika dengan pemisah koma (,) untuk ribuan dan titik (.) untuk pemisah pecahan.

Hasil program di atas kurang lebih sebagai berikut:

format-angka-2

Berikut ini beberapa opsi dari fungsi maskMoney() yang bisa digunakan:

  • prefix: string awalan yang akan ditampilkan sebelum angka mata uang. Contoh: “US$ 1234.23”. Defaultnya adalah kosong.
  • suffix: string akhiran yang akan ditampilkan setelah angka mata uang. Contoh: “1234.23 €”. Defaultnya adalah kosong.
  • affixesStay: opsi untuk mengatur apakah string prefix atau suffix masih tetap ditampilkan ketika cursor sudah tidak berada di form inputan. Defaultnya true.
  • thousands: karakter pemisah ribuan. Default: ‘,’
  • decimal: karakter pemisah pecahan. Default: ‘.’
  • precision: berapa digit pecahan yang akan ditampilkan. Default: 2
  • allowZero: opsi untuk mengatur apakah diijinkan menginput 0. Default: false
  • allowNegative: pengaturan apakah diijinkan menginput bilangan negatif. Default: false.

Kesimpulan

Demikian tutorial singkat mengenai mengatur format angka, baik menggunakan PHP maupun Javascript. Untuk yang menggunakan PHP, kita dapat memanfaatkan fungsi number_format(). Sementara itu, teknik yang menggunakan Javascript sebenarnya cukup banyak library atau plugin jQuery yang bisa digunakan. Dalam tutorial ini dicontohkan menggunakan plugin jQuery-maskMoney. Semoga tutorial ini bermanfaat dan terima kasih sudah menyimak penjelasan di tutorial ini.

Follow akun twitter penulis di @achmatim untuk mendapatkan tweet terkait pemrograman web dan tutorial lainnya.

Download Tutorial

Berbagi itu indah...Share on Facebook4Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0Digg this

23 comments

  1. Terima kasih atas ilmunya pak. Bagaimana membuat kata2 dari angka untuk keperluan kuitansi. Misalnya ada angka 400.000, ingin dijadikan Terbilang: Empat ratus ribu Rupiah. Terima kasih sebelumnya.

  2. saya sudah coba dan bisa pak, namun tidak di save ke tabel/database (khusus field harga) ..
    pak. bagaiamana supaya field nya balik lagi format integer supaya ketika di save ke tabel/database tidak error ?
    mohon di jawab pak…
    terima kasih 🙂

      1. Bisa dikonversi kembali ke numerik dengan menghilangkan tanda baca / separator, sebelum dimasukkin ke database. Bisa gunakan fungsi str_replace() untuk menghilangkan karakter tanda baca tertentu.

        *pertanyaan @muhamad usep sudah saya balas via email / japri

  3. Terima kasih atas ilmu’y dalam buku Pemrograman Web dengan PHP dan MySQL..
    Sangat membantu dalam saya mengajar di jurusan TKJ..

  4. Assalamu’alaikum pak achmatim, klo hasil penjumlahan atau pengurangan otomatis dengan format harga bagaimana ya pak ?

    saya sudah coba dengan fungsi berikut :

    function hitung() {
    var a = $(“.a1”).val();
    var b = $(“.b1”).val();
    c = a – b; //a kali b
    $(“.c1”).val(c);
    }
    function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode !== 46 && charCode > 31 && (charCode 57))
    return false;
    return true;
    }

    tapi hasil nya masih NaN

    terima kasih

  5. Salam gan,
    saya coba simpan value tersebut ke database namun data yang tersimpan di database malah angka nol di belakang nya hilang.
    Contoh saya input 50.000 namun yang masuk ke database nya adalah 50.
    Mohon pencerahannya bagaimana agar value nya utuh tersimpan di database.

  6. sangat membantu tutorialnya min 😀
    maaf mau nanya, saya memiliki 2 tipe setor dan hutang. logikanya jika saya pilih setor secara otomatis saat saya input data uang dia akan tetap positif, tapi saat saya pilih tipe hutang, saya input uang dia akan secara otomatis jadi angka negatif saat masuk ke db, itu gimana ya min?

Leave a Reply

Your email address will not be published. Required fields are marked *