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. Backend or Admin Part

  1. Form - Model and View
  2. Joomla XML Form
  3. Automatic Handling of Fields
  4. Items - Model and View
  5. List Layout File
  6. Searching and Filtering
  7. Sorting and Ordering
  8. Pagination
  9. Sub menu (Joomla! 3 Only)
  10. Actions: Delete, Publish and Unpublish
  11. Actions: New and Edit
  12. Custom Actions

C. Frontend or Site Part

  1. Main Controller File
  2. Frontend View
  3. Frontend Model
  4. Site Menu
  5. Variable request in menu type
  6. How to Access Menu Parameters
  7. List of Items
  8. Single Item
  9. Front End Form
  10. 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. Add Alias Field to Joomla Component
  5. Create Router for Component
  6. Add Access Control List (ACL) in Joomla
  7. Working with Images in Component
  8. Add Modal to Joomla Component
  9. Add Ordering of Items
  10. Add Update Server to Component
  11. Link with Joomla Custom Fields