Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mudahnya Mengubah Warna Glyphicons Bootstrap 3 di Aplikasi Web dari PHPMaker
Mudahnya Mendapatkan Info Pengguna Setelah Login di Aplikasi Web dari PHPMaker
Mudahnya Membatasi Jumlah Karakter Minimum Auto-Suggest dari PHPMaker

Mudahnya Mengubah Warna Glyphicons Bootstrap 3 di Aplikasi Web dari PHPMaker

Ming, 25 Januari 2015 oleh Masino Sinaga 10 Komentar

Seperti yang sudah kita ketahui, sejak versi 11, PHPMaker menggunakan Twitter Bootstrap 3. Salah satu fitur yang dioptimalkan oleh PHPMaker dari CSS Framework yang satu ini adalah penggunaan glyphicons untuk menampilkan icon yang mewakili beberapa fungsi seperti Add (Copy), Edit, Delete, dan sebagainya.

Secara standar, warna icon tersebut adalah hitam. Suatu ketika, Anda dituntut untuk mengubah warna icon tersebut. Misalnya icon Add menjadi warna Hijau, icon Edit menjadi warna Biru, dan icon Delete menjadi warna Merah. Hm, boleh juga nih idenya, hehehe…

Katakanlah di halaman List untuk table orders pada project demo, kita akan mengubah ketiga icon yang masing-masing mewakili 3 fungsi di atas tadi yang terdapat di setiap Record.

Pertanyaannya adalah, bagaimana cara mengubah warna icon yang berasal dari glyphicons tadi pada Aplikasi Web yang dihasilkan oleh PHPMaker? Gampang sekali. Anda cukup menambahkan kode CSS dan PHP pada dua langkah di bawah ini.

  1. Tambahkan kode CSS berikut di bawah lokasi: HTML -> Styles -> Edit styles -> di bawah baris kode /* your CSS styles here */:

    .red, .red a {
      color: red;
    }
    .green, .green a {
      color: green;
    }
    .blue, .blue a {
      color: blue;
    }
    
  2. Tambahkan kode PHP pada server event ListOptions_Rendered yang berada di bawah lokasi Server Events -> Table-Specific -> List Page:

    // ListOptions Rendered event
    function ListOptions_Rendered() {
    	// Example: 
    	//$this->ListOptions->Items["new"]->Body = "xxx";
    	$this->ListOptions->Items["copy"]->Body = '<a class="ewRowLink ewCopy" title="Copy" data-caption="Copy" href="ordersadd.php?showdetail=&amp;OrderID='.$this->OrderID->CurrentValue.'"><span data-phrase="CopyLink" class="icon-copy ewIcon green" data-caption="Copy"></span></a>';
    	$this->ListOptions->Items["edit"]->Body = '<a class="ewRowLink ewEdit" title="Edit" data-caption="Edit" href="ordersedit.php?showdetail=&amp;OrderID='.$this->OrderID->CurrentValue.'"><span data-phrase="EditLink" class="icon-edit ewIcon blue" data-caption="Edit"></span></a>';
    	$this->ListOptions->Items["delete"]->Body = '<a class="btn btn-default ewRowLink ewDelete btn-sm"  onclick="ew_ClickDelete(this);return ew_ConfirmDelete(ewLanguage.Phrase(\'DeleteConfirmMsg\'), this, \'ordersdelete.php?OrderID='.$this->OrderID->CurrentValue.'\'); return false;" title="Delete" data-caption="Delete" href="javascript:void(0);"><span data-phrase="DeleteLink" class="glyphicon glyphicon-trash ewIcon red" data-caption="Delete"></span></a>';	
    }
    

Karena kita menggunakan fitur penghapusan di setiap Record (bukan Multiple-Delete), maka pastikan Anda tidak mengaktifkan item Multiple delete baik dari pengaturan level global di PHP -> Page Options (Global), atau dari pengaturan level table di Table -> Table-specific Options -> Multiple delete.

Pastikan Anda sudah mengaktifkan item Inline delete dari salah satu level pengaturan di atas tadi sebelum men-generate semua file script dengan menggunakan PHPMaker. Pengaturan ini perlu diaktifkan, supaya di setiap Record ditampilkan icon untuk menghapus.

Wow! Mudah sekali, bukan? 😀

Ditempatkan di bawah: PHPMaker Ditag dengan:CSS, glyphicons, ListOptions_Rendered, PHPMaker Indonesia, Server Events, Tutorial PHPMaker, Twitter Bootstrap 3

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 Mendapatkan Info Pengguna Setelah Login di Aplikasi Web dari PHPMaker
Mudahnya Membatasi Jumlah Karakter Minimum Auto-Suggest dari PHPMaker

Komentar

  1. khm mengatakan

    Sen, 26 Januari 2015 pada 2:46 pm

    Wah mantap artikel2nya ni mas…

    Balas
    • Masino Sinaga mengatakan

      Sen, 26 Januari 2015 pada 3:48 pm

      Terima kasih. 🙂

      Balas
  2. Satyo mengatakan

    Rab, 28 Januari 2015 pada 2:25 pm

    Mas, klo untuk mengubah letak tombol button di phpmaker11 bagaimana ya? soalnya sekarang pake bootstrap jadi agak bingung..tks

    Balas
    • Masino Sinaga mengatakan

      Rab, 28 Januari 2015 pada 2:51 pm

      Maksudnya mengubah letak tombol itu seperti apa ya? Bisa diberikan contoh kasusnya?

      Balas
  3. Herman mengatakan

    Sen, 2 Februari 2015 pada 5:07 pm

    Master setelah saya coba sesuai penduan diatas kok tidak ada perubahan warna iconnya. Apakah karena saya menggunakan ekstension masino sehingga gak muncul?

    Mohon Pencerahannya, Terima Kasih.

    Balas
    • Masino Sinaga mengatakan

      Sen, 2 Februari 2015 pada 5:27 pm

      Pastikan Anda men-download ulang semua file Masino Extensions hari ini, karena beberapi hari yang lalu saya menambahkan kemampuan ini ke dalam salah satu Extension saya.

      Balas
      • Herman mengatakan

        Sen, 25 Mei 2015 pada 1:05 pm

        Mau tanya master di Masino Ekstensions mana letak untuk perubahan warna icon dan apakah otomatis berubah warna iconnya ataukah tetap menambahkan script pada tiap-tiap table seperti penjelasan no. 2 diatas.

        Terima Kasih

        Balas
        • Masino Sinaga mengatakan

          Sen, 25 Mei 2015 pada 2:02 pm

          Tetap harus menambahkan di server event ListOptions_Rendered dari table yang diinginkan.

          Balas
  4. iwan setiawan mengatakan

    Kam, 30 Juli 2015 pada 3:30 pm

    saya mencari artikel perubaahan warna di tempat bang masino, namun tidak saya temukan.
    permasalahan saya adalah, saya diminta merubah warna summary pada phpreportmaker (master/detail summary).

    bagaimana cara agar hal tsb dapat saya lakukan ya bang ?

    Balas
    • Masino Sinaga mengatakan

      Kam, 30 Juli 2015 pada 4:15 pm

      PHPReportMaker belum dibahas untuk saat ini. Coba pelajari dari menu Help di PHPReportMaker-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