Masino Sinaga

Web Development, PHPMaker, & PHP Report Maker

Anda di sini: Beranda / PHPMaker / Memanipulasi Elemen di Dalam Tabel pada Aplikasi Web dari PHPMaker
Menerapkan Aksi Kostum untuk Record Terpilih di Aplikasi Web dari PHPMaker
Mudahnya Meredirect ke Halaman Tertentu di Aplikasi Web dari PHPMaker

Memanipulasi Elemen di Dalam Tabel pada Aplikasi Web dari PHPMaker

Juni 28, 2014 oleh Masino Sinaga 6 Komentar

Seperti yang sudah kita ketahui, PHPMaker dapat menghasilkan halaman List yang memiliki tabel atau daftar untuk menampilkan kumpulan Record. Di dalam tabel ini terdapat beberapa elemen penting yang dimiliki oleh setiap baris Record. Contohnya adalah: elemen checkbox, icon/link view, link copy, link delete, dan sebagainya.

Semua elemen-elemen tadi ditempatkan pada kolom khusus. Mereka tidak dicampuradukkan dengan kolom yang berisi data yang diperoleh sistem dari Database. Sekalipun mereka dipisahkan di kolom khusus untuk masing-masing elemen, PHPMaker memiliki kemampuan untuk mengelompokkan semua elemen tadi ke dalam satu tombol dengan style DropDown. Tapi kita tidak membahas lebih spesifik mengenai hal ini.

Yang menarik dan akan kita bahas di artikel ini adalah, tidak selamanya elemen-elemen yang sudah di-generate secara standar oleh PHPMaker tadi diperlukan. Kadang-kadang, ada kebutuhan untuk memanipulasi elemen tersebut, misalnya dengan cara menyembunyikan elemen tertentu sesuai dengan kondisi tertentu pula. Selain itu, ada juga kebutuhan lain untuk menambahkan kolom baru yang berisi data atau informasi yang tidak diambil langsung dari Database.

PHPMaker sudah menyediakan dua buah server event yang terkait dengan kebutuhan tadi. Namanya adalah ListOptions_Load dan ListOptions_Rendered. Keunikan dari kedua server event ini adalah, mereka hanya dimiliki oleh halaman List. Sesuai dengan namanya, masing-masing server event ini dipanggil ketika sistem sedang memuat dan setelah selesai memuat pilihan atau elemen-elemen yang terdapat di tabel yang menampilkan Record dari Database ke dalam halaman List.

Anda sebagai Web Developer dapat mengambil nama kolom atau Field dengan menggunakan sintaks:

$this->ListOptions->Items["name"]

di mana name adalah nama dari elemen-elemen tersebut. Nama elemen-elemen ini bisa Anda lihat di bawah ini.

Perlu diketahui bahwa nama-nama berikut sudah dipesan oleh sistem Aplikasi Web yang dihasilkan oleh PHPMaker. Oleh karena itu, jangan menggunakan nama-nama ini untuk nama kolom atau Field Anda. Nama-nama berikut sifatnya adalah case-sensitive dan sengaja dibuat huruf kecil semua (lowercase), kecuali nama dari tabel Detail.

  • checkbox – elemen checkbox
  • view – elemen view, untuk menu menampilkan satu Record per satu halaman
  • copy – elemen copy, untuk menyalin Record terkait sekaligus membuka halaman Add
  • delete – elemen delete, untuk menghapus Record di baris terkait
  • edit – elemen edit, untuk mengubah Record dan membuka halaman Edit
  • detail_<DetailTable> – merupakan nama tabel Detail
  • details – kolom Multiple Master/Detail
  • preview – elemen untuk preview row dari extension Detail Preview (hanya untuk Pengguna yang sudah resmi membeli PHPMaker)
  • sequence – kolom untuk menampilkan nomor urut Record
  • button – kolom untuk pengelompokan tombol atau tombol dropdown

