You are on page 1of 54

perForms User Guide 28-Mar-2007

PerForms 2.3 User Guide

PerForms
“Power In Simplicity”

Print-Date: Saturday, 31 March 2007

Pages: 54

Author: David Walters

Visit the perForms web site: http//:performs.jext.info


Download the latest nightly build: http://performs.jext.info/nightly

Forums, releases and support: http://forge.joomla.org/sf/projects/performs

Distributed under Gnu Public Licence Author: David Walters Page 1 of 54


perForms User Guide 28-Mar-2007

PerForms.

Since I joined the perForms project, I have received many emails requesting file upload. Because
perForms had a few other features that needed attention, the file upload functionality was left on
the list, under “Repair Existing Features”.

Recently, after four months and more than 170 revisions, perForms achieved stability. There are
many more features planned, but they have been left on the “Tasks” list deliberately, until we
have a shiny, stable release that incorporates nearly all the perForms features hundreds of
perForms users have been asking for for the last four months at least, some for longer.

Menu Items can now be “Component” type, which streamlines the process of creating and
publishing perForms forms.

PerForms is now fully localizable, and currently has langauge packs for dutch, finnish, french,
german, hungarian, spanish, and english.

PerForms 2.3 has “auto” fields, which carry user information to the emailer, allowing logged-in
users to set their details into the “reply-to” field, or choose which users will receive the mail that
is generated.

PerForms 2.3 also handles errors in a much friendlier way, showing helpful messages along with
links to forum topics where the issue is discussed, and solved.

PerForms 2.3 is also ready for accessibility, creating HTML form elements that are labelled with
<label> tags, assigned accesskeys and given a tab order that allows the form to be
navigated by users who don't use a mouse for that sort of thing.

And now, perForms 2.3 has file upload. Files are uploaded to the performs administrator directory
by defaut, and can be stored in a specified directory by setting the upload folder property on the
new “File” Item.

Anyone wishing to know the future of perForms, can consult the “Tasks” list at joomlaForge, by
clicking here.

I originally joined the perForms project thinking I would be whipping up a bit of a user guide, but
I soon realised that the user guide I wanted to write was for a perForms that was yet to be.

Thanks must go to Jonah Braun, and Ilhami Kilic – who knew what must be done, and made an
inspiring start.

Thanks also, to the hundreds of people who contributed suggestions, reported bugs or found
“gotchas” in the way perForms works, to the thousands of people who have downloaded and
installed perForms, and the many more who use the sites of those above, powered, in part, by
perForms.

_david

Distributed under Gnu Public Licence Author: David Walters Page 2 of 54


perForms User Guide 28-Mar-2007

Installing perForms.
To Install perForms, use the Joomla! Administrator:

Illustration 1: The Joomla! Administrator Home with "Installers" menu open and
highlighting the "Components" link.

Navigate to the “Installers->Components” admin page.

Illustration 2: Joomla!1.0.12 displays a warning about installing 3rd Party extensions, and perForms has
regular security audits.

Cilck “Browse...” to select the component archive (*a zip file) containing the perForms
component. These can be acquired from http://forge.joomla.org/sf/projects/performs.

Illustration 3: Snapshot of a File Upload Dialog from Firefox, ready to select


"com_performs.zip".

Distributed under Gnu Public Licence Author: David Walters Page 3 of 54


perForms User Guide 28-Mar-2007

Click “Open” to choose the file, which dismisses the “File Upload” dialog, then click “Upload File
and Install”

Illustration 4: The file upload control, with "Upload File and


Install" highlighted.

The perForms 2.3 installer has been completely rebuilt, using TDD and phpUnit. The installer is
now its own class, called an “Installer” (funnily enough) which is an adaptive installer. This
means that unlike previous versions of perForms, all versions with the adaptive installer will
seamlessly upgrade from previous versions, detecting which database tables have changed, and
altering table definitions if necessary.

While we won't tell you to stop making a backup before upgrading perForms, we can tell you that
you won't need it – to upgrade perForms beyond 2.3 you simply uninstall your existing perForms
(which will not destroy any database data) and upload and install the new version (we'll get to
that in a few pages'
time).

So, after clicking


“Upload File and
Install” the
perForms installer
will welcome you.

Illustration 5: The perForms clean install welcome screen.

Distributed under Gnu Public Licence Author: David Walters Page 4 of 54


