Getting ready

You need a working installation of Joomla! 1.5.x. For exercise purpose, you can install that on your local computer. The web server should have PHP5 installed. Then you need to install Fabrik component. This component is available for free from http://fabrikar.com/component/docman/cat_view/6-fabrik-20. Download the latest version of the component and install it from Extensions | Install/Uninstall screen in Joomla! administration panel. Also plan for the application you want to develop. For example, we are developing an event calender. This event calender will contain the following information:

Event Category Event Name Venue Start Date & Time End Date & Time Event Description Attached Document Created by

This is a very simple list of information we need. Based on the we will create two database tables: categories and events. The table structure is shown in the following diagram.

The above table diagrams show that categories table is linked to events table by foreign key category_id. Similarly, we have added user_id field in events table, so that we can link it to jos_users table. Whenever a user creates an event, his or her user ID will be added to this field. For creating the tables in Joomla! database, connect to that database using phpMyadmin or some other interface, and run the following SQL command:

CREATE TABLE `categories` ( `id` INTEGER AUTO_INCREMENT DEFAULT NULL , `name` VARCHAR(200) DEFAULT NULL , PRIMARY KEY (`id`) ) COMMENT 'contains categories of events'; CREATE TABLE `events` ( `id` INTEGER AUTO_INCREMENT DEFAULT NULL , `category_id` INTEGER DEFAULT NULL , `event_name` MEDIUMTEXT DEFAULT NULL , `venue` VARCHAR(100) DEFAULT NULL , `start` DATETIME DEFAULT NULL , `end` DATETIME DEFAULT NULL , `description` MEDIUMTEXT DEFAULT NULL , `attachment` VARCHAR(250) DEFAULT NULL , `user_id` INTEGER DEFAULT NULL , PRIMARY KEY (`id`) ) COMMENT 'list of events'; ALTER TABLE `events` ADD FOREIGN KEY (category_id) REFERENCES `categories` (`id`);

Successful execution of the above code block will create two tables and add a foreign key to events table linking it to categories table. With creation of these two table we are set to create our event calender application.

How to do it...
Follow the steps below:
1. From Joomla! Administration panel, click Components | Fabrik | Connections. That

shows existing database connections. By default, connection to Joomla! database is created. You can create new database connection by clicking New button and filling in the form.

2. Click on Tables link in this screen. That shows existing tables created in Fabrik.

3. In Table screen, click on New button to add a new table. That shows Table: [New] screen.

In Label field type Categories, and in Introduction field, type Event Categories. Then select Yes in Published radio box to the right side. Accept default values for other fields. Then click Access tab. That shows Access Rights.

Accept the default values in Access tab. Now click Data tab. From here you have to configure which data table you want to use.

From Connection drop down list, select site database. Then click on Link to Table drop down list and select categories table. In Order By drop down list, select name. There are some other options in this tab, but those cannot be configured until you save the table. Now click Save button to save the table.
4. You will be back to Table screen and find the categories table listed here. Still you need to

create events table. Therefore click New button again. That shows the same Table:[New] screen. In Label field type, events, and in Description field, type List of events. Then select Yes in Published radio box. From the Data tab, select site database connection, and events table in Link to Table drop down list. Then click Save button to save the table. Now you see both categories and events table in Table screen.

5. Now click on View Data link for Categories table. It shows you Categories table without

any record.

Click Add button to add a record to this table. That shows a form like the following screen shot.

Type a category name, for example, Meetings, in name field and click Save button. Now you see the Categories table screen listing the added categories.

6. Now click on Table link and click View Data link for Events table. That shows Events

table screen without any record. Click Add button on this screen to add an event. That shows a form like the following screen shot.

Note that the form shows fields for category id, venue name, event name, start and end date, description, attachment ad user id. Although it shows all the field, we don't want to display these fields in this way. We want to display list of categories in category_id field, so that users can select a category from that list instead of typing again and again. In description field, we want to use HTML formatted text with a WYSIWYG editor. The start and end field should have provision entering date as well as time. Through attachment field, we want to upload some file. At the end, user_id field should be filled in automatically based on logged in user's id. We will do these changes in the following steps.
7. Click on Elements link. That shows all form elements. To filter out elements for Events

form, select Events in Group drop down list. That shows all elements for Events form.

8. Click on category_id field link. That opens Element:[Edit] screen. In Label field, type

Category. In Element Type drop down list, select database join. Then configure other fields as shown in the following screen shot.

The above configuration will show the list of categories from categories table (selected in Table drop down list). We want to provide opportunity to users so that they can add new categories to this drop down list, while filling the form. For doing so, go to Add option in frontend section, in Element:[Edit] screen. Select Yes to all fields in this section.

9. Click Save button. That shows the message Do you wish to update the element's database

field structure?, click Save to update the database structure.

of event cannot be empty. Therefore we want to add a validation for this field. Therefore, in Element:[Edit] screen for event_name field, click Validations tab, and then click Add

button under that tab. Then select Not empty in Validation rule drop down list. Type an error message in Error message field.

11. Click Save button to save the changes in event_name field. Click Save when asked for

updating database structure. 12. From Elements screen, click on start field. In Element:[Edit] screen for this field, make sure that date is selected in Element Type drop down list. Then go further down to the following options:

Select Yes in default to current date, Allow typing in field, and Show time selector radio boxes. Then click Save button to save the settings. Do the same changes for end field.
13. Now click description field link in Elements screen. That opens Element:[edit] screen for

description element. Make sure that text area is selected in element type drop down list. Then go further down and check Yes in Use WYSIWYG Editor radio list. Click Save button to save and update the database structure.

14. Now click attachment field link in Elements screen. That shows Element:[Edit] screen

for attachment field. Select file upload in Element type drop down list. Then you see Options section. Change the section so that it looks like the following screen shot.

In this screen, we specify maximum size of upload, allowed file extensions, upload directory, and so on. We have selected Yes in Obfuscate Filename field so that uploaded file gets a new name. Accept default values for all other fields and save the settings by clicking on Save button. Also update the database structure when prompted.
15. From Elements screen, now click on user_id field link. That shows Element:[Edit]

screen. Type 'Created by' in Label field. Then select user in Element type drop down list. In Options section, select User Name in User Data drop down list. Check Yes in Update on Edit field. Also check Hid

den check box to hide this field on the add form. Then save the settings by clicking Save button.
16. Now go to Tables screen, and click View Data link for Events table. That shows Events

table details without any data. Click Add button to add new record. That shows the following form:

17. Now you see the form elements as you wanted. The category drop down list shows list of

categories in the categories table. Clicking on the plus icon to its right side of this filed, will allow you to add new category. The Event Name field is marked with red star to indicate that it's a required field. Start and End fields are now having date and time selectors. Description field shows WYSIWYG Editor. In Attachment field, now you can browse the file system and select a file to upload and attach with this event entry. Fill in this form and click Save to save the data. You see Events table with the entries listed.

18. Now click on Menus | User Menu. That shows menu items in User Menu. Click New

button to add a new menu item. That shows Menu Item: [New] screen. Click on Fabrik | Table. Then type a title of the menu item.

From Parameters (Basic) section, select Events in Table drop down list. Then click Save button in the tool bar.
19. Now preview the sites front-end. Login as a frontend user. You see the Event Calender

Data link in User Menu. Click this link, and you see the available data for event calender.

You see the list of events entered. For adding new events, click Add button on top of this table. That shows Event form from where users can provide the event details.

20. We can add a visualization to these data. Go to Joomla! Administration panel, and click

Components | Fabrik | Visualizations. That shows Visualizations screen with list of existing visualizations. Click New button on this screen. That shows Visualization:[New] screen.

In Label field type a label for this visualization. A brief description of this visualization can be given in Intro text field. Then select calender from Plugin drop down list. Select a template from Template drop down list. In Data section, select Events table in Table drop down list. Then Start Date Element and End Date Element drop down list, select start and end respectively, as these two fields in

Events table indicate start and end of the events. In Label element drop down list, select Event Name.
21. In Month View Options section, select Yes in Grayscaled week-ends field. 22. On the right side, select Yes in Published radio box. Click Save button in the tool bar.

Now you see the visualization listed in Visualizations screen.

23. Now click Menus | User Menu, and then Add button. That shows Menu Item: [New]

screen. Click Fabrik | Visualizations | Visualization link. Provide a title of the menu item, for example Event Calender. From Parameters (Basic) section, select calender in Visualization type drop down list, and Event Calender in Select instance drop down list. Then click Save button to save the menu item.

24. Now preview the site. Login to site using a frontend user account. Then you see Event

Calender link in User Menu. Click that link, and you see the calender.

25. he calender shows the events. The calender has three views: Day, Week and Month. Change one view to another by clicking the links. You can add a new event to a particular date by double-clicking on that date, or clicking on add button on the top of the calender.

There's more...
There are many other things that can be done with Fabrik. It can show three visualizations out of the box: chart, calender and Google Map. The calender we have made ca be further fine tuned. For example, we want to add a drop down list so that users can filter out the events by selecting a category from the list. For doing so, from Elements screen, double click category_id element link. That shows Element:[Edit] screen. Now click on Table Settings tab. In Filters section, select Dropdown in Filter type field. Then click Save button to save the changes.

From site's front end, view the Event Calender. It now shows a drop down list at the top of the calender.

Select a category from the list and click Go button. That shows events in that category only.

You can add many other filters and ordering to the table data. You can also apply pre-filters to table so that data is filtered prior to be presented to users. These pre-filter can be of different types. For example, you can define a pre-filter to show the items created by the logged-in user. Fabrik can add many form elements including input, check box, radio box, drop down list, WYSIWYG text area, date picker, file uploads, images, button, user, and link. A form can also be configured to send notification emails to specified users upon submission of the form. In this example application, we have created the tables first. But in Fabrik, you can start designing forms and Fabrik can create the underlying table fields for you. The good thing is that data collected though the forms developed by Fabrik can be easily exported as CSV file. You can also import data to Fabrik tables from a CSV file. It can also create RSS feed.

Summary
Fabrik is a powerful tool for developing database application from within Joomla!. You can create tables and forms with Ajax validations, database joining, and excellent form elements. You don't need to write any code for such application, whole application can be built through wizards and visual interface. This tutorial has shown an example of building an event application that can be displayed as calendar. Whole thing has been done without writing any PHP code.