Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker
Mengaktifkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker
Menyisipkan Kode Setelah Akun Pengguna Diaktivasi di Aplikasi Web dari PHPMaker

Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker

Sel, 8 Juli 2014 oleh Masino Sinaga 28 Komentar

Tidak terasa sudah lebih dari 100 artikel saya tulis di situs ini membahas betapa dahsyat sekaligus fleksibelnya PHPMaker sebagai tools dalam membangun Aplikasi Web. Dahsyat, karena hanya dalam hitungan detik atau menit saja, semua file script untuk Aplikasi Web Anda dapat dihasilkan. Fleksibel, karena Anda sebagai Web Developer cukup hanya menambahkan beberapa baris (baca: sedikit) kode saja ke bagian Server Events untuk menerapkan business-logic tertentu melalui file project PHPMaker.

Semuanya itu dapat dilakukan tanpa harus memodifikasi file script yang sudah dihasilkan. Anda juga tidak perlu sama sekali memodifikasi file template PHPMaker. Fleksibilitas yang dimiliki oleh PHPMaker jelas dapat meningkatkan produktivitas kerja Web Developer. Nah, di artikel ini kita masih akan terus membahas fleksibilitas yang dimiliki oleh PHPMaker. Kali ini tidak hanya menggunakan Server Events, tapi juga melalui fitur Client Scripts yang sudah disediakan dari dalam file project PHPMaker.

Apa itu Client Scripts? Client Scripts adalah skrip yang dijalankan di sisi client; yang dalam hal ini di sisi browser. Tapi bukan berarti kita menyuruh Pengguna menambahkan skrip di browser yang mereka gunakan. Bukan itu artinya. Yang dimaksud dengan Client Scripts di PHPMaker adalah, skrip yang bisa ditambahkan oleh Web Developer melalui project PHPMaker, di mana skrip ini nantinya akan dieksekusi di sisi browser yang digunakan oleh client ketika mereka mengakses Aplikasi Web yang kita buat dengan PHPMaker. Cukup jelas maknanya, bukan?

Mungkin di antara Anda ada yang bertanya, mengapa PHPMaker menyediakan fitur Client Scripts? Bukankah Server Events saja sudah cukup seperti yang selama ini sudah saya bahas di sebagian besar artikel saya di situs ini? Jawabannya adalah, karena tidak semua business-logic harus dieksekusi di sisi server. Beberapa business-logic tertentu dapat dieksekusi cukup hanya dari sisi browser yang digunakan oleh Pengguna. Itulah mengapa kita juga membutuhkan fitur Client Scripts untuk menaruh kode yang mewakili business-logic yang dapat dijalankan dari sisi browser.

Contoh yang paling sering terjadi di sebuah Aplikasi Web adalah kira-kira seperti ini. Katakanlah ketika seorang Pengguna memberi tanda centang pada elemen CheckBox yang mewakili field AndaMhs di sebuah Form untuk menginput data, maka elemen Textbox yang mewakili field NamaMhs di bawahnya akan menjadi aktif atau enabled sekaligus kursor mouse akan fokus kepadanya. Sebaliknya, jika CheckBox tadi tidak tercentang, maka kondisi TextBox tadi menjadi non-aktif atau disabled dan segala teks yang ada di dalamnya akan dihapus atau dikosongkan.

Nah, untuk menerapkan business-logic seperti itu, maka kita harus menggunakan fitur Client Scripts di PHPMaker. Cukup taruh kode jQuery ini ke lokasi berikut di dalam project PHPMaker Anda: Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script (pastikan bahwa sebelumnya Anda sudah memilih Table yang tepat dari panel Database di sebelah kiri dari project PHPMaker Anda untuk menambahkan kode ini pada Table yang seharusnya):

$(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();
		}
	});
});

