Tidak terasa, kurang lebih dalam satu minggu terakhir, sudah ada 3 Extension baru yang bertambah di Masino Extensions untuk PHPMaker 2022. Termasuk yang baru saja saya rilis hari ini, yaitu MasinoInputMask18. Jadi, sampai hari ini sudah ada total 15 Extension yang merupakan satu kesatuan dari Masino Extensions for PHPMaker 2022.
Dari namanya saja kita sudah bisa menebak, Extension ini berfungsi untuk membantu pembuatan Mask di control Input atau Textbox pada Aplikasi Web yang dihasilkan oleh PHPMaker 2022. Pasti sudah pada tahu (bagi yang belum tahu, silahkan Googling, apa yang dimaksud dengan Input Mask), bahwa Mask di control Input sangat membantu Pengguna Akhir ketika mengentri data di control Textbox.
Ketika data yang diinput memiliki karakter pemisah, maka dengan adanya Mask, karakter pemisah tadi tidak perlu diketik. Tujuannya hanya satu, supaya Pengguna Akhir lebih mudah dan cepat saat menginput data di control Textbox. Karakter pemisah yang terdapat di data yang akan diinput tidak perlu diketik lagi.
Ketika data sedang diketik di control Textbox, maka sistem akan otomatis menambahkan karakter pemisah (seperti koma (,) untuk pemisah angka ribuan, dan karakter titik (.) untuk pemisah angka desimal). Contoh lainnya, karakter minus (-) untuk memisahkan angka kode area negara dengan nomor telepon yang sebenarnya.
Sebenarnya fungsi ini sudah terdapat sebelumnya pada MasinoAutoNumeric18 Extension. Tapi sayangnya, Extension tersebut belum mendukung fungsi untuk Mask pada tipe data selain angka, seperti contoh kasus nomor telepon tadi. Extension itu hanya bisa menambahkan karakter pemisah ribuan dan desimal pada data numerik saja.
Di dalam project PHPMaker 2022, Extension MasinoInputMask18 berada di bawah tipe Auto Numeric. Anda bisa melihatnya dari menu Tools -> Extensions. Jadi, sekarang ada dua Extension yang berada di tipe tersebut, yaitu MasinoAutoNumeric18 dan MasinoInputMask18.
Sebagai informasi, saya menggunakan bantuan Javascript Library yang bernama Inputmask untuk membuat Extension ini.
Jika Anda mengaktifkan Extension MasinoInputMask18, maka Anda akan melihat ada dua level setting, yaitu Project, dan Fields. Di bawah level Project, hanya ada satu opsi, yaitu GlobalOptions, untuk mendefinsikan option pada level Project atau global.
Sedangkan di level Fields, terdapat beberapa opsi sebagai berikut:
– NumberOfDecimal, opsi ini juga terdapat di Extension MasinoAutoNumeric18, yang fungsinya untuk mendefinisikan berapa jumlah digit angka di belakang karakter pemisah desimal. Nilai default untuk semua Field adalah 0. Artinya, jika tidak diubah, maka semua field angka tidak memiliki angka desimal.
Pastikan untuk mengubah nilai 0 tadi menjadi nilai yang kita inginkan. Misalnya jika kita ingin ada 2 digit angka di belakang karakter pemisah desimal, maka ubah 0 menjadi 2 pada field yang bertalian.
Contoh penggunaan setting ini dapat Anda lihat pada project demo yang terdapat di situs ILovePHPMaker.com pada table orderdetails. Lihat field Quantity, Discount, dan Sub Total masing-masing terlihat rata kanan pada halaman Add maupun Edit.
Penting untuk diketahui, bahwa supaya Extension MasinoInputMask18 dapat mengenali tipe data mana saja field yang numerik di suatu table, kita harus memilih Number dari Fields setup -> View Tag -> Format pada field yang bertalian. Sedangkan di bagian Format pattern tidak wajib diisi.
Jangan sampai lupa ya!
– Mask, pengaturan ini tidak perlu diisi untuk field yang tipenya numerik atau angka. Jika kita ingin misalnya membuat Mask untuk data nomor telepon pada field Phone dan Fax pada table suppliers (misalnya), maka ketikkan di kolom Mask pada field Phone dan Mask dari setting Extension MasinoInputMask18 tadi masing-masing menjadi seperti ini:
['+99-999-9999-9999', '+99-999-99999-9999', '+99-999-9999-9999-9999']
Perhatikan data Mask tersebut. Sebelum kurung buka siku dan setelah kurung tutup siku, tidak ada karakter petik tunggal atau petik ganda. Hal ini karena kita menggunakan 3 format Mask yang akan dijelaskan lebih lanjut di bawah. Masing-masing dari ketiga format tadi barulah diapit oleh karakter petik tunggal.
Selanjutnya, perhatikan angka 9 di Mask tadi. Angka 9 artinya mewakili angka 0 sampai dengan 9. Jadi, hanya bisa menerima karakter angka.
Seperti yang dijelaskan tadi, karakter kurung siku buka dan tutup di sana artinya kita memiliki lebih dari satu format Mask untuk field Phone tadi, yang masing-masing dipisahkan dengan karakter koma, dan diapit oleh karakter petik tunggal.
Jadi, di sana ada 3 format Mask, masing-masing sebagai berikut:
'+99-999-9999-9999' '+99-999-99999-9999' '+99-999-9999-9999-9999'
Jika kita misalnya punya nomor telepon: 061 12345678901, maka ketika kita ketik data tersebut di field Phone, maka sistem akan otomatis memformat datanya menjadi:
+61-123-4567-8901
Tapi jika misalnya nomor teleponnya adalah 061 123456789012, maka ketika kita ketik data tersebut di field Phone, maka sistem akan otomatis memformat datanya menjadi:
+61-123-45678-9012
Sampai di sini, sudah tahu bedanya kan? Ya, itu artinya sistem akan otomatis menyesuaikan ke format kedua, dengan urutan jumlah 2-3-5-4 digit (total = 14 digit). Sementara di format pertama, urutan jumlah digit-nya adalah 2-3-4-4 (total = 13 digit).
Sedangkan format yang ketiga, akan otomatis digunakan jika misalnya jumlah digit nomor telepon beserta kode areanya adalah 17 (2-3-4-4-4).
– Options, merupakan opsi untuk level Field. Opsi pada level Field ini bisa meng-override atau menimpa atau mengabaikan opsi pada level Project atau global tadi. Contoh, untuk case pada field Phone dan Fax pada table suppliers. Masing-masing memiliki setting berikut:
'keepStatic': true
Khusus untuk field Fax, kita memilik setting yang berbeda dengan yang barusan, yaitu:
'keepStatic': true, 'removeMaskOnSubmit': false
Opsi keepStatic bernilai true terkait erat dengan setting pada kolom Mask pada contoh nomor telepon di atas tadi. Jadi, supaya setting Mask tadi berfungsi, maka kita harus menambahkan opsi keepStatic yang bernilai true.
Sedangkan opsi removeMaskOnSubmit bernilai false artinya, ketika data pada field Fax disimpan, maka karakter + dan – juga akan ikut disimpan ke database. Data yang disimpan pada field Fax menjadi (misalnya): +61-123-4567-8901.
Bandingkan dengan field Phone, maka karakter + dan – tidak akan ikut disimpan. Jadi, data yang disimpan pada field Phone adalah: 6112345678901.
Contoh data Options pada level field juga bisa Anda lihat pada table orderdetails field UnitPrice. Anda akan melihat kode seperti ini:
'rightAlign': false
yang artinya data pada control Textbox menjadi rata kiri. Itu artinya, jika opsi tersebut tidak kita tambahkan, data angka akan otomatis rata kanan. Itu hanya contoh demo saja. Tentu saja kita disarankan untuk tidak membuatnya menjadi rata kiri.
Satu hal yang kelihatan sepele mengenai data numerik sudah seharusnya dibuat otomatis rata kanan di suatu Aplikasi Web.
Itu jugalah kenapa saya membuat Extension MasinoInputMask18 sebagai alternatif Extensions yang sebelumnya sudah ada; MasinoAutoNumeric18 yang belum mendukung data di Textbox otomatis rata kanan.
Seperti biasa, jika ingin melihat demonya secara langsung, klik di sini, lalu login dengan username admin dan password master, buka menu OTHER TABLES -> Order Details, lalu cobalah untuk mengubah salah satu record yang ada.
Anda akan melihat data masing-masing field Quantity, Discount, dan Sub Total masing-masing terlihat rata kanan. Khusus field Unit Price rata kiri, karena kita menambahkan opsi alignRight dengan nilai false. Cobalah dengan mengubah data di field Quantity, dan silahkan menikmati hasilnya.
Satu lagi alasan yang semakin memantapkan kita untuk selalu menggunakan Masino Extensions pada project PHPMaker 2022. Bagaimana dengan Anda? 😉
Tinggalkan Balasan