Building a Calender Application in Joomla! using Fabrik

Exclusive offer: get 50% off this eBook here
Learning Joomla! 1.5 Extension Development

Learning Joomla! 1.5 Extension Development — Save 50%

A practical tutorial for creating your first Joomla! 1.5 extensions with PHP, written and tested against the final release of Joomla! 1.5

$31.99    $16.00
by Suhreed Sarkar | February 2010 | Joomla! MySQL Content Management Open Source PHP

Joomla! has many extensions that can help develop a custom application, especially simple form-based applications. With introduction of Content Construction Kits (CCK) now it is possible to create many types of contents without knowledge of coding PHP. Besides these newly introduced Content Creation Kits, there is another application builder for Joomla! that can be used to build database applications without coding PHP. It is called Fabrik. Fabrik is Joomla! application builder that can be used for building many types of applications. In this article by Suhreed Sarkar, we will learn how to build a event calendar application for Joomla! using Fabrik.

(For more resources on Joomla!, see here.)

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.

Building a Calender Application in Joomla! using Fabrik

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.
    Building a Calender Application in Joomla! using Fabrik
  2. Click on Tables link in this screen. That shows existing tables created in Fabrik.
    Building a Calender Application in Joomla! using Fabrik
  3. In Table screen, click on New button to add a new table. That shows Table: [New] screen.
    Building a Calender Application in Joomla! using Fabrik

    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.

    Building a Calender Application in Joomla! using Fabrik

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

    Building a Calender Application in Joomla! using Fabrik

    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.

Learning Joomla! 1.5 Extension Development A practical tutorial for creating your first Joomla! 1.5 extensions with PHP, written and tested against the final release of Joomla! 1.5
Published: December 2008
eBook Price: $31.99
Book Price: $39.99
See more
Select your format and quantity:

(For more resources on Joomla!, see here.)

  1. 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.
    Building a Calender Application in Joomla! using Fabrik
  2. Now click on View Data link for Categories table. It shows you Categories table without any record.
    Building a Calender Application in Joomla! using Fabrik

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

    Building a Calender Application in Joomla! using Fabrik

    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.

    Building a Calender Application in Joomla! using Fabrik
  3. 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.
    Building a Calender Application in Joomla! using Fabrik

    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.

  4. 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.
    Building a Calender Application in Joomla! using Fabrik
  5. 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.

    Building a Calender Application in Joomla! using Fabrik

    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.

    Building a Calender Application in Joomla! using Fabrik

  6. 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.
  7. Click event_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 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.

    Building a Calender Application in Joomla! using Fabrik

  8. Click Save button to save the changes in event_name field. Click Save when asked for updating database structure.
  9. 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:

    Building a Calender Application in Joomla! using Fabrik

    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.

  10. 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.
  11. 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.
    Building a Calender Application in Joomla! using Fabrik

    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.

  12. 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

    Building a Calender Application in Joomla! using Fabrik

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

  13. 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:
    Building a Calender Application in Joomla! using Fabrik
  14. 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.

    Building a Calender Application in Joomla! using Fabrik
  15. 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.
    Building a Calender Application in Joomla! using Fabrik

    From Parameters (Basic) section, select Events in Table drop down list. Then click Save button in the tool bar.

  16. 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.

    Building a Calender Application in Joomla! using Fabrik

    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.

Joomla! 1.5 Multimedia Build media-rich Joomla! web sites by learning to embed and display Multimedia content
Published: February 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

(For more resources on Joomla!, see here.)

  1. 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.
    Building a Calender Application in Joomla! using Fabrik

    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.

  2. In Month View Options section, select Yes in Grayscaled week-ends field.
  3. 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.
    Building a Calender Application in Joomla! using Fabrik
  4. 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.
    Building a Calender Application in Joomla! using Fabrik
  5. 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.

    Building a Calender Application in Joomla! using Fabrik

  6. 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.

Building a Calender Application in Joomla! using Fabrik

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

Building a Calender Application in Joomla! using Fabrik

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.


Further resources on this subject:

About the Author :


Suhreed Sarkar

Suhreed Sarkar is an IT consultant, trainer and technical writer. He studied Marine engineering, served on board the ship for two years, and then started journey in to IT world with MCSE in Windows NT 4.0 track. Later he studied business administration and earned MBA from University of Dhaka. He has a bunch of BrainBench certifications on various topics including PHP4, Project Management, RDBMS Concepts, E-commerce, Web Server Administration, Internet Security, Training Development, Training Delivery and Evaluation, and Technical Writing.

He taught courses on system administration, web development, e-commerce and MIS. He has consulted several national and international organizations including United Nations, and helped clients building and adopting their web portals, large scale databases and management information systems. At present he is working on building a framework for education sector MIS, and promoting use of ICTs in education.

Suhreed is renowned technical author in Bengali – having a dozen of books published on subjects covering web development, LAMP, networking, and system administration. He authored Zen Cart: E-commerce Application Development, Joomla! E-commerce with Virtuemart, and Joomla! with Flash, published by Packt Publishing.

While not busy with hacking some apps, blogging on his blog (http://www.suhreedsarkar.com), reading philosophy of Bertrand Russell or management thought of Peter F Drucker – he likes to spend some special moments with his family. Suhreed lives in Dhaka, Bangladesh

Contact Suhreed Sarkar

Books From Packt

Joomla! with Flash
Joomla! with Flash

Joomla! 1.5 SEO
Joomla! 1.5 SEO

Joomla! 1.5 Development Cookbook
Joomla! 1.5 Development Cookbook

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Joomla! 1.5 Content Administration
Joomla! 1.5 Content Administration

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software