perForms User Guide 28-Mar-2007

Illustration 6: After installation, the perForms menu item (highlighted) appears in the
"Components" Menu.

After installing, you can click the “Continue” link, or go straight to the perForms admin page by
using the newly created admin menu item (automatically created during installation).

Illustration 7: The "Continue" Link

Illustration 8: The perForms admin page, after a fresh installation.

Distributed under Gnu Public Licence Author: David Walters Page 5 of 54


perForms User Guide 28-Mar-2007

Upgrading perForms is greatly simplified as of 2.3, a two step process.

1. Uninstall perForms
As an example, I'm uninstalling a version of 2.1.2.
In “Installers->Components”:

Illustration 10: The "com_installer" Toolbar, with the "Uninstall" button highlighted.

Illustration 9: The "Installed Components" List on the "Installers->Components" Page.

Select perForms by clicking the radio on the left of the name to “check” the perForms
component radio (in the illustration above, the perForms component radio is checked).

Click the “Uninstall” button on the “com_installer” Toolbar:

Joomla will ask you if you are sure, click “Ok” to perform the uninstall.

Illustration 11: A javascript alert from joomla, to


confirm uninstall.

A successful uninstall is indicated by a red “Success” message under the Toolbar.

Illustration 12: The "com_installer" success message.

Distributed under Gnu Public Licence Author: David Walters Page 6 of 54


perForms User Guide 28-Mar-2007

2. Install perForms
Install perForms as if it were a clean installation.

PerForms will display the upgrade welcome message:

Distributed under Gnu Public Licence Author: David Walters Page 7 of 54


perForms User Guide 28-Mar-2007

3. Debug Mode (for developers)

The perForms installer class detects and alters table definitions as required, so it doesn't
matter if you're upgrading from 1.1.1 or 2.3.0rc2 – in the example below, the joomla is
running in debug mode, which causes the perForms installer to print a copy of the SQL
that it uses to upgrade the perForms database tables.

Illustration 13: In "Debug" mode, perForms prints a tab for the welcome message, and a tab
for the SQL statement used to upgrade the perForms database tables.

I was tempted to build an installer that interrogated the database tables column by column,
checked the schema info and only printed a change request if it needed to. Then it occurred to
me, that mySql would be doing that anyway, and it would be doing it ni hard-core performance-
tuned c++ code, which will just be faster than any kind of optimized php code I could come up
with, so I went with the “brute force” approach (well, verbose at any rate).

Illustration 14: The SQL used by the perForms installer to upgrade the perForms data tables is
displayed in a text area in the "SQL Statement" Tab.

MySql interprets the CHANGE directive to mean “Change if needed”. Excellent. That almost
makes up for the BOOL fiasco ;)

Distributed under Gnu Public Licence Author: David Walters Page 8 of 54


perForms User Guide 28-Mar-2007

Issues with upgrading.

As of perForms 2.3, minor changes have been made to the database handling of perForms items,
and treatment of item properties. The major changes are under the hood, and not in the way
items are displayed, except for two crucial things:

1 perForms 2.3 displays form items sorted ASCENDING, which means those who are
upgrading from a previous version of perForms will see their form items in reverse order:

Illustration 15: Form items created using perForms version 2.1.2 are displayed in reverse order in
perForms 2.3.

As this also affects the presentation of perForms Forms through the Joomla Front End, re-
ordering the form items quickly and easily is a necessary feature, and we have added a button
that will reverse the order of form items with one click.

Illustration 16:
"Reverse Order" Icon

Illustration 17: The "Reverse Order" button.

Illustration 18: A Snapshot of the "Form Items" List, with the ordering "reversed".

Distributed under Gnu Public Licence Author: David Walters Page 9 of 54


perForms User Guide 28-Mar-2007

2 perForms now uses “Size 1” for width and “Size 2” for height on “TextArea” Items.

Consider a test form we created using 2.1.2, containing a TextArea of the default size (40 x 5).
After upgrading, the form will display in the front end like this:

Illustration 19: A TextArea Item created with earlier versions of perForms will
display incorrectly using perForms 2.3.

Given that there are likely many, many TextArea Items created with earlier versions of perForms,
it was essential that we make it easy to fix all the TextArea Items on a given form.

Illustration 20: The


"Swap Size 1 and
Illustration 21: "Form Items" List, showing a "Text" Size 2" icon.
Item with Size1 (width) of 20, and a "TextArea" Item
with a Size1 (width) of 5 and Size2 (height) of 40.

