Admin.banners.html.php yang berfungsi penuh dengan file SWF (flash)

Home

Tutorial

Admin.banners.html.php yang berfungsi penuh dengan file SWF (flash)

Tutorial
Sonny Soleman, Friday, 14 November 2008 20:00

Pada Joomla versi 1.0 sampai dengan versi terakhir (v1.0.15) saya belum menemukan perbaikan / update yang membuat komponen Banner (administrator backend) bisa bekerja dengan sempurna dengan file SWF (flash), khususnya pada bagian Banner Image Selector-nya. Berikut ini adalah tips untuk mengatasi problem tersebut.

Hallo, Salam Kenal

Untuk beberapa waktu ,saya menggunakan Joomla versi 1.0.X. Tapi sayangnya sampai versi terakhir Joomla (1.0.15) saya belum menemukan perbaikan / update, khususnya untuk komponen banner pada Backend Administrasi Joomla (admin.banners.html.php) yang bekerja secara penuh dengan file SWF (flash). Pada saat saya gunakan"Banner Image Selector" yang langsung mentrigger fungsi javascript "changeDisplayImage()", pemilihan file SWF ternyata tidak bekerja sesuai harapan, file flash (SWF) tidak muncul / tampil. Untuk itu saya akhirnya melakukan modifikasi sesuai dengan artikel ini :

http://www.joomlaworks.gr/content/view/3/34/

Hanya saja step #1 tidak saya ikuti, sebagai gantinya step #1 saya ganti dengan langkah-langkah modifikasi berikut :

1. Jalankan text editor, lalu Load file admin.banners.html.php
2. Pindah / lompat ke baris 147, sebelum baris 147 tambahkan kode javascript berikut (copy & paste) :

<script language="JavaScript" type="text/javascript">
<?
if (!function_exists('fnmatch')) {
   function fnmatch($pattern, $string) {
       return @preg_match('/^' . strtr(addcslashes($pattern, '\\.+^$(){}=!<>|'), array('*' => '.*', '?' => '.?')) . '$/i', $string);
   }
}

// set directory name
$mydir = "../images/banners";
// set pattern
$pattern = "*.swf";
$listfile = array();
$listwidth = array();
$listheight = array();
if (is_dir($mydir)) {
   if ($dh = opendir($mydir)) {
      while (($filename = readdir($dh)) !== false) {
           if (fnmatch($pattern, $filename)) {
              $myimageurl = "../images/banners/".$filename;
              list($width, $height, $type, $attr) = @getimagesize($myimageurl);
              array_push($listfile,$filename);
              array_push($listwidth,$width);
              array_push($listheight,$height);
           }
      }
      closedir($dh);
   }
}
echo "var listfile = new Array(";
for ($i=0; $i<count($listfile); $i++) {
     echo "\"".$listfile[$i]."\"";
     if ($i<count($listfile)-1) echo ",";
}
echo ");\n";
echo "var listwidth = new Array(";
for ($i=0; $i<count($listwidth); $i++) {
     echo $listwidth[$i];
     if ($i<count($listwidth)-1) echo ",";
}
echo ");\n";
echo "var listheight = new Array(";
for ($i=0; $i<count($listheight); $i++) {
     echo $listheight[$i];
     if ($i<count($listheight)-1) echo ",";
}
echo ");\n";
?>

if(!Array.indexOf){
  Array.prototype.indexOf = function(obj){
      for(var i=0; i<this.length; i++){
          if(this[i]==obj){
            return i;
          }
      }
      return -1;
  }
}

function posSwf(nmfile) {
return listfile.indexOf(nmfile);
}
</script>

3. Lompat / pindah ke baris 213, anda akan menemukan function changeDisplayImage (versi asli) ini :

function changeDisplayImage() {
     if (document.adminForm.imageurl.value !='') {
        document.adminForm.imagelib.src='../images/banners/' + document.adminForm.imageurl.value;
     } else {
        document.adminForm.imagelib.src='images/blank.png';
     }
}

4. Replace / timpa semua bagian dari function changeDisplayImage (baris 213 sampai 219) dengan kode berikut ini (copy and paste) :

