Galih Satriaji
[email protected] 3 Mei 2008
Panduan Dasar Membuat Template pada Joomla
Pantai Prigi, Trenggalek, Jawa Timur Menghadap langsung ke pantai selatan. Nikon D40 | Sigma 10-20mm HSM
Pendahuluan Joomla, suksesor Mamboo, merupakan salah satu CMS (Content Management System) yang paling terkenal. Ia cepat populer karena instalasinya yang sangat mudah dan cepat. Meskipun mudah, struktur Joomla tidak sekompleks Mamboo sehingga mudah dimodifikasi sesuai dengan kebutuhan. Nah, kali ini saya tidak berbicara mengenai bagaimana melakukan instalasi Joomla. Panduan instalasinya bisa dicari langsung di blog developer Joomla yang juga mentor Google Summer of Code: Mbak Iin, di http://ai23.wordpress.com. Di sini saya akan membahas sesuatu yang agak lanjut sedikit, yaitu mengenai membuat layout template Joomla kita sendiri. Bahasa gampangannya sih: membuat tampilan Joomla berdasarkan desain kita sendiri. Ternyata membuat template Joomla sangat mudah. Semudah membuat template-nya Wordpress. Kita bisa atur Joomla sedemikian rupa sehingga sebenarnya kita bisa memperlakukan Joomla sebagai semacam framework atau bingkai kerja kita untuk membuat situs berbasis isi seperti misalnya portal. Tak perlu membuat dari awal. Hampir semuanya sudah disediakan oleh Joomla. Oke, cuap-cuap pendahuluannya sampai di sini saja. Bisa nggak ya sebuah buku itu nggak usah pakai pendahuluan segala. Hahaha.. Apa yang kita perlukan untuk membuat template Joomla pertama kita? Atau kalau bahasa kerennya: pre-requisites. Ini dia: 1. Joomla. (Hya iyalaaah…). Saya pakai Joomla 1.0.15. Bisa didownload di http://www.joomla.org 2. Apache Webserver dengan PHP aktif 3. Database MySQL 4. Teks editor. Saya suka ViM. Editor UNIX ini luar biasa. Meski pakai Windows, saya pakai GViM sebagai editor menggantikan Notepad. Asumsi saya, Anda sudah berhasil melakukan instalasi Joomla. Sekedar untuk mempersingkat waktu dan agar panduan ini tetap fokus. Sekarang masuk halaman Administrasi, dan buka bagian Template Manager (Site – Template Manager – Site Manager). Tampilannya seperti ini bukan?
Sejatinya tampilan itu diambil dari daftar template yang ada di folder [JOOMLA_HOME]/templates. Bawaan paket Joomla memiliki dua template yaitu MadeYourWeb dan Rhuk_SolarFlare_ii yang merupakan template default Joomla. Bocoran sedikit, saya belajar buat template ya dari dua template itu.
Wokeh, sekarang buat folder baru tempat template baru kita nanti. Kalau saya, saya buat folder bernama mytemplate. Ada dua komponen utama yang diperlukan agar Joomla dapat mengenalinya sebagai sebuah template: -
File templateDetails.xml File ini menjelaskan setiap detail dari template. Nama template, penulis, tanggal dibuat, email penulis, daftar file-file PHP, CSS, dan gambar-gambar yang digunakan. File ini wajib ada karena Joomla akan membaca file ini sebagai acuan.
-
File index.php File ini adalah halaman yang dipakai untuk menampilkan semua isi website. Joomla hanya memerlukan satu file tunggal ini untuk menampilkan semua isinya. Jadi, di sinilah lembar kerja kita waktu membuat layout template sendiri.
Selebihnya terserah kita mau menaruh file apa saja di site ini. Biasanya tambahan file yang diperlukan adalah CSS (Cascading Stylesheet) untuk mendefinisikan tampilan, dan gambargambar pendukung untuk mempercantik tampilan. Ingat, semua file-file tambahan ini harus kita daftarkan di file templateDetails.xml.
File templateDetails.xml Contoh isi file templateDetails.xml adalah sbb:
Tag-Tag dan elemennya adalah:
<mosinstall> Ini adalah root dari file XML ini. Karena XML yang akan kita buat digunakan untuk mendeskripsikan template, maka tipe dari mosinstall adalah template. Mosinstall memiliki anggota elemen-elemen yaitu:
<description>
: Nama template : Tanggal pembuatan : Nama penulis template : Keterangan mengenai lisensi : Alamat email penulis yang bisa dihubungi : Website penulis : Versi template : Deskripsi template
: Ini adalah file-file yang diperlukan. Yang utama adalah index.php. Jika file index.php memiliki dependensi dengan file lain (misalnya include file lain), daftarkan juga di sini dengan tag : Ini adalah daftar gambar pendukung yang diperlukan untuk template. Semua harus difaftarkan atau Joomla tidak mengenali file ini meskipun sudah ada di folder template. : Daftar file stylesheet yang diperlukan.
Nah, dengan file ini, template Anda sudah bisa terbaca di halaman Template Manager dan Anda bisa langsung menggunakannya.
File index.php Sekarang kita menuju ke file utama: index.php. Seperti biasa, tentunya Anda harus membuat desain layoutnya terlebih dahulu. Kebanyakan memang desain web masa kini menggunakan gaya tableless layout dan menggunakan DIV dan CSS sebagai komponen utama untuk layout. Tetapi sebenarnya Anda bebas menggunakan gaya apa saja. Jadi, saya membuat sebuah file index.php biasa dengan style CSS. Saya ambil dari template milik Dreamweaver 8 agar cepat, hehehe. Jadi, di folder template saya sekarang sudah ada file-file berikut ini:
Saya sama sekali tidak menggunakan gambar di sini. File index.html adalah file kosong yang mencegah terjadi directory listing Apache. Isinya file kosong saja. Sementara, isi statik dari “desain” template saya kira-kira seperti ini:
Oke, kita hajar sekarang file index.php dan lihat apa isinya:
Ini adalah isi head dari file saya. Pada intinya, setelah kita membuat desain template dan menjadi tag HTML, langkah berikutnya adalah mengisinya dengan isi dinamis dari Joomla. Sederhana, kita hanya meload modul-modul yang sudah ada di file ini. Oh iya, saya tidak akan terlalu detail membahas desain layout-nya, tetapi bagaimana memasukkan isi dinamis Joomla ke dalam file ini. Well, dari gambar di atas, kita memiliki beberapa fungsi PHP bawaan Joomla, yaitu: mosShowHead() Fungsi untuk meload header. Salah satu yang paling kita perlukan adalah tag sehingga template kita menampilkan nama site secara dinamis menurut konfigurasi. $mosConfig_live_site Ini adalah variabel global yang menyimpan URL puncak dari site kita. Kita bisa memakai variabel ini untuk menulis absolute path lokasi sebuah file.<br />
<br />
Meload Modul-Modul Setiap bagian dari fitur website dalam Joomla dinamakan modul. Dalam pembuatan template, kita me-load modul-modul yang kita perlukan. Kalau kita ingin mempertahankan dinamisasi, kita harus cerdik mengatur modul-modul tersebut bisa tampil atau tetap tersembunyi sesuai dengan konfigurasi yang dilakukan oleh Administrator. Sebelum menjelaskan detail fungsi load modul, saya akan meneruskan pembuatan template saya di index.php. Sekarang saya ingin membuat judul halaman menjadi dinamis:<br />
<br />
Site Name<br />
<br />
Site Name tetap saya pertahankan statik, dan global link akan saya isi dengan modul Top Menu. Saya meloadnya dengan fungsi msLoadModules(‘user3’, -2). Saya akan menjelaskan artinya setelah ini. Hasilnya:<br />
<br />
Modul Top Menu telah berhasil di load. Tentu saja posisinya sebaiknya tidak begitu, mestinya horizontal. Ah gampang, masalah itu tinggal urusan kosmetik di bagian stylesheet CSS-nya. Akan saya biarkan begini saja. (bilang aja males Lih!)<br />
<br />
Page Name dan Link Penanda Navigasi Statiknya:<br />
<br />
Kodenya:<br />
<br />
Saya belum menemukan cara elegan untuk mendapatkan nama setiap halaman. Jadi saya mengambil dan memodifikasinya dari $mainframe->_head[„title‟] atau dari tag <title> yang dikeluarkan oleh Joomla lewat fungsi mosShowHead(). Untuk menampilkan link penanda navigasi, gunakan fungsi mospathway(). Dan bagaimana tampilan fungsional bagian ini? Seperti di bawah ini:<br />
<br />
Fungsi Search Kini kita menuju ke sayap kiri. Saya ingin mengaktifkan fungsi search-nya.<br />
<br />
No problem, kode pendek di bawah meload modul search dan menyelesaikan masalah:<br />
<br />
Hasilnya? Seperti di bawah ini:<br />
<br />
Navigasi Kiri Sekarang kita akan meload semua hal yang oleh Joomla ingin ditampilkan di bagian kiri. Modul-modul pada bagian ini bisa Main Menu, User Menu, Other Menu, Login Form, dsb. Saya ingin menggantikan desain statik saya yang di bawah ini:<br />
<br />
Oleh karena itu, saya meload semua modul yang memiliki posisi di sebelah kiri dengan kode berikut ini:<br />
<br />
Saya tidak memerlukan bagian Related Link Category (lihat screenshot keseluruhan halaman statik), sehingga kode HTML pada bagian itu saya hapus. Lihat bagian ini yang sudah fungsional dan dinamis mengambil dari Joomla:<br />
<br />
Waw, semua modul saya load. Tentu saja Anda bisa mengatur kemunculan modul-modul ini di halaman administrasi Joomla.<br />
<br />
Navigasi Kanan Desain statik saya menyediakan tempat untuk bagian yang akan ditaruh di sayap kanan halaman. Di desain statik, saya menamakannya Headlines, seperti dibawah ini:<br />
<br />
Seperti sayap kiri, bagian ini juga akan saya isi dengan segala modul-modul Joomla yang oleh administrator Joomla sedianya akan ditempatkan di sayap kanan. Kodenya? Sama sederhananya dengan sayap kiri:<br />
<br />
Oke, di sini ada tambahan pengecekan dengan fungsi mosCountModules. Ini dimaksudkan jika konfigurasi tidak menampilkan modul sayap kanan, maka jangan pula layout menampilkan sayap kanan dan memberikan ruang kosong untuk hal-hal yang lebih bermanfaat. Di sini selain saya meload modul-modul di sayap kanan, saya juga meload modul user1 dan user2 di sayap kanan. Menurut sampel data dari Joomla, modul user1 dan user2 ini adalah Latest News dan Popular. Berikut tampilannya:<br />
<br />
Bagian Tengah, Bagian Utama Setelah selesai dengan bagian atas, sayap kiri, dan sayap kanan, maka kita menyisakan ruang yang cukup luas di bagian tengah. Tentu saja bagian isi. Isi yang akan ditampilkan adalah isi modul-modul Joomla. Jadi ketika salah satu modul diklik, tampilannya akan ditaruh di bagian ini. Pada desain statik, saya menempatkan ruang yang cukup luas untuk isi:<br />
<br />
Nah, bagian ini, digantikan oleh kode PHP yang sangat pendek tapi telah berbicara segalanya:<br />
<br />
Fungsi itu memuat isi dari modul yang sedang aktif, seperti screenshot di bawah ini, dimana saya sedang berada pada halaman lisensi Joomla.<br />
<br />
Nah, sampai di sini, template kita telah siap digunakan. Sederhana bukan? Untuk melakukan pengaturan dan modifikasi (customize) tiap modul, Anda harus menuju masing-masing modul yang berada pada folder [JOOMLA_HOME]/modules. Kalau ada kesempatan, saya akan bahas detail modul ini pada kesempatan yang lain. Template pertama kita sedang beraksi:<br />
<br />
Packaging Sejauh ini, kita telah menyelesaikan template pertama kita. Sekarang saatnya menyiapkan packaging agar siap didistribusikan. Caranya simpel, kumpulkan semua dalam satu folder, lalu bungkus dalam format ZIP. Sudah begitu saja. Asal ada templateDetails.xml, Joomla akan mengenalinya sebagai template-set ketika diinstall di [Administrator Menu] – Installers – Templates Site.<br />
<br />
mosLoadModules Dalam layouting tadi, kita menggunakan fungsi ini secara berkali-kali. Berikut penjelasannya. Fungsi ini digunakan untuk menampilkan modul di tempat yang kita inginkan. Bentuk umum fungsi ini adalah sbb:<br />
<br />
Menampilkan semua modul yang diletakkan pada $position_name. Setiap modul memiliki posisi sebagai penanda kelompok. Ada banyak nama posisi yang didefinisikan oleh Joomla. Untuk melihat setiap modul memiliki posisi apa, bisa dilihat di [Administrator Menu] – Modules – Site Modules.<br />
<br />
Sampel data Joomla menempatkan modul-modul pada posisi-posisi di bawah ini: Banner:<br />
<br />
-<br />
<br />
Banners<br />
<br />
Left: -<br />
<br />
Main Menu User Menu Other Menu Login Form Syndicate Statistics Template Chooser Archive Sections Related Items Wrapper<br />
<br />
Right: -<br />
<br />
Polls Who‟s Online Random Image<br />
<br />
Top: -<br />
<br />
Newsflash<br />
<br />
User1: -<br />
<br />
Latest News<br />
<br />
User2: -<br />
<br />
Popular<br />
<br />
User3: -<br />
<br />
Top Menu<br />
<br />
User4: -<br />
<br />
Search<br />
<br />
Parameter kedua adalah $style. Parameter ini sifatnya opsional, boleh diisi boleh juga tidak. Parameter ini menunjukkan bagaimana data ditampilkan. Nilai yang valid adalah:<br />
<br />
0: Default. Modul ditampilkan dalam kolom-kolom. Contoh outputnya:<br />
<br />
1: Modul ditampilkan secara horizontal. Contoh outputnya:<br />
<br />
-1: Modul ditampilkan dalam data saja tanpa markup sama sekali dan tanpa judul. Contohnya seperti di bawah ini:<br />
<br />
-2: Modul ditampilkan dalam format X-Joomla. Contoh output:<br />
<br />
-3: Modul ditampilkan dalam format yang memungkinkan dalam format yang lebih kompleks, misalnya dalam kotak tanpa sudut. Contoh output:<br />
<br />
Penutup Ternyata simpel juga ya membuat layout sendiri. Yang perlu kita ketahui untuk membuat template yang jauh lebih kompleks dan dinamis, pada dasarnya adalah fungsi-fungsi built-in Joomla yang berhubungan dengan pembuatan template. Fungsi-fungsi ini bisa dilihat di situs developer Joomla. Berikut ini adalah link-link yang bermanfaat untuk eksplorasi Joomla lebih dalam: -<br />
<br />
http://www.howtojoomla.net http://dev.joomla.org http://help.joomla.org http://www.id-joomla.com http://ww.joomla.org/<br />
<br />
Daftar Pustaka dan Ucapan Terimakasih Secara eksklusif, tentu saja terima kasih untuk Mbak Iin, developer Joomla yang sudah terkenal di seantero dunia lewat Google Summer of Code-nya. Beliau dapat dihubungi di blognya di http://ai23.wordpress.com.<br />
<br />
Berikut daftar pustaka dalam menyusun panduan kecil ini: -<br />
<br />
-<br />
<br />
http://www.howtojoomla.net/content/view/25/6/ http://dev.joomla.org/content/view/37/58/ http://dev.joomla.org/component/option,com_jdwiki/Itemid,/id,deprecate:functions/&s=mospathway http://help.joomla.org/content/view/33/60/ http://www.idjoomla.com/component/option,com_fireboard/Itemid,26/func,view/catid,6/id,17741 / http://joomla.org/<br />
<br />
Terima kasih, Salam hangat saya untuk Anda, Galih Satriaji [ http://blog.galihsatria.com ]<br />
<br />
Pantai Prigi, Trenggalek, Jawa Timur Nikon D40 | Sigma 10-20mm HSM<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/panduan-dasar-membuat-template-pada-joomla" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Panduan Dasar Membuat Template pada Joomla"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script> 
