Merupakan Tantangan dan Keasyikan Tersendiri Bekerja dengan PHPMaker

Sebentar… sebentar… sebelumnya saya mau tertawa dulu… hahahahahahahaha… 😀

Bingung? Tenang, tenang. Ini hanya ungkapan perasaan kegembiraan, kepuasan, sekaligus keberhasilan saja ketika berhasil menemukan sesuatu yang sudah dicapai sampai berjam-jam lamanya. Pernah mengalami hal yang sama? 😉

Beberapa menit yang lalu, saya baru saja mendapatkan sebuah trik sekaligus ilmu baru yang selama ini tidak saya duga-duga. Hampir lebih dari dua jam saya mencari tahu mengapa tabel yang saya buat tidak bisa berubah warna barisnya ketika disorot atau diklik.

Begini ceritanya. Kalau Anda amati di halaman List pada Aplikasi Web yang di-generate oleh PHPMaker, ketika Pengguna menggeser kursor mouse ke atas baris tabel utama di halaman tersebut, atau istilah kerennya adalah hover, maka akan terjadi perubahan warna baris yang dilewati oleh kursor mouse tadi. Demikian juga ketika Pengguna mengklik salah satu baris, maka warna baris yang diklik tadi pun seharusnya berubah juga.

Nah, saya ingin menerapkan style seperti itu di tabel pada halaman userpriv.php yang di-generate oleh PHPMaker. Tentu saja saya tidak menerapkannya di file script yang sudah dihasilkan oleh PHPMaker, karena saya menerapkan hal ini melalui salah satu extension yang saya buat untuk PHPMaker.

Trik yang saya gunakan adalah meniru atau mencontoh kode di halaman List yang sudah di-generate oleh PHPMaker. Di sinilah tantangan itu mulai muncul, karena ternyata hasilnya tidak semudah yang saya bayangkan sebelumnya. Tidak ada efek apapun yang terjadi ketika kursor mouse melewati baris demi baris di tabel tadi. Demikian juga ketika salah satu dari baris yang ada di tabel itu diklik, tidak ada efek perubahan warna yang terjadi di sana. Nah, lho!

Akhirnya, logika sederhana pun mulai berjalan. Setelah semua kode dari halaman List yang berfungsi dengan baik dan ditampilkan di browser di-copy-paste, mulai ada titik terang. Satu per satu kode yang tidak perlu dibuang atau dihilangkan, sampai menghasilkan kode yang seminim mungkin. Akhirnya, berhasil dan ketahuan jugalah penyebabnya (eit, sengaja saya rahasiakan kepada Anda).

Sekarang mari perhatikan kode di bawah ini. Giliran saya yang memberikan tantangan kepada Anda! Sebutkan satu baris kode yang paling menentukan untuk menghasilkan efek perubahan warna pada baris tabel ketika Pengguna melakukan event hover atau click pada baris di tabel tersebut!

<div class="ewGrid">
<form name="fhelp_categorieslist" id="fhelp_categorieslist" class="form-inline ewForm ewListForm" action="help_categorieslist.php" method="post">
<div id="gmp_help_categories" class="table-responsive ewGridMiddlePanel">
<table id="tbl_help_categorieslist" class="table ewTable">
<thead>
	<tr class="ewTableHeader">
		<th data-name="Category_ID">Category ID</th>
		<th data-name="_Language">Language</th>
		<th data-name="Category_Description">Category Description</th>	
	</tr>
</thead>
<tbody>
	<tr data-rowindex="1" id="r1_help_categories" data-rowtype="1">
		<td data-name="Category_ID"><span>1</span><a id="help_categories_list_row_1"></a></td>
		<td data-name="_Language"><span>English</span></td>
		<td data-name="Category_Description"><span>First Category</span></td>
	</tr>
	<tr data-rowindex="2" id="r2_help_categories" data-rowtype="1">
		<td data-name="Category_ID"><span>2</span><a id="help_categories_list_row_2"></a></td>
		<td data-name="_Language"><span>English</span></td>
		<td data-name="Category_Description"><span>Second Category</span></td>
	</tr>
</tbody>
</table>
<input type="hidden" name="a_list" id="a_list" value="">
</div>
</form>
</div>

O iya, sebagai gambaran saja supaya tidak bingung dengan yang saya maksud dan untuk melihat hasil dari trik ini, langsung saja buka halaman ini, dan jika muncul form Login, silahkan login dengan menggunakan Username admin dan Password master. Setelah itu, Anda dapat mencoba efek hover dan klik pada baris di tabel yang muncul di halaman tersebut.

Satu lagi… tolong jangan bilang saya pelit memberi ilmu ya, jika Anda tidak mau berusaha! Bayangkan, saya sudah memberikan semua kodenya, dan semua kode di atas tadi akan mengasah kemampuan Anda dalam menganalisis kode sebanyak 20%, dan 80% sisanya adalah keberuntungan dan kenikmatan yang tiada taranya, hehehe… 🙂

Selamat menikmati! 😀