Text Subxtractor

//5. get text and replaces them with shorter one in selected elements
text_substractor('div.article.xx', 'div.message',300);

function text_substractor(parent, children, limitText){
var myparent = document.id(document.body).getElements(parent);
myparent.each(function(element) {
var myChildren = element.getElement(children);
//get full text of div.message
var myText = myChildren.get('text');
var newText = myText.substr(1,limitText) + '...';
//destroy all elements inside myChildren.
myChildren.empty();
//set the new text on myChildren
myChildren.set('text', newText);
//add new element after text
var test = new Element('span', {class: 'test'});
test.inject(myChildren);
var mySpan = myChildren.getElement('span');
mySpan.setProperties({text:'readmore...',style:'background:yellow;'});
});
}
//5. end of text replacer

Element Width Adjuster

Html:
<div id="parent">
     <div id="child" class="columns-3">
     </div>

     <div id="child" class="columns-3 right">
     </div>
     <div id="child" class="columns-3 right">
     </div>
     <div id="child2" class="columns-2">
     </div>
     <div id="child2" class="columns-2 right">
     </div>
</div>

CSS:

#parent {width:900px; height:100px;float:left;}
#child {float:left;height:80px;background:#fdfdfd;}
#child2 {float:left;height:80px;background:#ffaaff;}

JavaScript

// Call the width setter function. commands: column_setter(name of element, name of element to have left margin , margin between element, and number of width set).
column_setter('.columns-3', 'right', 10, 3);
column_setter('.columns-2', 'right', 10, 2);

//6. function set elements width with element_name according to the parent's width;
function column_setter(myEls, myNextEls, marginBetweenElements, numberOfElements) {
var mycolumn = document.id(document.body).getElements(myEls);
var mydown2 = document.id(document.body).getElements(myEls +  myNextEls);
mydown2.setStyle('margin-left',marginBetweenElements);
mycolumn.each(function(element) {
//get Parent div
var myParent = element.getParent('div');
//measure Parent div's width
var parentsize = myParent.getSize();
var parentWidth = parentsize.x;
//measure Parent div's padding
paddingRight = myParent.getStyle('padding-right').toInt();
paddingLeft = myParent.getStyle('padding-left').toInt();
//measure Parent div's border
parentBorderLeft = myParent.getStyle('border-left').toInt();
parentBorderRight = myParent.getStyle('border-right').toInt();
// measure the margin. 3 columns has 2 margin. assume they are 5px each
var mycolumnwidth = (parentWidth - paddingRight - paddingLeft - parentBorderLeft - parentBorderRight - (marginBetweenElements*(numberOfElements-1)))/numberOfElements;
element.setStyle('width',mycolumnwidth);
});
}
//6. set elements width and height width 

Tambah CSS dan JScript pada module

Pada file mod_moduleku.php, tambahkan sbb:

//add script and css
$document = &JFactory::getDocument();
$document->addStyleSheet( JURI::root() . 'modules/mod_moduleku /css/moduleku_css.css' );
$document->addScript("modules/ mod_moduleku /js/javascript.js"); 

Tutorial Efek Toggle Sekelompok Element pada Joomla.

Tutorial Efek Toggle Sekelompok Element pada Joomla.

Di script ini, hanya satu element yang terbuka. Ketika suatu element diklik, maka element yang sedang terbuka akan ditutup dulu, baru membuka element child yang diklik. Apabila element yang sedang terbuka diklik, maka element tersebut ditutup.

variable yang digunakan di script tutorial berikut:
element parent = div.regular (div dengan class bernama regular);
element child = div di dalam element parent.
nama function yang digunakan: nextSlider;
teknik yang digunakan: addClass, removeClass dan check hasClass.
nama class penanda element child yang terbuka: toggleslide.
nama class penanda sementara element child yang sebelumnya dibuka: togglechecker.

// 1. Pemanggil semua element div.regular.
var myparent = document.id(document.body).getElements('div.regular');
myparent.each(function(element) {
element.addEvent('click', nextSlider);
var mynext = element.getChildren('div');
//set status semua element saat pertama, yaitu ditutup semua.
mynext.setStyle('overflow','hidden');
mynext.setStyle('height',0);
mynext.setStyle('list-style-type','none');
});


// 2. function yang dipanggil.


