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? 🙂
Mantaaaaaap, terima kasih..Pak, Sangat bermanfaat..
Sama-sama. 🙂
Pak, kenapa fungsi penjumlahan (sum) yang saya buat malah menampilakn “NaN” di field total?
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.
Thanks Sir,
sudah saya define semua var menjadi ParseFloat() karena memang data type di DB yang saya gunakan adalah (Double), work fine as below:
Sama-sama. 🙂
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…
Hm, bisa jadi. Coba dideklarasikan dahulu variabelnya seperti contoh saya di atas. Pastikan juga penulisan id elemen sudah benar (bersifat case-sensitive).
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
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.
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
Seharusnya begini (kalau masih belum benar, ganti parseInt menjadi parseFloat):
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.
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.
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.
Cek apakah ada error Javascript dari browser dengan menekan tombol [F12].
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…
Coba baca kembali dengan teliti artikel di atas. Di situ sudah jelas dicantumkan lokasi script-nya.
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
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.
Jadi solusinya gmn mas,sya kurang paham tentang elemen id yg dimaksud?
Baca lagi dengan teliti komentar saya di atas.
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.
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.
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.
Jelas berbeda.
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,
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.
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
1. What do you mean it does not work?
2. Did you see any Javascript error message from your browser? (Press [F12] )
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”
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.
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.
Each site has its own sign-up method. Sorry, no discount at the moment. Hope that helps.
Okay, I’ll sign, thank you
I made the payment, realized the record, but did not get the email with the password
Username: milver.silva@gmail.com
Hi Milver,
Thanks for signing-up at ILovePHPMaker.com.
I’ve just sent your credentials info to your email. Please check your email.
It took a while to get the password on my email, but arrived, thank you
You’re welcome. My apologize for the inconvenience.
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.
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.
Terimakasih Mas, sudah berhasil…
Sama-sama.
Pak Masino
jika ingin ditambah pph 10 % penambahan serta pembagiannya seperti apa pak,
trims
Download aja file demo project yang disediakan oleh PHPMaker. Lihat contohnya dari menu/table orderdetails.
oke solved pak masino trims
Sama-sama.
gimana mas caranya kalo boleh liat
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);
});
});
Sudah dijawab di komentar yang ini: http://www.masinosinaga.com/phpmaker/menampilkan-hasil-perhitungan-pada-sisi-client-di-aplikasi-web-dari-phpmaker/#comment-1063
siip.. berhasil bang untuk rumus nya. tetapi ketika akan disimpan ada keterangan Incorrect floating point number, mohon bantuannya
Kalau pakai setting Indonesia untuk Regional Setting di PHPMaker v2017, pastikan menggunakan karakter koma (,) sebagai pemisah desimal.
Its done … makasih banyak bang Masino .. GBU …
Sama-sama.
Sy sdh menuliskan script spt contoh diatas, tp tdk ada efek apapun, apa yg salah pak
Gak tau saya. 😀
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
Silahkan Google javascript round decimal 2 digits.
Penjumlahan otomatis di field kok tidak bisa ya jika menggunakan format autonumeric.
Saya coba menjumlahkan tapi tidak berhasil.
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.
Terimakasih kak, informasinya sangat membantu saya,
perkenalkan saya Nizhra Izdaharia dari ISB Atma Luhur
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
Untuk perhitungan disarankan menggunakan tipe numerik.