Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Menampilkan atau Menyembunyikan Field Berdasarkan Data di Field Lain pada PHPMaker 2023
Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023
File-File Apa Saja yang Harus Digenerate Setiap Kali Menambah Table Baru di PHPMaker 2023?

Menampilkan atau Menyembunyikan Field Berdasarkan Data di Field Lain pada PHPMaker 2023

Sab, 18 Maret 2023 oleh Masino Sinaga 13 Komentar

Ada begitu banyak kondisi yang terjadi di sisi Client bisa ditangani dengan sangat mudah di PHPMaker 2023. Contoh paling sederhana, kita bisa menampilkan suatu field jika data di field lain sudah ada datanya, alias tidak blank.

Katakanlah di suatu table kita memiliki dua buah field, masing-masing bernama FieldA dan FieldB. Kondisi mula-mula, saat form Add ditampilkan, maka FieldB dalam keadaan ter-hidden alias tidak ditampilkan. FieldB baru akan muncul jika Pengguna Akhir aplikasi sudah mengisi data di FieldA.

Pada prinsipnya, kita bisa menulis kode di Startup Script di bawah bagian Client Scripts dari project PHPMaker. Selain itu, kita juga bisa menambahkan kode Javascript atau jQuery dari bagian Client side events di bawah Fields setup project PHPMaker 2023.

Langkah pertama, tambahkan kode ini di bagian Startup Script di bawah Client Scripts -> Table-Specific -> Add/Copy Page:

$("#r_FieldB").hide();

Kode itu khusus menangani FieldB yang kondisi mula-mula masih disembunyikan pada form/halaman Add.

Langkah kedua, masukkan kode ini dari bagian Fields setup -> FieldA -> panel Edit Tag -> Client side events:

{ // keys = event types, values = handler functions
	"change keyup": function(e) {
		// Your code
		var $row = $(this).fields();
		field_a = $row["FieldA"].value();
		if (field_a == "") {
			$row["FieldB"].visible(false);
		} else {
			$row["FieldB"].visible(true);
		}
	}
}

Kode di atas ini artinya, ketika Pengguna Akhir sedang mengetik data di FieldA, maka FieldB akan otomatis ditampilkan. Sebaliknya, ketika Pengguna Akhir menghapus atau mengosongkan seluruh data yang terdapat di FieldA, maka FieldB menjadi otomatis disembunyikan.

Langkah ketiga, generate ulang semua file script seperti biasa dari PHPMaker 2023.

Setelah semua kode berhasil di-generate, cobalah klik tombol Add di halaman List dari table yang bertalian, lalu Anda akan melihat kondisi mula-mula, hanya FieldA yang ditampilkan.

Sekarang ketikkan data di FieldA, maka FieldB akan otomatis ditampilkan. Cobalah hapus atau kosongkan lagi data di FieldA, maka FieldB akan disembunyikan.

Kesimpulannya, sekarang kita bisa menulis kode di sisi Client dengan sangat mudah dan cepat dari kedua bagian di atas. Bagian pertama dari Startup Script di bawah Client Scripts, sedangkan bagian kedua dari Client side events di bawah Fields setup.

Mengapa kita harus menulis di bagian Startup Script pada halaman Add/Copy? Karena kode ini akan dieksekusi saat form Add dimuat pertama sekali.

Sebenarnya kita bisa menggunakan hanya bagian Startup Script ini untuk menangani saat Pengguna Akhir sedang mengetik data di FieldA. Hanya saja, jika kita menggunakan cara seperti itu, maka kita harus menulis kode lagi di bagian Startup Script pada halaman Edit.

Nah, penggunaan Client Side Events bisa lebih menyederhanakan penulisan kode di dua tempat tadi menjadi cukup di satu tempat saja. Kode yang kita tulis di bagian ini akan otomatis digunakan juga di dua tempat, yaitu form/halaman Add dan form/halaman Edit.

Tidak itu saja, bahkan di halaman Copy dan Search pun kode tersebut masih berlaku. Jadi, jika kita menulis kode di bagian Client Side Events, maka kode tersebut akan berlaku di empat halaman sekaligus, yaitu: Add, Copy, Edit, dan Search!

Sedangkan kode di Startup Script, hanya untuk menangani saat form pertama kali dimuat, sesuai dengan jenis halaman yang diiginkan saja.

Gimana? Keren, ‘kan PHPMaker 2023?

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Client Scripts, PHPMaker 2023, PHPMaker Indonesia, 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.

Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023
File-File Apa Saja yang Harus Digenerate Setiap Kali Menambah Table Baru di PHPMaker 2023?

Komentar

  1. Murniyati mengatakan

    Sab, 18 Maret 2023 pada 4:11 pm

    Luar biasa. Benar penulisannya menjadi sederhana.
    Bagaimana kalau menggunakan Combobox, pak Masino.

    Balas
    • Masino Sinaga mengatakan

      Ming, 19 Maret 2023 pada 12:46 pm

      Ini namanya bertanya dulu sebelum mencoba, hehehe… Pasti belum mencoba kode tersebut untuk Combobox kan?

      Kerennya, kode di atas berlaku juga untuk field yang menggunakan Combobox. Di sana sudah ada event change, yang dimiliki oleh control Combobox. Silahkan dicoba langsung.

      Balas
      • Murniyati mengatakan

        Ming, 19 Maret 2023 pada 4:14 pm

        hehehe…..betul sekali belum mencoba pak, luar biasa. bapak benar-benar sepenuhnya telah menguasai sampai sedetail mungkin. Salut.

        Balas
  2. Kupang mengatakan

    Sen, 20 Maret 2023 pada 8:20 pm

    Bang bagaimana atasi failed to resize image (original, thumbnail) di phpmakkers 2021.?
    Padahal di fild foto sdh jpg, png, dan jpeg

    Balas
    • Masino Sinaga mengatakan

      Sel, 21 Maret 2023 pada 8:38 am

      Coba disampaikan saja langsung ke forum diskusi PHPMaker.

      Balas
  3. Murniyati mengatakan

    Sen, 17 April 2023 pada 9:18 am

    Salam pak,
    Ketika kita menerapkan kode dalam artikel ini, ternyata auto fill tidak berjalan pada field yang kita berikan inputkan kodenya. Lalu, solusinya bagaimana pak.

    Balas
    • Masino Sinaga mengatakan

      Sen, 17 April 2023 pada 9:23 am

      Memang seperti itu. Kode di atas ingin menunjukkan, bahwa kita tidak selalu harus menggunakan fitur Auto Fill bawaan PHPMaker yang terdapat di Lookup Table.

      Kita bisa membuat fitur auto fill yang mengkombinasikan kode di Client Scripts dan Server Events. Kira-kira begitu maksud dari kode di artikel ini.

      Balas
    • Masino Sinaga mengatakan

      Sen, 17 April 2023 pada 9:37 am

      Solusinya, bisa menggunakan AJAX by API and Client Scripts

      Balas
  4. andrik mengatakan

    Sel, 2 Mei 2023 pada 4:25 am

    selamat pagi pak, izin bertanya pak, bagaimana membuat tampilan tabel supaya bisa Justify atau rata kana kiri , karena setelah generate pasti posisi tabel selalu mepet ke kiri karena jumlah field cuma 3,

    Balas
    • Masino Sinaga mengatakan

      Sel, 2 Mei 2023 pada 11:40 am

      Cara cepatnya ya tinggal menggunakan Masino Extensions saja mas.

      Cara ribetnya ya tinggal tambahkan saja kode css dari bagian HTML -> Styles -> User.

      Balas
      • andrik mengatakan

        Kam, 4 Mei 2023 pada 11:54 pm

        siap pak masino,
        jika nanti ada rezeki lebih, saya beli Masino Extensions pak,

        izin pak, kalau berkenan, bisa kasih contoh sintak nya, atau mungkin ada artikel dari pak masino yang bisa saya baca

        Balas
        • Masino Sinaga mengatakan

          Jum, 5 Mei 2023 pada 8:28 am

          .ew-grid {
              width: 100%;
          }
          
          Balas
          • andrik mengatakan

            Sab, 6 Mei 2023 pada 9:50 pm

            trima kasih banyak pak

            Alhamdullah sudah bisa , sudah saya coba edit” untuk tampilan dan berhasil

            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

  • 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
  • File-File yang Wajib Diperhatikan Setelah Menambah Item User Values di PHPMaker 2025
  • Begini Cara Memuat Tables dari Database Secara Dinamis di PHPMaker 2025

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Mudahnya Menyesuaikan Timezone di Calendar Report pada PHPMaker 2023
  • Nano pada Mudahnya Menyesuaikan Timezone di Calendar Report pada PHPMaker 2023
  • Charly pada Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023
  • Charly pada Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023
  • Masino Sinaga pada Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023

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