How does minimal component looks in joomla

A component is at the heart of every request to Joomla Let's install a minimal component and take a look at its pieces. So first, let's log in to the backend. So I am going to go to the Extension Manager, and browse for the com_noidacity.zip file(you can download it from the link provided at the bottom of this article).

Installing component at extension manager

Then I am going to click Upload & Install and that install the component for us.

Component successfully installed

Now, one thing that you want to note when you're looking at a component is that there is both a front-end to the component and a backend to the component. We're already in the backend, let's take a look at the backend of the component.

To do that, just go to the Components menu and you'll notice that there is already an Noida City menu option here.

Noida City Menu Got Installed

If you click on this option, it will take you to what's currently the backend of this component. We don't have a toolbar yet and we just have the word Backend being displayed down at the bottom.

Backend Component is displayed

Just like this, we have a front-end to the component as well. So you'll notice here that index.php?option= com_noidacity is the link here in the Backend. It's exactly the same in the front-end, only we do it at the root rather than /administrator.

Administrator option menu

So let's go to the front-end and go to index.php?option=com_noidacity, and again it's just outputting front-end here with the standard Joomla template.

Front end component being displayed

So let's take a look at where this code is coming from that's generating this content. Let's go to the root folder of Joomla and you'll notice that there is an administrator folder and a components folder.

Administrator and component folders

The component for the front-end is under components, while the component for the backend is under administrator/components.

Let's first go to the front-end, so go to components, and then com_noidacity. Inside this folder is the noidacity.php file along with an index.html file that's there just to prevent Apache from doing virtual directories.

Noida City Frontend Component

So let's open noidacity.php and you'll notice inside that this is very similar to the module code that we had from before. We have designed _JEXEC or die; which makes sure that this file is being called from within Joomla and not being accessed directly. Then we have our PHP code that just says echo "Frontend" and just like the module, we can add any PHP code here that we want. It's flexible like that where you can use the model view controller design pattern or you can just start writing PHP code that you have on hand.

  1. <?php
  2. defined( '_JEXEC' ) or die;
  3.  
  4. echo "Frontend";

The Backend is very similar. Go back up to the administrator folder, and then go into the components folder underneath that. Inside there, go to com_noidacity, and then here you'll see a few more files. Let's go to noidacity.php and again, it's just _JEXEC or die; and then the echo for "Backend". Just like the front-end, you can add whatever PHP code you want here and it will execute.

Admin Component Files

  1. <?php
  2. defined( '_JEXEC' ) or die;
  3.  
  4. echo "Backend";

Joomla's! components allow you to simultaneously create a backend and a front-end to handle the same data. If you set the option variable in your URL, you can control which component gets loaded.

Download the Component - download