if(typeof deconcept=="undefined"){var deconcept={};}if(typeof deconcept.util=="undefined"){deconcept.util={};}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil={};}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params={};this.variables={};this.attributes=[];if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){if(!deconcept.unloadSet){deconcept.SWFObjectUtil.prepUnload=function(){__flash_unloadHandler=function(){};__flash_savedUnloadHandler=function(){};window.attachEvent("onunload",deconcept.SWFObjectUtil.cleanupSWFs);};window.attachEvent("onbeforeunload",deconcept.SWFObjectUtil.prepUnload);deconcept.unloadSet=true;}}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10]||"";},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15]||"";},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=[];var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="<embed type=\"application/x-shockwave-flash\" src=\""+this.getAttribute("swf")+"\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+(this.getAttribute("style")||"")+"\"";_19+=" id=\""+this.getAttribute("id")+"\" name=\""+this.getAttribute("id")+"\" ";var _1a=this.getParams();for(var key in _1a){_19+=[key]+"=\""+_1a[key]+"\" ";}var _1c=this.getVariablePairs().join("&");if(_1c.length>0){_19+="flashvars=\""+_1c+"\"";}_19+="/>";}else{if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","ActiveX");this.setAttribute("swf",this.xiSWFPath);}_19="<object id=\""+this.getAttribute("id")+"\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\""+this.getAttribute("width")+"\" height=\""+this.getAttribute("height")+"\" style=\""+(this.getAttribute("style")||"")+"\">";_19+="<param name=\"movie\" value=\""+this.getAttribute("swf")+"\" />";var _1d=this.getParams();for(var key in _1d){_19+="<param name=\""+key+"\" value=\""+_1d[key]+"\" />";}var _1f=this.getVariablePairs().join("&");if(_1f.length>0){_19+="<param name=\"flashvars\" value=\""+_1f+"\" />";}_19+="</object>";}return _19;},write:function(_20){if(this.getAttribute("useExpressInstall")){var _21=new deconcept.PlayerVersion([6,0,65]);if(this.installedVer.versionIsValid(_21)&&!this.installedVer.versionIsValid(this.getAttribute("version"))){this.setAttribute("doExpressInstall",true);this.addVariable("MMredirectURL",escape(this.getAttribute("xiRedirectUrl")));document.title=document.title.slice(0,47)+" - Flash Player Installation";this.addVariable("MMdoctitle",document.title);}}if(this.skipDetect||this.getAttribute("doExpressInstall")||this.installedVer.versionIsValid(this.getAttribute("version"))){var n=(typeof _20=="string")?document.getElementById(_20):_20;n.innerHTML=this.getSWFHTML();return true;}else{if(this.getAttribute("redirectUrl")!=""){document.location.replace(this.getAttribute("redirectUrl"));}}return false;}};deconcept.SWFObjectUtil.getPlayerVersion=function(){var _23=new deconcept.PlayerVersion([0,0,0]);if(navigator.plugins&&navigator.mimeTypes.length){var x=navigator.plugins["Shockwave Flash"];if(x&&x.description){_23=new deconcept.PlayerVersion(x.description.replace(/([a-zA-Z]|\s)+/,"").replace(/(\s+r|\s+b[0-9]+)/,".").split("."));}}else{if(navigator.userAgent&&navigator.userAgent.indexOf("Windows CE")>=0){var axo=1;var _26=3;while(axo){try{_26++;axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash."+_26);_23=new deconcept.PlayerVersion([_26,0,0]);}catch(e){axo=null;}}}else{try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");}catch(e){try{var axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");_23=new deconcept.PlayerVersion([6,0,21]);axo.AllowScriptAccess="always";}catch(e){if(_23.major==6){return _23;}}try{axo=new ActiveXObject("ShockwaveFlash.ShockwaveFlash");}catch(e){}}if(axo!=null){_23=new deconcept.PlayerVersion(axo.GetVariable("$version").split(" ")[1].split(","));}}}return _23;};deconcept.PlayerVersion=function(_29){this.major=_29[0]!=null?parseInt(_29[0]):0;this.minor=_29[1]!=null?parseInt(_29[1]):0;this.rev=_29[2]!=null?parseInt(_29[2]):0;};deconcept.PlayerVersion.prototype.versionIsValid=function(fv){if(this.major<fv.major){return false;}if(this.major>fv.major){return true;}if(this.minor<fv.minor){return false;}if(this.minor>fv.minor){return true;}if(this.rev<fv.rev){return false;}return true;};deconcept.util={getRequestParameter:function(_2b){var q=document.location.search||document.location.hash;if(_2b==null){return q;}if(q){var _2d=q.substring(1).split("&");for(var i=0;i<_2d.length;i++){if(_2d[i].substring(0,_2d[i].indexOf("="))==_2b){return _2d[i].substring((_2d[i].indexOf("=")+1));}}}return "";}};deconcept.SWFObjectUtil.cleanupSWFs=function(){var _2f=document.getElementsByTagName("OBJECT");for(var i=_2f.length-1;i>=0;i--){_2f[i].style.display="none";for(var x in _2f[i]){if(typeof _2f[i][x]=="function"){_2f[i][x]=function(){};}}}};if(!document.getElementById&&document.all){document.getElementById=function(id){return document.all[id];};}var getQueryParamValue=deconcept.util.getRequestParameter;var FlashObject=deconcept.SWFObject;var SWFObject=deconcept.SWFObject;

5. Lompat / pindah ke baris 347, temukan kode HTML berikut ini:

<td valign="top">
<?php
if (eregi("swf", $_row->imageurl)) {
?>
<img src="/images/blank.png" name="imagelib">
<?php
} elseif (eregi("gif|jpg|png", $_row->imageurl)) {
?>
<img src="/../images/banners/<?php echo $_row->imageurl; ?>" name="imagelib" />
<?php
} else {
?>
<img src="/images/blank.png" name="imagelib" />
<?php
}
?>
</td>

6. Replace / timpa semuanya (dari baris 347 sampai 363) dengan kode berikut ini (copy & paste) :

<td valign="top"><div id="bannerflash" style="top:0px;left:0px;margin:0px;">
<?
if (eregi("swf", $_row->imageurl)) {
   $imageurl = "../images/banners/".$_row->imageurl;
   list($width, $height, $type, $attr) = @getimagesize($imageurl);
   echo "<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0\"    width=\"".$width."\" height=\"".$height."\">";
   echo "<param name=\"movie\" value=\"".$imageurl."\" />";
   echo "<param name=\"quality\" value=\"high\" />";
   echo "<embed src=\"".$imageurl."\" quality=\"high\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\"".$width."\"    height=\"".$height."\"></embed>";
   echo "</object>";
}
?>
</div>
<div id="bannerimage">
<?
if (eregi("gif|jpg|png", $_row->imageurl)) {
   $imageurl = "../images/banners/".$_row->imageurl;
   echo "<img src=\"".$imageurl."\" id=\"mine\" border='0'/>";
} else {
?>
<img src="/images/blank.png" id="mine" border='0'/>
<? } ?>
</div>
<script language="JavaScript" type="text/javascript">
<?php
if (eregi("swf", $_row->imageurl)) {
   $imageurl = "../images/banners/".$_row->imageurl;
   list($width, $height, $type, $attr) = @getimagesize($imageurl);
   echo "var so = new SWFObject(\"".$imageurl."\", \"sampleSwf\", \"".$width."\", \"".$height."\", \"7\", \"#000000\");";
   echo "so.write(\"bannerflash\");";
   echo "document.getElementById(\"mine\").src = \"images/blank.png\";";
} elseif (eregi("gif|jpg|png", $_row->imageurl)) {
   $imageurl = "../images/banners/".$_row->imageurl;
   echo "document.getElementById(\"mine\").src = \"".$imageurl."\";";
} else {
   echo "document.getElementById(\"mine\").src = \"images/blank.png\";";
}
?>
</script>
</td>

7. Save / Simpan semua hasil modifikasi di atas, tutup text editornya.

8. Lanjutkan step berikut sesuai artikel ini (kecuali step #1, yang telah saya ganti langkah-langkahnya seperti di atas) :

http://www.joomlaworks.gr/content/view/3/34/

9. Upload kembali file yang telah dimodifikasi termasuk admin.banners.html.php (hasil modifikasi cara saya) ini ke website Joomla anda.

Akhirnya, semuanya bisa berjalan sesuai harapan (Banner Selector bisa memilih file SWF dan langsung muncul perubahannya) . Semoga cara modifikasi ini bisa mengatasi masalah anda dengan file SWF / flash.

NB : Jika muncul syntax error pada "@getimagesize", edit dan hilangkan karakter "@" pada perintah "@getimagesize" di file admin.banners.html.php.
Semua modfikasi ini berdasarkan penggunaan javascript SWFObject versi v1.5.1 (http://blog.deconcept.com/swfobject/)

Salam Joomla Mania.

Comments