Mudahnya Menghitung Nilai dari Label CheckBox yang Tercentang di PHPMaker

Sejak PHPMaker memutuskan untuk selalu menggunakan AJAX pada field yang mengambil nilai ke table lain (Lookup Table), maka hal ini juga berdampak langsung kepada kode HTML yang di-generate oleh PHPMaker untuk field tersebut.

Artinya, jika kita menggunakan control CheckBox atau ComboBox untuk menampilkan nilai dari Lookup Table tadi, maka kode HTML yang kita lihat dari View Page Source browser tidak sesuai dengan sintaks HTML umum untuk me-render control tersebut.

Tidak ada sintaks option value per satu record untuk mengisi nilai data ke dalam control ComboBox, atau tidak ada sintaks untuk menampilkan nilai label/text control CheckBox tadi.

Di satu sisi, tentu saja pasti ada keuntungan menggunakan teknik ini. Apa itu? Yang jelas, cara ini dapat menghemat pemakaian bandwidth karena mengurangi kode HTML yang harus ditampilkan di browser saat itu. Bayangkan jika jumlah record tadi mencapai ratusan atau ribuan, betapa hematnya browser untuk menampilkan kode HTML dari Lookup Table tadi.

Tapi, di sisi yang lain, Web Developer yang baru pertama kali mengenal teknik ini pasti kebingungan. Mengapa? Karena dia tidak tahu bagaimana cara mengambil nilai setiap record dari Lookup Table tadi, untuk selanjutnya diolah berdasarkan business-logic tertentu, misalnya.

Katakanlah kita ingin ketika Pengguna Akhir Aplikasi Web yang dibangun dengan PHPMaker memberi centang pada satu atau beberapa pilihan melalui control CheckBox pada form Add dan Edit, maka sistem akan otomatis menghitung nilai tertentu yang ditampilkan pada bagian label control CheckBox tersebut.

Lalu bagaimana dong solusinya? Hehehe… tenang, tenang… jangan buru-buru panik. Beruntunglah Anda jika selama ini sudah menggunakan PHPMaker, khususnya versi terakhir yaitu 2017 saat saya menulis artikel ini. Mengapa? Karena PHPMaker sudah menyediakan sebuah fungsi Javascript yang bernama ew_GetOptTexts.

Fungsi ini bisa kita gunakan untuk mengetahui data label dari control CheckBox yang sedang terpilih atau yang ada tanda centangnya. Berdasarkan fungsi itulah kita bisa memparsing data atau nilai tertentu yang terdapat di dalamnya. Paham maksudnya, kan? 😉

Supaya semakin jelas dan terang-benderang, langsung saja ikuti langkah-langkah berikut dengan teliti.

1. Pertama sekali, pastikan Anda sudah membuat sebuah Database MySQL baru, misalkan nama Databasenya adalah test_db,
2. Selanjutnya eksekusi script SQL berikut untuk membuat dua table baru yang masing-masing bernama hardware dan customer_orders:

   -- ----------------------------
   -- Table structure for hardware
   -- ----------------------------
   DROP TABLE IF EXISTS `hardware`;
   CREATE TABLE `hardware` (
     `ID` int(11) NOT NULL AUTO_INCREMENT,
     `Description` varchar(100) NOT NULL,
     `Price` decimal(10,2) NOT NULL,
     PRIMARY KEY (`ID`)
   ) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
   
   -- ----------------------------
   -- Records of hardware
   -- ----------------------------
   INSERT INTO `hardware` VALUES ('1', 'Laptop', '67.00');
   INSERT INTO `hardware` VALUES ('2', 'Desktop', '5.00');
   INSERT INTO `hardware` VALUES ('3', 'Monitor', '3.00');
   
   -- ----------------------------
   -- Table structure for customer_orders
   -- ----------------------------
   DROP TABLE IF EXISTS `customer_orders`;
   CREATE TABLE `customer_orders` (
     `ID` int(11) NOT NULL AUTO_INCREMENT,
     `Orders` varchar(100) NOT NULL,
     `Order_Date` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP,
     `Sum_Order` decimal(10,2) DEFAULT NULL,
     PRIMARY KEY (`ID`)
   ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
   

   Ini hanya contoh sederhana. Table customer_orders seharusnya memiliki field ID Customer, tapi untuk saat ini field ID Customer itu tidak kita perlukan, jadi abaikan saja terlebih dulu.

3. Buat project baru PHPMaker dengan mengarahkan ke Database test_db tadi,
4. Klik table customer_orders dari panel Database, dan dari bagian Fields setup, klik field Orders,
5. Pilih control CheckBox, dan beri tanda centang pada pilihan Use lookup table dari panel Edit Tag,
6. Panel Lookup Table akan muncul di sebelah kanannya, lalu:
   – Pilih table hardware dari property Table name,
   – Pilih field ID dari property Link field,
   – Pilih field Description dari property Display field #1,
   – Pilih field ID dari property Display field #2,
   – Pilih field Price dari property Display field #3.
7. Tambahkan kode jQuery berikut ke dalam lokasi Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script:

   $('input:checkbox[name="x_Orders\[\]"]').change(function() {
   	ReCalculate();
   });
   
   function ReCalculate(){
   	var sum = 0;
   	var sdata = "";
   	sdata = ew_GetOptTexts("x_Orders[]", "fcustomer_ordersadd")+''; 
   	items = sdata.split(',');
   	for( var i = 0; i < items.length; i++ ) {
   		var myval = 0;
   		if (i == 2 || (i - 2) % 3 == 0) {
   			myval = parseFloat(items[i]);
   		}
   		sum += myval;
   	}
   	$("#x_Sum_Order").val((sum).toFixed(2)); 
   }
   

8. Setelah itu, tambahkan juga kode jQuery berikut ke dalam lokasi Client Scripts -> Table-Specific -> Edit Page -> Startup Script:

   $('input:checkbox[name="x_Orders\[\]"]').change(function() {
   	ReCalculate();
   });
   
   function ReCalculate(){
   	var sum = 0;
   	var sdata = "";
   	sdata = ew_GetOptTexts("x_Orders[]", "fcustomer_ordersedit")+''; 
   	items = sdata.split(',');
   	for( var i = 0; i < items.length; i++ ) {
   		var myval = 0;
   		if (i == 2 || (i - 2) % 3 == 0) {
   			myval = parseFloat(items[i]);
   		}
   		sum += myval;
   	}
   	$("#x_Sum_Order").val((sum).toFixed(2)); 
   }
   

9. Terakhir, generate semua file script menggunakan PHPMaker seperti biasa.

Sekarang, jalankan Aplikasi Web dari browser, klik menu customer orders, klik tombol Add (+), lalu pada form Add yang muncul selanjutnya, Anda akan melihat ada 3 pilihan yang ditampilkan melalui control CheckBox, dengan pilihan kira-kira seperti ini urutannya:

Laptop, 1, 67.00	Desktop, 2, 5.00	Monitor, 3, 3.00

Artinya, setiap pilihan CheckBox memiliki masing-masing 3 informasi dengan urutan: Deskripsi, Kode, dan Harga, yang masing-masing diambil dari field Description, ID, dan Price pada table hardware.

Sekarang, cobalah untuk memberi tanda centang pada CheckBox pertama, maka Anda akan melihat field Sum_Order akan terisi nilai 67.00. Setelah itu, beri tanda centang lagi pada CheckBox kedua, Anda akan melihat field Sum_Order berubah nilainya menjadi 72.00 (67.00 + 5.00). Terakhir, beri tanda centang lagi pada CheckBox ketiga, maka sekarang Anda akan melihat nilai pada field Sum_Order berubah menjadi 75.00 (67.00 + 5.00 + 3.00).

Cobalah juga untuk menghapus satu atau beberapa tanda centang, maka perhatikan lagi nilai pada field Sum_Order. Sistem akan otomatis menyesuaikan setiap kali Pengguna Akhir Aplikasi Web mengklik CheckBox tadi. Artinya, nilai Price dari control CheckBox yang tercentang akan otomatis dijumlahkan, dan hasilnya ditampilkan ke dalam field Sum_Order.

Kesimpulannya, seperti yang sudah disebutkan di atas tadi, PHPMaker ternyata diam-diam sudah menyediakan sebuah Javascript function yang dapat menampilkan label/text yang terdapat pada control CheckBox yang nilainya berasal dari Lookup Table tertentu. Namanya adalah ew_GetOptTexts. Fungsi ini memiliki dua parameter. Parameter pertama adalah ID dari field-nya, dan parameter kedua adalah ID dari form-nya.

Sesuatu yang tadinya kita khawatirkan bagaimana cara mengambil nilai dari control CheckBox yang dihasilkan melalui fitur AJAX, ternyata sudah tersedia solusinya.

Hanya dengan menambahkan sedikit kode jQuery di atas dari bagian Client Scripts, dan mengeset beberapa item pengaturan pada Fields setup, kita sudah bisa menghasilkan Aplikasi Web yang akan otomatis menghitung nilai yang terdapat pada label control CheckBox yang terpilih tersebut.

Bagaimana, PHPMaker keren ‘kan? 😉

Cobalah sekarang bayangkan, jika Anda membangun Aplikasi Web dari titik nol, berapa lama waktu yang akan Anda habiskan untuk menghasilkan fitur yang sama seperti jika kita membangunnya menggunakan PHPMaker? Hohoho… 😀