Memanipulasi Elemen di Dalam Tabel pada Aplikasi Web dari PHPMaker

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? 🙂