Mengenal Client Scripts di PHPMaker

Author: · Published: August 27, 2014 · Category: Pemrograman PHP 

Sama seperti Server Events yang sudah kita bahas di tulisan 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, adalah 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 bagian Server Events adalah kode PHP. Sedangkan kode yang terdapat di bagian Client Scripts adalah kode Javascript atau jQuery. Saya sendiri cenderung dan lebih senang menggunakan kode jQuery. Alasannya karena sintaksnya lebih sederhana/simpel; sama seperti 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 menyebabkan kita sebagai Web Developer dapat memahami sebuah Aplikasi Web yang dihasilkan oleh PHPMaker menjadi jauh lebih mudah dan cepat, karena 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, ketika Pengguna Aplikasi Web yang Anda bangun sedang menginput data di sebuah Form, maka control TextBox yang bernama Nama_Koneksi akan aktif (enabled) hanya jika nilai yang terpilih pada control ComboBox Jenis_Koneksi yang berada di atasnya adalah Ya. Sebaliknya, jika nilai yang terpilih Tidak, maka TextBox tadi menjadi tidak aktif (disabled).

Beberapa contoh kode yang terdapat di bagian Client Scripts PHPMaker dapat dilihat melalui beberapa artikel yang sudah saya tulis berikut ini:

  • Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker
    $(document).ready(function() {
        // Kondisi saat Form di-load
        if($("input[name='x_AndaMhs[]']:checked").val()){
            $('#x_NamaMhs').removeAttr('disabled');
        } else {
            $('#x_NamaMhs').attr('disabled','disabled');
        }
        // Kondisi saat 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 saat Form di-load
        if($('input[name=x_AndaMhs]:radio:checked').val()=="Y"){
            $('#x_NamaMhs').removeAttr('disabled');
        } else {
            $('#x_NamaMhs').attr('disabled','disabled');
        }
        // Kondisi saat 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 saat Form di-load
        if ($("#x_AndaMhs").val() == "Y") {
            $('#x_NamaMhs').removeAttr('disabled');
        } else {
            $('#x_NamaMhs').attr('disabled','disabled');
        }
        // Kondisi saat 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());   
        });
    });

Related Articles

    None Found