FacileForms is great for simple forms but its true strength is in its ability to go beyond static forms and enter the realm of applications development. As we will see in this tutorial FacileForms allows you to create Database Tables, Insert information from  a user into tables, and display the results in a form. It also allows you to tap into the powerful Mambo $MainFrame and interact with users and content.

Our task for this tutorial is to create a Tag Board module that can be customized. We will cover page redirection, user rites and access, and data manipulation.

• Mambo 4.5.1a
• FacileForms 1.2.5
• Tag Board Package ( if you are not creating from scratch)

Prerequisites:

• Watch the Flash Movie First Form.
• Read the Assessing with FacileForms tutorial.

I think it is important to have an understanding of these before pressing on. I will not cover simple form and element creation in this tutorial as those were covered in the two items above.

Unlike the Assessment tutorial this will be explained as if we are building this from scratch. It is important to do the tutorial in this manner due to the many different ways the tag board behaves depending on several conditions that exist. For that reason I suggest that you either do the tutorial along with us before downloading the package and installing it. If you just cant wait to download the package and install it I recommend you read this in order to understand how it works.

Now it is important to understand that this is not a standard form, this is a very simple application that exploits PHP pieces, use of hidden elements, and using page redirection to handle different tasks. The concepts displayed here are very basic examples of what can be done with FacileForms. Understanding these concepts will equip you to make more sophisticated applications in the future.

Because we are now dealing with an application rather than a static form a bit of planning is well advised. Knowing what you want your application to do, and breaking that down into small logical tasks to assign FacileForms will insure the end product performs correctly.

Here are the steps I will follow.

• Define Logic needed to display forms and store data.
• Creating the Form Pages
• Adding the PHP and scripts needed
• Style the module

Most of the time the module will display page 1 of the form, ready to accept a tag from the user, when the form is submitted it will add a record to the table and display the tag and user in the module.

Creating the Form;

Log in to the admin section of your web site. Using the menu item, Components -> FacileForms -> Manage Forms option open the form manager. Click the New Icon to open a new form and enter the following values in the dialog.

• Title:               FF Tag Board
• Name:              tagboard
• CSS <div>       leave blank for now
• CSS <form>    leave blank for now
• Ordering           leave as set
• Published          Yes
• Width               100%
• Height              Auto    Bottom Mar      10px
• Preview mode Overlay 160px
• Log to DB        Nonempty values
• Email                No, You can change this if you like a lot of email.
• Description       A simple Tag Board made with FacileForms that is meant to be used in a  module.

Go ahead and click your save Icon, we will revisit the form in a moment.

One of the things I learned doing this form was a navigation trick that saves tons of time. Once you have your form created you can bypass switching back to the Manage forms screen while editing pages by clicking the Edit Form Icon from any page you are working on. Give it a try.

Ok Lets define the pages we will need.

• We need the main page that will allow users to tag the site and see the tags left by others.
• We need a page for super administrators to use when the module sees no database table.
• We need a page to inform the every day user that the board has not been set up yet.

So since the busiest and most used page will be the tag page, lets make that page one. You should be looking at an empty page.

Elements for the fist page; Click new from the Mambo and create a Static/Html item.

Our first element is a static text / html element that will need to have the following values

• Title:               intro
• Name:             ftb_intro  (it is important to name this exactly)
• CSS                none at this time
• Ordering          leave as set
• Published         Yes
• Position X        10px, Position Y, 0px
• Width              0, Height 0
• Text/Html        Type Tag Click Post
• you can change the last value to anything you would like to make it fit your site.

Save this element  

Now we need an element to hold the tag the user will by posting. Click the new icon and from the inputs area choose text, click continue. Enter these values for our tag element

• Title:                tag
• Name:             ftb_tag
• Class <div>      none
• Class<input>    inputbox (this will pull from your template style sheet)
• Published          Yes
• Include log        Yes
• Pos X               3px      Pos Y   28px
• Width               130px              Max Length      110
• Password         No
• Value               Empty

