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.
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:
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.
Dari format umum tersebut dapat dipahami beberapa parameter fungsi number_format() sebagai berikut:
- float $number : parameter wajib, berupa angka bertipe float.
- int $decimals : berapa digit angka di belakang koma (angka pecahan)
- string $dec_point : simbol pemisah angka pecahan
- 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:
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:
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.
