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

  1. Mengenal User Code di PHPMaker
  2. Mengenal Custom Validation Function di PHPMaker
  3. Menyisipkan Business Logic Saat Record Ditambah di Aplikasi Web dari PHPMaker
  4. Mengenal Server Events di PHPMaker
  5. PHPMaker = {PHP Code Generator + PHP Framework + CSS dan Javascript Framework}
  6. Mengapa PHPMaker Bisa Men-generate Kode PHP dengan Sangat Cepat?
  7. Mengenal Custom Templates di PHPMaker
  8. Prinsip-prinsip Dasar dalam Membangun Aplikasi Web dengan PHPMaker
  9. Mengenal Pengaturan Return Pages pada Table Setup di PHPMaker
  10. Mengenal Pengaturan Edit pada Table Setup di PHPMaker
  11. PHPdetail – Mengenal Function
  12. Menginstall FTP Server pada Debian 6.0 dan Menggunakan Aplikasi FTP Server di PC Client (Win 2003)
  13. Mengenal Fitur Sinkronisasi di PHPMaker
  14. Meng-override Style di Aplikasi Web yang Dihasilkan oleh PHPMaker
  15. Mengenal Extensions di PHPMaker
  16. Mengenal User Login Options di PHPMaker
  17. Mencari Karakter Tertentu dalam Textbox
  18. Mengenal Pengaturan Multi-Page pada Table Setup di PHPMaker
  19. Mengenal Pengaturan Add Page pada Table Setup di PHPMaker
  20. Mengenal Theme di Aplikasi Web yang Dihasilkan oleh PHPMaker