Mudahnya Memasukkan Data yang Terpilih di Aplikasi Web dari PHPMaker

Menggunakan PHPMaker sebagai Tools untuk membangun Aplikasi Web memang sangat mengasyikkan. Hampir semua pola business-logic pengolahan data dapat diatasi dengan PHPMaker. Bahkan, salah satu permintaan dari pengunjung situs saya melalui komentar ini akan membuktikan bahwa PHPMaker lagi-lagi dapat memenuhi tantangan tersebut dengan sangat mudah dan cepat.

Di artikel ini kita akan mengulas lebih detail kemampuan PHPMaker untuk mengimplementasikan sebuah business-logic mengenai Studi Kasus KRS Online, seperti yang diinginkan oleh pengunjung di atas tadi.

Intinya, kita akan membuktikan, bahwa PHPMaker dapat menghasilkan Aplikasi Web seperti studi kasus tersebut dengan sangat mudah, cepat, sekaligus menyenangkan. Mudah-mudahan Anda tidak akan terkejut dengan kemampuan PHPMaker berikut ini.

Baiklah, sekarang ikuti langkah-langkah berikut dengan teliti:

1. Pertama sekali, pastikan Anda sudah membuat sebuah Database MySQL yang bernama krs.
2. Jalankan script SQL berikut di dalam Database krs tadi untuk menghasilkan dua tabel yang masing-masing bernama krs dan matakuliah, beserta beberapa Record di dalam tabel matakuliah:

   -- ----------------------------
   -- Table structure for krs
   -- ----------------------------
   DROP TABLE IF EXISTS `krs`;
   CREATE TABLE `krs` (
     `nomor` int(10) NOT NULL AUTO_INCREMENT,
     `nim` varchar(15) NOT NULL,
     `kodekuliah` varchar(10) NOT NULL,
     `semester` varchar(15) NOT NULL,
     `tahun` int(5) NOT NULL,
     PRIMARY KEY (`nomor`)
   ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
   
   -- ----------------------------
   -- Records of krs
   -- ----------------------------
   
   -- ----------------------------
   -- Table structure for matakuliah
   -- ----------------------------
   DROP TABLE IF EXISTS `matakuliah`;
   CREATE TABLE `matakuliah` (
     `kode` varchar(10) NOT NULL,
     `nama` varchar(50) NOT NULL,
     `sks` int(2) NOT NULL,
     `semester` varchar(10) NOT NULL,
     PRIMARY KEY (`kode`)
   ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
   
   -- ----------------------------
   -- Records of matakuliah
   -- ----------------------------
   INSERT INTO `matakuliah` VALUES ('TI001', 'Pengantar Algoritma 1', '2', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI002', 'Analisa Numerik', '3', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI003', 'Pengantar Bahasa C++', '3', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI004', 'Pengantar Ilmu Komputer', '2', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI005', 'Algoritma 2', '2', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI006', 'Pengantar Visual Basic', '2', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI007', 'Kalkulus', '2', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI008', 'Pengantar Database', '2', 'Ganjil');
   INSERT INTO `matakuliah` VALUES ('TI009', 'Rekayasa Komputer', '3', 'Genap');
   INSERT INTO `matakuliah` VALUES ('TI010', 'Perangkat Keras', '2', 'Genap');
   INSERT INTO `matakuliah` VALUES ('TI011', 'Perancangan Database', '3', 'Genap');
   INSERT INTO `matakuliah` VALUES ('TI012', 'Pengantar Bahasa PHP', '2', 'Genap');
   INSERT INTO `matakuliah` VALUES ('TI013', 'Pengantar Javascript', '2', 'Genap');
   INSERT INTO `matakuliah` VALUES ('TI014', 'Struktur Data', '3', 'Genap');
   INSERT INTO `matakuliah` VALUES ('TI015', 'Pengenalan PHPMaker', '3', 'Genap');
   

3. Selanjutnya, buat sebuah project baru PHPMaker dengan mengacu kepada Database krs di atas tadi.
4. Pastikan di panel Database sebelah kiri, Anda sudah memberi tanda centang pada kedua tabel tersebut.
5. Klik tabel matakuliah dari panel Database tadi, kemudian klik tab Fields, lalu klik field sks. Pilih TOTAL dari kolom List Page -> Aggregate. Tujuannya, kita akan membuat fungsi perhitungan total nilai pada kolom atau field sks di halaman List.
6. Masih dari tab Fields, sekarang klik field semester, lalu beri tanda centang pada kolom Ext. Search yang terdapat di bawah kolom List Page. Tujuannya, kita akan menampilkan field ini pada panel pencarian cepat (Quick Search) untuk menyaring Record berdasarkan data semesternya.
7. Pastikan Anda masih memilih field semester, lalu dari panel Edit Tag di tengah bawah, pilih Select. Tujuannya untuk mengganti control yang digunakan field ini menjadi ComboBox. Kemudian pada panel User Values di sebelah kanannya, klik icon plus yang berwarna hijau untuk menambahkan dua Record, masing-masing Ganjil dan Genap. Jadi, kira-kira seperti ini hasilnya setelah Anda tambahkan:

   ---------------------
   Value          Label
   ---------------------
   Ganjil         Ganjil
   ---------------------
   Genap          Genap
   ---------------------
   

8. Pastikan sekali lagi Anda masih memilih field semester dari tab Fields, lalu geser scroll ke kanan di grid bagian atas, sampai Anda melihat kolom Advanced Search Page. Selanjutnya, ketikkan “Ganjil” pada kolom Default value untuk field semester tadi. Tujuannya, kita akan menggunakan nilai standar (default) Ganjil ketika halaman List yang berisi data semester tadi ditampilkan, sehingga data yang berada di tabel akan ditampilkan yang memiliki semester Ganjil. Tentu saja Anda nanti dapat menampilkan data yang semester Genap.
9. Sampai di sini, kita sudah berhasil menentukan pengaturan yang diperlukan pada sisi Field. Selanjutnya, tiba gilirannya kita akan menambahkan hanya sedikit kode saja pada bagian Server Events dan Client Scripts. Untuk itu, pastikan sekarang Anda sudah mengklik tab Code (Server Events, Client Scripts and Custom Templates) pada posisi Anda masih memilih tabel semester.
10. Tambahkan kode PHP berikut ke server event Page_Load yang terdapat di bawah lokasi berikut: Server Events -> Table-Specific -> List Page, sehingga kode selengkapnya adalah:

    // Page Load event
    function Page_Load() {
    	//echo "Page Load";
    	Language()->setPhrase("CustomActionCompleted", "Data KRS berhasil ditambahkan.");
    	$this->CustomActions["ambilkrs"] = "Ambil KRS"; 
    }
    

    Fungsi dari kode ini adalah, kita akan menampilkan tombol yang bertuliskan Ambil KRS ketika halaman List pertama kali dimuat.

11. Selanjutnya, masih pada lokasi di atas, kali ini klik server event Page_Render, lalu pastikan Anda sudah memiliki kode berikut:

    // Page Render event
    function Page_Render() {
    	//echo "Page Render";
    	if (ew_ExecuteScalar("SELECT nim FROM krs
    						WHERE nim='03503120'
    						AND semester='".$this->semester->AdvancedSearch->SearchValue."'
    						AND tahun=2014") <> "") {
    		unset($this->CustomActions["ambilkrs"]);
    	}
    }
    

    Fungsi dari kode tersebut adalah, sistem akan memeriksa apakah data KRS sesuai dengan kriteria tersebut di atas sudah ada di tabel krs atau belum. Jika sudah ada, maka sembunyikan tombol Ambil KRS, supaya user tidak dapat menambahkan data KRS lagi.

12. Selanjutnya, masih pada lokasi di atas juga, sekarang klik server event Row_CustomAction, lalu pastikan Anda sudah memiliki kode seperti ini:

    // Row Custom Action event
    function Row_CustomAction($action, $row) {
    	// Return FALSE to abort
    	if ($action == "ambilkrs") { 
    		ew_Execute("INSERT INTO krs VALUES(null, '03503120', '".$row["kode"]."', '".$row["semester"]."', '2014')");
    	}
    	return TRUE;
    }
    

    Fungsi dari kode ini adalah untuk memasukkan data ke tabel krs sesuai dengan data yang terpilih atau tercentang pada halaman List.

13. Sampai di sini, kita sudah berhasil menambahkan kode di bagian Server Events. Selanjutnya kita akan menulis kode jQuery pada bagian Client Scripts untuk menangani event click dari user ketika memilih Record yang akan ditambahkan ke tabel krs, dan juga untuk menangani jumlah total SKS dari mata kuliah yang dipilih.
14. Sekarang pergi ke lokasi berikut: Client Scripts -> Table-Specific -> List Page -> Startup Script:

    $(document).ready(function() {
    	$("#elf_matakuliah_sks").html("0");
    	var tableControl= document.getElementById('#tbl_matakuliahlist');
    	var arrayOfValues = [];
    	$("input:checkbox[name='key_m[]']").click(function() {
    		$('input:checkbox:checked', tableControl).map(function() {
    		   arrayOfValues.push($(this).closest("tr").find("td[data-name='sks'] span").text());			
    		}).get();
    		var tot_sks = 0;
    		for (var i = 0; i < arrayOfValues.length; i++) {
    			tot_sks += arrayOfValues[i] << 0;
    		}
    		$("#elf_matakuliah_sks").html(tot_sks);
    		tot_sks = 0;
    		arrayOfValues = [];
    	});
    	$("input:checkbox[name='key']").click(function() {
    		$('input:checkbox:checked', tableControl).map(function() {
    		   arrayOfValues.push($(this).closest("tr").find("td[data-name='sks'] span").text());			
    		}).get();
    		var tot_sks = 0;
    		for (var i = 0; i < arrayOfValues.length; i++) {
    			tot_sks += arrayOfValues[i] << 0;
    		}
    		$("#elf_matakuliah_sks").html(tot_sks);
    		tot_sks = 0;
    		arrayOfValues = [];
    	});
    });	
    

    Sekali lagi, fungsi dari kode jQuery ini untuk menangani ketika user memberi tanda centang pada judul kolom atau pada baris Record mata kuliah yang terpilih, sekaligus akan menampilkan hasil perhitungan total semester dari mata kuliah yang terpilih tersebut.

15. Sekarang pastikan Anda sudah menyimpan hasil pekerjaan Anda pada project PHPMaker, lalu generate semua file script seperti biasa dengan menggunakan PHPMaker.

Setelah Anda selesai men-generate file-file script, maka silahkan jalankan Aplikasi Web tersebut melalui browser. Klik menu matakuliah, maka seharusnya sekarang Anda dapat melihat ada control CheckBox di tabel pada halaman List tersebut. Di bagian bawah dari tabel, seharusnya Anda juga melihat ada sebuah tombol yang bertuliskan Ambil KRS.

Dari semua uraian di atas, dapat disimpulkan, bahwa betapa cepatnya PHPMaker dapat menangani kebutuhan penyimpanan data yang terpilih berdasarkan tanda centang melalui control CheckBox di halaman List. Tidak hanya itu, kode yang Anda tulis untuk mengimplementasikan kebutuhan tadi pun sangat sedikit; hanya beberapa baris kode saja. Hanya dibutuhkan tiga Server Event dan satu Client Script saja untuk mengimplementasikannya.

Kecuali untuk kode jQuery, memang sedikit agak banyak, karena kita harus menangani kemungkinan Pengguna mengklik control CheckBox untuk memilih semua Record, dan juga kemungkinan Pengguna mengklik control CheckBox yang terdapat di setiap baris Record, lalu menjumlahkan total SKS dari Record yang terpilih tersebut.

Belum ada tools lain selain PHPMaker yang dapat menangani hal ini dengan sangat mudah, cepat, dan sekaligus menyenangkan. Satu lagi bukti bahwa PHPMaker merupakan tools favorit Web Developer untuk saat ini dan menjadi trend di masa mendatang. 😀