Event Calender Using Fabrik Comp

8/2/2019 Event Calender Using Fabrik Comp

1/21

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 Fabrikcomponent. This component is available for free from

http://fabrikar.com/component/docman/cat_view/6-fabrik-20. Download the latest version of thecomponent and install it from Extensions | Install/Uninstall screen in Joomla! administrationpanel.

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 someother interface, and run the following SQL command:
http://fabrikar.com/component/docman/cat_view/6-fabrik-20http://fabrikar.com/component/docman/cat_view/6-fabrik-20


2/21

CREATE TABLE `categories` (ìd` INTEGER AUTO_INCREMENT DEFAULT NULL ,`name` VARCHAR(200) DEFAULT NULL ,PRIMARY KEY (ìd`)) COMMENT 'contains categories of events';

CREATE TABLE èvents` (ìd` INTEGER AUTO_INCREMENT DEFAULT NULL ,`category_id` INTEGER DEFAULT NULL ,èvent_name` MEDIUMTEXT DEFAULT NULL ,`venue` VARCHAR(100) DEFAULT NULL ,`start` DATETIME DEFAULT NULL ,ènd` DATETIME DEFAULT NULL ,`description` MEDIUMTEXT DEFAULT NULL ,àttachment` VARCHAR(250) DEFAULT NULL ,ùser_id` INTEGER DEFAULT NULL ,PRIMARY KEY (ìd`)) COMMENT 'list of events';

ALTER TABLE èvents` ADD FOREIGN KEY (category_id) REFERENCES

`categories` (ìd`);

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, clickComponents | 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/21

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, typeEvent Categories. Then

select Yes in Published radio box to the right side. Accept default values for other fields.

Then clickAccess tab. That shows Access Rights.


4/21

Accept the default values in Access tab. Now clickData tab. From here you have to

configure which data table you want to use.


5/21

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. NowclickSave 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 clickNew button again. That shows the same Table:[New]

screen. In Label field type, events, and in Description field, type List of events. Thenselect Yes in Published radio box. From the Data tab, select site database connection, and

events table in Link to Table drop down list. Then clickSave button to save the table.

Now you see both categories and events table in Table screen.


6/21

5. Now click on View Data link forCategories table. It shows you Categories table withoutany record.

ClickAdd 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 clickSave button. Now

you see the Categories table screen listing the added categories.


7/21

6. Now click on Table link and clickView Data link forEvents table. That shows Eventstable screen without any record. ClickAdd button on this screen to add an event. That

shows a form like the following screen shot.


8/21

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_idfield,

so that users can select a category from that list instead of typing again and again. Indescription 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 attachmentfield, 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 forEventsform, select Events in Group drop down list. That shows all elements forEvents form.


9/21

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 otherfields as shown in the following screen shot.


10/21

The above configuration will show the list of categories from categories table (selected inTable 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. ClickSave button. That shows the messageDo you wish to update the element's databasefield structure?, clickSave to update the database structure.

10.Clickevent_name field link. Then select field in Element Type drop down list. The name

of event cannot be empty. Therefore we want to add a validation for this field. Therefore,in Element:[Edit] screen forevent_name field, clickValidations tab, and then clickAdd


11/21

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

error message in Error message field.

11.ClickSave button to save the changes in event_name field. ClickSave 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 clickSave button to save the settings. Do the same changes for end field.

13.Now clickdescription field link in Elements screen. That opens Element:[edit] screen fordescription element. Make sure that text area is selected in element type drop down list.

Then go further down and checkYes in Use WYSIWYG Editor radio list. ClickSave

button to save and update the database structure.


12/21

14.Now clickattachment 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. CheckYes in Update

on Edit field. Also checkHid


13/21

den check box to hide this field on the add form. Then save the settings by clicking Savebutton.

16.Now go to Tables screen, and click View Data link forEvents table. That shows Eventstable details without any data. ClickAdd button to add new record. That shows the

following form:


14/21

17.Now you see the form elements as you wanted. The category drop down list shows list ofcategories 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 timeselectors.

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

clickSave to save the data. You see Events table with the entries listed.


15/21

18.Now click on Menus | User Menu. That shows menu items in User Menu. ClickNewbutton 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 clickSavebutton 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.


16/21

You see the list of events entered. For adding new events, clickAdd 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.


17/21

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 atemplate 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


18/21

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 clickMenus | User Menu, and then Add button. That shows Menu Item: [New]screen. ClickFabrik | 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 clickSave 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.


19/21

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 ofthe 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 acategory from the list. For doing so, from Elements screen, double clickcategory_id element link.

That shows Element:[Edit] screen. Now click on Table Settings tab. In Filters section, select

Dropdown in Filter type field. Then clickSave button to save the changes.


20/21

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 clickGo button. That shows events in that category only.


21/21

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 beconfigured 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 designingforms 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 andvisual 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.

Event Calender Using Fabrik Comp

Documents

Transcript of Event Calender Using Fabrik Comp