Mudahnya Mengubah CheckBox Menjadi Switch atau Toggle di PHPMaker 2019

Salah satu keuntungan yang juga akan Anda nikmati ketika menggunakan Masino Extensions untuk PHPMaker 2019 (di samping keuntungan lainnya yang sudah kita bahas di artikel-artikel sebelumnya) adalah kemudahan untuk mengimplementasikan control Switch atau Toggle cukup hanya menambahkan sedikit kode saja dari bagian Custom View Tag dan Custom Edit Tag.

Di artikel ini saya akan menunjukkan kepada Anda, bagaimana mudahnya mengganti control Checkbox biasa (yang masih digunakan oleh Aplikasi Web yang dibangkitkan oleh PHPMaker 2019), menjadi control Switch atau Toggle. Hal ini bisa terjadi, karena template beautiful yang saya gunakan di Masino Extensions ini sudah menyertakan fitur control Switch atau Toggle tadi.

Tidak seperti control Bootstrap Toggle (misalnya), yang apabila Anda implementasikan di Aplikasi Web, maka harus menyertakan file .css dan .js secara eksplisit. Tapi jika menggunakan Masino Extensions untuk PHPMaker 2019, maka kita tidak perlu sama sekali menyertakan kedua file tersebut, karena memang kita tidak menggunakan Bootstrap Toggle tersebut.

Bayangkanlah, cukup hanya dengan menambahkan beberapa baris kode berikut ke dalam Custom View Tag dan Custom Edit Tag melalui Fields setup dari project PHPMaker Anda, maka kita bisa mengganti control Checkbox menjadi control Switch atau Toggle dengan tampilan yang lebih modern dan profesional.

Supaya tidak bingung atau bertanya-tanya, langsung saja kita terapkan melalui file demo project yang sudah saya sediakan di situs ILovePHPMaker.com. Tentu saja Anda bisa men-download-nya dan mempelajarinya dari link ini.

Mari kita fokus pada field Discontinued yang berada di dalam table products. Seperti yang kita ketahui, field ini tipe-nya ENUM, dimana nilainya hanya 2, yaitu 1 dan 0. Nilai 1 artinya Ya, sedangkan nilai 0 artinya Tidak. Dengan kata lain, untuk menampilkan control Checkbox di suatu Field dari PHPMaker, kita bisa menggunakan tipe Boolean atau yang nilainya hanya 2.

Berikut ini kode yang kita masukkan ke dalam Custom View Tag:

<?php
$selwrk = (ConvertToBool(CurrentPage()->Discontinued->CurrentValue)) ? " checked" : "";
?>
<label class="kt-pull-left">
	<span class="kt-switch kt-switch--sm">
		<input type="checkbox" name="{{{name}}}[]" data-table="<?php echo CurrentPage()->TableName ?>" data-field="{{{name}}}" name="{{{name}}}[]" id="{{{name}}}[]" value="<?php echo CurrentPage()->Discontinued->CurrentValue; ?>" disabled <?php echo $selwrk ?>>
		<span></span>
	</span>
</label>

Kode yang kita letakkan pada Custom View Tag berfungsi untuk mengubah tampilan atau control yang digunakan pada halaman View dan List.

Sedangkan kode yang ini kita masukkan ke dalam Custom Edit Tag:

<?php
$selwrk = (ConvertToBool(CurrentPage()->Discontinued->CurrentValue)) ? " checked" : "";
?>
<label>
	<span class="kt-switch">
		<input type="checkbox" name="{{{name}}}[]" data-table="<?php echo CurrentPage()->TableName ?>" data-field="{{{name}}}" name="{{{name}}}[]" id="{{{name}}}[]" value="1"<?php echo $selwrk ?><?php echo CurrentPage()->Discontinued->editAttributes() ?>>
		<span></span>
	</span>
</label>

Kode yang kita letakkan pada Custom Edit Tag berfungsi untuk mengubah tampilan atau control yang digunakan pada halaman Add, Edit, dan Update.

Untuk melihat demonya, silahkan klik di sini. Perhatikanlah di kolom paling kanan yaitu field Discontinued, saat ini sudah berubah menjadi menggunakan control Switch atau Toggle.

Di beberapa halaman lainnya pun pada demo project yang saya sebutkan di atas tadi, Anda akan melihat pemakaian control Switch atau Toggle tersebut. Bagian Ingat Saya pada halaman Login dan bagian Saya setuju dengan Syarat dan Ketentuan pada halaman Registrasi. Tapi dalam hal ini kita tidak menggunakan Custom View Tag maupun Custom Edit Tag, tapi sudah bawaan dari template-nya.

Kesimpulannya, ada begitu banyak keuntungan yang kita dapatkan ketika menggunakan Masino Extensions untuk PHPMaker 2019, dan sayang untuk dilewatkan begitu saja. Waktu untuk membangun Aplikasi Web pun bisa lebih dihemat. Produktivitas meningkat, dan yang paling penting, tanpa mengabaikan kualitasnya.