Create Components in TomatoCMS

1. TomatoCMS : How to Create Component www.tomatocms.com

2. Table of Content

TomatoCMS :How to Create Module

TomatoCMS :How to Create Widget

TomatoCMS : How to Create Plug-in

TomatoCMS : How to Create Hook

3. TomatoCMS : How to Create Module 4. How to Create Module?

Refer fromhttp://docs.tomatocms.com/index.php/Develop_new_module_-_Part_1_-_Module_directory_structure

TomatoCMS support modular architecture with more than 10 built-in modules. In this series, I will help you how to create new module from scratch .

Step to create module (for v.2.0.6 to v.2.0.8)

Create Module

Module Permission

Connect Database

Improve Modules code

5. Example: Contact Module

Requirement

Create contact form : Display on web page for capture e-mail and inquiry information

Admin site: able to inquiry and view inquiry information (And also, maintenance information)

From above requirements: -

Need to make new module for maintain inquiry information in back-end

Need to create new Widget for capture inquiry information

6. 1) Create New Module : Contact

Step 1: Create Module folder

New folder is located: applicationmodules

e.g. D:phptomatocmsapplicationmodules

Step 2: Add module information

By create about.xml in config folder (under new folder)

e.g. modulescontactconfig

quot;http://schemas.tomatocms.com/dtd/module_about.dtd">contactManage contactsTomatoCMS Core [email protected] More detail:http://docs.tomatocms.com/index.php/Develop_new_module_-_Part_2_-_Create_module 8. 1) Create New Module : Contact

Step 3: Add database queries

This file also defines SQL queries for your module. For simply illustration, I assume that our contact module has only one database table named contact :

SEQ Field Name Data Type NULL Remark 1 contact_id INT(10) NOTPK & Auto-increase 2 contact_name VARCHAR(50) NOT 3 email VARCHAR(100) NOT 4 website VARCHAR(200) NOT 5 contact_text VARCHAR(1000) NOT 6 contact_date DATE NOT 9. 1) Create New Module : Contact

Let's add SQL queries including database creation queries, data initializing queries, etc to our about.xml file:

quot;http://schemas.tomatocms.com/dtd/module_about.dtd"> ... DROP TABLE IF EXISTS `###contact` CREATE TABLE `###contact` (`contact_id`int(10) unsigned NOT NULL auto_increment,`contact_name` varchar(50) NOT NULL,`email`varchar(50) NOT NULL,`website`varchar(200) default NULL,`contact_text`varchar(1000) NOT NULL,`contact_date`dateNOT NULL, PRIMARY KEY (`contact_id`) )ENGINE=InnoDB DEFAULT CHARSET=utf8; < /install> 10. 1) Create New Module : Contact

And create drop statement when uninstall module

quot;http://schemas.tomatocms.com/dtd/module_about.dtd"> ... DROP TABLE IF EXISTS `###contact`;DROP TABLE IF EXISTS ###contact;IF EXISTS (SELECT NAME FROM SYSOBJECTSWHERE NAME='###contact' AND TYPE='U')DROP TABLE ###contact; 11. 1) Create New Module : Contact

Step4: Create task list on Admins menu

Need to define activities in about.xml

quot;http://schemas.tomatocms.com/dtd/module_about.dtd"> ... 12. 1) Create New Module : Contact

Step5: Create language pack for explanation

By create language directory under module folder

Then create language file (following default languages). Mostly default is en_US

Language file format: lang..ini

e.g. lang.en_US.ini

Example of language file (lang.en_US.ini)

[about] about_contact_description = "Manage contacts" task_list_contacts = "Contacts list" 14. 1) Create New Module : Contact

Finally, need to install module by

go to SystemExtendModule

You can click Install to install module and vice versa, you can click Uninstall to uninstall a module.As I said in step 2, after clicking Install (or Uninstall ), all SQL queries defined in install (uninstall) tag from about.xml file also were already executed. But from now, you cant see the new menu in Admin menu. You need to create permission & assign resources (see next chpater) 15. 2) Module permissions

Procedure

Define routes

Define Permission

Add resources

16. 2) Module permissions

Step1: Create route files in modulesconfigroutes

Route file must in format: .ini

Note that , you should write the route name in order moduleName_controllerName_actionName, to ensure that routes are difference. In backend section, you should write route start with admin to distinguish from frontend section. 17. 2) Module permissions

Step2: How to manage access permission of users, we will create permissions.xml file to solve this issue

Note , name of resource is name of controller, and name of privilege is name of action correspond to contact.ini file. At here, we see langKey again, so at lang.en_US.ini file, we have to add following code 18. 2) Module permissions

Step3: Add resources by see in Admin menuselect SystemPrivilege

Click on Contact 19. 2) Module permissions

Click on Add for show this Menus Group

Click on + for add resources/action to system

(After Add Menu & action completely) 20. 2) Module permissions Refresh web-page or click on Dashboard, you will see new menu 21. 2) Module permissions Menu Header Task under menu Menu Setup 22. 2) Module permissions

Re-cap for Module-permission

After Add resource and menu appear. Its work Admin user-group only.

Another group need add permission to access

Try to play with new menu?

Click on Contacts List

This error is came from no code in Controller & view (refer to TomatoCMS/ZF MVC) Next step, we need to create controller & view for this resources 24. 2) Module permissions

Create controller code

Rule for coding are present in TomatoCMS in A Nutshell

Make skeleton code for controller 25. 2) Module permissions

Create view (matched with Controller)

Rule for coding are present in TomatoCMS in A Nutshell

Try to play with new menu again.

Click on Contacts List

From now, you can code module by following rule in TomatoCMS in A Nutshell 27. 3) Connect the Database

Retrieve Data

Display Data

Edit Existing Data

Delete Existing Data

28. 3) Connect the Database

Step1: Retrieve Data

Refer to TomatoCMS in A Nut shell, we need to create: -

Interface

Start from create Model

At model section, we implement most of operations with database. Assume that we have a table t_contact with its fields are: contact_id, contact_name, email, website, contact_text, contact_date.

Note: - I define pre-fix of table name as t_ in application.ini

First, create file Contact.php inside model folder with content like this:

Code inside: - This file describe properties ( or fields) of this table. You can see this class extendfrom Tomato_Core_Model_Entity , this is a already library which we was createdand ready to use. 30. 3) Connect the Database

Then, create Interface for implement methods of each DAO

Start from create folder interface under models in module

Then create new file:Contact.phpfor declare interface of DAO

Code inside: - All methodswill show/explain in next chapter 31. 3) Connect the Database

To use difference database, you must create difference folder for corresponding database as

In this sample, I will show implement code for MySQL with PDOonly. So, I will create new file:Contact.php under pdomysql Always implement method convert in DAO 32. 3) Connect the Database

Implement code for methods

getContact()search data with specified criteria

Implement code for methods

count()count record with specified criteria (for paging purpose)

Implement skeleton code for other methods

Just make its able enough to run 35. 3) Connect the Database

Step2: Display Data

At controller section, at here, controller is Index and action is list , so insert following code into list action

Explanation of Controller code

Database connection statements

Parsing submitted parameters

Get data from Database

Pass values into View

and at view , insert following code into list.phtml file

View has contained HTML/javaScript and PHP code

In this PPT file will show only code that related to PHP

Full source code: - Pls see in attachment.

Load javaScript & CSS 38. 3) Connect the Database View code (continue) Render values that pass from controller and show on HTML 39. 3) Connect the Database

After that, you need to add following parameters to lang.en_US.ini file

See a result

No result display when start up this page 41. 3) Connect the Database

Make some sample data in database and see result again

Display only 15 rows from tables (need to modify more for display correct data) 42. 4) Improve Modules code

Display with pagination

CRUD page

Advance AJAX integration

Reduce Duplicated Code (DRY/DIE principle)

43. 4) Improve Modules code

Pagination Display

Currently, our page can display but cant

Searching

Display more than 15 rows

We will start from Searching first

Improve code in View

Improve code in Controller

Improve code in View

Add javascript code for button

Because in view, weve implement AJAX for query data. We need to improve code in controller too.

Add more lines AJAX display

Explanation of new code in Controller

If user has submit query (by press filter button)

Disable view-render & layout

Get files from /index/_filter.phtml to render

Send contents to response object

Similar to code in View file 48. 4) Improve Modules code

See the result

Result is matched with your filter criteria. 49. 4) Improve Modules code

Debugging on AJAX passing parameters & response

I use FireBug (Fixfox Exentension) for see how its work

Send request to search/filter via AJAX 50. 4) Improve Modules code

See AJAX response (result of sending contents of _filter.phtml)

More improve: Add pagination (for display more than 1 page)

TomatoCMS provide Utilities Class : Tomato_Utility_PaginatorAdapter

Implement in View & Controller

Controllers code 52. 4) Improve Modules code

Add paginator in View

list.phtml

_filter.phtml

Then, see the result again

CRUD page

C : Create

R : Refer (in this case, meant to searching)

U : Update

D : Delete

I will 3 cases for make you clear in your mind: -

Update

Delete

Refer : Just show in previous slides

Update screen : How to & Procedure?

Requirements

Display new page with existing data

Captures changing detail and store back into Database.

Procedure: start from.

Define routing for update page

Create new method in Controller

Add new key for languages

Create new view for display result

Create new method in DAO

Integration with listing page

Define routing for Update page

Modify file: /config/routes/contact.ini

We use other type of routing (Regex routing) for..

Dynamic URL

RESTFul format

Add new routing for edit page 57. 4) Improve Modules code

Try to run by typing URL directly in Address bar

And we got

For error message, its mean

URL is correct (match with routing file)

Controller is existing

View cant load (sure, we didnt do it)

Create new method in controller: editAction()

Why this name?

Match with action name that defined in routing

Controller methods naming format:Action()

Code are

Note: the parameter always named contact_id because weve declare in routingfile like this 59. 4) Improve Modules code

Create new view: edit.phtml

Why this name?

Match with action name in Controller

Views naming format:.phtml

View code is similar to listing but I think its simpler than

More detail, please check in source code

Create newmethodin DAO : getById($id)

make SQL statement for get data from Database

Add new languages key in language file

Add in lang.en_US.ini

Need to add every times IF youve modify the view file

Try to run it again

Play with it and you will found: -

Contact Name is required

E-mail is required

When save changing, nothing happen!

Now, we will make its able to save change:

Modify controller code to accept changing values

Modify DAO to support update method

Improve Controller code

Then, improve DAO code in update method

Try again on browser

Now, Everything is perfect. Finally, we will integrate 2 parts (list & update)

Integrated with listing page

Its very simple, just make link for edit in view

list.phtml

_filter.phtml

Then, try it again by click on List of Contact (in edit page) or all from menu directly.

Technology

Create Components in TomatoCMS