The next step, is choose a name for our component, i will name it 'Forum', simple enough, so, lets make a new folder inside the '/components' folder, call it 'com_forum'. As you may have have noticed, folder name must begin with 'com_', and must be located inside the '/components' folder.

Once we have created that folder create a file called 'forum.php' and paste this inside:

<?php
echo "This will be the forum component";

You will note I didn't close the <?php tag, that's because its a Joomla! convention, PHP will automatically close it, and so there wont be any problems parsing unwanted stuff after the PHP tag.

Now, if you go to your Joomla! installation and type 'index.php?option=com_forum' you should see the text "This is the forum component". This is because Joomla! automatically calls a file called forum.php, that is because the folder is called 'com_forum', if it was called 'com_foo' it would call 'foo.php'.

The Controller

That seems pretty simple, doesn't it? Well, we have to implement the MVC structure now, remember? First, lets create the 'C' part, the Controller, replace the contents of the 'forum.php' file with this.

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
 
require_once( JPATH_COMPONENT.DS.'controller.php' );
 
if($controller = JRequest::getVar('controller')) {
 $path = JPATH_COMPONENT.DS.'controllers'.DS.$controller.'.php';
 if (file_exists($path)) {
 require_once $path;
 } else {
 $controller = '';
 }
}
 
$classname= 'ForumController'.$controller;
$controller= new $classname();

$controller->execute(JRequest::getVar('task'));

$controller->redirect();

Ok that makes a lot indeed, first of all, we check if this file is included inside Joomla!'s index.php, as all components must be included that way, so if its accessed directly we just die with the message 'Restricted access' but it could be any text.

Next, we include the file 'controller.php', again, this is a convention, it doesnt have to be 'controller.php' but its reccommended. JPATH_COMPONENT is a constant which stores the full path to our component, DS stands for Directory Separator, and it's either '/' or '\', depending on which OS PHP is running on.

We may have multiple controllers (we will indeed) so we check if the variable controller is set, and we include the file inside '/controllers' called as the variable name plus '.php' if it exists. This will allow us to call controllers doing things like 'index.php?com_option=com_forum&controller=addReply'.

Next, we create a classname and instantiate it, if the controller variable is set we append it to our class name, this means, if our controller is called ForumController, all controllers must start with ForumController + the controller name, for example ForumControllerForum, it follows this format {Forum}{Controller}{Forum} -> {Component Name}{Controller}{Controller Name}.

Then we call the execute method of the Controller class, with the task parameter, so the controller knows what function to call, if task is empty, it will call the display function.

Finally, we call the redirect function of the controller, allowing it to redirect as needed.

That code will be almost the same on all Components you make, and i took it from the Component tutorial at Joomla! Developers wiki.

We have modified the 'forum.php' file to call our controller, but we don't have a controller yet! So, we will create it, create a file called 'controller.php' (as explained earlier). Then paste/write this:

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');


class ForumController extends JController
{
 function display()
 {
 echo "Hello, world!";
 }
}

First of all, as in all files we will create, we restrict access, then we import the controller, this allows us to extend from it in our class, the class name is important, as this is the default controller we dont put a controller name, just name it ForumController, {ComponentName}{Controller}.

The display function will be called if the task variable is empty ('index.php?option=com_forum&task='), try changing it and see the result, if the function does not exists it will call the display function, it will call the function otherwise.

Ok, so we create our display function, which is the default funciton, and we just, echo 'Hello, World!'.

Go to '/index.php?option=com_forum' and you should see 'Hello, World!' in there.

There it is, our controller. Pretty basic, but its a controller ;-). In Joomla! controllers basically loads views and models, and put everything together, as explained earlier from the MVC theory, its wrong to display something at the component, if we display something, we should do it within the view, so, lets do that!

The View

Views are supposed to show data, they load data from the model and show it, formatted. Easy, right? Lets make a view, first, make a views folder, inside the 'com_forum' folder, create a 'forum' folder inside that one and create a new php file called 'view.html.php' inside the forum folder.

