MasinoAutoFormatNumber14, Extension untuk Memformat Angka di PHPMaker 2018

Sudah cukup lama juga saya tidak menulis di situs ini. Biasalah, kesibukan rutin di kantor. Apalagi kalau tidak membangun Aplikasi Web; yang tentu saja masih menggunakan PHPMaker. Memasuki masa-masa libur setiap tahun, hari ini saya share satu Extension baru, yang saya yakin pasti bermanfaat buat Anda.

Salah satu Aplikasi Web yang saya kerjakan membutuhkan fitur untuk menampilkan karakter pemisah (separator) Ribuan dan/atau Desimal, saat data angka sedang diketik oleh Pengguna. Contoh, jika data 1234567 (Satu juta dua ratus tiga puluh empat ribu lima ratus enam puluh tujuh) diketik, maka sistem akan otomatis menambahkan karakter pemisah Ribuan, sehingga menjadi 1,234,567.

Demikian juga misalnya jika data angka yang tipenya Desimal diketik (contoh: 0.15), maka karakter Desimal akan otomatis ditambahkan, sehingga Pengguna hanya fokus mengetik nilainya saja. Mereka tidak perlu lagi repot memikirkan apakah data tersebut bertipe Desimal atau bukan, karena sistem sudah otomatis menambahkan separator Desimal di dalamnya.

Tidak itu saja, penggunaan karakter pemisah Ribuan dan Desimal itu pun bisa digunakan bersamaan. Misalkan angka yang diketikkan adalah 1234567.87, maka sistem akan otomatis mengubahnya menjadi 1,234,567.87 saat Pengguna mengetikkan angka tersebut.

Sayangnya, sampai dengan PHPMaker versi 2018, fitur ini belum ada. Seharusnya sudah ada sejak dulu, tapi tidak juga mereka sediakan. PHPMaker baru bisa memformat data Angka tersebut saat ditampilkan di halaman List atau View saja. Sedangkan untuk form Add dan Edit, tidak ada.

Melihat kondisi itu, akhirnya saya berusaha menambahkan fitur tersebut melalui Extension PHPMaker. Itulah enaknya pakai PHPMaker. Fitur apapun yang diinginkan bisa ditambahkan melalui Extension. Tidak perlu mengubah Template PHPMaker.

Extension MasinoAutoFormatNumber14 ini saya buat mulai PHPMaker 2018, di mana angka 14 di sana adalah base-version dari PHPMaker 2018. Seperti namanya, Extension ini akan otomatis memformat data yang bertipe Angka atau Numeric, dengan menambahkan karakter pemisah Ribuan maupun Desimal.

Dengan menggunakan Extension tersebut, maka ada begitu banyak keuntungan yang akan Anda dapatkan, yaitu:

1. Anda tidak perlu lagi menulis satu baris kode pun dari bagian Server Events maupun Client Scripts dari dalam project PHPMaker. Mungkin selama ini Anda harus menambahkan kode tambahan secara manual dari kedua bagian tadi. Tentu saja cara ini sangat membosankan, dan juga tidak efisien.

   Sebagai gantinya, Anda cukup hanya mengaktifkan MasinoAutoFormatNumber14 dari menu Tools -> Extensions saja, lalu generate ulang semua file script. Ya, sesederhana itu. Biarkan PHPMaker yang mendeteksi sendiri field-field mana saja yang sudah Anda tentukan sebelumnya, supaya dapat menampilkan karakter pemisah Ribuan dan Desimal.

2. Extension ini akan otomatis mem-format nilai Angka ketika Pengguna Aplikasi Web Anda sedang mengetik data di form. Hal ini tentu saja akan membuat Pengguna Aplikasi Web Anda merasa nyaman dan terbantu, karena mereka dapat langsung mengetahui data yang mereka inginkan.
3. Anda tidak perlu lagi mem-format data secara manual dari nilai yang sudah memiliki karakter pemisah Ribuan dan/atau Desimal tadi menjadi nilai Angka, sebelum Anda menyimpan data. Artinya, sistem sudah otomatis menangani proses pengkonversian data hasil format menjadi data asli yang sesungguhnya (tanpa karakter pemisah Ribuan dan/atau Desimal). Bayangkan, jika Anda harus menangani proses ini setiap kali data akan disimpan ke Database.
4. Sistem akan otomatis mem-format semua nilai Angka yang diambil dari Database, ketika data tersebut ditampilkan di form. Mirip seperti poin sebelumnya, tapi kali ini sistem akan langsung menambahkan karakter pemisah Ribuan dan/atau Desimal, sesuai dengan tipe datanya, apakah Number, Currency, atau Percent. Dengan cara ini, Pengguna pun merasa nyaman melihat nilai yang sudah ada karakter pemisah Ribuan dan/atau Desimalnya.
5. Sistem akan otomatis menghitung nilai tanpa harus menghilangkan terlebih dulu karakter pemisah Ribuan dan/atau Desimal. Artinya, ketika Anda menerapkan business logic yang mengharuskan dapat menghitung data yang sedang dimasukkan, apalagi melibatkan beberapa field, maka Extension ini pun dapat menanganinya sesuai yang diharapkann.
   
   Data yang terkait dengan proses perhitungan akan diformat dengan menambahkan karakter pemisah Ribuan dan/atau Desimal. Tidak hanya itu saja. Hasil perhitungan pun akan ditampilkan dalam format data yang memiliki karakter pemisah Ribuan dan/atau Desimal. Wouw, kereeen!
