Professional Documents
Culture Documents
PerForms
“Power In Simplicity”
Pages: 54
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
Installing perForms.
To Install perForms, use the Joomla! Administrator:
Illustration 1: The Joomla! Administrator Home with "Installers" menu open and
highlighting the "Components" link.
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.
Click “Open” to choose the file, which dismisses the “File Upload” dialog, then click “Upload File
and Install”
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).
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).
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.
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).
Joomla will ask you if you are sure, click “Ok” to perform the uninstall.
2. Install perForms
Install perForms as if it were a clean installation.
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 ;)
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 18: A Snapshot of the "Form Items" List, with the ordering "reversed".
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.
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.
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:
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.
When you click the “New” button, you are transferred to the perForms “Form Admin” page.
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.
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).
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.
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 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.
Select the “Link – Url” item from the “New Menu Item”
form and press “Next”:
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 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:
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.
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.
At this point, after we have clicked the “Edit Items” link for our new form, we see the “Items”
Admin Page:
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).
I'm going to call this item “Name” and add some help text so users can understand to type their
name in the box:
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 ;) .
In order to set up a radio array, we need to add a set of potential values for the result data.
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.
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:
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:
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.
An image can be added to the form header, (the area that contains the intro text), using the
“Image” property:
The Submit button is nice, but sometimes it is necessary to style the submit button to fit in with
another theme:
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.
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:
Illustration 40: The “Testing Form” form as viewed from the "Front End"
The perForms Administrator page is accessible from the “Components” menu, in Joomla!
Administator.
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.
Or, we can
2. Click "Edit Items" on the test form's row in the top admin list:
Once we are viewing the list of items belonging to the test form, we will want to create a "New
Item" :
So we get this:
*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!
Illustration 60: The updated "Form Items" list showing “File Upload” item.
*note that the submit button does not work from the “Preview” popup.
We can see the textbox isn't really wide enough to show the user their filename:
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.
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.
So, a user can choose a file to upload, through the “front end”:
Illustration 76: Error message displayed because the file was too large.
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:
Inside is our file: note the original name is prepended with the date and time, and username (or
“Unknown” if not logged in).
If the user is logged in, the filename will contain their name:
If the default upload path does not suit, then it can be changed.
Illustration 82: The "Edit Item" page for the "File Upload" Item.
Illustration 83: "Values" Tab showing "Value" property Info Icon Help Text.
Illustration 84: The new upload path entered into the "Value"
property. Note the trailing separator (/).
And “Save”.
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.
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.
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.
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.
So, we switch “Use securityimages” to “Yes” and jot down some messages:
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.
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?
Com_SecurityImages has checked our try at proving we are human, and rejected it. The “Security
Image Error Message” has been displayed.
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 :
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.
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.
In our example, I'm going to edit the front page message to embed a perForms form using the
performs mambot.
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.
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.