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.

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)

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

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)

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

Part B: Specifics

Part C: Extras

Step 8: Using the database

Components usually manage their content using the database.

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

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive