توسعه جوملا و كلا كار روي اين سيستم براي بسياري كار دشواري به نظر ميرسه اما واقيعيت اينه كه بيشتر زحمات و سختي هاي توسعه يك برنامه تحت وب توسط تيم جوملا! و در لايه هاي پايين تر سيستم انجام شده و تنها كاري كه براي ما ميمونه استفاده از اونهاست .
در ادامه قصد داريم ايجاد يك كامپوننت كه داراي بخش مديريتي و عمومي هست رو مرور كنيم .
البته به دليل اينكه نميخوام اين مقاله حالا حالاها قديمي بشه با نسخه 1.5 كار ميكنيم كه در حال حاضر به صورت آزمايشي هست و نسخه نهايي اون منتشر نشده .
1- قدم اول ايجاد پوشه هاي مورد نياز كامپوننت در قسمت كاربري و مديريت :
نام اين پوشه ها هرچه باشد بايد با _comشروع شود .
بهتره اسم پوشه با كامپوننت شما مرتبط بشه و البته بدون فاصله و با حروف كوچك انتخاب بشه .
با نگاهي به پوشه components در مسير اصلي جوملا اسامي كامپوننت هاي پيشفرض جوملا قابل مشاهده هست .
خوب بنابراين براي كامپوننت ما كه web نام داره پوشه اي با نام com_web در پوشه components موجود در مسير اصلي و يك نسخه در پوشه components موجود در پوشه administrator ايجاد كنيد .
2 - ايجاد فايلهاي اصلي كامپوننت براي قسمت كاربري و مديريت :
نام فايل براي قسمت كاربري در واقع همان اسم كامپوننت با توسعه php. هست كه براي كامپوننت ما بايد فايلي با نام web.php در پوشه com_web در پوشه components موجود در مسير اصلي ايجاد كنيد .
نام فايل مديريت هم اسم كامپوننت هست به اضافه .admin در ابتداي آن . پس فايلي به نام admin.web.php در پوشه com_web در پوشه components موجود در پوشه administrator ايجاد كنيد .
فايل web.php رو باز كنيد و داخل اون دستورات php يا html تايپ كنيد .
محتويات اين فايل با آدرس زير قابل دسترسي مي باشد :
index.php?Itemid=30&option=com_web
و به همين شكل براي فايل admin.web.php از طريق اين آدرس :
administrator/index.php?option=com_web
3 - اطمينان از اجرا شدن فايل توسط جوملا :
همان طور كه ميبينيد كامپوننت ما توسط جوملا اجرا ميشه و بايد از اجراي مستقيم آن توسط آدرس مستقيم زير جلوگيري كنيم :
components\com_web\web.php
administrator/components\com_web\web.php
روش كار به اين صورت هست كه در ابتداي همه فايلها از وجود يك ثابت اطمينان پيدا ميكنيم . بوسيله اين ترفند بسيار ساده ولي كارا خطرات و مشكلات احتمالي ناشي از اجراي مسقيم اسكريپتها رو غير ممكن ميكنيم .
نام ثابتي كه در جوملا 1.5 استفاده شده JEXEC_ هست كه در واقع اولين خط اجرا شونده در فايل index.php وظيفه تعريف اون رو بر عهده داره كه البته اين ثابت با مقدار 1 تعريف ميشه كه معادل true هست .
پس ميتونيم از كد زير براي اطمينان از اين جهت استفاده كنيم :

defined('_JEXEC') or die('Restricted access');

4 - درج عنوان كامپوننت براي قسمت مديريت و كاربري :
كليه محتويات فايل web.php رو پاك كنيد و كدهاي زير رو وارد كنيد :

<?php
defined( '_JEXEC' ) or die ( 'no direct access' );
?>
<div class="componentheading">web tools</div>
<?php
 
?>

همان طور كه مشاهده ميكنيد خاصيت CSS اين تگ DIV رو معادل componentheading قرار داديم .
ما هيچ وقت قرار نيست كه اين كلاس CSS رو تعريف كنيم چون از هر template كه استفاده كنيد داراي اين كلاس هست .
از طريق آدرس index.php?option=com_web متوجه همخواني اين استايل با تمپليت مورد استفاده ميشويد .
براي قسمت مديريت هم كد زير رو در فايل admin.web.php درج كنيد :

<?php
defined( '_JEXEC' ) or die ( 'no direct access' );
?>
web tools
<?php
 
?>

5 - ايجاد تولبار براي قسمت مديريت با استفاده از امكانات جوملا :
منظور از تولبار دكمه هاي بالا سمت راست هر كامپوننت هست . براي ديدن يك نمونه از در كنترل پنل جوملا به قسمت Article Manager مراجعه كنيد كه در اين صورت دكمه هاي New , Edit, Copy و خيلي از موارد ديگه كه با توجه كامپوننت و موقيعت قرارگيري متغيير هست . منظور از موقيعت قرارگيري مثلا موقيعت اضافه كردن و يا ويرايش هست .
براي اضافه كردن تولبار به كامپوننت همانند تمام نامگذاريها در جوملا قوائد موجود رو رعايت كنيد .
فايلهاي مورد نياز براي تولبار عبارتد از :
5 - 1 نام كامپوننت به اضافه كلمه .toolbar در ابتدا و html.php. در انتها .
پس بايد فايلي با نام toolbar.web.html.php در پوشه com_web در پوشه components موجود در پوشه administrator ايجاد كنيد .
اين فايل بايستي شامل كلاسي با نام كامپوننت به اضافه _TOOLBAR در ابتدا باشد .
پس براي ما كلاس TOOLBAR_web بايستي تعريف شود .
كامپوننت ما براساس نوع فعاليت خود داراي موقيعت يا وظيفه هاي (task) زير ميباشد :
. اضافه كردن (add)
. ويرايش كردن (edit)
. پيشفرض (default)
جهت دو آيتم اول به يك سري دكمه مشابه شامل save , apply , cancel نياز داريم و براي آيتم سوم به دكمه هاي add , delete , publish , unpublish نياز داريم .
پس براي كلاس TOOLBAR_web دو متد زير رو تعريف ميكنيم :
NEW_
و
DEFAULT_
و دكمه هاي مورد نياز رو درون هر تابع با استفاده از امكانات جوملا مشخص ميكنيم .
نياز به توضيح نيست كه در مورد اين فايلها هم بايد از اجراي مستقيم جلوگيري كنيد .
به كد كامل فايل toolbar.web.html.php توجه كنيد :

<?php
defined( '_JEXEC' ) or die ( 'no direct access' );
class TOOLBAR_web
{
  function _NEW()
  {
    JToolBarHelper::title( JText::_( 'web tools - add new item' ) , 'generic.png' );
    JToolBarHelper::save();
    JToolBarHelper::apply();
    JToolBarHelper::cancel();
  }
  function _DEFAULT()
  {
    JToolBarHelper::title( JText::_( 'web tools' ) , 'generic.png' );
    JToolBarHelper::publishList();
    JToolBarHelper::unpublishList();
    JToolBarHelper::editList();
    JToolBarHelper::deleteList();
    JToolBarHelper::addNew();
  }
 
 
}
?>

ما از كلاسي به نام JToolBarHelper استفاده كرده ايم كه تمام كدهاي html مورد نياز براي تولبار ما رو ايجاد ميكنه .

5 - 2 نام كامپوننت به اضافه كلمه .toolbar در ابتدا و php. در انتها .
پس بايد فايلي با نام toolbar.web.php در پوشه com_web در پوشه components موجود در پوشه administrator ايجاد كنيد .
محتويات اين فايل هم در واقع قسمت dispatch كامپوننت هست كه اين كار با استفاده از دستور switch انجام ميشه .
به كد كامل فايل toolbar.web.php توجه كنيد :

<?php
defined( '_JEXEC' ) or die ( 'no direct access' );
require_once( JApplicationHelper::getpath( 'toolbar_html' ));
switch($task)
{
    case 'edit':
    case 'add':
        TOOLBAR_web::_NEW();
        break;
    default:
        TOOLBAR_web::_DEFAULT();
        break;
 
}
?>

پس از اطمينان از اجرا شدن توسط جوملا با استفاده از متد getpath از كلاس JApplicationHelper فايل مورد نياز براي قسمت html تولبار رو ضميمه اسكريپت خودمون كرديم كه البته نياز به ذكر نام كامل فايل نيست و با فراخواني متد با مقدار toolbar_html فايل toolbar.web.html.php به داخل برنامه وارد ميشه .
مزيت اين جور نامگذاريها و خلاصه نويسيها در اين است كه اگر نام كامپوننت تغيير پيدا كنه نياز به كمترين ويرايش كد خواهيم داشت و البته از خطاهاي احتمالي هم جلوگيري ميكنه .
مرحله بعدي مديريت وظايف هست كه اصلاحا dispatch ناميده ميشه .
اين كار با استفاده از مقدار task انجام ميشه كه به صورت خودكار توسط جوملا ايجاد ميشه .
براي مثال هنگامي كه وضعيت ويرايش هست متغيير task مقدار edit خواهد داشت و به اين ترتيب قادر خواهيم بود كه وظايف و موقيعيت ها رو مديريت كنيم .
اين يكي از استانداردترين روشهاي مديريت وظايف هست كه با دستور siwtch انجام ميشه و شما حتي ميتونيد در برنامه ديگه هم از اين روش جالب و مطمئن به جاي روشهاي نامنظمي مثل استفاده از دستور isset استفاده كنيد .
روش كار هم همانطور كه ميبينيد سوييچ موجود با گرفتن مقدار task متوجه ميشه كه بايد تابعي رو صدا بزنه .
سپس هر وظيفه تا task در قالب يك تابع نوشته ميشه مثلا وقتي يك تابع به نام add() ايجاد ميكنيد و در دستور سوييچ وقتي كه مقدار task برابر با add باشه فقط بايد تابع add() فراخواني بشه .
اكنون براي تست كدهايي كه نوشتيم چند تا آزمايش انجام ميديم .
با استفاده از آدرس هاي زير بايد موقيعت پيشفرض با 5 دكمه تعريف شده نمايان بشه :
administrator/index.php?option=com_web
administrator/index.php?option=com_web&task=default
با زدن آدرس هاي زير هم بايد موقيعت اضافه يا ويرايش با 3 دكمه تعريف شده نمايان بشه :
administrator/index.php?option=com_web&task=add
administrator/index.php?option=com_web&task=edit

اما كاربر اين كار به صورت موقت هست و بعد از تعريف فرم هر يك از كمه ها اين موقيعت ها رو ايجاد خواهند كرد و نيازي به تايپ مستقيم اونها نخواهد بود .
براي مثال با ورود به وضعيت پيشفرض :
administrator/index.php?option=com_web
و زدن دكمه add به آدرس :
administrator/index.php?option=com_web&task=add
خواهيم رفت .

6 - ايجاد ديتا بيس مورد نياز براي ذخيره اطلاعات :
جدولي كه من براي ذخيره اطلاعات در نظر گرفتم بدين شكل هست :

CREATE TABLE jos_web
(
id int(11) NOT NULL auto_increment,
name varchar(255) NOT NULL,
state varchar(31) NOT NULL,
userdesc text NOT NULL,
notes text NOT NULL,
date datetime NOT NULL,
published tinyint(1) unsigned NOT NULL default '0',
PRIMARY KEY (id)
);

براي ساخت اين جدول ميتونيد از برنامه phpMyAdmin استفاده كنيد .
دقت كنيد كه در صورتي كه پسوند جداول شما هنگام نصب جوملا چيزي به غير از jos_ انتخاب شده همان پسوند رو مورد استفاده قرار بديد .
خوب اكنون كه ما جدول خودمون رو ساختيم ميتونيم كه توابعي براي مديريت اطلاعات اين جدول ايجاد كنيم كه اطلاعات رو نمايش بده ‘ ويرايش كنه و يا اينكه حذف كنه . خوب در نوشتن همچنين توابعي بايستي از ساختار جوملا و سيستمهاي امنيتي اون مطلع باشيد كه البته احتمالا در آخر هم امكان وجود باگ نرم افزاري دور از انتظار نيست .
خوشبختانه جوملا اين كار رو از قبل براي شما انجام داده كه ميتونيم به راحتي از اون استفاده كنيم .
براي اينكار هم بايد از كلاس JTable استفاده كنيم . JTable به شما امكان ايجاد ‘ خواندن ‘ ويرايش و حذف ركوردهاي يك جدول در ديتا بيس را به شما ميده .
براي بهره گيري از JTable بايستي يك توسعه اون رو براي جدول jos_web ايجاد كنيم . به همين منظور يك پوشه به نام tables در پوشه com_web در پوشه components موجود در پوشه administrator ايجاد كنيد .
در اين پوشه فايلي به نام web.php ايجاد كنيد و كد زير را در آن تايپ كنيد :

<?php
defined('_JEXEC') or die('Restricted access');
class TableWeb extends JTable
{
  var $id = null;
  var $name = null;
  var $state = null;
  var $userdesc = null;
  var $notes = null;
  var $date = null;
  var $published = null;
  function __construct(&$db)
  {
    parent::__construct( '#__web', 'id', $db );
  }
}
?>

