Auto Load file javascript ke dalam Head tag template Joomla.


Halo sobat🙂
kali ini coba saya share sebuah “tips khusus” yang membuat kita bisa meload file
javascript (.JS) ke dalam / bagian head tag pada template Joomla versi 1.0.X dan versi 1.5.X

Kebanyakan Joomla user admin yang berpengalaman dalam membuat/memodifikasi template

Joomla versi 1.0.X , pastinya sering menggunakan beberapa library file javascript
misalnya :

JQuery library script, contohnya :

<script language=“javascript” src=“js/jquery.js”></script>

Mootools library script, contohnya :

<script language=“javascript” src=“js/mootools.js”></script>

Piclens library script, contohnya :

<script language=“javascript” src=“js/piclens.js”></script>

atau bahkan library script buatan sendiri, contohnya :

<script language=“javascript” src=“js/browserdetect.js”></script>

dengan mengedit / memodifikasi file template (index.php) Joomla-nya, dan menyisipkan
kode script library di atas langsung ke bagian tag <head></head>, contohnya :

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />

<script language=“javascript” src=“js/piclens.js”></script>

<script language=“javascript” src=“js/jquery.js”></script>
<script language=“javascript” src=“js/browserdetect.js”></script>

<title>Website Joomla Gue</title>

</head>

jika disesuaikan dengan nama template-nya (sesuai aturan Joomla v1.0.X), akan seperti ini :

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />

<script language=“javascript”
src=
<?=$mosConfig_live_site?>/templates/[nama_template]/js/piclens.js”></script>
<script language=“javascript”

src=<?=$mosConfig_live_site?>/templates/[nama_template]/js/jquery.js”></script>
<script language=“javascript” src=
<?=$mosConfig_live_site?>/templates/[nama_template]/js/browserdetect.js”></script>

<title>Website Joomla Gue</title>
</head>

Tetapi pada kebanyakan implementasi terhadap Joomla website, yang banyak menggunakan
template atau istilahnya menggunakan tematik template yang berubah-ubah sesuai event
atau acara, cara memodifikasi satu-persatu template tematiknya tentunya akan cukup

merepotkan, walaupun sebenarnya kita cukup menyediakan waktu kurang dari 10 menit
untuk melakukan perubahan satu persatu template tematiknya, untuk menyisipkan javascript
library file ke bagian head tagnya seperti contoh di atas.

Untuk itulah proses load javascript library file itu kita sederhanakan, sehingga kita
tidak perlu dipusingkan lagi untuk harus mengedit tematik template-nya satu persatu.

Persyaratan utama :

1. Pada root folder dari Joomla site anda, create / buat folder yang bernama :

js

(singkatan dari javascript🙂

2. Letakkan seluruh file-file javascript library yang akan anda aktifkan dalam semua
tematik template anda ke dalam folder “js” itu. Contohnya file-file :

jquery.js

piclens.js
browserdetect.js

Harap diingat, folder “js” diletakkan di root folder joomla site anda, bukan di dalam
folder templatenya
.

Selanjutnya, kita masuk ke bagian utamanya, saya sebut bagian ini sebagai “core hack“,

karena kita mengedit langsung file “index.php” yang terdapat di root folder Joomla site-nya.

Berikut ini langkah-langkahnya :
1. Gunakan sembarang text editor, buka file “index.php” yang terdapat di root folder
joomla site anda.
2. Scroll ke baris nomor #262 (bagian akhir / bawah file), berisi script PHP berikut ini :

// loads template file
if ( !file_exists( $mosConfig_absolute_path .‘/templates/’. $cur_template .‘/index.php’ ) ) {

echo _TEMPLATE_WARN . $cur_template;
} else {
require_once( $mosConfig_absolute_path .‘/templates/’. $cur_template .‘/index.php’ );

echo ‘<!– ‘. time() .‘ –>’;
}

3. Replace / timpa / overwrite script PHP di atas dengan ini (copy & paste) :

// loads template file
// if ( !file_exists( $mosConfig_absolute_path .’/templates/’. $cur_template .’/index.php’ ) ) {
// echo _TEMPLATE_WARN . $cur_template;

$totfile_js = 0;

$listfile_js = array();
if (file_exists(“js”)) {
if ($dir = opendir(“js”)) {

   while (($file_js = readdir($dir)) !== false) {
            if ($file_js != “.” && $file_js != “..”) {

               if (is_file(“js/”.$file_js)) {
                  array_push($listfile_js,$mosConfig_live_site.“/js/”.$file_js);
                  $totfile_js++;

               }
            }
   }
   closedir($dir);
}
}

$content_original =
file_get_contents($mosConfig_absolute_path .‘/templates/’. $cur_template .‘/index.php’);
if ($totfile_js>0) {

   // get head contents
   preg_match( “/<head>(.*)<\/head>/s”, $content_original, $match );
   // head contents
   $content_head = $match[ 1 ];

   $head_add = $content_head;
   for ($i=0;$i<$totfile_js;$i++) {
        $head_add = “\n<script language=\”javascript\” src=\””.$listfile_js[$i]

        .“\”></script>” . $head_add;
   }
   $head_add .= “\n”;

   $akhir = str_replace($content_head,$head_add,$content_original);
   $temp_baru = “cache/myindex.php”;
   file_put_contents($temp_baru,$akhir);

   include_once($temp_baru);
} else {
   require_once( $mosConfig_absolute_path .‘/templates/’. $cur_template .‘/index.php’ );

   echo ‘<!– ‘. time() .‘ –>’;
}

4. Simpan semua perubahan pada file “index.php” ini, reupload kembali ke root folder Joomla
site milik anda.

Bagaimana dengan Joomla versi 1.5.X ??
Persyaratannya sama persis dengan yang versi 1.0.X di atas. Lihat bagian Syarat Utama di atas

Berikut ini langkah-langkah modifikasinya (khusus Joomla versi 1.5.X) :
1. Download file “libraries/document/html/renderer/head.php” dari Joomla site anda
2. Gunakan text editor, buka / open file “head.php” tersebut.
3. Scroll ke baris #85 yang berisi code berikut :

$strHtml .= $tab.‘<title>’.htmlspecialchars($document->getTitle()).‘</title>’.$lnEnd;

4. Tepat sesudahnya, tambahkan (copy & paste) dengan code berikut :

$totfile_js = 0;

$listfile_js = array();
if (file_exists($this->baseurl.“js”)) {
   if ($dir = opendir($this->baseurl.“js”)) {

      while (($file_js = readdir($dir)) !== false) {
         if ($file_js != “.” && $file_js != “..”) {

            if (is_file(“js/”.$file_js)) {
               array_push($listfile_js,$this->baseurl.“js/”.$file_js);

               $totfile_js++;
            }
         }
      }
      closedir(
$dir);
   }
}

if ($totfile_js>0) {
for ($i=0;$i<$totfile_js;$i++) {

$strHtml .= $tab.‘<script language=”javascript” src=”‘.$listfile_js[$i].‘”></script>’.$lnEnd;
}

}

5. Simpan / Save perubahan yang dilakukan terhadap file “head.php
6. Tutup text editornya, reupload file “head.php” ke folder “libraries/document/html/renderer” dari Joomla site anda.

Sekarang semua template di Joomla site anda, ketika diaktifkan (default) akan otomatis meload
javascript library file ke dalam tag head-nya. Anda tidak perlu lagi susah-susah untuk mengedit
kumpulan template joomla site anda, guna menyisipkan kode javascript library file ke bagian
tag head dari template-nya.

Singkatnya, apapun template yang diload (default), javascript library file (.js) akan otomatis
ikut di load ke dalam head tag-nya
.

Semoga bermanfaat.

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