Mencegah Pengguna Menambah Baris Baru di Tabel Detail Aplikasi Web dari PHPMaker

Salah satu fitur canggih dari sekian banyaknya fitur unggulan di PHPMaker, adalah kemampuan menghasilkan Aplikasi Web yang memungkinkan Pengguna menambahkan data Master/Detail dalam satu halaman. Pengguna tidak perlu berpindah atau memuat halaman lain untuk menambahkan data Detail. Di PHPMaker hal ini dikenal dengan istilah Master/Detail Add.

Jadi, data Master yang akan diinput berada di bagian atas, dan data Detail berada di bagian bawah dari data Master-nya. Data Master ditampilkan dalam bentuk tabular (form tunggal), sedangkan data Detail ditampilkan dalam bentuk kolumnar (tabel). Sebuah layout yang sering kita lihat saat menambah data Master dan Detail secara bersamaan.

Pengguna dapat menambahkan baris baru di bagian tabel Detail dengan cara mengklik tombol Add Blank Row. Pengguna juga dapat menghapus baris data yang tidak diinginkan dengan mengklik tombol Delete yang terdapat di setiap baris yang bertalian, sebelum data dan semua perubahan tadi disimpan ke Database.

Untuk menyimpan data Master dan Detail sekaligus, maka Pengguna cukup hanya menekan sekali tombol saja. Betapa kerennya, bukan? 😀

Beberapa Aplikasi Web tentu saja ada yang harus membatasi jumlah record di bagian Detail yang bisa ditambahkan, di halaman Master/Detail Add tadi.

Katakanlah untuk data Master/Detail orders/orderdetails, jumlah maksimal Record di tabel Detail orderdetails yang boleh ditambahkan di form Master/Detail Add tadi adalah 3. Tentu saja untuk mencegah Pengguna menambah baris keempat dan seterusnya, maka kita harus menyembunyikan tombol Add Blank Row.

Pertanyaannya adalah, bagaimana cara kita melakukan semua itu? Hehe… penasaran, ‘kan?

Solusinya ternyata sangat mudah, cepat, dan menyenangkan! 🙂

Pertama, untuk membatasi jumlah maksimal Record tadi, kita hanya perlu menambahkan kode ini ke dalam server event Page_Load yang terdapat di bawah lokasi Server Events -> Table-Specific -> List Page milik table orderdetails, sehingga kode selengkapnya menjadi seperti ini:

// Page Load event
function Page_Load() {
	//echo "Page Load";
	if ($this->getCurrentMasterTable() == "orders") {
		$this->GridAddRowCount = 3;
	}
}

Perhatikan kode barusan. Jangan lupa kita harus memeriksa apakah halaman List table orderdetails saat itu menyertakan table Master-nya orders dengan menggunakan method getCurrentMasterTable. Jika ya, maka set property GridAddRowCount milik object table Detail dengan nilai 3.

Kedua, untuk menghilangkan tombol Add Blank Row, maka kita cukup menaruh kombinasi antara kode PHP dan jQuery berikut ke dalam bagian Startup Script yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> Add/Copy Page milik table Master orders, sehingga kode selengkapnya menjadi seperti ini:

<?php if (CurrentPage()->getCurrentDetailTable() <> "") { ?>
$(document).ready(function() {
	$('.ewAddBlankRow').hide();
	$('.ewGridDelete').hide();
});
<?php } ?>

Sekarang mari simak kode yang terakhir ini. Tentu pertanyaan yang pertama kali muncul adalah, mengapa kita harus mengkombinasikan antara pemakaian kode PHP dan jQuery di bagian Client Scripts milik table orders pada halaman Add?

Jawabannya sederhana saja. Karena kita harus memeriksa di halaman Add tersebut apakah saat itu sistem menyertakan table Detail dengan menggunakan method getCurrentDetailTable. Jika ya, maka kita menyembunyikan tombol Add Blank Row berdasarkan nama class tombolnya, ewAddBlankRow. Kita juga perlu menyembunyikan tombol Delete di setiap baris Record tabel Detail, melalui nama class tombolnya, ewGridDelete.

Mungkin masih ada yang penasaran, mengapa tidak ditangani saja di sisi table Detail seperti kode pada server event tadi? Hehe, jawabannya karena tujuan utama kita hanya ingin menyembunyikan tombol Add Blank Row, sementara di sisi yang lain PHPMaker tidak menyediakan Client Scripts khusus untuk halaman Detail yang ditampilkan bersamaan dengan table Master-nya.

Itulah kenapa akhirnya kita mengoptimalkan kode jQuery tersebut di dalam Client Scripts milik table Master, yaitu orders. Jadi, kita perlu memeriksa apakah di halaman Add tersebut saat itu sistem menyertakan table Detail yang terkait, yang dalam hal ini adalah orderdetails.

Bagaimana? Betapa mudah, cepat, sederhana, dan langsung to the point, bukan? Tidak perlu memodifikasi kode di file script yang akan dihasilkan oleh PHPMaker, tidak perlu memodifikasi Template PHPMaker, dan tidak perlu juga bersusah payah menulis kode sampai berpuluh-puluh, beratus-ratus, atau bahkan beribu-ribu baris untuk menghasilkan fitur seperti di atas.

Ternyata PHPMaker pun bisa memancing kreativitas Web Developer untuk mengoptimalkan setiap jengkal bagian Server Events maupun Client Scripts yang sudah disediakannya. Luar biasa!

PHPMaker mau dilawan? PHPMaker sing ada lawaaaaaan! Hehehe… 😀