Distributed under Gnu Public Licence Author: David Walters Page 10 of 54


perForms User Guide 28-Mar-2007

The “Swap Size1 and Size 2” button only works on TextArea Items, and can swap the Size 1 and
Size 2 properties on all the TextArea Items at once, easing the transition from older perForms
installations.

Illustration 22: The "Form Items" List showing a "Text" item with Size1 of 20, and "TextArea" Item with
width 40 and height 5, after clicking the "Swap Size 1 and Size 2" button.

Illustration 23: The perForms form component, displaying the "testtwo" TextArea Item with
correct aspect, 40 x 5.

Distributed under Gnu Public Licence Author: David Walters Page 11 of 54


perForms User Guide 28-Mar-2007

PerForms and Forms.

Forms are created and maintained using the perForms admin pages. To access the perForms
Admin Pages, click the perForms menu item, located in the “Components” menu in Joomla!
Administrator:

Illustration 24: The Joomla! Administrator Menu, showing the


"Components" menu and perForms admin menu item (highlighted).

As the list is empty, we must make a new form. This is done by clicking the “New” button on the
perForms Admin Toolbar.

Illustration 25: The perForms Admin Page, showing the Toolbar, with "New" button highlighted, and
displaying the "Forms" List, with 0 forms.

Distributed under Gnu Public Licence Author: David Walters Page 12 of 54


perForms User Guide 28-Mar-2007

When you click the “New” button, you are transferred to the perForms “Form Admin” page.

Illustration 26: The "Form Admin" Toolbar.

The “Form Admin” page is divided (under the toolbar) into two panes:

Illustration 27: Basic Form Properties. Illustration 28: Extended Form Properties.

First we need to give our perForms Form a Title, and add some intro text.

The default content editor is provided by perForms, so editing the content of the intro and outtro
text is the same as editing other content in Joomla.

Distributed under Gnu Public Licence Author: David Walters Page 13 of 54


perForms User Guide 28-Mar-2007

The default text editor provided with Joomla is fine for many things, but after creating this form
intro using the default editor, I decided I wanted to install the beefy optional editor (but I didn't
do it).

With these two Form Properties set, we can click


the “Save” button and review what we've done.
Illustration 29: The "Form Admin" Toolbar
showing the "Save" button highlighted.

Illustration 30: The form list now displays one form, called "A New perForms Form".

It makes sense to set up a menu item for viewing this form through the front end.

In Joomla! Control Panel:

Click “Menu Manager”.

Distributed under Gnu Public Licence Author: David Walters Page 14 of 54


perForms User Guide 28-Mar-2007

A list of Joomla! Menus is presented.

By clicking the “Menu Items” button for “mainmenu” (top of the list), we access the menu items
list for “mainmenu”:

To add a new menu item, click the “New” button, on the Toolbar.

You should see this:

You can make perForms display through the front end in two main ways, adding a “Link – URL”
menu item, or adding a “Link – Component” menu item.

Distributed under Gnu Public Licence Author: David Walters Page 15 of 54


perForms User Guide 28-Mar-2007

Creating a “Link – URL” menu item:

Select the “Link – Url” item from the “New Menu Item”
form and press “Next”:

Give the menu item a


name:

The link property for a given form is displayed on the forms list, which is on the perForms admin
page:

We copy this link and paste it into the URL property of the menu item:

And click “Save”

A new menu item should appear on the main


menu, check by loading up the front page:

Distributed under Gnu Public Licence Author: David Walters Page 16 of 54


perForms User Guide 28-Mar-2007

And when you click the menu item, you should see something like this (if you are using a fresh
Joomla 1.0.12 installation):

To create a “Component” type menuitem, we must skip back to the Joomla! Administrator and
create a menu item of type “Link – Component”:

Give the menu item a name, and select “perForms” from the component list:

Click “Apply” then edit the item parameters:

Distributed under Gnu Public Licence Author: David Walters Page 17 of 54


perForms User Guide 28-Mar-2007

Assuming our form item is number 1, we would input the following into the “Parameters” field:

