หลังจากที่ไม่ได้ update บทความหลายสัปดาห์ วันนี้ก็เลยขอ update ซะหน่อย โดยหัวข้อที่จะกล่าวถึงในวันนี้คือ การสร้าง toolbar สำหรับฝั่ง Frontend โดยปกติถ้าเราเขียน Joomla! component มาสักระยะหนึ่ง เราจะพบว่าในฝั่ง Backend มี feature ตัวหนึ่งที่น่าใช้งานมาก ก็คือ toolbar นั่นเอง โดยมันช่วยทั้งการใช้งานสำหรับ User และ Programmer ด้วย ดังนั้นวันนี้เราจะมาพูดถึงการรำเอา toolbar มาใช้ในฝั่ง Frontend กัน

สำหรับหัวจหลักของ toolbar ก็คือไฟล์ menubar.html.php ใน /administrator/includes/ และ joomla.javascript.js ใน /includes/js/ รวมทั้ง CSS บางส่วนใน Admin template โดยไฟล์นี้จะถูก include ใน Admin template สำหรับการแสดงผล toolbar ดังนั้นในการใช้งาน toolbar ใน Frontend จึงต้อง include ไฟล์เหล่านี้ โดยผมได้ทำไฟล์สำหรับเป็นต้นแบบในการใช้งาน toolbar ไว้ซึ่งคุณสามารถ download ไปใช้งานได้เลย โดยไฟล์ที่ผมทำเป็นต้นแบบ คือ ไฟล์ toolbar.php ซึ่งในไฟล์จะมีดังนี้

<?php

// no direct access
defined( '_VALID_MOS' ) or die( 'Restricted access' );

require_once($mainframe->getBasePath("administrator",true)."includes".DIRECTORY_SEPARATOR."menubar.html.php");
require_once("toolbar.html.php");
$path = $mainframe->getCfg("live_site")."/includes/js/joomla.javascript.js";
$tag = "<script language=\"javascript\" type=\"text/javascript\" src=\"{$path}\"></script>";

$mainframe->addCustomHeadTag($tag);
$mainframe->addCustomHeadTag("<style type=\"text/css\">
.menubar {border-bottom:1px solid #cdcdcd;padding:0px;margin:0px;background:#fbfbfb;}
.mod_toolbar {width:70%;}
.pathway_toolbar {width:100%;padding:0px;margin:0px;}
.pathway_toolbar tr td {padding:0px;margin:0px;}
.white {border-top:1px solid #ffffff;}
a.toolbar img {display:block;}
a.toolbar br {display:none;}
</style>");

//Do not edit above lines

โดยจะเป็นส่วนของการ include ไฟล์ที่เกี่ยวข้องตามที่กล่าวมา โดยในไฟล์นี้คุณก็เพิ่มการ switch ($task) สำหรับการแสดง toolbar ได้เหมือน Backend โดยส่วนของ  template ของ toolbar ผมใส่ไว้ใน comname.html.php ดังนี้ครัย

 <?php
// no direct access
defined( '_VALID_MOS' ) or die( 'Restricted access' );

?>
<div class="menubar">
<table class="pathway_toolbar white">
 <tr><td class="mod_toolbar" align="right"><?php require_once("toolbar.php")?></td></tr>
</table>
</div>
<?php

//****************** Do not edit lines above..........

class HTML_test {
 
 function showEditForm($option, $Itemid, $row) {
?>
 <form name="adminForm" method="POST" action="index.php?option=<?php echo "$option&Itemid=$Itemid"?>">
  <table>
   <tr>
    <td>Title</td>
    <td><input type="text" name="title" value="<?php echo $row->title?>"/></td>
   </tr>
   <tr>
    <td>Description</td>
    <td><textarea name="description"><?php echo $row->description;?></textarea></td>
   </tr>
   <tr>
    <td>Create Date</td>
    <td><input type="text" name="created_date" value="" disabled="disabled"/></td>
   </tr>
   <tr> 
    <td>Create By</td>
    <td></td>
   </tr>
   <tr>
    <td> </td>
    <td>
     <input type="hidden" name="task" value="save" />
     <input type="hidden" name="id" value="<?php echo $row->id?>"/>   
    </td>
   </tr>
  </table>
 </form>
<?php 
 }
}
?>

ในไฟล์ตามด้านบนนั้นผมใส่ส่วนของ toolbar ไว้ตอนบนของไฟล์ทำให้เมื่อ include ไฟล์ใน comname.php จะมีการแสดงผล toolbar ในทุกกรณีทั้งนี้ก็ขึ้นอยู่กับการ switch case ของ toolbar.php