11

Template di mambo cms bag.1

Posted on February 18, 2007 by adisetiawan

Template adalah theme, layout atau pola untuk mendisplay output yg digenerate oleh mambo. Dengan template, website yang kita buat menjadi lebih mudah utk dirubah tampilan-nya, merubah format tampilan dan styling sebuah website. Kalo gak pengen susah2, banyak seh template2 buat mambo yang bisa kamu download, pake dan rubah. Tapi adakalanya, kamu udah punya sebuah desain html yg siap untuk di convert menjadi template di mambo. Tulisan ini akan menjelaskan sedikit mengenai isi dari sebuah file template di mambo.

Template mambo terletak di direktori ‘templates’. Untuk membuat dan berkreasi dengan template-mu sendiri, yang paleng gampang adalah dengan meng-kopi default template di mambo utk kemudian di modifikasi sesuka hati. Di setiap template terdapat beberapa file penting yg harus ada supaya template-mu bisa dikenali di mambo. Struktur template seperti ini:

templates/
- mytemplate/
  - images/
    - image.jpg
  - css/
    - template_css.css
  - index.php
  - template_thumbnail.png
  - templateDetails.xml

mytemplate adalah nama direktori tempat kita menyimpan file2 yg diperlukan. Di dalamnya terdapat direktori images, tempat menyimpan file2 image kita dan direktori css, tempat menyimpan file css yg secar umum dinamakan template_css.css. Kamu bisa menamakan file css sesuka hati asal sesuai dengan definisi di file xml-nya (akan dijelaskan nanti). Di dalam mytemplate sendiri file utama tersimpan yaitu index.php, file utama dan templateDetails.xml, file definisi template kita.

Setelah kamu meng-kopi default template, yang pertama kita lakukan adalah mengedit templateDetails.xml sesuai dengan definisi dari mytemplate. 

<?xml version="1.0" encoding="iso-8859-1"?>
<mosinstall type="template" version="4.6.2">
	<name>mytemplate</name>
	<creationDate>18/02/07</creationDate>
	<author>namaauthor</author>
	<copyright>GNU/GPL</copyright>
	<authorEmail>info@emailmu.com</authorEmail>
	<authorUrl>http://www.domain.com</authorUrl>
	<version>1.1</version>
	<description>ini template pertamaku</description>
	<files>
		<filename>index.php</filename>
		<filename>template_thumbnail.png</filename>
	</files>
	<images>
		<filename>images/image.jpg</filename>
	</images>
	<css>
		<filename>css/template_css.css</filename>
	</css>
</mosinstall>

yg paling penting disini adalah definisi

<name>mytemplate</name>

yg harus sama dengan nama direktori tempat kamu menyimpan file2 template-mu. Definisi lain-nya seperti sudah cukup jelas dan hanya sekedar informasi mengenai templatemu, nama2 file image, dan nama file css mu.

Saatnya kita meng-edit file index.php. File index.php sebenernya hanya sebuah file html biasa yang disisipkan sedikit kode2 php yg berguna sebagai placeholder output. Pertama, di bagian head 

<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
	initEditor();
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/mytemplate/css/template_css.css" rel="stylesheet" type="text/css"/>
</head>

yg perlu di ubah disini cukup link ke file template_css.css supaya menuju ke file css template kita. 

<?php echo $mosConfig_live_site;?>

kode diatas akan otomatis menampilkan absolute path dari website kita. Untuk selanjutnya kita menuju ke body dari template, di sini hanyalah tag2 html biasa dengan beberapa kode php. Di mambo, untuk menampilkan output dari module cukup gunakan

<?php mosLoadModules('top',-1); ?>

dimana top adalah nama posisi dari modul yg akan tampil, dan -1 adalah format html pembungkus/wrapper modul. -1 berarti modul tersebut tidak akan dibungkus apapun, -2 akan dibungkus dengan tag html 

<div class="moduletable">
</div>

Jika tidak didefinisikan:

<?php mosLoadModules('top'); ?>

maka modul tersebut akan dibungkus dengan tag html table

<table cellpadding="0" cellspacing="0" class="moduletable">
</table>

Dengan demikian setiap modul yang diposisikan di top, akan tampil disitu, ditempat dimana kamu meletakkan kode php itu. Selanjutnya kode php utk menampilkan pathway seperti home > page1

<?php mosPathWay(); ?>

itu saja :P . dan terakhir dan yg utama adalah kode php utk menampilkan mainbody 

<?php mosMainBody(); ?>

gampang kan? :P . Setelah mengetahui fungsi dari kode2 php itu, maka dengan mudah kamu bisa memodifikasi template yg beru saja kamu kopi, merubah letak dan format-nya. Emang seh, perlu sedikit pengetahuan html dan css agar tampilan template-nya menjadi enak di lihat, mudah di baca dan menarik utk disimak.

That’s all for today!, lain kali kita akan mencoba membajak sebuah desain siap pake yg sudah ada html dan css-nya, dan kita convert menjadi template di mambo.

happy mambo!