RSS

Seri 3 Cara Pembuatan Template Joomla

26 Agu

Pada bagian ini kita akan coba membuat sebuah template kosong sederhana, sekaligus mempelajari anatomi dan fungsi dari masing masing file pembentuk template Joomla.

Membuat File Index.php
File index.php adalah file yg berisi kombinasi bahasa HTML dgn PHP yang merupakan file utama yng menetukan bentuk perwajahan dari template (Anda dapat membuat file index.php ini dengan menggunakan pilihan New php file pada Dreamweaver).
Secara umum pada file index.php ini terbagi dua bagian script yaitu bagian header dan body.

Header

Bagian pertama yang harus kita isikan adalah bagian header. Bagian ini harus ada di awal setiap file index.php. Bagian header ini adalah beberapa baris code php seperti yang ada berikut ini:

<?php defined( “_VALID_MOS” ) or die( “Direct Access to this location
is not allowed.” )
;$iso = split( ‘=’, _ISO );echo ‘<?xml version=”1.0″ encoding=”‘. $iso[1] .'”?’ .’>’;?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<?php mosShowHead(); ?>
<meta http-equiv=”Content-Type” content=”text/html;><?php echo _ISO; ?>” />
<?php if ( $my->id ) { initEditor(); } ?>
<?php echo “<link rel=\”stylesheet\” href=\”$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]
/css/template_css.css\” type=\”text/css\”/>” ; ?>
</head>

Tips.
Kode ini bisa Anda tambahkan dengan mudah dengan menekan tombol Insert Head pada toolbar Joomla Extension yang sudah terinstall pada Dreamweaver Anda.

Fungsi dari masing bagian header ini adalah sbb:
Bagian :

<?php defined( “_VALID_MOS” ) or die( “Direct Access to this location
is not allowed.” )
;$iso = split( ‘=’, _ISO );echo ‘<?xml version=”1.0″ encoding=”‘. $iso[1] .'”?’ .’>’;?>

berfungsi sebagai filter yang akan menyaring jenis akses yang datang terhadap file ini. Apabila akses tersebut bersifat langsung, misalnya Anda mengetikkan alamat langsung kepada file index.php ini pada browser (misalnya : http://www.webanda.com/templates/templateku/index.php) maka proses eksekusi script phpnya tidak akan dilanjutkan dan pada jendela browser akan muncul tulisan ’ Direct Access to this location is not allowed’ yang menyatakan bahwa akses langsung terhadap file yang bersangkutan tidak diizinkan.

Bagian:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

Mendefinisikan tipe dokumen html yang dipergunakan yaitu XHTML 1.0 Transitional berdasarkan standar penggunaan code html internasional.

Bagian :

<?php mosShowHead(); ?>

<meta http-equiv=”Content-Type” content=”text/html;><?php echo _ISO; ?>” />

ini akan menghasilkan metadata (seperti description, keywords, generator) dan penjudulan secara otomatis pada halaman joomla. Pada bagian ini juga didefinisikan standar ISO yang dipergunakan pada web joomla Anda. ISO ini lah yang natinya akan memberitahu standar bahasa apakah yang akan dipergunakan dalam merender file Anda pada browser, sehingga penampilan website dalam berbagai bahasa seperti Arab, China dan lain-lain tidak lagi menjadi masalah.

Bagian :

<?php if ( $my->id ) { initEditor(); } ?>

Ini berfungsi untuk memanggil HTML editor utntuk mengedit content apabila ada user yang melakukan login dari front end

Bagian:

<?php echo “<link rel=\”stylesheet\” href=\”$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/
css/template_css.css\” type=\”text/css\”/>” ; ?>

ini berfungsi untuk memanggil file CSS yang dipergunakan untuk mengatur tampilan dari index.php ini, dimana secara deafault akan memanggil file template_css.css yang ada didalam folder css didalam direktori templates anda.

Body

Bagian ini adalah kode kode yang diletakkan setelah bagian header.
Secara anatomi sederhana dapat diisikan sbb

<body>
<?php echo $mosConfig_sitename;?>
<?php mospathway()?>
<?php mosLoadModules(‘top’);?>
<?php mosLoadModules(‘left’);?>
<?php mosMainBody();?>
<?php mosLoadModules(‘right’);?>
<?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ );?>
</body> </html>

Semua kode ini dibuat dgn mudah, dengan cara menekan ikon-ikon joomla solution yang terdapat pada toolbar Dreamweaver Anda setelah meletakkan posisi cursor diantara script :

<body> <!—posisi kursor  </body></html>

Bagian :

<?php echo $mosConfig_sitename;?>

akan menampilkan nilai Site Name yg telah Anda masukkan pada Global Configuration (melalui halaman Administrator) atau secara manual pada file configuration.php

Bagian :

<?php mospathway()?>

akan menampilkan informasi navigasi pada saat Anda membrowsing sebuah halaman.

Bagian :

<?php mosLoadModules(‘top’);?>
<?php mosLoadModules(‘left’);?>
<?php mosLoadModules(‘right’);?>

akan menampilkan module module yg di publish pada posisi yang bersangkutan (top, left, right)

Bagian :

<?php mosMainBody();?>

akan menampilkan content utama dari dari joomla. Jadi code ini mutlak ada pada setiap index.php

Bagian :

<?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ );?>

akan menampilkan informasi footer yang diambil dari nilai pada file : <root>/includes/footer.php

Selesai!! Sebuah file index.php telah berhasil Anda buat

 
Tinggalkan komentar

Ditulis oleh pada 26 Agustus 2007 in Web

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

 
%d blogger menyukai ini: