Sejak versi 11, PHPMaker mengoptimalkan penggunaan glyphicon untuk menampilkan icon di beberapa tombol. Contoh, untuk tombol Add PHPMaker menggunakan icon glyphicon-plus yang bergambar tanda plus besar berwarna hitam, untuk tombol Delete PHPMaker menggunakan icon glyphicon-trash yang bergambar keranjang sampah, dan sebagainya.
Pertanyaannya adalah, bagaimana cara kita bisa mengetahui bahwa PHPMaker menggunakan icon-icon dari glyphicon tersebut selain dari menampilkan kode HTML (View Page Source) dari browser? Jangan khawatir, karena PHPMaker sudah menyederhanakan hal ini dengan mendefinisikannya dalam file bahasa berekstensi .xml.
Contoh, jika Anda baru pertama kali menginstal PHPMaker, maka Anda seharusnya baru memiliki sebuah file .xml yang bernama english.xml di dalam sub-folder languages di bawah folder instalasi PHPMaker Anda.
Sekarang perhatikan phrase berikut di dalam file tersebut:
<phrase id="AddLink" value="Add" class="glyphicon glyphicon-plus ewIcon"/><!-- v11 -->
Itu adalah phrase yang digunakan untuk menampilkan icon di tombol Add pada Aplikasi Web yang dihasilkan oleh PHPMaker. Dia memiliki id yang bernama AddLink dengan tulisan Add pada property value yang akan muncul sebagai tooltip ketika Pengguna menempatkan kursor mouse di atas tombol Add. Dia juga menggunakan kombinasi class glyphicon-plus milik Twitter Bootstrap 3 dan class ewIcon yang dibuat oleh PHPMaker.
Hal yang serupa dengan icon di atas itu bisa kita lihat untuk tombol Delete, dengan kode phrase sebagai berikut:
<phrase id="DeleteLink" value="Delete" class="glyphicon glyphicon-trash ewIcon"/><!-- v11 -->
Dari dua contoh phrase tersebut, maka kita bisa menyimpulkan bahwa PHPMaker sangat cerdik mengoptimalkan class glyphicon milik Twitter Bootstrap 3 untuk menampilkan icon pada tombol tertentu. Cerdik, karena PHPMaker menyederhanakan penggunaan class pada phrase tertentu melalui file .xml tadi.
Mungkin di antara Anda ada yang bertanya, lalu bagaimana jika seandainya kita ingin mengubah atau menghilangkan icon tersebut? Hehe, jawabannya sangatlah mudah. Untuk mengubah icon tersebut, maka Anda tinggal mengubah nama class yang digunakan tadi menjadi nama class yang sudah Anda definisikan sendiri.
Sedangkan untuk menghilangkan icon tersebut, maka Anda cukup hanya menghilangkan property class dari phrase yang bertalian. Contoh, untuk tombol Add di atas, maka hasilnya menjadi ini:
<phrase id="AddLink" value="Add"/><!-- v11 -->
Tentu saja Anda harus melakukan hal yang sama pada file .xml lainnya yang Anda miliki pada sub-folder languages tadi. Terakhir, jangan lupa, Anda juga harus men-generate ulang file bahasa yang berekstensi .xml tersebut dari bagian Other files pada jendela dialog Generate.
Betapa mudah, cepat, dan menyenangkan sekali, bukan? 🙂
trie mengatakan
Bisa minta tolong contohnya pak……sy harus simpan dimana icon add (tambah) tersebut dan clas nya seperti apa…..trims
Masino Sinaga mengatakan
Icon tersebut sudah satu kesatuan dari framework Bootstrap yang digunakan oleh PHPMaker. Class icon Add sudah ada contohnya di atas. Silahkan baca ulang dengan teliti artikelnya.
trie mengatakan
Mantap phpmaker…..baru paham pak….tq masukanya
Masino Sinaga mengatakan
Sama-sama.
tacan mengatakan
Halo Mas Masino,
Saya pengguna PHPMAKER newbie dan baru banget mencoba2 PHPMAKER..
Saya mau tanya kalau utk menghilangkan Icon PHPMAKER di pojok kiri atas sama footernya bagaimana ya pak? mau saya ganti icon sendiri dan copyright sendiri..
mohon pencerahannya
Masino Sinaga mengatakan
Hai tacan,
Anda bisa menghapus icon dan footer masing-masing dari bagian HTML -> General -> Site icon, dan Footer text pada project PHPMaker Anda.
Penting untuk diingat, bahwa pengaturan teks yang berada di footer tersebut hanya aktif jika PHPMaker yang Anda gunakan adalah versi yang sudah memiliki License Key. Jika masih pakai versi trial, maka pengaturan Footer text tadi menjadi tidak aktif (disabled).
anonymous mengatakan
pak bagaimana ya cara kita ganti icon user yg di navbar atas dengan photo profile user?
Masino Sinaga mengatakan
Anda bisa menggunakan server event Page_Foot. Baca dokumentasinya.