Step-by-step Guide For Creating Joomla 3.x Component

This is step-by-step actionable guide on how to create a Joomla Model-View-Controller (MVC) component from scratch.

Step 1: Directory Setup and Manifest Files

The main directory of the component will be com_helloworld. In this, you need two folders - admin and site. You also need a manifest file - helloworld.xml. Keep changing the manifest file as you develop your extension and add more files and features.

• admin
  • index.html
  • helloworld.php
• site
  • index.html
  • helloworld.php
• helloworld.xml

The helloworld.php file is the entry point for the component. The index.html file prevents web server from listing directory content.

• How to Use Database for Joomla Component

Step 2: Language Files

Create language files for both admin and site part.

• admin/language/en-GB/en-GB.com_helloworld.ini
• admin/language/en-GB/en-GB.com_helloworld.sys.ini
• site/language/en-GB/en-GB.com_helloworld.ini

Joomla Global Language Constants

Step 3: Database Design

First, you need to plan what database tables are required for the component. You have to create install, uninstall and upgrade (upgrade file will be empty at the beginning) SQL files.

• How to Add Language Management to Joomla Component

The SQL files are stored in the sql folder under admin.

• admin/sql/install.mysql.utf8.sql
• admin/sql/uninstall.mysql.utf8.sql
• admin/sql/updates/mysql/0.0.1.sql

Step 4: Basic Back-end: Controllers, Views and Models

The main entry point for Joomla back-end or administrator part is admin/helloworld.php file. You have to create main entry file for the admin part, main controller file (define default view here), and corresponding views, layouts and models.

• How to Create Joomla Component

Step 5: Data For Back-end List View

Get the following in view file (view.html.php) from the corresponding model file (planets.php), and display in the corresponding layout file (default.php)

• Items
• Pagination
• Page Title and Toolbar
• Sorting and Ordering
• Searching and Filtering
• Sub menu

Add the page title and toolbar to the view file.

Step 6: Back-end Add, Edit Forms and Other Actions: Sub-controllers

Back-end Actions, Master Controller and Sub Controllers

• Back-end Actions: Delete, Publish and Unpublish
• Back-end Actions: New and Edit
• Adding Custom Back-end Actions

Create sub-controller files, corresponding views and models.

Get the following in view file (view.html.php) from the corresponding model file (helloworld.php), and use in the corresponding layout file (edit.php)

• Form
• Item

Add the page title and toolbar to the view file.

Step 7: Setup Front-end or Site Part

The file, site/helloworld.php is the site entry point to the component.

Part A: Basics

• Create entry point file of component
• Create main controller file
• Add a view to the site part
• Add a model to site part
• Add a menu type to site part
  
  • Add a variable request in menu type
  • How to Access Menu Parameters

Part B: Specifics

• List of Categories in Front End
• List of Items in Front End
• Single Item in Front End
• Front End Form

Part C: Extras

• Title for Front-end Views

Step 8: Using the database

Components usually manage their content using the database.

• Creating and Managing Joomla Database Tables
• SQL Queries during component install, uninstall and update
• Add new custom filed type
• Accessing Joomla Database with JTable

Step 9: Advanced Component Development

1. How to Use User State Variables
2. Link with Joomla Categories Component
3. Add Configuration Options and Parameters
4. Access Menu Parameters for Component
5. Add Alias Field to Joomla Component
6. Create Router for Component
7. Add Access Control List (ACL) in Joomla
8. Working with Images in Component
9. Add Modal to Joomla Component
10. Add Ordering of Items
11. Add Update Server to Component
12. Link with Joomla Custom Fields