Front End และ Back End ใน Joomla Component

การสร้างคอมโพเน้นท์ของจูมล่านั้นจะมีการแบ่งออกเป็นสองส่วนคือ Front End (สำหรับผู้ใช้งานทั่วไป) และ Back End (สำหรับผู้ดูแลระบบ) ซึ่งในบทความนี้จะพูดถึงเฉพาะ Front End และ Back End สำหรับหลักการเขียน Component ของ Joomla ดูได้ที่บทความ สร้าง Componentเรียนรู้ MVC แบบ Joomla แบบง่ายซึ่งมีส่วนของ admin และ site ตามที่ได้กล่างข้างตน ซึ่งในการทำ Component เราจะเริ่มลำดับด้วย Back End หรือหลังบ้าน และตามด้วย Front End หรือหน้าบ้านของ joomla 

Back End

1. อันดับแรกให้ไปสร้างโฟลเดอร์คอมโพเน้นท์ com_frontbackend จากนั้นเพิ่มไฟล์ xml คือเป็นบอกรายละเอียดของ Component เช่น ชื่อของผู้พัฒนา, วันที่พัฒนา และยังบอกเกี่ยวกับไฟล์กับโฟลเดอร์ที่ใช้ใน Component อีกด้วย

โค้ดในไฟล์ com_frontbackend.xml

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.1" method="upgrade">
	<name>com_frontbackend</name>
	<author>Joomla! Project</author>
	<creationDate>February 2023</creationDate>
	<copyright>(C) 2006 Open Source Matters, Inc.</copyright>
	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
	<authorEmail>[email protected]</authorEmail>
	<authorUrl>www.joomla.org</authorUrl>
	<version>1.0.0</version>
	<description>COM_FRONTBACKEND_XML_DESCRIPTION</description>

<!-- โครงสร้างฝั่งหน้าเว็บ -->
	<files folder="site">
		<filename>controller.php</filename>
		<filename>router.php</filename>
		<filename>frontbackend.php</filename>
		<folder>controllers</folder>
		<folder>language</folder>
		<folder>models</folder>
		<folder>views</folder>
	</files>

<!-- โครงสร้างฝั่ง admin -->
	<administration>
		<menu>com_frontbackend</menu>
		<files folder="admin">
			<filename>controller.php</filename>
			<filename>frontbackend.php</filename>
			<filename>config.xml</filename>
			<folder>controllers</folder>
			<folder>helpers</folder>
			<folder>models</folder>
			<folder>views</folder>
		</files>
	</administration>
</extension>

 

2. สร้างไฟล์เริ่มแรกของคอมโพเน้นท์ com_frontbackend/frontbackend.php

Code ของไฟล์ frontbackend.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_frontbackend
 *
 * @copyright   (C) 2007 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
JHtml::_('behavior.tabstate');

if (!JFactory::getUser()->authorise('core.manage', 'com_frontbackend'))
{
	throw new JAccessExceptionNotallowed(JText::_('JERROR_ALERTNOAUTHOR'), 403);
}

JLoader::register('FrontbackendHelper', __DIR__ . '/helpers/frontbackend.php');

$controller = JControllerLegacy::getInstance('Frontbackend');
$controller->execute(JFactory::getApplication()->input->get('task'));
$controller->redirect();

 

3. Model จะเป็นในส่วนเกี่ยวกับฐานข้อมูล

3.1 สร้างโฟลเดอร์ models

3.2 สร้างไฟล์ models/test.php

Code ของไฟล์ models/test.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_frontbackend
 *
 * @copyright   (C) 2007 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

class FrontBackendModelFrontBackend extends Joomla\CMS\MVC\Model\ListModel
{
    public function getItem()
    {
        $time = time();
        $date = date('d/m/Y', $time);
        return $date;
    }

}

 

4. Controller เป็นส่วนการจัดการส่วน view กับ model

4.1 สร้าง Default Controller โดยตั้งชื่อไฟล์เป็น controller.php

Code ของไฟล์ controller.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_frontbackend
 *
 * @copyright   (C) 2007 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

class FrontbackendController extends Joomla\CMS\MVC\Controller\BaseController
{
    
}

 

4.2 สร้างโฟลเดอร์ controllers

4.3 สร้างไฟล์ controllers/test.php

 

Code ของไฟล์ controllers/test.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_frontbackend
 *
 * @copyright   (C) 2007 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

class FrontbackendControllerTest extends Joomla\CMS\MVC\Controller\AdminController
{
    public function getModel($name = 'Test', $prefix = '', $config = array())
    {
        return parent::getModel($name, $prefix, $config);
    }
}

 

บรรทัดที่ 8-9 : เป็นการกำหนดให้ใช้ View (a) และ Layout (default)

5. View เป็นส่วนแสดงหน้าเว็บ

5.1 สร้างโฟลเดอร์ views เพื่อเก็บ View ทั้งหมดที่เราใช้งาน

5.1 สร้างโฟลเดอร์ views/frontbackend

5.2 สร้างไฟล์ views/frontbackend/view.html.php

 

 

Code ของไฟล์ views/frontbackend/view.html.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_frontbackend
 *
 * @copyright   (C) 2007 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

class FrontbackendViewFrontbackend extends Joomla\CMS\MVC\View\HtmlView
{
    public function display($tpl = null)
    {
        $this->item = $this->get('Item');
        
        FrontbackendHelper::addSubmenu('test');
        $this->sidebar = JHtmlSidebar::render();
        $this->addToolbar();
        parent::display($tpl);
    }

    public function addToolbar()
    {
        \Joomla\CMS\Toolbar\ToolbarHelper::title(JText::_('COM_FRONTBACKEND_CONTROL_PANEL'));
        \Joomla\CMS\Toolbar\ToolbarHelper::preferences('com_frontbackend');

    }
}

  

5.3 สร้างโฟลเดอร์ tmpl ในโฟลเดอร์

5.4 สร้างไฟล์ views/frontbackend/tmpl/default.php

Code ของไฟล์ views/frontbackend/tmpl/default.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_frontbackend
 *
 * @copyright   (C) 2007 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
?>

<h1>Hi! Back End</h1>
<p>Date : <?php echo $this->item;?></p>

 

6. helpers คือมีหน้าที่รับผิดชอบเฉพาะและชุดของฟังก์ชันที่เกี่ยวข้องซึ่งสามารถนำไปใช้ในส่วนต่าง ๆ ของส่วนขยายได้

สร้างโฟลเดอร์ helpers แล้วสร้างไฟล์ frontbackend.php

โค้ดใน helpers/frontbackend.php

<?php
/**
 * @package     Joomla.Administrator
 * @subpackage  com_frontbackend
 *
 * @copyright   (C) 2007 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

 defined('_JEXEC') or die;

 class FrontbackendHelper
 {
    public static function addSubmenu($vName)
	{
		JHtmlSidebar::addEntry(
			JText::_('COM_FRONBACKEND_TEST'),
			'index.php?option=com_frontbackend&view=test',
			$vName == 'test'
		);

	}
 }

ทดสอบคอมโพเน้นท์โดยไปติดตั้งคอมโพเน้นท์ที่ส่วนเสริม

 

แล้วลอง copy path URL ใส่ช่องค้นหา 

index.php?option=com_frontbackend&controller=a

ตัวอย่าง

http://localhost/Joomla_3_10/administrator/index.php?option=com_frontbackend&controller=test