Year’s Biggest Sale is here! Exclusive and limited time BF/Cyber Monday Sale 50% OFF.
qxio-ios-color-wand-outline Grab The Deal

Joomla! Component Development with FOF - Part 02

Joomla! Component Development with FOF - Part 02

Hey guys, hope you find your developing Joomla component easy and interesting. I really appreciate your collaboration and support to encourage me to write subsequent parts of Joomla! Component Development with FOF. In my last tutorial, I only covered single as well as multiple items view of backend. In today’s part I only show you how to create category multiple and single backend view of our Gallery component. Okey guys, let’s move forward. If you are following from this part of this tutorial, you are requested to follow me from Joomla! Component Development with FOF - Part 01


Step 01

Now in the very beginning of this tutorial, I will add multiple categories view of Gallery Component. Currently we don’t have categories panel available in the left sidebar of the Component admin panel. To create multiple category view, you have to get back Gallery component root from the link Joomla root directory/administrator/components/com_gallery open views folder and create a folder called categories.


Now back to the Joomla! backend and open up the gallery component dashboard. You can notice categories section has been added in left sidebar, Have a look in the image below.


Click on the categories where I’ve circled in the previous image. After hitting click, you will get the following error (1146 Table 'demo. o39p1_gallery_categories' doesn't exist SQL=SHOW FULL COLUMNS FROM `o39p1_gallery_categories`). It means, we have to create a database table called “o39p1_gallery_categories” for categories. In your turn o39p1 prefix would be different. So, Lets create database table. 

Step 02

Creating categories table in database is the same as we created for items. Select your database, click on new, add your database table name (o39p1_gallery_categories is my category table name), add gallery_category_id field, make sure you have checked in for auto increment and click Save. Have a look at the next image.


Now back to the error page, where you get 1146 error and reload the page. Now you get the following error (500 Layout admin: com_gallery/category/default not found). Don’t be panic the this error, Such errors paves us tor right direction. So, let get ourselves from this wired page.

Step 03

Now I can assume you in the categories folder we created in the first step. If you are in the right folder, add a new temp folder, and at least create form.default.xml file. Have a look at the file hierarchy.


Now open form.default.xml and paste the following code.

Now back to the component admin where you faced last 500 error and refresh the page. If you successfully followed the previous steps, Now you are on the following screen. Have a on the screen next.


Now you have noticed there no category available in the category multiple view. To create a category, click on the New button, In this turn you will receive following error (500 Layout admin: com_gallery/categories/default not found). Don’t worry, it's a great sign again. It’s asking us to create a single category view.

Step 04

To bring about the single category view, let’s get back to the views folder again. Create a folder title category under views folder, tmpl folder under category folder, and at last create form. form. xml. Have a glance on the file hierarchy.


Copy the following code to form.form.xml and save the file.

Back to the page where you found last 500 error and refresh the page. If you constantly following me, I bet your reach screen below.


What are you waiting for? Fill the details of your new category and click Save and Close. Still wired screen waiting for you. Even you might be panick again when you landed on the following screen


Do you know why our inputted data aren't be available here? The reason behind, we have only created category database table called o39p1_gallery_categories and added single database field gallery_category_id. You can see in image above a row has been created with blank data, because there are no database fields available to save your category inputted data. So, it’s time to add those fields in o39p1_gallery_categories with Magic fields

Step 05

In this step, we’ll add 14 fields in our existing database table, o39p1_gallery_categories. Just create your as you can see in the following image and click save.


If you successfully added new fields in o39p1_gallery_categories table, Create a category and click Save and Close. You can your newly created category is on the category multiple view screen. Have a look at mine.



06 Step

I think you are thinking we have done with category single and multiple view creation, right? The answer is yes. If you are with me from the last tutorial, you have noticed, We haven't defining any category while creating single item. The reason was because we didn’t have category created then. At this moment we have categories are ready. We can assign them from now.

To assign an individual category with items. Head to views folder and open form. form. xml folder from single item view from the following link Joomla root directory/administrator/components/com_gallery/views/item/tmpl. You might notice some line codes are kept commented. If you removed your commented code while creating item, Just copy them from the 8th step of our previous tutorial Joomla! Component Development with FOF - Part 01. When you uncommented the code blocks. Open item single view to create new items from component dashboard. You can see the image below, I can assign a category with individual item.


When you have done entire setting, head to the items from this link Joomla root directory/administrator/components/com_gallery/views/items/tmpl and open form.default.xml file and uncomment the commented code and save the file. Open the items multiple view from component dashboard, have a look at the Items details view, it looks like following.


In this turn If you have created multiple category for your items, you will face a logical error. I mean when you create a random category by mistake, you can’t update them later. Do you know the reason behind? It’s because you haven’t created any foreign key on o39p1_gallery_items for o39p1_gallery_categories table. Now we add a new field called gallery_category_id on o39p1_gallery_items table.

To add new field on o39p1_gallery_items table, head your database open your gallery items table and add the gallery_category_id on the table. Have a look in the following image.


Conclusion For this tutorial, we can make a component that can store items with their category in the backend. Though it isn't enough for any component. But we are slowly moving to the completion. Hope you find this step helpful the same as the first one. Stay connected, I am returning soon with subsequent parts of component development.