Joomla! Documentation - User contributions [en]

J3.x:Developing an MVC Component/Adding categories

2023-06-30T15:29:09Z

Mavrosx: Missing important part in access.xml

<noinclude><languages /></noinclude>
{{:J3.1:Developing an MVC Component/<translate>
en</translate>}}
<translate>== Introduction == </translate>
<translate>
This tutorial is part of the [[S:MyLanguage/J3.2:Developing an MVC Component | Developing an MVC Component for Joomla! 3.2]] tutorial. You are encouraged to read the previous parts of the tutorial before reading this.</translate>
<translate> You can watch a video associated with this step at [https://youtu.be/dd-2AcpqRg4 Step 12, adding categories].</translate>

{{#widget:YouTube|id=dd-2AcpqRg4}}

<translate>

In this step we will make use of the Joomla Categories functionality to enable us to define a set of categories for use with our Helloworld component, and to allow us to associate each Helloworld greeting with one of those categories. Much of this will be implemented in a similar manner to other components, such as Articles (com_content) and Banners.


There are a number of strands to this:


# We have to link our Helloworld database table with the Joomla Categories table; this will affect our SQL install and update scripts.
# We will update our Helloworld Edit form to allow an administrator to associate a category with any of the Helloworld greetings. This will impact the Helloworld Edit form XML definition.
# Until now when administrators define a menu item of type Helloworld they are asked to select the greeting to display from the list of available greetings. We'll enhance this list to show the associated category in brackets after the greeting, provided that that greeting has a category defined. This will impact our model FieldList code in admin/models/fields/helloworld.php.
# We will allow the administrator to define the Categories which are associated with our Helloworld component. This is functionality which the Joomla com_categories component provides for us automatically. It generates the form which allows administrators to do this – we just have to provide menu links to this form through the submenu described below and through the Components menu, and in addition we must define the access permissions to this functionality.
# We will change the Helloworlds form which shows all the Helloworld messages so that the Category associated with each message is displayed. This will impact our model (as we'll have to do a SQL Join with the Categories table in order to get the Category title) and our layout file (where we'll display the associated categories).
# We will create a submenu which can slide as a Sidebar in from the left, and which will show two items on the submenu:
#* Messages – which will go to our form with all the Helloworld messages
#* Categories – which will go to the form allowing the administrator to define the set of categories for the Helloworld component.
#: This will affect our Helloworlds view (where we'll set up the sidebar) and layout (where we'll display the sidebar), as well as defining the sidebar submenu itself in a new Helper file. We'll also add a line to our main admin helloworld.php file telling Joomla to load and run that helper file.
</translate>

<translate> '''Important Note (with hindsight).''' This step builds categories into the helloworld component by allowing them to be optional. This is different from the core Joomla components where a category must be always be defined, and by default items have a category of "uncategorised". If you allow categories to be optional you are likely to encounter difficulties later on because some core Joomla library functions assume that they are mandatory. If this tutorial series is updated for later Joomla versions it would be better to include categories in a way that follows the standard Joomla pattern.</translate>

<translate>== Modifying the SQL == </translate>
<translate>
In order to manage categories, we have to change the SQL tables.</translate>
<translate>
With your favourite editor, modify <tt>admin/sql/install.mysql.utf8.sql</tt> and put these lines:</translate>

<span id="admin/sql/install.mysql.utf8.sql">
<tt>admin/sql/install.mysql.utf8.sql</tt>
<source lang="sql" highlight="7">
DROP TABLE IF EXISTS `#__helloworld`;

CREATE TABLE `#__helloworld` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`greeting` VARCHAR(25) NOT NULL,
`published` tinyint(4) NOT NULL,
`catid` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
)
ENGINE =MyISAM
AUTO_INCREMENT =0
DEFAULT CHARSET =utf8;

INSERT INTO `#__helloworld` (`greeting`) VALUES
('Hello World!'),
('Good bye World!');

</source>
</span>

<span id="admin/sql/updates/mysql/0.0.12.sql">
<tt>admin/sql/updates/mysql/0.0.12.sql</tt>
<source lang="sql">
ALTER TABLE `#__helloworld` ADD `catid` int(11) NOT NULL DEFAULT '0';
</source>
</span>

<translate>== Modifying the form == </translate>
<translate>
A HelloWorld message can now belong to a category. We have to modify the editing form. In the <tt>admin/models/forms/helloworld.xml</tt> file, put these lines:</translate>

<span id="admin/models/forms/helloworld.xml">
<tt>admin/models/forms/helloworld.xml</tt>
<source lang="xml" highlight="21-32">
<?xml version="1.0" encoding="utf-8"?>
<form
addrulepath="/administrator/components/com_helloworld/models/rules"
>
<fieldset>
<field
name="id"
type="hidden"
/>
<field
name="greeting"
type="text"
label="COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_GREETING_DESC"
size="40"
class="inputbox validate-greeting"
validate="greeting"
required="true"
default=""
/>
<field
name="catid"
type="category"
extension="com_helloworld"
class="inputbox"
default=""
label="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_LABEL"
description="COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_DESC"
required="true"
>
<option value="0">JOPTION_SELECT_CATEGORY</option>
</field>
</fieldset>
</form>
</source>
</span>

<translate>
Note that the category can be 0 (representing no category).</translate>

<translate>== Modifying the menu type == </translate>
<translate>
The HelloWorld menu type displays a drop down list of all messages. If the message is categorized, we have to add the category in this display.</translate>

<translate>
In the <tt>admin/models/fields/helloworld.php</tt> file, put these lines:</translate>

<span id="admin/models/fields/helloworld.php">
<tt>admin/models/fields/helloworld.php</tt>
<source lang="php" highlight="38,40-42,51,52">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

JFormHelper::loadFieldClass('list');

/**
* HelloWorld Form Field class for the HelloWorld component
*
* @since 0.0.1
*/
class JFormFieldHelloWorld extends JFormFieldList
{
/**
* The field type.
*
* @var string
*/
protected $type = 'HelloWorld';

/**
* Method to get a list of options for a list input.
*
* @return array An array of JHtml options.
*/
protected function getOptions()
{
$db = JFactory::getDBO();
$query = $db->getQuery(true);
$query->select('#__helloworld.id as id,greeting,#__categories.title as category,catid');
$query->from('#__helloworld');
$query->leftJoin('#__categories on catid=#__categories.id');
// Retrieve only published items
$query->where('#__helloworld.published = 1');
$db->setQuery((string) $query);
$messages = $db->loadObjectList();
$options = array();

if ($messages)
{
foreach ($messages as $message)
{
$options[] = JHtml::_('select.option', $message->id, $message->greeting .
($message->catid ? ' (' . $message->category . ')' : ''));
}
}

$options = array_merge(parent::getOptions(), $options);

return $options;
}
}

</source>
</span>

<translate>
It will now display the category between parenthesis.
Note: We have added a where clause too to filter out unpublished items.</translate>

<translate>== Managing the submenu == </translate>
<translate>
The <tt>com_categories</tt> component allows to set the submenu using a helper file. With your favourite file manager and editor, put a <tt>admin/helpers/helloworld.php</tt> file containing these lines:</translate>

<span id="admin/helpers/helloworld.php">
<tt>admin/helpers/helloworld.php</tt>
<source lang="php">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorld component helper.
*
* @param string $submenu The name of the active view.
*
* @return void
*
* @since 1.6
*/
abstract class HelloWorldHelper extends JHelperContent
{
/**
* Configure the Linkbar.
*
* @return Bool
*/

public static function addSubmenu($submenu)
{
JHtmlSidebar::addEntry(
JText::_('COM_HELLOWORLD_SUBMENU_MESSAGES'),
'index.php?option=com_helloworld',
$submenu == 'helloworlds'
);

JHtmlSidebar::addEntry(
JText::_('COM_HELLOWORLD_SUBMENU_CATEGORIES'),
'index.php?option=com_categories&view=categories&extension=com_helloworld',
$submenu == 'categories'
);

// Set some global property
$document = JFactory::getDocument();
$document->addStyleDeclaration('.icon-48-helloworld ' .
'{background-image: url(../media/com_helloworld/images/tux-48x48.png);}');
if ($submenu == 'categories')
{
$document->setTitle(JText::_('COM_HELLOWORLD_ADMINISTRATION_CATEGORIES'));
}
}
}

</source>
</span>

<translate>
'''NOTE:''' You MUST use your component name (without com_) for the helper file name, or else your submenus won't show in category view.</translate>

<translate>
To import the helper class, put these lines in the <tt>admin/helloworld.php</tt> file:</translate>

<span id="admin/helloworld.php">
<tt>admin/helloworld.php</tt>
<source lang="php" highlight="17-19">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

// Set some global property
$document = JFactory::getDocument();
$document->addStyleDeclaration('.icon-helloworld {background-image: url(../media/com_helloworld/images/tux-16x16.png);}');

// Require helper file
JLoader::register('HelloWorldHelper', JPATH_COMPONENT . '/helpers/helloworld.php');

// Get an instance of the controller prefixed by HelloWorld
$controller = JControllerLegacy::getInstance('HelloWorld');

// Perform the Request task
$input = JFactory::getApplication()->input;
$controller->execute($input->getCmd('task'));

// Redirect if set by the controller
$controller->redirect();

</source>
</span>

<translate>
This function will be automatically called by the ''com_categories'' component. Note that it will:
* change the submenu
* change some css properties (for displaying icons)
* change the browser title if the submenu is ''categories''
* change the title and add a ''preferences'' button</translate>

<translate>
The ''.icon-48-helloworld'' css class is now set in the ''addSubmenu'' function.
We have now to call this function in the hellowords view:</translate>

<span id="admin/views/helloworlds/view.html.php">
<tt>admin/views/helloworlds/view.html.php</tt>
<source lang="php" highlight="50-52">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorlds View
*
* @since 0.0.1
*/
class HelloWorldViewHelloWorlds extends JViewLegacy
{
/**
* Display the Hello World view
*
* @param string $tpl The name of the template file to parse; automatically searches through the template paths.
*
* @return void
*/

function display($tpl = null)
{

// Get application
$app = JFactory::getApplication();
$context = "helloworld.list.admin.helloworld";
// Get data from the model
$this->items = $this->get('Items');
$this->pagination = $this->get('Pagination');
$this->state = $this->get('State');
$this->filter_order = $app->getUserStateFromRequest($context.'filter_order', 'filter_order', 'greeting', 'cmd');
$this->filter_order_Dir = $app->getUserStateFromRequest($context.'filter_order_Dir', 'filter_order_Dir', 'asc', 'cmd');
$this->filterForm = $this->get('FilterForm');
$this->activeFilters = $this->get('ActiveFilters');

// Check for errors.
if (count($errors = $this->get('Errors')))
{
JError::raiseError(500, implode('<br />', $errors));

return false;
}

// Set the submenu
HelloWorldHelper::addSubmenu('helloworlds');

// Set the toolbar and number of found items
$this->addToolBar();

// Display the template
parent::display($tpl);

// Set the document
$this->setDocument();
}

/**
* Add the page title and toolbar.
*
* @return void
*
* @since 1.6
*/
protected function addToolBar()
{
$title = JText::_('COM_HELLOWORLD_MANAGER_HELLOWORLDS');

if ($this->pagination->total)
{
$title .= "<span style='font-size: 0.5em; vertical-align: middle;'>(" . $this->pagination->total . ")</span>";
}

JToolBarHelper::title($title, 'helloworld');
JToolBarHelper::addNew('helloworld.add');
JToolBarHelper::editList('helloworld.edit');
JToolBarHelper::deleteList('', 'helloworlds.delete');
}
/**
* Method to set up the document properties
*
* @return void
*/
protected function setDocument()
{
$document = JFactory::getDocument();
$document->setTitle(JText::_('COM_HELLOWORLD_ADMINISTRATION'));
}
}
</source>
</span>

<translate>== Getting the associated category titles == 
Update the helloworlds model so that it does a SQL join with the Joomla Categories table to find the associated category title.</translate>

<span id="admin/models/helloworlds.php">
<tt>admin/models/helloworlds.php</tt>
<source lang="php" highlight="53-58,74,78">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die('Restricted access');

/**
* HelloWorldList Model
*
* @since 0.0.1
*/
class HelloWorldModelHelloWorlds extends JModelList
{
/**
* Constructor.
*
* @param array $config An optional associative array of configuration settings.
*
* @see JController
* @since 1.6
*/
public function __construct($config = array())
{
if (empty($config['filter_fields']))
{
$config['filter_fields'] = array(
'id',
'greeting',
'published'
);
}

parent::__construct($config);
}

/**
* Method to build an SQL query to load the list data.
*
* @return string An SQL query
*/
protected function getListQuery()
{
// Initialize variables.
$db = JFactory::getDbo();
$query = $db->getQuery(true);

// Create the base select statement.
$query->select('a.id as id, a.greeting as greeting, a.published as published')
->from($db->quoteName('#__helloworld', 'a'));

// Join over the categories.
$query->select($db->quoteName('c.title', 'category_title'))
->join('LEFT', $db->quoteName('#__categories', 'c') . ' ON c.id = a.catid');

// Filter: like / search
$search = $this->getState('filter.search');

if (!empty($search))
{
$like = $db->quote('%' . $search . '%');
$query->where('greeting LIKE ' . $like);
}

// Filter by published state
$published = $this->getState('filter.published');

if (is_numeric($published))
{
$query->where('a.published = ' . (int) $published);
}
elseif ($published === '')
{
$query->where('(a.published IN (0, 1))');
}

// Add the list ordering clause.
$orderCol = $this->state->get('list.ordering', 'greeting');
$orderDirn = $this->state->get('list.direction', 'asc');

$query->order($db->escape($orderCol) . ' ' . $db->escape($orderDirn));

return $query;
}
}

</source>
</span>

<translate>== Updating the Layout == 
Update the helloworlds layout file to display the sidebar and the category associated with the greeting.</translate>

<span id="admin/views/helloworlds/tmpl/default.php">
<tt>admin/views/helloworlds/tmpl/default.php</tt>
<source lang="php" highlight="19-22,73-75,93">
<?php
/**
* @package Joomla.Administrator
* @subpackage com_helloworld
*
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

// No direct access to this file
defined('_JEXEC') or die('Restricted Access');

JHtml::_('formbehavior.chosen', 'select');

$listOrder = $this->escape($this->filter_order);
$listDirn = $this->escape($this->filter_order_Dir);
?>
<form action="index.php?option=com_helloworld&view=helloworlds" method="post" id="adminForm" name="adminForm">
<div id="j-sidebar-container" class="span2">
<?php echo JHtmlSidebar::render(); ?>
</div>
<div id="j-main-container" class="span10">
<div class="row-fluid">
<div class="span6">
<?php echo JText::_('COM_HELLOWORLD_HELLOWORLDS_FILTER'); ?>
<?php
echo JLayoutHelper::render(
'joomla.searchtools.default',
array('view' => $this)
);
?>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="1%"><?php echo JText::_('COM_HELLOWORLD_NUM'); ?></th>
<th width="2%">
<?php echo JHtml::_('grid.checkall'); ?>
</th>
<th width="90%">
<?php echo JHtml::_('grid.sort', 'COM_HELLOWORLD_HELLOWORLDS_NAME', 'greeting', $listDirn, $listOrder); ?>
</th>
<th width="5%">
<?php echo JHtml::_('grid.sort', 'COM_HELLOWORLD_PUBLISHED', 'published', $listDirn, $listOrder); ?>
</th>
<th width="2%">
<?php echo JHtml::_('grid.sort', 'COM_HELLOWORLD_ID', 'id', $listDirn, $listOrder); ?>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">
<?php echo $this->pagination->getListFooter(); ?>
</td>
</tr>
</tfoot>
<tbody>
<?php if (!empty($this->items)) : ?>
<?php foreach ($this->items as $i => $row) :
$link = JRoute::_('index.php?option=com_helloworld&task=helloworld.edit&id=' . $row->id);
?>
<tr>
<td><?php echo $this->pagination->getRowOffset($i); ?></td>
<td>
<?php echo JHtml::_('grid.id', $i, $row->id); ?>
</td>
<td>
<a href="<?php echo $link; ?>" title="<?php echo JText::_('COM_HELLOWORLD_EDIT_HELLOWORLD'); ?>">
<?php echo $row->greeting; ?>
</a>
<div class="small">
<?php echo JText::_('JCATEGORY') . ': ' . $this->escape($row->category_title); ?>
</div>
</td>
<td align="center">
<?php echo JHtml::_('jgrid.published', $row->published, $i, 'helloworlds.', true, 'cb'); ?>
</td>
<td align="center">
<?php echo $row->id; ?>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
<input type="hidden" name="task" value=""/>
<input type="hidden" name="boxchecked" value="0"/>
<input type="hidden" name="filter_order" value="<?php echo $listOrder; ?>"/>
<input type="hidden" name="filter_order_Dir" value="<?php echo $listDirn; ?>"/>
<?php echo JHtml::_('form.token'); ?>
</div>
</form>
</source>
</span>

<translate>== Adding some ACL == </translate>
<span id="admin/access.xml">
<tt>admin/access.xml</tt>
<source lang="xml">
<?xml version="1.0" encoding="utf-8" ?>
<access component="com_helloworld">
<section name="component">
<action name="core.admin" title="JACTION_ADMIN" description="JACTION_ADMIN_COMPONENT_DESC" />
<action name="core.manage" title="JACTION_MANAGE" description="JACTION_MANAGE_COMPONENT_DESC" />
<action name="core.create" title="JACTION_CREATE" description="JACTION_CREATE_COMPONENT_DESC" />
<action name="core.delete" title="JACTION_DELETE" description="JACTION_DELETE_COMPONENT_DESC" />
<action name="core.edit" title="JACTION_EDIT" description="JACTION_EDIT_COMPONENT_DESC" />
<action name="core.edit.state" title="JACTION_EDITSTATE"/>
</section>
<section name="category">
<action name="core.create" title="JACTION_CREATE"/>
<action name="core.delete" title="JACTION_DELETE"/>
<action name="core.edit" title="JACTION_EDIT"/>
<action name="core.edit.state" title="JACTION_EDITSTATE"/>
</section>
<section name="message">
<action name="core.delete" title="JACTION_DELETE" description="COM_HELLOWORLD_ACCESS_DELETE_DESC" />
<action name="core.edit" title="JACTION_EDIT" description="COM_HELLOWORLD_ACCESS_EDIT_DESC" />
</section>
</access>
</source>
</span>

<translate>
'''NOTE:''' If you don't add this file, buttons "New" "Edit" and ... don't show in category view. For more information, read section Adding ACL on top of the page.</translate>

<translate>== Adding some translation strings == 
Some strings have to be translated. In the <tt>admin/language/en-GB/en-GB.com_helloworld.ini</tt> file, put these lines:</translate>

<span id="admin/language/en-GB/en-GB.com_helloworld.ini">
<tt>admin/language/en-GB/en-GB.com_helloworld.ini</tt>
<source lang="ini" highlight="7,17-19,34,35">
; Joomla! Project
; Copyright (C) 2005 - 2018 Open Source Matters. All rights reserved.
; License GNU General Public License version 2 or later; see LICENSE.txt, see LICENSE.php
; Note : All ini files need to be saved as UTF-8

COM_HELLOWORLD_ADMINISTRATION="HelloWorld - Administration"
COM_HELLOWORLD_ADMINISTRATION_CATEGORIES="HelloWorld - Categories"
COM_HELLOWORLD_NUM="#"
COM_HELLOWORLD_HELLOWORLDS_FILTER="Filters"
COM_HELLOWORLD_PUBLISHED="Published"
COM_HELLOWORLD_HELLOWORLDS_NAME="Name"
COM_HELLOWORLD_ID="Id"

COM_HELLOWORLD_HELLOWORLD_CREATING="HelloWorld - Creating"
COM_HELLOWORLD_HELLOWORLD_DETAILS="Details"
COM_HELLOWORLD_HELLOWORLD_EDITING="HelloWorld - Editing"
COM_HELLOWORLD_HELLOWORLD_ERROR_UNACCEPTABLE="Some values are unacceptable"
COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_DESC="The category the messages belongs to"
COM_HELLOWORLD_HELLOWORLD_FIELD_CATID_LABEL="Category"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_DESC="This message will be displayed"
COM_HELLOWORLD_HELLOWORLD_FIELD_GREETING_LABEL="Message"
COM_HELLOWORLD_HELLOWORLD_HEADING_GREETING="Greeting"
COM_HELLOWORLD_HELLOWORLD_HEADING_ID="Id"
COM_HELLOWORLD_MANAGER_HELLOWORLD_EDIT="HelloWorld manager: Edit Message"
COM_HELLOWORLD_MANAGER_HELLOWORLD_NEW="HelloWorld manager: New Message"
COM_HELLOWORLD_MANAGER_HELLOWORLDS="HelloWorld manager"
COM_HELLOWORLD_EDIT_HELLOWORLD="Edit message"
COM_HELLOWORLD_N_ITEMS_DELETED_1="One message deleted"
COM_HELLOWORLD_N_ITEMS_DELETED_MORE="%d messages deleted"
COM_HELLOWORLD_N_ITEMS_PUBLISHED="%d message(s) published"
COM_HELLOWORLD_N_ITEMS_UNPUBLISHED="%d message(s) unpublished"
COM_HELLOWORLD_HELLOWORLD_GREETING_LABEL="Greeting"
COM_HELLOWORLD_HELLOWORLD_GREETING_DESC="Add Hello World Greeting"
COM_HELLOWORLD_SUBMENU_MESSAGES="Messages"
COM_HELLOWORLD_SUBMENU_CATEGORIES="Categories"

</source>
</span>

<translate>== Packaging the component == </translate>

<translate>
Content of your code directory. Each file link below takes you to the step in the tutorial which has the latest version of that source code file. </translate>
* ''[[#helloworld.xml|helloworld.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/helloworld.php|site/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/controller.php|site/controller.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/helloworld/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/views/helloworld/view.html.php|site/views/helloworld/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/views/helloworld/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#site/views/helloworld/tmpl/default.xml|site/views/helloworld/tmpl/default.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_a_view_to_the_site_part#site/views/helloworld/tmpl/default.php|site/views/helloworld/tmpl/default.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/models/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#site/models/helloworld.php|site/models/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/language/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|site/language/en-GB/index.html]]''
* [[S:MyLanguage/J3.x:Developing an MVC Component/Adding language management#site.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.ini|site/language/en-GB/en-GB.com_helloworld.ini]]
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/helloworld.php|admin/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Basic_backend#admin/controller.php|admin/controller.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/access.xml|admin/access.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/helpers/helloworld.php|admin/helpers/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/helpers/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/sql/install.mysql.utf8.sql|admin/sql/install.mysql.utf8.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/uninstall.mysql.utf8.sql|admin/sql/uninstall.mysql.utf8.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/updates/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/sql/updates/mysql/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#admin/sql/updates/mysql/0.0.1.sql|admin/sql/updates/mysql/0.0.1.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/sql/install.mysql.utf8.sql|admin/sql/updates/mysql/0.0.6.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/sql/updates/mysql/0.0.12.sql|admin/sql/updates/mysql/0.0.12.sql]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/fields/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/models/fields/helloworld.php|admin/models/fields/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/models/helloworlds.php|admin/models/helloworlds.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/models/helloworld.php|admin/models/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding decorations to the backend#admin/models/forms/filter_helloworlds.xml|admin/models/forms/filter_helloworlds.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/forms/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/models/forms/helloworld.js|admin/models/forms/helloworld.js]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/models/forms/helloworld.xml|admin/models/forms/helloworld.xml]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/models/rules/greeting.php|admin/models/rules/greeting.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/models/rules/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/controllers/helloworld.php|admin/controllers/helloworld.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_backend_actions#admin/controllers/helloworlds.php|admin/controllers/helloworlds.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/controllers/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworld/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/views/helloworld/view.html.php|admin/views/helloworld/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworld/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/views/helloworld/tmpl/edit.php|admin/views/helloworld/tmpl/edit.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_verifications#admin/views/helloworld/submitbutton.js|admin/views/helloworld/submitbutton.js]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworlds/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/views/helloworlds/view.html.php|admin/views/helloworlds/view.html.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/views/helloworlds/tmpl/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Adding_categories#admin/views/helloworlds/tmpl/default.php|admin/views/helloworlds/tmpl/default.php]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|admin/tables/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Using_the_database#admin/tables/helloworld.php|admin/tables/helloworld.php]]''
* ''[[#admin/language/index.html|admin/language/index.html]]''
* ''[[#admin/language/en-GB/index.html|admin/language/en-GB/index.html]]''
* ''[[S:MyLanguage/J3.x:Developing an MVC Component/Adding_categories#admin.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.ini|admin/language/en-GB/en-GB.com_helloworld.ini]]''
* ''[[S:MyLanguage/J3.x:Developing an MVC Component/Adding_decorations_to_the_backend#admin.2Flanguage.2Fen-GB.2Fen-GB.com_helloworld.sys.ini|admin/language/en-GB/en-GB.com_helloworld.sys.ini]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|media/index.html]]''
* ''[[S:MyLanguage/J3.2:Developing_an_MVC_Component/Developing_a_Basic_Component#index.html|media/images/index.html]]''
* ''[[S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding_decorations_to_the_backend#Adding_some_icons|media/images/tux-16x16.png]]''
* ''[[S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding_decorations_to_the_backend#Adding_some_icons|media/images/tux-48x48.png]]''

<translate>
Create a compressed file of this directory or directly download the [https://github.com/scionescire/Joomla-3.2-Hello-World-Component/archive/step-12-adding-categories.zip archive] and install it using the extension manager of Joomla. You can add a menu item of this component using the menu manager in the backend.</translate>

<span id="helloworld.xml">
<tt>helloworld.xml</tt>
<source lang="xml" highlight="13,66,77,78">
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">

<name>COM_HELLOWORLD</name>

<creationDate>January 2018</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>

<version>0.0.12</version>

<description>COM_HELLOWORLD_DESCRIPTION</description>

<install> 
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall> 
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<update> 
<schemas>
<schemapath type="mysql">sql/updates/mysql</schemapath>
</schemas>
</update>



<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
</files>

<languages folder="site/language">
<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
</languages>

<media destination="com_helloworld" folder="media">
<filename>index.html</filename>
<folder>images</folder>
</media>

<administration>

<menu link='index.php?option=com_helloworld' img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>


<files folder="admin">

<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<filename>access.xml</filename>

<folder>sql</folder>

<folder>tables</folder>

<folder>models</folder>

<folder>views</folder>

<folder>controllers</folder>

<folder>helpers</folder>
</files>
<languages folder="admin/language">
<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
<language tag="en-GB">en-GB/en-GB.com_helloworld.sys.ini</language>
</languages>
</administration>

</extension>
</source>
</span>

<translate>== Contributors == </translate>
*[[User:cdemko|Christophe Demko]]
*[[User:oaksu|Ozgur Aksu]]
*[[User:Anibal.sanchez|Anibal Sanchez]] // Just a fix
*[[User:Postema|Hans Postema]] // Just another fix
*[[User:Scionescire|Scionescire]]
*[[User:Veronika|Veronika Patel]]
*[[User:Robbiej|Robbie Jackson]]

<div class="row">
<div class="large-6 columns">{{Basic button|<translate>
S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding verifications|Prev: Adding verifications</translate>|class=expand success}}</div>
<div class="large-6 columns">{{Basic button|<translate>
S:MyLanguage/J3.x:Developing_an_MVC_Component/Adding configuration|Next: Adding configuration</translate>|class=expand}}</div>
</div>
__NOTOC__
<noinclude>
[[Category:Joomla! 3.x{{#translation:}}]]
[[Category:Joomla! 3.0{{#translation:}}]]
[[Category:Joomla! 3.1{{#translation:}}]]
[[Category:Joomla! 3.2{{#translation:}}]]
[[Category:Joomla! 3.3{{#translation:}}]]
[[Category:Joomla! 3.4{{#translation:}}]]
[[Category:Joomla! 3.5{{#translation:}}]]
[[Category:Joomla! 3.6{{#translation:}}]]
[[Category:Beginner Development{{#translation:}}]]
[[Category:Component Development{{#translation:}}]]
[[Category:Tutorials{{#translation:}}]]
[[Category:Tutorials in a Series{{#translation:}}]]
</noinclude>

J4.x:Setting Up Your Local Environment

2022-12-23T11:04:03Z

Mavrosx:

<noinclude><languages /></noinclude>
{{Top portal heading|color=white-bkgd|icon=magic|icon-color=#5091cd|size=3x|text-color=#333|title=<translate>

Tutorial<br />
How to Setup a Local Environment for Joomla 4</translate>}}
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
<translate> With Joomla! 4 we have changed the development process. It is no longer possible to clone the repository and have a usable Joomla installation. We follow best practices and implement a build process for the CMS.</translate>

<translate>
== Quick Start Guide == 
</translate>
<translate> The steps to setup your development environment depend on your operating system. We cannot write documentation for every operating system (OS), please use your favorite search engine to find a HowTo.</translate>

<translate>
=== Tools You Need === 
</translate>
# <translate> PHP - basically the same as you need for running a Joomla site, but you need the PHP CLI (command line interface) version. (See the [[S:MyLanguage/Configuring_a_LAMPP_server_for_PHP_development|Configuring a LAMPP server for PHP development]] page.)</translate>
# <translate> Composer - for managing Joomla's PHP dependencies. For help installing Composer, read the documentation at https://getcomposer.org/doc/00-intro.md.</translate>
# <translate> Node.js - for compiling Joomla's JavaScript and SASS files. For help installing Node.js, please follow the instructions available on https://nodejs.org/en/. Note you will need NodeJS 12 or higher to install Joomla.</translate>
# <translate> Git - for version management.</translate>

<translate>
=== Steps to Setup the Local Environment === 
</translate>
# <translate> Clone the repository</translate>
# <translate> Checkout branch ''4.2-dev''</translate>
# <translate> Run <tt>composer install</tt> from the root of the git repo. (You can add ''--ignore-platform-reqs'' if you don't have the PHP-LDAP locally installed and you don't need it.)</translate>
# <translate> Run <tt>npm ci</tt> from the root of the git repo. (Note you need npm 6.13.4 or higher for this. Run <tt>npm install -g npm@lts</tt> to upgrade your version of npm to the LTS version.)</translate>
<translate>

Linux and OSX users can set up the following bash alias by placing the following inside the ''~/.bashrc file'':</translate>

<syntaxhighlight lang="bash">
alias jclean="rm -rf administrator/templates/atum/css; \
rm -rf templates/cassiopeia/css; \
rm -rf administrator/templates/system/css; \
rm -rf templates/system/css; \
rm -rf media/; \
rm -rf node_modules/; \
rm -rf libraries/vendor/; \
rm -f administrator/cache/autoload_psr4.php; \
rm -rf installation/template/css"
alias jinstall="jclean; composer install; npm ci"
</syntaxhighlight>

<translate> This will delete all the compiled files in your system and run a fresh install as one command by calling <tt>jinstall</tt> inside your Joomla install. You can also use the <tt>jclean</tt> command to swap back to a Joomla 3.x branch</translate>

<translate>

== A Bit Longer Start Guide == 
</translate>
<translate> Joomla is similar to many other web tools these days. It has a large PHP part and it has more and more JavaScript code. While PHP coding doesn't need so much preparation, JavaScript needs a lot tooling around. The main reason is that nobody writes code in a way that every browser understands, so the code needs transpiling from e.g. ES6 to a compatible version of JavaScript. The same is true for CSS. For Joomla we are using SASS and this will be converted to native CSS so that any browser understands it. On the downside, setting up a development environment is a bit more complicated but the tooling makes coding more convenient. Thanks to watchers and browser auto reload, you can see your changes in real time.</translate>

=== PHP ===
<translate> It should be enough to run <tt>composer install</tt> as this will install PHP dependencies saved in the ''composer.lock'' file. You can do this as many times as you like. It will only install new packages when the ''composer.lock'' file is changed. Don't run <tt>composer update</tt> as this will update all packages to newer versions and update the ''composer.lock'' file.</translate>

<translate> '''Note:''' You may need to run <tt>composer install</tt> with the <tt>--ignore-platform-reqs</tt> option to ignore platform requirements specified in Composer. That is, if you do not have PHP's LDAP extension installed.</translate>

<translate>
=== Node/npm Scripts === 
</translate>

<translate> Node.js comes with a package manager called NPM (in some ways the same as Composer). NPM has a <tt>run</tt> command and we have prepared some scripts to make your life easier. You have to run the commands for the root of the repository when you changed JS or SASS files. Previously you need to run <tt>npm ci</tt> once, to install dependencies.</translate>

<translate>==== npm run build:css ==== 
It will compile SASS files to CSS and also create the minified files.</translate>

<translate>
==== npm run build:js ==== 
It will compile and transpile the JavaScript files to the correct format and create minified files.</translate>

<translate>
==== npm run watch ==== 
This is the same as the <tt>build:js</tt> command but will watch for changes and automatically build updated files in the media directory. SASS files are not included yet.</translate>

<translate>==== npm run lint:js ==== 
This will perform a syntax check on all ES6 JavaScript files against the JavaScript code standard (for more information on the Joomla 4 codestyle standard please read the the coding standards manual at [https://developer.joomla.org/coding-standards/introduction.html| the coding standards manual].</translate>

<translate>
==== npm run test ==== 
</translate>
<translate> This will run a JavaScript testing suite.</translate>

<translate>
==Possible Issues== 
</translate>
<translate> When running composer install you can run into these errors</translate>

<syntaxhighlight lang="bash">
Problem 1
- Installation request for joomla/ldap 2.0.0-beta -> satisfiable by joomla/ldap[2.0.0-beta].
- joomla/ldap 2.0.0-beta requires ext-ldap * -> the requested PHP extension ldap is missing from your system.
Problem 2
- Installation request for symfony/ldap v5.1.5 -> satisfiable by symfony/ldap[v5.1.5].
- symfony/ldap v5.1.5 requires ext-ldap * -> the requested PHP extension ldap is missing from your system.
</syntaxhighlight>

<translate> The solution is to run the composer install with the <tt>--ignore-platform-reqs</tt> option to ignore platform requirements specified in Composer. That is, if you do not have PHP's LDAP extension installed. </translate>

<syntaxhighlight lang="bash">composer install --ignore-platform-reqs</syntaxhighlight>

<translate> If you receive a login error such as shown below, delete the <tt>administrator/cache/autoload_psr4.php</tt> file.</translate>

[[File:Install-error.png|border|center|400px|Login After Install Error]]

<noinclude>
[[Category:Development{{#translation:}}]]
[[Category:Joomla! 4.x{{#translation:}}]]
[[Category:Tutorials{{#translation:}}]]
</noinclude>

User:Mavrosx

2022-12-21T09:30:40Z

Mavrosx: Created page with "Hi everyone! I'm Christopher Mavros, and I'm from Athens, Greece. I develop Joomla extensions since 2008. {{subst:Newuser}}"

Hi everyone! I'm Christopher Mavros, and I'm from Athens, Greece. I develop Joomla extensions since 2008.

My name is Mavrosx and if you want to get in touch with me, post on my '''[[User_talk:{{PAGENAME}}|talk page]]'''.

==My testing subpages==
<splist/>