template joomla

download template joomla

of 17

  • date post

    30-Mar-2016
  • Category

    Documents

  • view

    221
  • download

    5

Embed Size (px)

description

Tutorial membuat template joomla

Transcript of template joomla

  • Galih Satriaji

    galihsatria@gmail.com

    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:

    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:

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

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

    m