Ada beberapa hal penting yang sebaiknya Anda ketahui mengenai contoh kode barusan.

  1. Dalam contoh tadi kita mengasumsikan bahwa hanya ada dua field yang terlibat dalam business-logic tersebut. Pertama field AndaMhs yang tipe-nya ENUM dan memiliki nilai pilihan Y dan N, sedangkan yang kedua field NamaMhs yang tipe-nya VARCHAR(50). Sementara Database yang kita gunakan dalam hal ini adalah MySQL (mendukung tipe data ENUM).
  2. PHPMaker secara standar akan otomatis mengkonversi field AndaMhs menjadi elemen CheckBox di Aplikasi Web yang dihasilkan olehnya. Mengapa? Karena field tersebut mengandung data pilihan Y dan N. PHPMaker akan men-generate property name dan id milik elemen CheckBox tadi masing-masing menggunakan nama yang sama sebagai sebuah array, yaitu: AndaMhs[] (perhatikan ada karakter [] di bagian akhir!). Jadi, dalam hal ini tidak menggunakan AndaMhs.
  3. PHPMaker selalu menambahkan awalan (prefix) x_ di setiap property name dan id dari setiap Field, dan diikuti dengan nama Field-nya. Dari kedua contoh Field tadi, maka masing-masing akan berubah menjadi x_AndaMhs[] dan x_NamaMhs. Untuk keperluan penulisan kode di bagian Client Scripts, maka pastikan Anda selalu menyertakan prefix tadi.
  4. Ada dua kondisi yang harus ditangani di contoh tadi. Pertama, kondisi saat Form pertama kali dimuat (di-load), dan yang kedua saat elemen CheckBox diklik oleh Pengguna (ditandai dengan komentar pada kode tadi). Artinya, kondisi pertama dapat digunakan untuk menentukan kondisi awal kedua Field tersebut secara standar (default) saat Form dimuat, yang dalam hal ini tergantung kepada nilai default di tabel yang bertalian. Sedangkan kode yang berada di bawah kondisi yang kedua dapat Anda gunakan saat event click terjadi pada elemen CheckBox.
  5. Kita menggunakan Startup Script karena PHPMaker akan menempatkan kode itu pada bagian bawah dari halaman Add. Mengapa? Karena kode jQuery atau Javascript yang ditempatkan di bagian bawah halaman akan lebih cepat dimuat oleh browser. Sebagai informasi juga, contoh kode itu telah berhasil dicoba dengan menggunakan library jquery v1.11.0.
  6. Anda tidak perlu repot-repot lagi meng-include--kan deklarasi skrip jQuery tadi di bagian atas Aplikasi Web. Mengapa? Karena sejak versi 9, PHPMaker sudah otomatis menyertakan pendeklarasian skrip jQuery di bagian header dari Aplikasi Web yang di-generate olehnya. Artinya, PHPMaker lebih menyarankan Anda sebagai Web Developer untuk menggunakan kode jQuery daripada Javascript melalui fitur Client Scripts.
  7. Kode di atas juga bisa langsung Anda gunakan di Form/halaman Edit. Cukup dengan menyalinnya ke lokasi: Server Events -> Table-Specific -> Edit Page -> Startup Script.

Dengan menggunakan fitur Client Scripts, maka Anda sebagai Web Developer dapat menerapkan business-logic yang dijalankan di sisi browser. Semua kode yang Anda tambahkan di fitur ini akan disimpan di dalam file project PHPMaker. Sekali lagi, Anda tidak perlu memodifikasi file script yang sudah dihasilkan oleh PHPMaker.

Karena kode tersebut disimpan di dalam file project PHPMaker, maka Anda dapat mengelola dan memahami kode tersebut dengan mudah di waktu mendatang ketika file project tersebut dibuka kembali melalui PHPMaker. Mengapa? Karena kode tersebut akan ditampilkan dengan pola berbasiskan object Table di dalam file project PHPMaker Anda. Bandingkan jika Anda harus membuka satu per satu file script di sisi Aplikasi Web yang jumlahnya sangat banyak itu!

Betapa dahsyat dan fleksibel-nya PHPMaker, bukan? 🙂

Ditempatkan di bawah: PHPMaker Ditag dengan:attr, checked, Client Scripts, focus, jQuery, PHPMaker Indonesia, removeAttr, Startup Script, Tutorial PHPMaker

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.

Mengaktifkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker
Menyisipkan Kode Setelah Akun Pengguna Diaktivasi di Aplikasi Web dari PHPMaker