Click “Save” or “Apply” and skip back to the Joomla! Front End, and click “Home” (or refresh the
page you're on):

By clicking the “Test Form Component” menu item, we are activating a joomla component, which
is displayed differently from a “Link – Url”. The primary difference is the friendlier Url, because
the form ID is passed through Joomla! Internal machanisms. In the standard 1.0.12 installation,
the form is displayed in this context when called from a “Component” menu item:

Beware of using this method to create menu items; when you upgrade perForms it gets a new
component ID, which causes problems with “Component” menu items. Joomla doesn't seem to
like moving these menu items around either, so we suggest the “Link – Url” method.

Distributed under Gnu Public Licence Author: David Walters Page 18 of 54


perForms User Guide 28-Mar-2007

Without any items, pressing the submit button doesn't do much:

We need to add an outtro (“Thanks Text”), and create some new form Items.

Illustration 31: Jumping back to the "Form Admin" page, I jotted in some outtro text before
moving on. After pressing "Save" Joomla presented the perForms Admin Page, with its form
List.

Illustration 32: The "Edit Items" link on the perForms Admin


Page (highlighted) takes you to the "Items Admin" page.

Distributed under Gnu Public Licence Author: David Walters Page 19 of 54


perForms User Guide 28-Mar-2007

At this point, after we have clicked the “Edit Items” link for our new form, we see the “Items”
Admin Page:

Click the “New Item” button on the Toolbar:

We get this:

The default Item type is “Text”, and perForms automatically fills in the caption property, but you
must fill in a name. The name is used to track this item through the HTML form and email
phases, but is not presented to the user. The name should be a unique identifier for each item, as
items with the same name will not process properly!

The default width for a “Text” item is 20, which means 20 chars (or columns).

Distributed under Gnu Public Licence Author: David Walters Page 20 of 54


perForms User Guide 28-Mar-2007

I'm going to call this item “Name” and add some help text so users can understand to type their
name in the box:

And, save it.

It occurs to me that the statement in the intro text is a good idea for a poll, so I'm going to set
up a guage for monitoring the depth of feeling people have toward emoticons ;) .

Illustration 33: Choose type "Radio" from the


Type dropdown.

In order to set up a radio array, we need to add a set of potential values for the result data.

Distributed under Gnu Public Licence Author: David Walters Page 21 of 54


perForms User Guide 28-Mar-2007

Because radio arrays are exclusive, only one value wil ever be reported. This is different from
checkbox arrays, and select (listbox, combobox) arrays. The “Array Items” (radio, checkbox and
select) are only slightly different from “Scalar Items” (like text, date, hidden) but use all the same
basic properties.

First, type in a name for the value you wish to add to the list, then click “Insert”. When you do,
the cursor jumps back into the “Value” box, so you can enter a lot of choices quickly by pressing
the tab key then the enter key after entering a value.

If you want one of the values to be a default value, the initial state of the radio, for example, click
on the list value you want, then click “Set as Selected” which will set the Item (be it radio,
checkbox or select) to itinially have that value when the form is presented.

Now that we have some items, we'll take a look at the form through the front end.

Distributed under Gnu Public Licence Author: David Walters Page 22 of 54


perForms User Guide 28-Mar-2007

This is the default template, as you can see, a unique-fixer-upper, bargain-basement default
template. For the sake of this tutorial, lets set the template to “Tabular”:

Tabular handles radio buttons by forcefully separating the caption from the input control (using
<table> tags, which the basic template does not do), so our form ends up looking like this:

Distributed under Gnu Public Licence Author: David Walters Page 23 of 54


perForms User Guide 28-Mar-2007

Now it displays a little nicer, but nothing will happen if we click submit.

If we skip to the “Form Admin” page for our new form, we can set it up to send out email when
the form is submitted.

Setting “Email Form” and “Send copy to admin” to “Yes” will enable us to have a copy of the data
captured by this form sent to the site admin every time the submit button is clicked.

The site admin will receive an email that looks like this:

Distributed under Gnu Public Licence Author: David Walters Page 24 of 54


perForms User Guide 28-Mar-2007

This is good is you want notification of things,


but you can analyse data better when it goes
straight into a database, so to hook up a
perForms form to the database, we skip back to
the perForms administrator:
First, check the checkbox between the form id
and form name, and click the “Data” button.

You will see a page containing this message


