Galih Satriaji

galihsatria@gmail.com
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 gambar-
gambar 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:

<name> : Nama template

<creationDate> : Tanggal pembuatan
<author> : Nama penulis template
<copyright> : Keterangan mengenai lisensi
<authorEmail> : Alamat email penulis yang bisa dihubungi
<authorURL> : Website penulis
<version> : Versi template
<description> : Deskripsi template

<files>:
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 <filename>

<images>:
Ini adalah daftar gambar pendukung yang diperlukan untuk template. Semua harus
difaftarkan atau Joomla tidak mengenali file ini meskipun sudah ada di folder template.

<css>:
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 <title>
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.

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:

Site Name
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:

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!)

Page Name dan Link Penanda Navigasi

Statiknya:

Kodenya:

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:

Fungsi Search
Kini kita menuju ke sayap kiri. Saya ingin mengaktifkan fungsi search-nya.

No problem, kode pendek di bawah meload modul search dan menyelesaikan masalah:

Hasilnya? Seperti di bawah ini:

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:

Oleh karena itu, saya meload semua modul yang memiliki posisi di sebelah kiri dengan
kode berikut ini:

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:
Waw, semua modul saya load. Tentu saja Anda bisa mengatur kemunculan modul-modul ini
di halaman administrasi Joomla.

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:
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:

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:
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:

Nah, bagian ini, digantikan oleh kode PHP yang sangat pendek tapi telah berbicara
segalanya:

Fungsi itu memuat isi dari modul yang sedang aktif, seperti screenshot di bawah ini, dimana
saya sedang berada pada halaman lisensi Joomla.
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:

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.

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:

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.

Sampel data Joomla menempatkan modul-modul pada posisi-posisi di bawah ini:

Banner:
 - Banners

Left:

- Main Menu
- User Menu
- Other Menu
- Login Form
- Syndicate
- Statistics
- Template Chooser
- Archive
- Sections
- Related Items
- Wrapper

Right:

- Polls
- Who‟s Online
- Random Image

Top:

- Newsflash

User1:

- Latest News

User2:

- Popular

User3:

- Top Menu

User4:

- Search

Parameter kedua adalah $style. Parameter ini sifatnya opsional, boleh diisi boleh juga tidak.
Parameter ini menunjukkan bagaimana data ditampilkan. Nilai yang valid adalah:
0: Default. Modul ditampilkan dalam kolom-kolom. Contoh outputnya:

1: Modul ditampilkan secara horizontal. Contoh outputnya:

-1: Modul ditampilkan dalam data saja tanpa markup sama sekali dan tanpa judul.
Contohnya seperti di bawah ini:
-2: Modul ditampilkan dalam format X-Joomla. Contoh output:

-3: Modul ditampilkan dalam format yang memungkinkan dalam format yang lebih
kompleks, misalnya dalam kotak tanpa sudut. Contoh output:

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:

- http://www.howtojoomla.net
- http://dev.joomla.org
- http://help.joomla.org
- http://www.id-joomla.com
- http://ww.joomla.org/

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.
 Berikut daftar pustaka dalam menyusun panduan kecil ini:

- http://www.howtojoomla.net/content/view/25/6/
- http://dev.joomla.org/content/view/37/58/
- http://dev.joomla.org/component/option,com_jd-
wiki/Itemid,/id,deprecate:functions/&s=mospathway
- http://help.joomla.org/content/view/33/60/
- http://www.id-
joomla.com/component/option,com_fireboard/Itemid,26/func,view/catid,6/id,17741
/
- http://joomla.org/

Terima kasih,

Salam hangat saya untuk Anda,

Galih Satriaji [ http://blog.galihsatria.com ]

Pantai Prigi, Trenggalek, Jawa Timur

Nikon D40 | Sigma 10-20mm HSM