وقتي كه ما قصد ايجاد يك توسعه از JTable را داريم بايستي نام تمام ستونها رو به عنوان متغييرهاي عضو اون توسعه تعريف كنيم و مقدار اوليه null به اونها بديم . همچنين رونويسي متد constructor كلاس با متد __construct() .
در ساده ترين شكل متد __construct() با پارامترهاي دريافتي كلاس والد خودش رو با مقادير زير صدا مييزنه :
نام جدول : #__web
توجه داشته باشيد كه براي داشتن امكان چندين نصب در يك ديتا بيس و همچنين عدم نياز تغييرات در كد توسط شخص ديگري كه بخواهد از اين كامپوننت استفاده كند ما به هيچ وجه پسوند جداول اين نصب از جوملا رو داخل كد خودمون نمي آوريم و همان طور كه در كد بالا ملاحظه ميكنيد به جاي پسوند جدول از #__ استفاده كرده ايم كه موقع اجرا به نام پسوند سيستم ترجمه ميشه .
كلاس TableWeb متدهاي bind(), store(), load(), and delete() و ديگر متدهاي مورد نياز را به ارث خواهد برد .
اين چهار فانكشن به شما اجازه مديريت ركوردهاي ديتا بيس را بدون نياز از حتي يك خط دستور SQL خواهد داد .

در اين مرحله كه جدول و كلاس مورد نياز آن را ساخته ايم نياز به ايجاد رابط كاربري براي درج اطلاعات توسط كاربر داريم كه با ايجاد يك فرم اين كار رو شروع ميكنيم .
كد مورد نياز براي اين كار بايد در فايل admin.web.php قرار بگيره مادامي كه فايل admin.web.html.php حاوي كدهاي html مورد نياز براي اين كار خواهد بود .
فايل admin.web.php رو باز كنيد و محتواي اون رو بدين صورت تغيير دهيد :

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( JApplicationHelper::getPath( 'admin_html' ) );
JTable::addIncludePath(JPATH_COMPONENT.DS.'tables');
switch($task)
{
  case 'add':
  editWeb( $option );
  break;
}
function editWeb( $option )
{
  $row =& JTable::getInstance('Web', 'Table');
  $lists = array();
  $state = array(
  '0' => array('value' => 'None Taken',
  'text' => 'None Taken'),
  '1' => array('value' => 'Accepted',
  'text' => 'Accepted'),
  '2' => array('value' => 'Suggested',
  'text' => 'Suggested'),
  '3' => array('value' => 'Required',
  'text' => 'Required'),
);
 
$lists['state'] = JHTML::_('select.genericList',
$state, 'state', 'class="inputbox" '. '', 'value',
'text', $row->state );
$lists['published'] = JHTML::_('select.booleanlist', 'published',
'class="inputbox"', $row->published);
HTML_web::editWeb($row, $lists, $option);
}
?>