Supaya semakin jelas, mari kita simak contoh berikut. Di kode ini akan ditunjukkan bagaimana mudahnya menambahkan sebuah kolom baru di tabel pada halaman List. Pastikan Anda melakukan hal ini dari kedua server event tadi.

Pertama sekali, kita harus memasukkan kode seperti ini ke dalam server event ListOptions_Load:

function ListOptions_Load() {
     $item = &$this->ListOptions->Add("new"); // Tambahkan kolom baru, dengan kata kunci: "new"
     $item->Header = "MyCaption"; // Tentukan judul header kolom (untuk halaman List)
     $item->OnLeft = TRUE; // Posisi Link berada di kiri
     $item->MoveTo(0); // Pindahkan kolom ke indeks yang ditentukan (dalam hal ini indeks ke-0 paling kiri)
}

Kode di server event ListOptions_Load tadi akan dipanggil sebelum sistem me-render atau mengeluarkan kode HTML berupa header dari kolom tabel di halaman List, sehingga di sinilah kesempatan Web Developer untuk menambahkan header kolom yang baru.

Keren, ‘kan? 🙂

Eit, jangan puas dulu! Selanjutnya kita harus menambahkan kode berikut untuk menampilkan konten data di kolom yang baru tadi:

function ListOptions_Rendered() {
     if ($this->NamaFieldSaya->CurrentValue == "xxx") { 
         $this->ListOptions->Items["new"]->Body = "yyy";
     } else { 
         $this->ListOptions->Items["new"]->Body = "";
     }
 }

Kode di server event ListOptions_Rendered ini akan dipanggil setelah sistem mengeluarkan kode HTML berupa baris-baris Record ke tabel pada halaman List. Dalam contoh tadi, sistem akan memeriksa bahwa jika nilai data di field NamaFieldSaya bernilai xxx maka tampilkan nilai yyy pada kolom baru yang kita tambahkan dengan kata kunci new di server event ListOptions_Load tadi.

Jadi, dapat disimpulan bahwa jika Anda ingin menambahkan kolom yang baru, maka Anda harus menggunakan kedua server event itu tadi.

Sekarang mari kita simak contoh kasus lainnya. Kita akan menyembunyikan item atau kolom yang memiliki elemen edit, maka Anda cukup menambahkan kode ke dalam server ListOptions_Load saja:

function ListOptions_Load() {
     $this->ListOptions->Items["edit"]->Visible = FALSE;     
}

Tentu saja, Anda bisa menambahkan kondisi tertentu untuk menyembunyikan elemen tersebut sesuai dengan business-logic yang Anda tetapkan.

Betapa cepat dan mudahnya, bukan? 🙂

Ditempatkan di bawah: PHPMaker Ditag dengan:ListOptions_Load, ListOptions_Rendered, PHPMaker Indonesia, Server Events, 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 dan ilovephpmaker.com.

Menerapkan Aksi Kostum untuk Record Terpilih di Aplikasi Web dari PHPMaker
Mudahnya Meredirect ke Halaman Tertentu di Aplikasi Web dari PHPMaker

