Membuat Template Joomla

17
Galih Satriaji [email protected] 3 Mei 2008 Pantai Prigi, Trenggalek, Jawa Timur Menghadap langsung ke pantai selatan. Nikon D40 | Sigma 10-20mm HSM Panduan Dasar Membuat Template pada Joomla

Transcript of Membuat Template Joomla

Galih Satriaji

[email protected]

3 Mei 2008

Pantai Prigi, Trenggalek, Jawa Timur Menghadap langsung ke pantai selatan.

Nikon D40 | Sigma 10-20mm HSM

Panduan Dasar Membuat Template

pada Joomla

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