Sabtu, 30 Juni 2012

1.1.b File index.php dalam template Joomla

File Index.php dalam template Joomla

File index.php berisi perintah-perintah berbahasa HTML dan php, yang menjadi pembentuk utama template Joomla. Saya sebutkan pembentuk utama, karena file ini berfungsi sebagai:
1. Memanggil file-file .css, .js dan file-file lain yang menjadi pembentuk template Joomla.
2. Menentukan layout tampilan template joomla secara keseluruhan.
3. Menentukan posisi dan memanggil positions (module), component dan message dalam Joomla.

File index.php sederhana dalam contoh ini adalah sebagai berikut:
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<jdoc:include type="head" />
<?php JHTML::_('behavior.mootools'); ?>

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" />

<script type="text/javascript">
/*window.addEvent('domready', function(){ 
$(header).getComputedSize(); });*/
</script>

</head>

<div id="page">
<div id="header"> 
<div id="main">
<div id="top-menu">
<jdoc:include type="modules" name="top-menu" theme="boxes" class="menu" />
</div>
</div>
</div>

<div id="middle">
<div id="main">
<div id="picture">
<jdoc:include type="modules" name="picture" theme="boxes" />
</div>
<div id="modules-place" class="box21">
<jdoc:include type="modules" name="left" theme="boxes" class="menu" />
</div>
<div id="component-place" class="box22">
<jdoc:include type="component" />
</div>
</div>
</div>
<div id="footer"> 
<div id="main">
<jdoc:include type="modules" name="footer" style="modular" />
</div>
</div>
</div>
</body>
</html>

Sementara ini tutorial saya.


1.1 Direktori dan file-file dalam suatu template joomla

Minggu, 24 Juni 2012

1.1 Direktori dan file-file dalam suatu template joomla.

Template Joomla biasanya berisi direktori dan file-file berikut ini:

index.php (*)
templateDetails.xml (*)
favicon.ico (+)
template_thumbnail.png (+)
css\ (+)
images\
javacscript\

(*) file yang wajib ada dalam sebuah template.
(+) file sebaiknya ada, untuk memberikan tampilan yang baik untuk template.

File templateDetails.xml
Sekarang kita bahas satu-satu, mulai yang wajib dulu, dimulai yang mudah, yaitu templateDetails.xml.
File ini berisi informasi tentang template yang anda buat. Contoh isinya adalah sebagai berikut (untuk contoh template yang compatible dengan Joomla 1.5.xx):


<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">

 <name>Template Pertamaku</name>
 <version>1.0</version>
 <creationDate>Juni 2012</creationDate>
<author>Aku</author>
<authorEmail>e-mailku@aku.com</authorEmail>
<authorUrl>http://www.websiteku.com</authorUrl>


<files>
<filename>index.php</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>

<positions>
<position>top</position>
<position>left</position>
<position>right</position>
<position>footer</position>
  <position>bottom</position>
  <position>breadcrumb</position>
  <position>debug</position>
  <position>hor_menu</position>
  <position>picture</position>
  <position>user1</position>
  <position>user2</position>
  <position>user3</position>
</positions>


</install>

SCRIPT INSTALASI

Sebuah template diawali dengan script instalasi berikut, menandakan bahwa template ini utk di-install pada Joomla 1.5:

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5" type="template">
dan diakhiri dengan script berikut, sebagai penutup:

</install>



SCRIPT TEMPLATE INFORMATION


Bagian ini menyebutkan nama template, versi, waktu pembuatan, nama pembuatnya. Pada contoh di bawah, nama templatenya: Template Pertamaku, versi 1, yang dibuat bulan Juni 2012, dan "Aku"
sebagai penulisnya. Informasi-informasi berikutnya bersifat optional.

 <name>Template Pertamaku</name>
 <version>1.0</version>

<creationDate>Juni 2012</creationDate>
<author>Aku</author>
<authorEmail>e-mailku@aku.com</authorEmail>
<authorUrl>http://www.websiteku.com</authorUrl>

Pada contoh tampilan Template Manager di bawah ini, nama template yang saya buat adalah: Design Gallery, dengan version 1.0.0 clean, date June 2012 dan nama Authornya Chandra Cayadi. Tampilannya akan menjadi sbb:



SCRIPT FILES

Part berikutnya adalah "Files". Di sini kita mendaftarkan semua file yang terdapat pada template tersebut.
File-file pembentuk template yang tidak disebut disini tidak akan ter-install ke Joomla (sekalipun file tersebut ada dalam bentuk zip yang di-install). Joomla tidak akan mengeluarkan error atas kesalahan ini.

Sebaliknya apabila di sini kita menyebutkan nama file yang salah / tidak ada, maka instalasi template joomla akan error seluruhnya.

Pada contoh sini, saya hanya memasukkan nama-nama file yang sifatnya wajib dan sebaiknya ada.

 <files> <filename>index.php</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>css/template.css</filename>
</files>


File index.php berisi informasi tentang layout keseluruhan website joomla Anda, sesuai diatur oleh Template. Kita akan bahas isinya secara terpisah nantinya.
<< akan masuk di sini link ttg membuat index.php >>