Comments

  1. Bahrian mengatakan

    Juli 5, 2014 pada 1:08 pm

    Siang Master Masino, saya mau bertanya lagi.. Begini..

    Ketika akan Add data, ada 2 radio button, yang satu bernilai Pembimbing dan satunya lagi bernilai Mahasiswa.

    Jika dipilih pembimbing, maka akan ada terjadi :
    1 buah Select (berisi pilihan program mahasiswa: Reguler, Ekstensi dan Profesi) menjadi read only,
    1 buah text box (untuk di isi tahun aktif sebagai mhs Reguler, Ekstensi atau Profesi sesuai pilihan select) menjadi read only,
    1 buah Select (berisi pilihan: 1, 2, 3) akan terisi value 3,
    1 buah check box akan terpilih / check,
    1 buah textbox akan tidak tampil/ tidak visible

    Jika dipilih Mahasiswa, maka akan ada terjadi :
    1 buah Select (berisi pilihan program mahasiswa: Reguler, Ekstensi dan Profesi) akan aktif untuk di input,
    1 buah text box (untuk di isi tahun aktif sebagai mhs Reguler, Ekstensi atau Profesi sesuai pilihan select) akan aktif untuk di input,
    1 buah Select (berisi pilihan: 1, 2, 3) akan terisi value 1,
    1 buah check box akan uncheck.
    1 buah textbox akan tampil/ visible

    Lalu berikutnya, msh di form Add data, ada 1 buah checkbox AndaMhs (bervalue : Ya) dan 1 buah textbox NamaMhs.
    Pada saat aktif form Add, textbox NamaMhs read only, tapi jika checkbox AndaMhs di check maka akan mengaktifkan textbox NamaMhs.

    Kira2 cara nya gimana ya Master?? Mohon pencerahannya.. =D
    Terima kasih.

    Balas
    • Masino Sinaga mengatakan

      Juli 7, 2014 pada 9:32 am

      Contoh yang Anda usulkan itu terlalu kompleks untuk saya jawab, tapi bukan berarti tidak bisa diterapkan. Pada prinsipnya, Anda bisa menulis kode jQuery di bagian Client Scripts

      Silahkan Anda googling cara menonaktifkan maupun menyembunyikan elemen tertentu dengan menggunakan jQuery. Baca juga topik Server Events and Client Scripts di file Help yang disediakan oleh PHPMaker.

      Balas
      • Bahrian mengatakan

        Juli 7, 2014 pada 10:20 am

        Wah kompleks ya Master..

        kalo jawab bagian yang terakhir sebagai contohnya bisa ga master ??? Yang :
        “…msh di form Add data, ada 1 buah checkbox AndaMhs (bervalue : Ya) dan 1 buah textbox NamaMhs.
        Pada saat aktif form Add, textbox NamaMhs read only, tapi jika checkbox AndaMhs di check maka akan mengaktifkan textbox NamaMhs.”

        Paling tidak saya punya gambaran untuk input action dimana, bagaimana dan seperti apa.
        Soalnya, saya baca Help nya pun sudah, tapi belum tergambar seperti apa coding nya.
        Bisakah Master bantu saya ? Terima Kasih.. =D

        Balas
        • Masino Sinaga mengatakan

          Juli 7, 2014 pada 10:59 am

          Nah, lebih baik contoh yang simpel seperti itu saja dulu. Oke, mengenai contoh kode-nya akan saya jelaskan di artikel yang akan segera terbit besok, hari Selasa, 8 Juli 2014.

          Balas
          • Masino Sinaga mengatakan

            Juli 8, 2014 pada 9:09 am

            Artikel-nya sudah terbit: Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker.

            Selamat menikmati. 😀

            Balas
            • Bahrian mengatakan

              Juli 8, 2014 pada 2:30 pm

              Langsung cek TKP tuk dicoba.. Thanks Master Masino.. =D

              Balas

Tinggalkan Balasan Batalkan balasan

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pos-pos Terbaru

  • Server Event Page_Render dan Page_Rendering di PHPMaker, Apa Sih Bedanya?
  • Begini Mudahnya Mengubah Judul Browser Secara Dinamis di PHPMaker 2021
  • Solusi Supaya PreviewRow dan PreviewOverlay Bisa Sama-Sama Berfungsi di PHPMaker 2021
  • Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Seperti Ini Mudahnya Menyembunyikan Data Label di Chart dari PHPMaker 2021

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Masino Sinaga pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Masino Sinaga pada Mudahnya Menambahkan Global Function untuk Auto-Update Field di PHPMaker
  • Abu Syifa pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Abu Syifa pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. 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 - 2019 | WordPress | Catat masuk | Kembali ke atas