On important value to note here is the Max Length value. Unless you want folks posting small novels and potentially harmful scripts of size, you need to insure this value is set. You can change it to the value you like. For me I consider 110 characters to be plenty for a tag.

Also since this is the only information we are getting from the user, click the script tab and select the not empty library script for validation. An empty tag is a worthless tag.

Save this element and click New for our next item.

Now we need a button that will act as a form submit button when the form is in use mode. So select Regular button from the buttons section. Click New select reguler button and click continnue

Enter these values for our button.

• Title:                 Post
• Name:               ftb_post
• Class <div>        none
• Class <input>     none or 'button' as on page 2, to use the site template setting for buttons
• Ordering            leave as set
• Published          Yes
• Position X         50px
• Position Y         53px
• Type:              Enabled
• Label:              Post

Click the scripts tab and set the action script to

Click the Save button

Click the Add Page Behind Icon to create our next page. This page will hold the elements needed for the super administrator to create the table to hold our tags if it has not yet been created.

While you are setting at the empty page 2 screen click the New Icon.  Our fist element on the second page needs to hold some instruction for our admin. Select static text/html as the type and click continue. Set the values for this element as follows.

•  Title:              Make Table
• Name               ftb_mtabletxt  ( it is important to name this correctly you will see why)
• CSS <div>        none
• Ordering           Leave as set
• Published          Yes
• Position X         18px
• Position Y         40px
• Width              0
• Height             0
• Text/html         Administrator click here to set up FTB

Now we need a second Form Submit button. Now I know that it sounds strange but at this point we are just laying out our pages. All of this will make sense when we start adding logic to our application. So click the new icon  and select Regular button from the button section. Click continue. Add the following values for the new button

• Title:               Create Table
• Name               ftb_ctable
• CSS <div>        none
• CSS <input>     button
• Ordering           Leave as set
• Published         Yes
• Position X        25
• Position Y        10
• Type               Enabled
• Label               Create Table

Normally we would go set the click action script at this time. As you remember we used the library Validate and Submit form on our first button. We are going to define a custom script for this button a little later. For now just click save.

We need one more page to be displayed to users if the board has not been set up. Click the Add Page Behind icon  to create our page 3

We need a single important element on page 3. This is needed so that we can identify this item for directing the page later, not to mention the user needs some information to explain why they can not tag at this time. Click the new icon, and select static text/html as the type and click the continue button.

Set the new static element values like this.

• Title:                No Table
• Name               ftb_ntable  ( important name this correctly )
• CSS <div>         none
• Ordering           Leave as set
• Published          Yes
• Position X         10px
• Position Y         0px
• Width               0
• Height              0
• Text/html         Facile Forms Tag Board has not been set up at this time. Contact your administrator and tell them you are ready to Tag FF.

 Click the save button.

Now we have the form defined and all the pages needed to accomplish most of our work. If you were to load this into a module at this point you would get nothing more than a form that collected tags from a user and saved them as records with FacileForms.

Not much of a tag board in its current state. So now we call in the logic. Before I dive into the specifics on code and scripts that make this little gem work I would like to clarify a few main points about how code is handled in FF.

• Before Form, before a form is loaded.
• After Form , after a form is created and before it is sent to the browser.
• Begin Submit, Runs as the first actions of the form submit process.
• End Submit, Runs at the end of the form submit process.

PHP  can also be embedded into elements on pages.One word of caution, PHP code embedded in a form element, like before/after form pieces, will execute while that form is created on the server. But if you embedd php code between javascript code, you might easy make the error to assume the php code is executed while that javascript function is executed. Not so.

Up pops the form all ready to edit. No need to head all the way out to manage forms, nice feature huh? OK, I know, I need to get out more.

Now here we head off into coding. Remember I am a real rookie at this and their may be more efficient ways of getting this done. Most of my code is hijacked from other examples or worked out in support forums around the world.

The entire before form custom piece looks like this

Check to see if the database for the tags exists (is the Tag Board set up?)

