How to Create Joomla 4.x Component

This is step-by-step guide on how to create a Joomla! 4 Model-View-Controller (MVC) component from scratch. Joomla! components are split into two main parts: administrator part and site part.

The administrator part provides an interface to manage the component, and the site part provides the pages requested by users visiting the website.

In this tutorial, we will be creating Joomla! component - com_planets.

The main directory of the component will be com_planets. The "com" prefix means "component" and the "planets" is the name of the component. Inside this directory, there are two sub-folders for the admin part and site part.

Create two sub-folders site and admin. You also need a manifest file - planets.xml. Keep changing this manifest file as you develop your extension and add more files and features.

Add the following basic files:

  1. planets.xml: XML manifest file that tells Joomla! how to install the component.
  2. admin/services/provider.php: It tells Joomla! how to initialize the component.
  3. admin/src/Controller/DisplayController.php: The MVC default Controller for the "Planets" page.
  4. admin/src/View/Planets/HtmlView.php: The MVC View for the "Planets" page.
  5. admin/tmpl/planets/default.php: The HTML and PHP template for the "Planets" page.

A. Basics

  1. Adding Basic Files
  2. Manifest Files for Extensions
  3. Types of Models in Joomla
  4. Admin Model
  5. Backend Toolbar and Actions; Controllers
  6. Creating and Managing Joomla Database Tables
  7. SQL Queries

B. Back-end: Controllers, Views and Models

  1. Items
  2. Pagination
  3. Page Title and Toolbar
  4. Sorting and Ordering
  5. Searching and Filtering
  6. Sub menu
  7. Form
  8. Item
  9. Back-end Actions: Delete, Publish and Unpublish
  10. Back-end Actions: New and Edit
  11. Custom Back-end Actions

C. Front-end or Site Part

  1. Entry Point File
  2. Main Controller File
  3. View
  4. Site Model
  5. Menu
  6. Variable request in menu type
  7. How to Access Menu Parameters
  8. List of Categories
  9. List of Items
  10. Single Item
  11. Front End Form
  12. Title for Front-end Views

D. 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