Let's start with the basics, step by step. We are going to work a bit on the
frontend of our component. I think it will be easier to start in the frontend part.
We are going to create a com_tinynews folder inside our
components folder. Inside this folder, create a
tinynews.php file with the following content:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
require_once( JPATH_COMPONENT.DS.'controller.php' );
$controller = new TinynewsController();
$controller->execute($task = null);
Again, here we are using the _JEXEC constant to check if our
file is being called by Joomla!. Then we require the
controller.php file, which we haven't created yet.
The JPATH_COMPONENT constant defines the path to our component,
and the DS constant defines the directory separator, be
it / or , depending on the system.
After we create an instance of the controller class, we call the
execute method. We can pass a parameter here, but as the
$task variable is not defined, a null value will be used
instead.
Now our tinynews.php file is done, we will use it as a central
point for our component. Most of the times that Joomla! calls the component, it will
in fact be calling this file. But what about our controller file? We need to create
it in components/com_tinynews/ and call it
controller.php. Let's have a look at its content:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport('joomla.application.component.controller'),
class TinynewsController extends JController{
function display(){
parent::display();
}
}
Again, you can see that our well-known _JEXEC line is in the
beginning. We then use jimport in order to include the
/libraries/joomla/application/component/controller.php file, which has
the JController class. Our own class will extend this
file.
Tip
Note that jimport has replaced dots "." to
"/" or "" as necessary, and added the .php
extension to the end, thus loading the correct file.
After we have imported the file, we define our own class,
TinynewsController, which extends the JController
class. This way we will have all the JController methods
available to us.
We can also see a display method. By default, this method will be called when no other method is. Remember the following controller:
$controller->execute($task = null);
In it, we didn't mention which method to call, so the
display method will be called. Now we need a view file. For example,
we are going to create a file called
components/com_tinynews/views/tinynews/view.html.php. Its content is
as follows:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.view'),
class TinynewsViewTinynews extends JView{
function display(){
$name = "Tinynews component!";
$this->assignRef( 'name', $name );
parent::display();
}
}
Our first step, as always, is to check the _JEXEC constant.
Then we import the view class, from which our class
TinynewsViewTinynews will be extended. Here we have a display function
with some code in it—but not too much. We have a $name
variable definition, after which we use the assignRef method to
assign a new name variable with the value of
$name.
Assigning the variable will make it available in the template. So what do we
need now? Yes, you have guessed it, a template. Create it in
components/com_tinynews/views/tinynews/tmpl/default.php. Wow,
that's quite a long path! However, let's put some content into this
file:
<?php defined('_JEXEC') or die('Restricted access'), ?>
<h1><?php echo $this->name; ?></h1>
Very little is done here; we are only showing our variable. And well, that's
all we need for now. How can we check if all this is working? Quite easily. Imagine
our site is called wayofthewebninja.com; if we wanted to load our
component, we would use the following URL:
http://wayofthewebninja.com/index.php?option=com_tinynews.
We use the option variable to indicate which component needs to
be loaded. This time it will be our component com_tinynews. Good,
if all goes okay, we will see something similar to the following screenshot:
It's working! It has been quite easy, hasn't it? Well, maybe you have some questions in mind. Don't worry; we will be seeing most of the details step by step. Let's summarize all this a bit:
- First we created a
tinynews.phpfile. This file will be an entry point to our component. All calls will be made to this file. - Next we have a
controller.phpfile, most of the logic lies here. - Next we have a
view.html.phpfile to prepare all what is about to be shown to our site visitors. - Also, we have a
default.phpfile, a template that will organize and show the data prepared in our view.
What is important to note here is the naming convention. If we don't name our classes the correct way, things won't work. Take for example, our controller. Our controller class is called:
class TinynewsController
Our component name ends with Controller, as follows:
class ComponentnameController
This is quite straightforward, but what about the view? This is a bit more difficult, as shown next:
class TinynewsViewTinynews
First we have our component name, then View, and then our
view's name. So we have the following format:
class ComponentnameViewviewname
By default, our controller loads the view whose name is equal to the component
name. How can we define another view to load? Quite easily; in our controller, we
will add a $_name variable, indicating the view name, as
follows:
class TinynewsController extends JController{
var $_name='viewtoload';
function display(){
parent::display();
}
Now that things are a bit better explained, or at least I hope so! We will continue with this example. This way we will get a better understanding of how things work.
This moment would be a great time to start creating our XML installer file.
We are going to create it in the components/com_tinynews
folder, and we will call it tinynews.xml. Let's have a
look at its content:
<?xml version="1.0" encoding="utf-8"?>
<install type="component" version="1.5.0">
<name>Tinynews</name>
<creationDate>2010-03-07</creationDate>
<author>Jose Argudo</author>
<authorEmail>[email protected]</authorEmail>
<authorUrl>http://www.joseargudo.com</authorUrl>
<copyright>Jose Argudo Blanco.</copyright>
<license>GPL 2.0</license>
<version>1.0</version>
<description>Component Tinynews</description>
<files folder="site">
<filename>controller.php</filename>
<filename>tinynews.php</filename>
<filename>index.html</filename>
<filename>views/index.html</filename>
<filename>views/tinynews/index.html</filename>
<filename>views/tinynews/view.html.php</filename>
<filename>views/tinynews/tmpl/default.php</filename>
<filename>views/tinynews/tmpl/index.html</filename>
</files>
<administration>
<menu>Component Tinynews</menu>
<files folder="admin">
<filename>tinynews.php</filename>
<filename>index.html</filename>
</files>
</administration>
</install>
As you can see, it is much like the XML we generated for our module. But then
we have the files section. For example, take a look at the
first line:
<files folder="site">
Here we are indicating to our installer that all the files between
the <files></files> tag can be found inside a
folder called site. Later, in the
administration part, we indicate that we have a folder
called admin, and also a menu tag. The
name inside this will be the name that will appear in the Components menu of our administrator.
Don't worry about the tinynews.php inside the
admin part, we will use that later.
Tip
It's quite a complex structure, so why don't you take a look into
it for real? In the code bundle for Chapter 8, there's a folder
called com_tinynews_step_1. Inside this folder, you
will see a file called com_tinynews.tar.gz. You can
uncompress it to see the structure of the component.
And that's all! As we continue working, you will get a better understanding of all these concepts.
Some of you who know about the MVC pattern will already be aware about why we need all these files.
But maybe some of you don't really know the reason behind this file division. I will try to explain it quickly so that all of us can work at the same level.
As I've said, Joomla! uses a development pattern called MVC. In a simplistic way, while developing the first step of our component, we have created several files. Each one of these files can be placed in one of these categories:
- Model—is used to work with data, be it retrieving data from a database, an XML file, or any other source of data. We use models to get the data. Our next step will be to build a model, but that will come in a moment.
- View—is the file that renders the information to our visitors. Here we should see very little code, mostly we will show data to our visitors. No manipulation is required.
- Controller—is where all the programming logic takes place. Controllers call models to get the data and then they pass this data to views. Finally, this data is rendered by the views.
The usual process would be as follows:
- First we have the entry point. All requests will be made through
this file. In our case, this was the
tinynews.phpfile. This file is in charge of loading the necessary controller. controller.phpis our next step. Our entry point will load a controller and then use some methods from it.- Then the controller, if necessary, can load a model or, as we have seen in our example, go directly and load a view.
- A view will prepare the data to be shown and, if necessary, use any templates necessary.
- And finally, our result is rendered on the visitor's machine.
It's easier than it seems the first time you see it. By the end of the chapter, you will be used to this. Well, can you guess what our next step is? It's building a model!
As we have seen before, models are used to work with data, be it from a database or any other source. The models are where we will place our SQL queries and get the results that will be passed to the controllers.
Models will be placed in their own folder,
components/com_tinynews/models, so first create this
models folder. Inside this folder, we will create a file
called tinynews.php, which will contain the following
code:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
jimport( 'joomla.application.component.model' );
class TinynewsModelTinynews extends JModel{
function getallnews(){
$news[1] = "This is the title for the first news";
$news[2] = "This is the content for the first news";
$news[3] = "This is the title for the second news";
$news[4] = "This is the content for the second news";
return $news;
}
}
There isn't much for now, but as we have not yet prepared a database, we need to put some demo data, and this is the best place.
The naming convention is very similar to what we have seen earlier. First is
the name of the component, then the word Model, and then the
name of the model, as follows:
ComponentnameModelModelname
Also, note that we are using jimport again, but this time
to import the Joomla! model class. So, all its methods will be available for us
to use. Just after that we define the getallnews method and
put some demo data there in an array.
After we have created our model, we are ready to use it with some tiny changes
to our view. If you remember, in our view (excerpt is taken from
components/com_tinynews/views/tinynews/view.html.php), we had the
following:
class TinynewsViewTinynews extends JView{
function display(){
$name = "Tinynews component!";
$this->assignRef( 'name', $name );
We need to change this code a bit so that we can use our newly created model, as follows:
$model =& $this->getModel();
$news = $model->getallnews();
$this->assignRef('news', $news);
First of all, we get the model so that we can use it. By default, our view
will load the model that shares the same name, which is
Tinynews. In any other case, we will need to put the name of the
model we want to load.
Next, we call the getallnews method from our model and
place the results in a variable. These results will be passed to the template
later, using the assignRef method.
As you may be guessing, we now need to work on our template, so these changes
take effect. Open the
components/com_tinynews/views/tinynews/tmpl/default.php file, and
change all its content to the following:
<?php
defined('_JEXEC') or die('Restricted access'),
foreach($this->news as $new){
echo "<p>".$new."</p><br/><br/>";
}
?>
In our template we use a simpleforeach loop in order to
show all elements of our array, and that's all. So, if we now try to go
to
http://www.yoursite.com/index.php?option=com_tinynews, we will see
something similar to the following screenshot:
Well, we are still far away from our final result, but our example component is getting more interesting. Now, before continuing, we are going to update our XML file, as shown in the highlighted code:
<files folder="site">
...
<filename>models/index.html</filename>
<filename>models/tinynews.php</filename>
</files>