Ajax Loader in Joomla

Home

Tutorial

Ajax Loader in Joomla

Tutorial
the_free87, Tuesday, 16 December 2008 20:00

Artikel saya kali ini adalah tentang bagaimana membuat tampilan loading pada website Joomla Anda. Pada artikel kali ini juga saya tetap menggunakan Javascript sebagai alat perangnya. Cara kerjanya hampir sama dengan tutorial saya sebelumnya, yaitu terdapat dua cara, pertama adalah langsung menuliskan scriptnya langsung di file index.php (template) Anda dan kedua adalah dengan membuat link pada index.php Anda ke file loader.js (Javascript) dan sedikit CSS pada filetemplate_css.css Anda, dan saya anggap Anda telah memahami konsep tersebut.

Baiklah, karena Anda sudah tidak sabar dan saya pun tidak tau lagi mau berbasa-basi seperti apa, Mari kita mulai....

Cara Pertama

Buka index.php pada situs Joomla Anda pada folder templates. ex: html_public/templates/(nama template Anda)/index.php
Kemudian Edit (online/offline terserah Anda)
Lalu masukkan Script berikut pada index.php Anda didalam tag disini
- function getHTTPObject() {
  var xmlhttp;
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  try {
  xmlhttp = new XMLHttpRequest();
  } catch (e) {
  xmlhttp = false;
  }
  }
  return xmlhttp;
  }
  var http = getHTTPObject(); // We create the HTTP Object
  var url = ""; // The server-side script
  function handleHttpResponse() {
  if (http.readyState == 4) {
  result = http.responseText;
  document.getElementById('MitraAjax').innerHTML = result;
  showDIV(false);
  }
  }
  function showDIV(Showed) {
  // alert((Showed)?"block":"none");
  var DIVImage = document.getElementById("divLoading");
  DIVImage.style.display = (Showed)?"block":"none";
  }
  function echoResult(e) {
  if (!e) var e = window.event
  if (e.target) targ = e.target
  else if (e.srcElement) targ = e.srcElement
  if(targ.rel)
  v = targ.rel;
  else
  {
  targ = targ.parentNode;
  v = targ.rel;
  }
  if((v.substr(0,7) == 'http://')||(v.substr(0,8) == 'https://')||(v.substr(0,6) == 'ftp://'))
  window.open(v);
  else
  {
  showDIV(true);
  if((v.length == 9) && (v.substr(0,9) == 'index.php'))
  v = 'index.php?option=com_frontpage';
  if(v.substr(0,10) == 'index.php?')
  v = "index2" + v.slice(5) + "&t=";
  else
  v = "index" + v.slice(5) + "?t=";
  
  http.open("GET", v , true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
  }
  } function clickIt(e)
  {
  if (!e) var e = window.event
  if (e.target) targ = e.target
  else if (e.srcElement) targ = e.srcElement
  if (targ.nodeType == 3) // defeat Safari bug
  targ = targ.parentNode;
  if(targ.parentNode.nodeName == "A")
  targ = targ.parentNode;
  var tname;
  tname=targ.tagName; if((tname == "A")&&(targ.rel=="")&&(targ.href.substr(0,11)!="javascript:")&&(targ.href.substr(0,7)!="mailto:") && ( targ.target != '_blank'))
  {
  a = targ.href;
  b = "/";
  
  if(a.length)
  if(a.substr(0,b.length) == b)
  a = a.substr(b.length);
  if(targ.onclick == null)
  targ.onclick = echoResult;
  targ.rel = a;
  targ.href="#";
  } }
Kemudian tambahkan script berikut pada tag sehingga akan menjadi seperti ini
Kemudian tambahkan script yang akan menjadi tampilan Ajax loader Anda setelah tag
- Contoh (silahkan paste script dibawah) :
  - Loading - Silahkan Tunggu...

Langkah terakhir adalah dengan menempatkan script berikut sebelum dan sesudah pada site Joomla Anda sehingga akan tampil seperti

showDIV(true);
showDIV(false);

Selesai. sekarang silahkan save dan review web Anda

Cara Kedua

Buka index.php dan template_css.css pada situs Joomla Anda pada folder templates. ex: html_public/templates/(nama template Anda)/index.php dan folder css/template_css.css
Kemudian Edit (online/offline terserah Anda)
Lalu masukkan Script berikut pada template_css.css
- #divLoading {
  font-size: 150%;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color:#FFFFFF;
  filter:alpha(opacity=50);
  -moz-opacity:.50;
  opacity:.50;
  padding-top: 5%;
  color: #0000FF;
  }