function nextSlider() {
//cek semua element dengan div.regular, jika ketemu yang terbuka, ditutup.
var myparentEls = document.id(document.body).getElements('div.regular');
myparentEls.each(function(element) {
var mychildEls = element.getChildren('div');
if(mychildEls.hasClass('toggleslide') == "true")
{
                        // tutup element yang terbuka.
mychildEls.removeClass('toggleslide');
mychildEls.tween('height', 0);
                        //setelah tutup, element tersebut ditandai utk cek apakah element itu jg yang di-klik.
mychildEls.addClass('togglechecker');
}
else
{
mychildEls.removeClass('togglechecker');
}
});
var mychildren = this.getChildren('div'); //ini element yang di-klik.
if(mychildren.hasClass('togglechecker') == "true") //cek apakah element yg sama
{
//True, artinya element yang ditutup = element yang diklik. tidak perlu lakukan apa-apa
mychildren.removeClass('togglechecker');
}
else
//False, maka bukalah element baru tersebut.
{
mychildren.addClass('toggleslide');
var mychildren = this.getElement('div');
mychildren.setStyle('height', 'auto');
var mychildrenSize = mychildren.getSize();
var mychildrenHeight= mychildrenSize.y;
mychildren.setStyle('height', 0);
mychildren.tween('height', mychildrenHeight);
}
// Cek semua div regular, kita hapus penanda sementara, si togglechecker.
myparentEls.each(function(element) {
var mychildEls = element.getChildren('div');
if(mychildEls.hasClass('togglechecker') == "true")
{
mychildEls.removeClass('togglechecker');
}
});
}

Tutorial Menambah Event pada Element

Setelah memahami script untuk memilih element dengan class tertentu, maka kita kembangkan lagi script yang kita sudah miliki.

Tutorial -2 Kali ini kita tambahkan "event" pada element, dan "event" ini akan memanggil suatu "function". Event dan function ini yang membuat element-element dalam web menjadi interaktif.

Untuk contoh kali ini, kita coba membuat semua element li.parent untuk menampilkan element anak-anaknya muncul saat li.parent di-hover mouse, dan menyembunyikan element anak saat li,parent tidak lagi di-hover mouse.

Kita gunakan basic script yang sebelumnya.

window.addEvent('domready', function() {

//masukan script2 di sini

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {

//masukan script untuk element-element dalam myparent

element.setStyle('display','none');                             

});

)};

Pada setiap element li.parent yang dimasukan ke myparent, akan kita tambahkan 2 event berbeda yang masing-masing akan memanggil function yang berbeda pula, yaitu:

Event 'mouseover' akan memanggil function "showChildren" saat element myparent di-hover mouse.

Event 'mouseout' akan memanggil function "hideChildren" saat element myparent tidak lagi di-hover mouse.

Script untuk menambahkan event pada element-nya:

      element.addEvent('mouseover', showChildren);

      element.addEvent('mouseout', hideChildren);


Dalam efek ini, kita hendak membuat element-element anak tidak ditampilkan, sebelum di-hover. Oleh karena itu, kita harus menghilangkannya dengan script:

//panggil anak-anak element myparent menjadi myChildren

var myChildren = element.getChildren('ul');

//sembunyikan myChildren sebagai kondisi awal

myChildren.setStyle('display','none');

Berikutnya, kita buat script function showChildren dan hideChildren. Script-nya:



function showChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


function hideChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


Lengkapnya menjadi sbb:

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {
element.addEvent('mouseover', showChildren);
element.addEvent('mouseout', hideChildren);
var mychildren = element.getChildren('ul');
mychildren.setStyle('display','none');
});

function showChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','block');
}


function hideChildren(){
var mychildren = this.getChildren('ul');
mychildren.setStyle('display','none');
}


End of tutorial script - 2.

Tutorial yang lain:
Tutorial Menambah Efek Toggle pada Element Joomla.

Tutorial Efek Toggle pada Element Joomla

Kali ini kita membuat script efek pada elemen dengan cara yang lain.

Script ini adalah untuk menampilkan element child ketika element parent di-click, dan element child akan dihilangkan ketika element parent di-click kembali.

Di metode sebelumnya, kita menambahkan event "mouseover" dan "mouseout" pada element parent, dimana masing-masing event akan memicu function yang berbeda. Kesulitan kali ini, kita menambahkan hanya satu event "click" pada element parent, dan function yang dipanggil event ini harus memeriksa status elementnya utk menentukan function apa yang di-execute, apakah akan di-"hide" atau "show".

