Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Begini Mudah dan Cepatnya Menambahkan Custom Attributes dari PHPMaker
Mudahnya Menimpa Property PHPMailer di Aplikasi Web dari PHPMaker
Membatasi Akses Versi Live dan Versi Development Aplikasi Web dari PHPMaker

Begini Mudah dan Cepatnya Menambahkan Custom Attributes dari PHPMaker

Rab, 21 Oktober 2015 oleh Masino Sinaga 10 Komentar

Sudah tidak terhitung lagi banyaknya kemudahan, keuntungan, dan kenikmatan yang dirasakan oleh Web Developer ketika menggunakan PHPMaker dalam membangun Aplikasi Web. Mulai dari hal yang paling sederhana, sampai yang paling kompleks sekalipun, bisa ditangani oleh PHPMaker.

Intinya, Web Developer tidak lagi pusing-pusing memikirkan menulis dan menempatkan kode di file-file script untuk menghasilkan fitur tertentu. Mereka cukup hanya menulis sedikit kode saja dari project PHPMaker. Selebihnya, biarkan PHPMaker yang mengurus dan menyelesaikannya.

Kali ini saya akan menunjukkan kepada Anda betapa mudah dan cepatnya kita sebagai Web Developer dapat menambahkan Custom Attribute atau atribut yang bersifat kostum pada Field tertentu.

Semuanya cukup dilakukan dari dalam project PHPMaker. Tidak perlu mengubah kode di file script yang sudah dihasilkan oleh PHPMaker. Tidak perlu mengubah Template yang digunakan oleh PHPMaker.

Katakanlah kita ingin menerapkan kondisi seperti ini. Ketika Pengguna menempatkan kursor pada sebuah Field yang menggunakan elemen TextBox di Form Add maupun Edit, maka warna latar belakang control TextBox tersebut akan berubah menjadi kuning. Ketika kursor meninggalkan TextBox tadi, maka warna latar belakang control TextBox kembali menjadi putih.

Penasaran ingin tahu bagaimana caranya? Simak langkah-langkah berikut.

Pertama, klik salah satu Field yang Anda inginkan dari panel Database di sebelah kiri dari project PHPMaker Anda, lalu pastikan tab Fields di sebelah kanan yang sedang terpilih.

Kedua, dari panel Edit Tag di sebelah kanan bawah, salin kode berikut ke dalam Custom attributes:

"onfocus='setBackgroundColor(this.id)' onblur='clearBackgroundColor(this.id)'"

Ketiga, klik tab Code (Server Events, Client Scripts and Custom Templates), pergi ke lokasi ini: Client Scripts -> Global -> Pages with header/footer -> Global Code, lalu salin kode berikut ke dalam editor kode di sebelah kanannya:

function setBackgroundColor(x) {
	document.getElementById(x).style.backgroundColor = "yellow";
}

function clearBackgroundColor(x) {
	document.getElementById(x).style.backgroundColor = "white";
}

Keempat, atau langkah yang terakhir, generate ulang semua file script seperti biasa menggunakan PHPMaker. Selesai.

Setelah itu, jalankan Aplikasi Web dari browser, lalu cobalah untuk menambah data, klik pada Field yang Anda pilih pada langkah Pertama di atas, perhatikanlah bahwa seharusnya warna latar belakang TextBox menjadi kuning. Lalu cobalah untuk memindahkan kursor mouse ke Field lain dengan menekan tombol Tab di keyboard, maka warna latar belakang TextBox menjadi putih kembali.

Hal yang sama juga berlaku saat Anda mengubah data. Dengan kata lain, hanya dengan menulis kode sedikit itu saja, Anda sebagai Web Developer sudah bisa membuat perubahan warna latar belakang pada Field yang kita inginkan. Baik saat mendapat event focus maupun saat event lost focus.

Dengan cara ini, maka kita juga dapat menerapkan kondisi tersebut pada Field tertentu lainnya. Cukup hanya dengan mengulangi langkah nomor 2 di atas pada Field lain yang kita inginkan. Konsep yang digunakan oleh PHPMaker ini tentu saja semakin menyederhanakan kode yang ditulis oleh Web Developer, sehingga proses development menjadi lebih cepat.