(from the friendly perForms “Why isn't it working?” team):

To bind the form to a database


table, click the “Binding” button
and you will see:

Distributed under Gnu Public Licence Author: David Walters Page 25 of 54


perForms User Guide 28-Mar-2007

You can alter the name if that suits, I'm going to leave it as is.
After saving the form, and clicking the form name in the “Forms” list,
a summary report is available for all data entered into the form, by
clicking the “Data” button as before.

Of course, since I haven't submitted a form, there are no records in the data table, but you get
the idea.

It is possible to download a file that can be opened with a spreadsheet program, by clicking the
“Export” button.

Once a form is bound to a database table, its items are locked, and cannot be edited. If you
unbind the data table, captured data will be removed, so remember to back up your data by
exporting or using phpMyAdmin (or something similar) to store your captured data.

Since we can't edit the items any more, let's go back to the form itself.

Distributed under Gnu Public Licence Author: David Walters Page 26 of 54


perForms User Guide 28-Mar-2007

An image can be added to the form header, (the area that contains the intro text), using the
“Image” property:

And adjusting the float style to right,

Adds a nice touch to our form:

The Submit button is nice, but sometimes it is necessary to style the submit button to fit in with
another theme:

Distributed under Gnu Public Licence Author: David Walters Page 27 of 54


perForms User Guide 28-Mar-2007

Illustration 34: The Form Options pane, showing the "Buttons" Tab highlighted.

Clicking on the “Buttons” Tab reveals a number of options for presenting form buttons, Submit,
Reset, Printer Friendly, and Download PDF. The “built-in” form buttons, “Submit” and “Reset” can
be replaced with images, and resized, using the Administrator.

So if, for example, you wish to show the


submit and reset buttons as stylish joomla
icons (we love the joomla icons – they make
the friendly error messages very friendly!)
and, in our example Voigt-Kampff test, we
won't need to print the example form, or
download it as a pdf, so those properties can
be switched off also.

Illustration 36: The standard


Submit and Reset buttons
displayed by a perForms Form.

Save the form, and skip back to the front end


to see what it looks like:

Illustration 35: The “Buttons” Tab, showing


properties for presentation of form buttons.

Illustration 37: The "Form


Admin" Toolbar, with "Save"
button highlighted.

Distributed under Gnu Public Licence Author: David Walters Page 28 of 54


perForms User Guide 28-Mar-2007

The form buttons have been replaced with images. Adding captions to the imaged form buttons is
not something 2.3 can do, but as shown in the above illustration, alt text has been assigned to
the form buttons so they are both accessible and mouse-wavable.

And I've used the “Reverse Order” Icon again. It's called “reload_f2.png”, and lives in the
$joomla/administrator/images folder. (That folder rocks! I really love the green earth icon.)

Not all installations will see the “Download PDF” fieldset, instead seeing a friendly notification that
Html2Pdf could not be found:

Html2Pdf is included with VirtueMart,


so if you have VirtueMart installed,
perForms will find Html2Pdf in the
com_virtuemart directory. This is the
recommended version of Html2Pdf.

If you get Html2Pdf from


SourceForge be sure to place it either
in the joomla root folder, or one level
above, in what might be the
“public_html” folder – perForms looks
in those two places for a folder called
“html2fpdf-3.0.2b” - if it is living
elsewhere you might consider
making a copy and placing it under
the joomla root folder, or the
performs admin folder
($joomla/administrator/components/com_performs/html2pdf-3.0.2b).

Distributed under Gnu Public Licence Author: David Walters Page 29 of 54


perForms User Guide 28-Mar-2007

Image Upload with perForms.

First we start with a sample form, that we created earlier:

Illustration 38: A Standard 1.0.12 Installation

Illustration 39: Notice the menu item


for "Test Form"

Which gives us this:

Illustration 40: The “Testing Form” form as viewed from the "Front End"

We edit the form in the "administrator" section of our joomla:

Distributed under Gnu Public Licence Author: David Walters Page 30 of 54


perForms User Guide 28-Mar-2007

Illustration 41: The perForms Admin Menu Item

The perForms Administrator page is accessible from the “Components” menu, in Joomla!
Administator.

Illustration 42: The perForms Administration Page

We can edit the form by clicking the form's name on the “Forms List” on the perForms Admin
page, or edit items by clicking the “Edit Items” link for a given form on the Forms List.

Distributed under Gnu Public Licence Author: David Walters Page 31 of 54


perForms User Guide 28-Mar-2007

There are two ways to edit the form's items.

1. Check its checkbox on the list:

Illustration 43: The Testing Form


Checkbox

and click “Items” on the toolbar:

Illustration 44: Admin Toolbar with "Items" highlighted.

which gives us this:

Illustration 45: The items list.

Or, we can

2. Click "Edit Items" on the test form's row in the top admin list:

Illustration 46: Back to the perForms Admin Page

Distributed under Gnu Public Licence Author: David Walters Page 32 of 54


perForms User Guide 28-Mar-2007

Illustration 47: The "Edit Items" link.

Which gives us this:

Illustration 48: "Items" list for "Testing Form"

Once we are viewing the list of items belonging to the test form, we will want to create a "New
Item" :

Illustration 49: Items Toolbar with "New Item" highlighted.

So we get this:

Illustration 50: Item edit page.

Distributed under Gnu Public Licence Author: David Walters Page 33 of 54


perForms User Guide 28-Mar-2007

We choose "File" from the "Type" dropdown:

Illustration 51: "Type"


Dropdown.

Doing this activates the properties fields in the "Display" tab.


So what looked like this:

Illustration 52: Display Tab for a "Text" Item.

Now looks like this:

Illustration 53: Display Tab for a "File" Item.

*Note:
1. "Size 1" refers to the width of the upload textbox (see below)
2. "Size 2" refers to the maximum file size for the item, in bytes - this value is set very small
by design, so if you want to be able to upload big files, remember to change this number!

3. There is helpful info available by hovering over the info icons:

Distributed under Gnu Public Licence Author: David Walters Page 34 of 54


perForms User Guide 28-Mar-2007

Illustration 54: "Size 1" Info Icon Help Text.

Illustration 55: "Size 2" Info Icon Help Text.

Now we should change our caption so it has a memorable name:

Illustration 56: Setting the "Caption" property.

We should set the AccKey too, for accessibility:

Illustration 57: Setting the "AccKey" property.

Finally, we need to name the item

Illustration 58: Setting the "Name" property.

And save the item.

Illustration 59: The "Edit Item" Toolbar


with “Save” button highlighted..

Distributed under Gnu Public Licence Author: David Walters Page 35 of 54


perForms User Guide 28-Mar-2007

Which takes us to this:

Illustration 60: The updated "Form Items" list showing “File Upload” item.

We can preview the form:

Illustration 61: The "Form Items" Toolbar with "Preview"


highlighted.

Which gives us this popup:

Illustration 62: The "Testing Form" Preview

*note that the submit button does not work from the “Preview” popup.

Distributed under Gnu Public Licence Author: David Walters Page 36 of 54


perForms User Guide 28-Mar-2007

We can check if the filename is displayed helpfully on the upload textbox:

Illustration 63: HTML File Upload Control, with caption, textbox


and "Browse" button.

Clicking "Browse", we get an "Open File" dialog:

Illustration 64: The


"Browse" button.

Illustration 65: A File-Open Dialog from Firefox on Os X.

Select the file and click "Open"

Illustration 66: Select a file and click "Open".

We can see the textbox isn't really wide enough to show the user their filename:

Illustration 67: The default size of 20 isn't wide enough to


show long local paths.

Distributed under Gnu Public Licence Author: David Walters Page 37 of 54


perForms User Guide 28-Mar-2007

So click "Close" to close the preview popup:

Illustration 68: The "Close" button at the bottom of the preview page.
Edit the form item:

Illustration 69: The "Edit Item" link for the "File Upload" Item.

Change the width to 45:


And “Save”.

Illustration 70: Changing the "Size 1" property for


the "fileupload" item.

Illustration 71: "Edit Item" Toolbar with "Save"


button highlighted.
Preview the form again:

Illustration 72: "Form Items" page with "Preview" button highlighted.

This time after we click “Browse” and select our file, the name is displayed more clearly:

Illustration 73: With a width of 45 the "File" item displays local paths better.

Distributed under Gnu Public Licence Author: David Walters Page 38 of 54


perForms User Guide 28-Mar-2007

And it sizes well with the rest of our joomla:

Illustration 74: The standard 1.0.12 joomla displaying "Testing Form"

So, a user can choose a file to upload, through the “front end”:

Illustration 75: A file is selected, ready to Submit.

And click “Submit” to upload the file.

Distributed under Gnu Public Licence Author: David Walters Page 39 of 54


perForms User Guide 28-Mar-2007

Illustration 76: Error message displayed because the file was too large.

Whoops~! ;) Better use a smaller image under the 16k limit:

Illustration 77: Another file selected, ready to Submit (Upload).

perForms was happier about that smaller file,

Illustration 78: Success message when file is successfully uploaded and stored.

Now the media folder (at $joomla/media/) contains a new subfolder, called “Uploads” - this folder
was automatically created by perForms:

Distributed under Gnu Public Licence Author: David Walters Page 40 of 54


perForms User Guide 28-Mar-2007

Illustration 79: Snapshot of the com_performs folder with "uploads" folder.

Inside is our file: note the original name is prepended with the date and time, and username (or
“Unknown” if not logged in).

Illustration 80: Snapshot of the "uploads" folder


containing the newly stored file.

If the user is logged in, the filename will contain their name:

Illustration 81: Snapshot of the "uploads" folder with newly


stored file, from a logged-in user.

If the default upload path does not suit, then it can be changed.

Distributed under Gnu Public Licence Author: David Walters Page 41 of 54


perForms User Guide 28-Mar-2007

Illustration 82: The "Edit Item" page for the "File Upload" Item.

On the “Values” Tab:

Illustration 83: "Values" Tab showing "Value" property Info Icon Help Text.

Enter a new upload path into the “Value” property.

Illustration 84: The new upload path entered into the "Value"
property. Note the trailing separator (/).

And “Save”.