Untuk menambahkan status yang dapat di-cek oleh function, metode yang saya gunakan adalah dengan cara menambah class penanda pada element saat di-click pertama kali, dan menghapus class penanda tersebut saat di-click kedua kalinya. Function tambahan di sini adalah untuk mengecek apakah element sudah memiliki class penanda tadi.

Script function saat di-click adalah seperti ini:

function toggleElement() {
var mychildren = this.getChildren('ul');
if(mychildren.hasClass('toggler') == "true")//cek apakah element children memiliki class penanda bernama "toggler".
{
   //jika true, sembunyikan element, hapus class penanda.
mychildren.removeClass('toggler');
mychildren.morph({'opacity':0,'filter':'alpha(opacity=0)'})
}
else
{
   //jika false, munculkan element child, tambah class penanda.
mychildren.addClass('toggler');
mychildren.morph({'opacity':1,'filter':'alpha(opacity=100)'})
mychildren.setStyle('display','block');
}
}

Dengan demikian, pembentuk script secara lengkap adalah:
1. Script pemilih element yang diberikan efek.
2. Script menambahkan event.
3. Script function yang dipanggil saat event tersebut terjadi.

//1. script pemilih element, pilih element "li" dengan class "parent"

var myparent = document.id(document.body).getElements('li.parent');
myparent.each(function(element) {
element.addEvent('click', toggleElement); //2. script menambah event, panggil function "toggleElement" saat diklik.

//set style mychildren mula-mula, yaitu dihilangkan dari layar.
var mychildren = element.getChildren('ul');
mychildren.setStyle('position','absolute');
mychildren.setStyle('opacity',0);
mychildren.setStyle('display','none');
});

//3. script function
function toggleElement() {
var mychildren = this.getChildren('ul');
if(mychildren.hasClass('toggler') == "true")
{
   mychildren.removeClass('toggler');
 mychildren.morph({'opacity':0,'filter':'alpha(opacity=0)'})
 }
 else
 {
 mychildren.addClass('toggler');
 mychildren.morph({'opacity':1,'filter':'alpha(opacity=100)'})
 mychildren.setStyle('display','block');
 }
}

This is the end of tutorial 3.

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

Kembali ke Pages Tutorial Joomla.

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.

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.

Membuat Menu di Joomla

Untuk membuat menu baru di joomla, perlu menjalani dua langkah berikut:
1. Create set menunya.(istilah set menu, karena merupakan berisi sekelompok menu yang ditampilkan bersama. Menu-menu itu disebut menu item.).
Caranya: Setelah login di Back End, pilih menu-menu berikut:
Menus > Menu Manager

Klik new, masukan Unique name, Title dan Description.

Mengisi Module Title bersifat optional. Jika diisi, saat di-klik save, Joomla otomatis akan membuat  module baru dengan tipe "mod-mainmenu", dengan nama sesuai isian tersebut, dan module tersebut sudah meng-assign nama set menu tsb.

Jika tidak diisi sekarang, maka kita akan membuat secara manual, dan meng-assign set menu secara manual. Langkah ini akan kita bahas di step nomor 2.

Setelah pengisian selesai, klik save.

Kamu masuk ke menu tadi di Menus > (nama menu yang dibuat).
Kalo masuk ke menu yg betul, headernya akan jadi "Menu Item Manager". di sini silakan tambah item-item yang mau dimasukan dalam menu tersebut. Jadi contoh km mau bikin satu set menu yg isinya: home, contact us, about us, dll, mereka dibuat dalam satu set menu yang tadi kita buat.

2. Setelah menu dibuat, utk di-show di template, harus meng-assign menu tersebut ke module, tipe mod main-menu. cara buat modulenya adalah: Extensions > Module Manager. klik new di sini, pilih module main-menu, lalu berikan nama, pilih nama set menu yang hendak ditampilkan, dan pilih positionnya.

Jika tidak muncul, ada beberapa kemungkinan kesalahan:
1. module belum dibuat / tidak aktif.
2. module menampilkan set menu yang salah.
3. module di-assign ke position yang salah (pelajari tiap-tiap template bisa punya position yang berbeda).
4. Menu item dalam menu2nya tidak published.
5. Menu tidak ada isinya.
6. Menu atau module aksesnya di atas user yang view.



 sekali bikin menu, adalah satu set menu.