File favicon.ico adalah gambar kecil dengan extension .ico yang dimunculkan pada tampilan browser Anda. Contohnya favicon Blogger pada Google chrome:

File templateDetails.xml adalah file yang sedang kita bahas.

File template_thumbnail.jpg adalah sekilas gambaran yang muncul di Template Manager, saat template kita di-hover. Berikut contoh tampilannya:
File template.css pada folder css merupakan file yang common ada di semua template joomla, yang isinya adalah style-style untuk template Joomla (saya tidak akan membuat tutorial membuat css di sini).


SCRIPT POSITIONS

Positions merupakan pengelompokan modul-modul, untuk ditampilkan secara bersamaan. Setiap module harus memiliki (atau di-assign ke) position untuk ditampilkan. Sebagai contoh di bawah, modul bernama "Resources" di bawah ini di-assign ke position "left".



Dalam templateDetails.xml ini, kita menyebutkan position-position yang terdapat pada template.

Kita bebas menggunakan nama position apa saja, tetapi saya menyarankan agar kita menggunakan nama-nama position yang umum digunakan template joomla lain, misalnya: left, right, top, footer, breadcrumbs, dan lain-lain.

Perhatian! ketika user mengganti template-nya, modul-modul yang di-assign ke position yang tidak terdapat pada template baru akan tidak ditampilkan di template baru. Modul-modul ini perlu diubah position-nya menjadi position yang ada pada template baru. 

Nama position juga sebaiknya cukup jelas sehingga user mengerti peruntukannya, dan mudah diketahui position tersebut akan dipanggil pada template (lokasi position dipanggil di index.php, dan akan saya jabarkan saat kita bahas isi index.php).

Oleh karena itu, tips untuk membuat nama position adalah:
1. Gunakan nama-nama position yang umum digunakan template lain.
2. Gunakan nama-nama position yang eksplisit peruntukannya. misalnya: breadcrumb (digunakan untuk module breadcrumb), hor_menu (diperuntukan untuk menu yang horizontal).
3. Gunakan nama position lokasinya jelas, misalnya: left (biasanya untuk modul umum yang ada di sebelah kiri).

Dalam contoh kita ini, kita akan gunakan position berikut:

<positions>
<position>top</position>
<position>left</position>
<position>right</position>
<position>footer</position>
  <position>bottom</position>
  <position>breadcrumb</position>
  <position>debug</position>
  <position>hor_menu</position>
  <position>picture</position>
  <position>user1</position>
  <position>user2</position>
  <position>user3</position>
</positions>


Demikian templateDetails.xml.


Kembali ke Pages Tutorial Joomla.

Jumat, 01 Juni 2012

Belajar Prestahop Template

Prestashop merupakan salah satu CMS online shop yang cukup popular di dunia.

Sayangnya, tidak banyak di luar sana developer dan programmer yang bersedia memberikan template prestashop yang indah dan banyak fitur secara cuma-cuma. Sehingga, kebanyakan orang menggunakan template defaultnya begitu saja.

Template default prestashop tidak buruk, tetapi juga tidak terlalu bagus tentunya.

Template prestashop disebut sebagai "Themes".

Menambahkan themes prestashop tidak sulit, cukup dengan menaruh folder themes-nya di dalam folder atau direktori:
home\themes\
dimana home adalah direktori di mana prestashop di-install.

Themes default prestashop memiliki folder sbb:
home\themes\prestashop


Secara struktur, di dalam themes prestashop berisi file-file template (.tpl), image files (.gif, .jpg, .png) file CSS, dan file-file Javascript seperti berikut:
\cache
\css
\img
\js
\lang
\modules
404.tpl
category.tpl
header.tpl
footer.tpl
dan file-file .tpl lainnya.


Sebuah theme memiliki file gambar bernama preview.jpg pada foldernya, yang memungkinkan preview dari back-office.

Folder /css berisi file css.
Folder /img berisi file gambar.
Folder /js berisi file-file javascript.
Folder /lang berisi file-file themes translation. Permission di file ini harus 666, supaya back-office dapat membaca dan menulisnya.
Root file berisi TPL files dan file preview.jpg.

File-file tpl biasanya merupakan file-file berbahasa html, php dan sedikit beberapa script khusus
Prestashop untuk memanggil modul, nama website, dan lain-lain. Script khusus Prestashop diawali dan diakhiri dengan tanda kurawal seperti berikut.
{include file="$tpl_dir./breadcrumb.tpl"}

Utk cheatsheet script prestashop, dapat di-download di sini:
Prestashop Cheat Sheet

atau dapat dipelajari di dokumentasi prestashop seperti ini:
http://doc.prestashop.com/display/PS14/Cheat-sheet+-+Concepts+outlined+in+this+tutorial


Website-website reference saya:
General:
http://doc.prestashop.com/display/PS14/Coding+a+theme
Membuat Hook baru dalam Prestashop
http://www.justwebdevelopment.com/blog/add-new-hook-in-prestashop/
// Sementara sampai disini dulu dokumentasi saya.