Illustration 85: The "Save"


button.

Distributed under Gnu Public Licence Author: David Walters Page 42 of 54


perForms User Guide 28-Mar-2007

Illustration 86: A Snapshot of the alternative uploads folder.

When the user uploads a file, that file will be stored in the directory specified.

*Note: If the directory does not exist, perForms will try to create it. This will fail if the permissions
on the parent folder are not read/write for the php user (sometimes this user is www, nobody, or
the hosting account name).

Illustration 87: Example of an upload path that is under the root joomla path. The root joomla path
here is /Users/developaid/Sites/j12.

A special feature of perForms is its handling of uploaded files in the form email. If the upload
directory is under the joomla root folder, an HTML <a> tag will be inserted into the email linking
to the uploaded file.

Illustration 88: Snapshot of an email message received from perForms, showing the link to a recently
uploaded file.

Distributed under Gnu Public Licence Author: David Walters Page 43 of 54


perForms User Guide 28-Mar-2007

Another special feature, which should be used with care, is the “Show Uploaded Image” property.
Any “File” Item can be switched from an <A> to an <IMG> when printing the form results to
HTML for emailing. Instead of “directly” attaching the uploaded file to an email, it makes more
sense from a security standpoint to include an <IMG> tag in the form HTML rather than try to
embed a base64 encoded image in the email message. For example, what if the image is more
than 2mb in size, and your mail server won't transport stuff that is so big.

Also, using this method it is easy to disable automatic downloading of images in mail, if that suits.
Finally, email isn't very secure. If the images are being stored at a site using SSL it is advisable to
include an <IMG> tag rather than embedding a file, because the file is therefore never “in plain
sight” when in transport.

Illustration 89: The "Format" Tab, showing the "Show Uploaded Image" Info Icon Help Text.

An email like this is sent:

Illustration 90: Snapshot of an email displaying the <IMG> tag


assigned by the "Show Uploaded Image" property.

Distributed under Gnu Public Licence Author: David Walters Page 44 of 54


perForms User Guide 28-Mar-2007

PerForms and SecurityImages

Illustration 91: Walter Cedric's Home Page banner


is cool.

Securing your perForms Forms against spam attacks,


or other script-kiddie annoyances, is something that
may not go well on your first try. It did not go well
for me, but here's a guide for using
com_securityimages 4.3 with perForms 2.3.

First, we need to download the com_securityimages


installer zip from www.waltercedric.com.

Com_SecurityImages is
installed into the joomla,
just as the perForms
component is installed –
through the Joomla!
Administrator Page
“Installers->Components”.
Illustration 92: Downloading the 4.1.2 release.

Illustration 93: Installed just like any other component.

Distributed under Gnu Public Licence Author: David Walters Page 45 of 54


perForms User Guide 28-Mar-2007

If you run the installation with E_WARN in your error_reporting bits then you may see a whole
bunch of warnings about undefined constants. I was tempted to clean out the warnings but I
settled on “no warnings in production” | “php assumes the value anyway”. I went half way and
changed my php.ini to error_reporting = E_ALL & ~E_NOTICE and restarted apache to get a
clean screenshot.

