Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mudahnya Menambahkan Icon di Item Menu Aplikasi Web dari PHPMaker
Betapa Mudah dan Cepatnya Mengikuti Perkembangan PHPMaker
Mudahnya Membuat Extensions untuk Digunakan di Project PHPMaker Anda

Mudahnya Menambahkan Icon di Item Menu Aplikasi Web dari PHPMaker

Ming, 10 Agustus 2014 oleh Masino Sinaga 10 Komentar

Sejak menggunakan Twitter Bootstrap versi 3 di PHPMaker versi 11, maka sekarang Web Developer pun dapat dengan mudahnya menambahkan icon di Item Menu pada Aplikasi Web yang di-generate oleh PHPMaker. Seperti yang kita ketahui, Twitter Bootstrap 3 sudah menyediakan Glyphicons yang berisi kumpulan icon-icon yang bisa diakses sangat mudah tanpa menggunakan sintaks img src.

Artinya, Anda tidak perlu lagi repot-repot menyediakan icon sendiri untuk digunakan di Aplikasi Web Anda. Saya sarankan agar Anda sebaiknya menggunakan icon-icon yang sudah disediakan oleh Twitter Bootstrap 3 tadi. Enaknya lagi, icon-icon ini sudah mewakili semua jenis icon yang sering dibutuhkan di sebuah Aplikasi Web. Menurut dokumentasi yang link-nya sudah saya share di atas, terdapat 200 jenis icon dalam format huruf (font).

Selain itu, icon-icon ini dapat diakses sangat mudah cukup dengan memanggil nama class-nya. Ada sebuah situs yang cukup bagus untuk dijadikan sebagai referensi di samping situs resmi Bootstrap di atas tadi. Nama situs itu adalah: Bootstrap 3 Glyphicons. Saya lebih suka melihat situs ini untuk mendapatkan nama class setiap icon. Di situs ini juga disediakan dokumentasi lengkap cara pemakaiannya.

Katakanlah Anda memiliki salah satu Item Menu dengan teks Help di dalam project PHPMaker Anda. Jika Anda ingin menambahkan icon yang terkait dengan Item Menu ini di Aplikasi Web yang Anda hasilkan dengan PHPMaker 11, maka cukup tambahkan sintaks berikut ke Item Menu tadi melalui menu: Tools -> Multi-Language Property Editor -> Menu Text pada project PHPMaker Anda:

<i class='glyphicon glyphicon-question-sign'></i> Help

Khusus untuk menampilkan icon pada Item Menu, maka kita cukup menggunakan tag i (italic) dengan menyertakan atribut class glyphicon glyphicon-question-sign di dalam tag i pembuka tersebut. Pastikan Anda menyertakan spasi setelah tag i penutup dan sebelum teks Help tadi.

Pastikan juga di dalam root folder dari Aplikasi Web yang di-generate oleh PHPMaker, sudah ada sub-folder fonts yang terdapat di bawah sub-folder bootstrap3. Di dalam sub-folder fonts tadi pastikan sudah ada 4 file, masing-masing sebagai berikut:

  1. glyphicons-halflings-regular.eot
  2. glyphicons-halflings-regular.svg
  3. glyphicons-halflings-regular.ttf
  4. glyphicons-halflings-regular.woff

Sangat mudah, bukan? 🙂

Ditempatkan di bawah: PHPMaker Ditag dengan:glyphicons, PHPMaker Indonesia, 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.

Betapa Mudah dan Cepatnya Mengikuti Perkembangan PHPMaker
Mudahnya Membuat Extensions untuk Digunakan di Project PHPMaker Anda

Komentar

  1. airplanestar mengatakan

    Sab, 10 Juni 2017 pada 11:03 am

    thanks, working bro

    Balas
    • Masino Sinaga mengatakan

      Sab, 10 Juni 2017 pada 6:31 pm

      You’re welcome.

      Balas
  2. purno mengatakan

    Sen, 10 Juli 2017 pada 2:27 pm

    pak Masino, Kalo tombol Logout sama Tombol Change Password mau di kasih icon bagaimana caranya ?

    Balas
    • Masino Sinaga mengatakan

      Sel, 11 Juli 2017 pada 5:51 pm

      Pakai server event MenuItem_Adding, misalnya:

      if ($Item->Url == 'logout.php') {
      	$Item->Text = '<i class="glyphicon glyphicon-log-out"></i> ' . Language()->Phrase("Logout");
      } else if ($Item->Url == 'login.php') { 
      	$Item->Text = '<i class="glyphicon glyphicon-log-in"></i> ' . Language()->Phrase("Login"); 
      }
      
      Balas
  3. galih tsabit mengatakan

    Rab, 29 November 2017 pada 1:44 pm

    kalo buat icon detail pakenya glyphicon-(apa?) ya gan???

    Balas
    • Masino Sinaga mengatakan

      Kam, 30 November 2017 pada 3:09 pm

      Coba langsung saja ke halaman ini: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

      Balas
  4. wahyu setyo utomo mengatakan

    Sel, 20 Februari 2018 pada 11:02 am

    pak masino klw tempalte bootstarap seperti adminlte di phpmaker,gmn ya pak..,mohon info nya
    terima kasih

    Balas
    • Masino Sinaga mengatakan

      Rab, 21 Februari 2018 pada 8:18 pm

      Apakah seperti ini yang dimaksud? –> https://codecanyon.net/item/advanced-horizontal-vertical-layout-for-phpmaker-2018-template/20465156

      Balas
  5. ROYZ mengatakan

    Kam, 16 Januari 2020 pada 7:08 am

    Untuk mengisi site icon bar pakai apa pak?

    Balas
    • Masino Sinaga mengatakan

      Kam, 16 Januari 2020 pada 11:18 am

      Maksudnya bagaimana ya?

      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

  • 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
  • File-File yang Wajib Diperhatikan Setelah Menambah Item User Values di PHPMaker 2025
  • Begini Cara Memuat Tables dari Database Secara Dinamis di PHPMaker 2025

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Mudahnya Menyesuaikan Timezone di Calendar Report pada PHPMaker 2023
  • Nano pada Mudahnya Menyesuaikan Timezone di Calendar Report pada PHPMaker 2023
  • Charly pada Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023
  • Charly pada Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023
  • Masino Sinaga pada Mudahnya Menyembunyikan Tombol Master/Detail di Halaman View pada PHPMaker 2023

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