Cara Mengetahui Jumlah Checkbox yang Tercentang pada Field dari PHPMaker 2021

Hari ini kita akan membahas bagaimana cara mengetahui jumlah control Checkbox yang tercentang pada sebuah field di Aplikasi Web yang dihasilkan oleh PHPMaker 2021. Field ini menggunakan Lookup Table, dan dapat menerima multiple values.

Ketika Pengguna Akhir mengklik control Checbox di field tersebut, maka sistem akan menampilkan jumlah control Checkbox yang sedang tercentang.

Oke, langsung saja kita praktekkan bersama-sama.

Langkah pertama, buatlah sebuah database MySQL, lalu jalankan SQL berikut pada database tadi untuk membuat 2 table beserta data di dalamnya:

-- ----------------------------
-- Table structure for info
-- ----------------------------
DROP TABLE IF EXISTS `info`;
CREATE TABLE `info`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `info` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `multiple` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = MyISAM AUTO_INCREMENT = 3 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of info
-- ----------------------------
INSERT INTO `info` VALUES (1, 'Just the first sentence here', '1,3');
INSERT INTO `info` VALUES (2, 'Now this is the second sentence', '1,2,3');

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

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

Langkah kedua, buatlah sebuah project baru di PHPMaker 2021, lalu pastikan sudah connect ke database yang sudah kita buat pada langkah pertama di atas.

Langkah ketiga, klik table info, kemudian klik field multiple, lalu pada panel Edit Tag, pilih Checkbox. Selanjutnya aktifkan Use lookup table, lalu pada panel Lookup Table, pilih lookup_one untuk Table name, pilih Code untuk Link field, dan pilih Desc dari Display field #1.

Langkah keempat, copy paste kode jQuery berikut ke bagian Startup Script di bawah lokasi berikut: Client Scripts -> Table-Specific -> Add/Copy Page, dan juga Edit Page:

$('input[data-field=x_multiple]').on("change", function() {
    ew.alert("Checked count: " + $('input[data-field=x_multiple]:checked').length);
});

Langkah kelima, generate ulang semua file script seperti biasa dari PHPMaker 2021.

Sekarang akses Aplikasi Web lewat browser, lalu cobalah tambah data baru atau ubah salah satu record di table info, kemudian klik Checkbox pada field multiple, maka Anda akan melihat kotak pesan yang menampilkan jumlah control Checkbox yang sedang terpilih.

Tidak perlu menulis banyak kode seperti yang mungkin selama ini masih kita lakukan jika membangun Aplikasi Web dengan cara-cara konvensional. Kita juga tidak perlu mengutak-atik kode di file script yang sudah dihasilkan oleh PHPMaker 2021. Semuanya cukup kita atur dari dalam project PHPMaker 2021.

Betapa mudah dan cepatnya, bukan? Bukan! Hohoho…. 😀