6. Mencegah Pengguna Akhir mengetikkan data angka yang tipenya bukan Angka pada form Tambah/Ubah. Artinya, Pengguna tidak akan bisa memasukkan karakter selain Angka, misalnya huruf, karakter simbol atau karakter spesial. Hanya karakter Angka dan pemisah Ribuan dan Desimal saja yang bisa dimasukkan.
7. Mendukung semua tipe Angka yang disediakan oleh PHPMaker (Currency, Number, Percent). Pengaturan ini bisa Anda atur dengan sangat mudah dari panel View Tag pada pengaturan Fields project PHPMaker Anda. Inilah kunci yang sebenarnya, bagaimana Extension akan mengenali sebelum melakukan pem-format-an data.
8. Mendukung fungsi Validasi yang dibangkitkan oleh PHPMaker melalui pengaturan pada panel Edit Tag, dan tidak akan konflik dengan kode yang dihasilkan oleh PHPMaker tadi. Artinya, jika seandainya Anda tidak menggunakan Extension ini lalu menambahkan karakter pemisah Ribuan dan/atau Desimal, maka sistem akan mendeteksi data tersebut bukan tipe data Angka.
   
   Tapi, dengan menggunakan Extension ini, maka data hasil format yang mengandung karakter pemisah Ribuan dan/atau Desimal tadi, sistem akan mengenalinya sebagai data Angka yang valid. Sudah lama saya menginginkan hal ini terwujud, dan Puji Tuhan, akhirnya sekarang benar-benar terwujud. Keren juga, kan? 😉
9. Mendukung pengaturan No. of digits after decimal dari panel View Tag dari setiap field yang bertipe Angka pada project PHPMaker Anda. Artinya, Anda dapat menentukan berapa digit di belakang koma yang akan ditampilkan di form untuk nilai Desimal, termasuk nantinya ketika data tersebut disimpan ke Database.
10. Mendukung fitur Grid-Add, Grid-Edit, Inline-Add, Inline-Copy, Inline-Edit pada project PHPMaker Anda. Artinya, di semua mode atau fitur tersebut, karakter pemisah Ribuan dan/atau Desimal tadi juga akan ditambahkan oleh sistem. Bayangkan, kalau tanpa menggunakan Extension, maka Anda harus menangani satu per satu dengan menggunakan script tambahan. Sangat tidak efektif dan sangat tidak efisien, bukan? Bukan! Hehehe… 😉
11. Bisa digunakan pada fitur Custom Fields, khususnya untuk proses perhitungan data pada project PHPMaker Anda. Custom Fields merupakan fitur di PHPMaker yang memungkinkan Anda menambahkan field yang tidak terdapat di Database. Artinya, karakter pemisah Ribuan dan/atau Desimal tadi pun bisa ditampilkan pada Custom Fields tadi, saat data sedang diketik atau dimasukkan oleh Pengguna pada mode form Add atau Edit.
12. Mendukung pengaturan karakter pemisah Ribuan dan Desimal dari menu Tools -> Locale Settings project PHPMaker Anda. Artinya, setiap negara bisa saja menggunakan karakter pemisah Ribuan dan/atau Desimal yang berbeda, dan Anda bisa menentukan karakter pemisah yang Anda inginkan dari bagian Locale Settings tadi. Extension ini akan mendukung pengaturan tersebut. Meski demikian, saya sarankan agar tetap menggunakan karakter koma (,) sebagai pemisah Ribuan, dan karakter titik (.) sebagai pemisah Desimal.
13. Mendukung pemakaian tombol Backspace dan Delete pada control Textbox. Artinya, selain menerima inputan karakter Angka, karakter pemisah Ribuan, dan karakter pemisah Desimal, maka sistem dapat menerima hasil penekanan tombol Delete dan Backspace. Tentu saja, kedua tombol ini sering digunakan ketika Pengguna sedang mengkoreksi data.
14. Semua field Angka dapat dicari melalui panel Quick Search (bukan pada bagian Extended Search). Artinya, untuk saat ini, disarankan untuk menggunakan pencarian data melalui fitur Quick Search saja, karena data hasil format yang dimasukkan pada kotak pencarian melalui fitur Extended Search, akan ditampilkan beserta karakter pemisahnya di URL saat hasil pencarian dikirim ke server. Akibatnya, proses pencarian akan selalu mengembalikan hasil yang tidak diharapkan.
    
    Mungkin ini menjadi PR bagi saya, bagaimana membuat supaya Extension ini bisa mendukung penggunaan field pencarian pada bagian Extended Search. Artinya, saat parameter pencarian data Angka tadi ditampilkan di URL, maka karakter pemisah Ribuan harus dihilangkan terlebih dulu.
15. Aplikasi Web yang Anda bangun menjadi lebih user-friendly, di mana mereka menjadi nyaman saat mengetikkan data Angka. Tentu, dong… saat Pengguna mengetikkan atau memasukkan data Angka, maka mereka langsung dapat melihat hasilnya dengan sangat mudah, karena sudah dibantu dengan adanya pemisah Ribuan dan/atau Desimal tadi.
16. Dan yang paling penting dari semuanya itu, Extension ini dapat menghemat waktu Anda untuk membangun aplikasi web, khususnya yang di-generate oleh PHPMaker. Aplikasi Web yang Anda buat pun akan terlihat lebih user friendly, sekaligus profesional. Duh, kurang apa lagi ya?

Nah, jika Anda memang tertarik untuk menggunakan Extension tersebut di project PHPMaker Anda, maka silahkan download dari sini.

Simak juga videonya di sini.

Hari gini masih menangani karakter pemisah Ribuan dan Desimal secara manual? Hohoho…