"Mixing modules and components for great results"
In the previous chapter, we worked on a tiny module, focusing our efforts only on the frontend. This time, we are going to create a simple component too. This way we will be able to work in the backend part and insert data into the database. But don't worry, this is going to be very simple—just the basics so that we have some data inserted—and then we will use a module to show it on the frontend.
For the example in this chapter, we are going to build a news rotator module. Although it is going to be quite simple on the frontend, we will be adding some interesting features in the admin panel.
In this chapter, we will be covering the following topics:
- Working on our news rotator module
- Creating the component base
- How Joomla! helps us in working with the database
- Modifying our installer to create our table
- Coding a basic admin zone
- Inserting, editing, and deleting records in our admin zone
- Showing the data in our module
- Adding jQuery to our module and refreshing data using JavaScript
At the end of the chapter, we will have created a fully featured module and component solution, and the best part of all is that you will be able to use this knowledge in all of your projects.
So, are you ready? Let's get started.
The basics of our module are going to be mostly the same as in our previous
module. In fact, I've prepared a basic module installation with only the basic
files. You can find it in the code bundle, and it is called
mod_tinynews.tar.gz.
As always, our first step will be to install this file. But before continuing, and just to make sure we don't forget about it, we will go to the administrator screen, navigate to Extensions | Plugin Manager and open System - SC jQuery plugin.
Make sure that the plugin is also enabled for the backend, as we can see in the following screenshot:
We have been using this plugin in the book, mostly for the frontend of our site. However, we can also use it in the backend for our module's admin zone. Enabling the plugin for the backend will let us use the power of jQuery on the administrator screen.
Tip
If you don't have the SC jQuery plugin and don't want to use it, you
can add the jQuery library to the administrator template. Take a look at
the administrator/templates folder. For example, I'm
using the khepri template. Inside, we can find a js folder
where we can place the jQuery library. Then by opening the
index.php file of the template, we can add it as follows:
<script type="text/javascript" src="templates/<?php echo
$this->template ?>/js/jquery.js"></script>
And that's all we need to do to enable the jQuery library on our administrator screen.
Now that we have ensured we will have jQuery in our administrator backend, we are going to check if the new module we have installed is listed. Go to the administrator screen, then to Extensions | Module Manager, and click on Tiny News.
Here we can see the basic details and, most importantly, the module position. This time, we are going to use the module_6 position of our template, as shown in the following screenshot:
Good, now we have our module published in the position we want—though in
the frontend we won't see anything, at least for now. To check if the module is
working, we are going to make it show something. Open the
modules/mod_tinynews/mod_tinynews.php file. We are going to add the
highlighted line in the following code snippet:
require_once(dirname(__FILE__).DS.'helper.php'),
require(JModuleHelper::getLayoutPath('mod_tinynews','default_tmpl'));
And then we are also going to perform some tiny changes in the template file
located at modules/mod_tinynews/tmpl/default_tmpl.php. We will
add the following code:
<div id="tinynews">
<?php echo "This is working"; ?>
</div>
Once that's done, our module will show the This is working message in our template's module position. Okay, then we will create the component part; don't worry, it's going to be easy.