Komentar

  1. Bahrian mengatakan

    Rab, 9 Juli 2014 pada 9:03 am

    Bisa di aplikasikan master.. mantap.. =D
    Tapi bagaimana kalo Checkboxnya diganti menjadi Radio button ??
    Radio nya jadi ada dua dengan value Yes dan No.

    Saya sudah coba-coba, dan coba pelajari juga JQuery dari pencarian dengan google.
    Dan sekali lagi gagal tuk menerapkan seperti checkbox.

    Padahal kalau diperhatikan secara logika, bisa diterapkan.. Secara kode, ternyata berbeda..

    Bisa membantu dengan contoh Master??? Thanks.. =D

    Balas
    • Masino Sinaga mengatakan

      Rab, 9 Juli 2014 pada 10:03 am

      Sebelum Anda tanya, saya sudah duluan mempublikasikan artikel mengenai contoh kode yang menggunakan Radio Button tadi pagi sekitar jam 8.34. Silahkan lihat artikel yang saya terbitkan hari ini tanggal 9 Juli 2014, atau langsung klik link ke artikel tersebut pada bagian Lacakbalik di bawah komentar ini.

      Balas
      • Bahrian mengatakan

        Kam, 10 Juli 2014 pada 8:40 am

        Sip Master.. cek TKP.. =D

        Balas
  2. Herman mengatakan

    Rab, 9 Juli 2014 pada 2:30 pm

    Pak klo yang dijelaskan ini textboxnya tidak aktif /disable, bagaimana penulisan scriptnya apabila checkboxnya dicentang hasilnya Label dan Textbox ke hidden / tidak terlihat.

    terima kasih

    Balas
    • Masino Sinaga mengatakan

      Rab, 9 Juli 2014 pada 3:07 pm

      Sabar ya. Artikel mengenai hal itu akan saya rencanakan terbit dua hari lagi, tepatnya hari Jumat, 11 Juli 2014. 😉

      Balas
      • herman mengatakan

        Rab, 9 Juli 2014 pada 8:18 pm

        Baik Pak..
        terima kasih

        Balas
        • Masino Sinaga mengatakan

          Jum, 11 Juli 2014 pada 10:16 am

          Artikelnya sudah terbit hari ini. Silahkan klik link berikut: Menampilkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker.

          Balas
  3. agus mengatakan

    Kam, 18 Desember 2014 pada 2:45 pm

    Bagaimana caranya jika suatu textbox diisi kode pegawai secara otomatis textbox nama akan terisi nama pegawai sesuai dengan kode pegawai yang diinputkan pada textbox kode pegawa. Mohon pencerahannya, terima kasih

    Balas
    • Masino Sinaga mengatakan

      Kam, 18 Desember 2014 pada 3:29 pm

      Di PHPMaker tersedia fitur Auto-fill yang dapat mengisi Textbox lain sesuai dengan data yang ditentukan di control lain.

      Silahkan Anda pelajari dan coba sendiri dengan membaca topik Field Setup -> Using Lookup Table for Edit Tag (Text/Radio/Checkbox/Select) dari menu Help di dalam aplikasi PHPMaker.

      Balas
  4. Dimara Kusuma Hakim mengatakan

    Sen, 28 September 2015 pada 5:55 am

    terima kasih atas petunjuknya, berhasil saya aplikasikan 🙂

    ini script saya di Startup Script:

    $("input[name='x_N2_nama_ayah[]']").click(function() {
        if (this.checked) { // Checkbox is checked
            // Do something
            //alert("checked");   
            $('#x_N2_tempat_lahir_ayah').attr('disabled','disabled');
    
        } else { // Not checked
            // Do something else
            //alert("not checked");   
        }                                 
    });
    
    Balas
    • Masino Sinaga mengatakan

      Sen, 28 September 2015 pada 11:13 am

      Sama-sama.

      Balas
  5. Amir mengatakan

    Rab, 30 Januari 2019 pada 2:07 pm

    Bagaimana jika yang ditampilkan berupa checkbox, misal database Lantai 1 > Ruang A & Ruang B, Lantai 2 > Ruang C & Ruang D dan Lantai 3 > Ruang E & Ruang F, Field Lantai berupa checkbox dan Field Ruang berupa checkbox juga?

    Balas
    • Masino Sinaga mengatakan

      Rab, 30 Januari 2019 pada 3:42 pm

      Tinggal disesuaikan saja sesuai kebutuhan.

      Balas
  6. raden mengatakan

    Kam, 4 Juli 2019 pada 11:57 pm

    Permisi, saya mau tanya bagaimana cara menampilkan data yang telah di centang pada checkbox untuk ditampilkan lagi pada halaman yang lain?

    contohnya di halaman masukkan bahan, pengguna memilih bahan dengan cara klik pada check box

    kemudian bergerak ke halaman masakan ada kolom bertuliskan “bahan yang telah anda masukkan adalah…” nah isi dari kolom tersebut yaitu bahan yang telah tercentang di checkbox di halaman masukkan bahan tadi.

    tolong kasih tau kodingnya dong, terimakasih banyak

    Balas
    • Masino Sinaga mengatakan

      Jum, 5 Juli 2019 pada 11:52 am

      Sepertinya sudah pernah dibahas di Forum Diskusi PHPMaker. Coba cek di sini. Semoga dapat membantu.

      Balas
  7. Rijal mengatakan

    Sel, 14 April 2020 pada 1:18 pm

    kalau kondisi nya antar Checkbox bagaimana ya bang Masino ?
    misal kan :
    Field A = Checkbox
    Field B = Checkbox
    Field C = Textbox
    hasil yang diharapkan, ketika “Field A” di Centang –> “Field B” otomatis juga ikut tercentang,
    saya coba beberapa kali belum bisa, contoh kode seperti ini :

        // Kondisi saat CheckBox diklik
        $('input:checkbox[name="x_filedA\[\]"]').click(function() {
            if (!$(this).is(':checked')) {
                $('#x_fieldB').val('');
    			
            } else {
               
    	   $(("'#x_filedB')':checked'");
                $('#x_filedC').focus();
            }
        });
    });
    
    Balas
    • Masino Sinaga mengatakan

      Ming, 24 Mei 2020 pada 7:46 pm

      Sudah dijawab di sini

      Balas
  8. Eka Dalas Pangestu mengatakan

    Jum, 28 Januari 2022 pada 3:36 pm

    Hallo pak masino
    izin bertanya pak, mengapa fungsi diatas tidak dapat digunakan ya pada grid add
    Terimakasih

    Balas
    • Masino Sinaga mengatakan

      Sab, 29 Januari 2022 pada 11:29 am

      Karena CSS class id/selector-nya berbeda.

      Balas
      • Eka Dalas Pangestu mengatakan

        Rab, 2 Februari 2022 pada 12:08 am

        Terimakasih pak masino,
        Lalu bagaimana saya menerapkan cara mengaktifkan text field seperti pembelajaran diatas pada gridd add PHPmaker ya pak ?

        Balas
        • Masino Sinaga mengatakan

          Sen, 7 Februari 2022 pada 9:29 pm

          Caranya dengan menyesuaikan CSS selector-nya.

          Balas
          • Eka Dalas Pangestu mengatakan

            Sel, 15 Februari 2022 pada 1:46 pm

            Terimakasih pak, izin bertanya
            bagaimana saya dapat menyesuaikan css selectornya pak ?

            Balas
            • Masino Sinaga mengatakan

              Kam, 17 Februari 2022 pada 10:36 am

              Bandingkan dengan versi yang lama, lalu lihat perbedaannya, kemudian tinggal sesuaikan.

              Balas
  9. Eka Dalas Pangestu mengatakan

    Sen, 7 Maret 2022 pada 10:31 am

    Hallo pak masino bagaimana ya jika saya ingin menerapkan berikut tap tidak dalam checkbox melainkan dropdown

    saya punya 3 field speerti ini :

    Field : Kurensi 1 (Dropdown)
    Field : kurensi 2 (Dropdown)
    Field : Jumlah

    Jika Kurensi 1 dan 2 pilihan dropdownnya tidak sama maka ” Field : Jumlah” menjadi disabled

    Terima Kasih

    Balas
    • Masino Sinaga mengatakan

      Sen, 7 Maret 2022 pada 11:11 am

      Selalu coba sendiri saja dulu. Gunakan Google untuk referensi Anda. Kirim ke sini kode yang Anda tulis untuk diskusi lebih lanjut.

      Balas

Trackbacks

  1. Mengaktifkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker – Masino Sinaga berkata:
    Rab, 9 Juli 2014 pukul 8:34 am

    […] Anda di sini: Beranda / PHPMaker / Mengaktifkan TextBox Saat Radio Button Terpilih di Aplikasi Web dari PHPMaker Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker […]

    Balas
  2. Menampilkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker – Masino Sinaga berkata:
    Jum, 11 Juli 2014 pukul 8:47 am

    […] Anda sudah pernah membaca artikel Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker yang membahas mengenai betapa mudahnya Anda sebagai Web Developer mengaktifkan control TextBox […]

    Balas
  3. Mengenal Client Scripts di PHPMaker : IlmuKomputer.Com berkata:
    Rab, 27 Agustus 2014 pukul 9:57 am

    […] Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker […]

    Balas

Tinggalkan Balasan Batalkan balasan

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

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

Pos-pos Terbaru

  • Masino Extensions for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2025 | WordPress | Catat masuk | Kembali ke atas