Menghapus Teks pada Label Milik Checkbox di Halaman Grid-Edit dari PHPMaker 2021

Ada-ada saja memang permintaan Web Developer yang membangun Aplikasi Web dengan PHPMaker 2021. Suatu ketika ada yang ingin menghapus teks di Label Checkbox di halaman Grid-Edit.

Usut punya usut, Checkbox yang dimaksud merupakan item yang berasal dari sebuah Field yang menggunakan Lookup Table. Jadi, di dalam Field tersebut bisa memiliki lebih dari satu Checkbox, karena datanya berasal dari Lookup Table.

Nah, masing-masing Chekcbox tersebut memiliki teks atau tulisan yang ditampilkan pada elemen Label di sebelah kanan dari control Checkbox-nya. Yang ingin dihapus hanya teks di Label tersebut, sedangkan Checkbox-nya tidak boleh dihapus.

Yang menarik sekaligus tantangannya adalah, id dari setiap item Checkbox berubah-ubah selalu setiap kali halaman ditampilkan. Dengan kata lain, kita tidak dapat mengandalkan kode CSS untuk menghilangkan teks pada Label milik setiap Checkbox tadi berdasarkan id elemennya.

Tidak hanya itu saja. Teks di Label Checkbox tersebut hanya dihapus pada halaman Grid-Edit, yang sebenarnya menggunakan halaman List. Itu artinya, kita harus bisa memisahkan penanganan antara halaman List biasa dengan halaman Grid-Edit yang ditampilkan melalui halaman List.

Jika tidak kita tangani, ketika Pengguna menampilkan halaman List biasa (bukan Grid-Edit), maka informasi mengenai data mana saja yang tersimpan di database menjadi tidak kelihatan, alias blank.

Supaya tidak bingung, langsung saja kita praktekkan bersama-sama melalui contoh sebuah project PHPMaker 2021 yang menggunakan sebuah database MySQL yang di dalamnya memiliki 2 table.

Langkah pertama, silahkan buat sebuah database baru di MySQL, lalu jalankan script SQL berikut untuk menambahkan dua table beserta contoh data di dalamnya:

-- ----------------------------
-- Table structure for lookup
-- ----------------------------
DROP TABLE IF EXISTS `lookup`;
CREATE TABLE `lookup`  (
  `Code` int(11) NOT NULL,
  `Description` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  PRIMARY KEY (`Code`) USING BTREE
) ENGINE = MyISAM CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of lookup
-- ----------------------------
INSERT INTO `lookup` VALUES (1, 'One');
INSERT INTO `lookup` VALUES (2, 'Two');
INSERT INTO `lookup` VALUES (3, 'Three');

-- ----------------------------
-- Table structure for multiple_tags
-- ----------------------------
DROP TABLE IF EXISTS `multiple_tags`;
CREATE TABLE `multiple_tags`  (
  `ID` int(11) NOT NULL AUTO_INCREMENT,
  `Tags` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  PRIMARY KEY (`ID`) USING BTREE
) ENGINE = MyISAM AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of multiple_tags
-- ----------------------------
INSERT INTO `multiple_tags` VALUES (1, '1');
INSERT INTO `multiple_tags` VALUES (2, '1,2');
INSERT INTO `multiple_tags` VALUES (3, '1,2,3');
INSERT INTO `multiple_tags` VALUES (4, '2,3');
INSERT INTO `multiple_tags` VALUES (5, '3');

Langkah kedua, buat sebuah project baru dari PHPMaker 2021, lalu pastikan sudah terhubung dengan database pada langkah pertama di atas.

Langkah ketiga, klik table multiple_tags dari panel Database, lalu klik tab Fields dan pilih field Tags. Pada panel Edit Tag, klik atau pilih control Checkbox, lalu aktifkan Use lookup table.

Langkah keempat, pada panel kanan yang bernama Lookup Table, pilih lookup dari Table name, pilih Code dari Link field, dan terakhir pilih Description pada Display field #1.

Langkah kelima, klik tab Table di sebelah kanan tab Fields, lalu aktifkan Grid Edit yang terdapat di bawah List Page.

Langkah keenam, tambahkan kode berikut ke dalam server event Lookup_Selecting milik table multiple_tags tadi:

    if ($fld->Name == "Tags" && $this->isGridEdit()) 
    	$fld->Lookup->setOptions(ExecuteRows("SELECT Code, ' ' AS Description FROM lookup")); 

Langkah ketujuh, pastikan generate semua file script seperti biasa menggunakan PHPMaker 2021.

Setelah itu, jalankan Aplikasi Web dari browser, lalu kli menu multiple_tags, maka Anda akan melihat halaman List dari table multiple_tags.

Sekarang klik tombol Grid-Edit di bagian bawah dari table tersebut di halaman List, lalu perhatikan data pada kolom Tags. Seharusnya sekarang Anda hanya melihat ada 3 control Checkbox tanpa teks Label di sebelah kanannya.

Wow, keren kan? Hanya dengan sedikit kode tersebut di server event Lookup_Selecting dan juga beberapa pengaturan pada level Fields dan Table, kita sudah dapat menghilangkan teks pada Label milik control Checkbox di halaman Grid Edit.

Tidak perlu menulis kode sampai berpuluh-puluh, beratus-ratus, atau bahkan beribu-ribu baris hanya untuk mengimplementasikan kebutuhan tadi. Sisanya sudah ditangani oleh PHPMaker 2021.