Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Menampilkan Hasil Perhitungan pada Sisi Client di Aplikasi Web dari PHPMaker

Menampilkan Hasil Perhitungan pada Sisi Client di Aplikasi Web dari PHPMaker

oleh 64 Komentar

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? 🙂

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, ilovephpmaker.com, dan phpmakerprojects.com.

Komentar

  2. Pak, kenapa fungsi penjumlahan (sum) yang saya buat malah menampilakn “NaN” di field total?

    $(document).ready(function() { 
  $("#x_eor_material,#x_eor_labour").keyup(function(){
     var sum = parseInt("#x_eor_material") + parseInt("#x_eor_labour");            
     $("#x_eor_total").val(sum);        
  });    
});
    Balas

    • 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.

      Balas

      • Thanks Sir,
        sudah saya define semua var menjadi ParseFloat() karena memang data type di DB yang saya gunakan adalah (Double), work fine as below:

        $(document).ready(function() {     
    $("#x_eor_wh,#x_eor_hour,x_eor_material,#x_eor_labour").keyup(function () {
    var MAN = $("#x_eor_hour");
    MAN = parseFloat(MAN);
    var HOU = $("#x_eor_hour");
    HOU = parseFloat(HOU);
    var MAT = $("#x_eor_material").val();
    MAT = parseFloat(MAT);
    var LAB = $("#x_eor_labour").val();
    LAB = parseFloat(LAB);
    var TOT = $("#x_eor_total");
    TOT = parseFloat(TOT);
    
       $("#x_eor_labour").val(MAN * HOU);
       $("#x_eor_total").val(MAT + LAB);        
   });  
});
        Balas

  3. 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:

    $(document).ready(function() {
    $("#x_pi_ujian_nilai_sist_lap, #x_pi_ujian_nilai_lkp_lap, #x_pi_ujian_nilai_tata_tulis_lap").keyup(function () {
        var nlp = (parseFloat("#x_pi_ujian_nilai_sist_lap") + parseFloat("#x_pi_ujian_nilai_lkp_lap") + parseFloat("#x_pi_ujian_nilai_tata_tulis_lap"))/3;               
        $("#x_nilai_laporan").val(nlp);
    });
});

    Mengapa program tersebut tidak berjalan sedemikian mestinya, apakah variabel tersebut harus dideklarasikan terlebih dahulu? mohon arahanya… terima kasih banyak…

    Balas

  4. 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

    Balas

  5. tanya pak,,,
    saya coba2 begini :

    $(document).ready(function() {
	$("#x_harga_paket, #x_biaya_lain").keyup(function () {
	   $("#x_total_harga").val($("#x_harga_paket").val() + $("#x_biaya_lain").val());    
	}); 
});

    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

    Balas

    • Seharusnya begini (kalau masih belum benar, ganti parseInt menjadi parseFloat):

      $(document).ready(function() {
    $("#x_harga_paket, #x_biaya_lain").keyup(function () {
       var harga_paket = parseInt($('#x_harga_paket').val());
       var biaya_lain = parseInt($('#x_biaya_lain').val());
       var total_harga = harga_paket + biaya_lain;
       $("#x_total_harga").val(total_harga);    
    }); 
});
      Balas

      • 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.

        Balas

        • 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.

          Balas

      • 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.

        Balas

  6. 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?

    $(document).ready(function() {
    $("#x_NilaiMhs1, #x_NilaiMhs2").keyup(function () {
       $("#x_TotalNilai").val($("#x_NilaiMhs1").val() * $("#x_NilaiMhs2").val());    
    }); 
});

    Mohon Bantuannya…

    Balas

  7. 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.

    Balas

    • 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.

      Balas

  8. 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.

    Balas

  9. 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,

    Balas

    • 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.

      Balas

  10. 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

    $(document).ready(function() {
    $("#x_PRODUTO, #x_QUANTIDADE").keyup(function () {
       $("#x_VALOR").val($("#x_QUANTIDADE").val() * $("#x_PRECOUNITARIO").val());    
    });             
});
    Balas

  11. 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.

    Balas

  13. 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);
    });
    });

    Balas

  15. 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

    Balas

    • 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.

      Balas

  18. 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

    Balas

Trackbacks

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

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