Friday, September 21, 2012

How to create professional forms with Joomla


Joomla logo
Joomla logo (Photo credit: Wikipedia)






Joomla is a popular content management system (CMS) that adds user-friendly forms and components to web applications without the programmer's streak. It is suited to the plugin friendly open source technology like Php and Wordpress. Today in this post we will have an overview of how easy it is to create forms in Joomla. 

There are three main components of a web application from the MVC Architecture perspective. The View that is the Graphical User Interface, which we will be looking at how to create. The Model is the Data Model that saves the information into database, MySql in our case. Controller is the necessary scripts that Joomla and any other CMS platform allows to process the data from input and output it as desired. 

Getting started on Joomla

Before giving a technical demo on forms on Joomla, this is section on how to get started installing Joomla for the novices.
First you install a copy of Joomla on your local server. You can set up a server on your desktop. Call it localhost as it always is localhost. XAMPP is a good server to get you started. Installation of XAMPP is explained in detail on http://ahsannabi.com on Zen Cart Installation

1. Firstly install XAMPP or other Windows or Linux based Web Server.  I have used XAMPP for Windows based PHPMyadmin and Apache which are included in the same Web Server Pack.
2. Extract the compressed archive and save the folder in the htdocs folder of XAMP or your own Web Server’s webroot folder. Rename the folder to something shorter and simpler with the name Joomla. Usually the name is suffixed by version number. For example, for Joomla 1.6 the folder name is Joomla16.
3. Download files for Joomla! from the main Joomla! site http://www.joomla.org . Install the files in correct folder , in our case C:\xampp\htdocs\joomla16 . You install by just extracting the zipped files downloaded into the specified folder of web server. The extraction wizard prompts for where you want files to be located. Here you specify it.
Here are some documentary details getting started on Joomla! from their official website http://docs.joomla.org/Use_Joomla!_on_your_own_computer
     
4. Create database Joomla16 using PHPMYADMIN
5. Open the Joomla! site in your browser. In our case the address is 
http://localhost/joomla16
because htdocs contains the folder joomla16 that is accessed by the web server.

6. Now on the browser the Joomla! Installation screen displays. Here, Select language, Look into the Pre-installation check and Press Next to continue.
7. Configure the database as shown below


The database configuration screen illustrates the layout of the display and shows the answers for the database configuration here. It also illustrates that there is a fair amount of on-screen help.

This sets up and configures the database, where all the content for the site is stored.
8. Skip the FTP configuration. Press Next
9. Give Site name, your email and the password to use the admin of the site, and get sample data.

Professional Forms Tutorial

Bearbeitung von Benutzern
Bearbeitung von Benutzern (Photo credit: Wikipedia)

We refer to this tutorial for help https://vimeo.com/5585401 . 

 Joomla CMS shows us tabs for forms and scripts. On the forms menu, you can create a form page. On each form page you create untitled elements, give them title to suit meaning of functionality. Add sections and multi-part forms with paginations. Edit labels, add text boxes, password fields, number and calendar fields, image fields, file upload sections, and submit buttons to submit form data to special scripting module. 
The independence and flexibility with the forms is that you can drag drop one form part into another from the form component tree and see the resulting form object composed of sub-objects through preview. This is what is special of Joomla. You can assign sub-tasks to your teams and integration is just drag drop form elements in the form component tree.

The steps for creating professional form in Joomla as in the demo above include:
1. On manage forms go to quick mode.
2. Click on quick form button
3. Add Title and Description of the form, name is automatically added to the form.
4. Check the box of "last page is thank you page" so that after submitting the form you get a thank you page which you can always customize.
5. Check the box of mail notification page, so that on submitting the mail notification is made.
6. Add a number of mail recipients.
7. Add the submit button and pagination of the form is multipart or cannot be squeezed to a single page.
8. Advanced features of form are also on the next tab next to Properties tab. 

There are many themes of aesthetic value to consider when designing web forms with Joomla. 


No comments:

Post a Comment