Masino Sinaga

Web Development, PHPMaker, & PHP Report Maker

Anda di sini: Beranda / PHPMaker / Mudahnya Mengubah CheckBox Menjadi Switch atau Toggle di PHPMaker 2019
Horeeeee … PHPMaker 2020 Sudah Dirilis
Mengingat Kembali Posisi Item Menu di Sidebar Saat Halaman Dimuat Berikutnya

Mudahnya Mengubah CheckBox Menjadi Switch atau Toggle di PHPMaker 2019

Agustus 2, 2019 oleh Masino Sinaga 4 Komentar

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.

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, PHPMaker 2019, PHPMaker Indonesia, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com dan ilovephpmaker.com.

Horeeeee … PHPMaker 2020 Sudah Dirilis
Mengingat Kembali Posisi Item Menu di Sidebar Saat Halaman Dimuat Berikutnya

Comments

  1. john mengatakan

    Agustus 3, 2019 pada 9:59 am

    mantap pa

    Balas
    • Masino Sinaga mengatakan

      Agustus 3, 2019 pada 4:19 pm

      Makasih om john. 🙂

      Balas
  2. budi mengatakan

    Agustus 27, 2019 pada 1:45 pm

    mantap suhu masino..

    mohon petunjuk kalo digunakan di tabel detail jadi error suhu..
    “Notice: Undefined property: PHPMaker2019\PJU\kontra_view::$veri in C:\xampp\htdocs\PJU\surveygrid.php on line 728

    Notice: Trying to get property ‘CurrentValue’ of non-object in C:\xampp\htdocs\PJU\surveygrid.php on line 728” padahal tipe data field veri adalah enum.. tapi kalo digunakan di tabel master sukses.. kenapa ya suhu?

    Salam

    Balas
    • Masino Sinaga mengatakan

      Oktober 11, 2019 pada 10:43 am

      Seperti apa kode di baris 728 tersebut?

      Balas

Tinggalkan Balasan ke john Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pos-pos Terbaru

  • Server Event Page_Render dan Page_Rendering di PHPMaker, Apa Sih Bedanya?
  • Begini Mudahnya Mengubah Judul Browser Secara Dinamis di PHPMaker 2021
  • Solusi Supaya PreviewRow dan PreviewOverlay Bisa Sama-Sama Berfungsi di PHPMaker 2021
  • Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Seperti Ini Mudahnya Menyembunyikan Data Label di Chart dari PHPMaker 2021

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Masino Sinaga pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021
  • Masino Sinaga pada Mudahnya Menambahkan Global Function untuk Auto-Update Field di PHPMaker
  • Abu Syifa pada Setting Import Data Berikut Wajib Anda Ketahui Bedanya di PHPMaker 2021
  • Abu Syifa pada Jangan Pernah Lagi Mencampur Kode PHP di Client Script atau Startup Script pada PHPMaker 2021

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2019 | WordPress | Catat masuk | Kembali ke atas