Creating a form component in Joomla 5 involves a systematic approach to defining, structuring, and coding the component files. In this guide, we will walk through the process of developing a simple form component named "com_hello." This includes setting up the necessary folders and files, writing the XML manifest, and coding the component's controller, model, and view. By following these steps, you will be able to create a functional Joomla componenet that can handle form submissions and display data.

Create a folder "com_hello" in Administrator/Components and create

• com_hello/hello.xml
• com_hello/hello.php
• com_hello/controllers/hello_controller.php
• com_hello/models/forms/hello.xml
• com_hello/models/hello.php
• com_hello/views/hello/view.html.php
• com_hello/views/hello/tmpl/default.php
• com_hello/languages/en-GB/en-GB.com_hello.ini

After creating the files, you have to add the following codes in the related files:

in "com_hello/hello.xml"

<?xml version="1.0" encoding="UTF-8" ?>
<extension type="component" version="5.0.0" method="upgrade">
    <name>com_hello</name>
    <author>Your Name</author>
    <creationDate>2024-06-20</creationDate>
    <copyright>Your Company</copyright>
    <license>GPL</license>
    <version>1.0.0</version>
    <description>Hello Component for Joomla 5</description>
    <files>
        <folder>controllers</folder>
        <folder>models</folder>
        <folder>views</folder>
        <filename>hello.php</filename>
    </files>
    <languages>
        <language tag="en-GB">languages/en-GB/en-GB.com_hello.ini</language>
    </languages>
    <administration>
        <menu>Hello Component</menu>
    </administration>
</extension>

in "com_hello/hello.php"

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\MVC\Controller\BaseController;

$app = Factory::getApplication();
$input = $app->input;

ComponentHelper::getComponent('com_hello');

$controllerName = $input->getCmd('controller', 'hello');
$controllerName = $controllerName ?: 'hello';
$controllerClass = 'HelloController' . ucfirst($controllerName);

$controllerPath = __DIR__ . '/controllers/' . strtolower($controllerName) . '_controller.php';

if (file_exists($controllerPath)) {
    require_once $controllerPath;
}

if (!class_exists($controllerClass)) {
    $controllerClass = 'HelloController';
    require_once __DIR__ . '/controllers/hello_controller.php';
}

$controller = new $controllerClass();
$controller->execute($input->get('task'));
$controller->redirect();

in "com_hello/controllers/hello_controller.php"

<?php
defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;

class HelloController extends BaseController
{
    public function display($cachable = false, $urlparams = array())
    {
        $viewName = $this->input->getCmd('view', 'hello');
        $this->input->set('view', $viewName);
        parent::display($cachable, $urlparams);
    }
}

in "com_hello/models/forms/hello.xml"

<?xml version="1.0" encoding="utf-8"?>
<form>
    <fieldset name="hello_form">
        <field
            name="name"
            type="text"
            class="inputbox w-25"
            label="COM_HELLO_NAME_LABEL"
            description="COM_HELLO_NAME_DESC"
            required="true"
        />
        <field
            name="detail"
            type="textarea"
            class="inputbox w-25"
            label="COM_HELLO_DETAIL_LABEL"
            description="COM_HELLO_DETAIL_DESC"
            required="true"
            rows="5"
        />
    </fieldset>
</form>

in "com_hello/models/hello.php"

<?php
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\MVC\Model\FormModel;

class HelloModelHello extends FormModel
{
    public function getForm($data = array(), $loadData = true)
    {
        $options = array('control' => 'jform', 'load_data' => $loadData);

        $form = $this->loadForm('com_hello.hello', 'hello', $options);

        if (empty($form)) {
            return false;
        }

        return $form;
    }
}

in "com_hello/views/hello/view.html.php"

<?php
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;
use Joomla\CMS\Toolbar\ToolbarHelper;
use Joomla\CMS\Factory;

class HelloViewHello extends BaseHtmlView
{
    function display($tpl = null)
    {
        $this->form = $this->get('Form');
        $this->addToolbar();
        parent::display($tpl);
    }

    function addToolbar()
    {
        ToolbarHelper::save();
        ToolbarHelper::cancel();
    }
}

 in "com_hello/views/hello/tmpl/default.php"

<?php
defined('_JEXEC') or die('Restricted access');

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Router\Route;

HTMLHelper::_('behavior.keepalive');
HTMLHelper::_('behavior.formvalidator');
?>

<script>
    Joomla.submitbutton = function(task) {
        if (task == 'cancel' || document.formvalidator.isValid(document.getElementById('adminForm'))) {
            Joomla.submitform(task, document.getElementById('adminForm'));
        } else {
            alert('Form Invalid');
        }
    }
</script>

<form action="<?php echo Route::_('index.php?option=com_hello&view=hello'); ?>" name="adminForm" id="adminForm" method="post" class="form-validate form-horizontal">
    <fieldset>
        <?php foreach ($this->form->getFieldset('hello_form') as $field) { ?>
            <div class="control-group">
                <div class="control-label">
                    <?php echo $field->label; ?>
                </div>
                <div class="controls">
                    <?php echo $field->input; ?>
                </div>
            </div>
        <?php } ?>
        <input type="hidden" name="task" />
        <?php echo HTMLHelper::_('form.token'); ?>
    </fieldset>
</form>

in "com_hello/languages/en-GB/en-GB.com_hello.ini"

COM_HELLO_NAME_LABEL="Name"
COM_HELLO_NAME_DESC="Enter your name"
COM_HELLO_DETAIL_LABEL="Detail"
COM_HELLO_DETAIL_DESC="Enter details"
COM_HELLO_SUBMIT="Submit"
COM_HELLO_CANCEL="Cancel"

After you have written these codes and installed the "com_hello" component, you will see the result,

By following the steps outlined in this guide, you have successfully created a custom Joomla 5 components named "com_hello." This component includes a structured folder layout, a well-defined XML manifest, and properly coded MVC elements. Upon installation, the "com_hello" component will display a functional form that handles user input. This foundational knowledge equips you to develop more complex components and extend the functionality of Joomla CMS to meet your specific needs.

Title

Joomla_5_chapter_12 Sample Code

Categories

Joomla Extension Dev, Joomla Extension Dev

Hits

434

Create by

Raja Pdl

Create date

2024-08-16 14:29:18

Description

Joomla is a popular content management system (CMS) that allows you to build websites and powerful online applications. In Joomla , we can create our custom component . This is the sample codes of creating form in custom component development of Joomla 5 Chapter 12 - Creatin Form Coomponent Development tutorial

 I recommend placing the com_hello file in the components folder on the admin side and using the "Discover" method instead.

Chapter 13 - Saving Data Into Database In Joomla 5