Joomla! Documentation™

Joomla! 

3.x

Tutorial

Developing an MVC Component

Articles in This Series

1. Introduction
2. Developing a Basic Component
3. Adding a View to the Site Part
4. Adding a Menu Type to the Site Part
5. Adding a Model to the Site Part
6. Adding a Variable Request in the Menu Type
7. Using the Database
8. Basic Backend
9. Adding Language Management
10. Adding Backend Actions
11. Adding Decorations to the Backend
12. Adding Verifications
13. Adding Categories
14. Adding Configuration
15. Adding ACL
16. Adding an Install/Uninstall/Update Script File
17. Adding a Frontend Form
18. Adding an Image
19. Adding a Map
20. Adding AJAX
21. Adding an Alias
22. Using the Language Filter Facility
23. Adding a Modal
24. Adding Associations
25. Adding Checkout
26. Adding Ordering
27. Adding Levels
28. Adding Versioning
29. Adding Tags
30. Adding Access
31. Adding a Batch Process
32. Adding Cache
33. Adding a Feed
34. Adding an Update Server
35. Adding Custom Fields
36. Upgrading to Joomla4

This is a multiple-article series of tutorials on how to develop a Model-View-Controller Component for Joomla! Version.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the Articles in this series).

This tutorial is part of the Developing a MVC Component for Joomla! 3.x tutorial. You are encouraged to read the previous parts of the tutorial before reading this.

In this step we add an image to each Helloworld greeting, and describe how to allow the administrator to select an image from the media library, and a general user to upload an image via a front-end form.

Functionality

The main functionality which we'll build in this step will be

• Back end
  • allow the administrator to select an image to be associated with each helloworld greeting
  • display details of the image on the administrator's list of helloworld greetings
• Front end
  • display the image associated with the helloworld greeting
  • allow a user to upload an image when creating a new helloworld greeting

Approach

We'll extend our Helloworld database record to include the filename of the image file within our Joomla instance (by default, stored within the images folder). Together with the image link we'll also store a caption and alt text, as these are what are used in an HTML img tag. We'll create one database field to store all three items in JSON-encoded format (as we did for the params field in Adding configuration). This means that we'll need to sort out converting between the database format (JSON-encoded) and how the data is presented in a form (via an array).

In the back end we'll need to change the helloworld edit form, both its xml definition and the layout file, to include capturing the image details, and we'll need to satisfy ourselves that the image information is extracted in the model, in order to prefill the data in the edit form. We'll need to make sure that the save of the edited / new record handles the image details as well.

We'll also change the "helloworlds" list layout to include the new image data, and we'll need to change the model to including selecting the image data from the database.

On the front end we have the view which displays the helloworld message – we'll ensure our layout file includes the image as well, and we'll need to get the additional information from the model. We also have the front end form developed in the previous step, and we'll change this to allow a user to upload an image. This will entail work in the associated controller handling the POST, in order to deal with uploading the image file.

Updating the Database

Add a field called 'image' to our database record, which will store the filename of the image, its caption and its alt text all together in a JSON-encoded format.

admin/sql/install.mysql.utf8.sql

DROP TABLE IF EXISTS `#__helloworld`;

CREATE TABLE `#__helloworld` (
	`id`       INT(11)     NOT NULL AUTO_INCREMENT,
	`asset_id` INT(10)     NOT NULL DEFAULT '0',
	`created`  DATETIME    NOT NULL DEFAULT '0000-00-00 00:00:00',
	`created_by`  INT(10) UNSIGNED NOT NULL DEFAULT '0',
	`greeting` VARCHAR(25) NOT NULL,
	`published` tinyint(4) NOT NULL DEFAULT '1',
	`catid`	    int(11)    NOT NULL DEFAULT '0',
	`params`   VARCHAR(1024) NOT NULL DEFAULT '',
	`image`   VARCHAR(1024) NOT NULL DEFAULT '',
	PRIMARY KEY (`id`)
)
	ENGINE =MyISAM
	AUTO_INCREMENT =0
	DEFAULT CHARSET =utf8;

INSERT INTO `#__helloworld` (`greeting`) VALUES
('Hello World!'),
('Goodbye World!');

/admin/sql/updates/mysql/0.0.17.sql

ALTER TABLE `#__helloworld` ADD `image` VARCHAR(1024) NOT NULL DEFAULT '';

Contributors

• Robbie Jackson

Prev: Adding a front-end form

Next: Using the language filter facility