lalu buatlah sebuah file baru dengan extensi .js ex: loader.js dan simpan di dalam folder tempate Anda
- function getHTTPObject() {
  var xmlhttp;
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
  try {
  xmlhttp = new XMLHttpRequest();
  } catch (e) {
  xmlhttp = false;
  }
  }
  return xmlhttp;
  }
  var http = getHTTPObject(); // We create the HTTP Object
  var url = ""; // The server-side script
  function handleHttpResponse() {
  if (http.readyState == 4) {
  result = http.responseText;
  document.getElementById('MitraAjax').innerHTML = result;
  showDIV(false);
  }
  }
  function showDIV(Showed) {
  // alert((Showed)?"block":"none");
  var DIVImage = document.getElementById("divLoading");
  DIVImage.style.display = (Showed)?"block":"none";
  }
  function echoResult(e) {
  if (!e) var e = window.event
  if (e.target) targ = e.target
  else if (e.srcElement) targ = e.srcElement
  if(targ.rel)
  v = targ.rel;
  else
  {
  targ = targ.parentNode;
  v = targ.rel;
  }
  if((v.substr(0,7) == 'http://')||(v.substr(0,8) == 'https://')||(v.substr(0,6) == 'ftp://'))
  window.open(v);
  else
  {
  showDIV(true);
  if((v.length == 9) && (v.substr(0,9) == 'index.php'))
  v = 'index.php?option=com_frontpage';
  if(v.substr(0,10) == 'index.php?')
  v = "index2" + v.slice(5) + "&t=";
  else
  v = "index" + v.slice(5) + "?t=";
  
  http.open("GET", v , true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);
  }
  } function clickIt(e)
  {
  if (!e) var e = window.event
  if (e.target) targ = e.target
  else if (e.srcElement) targ = e.srcElement
  if (targ.nodeType == 3) // defeat Safari bug
  targ = targ.parentNode;
  if(targ.parentNode.nodeName == "A")
  targ = targ.parentNode;
  var tname;
  tname=targ.tagName; if((tname == "A")&&(targ.rel=="")&&(targ.href.substr(0,11)!="javascript:")&&(targ.href.substr(0,7)!="mailto:") && ( targ.target != '_blank'))
  {
  a = targ.href;
  b = "/";
  
  if(a.length)
  if(a.substr(0,b.length) == b)
  a = a.substr(b.length);
  if(targ.onclick == null)
  targ.onclick = echoResult;
  targ.rel = a;
  targ.href="#";
  } }
Setelah itu silahkan masukkan script berikut sebelum tag
Kemudian tambahkan script berikut pada tag sehingga akan menjadi seperti ini
Kemudian tambahkan script yang akan menjadi tampilan Ajax loader Anda setelah tag
- Contoh (silahkan paste script dibawah) :
  - Loading - Silahkan Tunggu...

Langkah terakhir adalah dengan menempatkan script berikut sebelum dan sesudah pada site Joomla Anda sehingga akan tampil seperti

showDIV(true);
showDIV(false);

Selesai. sekarang silahkan save dan review web Anda

Untuk contoh jadi didalam file Joomla silahkan download disini

Comments

Great

evancode 2008-12-16 23:22:15

Keren Mas.
kalau saya pengen supaya efeknya khusus buat 1 halaman aja bagaimana
caranya?

Bagus

arulrizal 2008-12-17 06:18:58

Terima kasih tutorial anda sangat bermanfaat bagi saya pemula di Joomla, sucses
menyertai anda

template jadi berantakan

ningrate 2008-12-17 22:56:30

ko template saya jadi berantakan,,,,,

saya pake jomla 1.5.7

contoh

Latvuska 2008-12-18 05:48:19

ada contoh live sitenya gak?

the_free87 2008-12-18 19:15:38

Untuk contoh live sitenya sedang dalam proses

untuk "ningrate" mohon
maaf bila templatenya jadi berantakan, tapi apakah Anda sudah benar
meng-aplikasikan-nya di index.php Anda,.??? :?

kalo buat shop online?

leongage 2008-12-19 08:51:04

saya sudah coba berhasil.. tapi kok setiap kali klik buka new windows ya bro?

dan saat kita klik add cart pun buka new windows.
ada pencerahan?

ko jadi semrawut ya

mazzwie 2009-01-08 04:00:15

untuk joomla 1.0 ama 1.5 sama ga...soalnya pas aku coba di joomla 1.5
templaatenya jd berantakan.
mohon di jelaskan..
id-joomla sip dah..

Pake mootools lebih flexible

Ariston 2009-05-27 17:10:09

Pernah coba metode seperti ini:

window.addEvent('domready',
function(event){
$('myAjaxXHRForm').addEvent('submit', function(e){

e.preventDefault();

this.set('send', {
onRequest:
function(){
$('myAjaxResponse').set('html', 'Waiting for
response...');
console.log('Request sent');
},

onComplete: function(response) {
$('myAjaxResponse').set('html',
response);
console.log('Response received');
}
});

this.send();
});
});

tolong diupdate dong gan

dymazaditya 2011-10-24 16:17:23

banyak part yang hilang gan, tolong diupdate dong artikelnya

Only registered users can write comments!

Last Updated on Wednesday, 10 June 2009 18:37