Pernahkah Anda mengalami kesulitan ketika ingin menampilkan hasil perhitungan dari dua buah Field pada sebuah Form yang terdapat di sisi Client dari Aplikasi Web yang Anda bangun? Beruntunglah Anda jika membangun Aplikasi Web dengan PHPMaker, karena hal ini dapat diatasi dengan sangat mudah dan cepat.
Katakanlah proses perhitungan ini melibatkan tiga Field, masing-masing namanya (supaya lebih sederhana) A, B, dan C. Ketika Pengguna Aplikasi Web Anda mengetikkan nilai di TextBox A atau TextBox B, maka hasil perhitungan dari perkalian nilai A dan B akan ditampilkan di TextBox C.
Ingin tahu solusinya? Gampang! Cukup salin kode jQuery berikut ke dalam Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script pada project PHPMaker Anda:
$(document).ready(function() { $("#x_A, #x_B").keyup(function () { $("#x_C").val($("#x_A").val() * $("#x_B").val()); }); });
Perhatikan contoh kode barusan. Kita menggunakan event keyup milik jQuery, karena event ini ternyata lebih bagus dibandingkan event change. Event keyup langsung dieksekusi setiap kali Pengguna sedang mengetikkan satu karakter di TextBox A atau TextBox B. Sedangkan event change baru dieksekusi setelah kursor meninggalkan TextBox A atau TextBox B tersebut.
Untuk halaman Edit, maka Anda dapat menggunakan kode yang sama tadi, dari bagian Client Scripts -> Table-Specific -> Edit Page -> Startup Script project PHPMaker Anda.
Mudah sekali, bukan? 🙂
deny mengatakan
Mantaaaaaap, terima kasih..Pak, Sangat bermanfaat..
Masino Sinaga mengatakan
Sama-sama. 🙂
Muhsinin mengatakan
Pak, kenapa fungsi penjumlahan (sum) yang saya buat malah menampilakn “NaN” di field total?
Masino Sinaga mengatakan
parseInt() akan menghasilkan NaN jika nilai yang diproses tidak dapat di-parsing. Selain itu, parseInt digunakan untuk memparsing nilai yang bertipe Integer.
Jika tipe nilai yang akan diproses bukan Integer (misalnya Double), maka coba gunakan parseFloat().
Baca referensinya di sini.
Muhsinin mengatakan
Thanks Sir,
sudah saya define semua var menjadi ParseFloat() karena memang data type di DB yang saya gunakan adalah (Double), work fine as below:
Masino Sinaga mengatakan
Sama-sama. 🙂
ricky mengatakan
Maaf Pak, saya bingung mengenai pencarian rata-rata dari tiga field pada tabel pi_praktik. Adapun ketiga field tersebut adalah nilai_sist_lap, nilai_lkp_lap dan nilai_tata_tulis_lap. Ketika saya tuliskan di start up:
Mengapa program tersebut tidak berjalan sedemikian mestinya, apakah variabel tersebut harus dideklarasikan terlebih dahulu? mohon arahanya… terima kasih banyak…
Masino Sinaga mengatakan
Hm, bisa jadi. Coba dideklarasikan dahulu variabelnya seperti contoh saya di atas. Pastikan juga penulisan id elemen sudah benar (bersifat case-sensitive).
Surya mengatakan
Bang masino minta tolong donk, jika data diambil dari Select Option, contoh value =10, label = Juara Tingkat Kelas
Nah saya ingin menjumlahkan nilai value dari Select Option tersebut gimana yah, sementara menggunakan Text sudah berhasil, menggunakan fungsi keyup. Mungkin tidak dengan keyup juga ga papa asal jumlah bisa masuk ke fiel TOTAL di tabel, Terimakasih
Masino Sinaga mengatakan
Logikanya mirip dengan kode yang terdapat di artikel Mengaktifkan TextBox Saat ComboBox Terpilih di Aplikasi Web dari PHPMaker, di mana saat event change, Anda bisa mendapatkan value dari select option yang terpilih.
efendy mengatakan
tanya pak,,,
saya coba2 begini :
setelah digenerate ada kesalahan
misalkan diisi angka ternyata hasilnya (misal) 10 + 10 menjadi 1010 (bukan 20 tp angka diletakkan dibelakang saja )
tapi kalau tanda + diganti menjadi *, bisa benar 10*10 = 100
type data keduanya di mysql double
kenapa tanda + tidak berfungsi ya pak? terimakasih
Masino Sinaga mengatakan
Seharusnya begini (kalau masih belum benar, ganti parseInt menjadi parseFloat):
efendy mengatakan
terimakasih pak, betul sudah bisa.
saya ada pertanyaan lain seperti ini:
saya ada tabel berita:
beritaID
tgljam_berita (tgl ini terisi tgl jam berita disimpan, misalkan tgl 5 juni jam 10 pagi)
judul
isiberita
tgljam_tampil (berita akan tampil sesuai tgl yg telah diisi, misalkan tgl 12 juni jam 17 sore)
bagaimana caranya agar berita akan tampil pada saat tgl yg sudah ditentukan saja?
atau mungkin tabel dibuat menjadi 2?
– tabel 1
beritaID
tgljam_berita (tgl ini otomatis terisi tgl jam disimpan, misalkan tgl 5 juni jam 10 pagi)
namapenulis_berita
– tabel 2
isiberitaID
beritaID
judul
isiberita
tgljam_tampil (berita akan tampil sesuai tgl yg telah diisi, misalkan tgl 12 juni jam 17 sore)
demikian, terimakasih.
Masino Sinaga mengatakan
Tidak perlu membuat jadi dua tabel. Anda bisa cukup menggunakan satu tabel saja.
Untuk menampilkan berita sesuai dengan tanggal yang dijadwalkan, maka Anda tinggal menambahkan business-logic yang memeriksa apakah tanggal saat itu lebih besar atau sama dengan tanggal yang dijadwalkan, dan jika memenuhi kondisi, maka tampilkan berita tersebut.
Zaidi mengatakan
JQuery Scripts ini berhasil setiap kali nilai tambah pada field tersebut dan hasilnya terpapar pada browser, tapi bila saya klik tombol SAVE, Nilai tersebut tidak tersimpan.
Masino Sinaga mengatakan
Cek apakah ada error Javascript dari browser dengan menekan tombol [F12].
Nina Sawitri mengatakan
Tanya pak, saya ada coba-coba buat contoh program dengan phpmaker, dengan 2 tabel, 1 tabel mahasiswa, 1 lagi tabel nilai, untuk script dibawah ini kok tidak berfungsi di tabel detailnilai, padahal sudah buat tabel relasi/master detail untuk mahasiswa dengan tabel nilai, di bagian mana script ini ditambahkan agar berfungsi keyup detail nilai?
Mohon Bantuannya…
Masino Sinaga mengatakan
Coba baca kembali dengan teliti artikel di atas. Di situ sudah jelas dicantumkan lokasi script-nya.
usman mengatakan
Selamat Malam Pak, Numpang Tanya, saya ada coba source code di bawah ini add dan berjalan, tetapi kenapa Source Code Dibawah ini todak bisa berfungsi pada inline add atau grid add
klopun bisa dimana bisa diletakaan source code tersebut agar bisa berjalan di inline add dan grid add
Terima Kasih
Masino Sinaga mengatakan
Karena id elemen di halaman add berbeda dengan di halaman inline add atau grid add. Silahkan Anda cek id elemennya, dari View Page Source browser yang Anda gunakan.
usman mengatakan
Jadi solusinya gmn mas,sya kurang paham tentang elemen id yg dimaksud?
Masino Sinaga mengatakan
Baca lagi dengan teliti komentar saya di atas.
Rian mengatakan
Mas, mau tanya apa beda form input order dan order detail, klo yang di order pada lablenya ada bintangnya, sedangkan yang di master detail tidak ada bintanngya, apa yang membedakan, kenapa fungsi yang sama yang digunakan diform input order, tidak berfungsi di tabel master detail, pada saat dihubungkan. terima kasih.
Masino Sinaga mengatakan
Mungkin yang Anda maksud label bintang di bagian table Detail pada halaman Master/Detail Add dan Master/Detail Edit ya? Sebenarnya field-field yang bersifat mandatory tetap berfungsi sebagaimana mestinya, hanya saja label bintang atau required tersebut memang tidak muncul.
Solusinya, Anda bisa menggunakan code jQuery untuk menambahkan label bintang di field-field yang diinginkan.
aries mengatakan
Pak Masino Sinaga,
Jika saya ingin membuat tabel PERHITUNGAN program gaji pegawai sederhana misal : seperti perkalian penjumlahan dan lain lain dan program tsb saya SELIPKAN di program PHPMAKER apakah ada bedanya ? mksdnya apakah coding PHP murni dan PHPMAKER berbeda ? terima kasih
diselipkan maksudnya adalah dimasukan dalam SERVER EVENT.
Masino Sinaga mengatakan
Jelas berbeda.
Fendi Oviyanto mengatakan
Berhubung saya masih pemula/newbie dalam PHPmaker. saya mau menannyakan kasus perhitungan dalam PHPmaker pak. Misal dalam kasus seperti ini:
Table Account
– Id (int5) primary key
– Nama (varchar20)
– point (int10)
secara default PHPmaker menggenerate CRUD dan table dalam list menunya, misal saya membentuk menu baru dan hanya berisi form isian point/angka yang harus diinput yang nantinya akan menjumlahkan otomatis isi point table account dengan inputan yang baru dan kemudian disave kembali ke table account bagaimana ya pak.
Misal
1. Wardana Point 10, kemudian menu inputan point mengisi 20, data otomatis tersimpan wardana point menjadi 30,
Masino Sinaga mengatakan
Anda bisa menggunakan server event Row_Inserting dan Row_Updating (tergantung kebutuhan Anda).
Silahkan baca dan pelajari topik Server Events and Client Scripts dari menu Help PHPMaker. Semoga berhasil.
Milver mengatakan
Good afternoon, this feature has some restriction to version 10.0.1 , it does not work for me.
Code:
Client Script -> Table-Specific -> Add/Copy Page -> Statup Script
Masino Sinaga mengatakan
1. What do you mean it does not work?
2. Did you see any Javascript error message from your browser? (Press [F12] )
Milver mengatakan
Masino Halo, saya membuat video untuk menunjukkan secara rinci masalah Saya mengalami.
http://screencast.com/t/nyeYBvYf
Dan dari sekarang terima kasih, dengan kembali. Dan maaf untuk terjemahan, I am Brasil dan saya menggunakan “google translator”
Masino Sinaga mengatakan
Hi Milver,
Of course it does not work, because the page you are using in that video above involves the Grid-Add in the Master/Detail Add Page, while the code in my article above should be applied in a single Add Page.
I you want to obviously need the solution that similar to your case, then simply download Stock Inventory Management project file from I Love PHPMaker site.. Please note that you have to had already signed-up your membership in that site first in order to download that project.
Milver mengatakan
If I sign ($ 150 Then $ 75 per year) I will have access to sites below? http://www.ilovephpmaker.com/
http://www.phpmakerlearning.com/
If so, you would have to give a discount? Because the dollar be 4x the Brazilian currency. but thank you for the feedback.
Masino Sinaga mengatakan
Each site has its own sign-up method. Sorry, no discount at the moment. Hope that helps.
Milver mengatakan
Okay, I’ll sign, thank you
Milver mengatakan
I made the payment, realized the record, but did not get the email with the password
Username: milver.silva@gmail.com
Masino Sinaga mengatakan
Hi Milver,
Thanks for signing-up at ILovePHPMaker.com.
I’ve just sent your credentials info to your email. Please check your email.
Milver mengatakan
It took a while to get the password on my email, but arrived, thank you
Masino Sinaga mengatakan
You’re welcome. My apologize for the inconvenience.
indra Dwi Budi Rahadian mengatakan
Pagi Mas Masino,
TextField “Harga” yang mau saya kalkulasikan sudah memiliki fungsi Auto thousand sparator, sehingga menghasilkan “Nan” pada TextField “total” ketika dikalikan dengan “Jumlah”.
Mohon bantuannya…,terimakasih sebelumnya.
Masino Sinaga mengatakan
Jika Anda menggunakan parseFloat atau parseInt, maka dapat mengembalikan NaN jika karakter pertama dari string tidak dapat dikonversi ke nilai angka. Jadi, Anda harus menangani kemungkinan jika nilai tersebut akan mengembalikan NaN, maka isi dengan nilai 0. Silahkan Google javascript nan.
indra Dwi Budi Rahadian mengatakan
Terimakasih Mas, sudah berhasil…
Masino Sinaga mengatakan
Sama-sama.
pujiarahman mengatakan
Pak Masino
jika ingin ditambah pph 10 % penambahan serta pembagiannya seperti apa pak,
trims
Masino Sinaga mengatakan
Download aja file demo project yang disediakan oleh PHPMaker. Lihat contohnya dari menu/table orderdetails.
pujiarahman mengatakan
oke solved pak masino trims
Masino Sinaga mengatakan
Sama-sama.
Eka Dalas Pangestu mengatakan
gimana mas caranya kalo boleh liat
Tedi mengatakan
Sangat membantu sekali Om MAsino .. terimakasih banyak.
jika muncul NAN di penjumlahan ke dua apa yang harus saya lakukan ??
$(document).ready(function() {
$(“#x_VOLUME_1, #x_VOLUME_2, #x_VOLUME_3, #x_VOLUME_4, #x_VOLUME_2, #x_HARGA_SATUAN”).keyup(function () {
var vol1 = parseInt($(‘#x_VOLUME_1’).val());
var vol2 = parseInt($(‘#x_VOLUME_2’).val());
var vol3 = parseInt($(‘#x_VOLUME_3’).val());
var vol4 = parseInt($(‘#x_VOLUME_4’).val());
var hsat = parseInt($(‘#x_HARGA_SATUAN’).val());
var total_volume = vol1 * vol2 * vol3 * vol4;
var total_seluruh = total_volume * hsat
$(“#x_TOTAL_VOLUME”).val(total_volume);
$(“#x_TOTAL_HARGA”).val(total_seluruh);
});
});
Masino Sinaga mengatakan
Sudah dijawab di komentar yang ini: http://www.masinosinaga.com/phpmaker/menampilkan-hasil-perhitungan-pada-sisi-client-di-aplikasi-web-dari-phpmaker/#comment-1063
tedi mengatakan
siip.. berhasil bang untuk rumus nya. tetapi ketika akan disimpan ada keterangan Incorrect floating point number, mohon bantuannya
Masino Sinaga mengatakan
Kalau pakai setting Indonesia untuk Regional Setting di PHPMaker v2017, pastikan menggunakan karakter koma (,) sebagai pemisah desimal.
tedi mengatakan
Its done … makasih banyak bang Masino .. GBU …
Masino Sinaga mengatakan
Sama-sama.
Teguh mengatakan
Sy sdh menuliskan script spt contoh diatas, tp tdk ada efek apapun, apa yg salah pak
Masino Sinaga mengatakan
Gak tau saya. 😀
Indra AK mengatakan
Mas, dari hasil perkalian diatas saya coba ubah menjadi pengurangan, hasilnya sukses cuma bingungnya bagaimana agar hasil di C tersebut diambilhanya 2 digit dibelakang koma, dimana hasil C tercatat 18.367346938775512. Saya ingin agar terecord 18.36.
atas bantuannya saya ucapkan terima kasih
Masino Sinaga mengatakan
Silahkan Google javascript round decimal 2 digits.
ani ros mengatakan
Penjumlahan otomatis di field kok tidak bisa ya jika menggunakan format autonumeric.
Saya coba menjumlahkan tapi tidak berhasil.
Masino Sinaga mengatakan
Betul, karena memang ada keterbatasan fungsi autonumeric tersebut. Untuk itulah saya membuat extension khusus untuk mendukung fungsi auto format numeric saat data sedang diketik dan bisa otomatis langsung menjumlahkan hasilnya meskipun nilainya mengandung karakter pemisah.
Langsung saja ke sini: PHPMaker 2018 Extensions – MasinoAutoFormatNumber14.
Untuk yang versi 2019 sedang saya bikin dan belum sempat saya rilis, tapi kalau memang sungguh-sungguh berminat, Anda bisa membelinya langsung ke saya.
Nizhra Izdaharia mengatakan
Terimakasih kak, informasinya sangat membantu saya,
perkenalkan saya Nizhra Izdaharia dari ISB Atma Luhur
Eka Dalas Pangestu mengatakan
Apakah contoh diatas bisa diterapkan pada Varchar pak masino
contoh saya ada Field Number dan No PRF
jadi saya logic nya kalo Number diketik No PRF juga ikut auto mengisi pak
Apakah bisa ya seperti itu ?
Terima Kasih
Masino Sinaga mengatakan
Untuk perhitungan disarankan menggunakan tipe numerik.