Step 0: Make coffee

Again, it is important to start your day and project off right. Get into a pattern, a rhythm and soon you’ll find your creativity, focus, and coding skills to be at the ready when you sit down to begin work. Don’t overlook the importance of being in the right frame of mind when you begin work.

Step 1: Write basic component outline for files needed

The first thing to do is to create a rough overview of the files, folders, database tables, and associated fields. For our component we will be creating the following system.

Component Details

Name: Lendr
Component Name: com_lendr
Description: Lendr is a bootstrapped Joomla! 3.0 component which will allow users to create a profile, add their books to their library collection, view other users libraries, request a book to borrow, add books to a wishlist, and sign up to be on a waitlist for a particular book.

Basic Functions

This new component Lendr will provide the following set of features:

• User accounts / basic profiles
• Books / Libraries for Users
• Wishlists for books desired
• Lending / Borrowing of a book
• Requesting to borrow a book
• Waitlists for a book already lent

Now we should write down our basic structure of files needed. This will not be a comprehensive list and will most definitely be modified as we progress through the process. However, having a starting outline will help to keep things somewhat on track. Here is the initial outline of key files needed for Lendr.

Basic Files

Now that we have this written out and a rough outline we begin creating these files in our folder structure.

Step 2: Write the Database table files

We begin by creating the database table files. We store these in the table folder located in the frontside of our component. Please refer back to the first article in this series to recall how your local environment should be configured. We create each of the files we described in our outline. Below is one of these files.

/joomla_root/components/com_lendr/site/tables/book.php [Click to view source]

In our case the table file holds a single construct function. This function provides the table name associated with this JTable file and also defines the primary key field, book_id, in this file.

While creating these database tables it is appropriate to begin the process of creating the install.mysql.sql script which will be used when the component is installed through the Joomla! administrator panel. The start of that file is below:

/joomla_root/administrator/components/com_lendr/admin/install.mysql.sql [Click to view source]

We will continue to add to this file throughout the process of creating our tables. By adding these tables as we create them it will make it easier at the end when compiling the component to install.

Step 3: Begin component folder and file creation

After creating the database tables we set up the file structure for the entire component. Below is the basic directory structure.

com_lendr/
   admin/
      controllers/
      models/
      views/
      index.html
      install.mysql.sql
      lendr.php
   site/
      assets/
      controllers/
      helpers/
      language/
      models/
      tables/
      views/
      index.html
      lendr.php
      router.php
install.php
lendr.xml

Each of these files and folders is important, though not all are required. We shall begin working through each of these files and the functions they contain. Along the way we will explain the purpose of each.

Step 4: Write the install files, root file, controllers, and view controllers

In this step we are going to add content to several files. First we will look at the install files, then we'll work with some controllers and finally we'll add our view controllers.

Install Files

The root level files are those files used by Joomla! during the install process. They are located outside the site and admin folders in your component folder. There is an XML file which is used to define the component details, and all associated files, menus, and languages; and there is also an install.php file. This install.php file holds a number of functions that run upon installation. The name is not specific but must be referenced properly in the XML file. The functions do not have to be utilized or even present but can be used to perform additional actions during the component install.

Sample Files

lendr.xml [Click to view source]
install.php [Click to view source]

Root File (lendr.php)

The lendr.php file in the root of the site folder is the first file recognized and read by Joomla! after installation. This file handles the redirection of tasks to other controllers, the loading of helper files, stylesheets, javascript, plugin libraries and other core pieces necessary throughout the entire component. It will be expanded upon in future tutorials in this series.

This file will load the tables associated with this component; import any plugins that exist in the plugin group "lendr"; determine the controller requested by the user and then execute the appropriate controller based on that request.

Controllers

The controllers in a Joomla! 3 component are created as a class with a single function. Typically the controller name defines the task for the controller. This is a departure from previous Joomla! versions where a controller was dedicated to a variety of tasks related to a particular area of a component. By creating controllers with a single executable function there is a greater opportunity for chaining controllers together and forming an easy-to-follow path for tracing an action and troubleshooting. Below is one of the controllers we will define for Lendr, followed by our default controller for some basic functionality.

Sample

edit.php [Click to view source]
default.php [Click to view source]

View Controllers

Joomla! is a bit unique in how the views are handled. Joomla! makes use of a secondary controller to help in the rendering aspect of data and the assigning of variables to be used in the view layouts. This secondary controller is found in the views folder of the component and is often named similarly to the type of render desired. (e.g. html.php for rendering html, phtml.php for rendering a partial template, raw.php for rendering raw data, etc...). Below is one of the view controllers used by Lendr.

Sample

html.php [Click to view source]
raw.php [Click to view source]

Step 5: Create Models

Joomla! models work like most MVC systems and handle the bulk of the data manipulation and data retrieval. Lendr models will be focused on heavily in the next tutorial so here we will look only at the general structure.

Sample

book.php [Click to view source]
default.php [Click to view source]

These Joomla! models are just two of the files that will be created with the Lendr component system. The other models are similar in nature and basic structure but will be written in more detail in the following tutorial.

Beginning Development Wrap-up

Now that we have created the basic folder structure of the component, written the database tables, install files, controllers, view controllers, and models our component should be installable. Of course while there is no functionality yet and the component merely creates an empty shell it does provide some sense of satisfaction to have an installable component. Be sure to examine our Github repository to view the other database tables, controllers, view controllers, and models which have not been written out here.

View Full Tutorial with code snippets at http://lendr.sparkbuilt.com.

In the next tutorial we will dive into the actual functionality to be written to the various models.