Mengenal Client Scripts Di Phpmaker

Sama mirip Server Events yang sudah kita bahas di gesekan pena saya sebelumnya, Client Scripts juga merupakan fitur di PHPMaker yang memungkinkan Web Developer menambahkan business logic di Aplikasi Web yang dihasilkannya. Web Developer cukup hanya menuliskan beberapa baris kode saja dari dalam project PHPMaker. Artinya, mereka tidak perlu memodifikasi kode pada file script yang sudah dihasilkan oleh PHPMaker. Mereka juga tidak perlu memodifikasi Template yang digunakan oleh PHPMaker.

Ada beberapa hal yang membedakan antara Server Events dan Client Scripts. Pertama, ialah lokasi atau tempat pengeksekusiannya. Kalau Server Events dijalankan di sisi server, maka Client Scripts akan dijalankan di sisi client; yang dalam hal ini di browser yang digunakan oleh Pengguna Aplikasi Web. Sesuai dengan namanya: Client Scripts, yang artinya Scripts yang dijalankan di sisi Client.

Kedua, kode yang terdapat di belahan Server Events ialah kode PHP. Sedangkan kode yang terdapat di belahan Client Scripts ialah kode Javascript atau jQuery. Saya sendiri cenderung dan lebih senang menggunakan kode jQuery. Alasannya sebab ialah sintaksnya lebih sederhana/simpel; sama mirip jargonnya: Write Less, Do More.

Sama halnya dengan Server Events, maka Client Scripts di PHPMaker juga disusun sesuai dengan kerangka kerja (framework) Web Developer. Client Scripts melekat kepada object Table atau View di dalam project PHPMaker. Hal ini pulalah yang juga menjadikan kita sebagai Web Developer mampu memahami sebuah Aplikasi Web yang dihasilkan oleh PHPMaker menjadi jauh lebih simpel dan cepat, sebab ialah tidak perlu melihat kode ke dalam file-file .php yang sudah di-generate oleh PHPMaker.

Biasanya, Client Scripts sering digunakan untuk menambahkan business logic di sebuah fungsi atau halaman Aplikasi Web. Misalnya, saat Pengguna Aplikasi Web yang Anda bangun sedang menginput data di sebuah Form, maka control TextBox yang bernama Nama_Koneksi akan aktif (enabled) hanya jikalau nilai yang terpilih pada control ComboBox Jenis_Koneksi yang berada di atasnya ialah Ya. Sebaliknya, jikalau nilai yang terpilih Tidak, maka TextBox tadi menjadi tidak aktif (disabled).

Beberapa acuan kode yang terdapat di belahan Client Scripts PHPMaker mampu dilihat melalui beberapa artikel yang sudah saya tulis berikut ini:

• Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker
  

  $(document).ready(function() {
      // Kondisi dikala Form di-load
      if($("input[name='x_AndaMhs[]']:checked").val()){
          $('#x_NamaMhs').removeAttr('disabled');
      } else {
          $('#x_NamaMhs').attr('disabled','disabled');
      }
      // Kondisi dikala CheckBox diklik
      $('input:checkbox[name="x_AndaMhs\[\]"]').click(function() {
          if (!$(this).is(':checked')) {
              $('#x_NamaMhs').attr('disabled','disabled');
              $('#x_NamaMhs').val('');
          } else {
              $('#x_NamaMhs').removeAttr('disabled');
              $('#x_NamaMhs').focus();
          }
      });
  });

  
  





• Mengaktifkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker
  

  $(document).ready(function() {
      // Kondisi dikala Form di-load
      if($('input[name=x_AndaMhs]:radio:checked').val()=="Y"){
          $('#x_NamaMhs').removeAttr('disabled');
      } else {
          $('#x_NamaMhs').attr('disabled','disabled');
      }
      // Kondisi dikala Radio Button diklik
      // $('input[type="radio"]').click(function(){
      $('input[name=x_AndaMhs]:radio').click(function(){
          if($(this).attr("value")=="N"){
              $('#x_NamaMhs').attr('disabled','disabled');
              $('#x_NamaMhs').val('');
          } else {
              $('#x_NamaMhs').removeAttr('disabled');
              $('#x_NamaMhs').focus();
          }
      });
  });

  
  





• Mengaktifkan TextBox Saat ComboBox Terpilih di Aplikasi Web dari PHPMaker
  

  $(document).ready(function() {
      // Kondisi dikala Form di-load
      if ($("#x_AndaMhs").val() == "Y") {
          $('#x_NamaMhs').removeAttr('disabled');
      } else {
          $('#x_NamaMhs').attr('disabled','disabled');
      }
      // Kondisi dikala ComboBox (Select Option) dipilih nilainya
      $("#x_AndaMhs").change(function() {
          if (this.value == "N") {
              $('#x_NamaMhs').attr('disabled','disabled');
              $('#x_NamaMhs').val('');
          } else {
              $('#x_NamaMhs').removeAttr('disabled');
              $('#x_NamaMhs').focus();
          }
      });
  });

  
  





• Menampilkan Hasil Perhitungan pada Sisi Client di Aplikasi Web dari PHPMaker
  

  $(document).ready(function() {
      $("#x_A, #x_B").keyup(function () {
         $("#x_C").val($("#x_A").val() * $("#x_B").val());   
      });
  });

  
  

Sumber https://ilmukomputer.org/