The file 'view.html.php' will be called by default when you use the 'forum' view. Also, the 'forum' view is the default view of the forum controller. Views in Joomla! are a little bit different from those of CakePHP or CodeIgniter (If you have tried other MVC frameworks), but we will see that difference in a moment, first, paste this insde the 'view.html.php' file.

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.view');
 
class ForumViewForum extends JView
{
 function display()
 {
 echo "Hello, world! I'm the view!";
 }
}

As you may notice, this is very similar to the controller's code, it only changes the class name, the jimport and the class from which is extends, now its JView instead of JController. Let's modify the controller so we can see the changes, edit the 'controller.php' file so it looks like this:

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller');
 
class ForumController extends JController
{
 function display()
 {
 parent::display();
 }
}

Now, go to 'index.php?option=com_forum' and you should see the view's text: "Hello world! I'm the view!".

What happened here? We only changed one line of the controller, parent::display() basically shows the view content. You may have noted we have not defined any view, well that's why convention is important, as our view is inside the 'forum' folder, which is the component name, and the class name is ForumViewForum - {Component}{View}{View Name} - Joomla! automatically finds it and displays it.

The Model

So far, so good, but there are still some problems, Views are not supposed to contain data, just display it, the Model is the one who must load data, the View will just get that loaded data.

Let's create a model, create a 'models' folder inside the 'com_forum' folder. Now create a file, 'forum.php' inside the 'models' folder. We call this file 'forum.php' because it will be the forum controller's model, and remember we called that controller like that because our component was called 'com_forum' so it became the default component? We defined that in 'forum.php'. Pretty complicated, how everything fits together nicely, but that's good, convention over configuration will save you a lot of time, but sometimes is good to specify some configuration so you actually know what you are doing, it will take a while for you to understand that.

Put this inside '/models/forum.php'

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.model');
 
class ForumModelForum extends JModel
{
 
}

It's the same as with Controller and View, only change the class signature and the jimport. Let's now create a method which will show the Hello World!.

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.model');
 
class ForumModelForum extends JModel
{
 function getGreeting() {
 return "Hello, World! This was loaded from the model, as it's supposed to be!";
 }
}

It's a convention that all methods in the controller which return data start with 'get'. That way we can load them easier in the view. Let's now go to the view and modify it to load data from the model.

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.view');
 
class ForumViewForum extends JView
{
 function display()
 {
 $data = $this->get('Greeting');
 echo $data;
 }
}

We use the method $this->get to load data from the model, the model that we will use must be specified in the controller, but in this case, its the default one so we didn't do it. Remember we had a method called getGreeting in the model? we call it like this $this->get('Greeting') that's why it should start with 'get'. Finally we show the data.

This seems to be good, but there is one last thing we must do, in Joomla! we have templates, each view can have many templates (and in the back-end, when adding a new menu, you will be able to see your component, your views and templates, to link to them, but we will see that laaaater) so we should show the template instead of the data directly, for that, make a new folder inside '/views/forum' called 'tmpl', create a file called 'default.php' inside that new folder, this will be the default template, it will be used if we dont define anything about what template to use.

Put this inside the 'default.php' file

<?php defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
<h1>I'm the default template</h1>
<?php echo $this->data; ?>

As you can see, this is just a normal PHP file, with the restricted access as always, $this->data will be a variable we will asign from the view, so we can show it here, in the template. Let's go back to the view and add that variable (view.html.php).

<?php 
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.view');
 
class ForumViewForum extends JView
{
 function display($tpl = null)
 {
 $data = $this->assignRef('data', $this->get('Greeting'));
 parent::display($tpl);
 }
}

That will create a variable called data which will be visible in the template, and the content will be the one we had before, which we load from our model. By calling parent::display($tpl) we show our template, in this case, as we have not specified which one, it will use the default one.

Now you should see something like this:

And your file structure should be like this:

Wow, we have made a lot of files so far, but dont worry, there wont be many more than these. This is the basic structure of a component, in the next tutorial we will start working on our forum, and making a real component by editting these files and adding new ones, so make sure you read this tutorial! You will need it for the next one.

Hope you find this useful!