If all this is done correctly when you save it from the admin section you will see the form now displays page 2. This is because our function sees you as a superadministrator and the table does not exist so it directs you to the page to set up the database. To test for users, go ahead and publish this form and add it to a menu link on your site. From the front end log out of Mambo and view your page as a visitor. Click the menu link and you should see page 3.

Because you are now no longer a superadministrator and the table does not exist. Cool huh. That simple concept has endless possibilities for developing other applications in FacileForms.

Now we need to deal with the submit process. Here is where we will do a little FacileForms hocus pocus to help our form deal with the fact that we have two submit buttons that need to perform two different actions. Again this is a basic example of a process that can be used in more sophisticated applications. If you learn this process here you can use it again and again.

To help us with this, we are going to create a hidden input element that will hold a value for us. Log back into Mambo as the admin and select Components-> FacileForms -> Manage Forms. From your list of forms click page 1 for the tagboard form.

Click the New Icon on the Mambo Toolbar and add a hidden input element from the element types dialog click continue and give it these values.

• Title:            ftbtask
• Name:          ftb_task
• Ordering:      Leave as default
• Published      Yes
• Log              Yes
• Value           post_tag

Click the save Icon.

Now we need to work with our Begin Submit Piece so it will use this element. Click the Edit Form Icon from the Mambo tool bar and select the pieces tab. Go to the Begin Submit area and choose custom to open up our text box for the code.

if ($task == 'create_table') {
//make table
$database->setQuery(
    "CREATE TABLE IF NOT EXISTS `#__tbd_tags` (".
        "`postid` INT( 11 ) NOT NULL AUTO_INCREMENT ,".
        "`user` VARCHAR( 50 ) NOT NULL ,".
        "`post` VARCHAR( 100 ) NOT NULL ,".
        "PRIMARY KEY  (`postid`)".
    ") TYPE=MyISAM AUTO_INCREMENT=1"
);
$database->query();
} else {
// make post
$query = "INSERT INTO mos_tbd_tags (user, post) VALUES ('$user', '$post')";
$database->setQuery( $query );
$database->query();
}

Let's break it down. First we will need to define a few variables to work with

case 'ftb_task':
            $task = $data[_FF_DATA_VALUE];
            break;

