Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mudahnya Memformat Angka Saat Data Diketik di Aplikasi Web dari PHPMaker

Mudahnya Memformat Angka Saat Data Diketik di Aplikasi Web dari PHPMaker

oleh 41 Komentar

Saat data yang bertipe angka sedang diketik oleh Pengguna di sebuah Aplikasi Web, sudah seharusnya data tersebut otomatis terformat dengan menambahkan karakter pemisah ribuan dan atau desimal. Sama halnya juga dengan data uang, biasanya sistem akan menambahkan simbol mata uang sesuai dengan bahasa yang terpilih di Aplikasi Web tersebut. Ini merupakan kebutuhan utama yang seharusnya tersedia di dalam sebuah Aplikasi Web.

Aplikasi Web yang dihasilkan oleh PHPMaker untungnya sudah menyediakan kerangka kerja yang bagus sehingga Anda sebagai Web Developer dapat menambahkan fitur ini dengan sangat mudah ke dalamnya. Dalam hal ini kita akan menggunakan salah satu plugin yang disediakan oleh jQuery bernama autoNumeric. Informasi dan demo lebih detail mengenai kemampuan plugin yang satu ini dapat Anda lihat di sini.

Untuk mengimplementasikan fitur autoNumeric ke Aplikasi Web yang dihasilkan oleh PHPMaker, saya akan menunjukkan langkah demi langkah kepada Anda bagaimana caranya. Katakanlah kita akan menambahkan format uang untuk Field UnitPrice pada halaman Add dan Edit dari tabel orderdetails. Kita akan menambahkan simbol mata uang, karakter pemisah ribuan, dan karakter pemisah desimal.

  1. Pastikan Anda sudah mengunduh file plugin jQuery autoNumeric tersebut dari link yang terdapat di atas.
  2. Copy-kan file autonumeric.js ke dalam sub-folder phpjs di Aplikasi Web Anda. Tentu saja Anda bisa mengemas file ini dalam sebuah Extension, tapi saya tidak akan membahasnya di sini.
  3. Tambahkan kode berikut ke dalam Page_Head yang terdapat di bawah Server Events -> Global -> All Pages: 
    ew_AddClientScript("phpjs/autonumeric.js"); // Add JavaScript
  4. Klik table orderdetails dari panel Database, lalu tambahkan kode jQuery berikut ke dalam Startup Script yang terdapat di bawah: Client Scripts -> Table-Specific -> Add/Copy Page dan juga Edit Page: 
    $(document).ready(function() {
	$('#x_UnitPrice').autoNumeric('init', {aSign:'<?php echo $DEFAULT_CURRENCY_SYMBOL; ?>'});
});

    Kode barusan untuk mendefinisikan format pada field UnitPrice menggunakan simbol mata uang dari variabel $DEFAULT_CURRENCY_SYMBOL yang sudah didefinisikan di dalam file ewcfg*.php.

  5. Selanjutnya tambahkan kode jQuery berikut ke dalam Form_CustomValidate yang terdapat di bawah lokasi pada langkah sebelumnya: 
    	$('#x_UnitPrice').val($('#x_UnitPrice').autoNumeric('get'));

    sebelum baris kode berikut:

    	return true;

    Fungsi dari kode ini untuk membersihkan karakter simbol mata uang, pemisah ribuan, dan pemisah desimal sebelum data tersebut disimpan ke Database.

Secara standar, plugin ini menggunakan pemisah ribuan berupa karakter koma (,) dan karakter pemisah desimal berupa karakter titik (.). Saya sangat menyarankan agar Anda tidak mengubah pengaturan ini. Yang perlu Anda ubah dalam hal ini hanyalah simbol mata uangnya saja. Jika tidak, maka data angka yang disimpan menjadi tidak sesuai dengan yang diharapkan.

Baca juga artikel saya yang berjudul Mengapa Sebaiknya Aplikasi Web Selalu Menggunakan Karakter Pemisah Internasional berisi penjelasan mengapa sebaiknya Anda tidak mengubah karakter pemisah ribuan dan desimal saat data sedang diketik di sebuah Aplikasi Web.

Wow, betapa simpel dan mudahnya, bukan? 😀

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com dan ilovephpmaker.com.

Komentar

  1. Haloo Bang Masino…
    Bagaimana caranya di PHP Maker 1 Field dibuat 2 Textbox.
    Contohnya field Amount dibuat 1 textbox Debet dan 1 textbox Credit.

    Mohon bantuan solusinya

    Thanks
    Radian

    Balas

    • Di PHPMaker tidak bisa seperti itu. Satu Field harus mewakili satu Control atau Element di sebuah Form Add atau Edit.

      Kecuali jika Anda menggunakan fitur pencarian yang Search Operator-nya diset sebagai USER SELECT, maka ketika dipilih nilai BETWEEN atau di antara, maka akan muncul dua TextBox, dan biasanya ini sering digunakan untuk pencarian data tanggal.

      Balas

  2. Maaf saya sudah mencoba sampai langkah ke 5 dan berhasil, namun ketika di Add/ (Simpan) muncul incorect integer.. Apa yang salah ya?

    Balas

  3. oke bang, saya mau tanya gimana cara implemantasi autonumeric jquery di tabel master dan detail yang udah terhubung…..

    dimana event java scriptx harus diletakkan…

    makasih

    Balas

  4. memasukkan rumus pembagian bagaimana ya bang ??
    misalnya :
    field 1 = rencana belanja
    field 2 = realisasi belanja
    field 3 = realisasi belanja / rencana belanja

    makasih ya bang

    Balas

  6. Selamat malam pak…..
    Dari pembahasan diaatas sy udah coba satu2 ewcfg.php knpa bila di input data tidak bisa melebihi 500 ya…..maksud saya yg akan sy terapkan input angka sampai 10.000.000,00 dan bisa disimpan…..mohon bantuanya pak….trimakasih

    Balas

  7. sore pak….
    jquery sya terapkan di master/detil kenapa tidak ada koma dan titik ya… sya ingin menggunaka inputan data angka ribuan bukan qurrency simbol pak. mohon bantuanya pak
    ….trimakasih

    Balas

  8. Selamat malam pak….
    Dimanakah menempatkan kode jquery untuk gridadd….contoh nya saya akan menampilkan jquery autonumeric untuk gridadd….mohn bantuanya pak trims…bila kode diatas sy terapkan di gridadd tidak berpengaruh apa2

    Balas

  9. pagi pak. itu diterapkan di gridd add nggak bisa ya pak….saya sudah masukkan kodenya di list page startup script tapi tidak bisa saat diketik… apa harus ada kode tambahan. tolong bantuanya pak… terima kasih

    Balas

  12. pakai phpmaker 2019 kok gak jalan dan tidak error juga. sudah diganti ew_AddClientScript(“phpjs/autonumeric.js”); menjadi AddClientScript(“phpjs/autonumeric.js”);
    apa ada saran pak ? terimakasih

    Balas

  14. Hallo pak masino
    Pak saya sudah berhasil terapkan sesuai dengan petunjuk pak masino
    Tapi ada kendala yang saya dapatkan

    Terkadang automumericnya suka gak aktif pak, dan harus di refresh berulang ulang baru aktif kembali

    Kira kira bagaimana cara mengatasinya ya pak ?

    Terima Kasih

    Balas

Tinggalkan Balasan ke Masino Sinaga Batalkan balasan

Alamat email Anda tidak akan dipublikasikan.

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.