Absolute Basics of How a Component Functions

From Joomla! Documentation

Revision as of 09:13, 17 September 2015 by Kevinkabatra (talk | contribs) (→‎JEXEC)

This article is designed for Joomlaǃ beginners; it is designed to explain what a Joomlaǃ component is, and how it functions. When a specific component example will benefit the tutorial, this article will refer to an example component named Hello Worldǃ.

What is a Joomlaǃ Component[edit]

A component is a kind of Joomla! extension. Components are the main functional units of Joomla!; they can be seen as mini-applications. An easy analogy would be that Joomla! is the operating system and the components are desktop applications. Created by a component, content is usually displayed in the center of the main content area of a template (depending on the template).

Most components have two main parts: an administrator part and a site part. The site part is what is used to render pages of your site when they are requested by your site visitors during normal site operation. The administrator part provides an interface to configure and manage different aspects of the component and is accessible through the Joomla! administrator application.

In the Joomla! framework, components can be designed using a flat model(returns HTML code for the requested page) or Model-View-Controller (herein referred to as MVC) pattern.

Accessing a Joomlaǃ Component[edit]

First we need to access the Joomla! platform, which is always accessed through a single point of entry:

  • for user access use: <yoursite>/joomla/index.php
  • for administrator access use: <yoursite>/joomla/administrator/index.php

Hello World! example: localhost/joomla/index.php

To access a component, you would go to:

  • for user access use: <yoursite>/joomla/index.php?option=com_<component_name>
  • for administrator access use: <yoursite>/joomla/administrator/index.php?option=com_<component_name>

Hello World! example: localhost/joomla/index.php?option=com_helloworld

Introduction to MVC[edit]

MVC is a software design pattern that can be used to organize code in such a way that the business logic and data presentation are seperate. The premise behind this approach is that if the business logic is grouped into one section, then the interface and user interaction that surrounds the data can be revised and customized without having to reprogram the business logic. MVC was originally developed to map the traditional input, processing, output roles into a logical GUI architecture.

Model[edit]

The model is the part of the component that encapsulates the application's data. It will often provide routines to manage and manipulate this data in a meaningful way in addition to routines that retrieve the data from the model. In general, the underlying data access technique should be encapsulated in the model. In this way, if an application is to be moved from a system that utilizes a flat file to store its information to as system that uses a database, the model is the only element that needs to be changed, not the view or the controller.

View[edit]

The view is the part of the component that is used to render the data from the model in a manner that is suitable for interaction. For a web-based application, the view would generally be an HTML page that is returned to the user. The view pulls data from the model (which is passed to it from the controller) and feeds the data into a template which is populated and presented to the user. The view does not cause the data to be modified in any way, it only displays the data received from the model.

Controller[edit]

The controller is responsible for responding to user actions. In the case of a web application, a user action is generally a page request. The controller will determine what request is being made by the user and respond appropriately by triggering the model to manipulate the data appropriately and passing the model into the view. The controller does not display the data in the model, it only triggers methods in the model which modify the data, and then pass the model into the view which displays the data.

MVC Basic Directory Structure[edit]

Components are stored in a directory within your Joomla! installation, specifically at:

  • <path_to_joomla>/htdocs/components/com_<component_name>/ .

The Hello World! component would be stored in <path_to_joomla>/htdocs/components/com_helloworld/.

A basic component will contain the following files within its directoryː

  • A html file that allows control of the background colorː index.html
  • A php file that represents the controller itselfː controller.php
  • A php file that loads the controller classː <component_name>.php
  • A php file that represents the model itselfː models/<component_name>.php
  • Another html file for background controlː models/index.html
  • A php file containing the default viewː views/<component_name>/tmpl/default.php
  • A xml file for adding a menu item typeː views/<component_name>/tmpl/default.xml
  • Another html file for background controlː views/<component_name>/tmpl/index.html
  • Another html file for background controlː views/<component_name>/index.html
  • A php file for displaying the viewː views/<component_name>/view.html.php

JEXEC[edit]

The following line is commonly found at the start of Joomla! PHP files:

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

This enables for a secure entry point into the Joomla! platform. JEXEC contains a detailed explanation.

Tutorials on Designing a MVC Component[edit]

To learn how to design your own MVC Component, please complete the tutorial for your Joomla! version.

Contributors[edit]