Masino Sinaga

Web Development, PHPMaker, & PHP Report Maker

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

Januari 25, 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 dan ilovephpmaker.com.

Mudahnya Mendapatkan Info Pengguna Setelah Login di Aplikasi Web dari PHPMaker
Mudahnya Membatasi Jumlah Karakter Minimum Auto-Suggest dari PHPMaker

Comments

  1. khm mengatakan

    Januari 26, 2015 pada 2:46 pm

    Wah mantap artikel2nya ni mas…

    Balas
    • Masino Sinaga mengatakan

      Januari 26, 2015 pada 3:48 pm

      Terima kasih. 🙂

      Balas
  2. Satyo mengatakan

    Januari 28, 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

      Januari 28, 2015 pada 2:51 pm

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

      Balas
  3. Herman mengatakan

    Februari 2, 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

      Februari 2, 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

        Mei 25, 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

          Mei 25, 2015 pada 2:02 pm

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

          Balas
  4. iwan setiawan mengatakan

    Juli 30, 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

      Juli 30, 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 *

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