Betapa cepat, mudah, dan menyenangkan sekali menggunakan PHPMaker, bukan? Masih bertahan membangun Aplikasi Web dengan cara-cara kuno dan menghabiskan banyak waktu Anda di depan komputer? Semuanya terserah kepada Anda! 🙂

Ditempatkan di bawah: PHPMaker Ditag dengan:background, Belajar PHPMaker, Client Scripts, focus, Javascript, lostfocus, onbrur, onfocus, 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, ilovephpmaker.com, dan phpmakerprojects.com.

Mudahnya Menimpa Property PHPMailer di Aplikasi Web dari PHPMaker
Membatasi Akses Versi Live dan Versi Development Aplikasi Web dari PHPMaker

Komentar

  1. ariguswahyu mengatakan

    Sen, 16 Januari 2017 pada 9:40 am

    kalo warna nya berubah (misalnya kuning) pada form edit petama kali dibuka bagaimna pak masino?
    saya pake event onload kok tidak berfungsi ya pak, mohon koreksi terimaksih

    berikut kode saaya

    “onload=’setBackgroundColor(this.id)'”

    Balas
    • Masino Sinaga mengatakan

      Sen, 16 Januari 2017 pada 10:01 am

      Atribut onload itu tidak melekat kepada control input di form. Itu makanya tidak berhasil. Atribut onload itu melekat kepada tag body.

      Solusinya, Anda bisa menggunakan code jQuery dengan mengeset atribut onload tadi ke tag body. Google untuk info lebih lanjut.

      Balas
      • ariguswahyu mengatakan

        Sen, 16 Januari 2017 pada 10:48 am

        terimakasih pak masino, atas saolusinya. akan saya coba. 😀

        Balas
        • Masino Sinaga mengatakan

          Sen, 16 Januari 2017 pada 11:06 am

          Sama-sama.

          Balas
          • ariguswahyu mengatakan

            Sel, 17 Januari 2017 pada 8:08 pm

            cuma dengan kode sedikit ini , saya sangat terbantu sekali

            $(document).ready(function() {
                $('#x_NORUJUKAN_SEP').css('background-color', '#ffff00');
            }); 
            

            makin cinta sma php maker deh, makasih pak masino atas pencerahannya, 😀

            Balas
            • Masino Sinaga mengatakan

              Rab, 18 Januari 2017 pada 8:34 am

              Hehehe… sama-sama. 🙂

              Balas
  2. ariguswahyu mengatakan

    Rab, 18 Januari 2017 pada 6:53 pm

    ternyata saya menjumpai masalah lagi pak, ternyata kode jquery diatas (pada kometar saya), tidak berlaku pada textboxt yang terdapat lookup table nya, apa yang harus saya lakukan lagi pak masino, mhon pencerahanya kembali, terimakasih 😀

    Balas
    • Masino Sinaga mengatakan

      Kam, 19 Januari 2017 pada 11:07 am

      Coba cek id dari elemen TextBox-nya. Sepertinya id jika tanpa Lookup beda dengan id jika dengan Lookup.

      Balas
  3. widodo mengatakan

    Rab, 14 Oktober 2020 pada 9:27 am

    Pak sy mau tanya…Kalau mau input lokasi langsung dari google map dengan php maker gimana? Sekalian kalau mau input foto langsung dari php maker gmn?Terima Kasih atas balasannya…

    Balas
    • Masino Sinaga mengatakan

      Sen, 19 Oktober 2020 pada 7:58 am

      Kalau input foto dari PHPMaker, pakai fitur upload file aja. Aktifkan control File dari Fields setup -> panel Edit Tag.

      Untuk input lokasi langsung dari Google Map, tinggal input saja data Latitude dan Longitude-nya.

      Balas

Tinggalkan Balasan Batalkan balasan

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

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

Pos-pos Terbaru

  • Masino Extensions for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Dendi pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. 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 - 2025 | WordPress | Catat masuk | Kembali ke atas