With a choice of CAPTCHA engines, a plug in interface


and all sort of goodies.

It seems reasonable to add CAPTCHA to our Voigt-Kampff


test, to ensure the replicants don't try to flood votes in an
attempt to obscure themselves statistically.

The publishing page has changed, sinced the install.

So, we switch “Use securityimages” to “Yes” and jot down some messages:

Distributed under Gnu Public Licence Author: David Walters Page 46 of 54


perForms User Guide 28-Mar-2007

Checking the form in the Front End:

This is not the start I was hoping for, and clicking the red text just takes me to the walter cedric
home page. Maybe hncaptcha isn't working on my machine. So I'll change the captcha engine in
the com_securityimages admin page.

Ok, core isn't working either: try freecap 1.4:

Distributed under Gnu Public Licence Author: David Walters Page 47 of 54


perForms User Guide 28-Mar-2007

No joy, now there's not even any red text! Run a quick check of the com_securityimages “Edit
General Settings” page:

The component is now switched off globally! Better reset that, and try again:

Ok, bit of a fiasco. But at least captcha images are being presented. What if I type in the wrong
text?

Distributed under Gnu Public Licence Author: David Walters Page 48 of 54


perForms User Guide 28-Mar-2007

Com_SecurityImages has checked our try at proving we are human, and rejected it. The “Security
Image Error Message” has been displayed.

Good, now what if I enter the text correctly?


First, I'll request a new image, I can't tell if that text says “rhino” or “rhing” (and what is a “rhing”
anyway?)

It worked. I just received an email, and we see outtro text.

I have noticed that the freecap engine also fails to produce an image from time to time, which
means that red text. I think we could have a poke around inside
$joomla/administrator/components/com_securityimages/insertImage.php (atabout line 131) and
clear out the unwanted <a> tags, and put in some new alt text.

Another thing we'll need to do is alter the “watermark” text, which at the moment says something
about www.waltercedric.com :

Distributed under Gnu Public Licence Author: David Walters Page 49 of 54


perForms User Guide 28-Mar-2007

FreeCap has some cool options, so


definitely check out the “Core Settings”
page for FreeCap.

I could only get the “White bg with grid” background property to persist after saving, so we're
looking at a vanilla, but working CAPTCHA component for our perForms forms.

Distributed under Gnu Public Licence Author: David Walters Page 50 of 54


perForms User Guide 28-Mar-2007

Mambots in perForms 2.3


PerForms Forms have basic presentation options, for example you cannot set form headers and
footers, only an “Intro Text”. For basic forms, this is enough. It allows us to quickly generate a
simple form, in a small number of steps.
The perForms Form mambot, mosPerForms, allows us to embed forms directly into content items,
which means, for example, that the same form can be used in many contexts, where different
content can surround the form, but the form itself doesn't need to change.
First, we install the mambot zip file:

You should see the success page:

Now you need to publish the mambot:

Illustration 94: The Mambot Manager, showing the mambot list, mosPerforms is unpublished when it is
first installed. Click the red "X" to publish the mambot.

Once published, the mambot can be used in Joomla! Content:

Distributed under Gnu Public Licence Author: David Walters Page 51 of 54


perForms User Guide 28-Mar-2007

In our example, I'm going to edit the front page message to embed a perForms form using the
performs mambot.

When we save the item, the content management system


replaces the {mosperforms formid=1} text with the HTML
code generated by the perForms Form (with id 1).

Distributed under Gnu Public Licence Author: David Walters Page 52 of 54


perForms User Guide 28-Mar-2007

The Form is now embedded in the content, and there is text above and below, along with the
intro text.
If you don't see the form text, you might need to click the “Read more...” link under the item's
intro text:

When the form is submitted, the mambot substitutes the “Thanks Text” into the content item.

Distributed under Gnu Public Licence Author: David Walters Page 53 of 54


perForms User Guide 28-Mar-2007

During the writing of this guide, it occurred to me that being able to embed multiple forms in a
content item might also be useful, and I tried embedding a form into the intro text of another
form, which also looks interesting, however perForms 2.3 is not written to behave as expected for
these sorts of operations.
These features are on the list of tasks to take us to 2.4.

Distributed under Gnu Public Licence Author: David Walters Page 54 of 54

You might also like