$database->query();

} else {

Or go ahead and save your form changes by clicking the save button. Again you should be returned to the edit screen with the overview displaying page two. No database has been created and you are a super admin.

.

Click Save and go ahead and give it a try. If all is well, your query will run, your table will be created and you will be returned to page 1 now because or before form piece detects that the table is there and takes you to page 1.

Ok so lets go ahead and make a post. Type something into the box and click Post.

Click the New Icon from the Mambo tool bar, and select input element type Query List. and click continue. Set the elements to these values.

• Title:              taglist
• Name:           ftb_taglist
• CSS all         Leave blank for the moment
• Ordering       Leave for default     
• Published      Yes
• Include log    Yes
• Pos X            0
• Pos Y            74
• Width            100%
• Rows PP        5
• Page Nav        none
• Show Head    no
• First column    Normal
• Border            0
• Spacing           1
• Padding           1

if ($exists) {
    $database->setQuery(
        'select postid,user,post, '.
'concat(post, " by ",user) AS txttag '.
        'from mos_tbd_tags '.
        'order by mos_tbd_tags.postid DESC'
);
    $rows = $database->loadObjectList();
} else
    $rows = array(); 

if ($exists) {

If it does exist we set the query.

    $database->setQuery(

Get postid, user, and post from the table
        'select postid,user,post, '.

Then combine user and post to read "the post text by the poster" and call it txttag.
'concat(post, " by ",user) AS txttag '.

From our table mos_tbd_tags
        'from mos_tbd_tags '.

And sort it in desending order using postid
        'order by mos_tbd_tags.postid DESC'
);

 

Here we tell the element what values to place in our columns. Click the new button  to define a new column. and set the values of our first column like this Change only these items leave the others to default

• Title:            Check
• Name:         postid
• Value:         <?php return $value; ?>

Click Save

Click New to add another column and set these values.

• Title:           txttag
• <th> span   1
• Name:        txttag
• Attributes    Center Top None
• Value:        <?php return  htmlspecialchars($value); ?>

Click the save button

Now save the element by clicking save and BAM your tag suddenly appears. Now go ahead and post a few tags to see how it works.

Now that our little board works, lets use FacileForms CSS styling features to spruce up our tag board. You may have noticed that there were several places to enter style information to forms and elements in the process of doing this tutorial. This is one of the newer features of FacileForms and it deserves attention.

Next I wanted to be able to highlight tags so that they alternated styles and would make it easy to determine where one tag ended and the next began. Much in the same way that mambo uses sectiontableentry1 and sectiontableentry2 to make polls alternate in default styles.

I defined these two styles in my style sheet.

.tagentry1 {
 padding-bottom: 4px;
 background-color: transparent;
 color: black;
}
.tagentry2 {
    background-color: transparent;
    padding-bottom: 4px;
    color: blue;
}

function getPageByName(&$th, $name) 
{ 
    foreach($th->rows as $row) 
        if ($row->name==$name) 
            return $row->page; 
    return NULL; 
} // getPageByName

global $database, $exists; 
if ($exists) { 
    $database->setQuery( 
        "select postid,user,post, ". 
        "concat(post, ' by ',user) AS txttag ". 
        "from mos_tbd_tags ". 
        "order by mos_tbd_tags.postid DESC" 
    ); 
    $database->query(); 
    $rows = $database->loadObjectList(); 
} else { 
    $rows = array();  
}

    $database->setQuery( 
        'select postid,user,post, '. 
        'concat(post, " by ",user) AS txttag '. 
        'from mos_tbd_tags '. 
        'order by mos_tbd_tags.postid DESC' 
    ); 
    $rows = $database->loadObjectList();

if ( $row[0] == "mos_tbd_tags" ) {

while( $row = mysql_fetch_row($dataset) ) 
{ 
    if ( $row[0] == "jos_tbd_tags" ) { 

 
if ($my->usertype == "superadministrator" ) {

if ($my->usertype == "Super Administrator" )

"INSERT INTO mos_tbd_tags (user, post) VALUES ('$user', '$post')";

"INSERT INTO jos_tbd_tags (user, post) VALUES ('$user', '$post')";

amwassil2

2006-03-09 19:45:26

>>Now save the element by clicking save and BAM your tag suddenly appears. Now go ahead and post a few tags to see how it works.

if ( $row[0] == "mos_tbd_tags" ) {

if ( $row[0] == $mosConfig_dbprefix."tbd_tags" )

global $my, $exists, $mosConfig_dbprefix

if ($my->usertype == "superadministrator" )

if ($my->usertype == "superadministrator" || $my->usertype == "Super Administrator" )

"INSERT INTO mos_tbd_tags (user, post) VALUES ('$user', '$post')";

"INSERT INTO #__tbd_tags (user, post) VALUES ('$user', '$post')";

$query = "INSERT INTO mos_tbd_tags (user, post) VALUES ('$user', '$post')";

$query = "INSERT INTO #__tbd_tags (user, post) VALUES ('$user', '$post')";

  
 
//initialization of ff_functions 
 
$this->execPieceByName('ff_InitLib'); 
 
global $my, $exists;  
$exists = 0;  
$dataset = mysql_query('SHOW TABLES') ;  
$this->page = ff_getPageByName('ftb_intro'); 
 
 
 while( $row = mysql_fetch_row($dataset) )  
 {  
 
 
if ( $row[0] == $mosConfig_dbprefix."tbd_tags" ){ 
 $exists = 1;  
    break;  
 }  
 }  
 
// if it exists got to page 1 
if ( $exists == 1 ) { 
$this->page = ff_getPageByName('ftb_intro'); 
// if it does not exist send the form to the correct page for user type  
 } else { 
 
         if ($my->usertype == "Super Administrator"|| $my->usertype == "Super Administrator&quot { 
 
             $this->page = ff_getPageByName('ftb_ctable'); 
         } else { 
             $this->page = ff_getPageByName('ftb_ntable'); 
                } 
         }  
 

Only registered users can write comments.
Please login or register.