بعد از كنترل اجراي فايل توسط جوملا از دستور require_once استفاده كرده ايم البته با مقدار JApplicationHelper::getPath( 'admin_html' ) براي ضميمه كردن فايل admin.web.html.php به فايل admin.web.php .
متد getpath محل قرارگيري فايلهاي كامپوننت رو برميگردونه كه با پارامتر admin_html بدون استفاده از نام كامل فايل admin.web.html.php اون رو به داخل فايل ضميمه ميكنيم .
بدين ترتيب در صورتي كه نياز به تغيير نام كامپوننت و فايلها داشته باشيم بدون ويرايش كد قادر به انجام آن خواهيم بود .
به جاي استفاده از دستور include براي ضميمه فايل محتوي كلاس TableWeb از متد addIncludePath استفاده كرده ايم كه باعث ميشه تمام فايلهاي موجود در پوشه tables به داخل برنامه ضميمه شوند .
همان طور كه مشاهده ميكنيد به جاي درج مسير فايل از مقداري كه در JPATH_COMPONEN و DS ست ميشوند استفاده كرده ايم . شما در هر فايلي كه مقدار JPATH_COMPONENT رو پرينت بگيريد متوجه ميشيد كه همواره محل كامل فايل رو برميگردونه و دومي هم براي ايجاد هماهنگي بين سيستم عاملهاي مختلف هست .
سپس توسط دستور سوييچ تصميم گيري و مديريت وظايف با استفاده از مقدار task رو شروع ميكنيم كه در حال حاضر براي مقدار add تابع editWeb رو اجرا ميكنيم با مقدار option كه اين مقدار هم توسط جوملا ساخته ميشه .
گام بعدي تدارك ديدن كنترل يا المنت هاي html هست كه با امكانات جوملا كنترلهاي خودمون اعم از فيلد متني ‘ فيلد انتخاب و دكمه هاي راديويي رو تحت يك آرايه به عنوان پارامتر دوم متد editWeb ارسال ميكنيم .
پارامتر اول شي حاوي ركوردهاي جدول و پارامتر سوم هم نام كامپوننت ميباشد .
مرحله بعدي ايجاد فايل رابط كاربري كه محتوي فرم html هست ميباشد .
فايلي به نام admin.web.html.php در پوشه com_web در پوشه components موجود در پوشه administrator ايجاد كنيد و كد زير رو درآن تايپ كنيد :

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
class HTML_web
{
  function editWeb( $row, $lists, $option )
  {
  $editor =& JFactory::getEditor();
  JHTML::_('behavior.calendar');
  ?>
  <form action="index.php" method="post" name="adminForm" id="adminForm">
    <fieldset class="adminform">
    <legend>Details</legend>
            <table class="admintable">
                <tr>
                    <td width="100" align="right" class="key">Name:</td>
                    <td>
                        <input class="text_area" type="text" name="name" id="name" size="50" maxlength="250" value="<?php echo $row->name;?>" />
                    </td>
                </tr>
                <tr>
                    <td width="100" align="right" class="key">
                        state:
                    </td>
                    <td>
                        <?php echo $lists['state']; ?>
                    </td>
                </tr>
                <tr>
                    <td width="100" align="right" class="key">
                        userdesc:
                    </td>
                    <td>
                        <?php echo $editor->display( 'userdesc', $row->userdesc ,'100%', '150', '40', '5' ) ;?>
                    </td>
                </tr>
                <tr>
                    <td width="100" align="right" class="key">
                        Notes:
                    </td>
                    <td>
                        <textarea class="text_area" cols="20" rows="4" name="notes" id="notes" style="width:500px">
                            <?php echo $row->notes; ?>
                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td width="100" align="right" class="key">
                        Date:
                    </td>
                    <td>
                        <input class="inputbox" type="text" name="web_date" id="web_date" size="25" maxlength="19" value="<?php echo $row->date; ?>" />
                        <input type="reset" class="button" value="..." onclick="return showCalendar('web_date','y-mm-dd');" />
                    </td>
                </tr>
                <tr>
                    <td width="100" align="right" class="key">
                        Published:
                    </td>
                    <td>
                        <?php echo $lists['published']; ?>
                    </td>
                </tr>
            </table>
    </fieldset>
    <input type="hidden" name="id" value="<?php echo $row->id; ?>" />
    <input type="hidden" name="option" value="<?php echo $option;?>" />
    <input type="hidden" name="task" value="" />
  </form>
  <?php
  }
}
?>

اكنون با استفاده از آدرس زير :
administrator/index.php?option=com_web&task=add
بايستي فرم درج اطلاعات رو ببينيد .

پس از بررسي اجرا شدن توسط جوملا كلاسي يه نام HTML_web ايجاد كرده ايم كه داراي متدي با نام editWeb ميباشد .
متد editWeb پارامترهاي row , list و option را دريافت ميكنه كه توسط فايل admin.web.php ارسال شده اند و توضيحات آن را نيز بررسي كرديم .
با استفاده از JFactory::getEditor() اديتور پيشرفته tinymce 2.0 كه به صورت پيشفرض در جوملا فعال است را مقدار دهي ميكنيم .
JHTML::_('behavior.calendar') باعث اضافه شدن فايلهاي جاوااسكريپت و css مربوط به تقويم به قسمت هدر صفحه ميشه .
لازم به تذكر نيست كه نام فرم مديريت هم همانند ديگر قسمتها از قوانين نامگذاري پيروي ميكنه و براي مثال مقدار adminform بايستي به همين نام باشه . مثلا براي دكمه ي ذخيره تعريف شده كه مقادير فرمي به نام adminform را ارسال كند .
همان طور كه ميبينيد براي چاپ مقادير موجود المنتها از ديتابيس در قسمت value از شي row استفاده شده . مثلا براي فيلدي به نام name خواهيم داشت : $row->name .
از متد display براي نمايش اديتور استفاده كرده ايم كه پارامترهاي آن نام المنت و ديتايي كه بايد در آن از ديتا بيس خوانده و چاپ شود و مشخصات ظاهري اعم از تعداد سطر و ستون و غيره هست .
در صورتي كه در پلاگين اديتور غير فعال باشد يك textarea به جاي آن بوجود مي آيد .
تا اينجا رابط كاربري براي درج اطلاعات ساخته شد و دستور سوييچ موجود در فايل admin.web.php در صورت دريافت task يا وظيفه add اين فرم رو براي ما بوجود مياره .
با
آدرس زير بايد فرم درج اطلاعات براي شما نمايش داده شود :
administrator/index.php?option=com_web&task=add