Smarty - Part 2 - Smartify your Forms

[Orjan]

Content
This tutorial will be in several parts:

Part one, Installation and Setup
Part two, Smartify your Forms
Part three, Creating tables and lists
... more to come

This part
See Part 1 for the start of this description. Now, when we have installed Smarty and tried it out with a very small example, assigning an Smarty-variable, and used it in a template, We will now look at some of the more powerful parts of Smarty, and that is how to handle forms! This ease your work on particularly radio buttons, checkboxes, selects and believe it or not, built in functions to put up a select sequence of dates and times.

Basic Form
When you do a basic form, you mainly start with your form tag:

<form method="POST" action="index.php" id="myform">
</form>

Within that, you would probably add loads of <input> of different types. Text boxes is no problems, they are easy, and rather plain. When you start with Checkboxes or Radio buttons, it gets a little bit worse. To do good html, you should label them together and lots of stuff. this is actually done really easy with Smarty.

Think that you have a list of persons to choose from with checkboxes:

ID   Name
1000 Joe Schmoe
1001 Jack Smith
1002 Jane Johnson
1003 Charlie Brown

Maybe you have this list in a database or whatever, but create an array with this information within your php, and then simpy enough, assing the array to a Smarty variable:

$smarty->assign('persons', array(
                                     1000 => 'Joe Schmoe',
                                     1001 => 'Jack Smith',
                                     1002 => 'Jane Johnson',
                                     1003 => 'Charlie Brown')
                                   ); 

Now, determine what should be checked by default, we choose Jane:

$smarty->assign('default', 1002); 

So, now the worst job is done. You don't believe me? It's true. in your form, inside the template file, now add this:

{html_checkboxes name='id' options=$persons 
selected=$default separator='<br />'}

Done! the name parameter, tells which name the input should have, options is the plain array of id => label text, the selected parameter tells which should be set as default, and the last, separator, gives you the opportunity to have your own html in between each input, maybe you want it in a table so you want </td><td> or whatever.

Radio buttons, Harder?
Wrong again. we can use the very same php code as for checkboxes. We do a little difference in our template:

{html_radios name='id' options=$persons
   selected=$default separator='<br />'}

Done! Harder than that isn't radio buttons either.

Select boxes, a little tricker
We all know how to do them. an <select></select> with loads of <option> tags in between. Ok, here we go, we reuse the same script now as well, just another html:

{html_options name=id options=$persons selected=$default}

Done again! Not hard at all. But at times, maybe we want to have a customized <select> tag, so just the options are what we would like created for us. Smarty makes it simple for us. Just don't provide the id parameter, and it won't give us the <select>-tags, just the <option> list...

{html_options options=$persons selected=$default}

what about Option groups then?
The feature to group different things in the select boxes is well used at times. Maybe you want to show which countries you can choose from, and want them listed according to continent? Ok, we give it a try.

$cntry['Europe'] = Array(46 => 'Sweden',
                                 358 => 'Finland',
                                 47 => 'Norway',
                                 44 => 'United Kingdom');
$cntry['North America'] = Array(1 => 'United States of America',
                                           52 => 'Mexico');
$cntry['Australia and Oceania'] = Array(64 => 'New Zeeland',
                                                     61 => 'Australia');
$smarty->assign('countries', $cntry); 

So, now we have set up a two dimensional array with our continents first, then a small set of countries for each continent. Ok, now this is tricky, don't you think? Don't worry, Smarty does this by default for ya!

{html_options name=prefix options=$countries}

Not hard at all. Just to have imagination enough to see the possibilities!

Dates and times
This one is perfect when letting people select year, day and month for example.

{html_select_date prefix="born_" start_year="1900" end_year="2009"
field_separator="-" field_order="YMD"}

Will create an iso year by the format "YYYY-MM-DD". The three names would be born_Year, born_Month and born_Day. Want the american way instead?

{html_select_date prefix="born_" start_year="1900" end_year="2009"
field_separator="/" field_order="MDY"}

So there we are with "MM/DD/YYYY"-format instead.

So, that is easy. but hey, that is a birth date. I want a event calendar to book in the future. Ok, lets say we want from today and three years ahead of us instead.

{html_select_date prefix="start_" end_year="+3"
field_separator="-" field_order="YMD"}

So, now we go Three years ahead. We dont 'specify a start year if we want it to be this year. If you are doing a diary and want to add things afterwards?

{html_select_date prefix="start_" start_year="-5" end_year="+3"
field_separator="-" field_order="YMD"}

Now, we can start 5 years from now, and end three years after today. By the way, did I mention that this can age without troubles, as everything here is relative, your web site could go as old as you want. If you skip end_year in the born-code, you can have it roll. change start_year to -100 and then it will let you choose the last 100 years automatically.

Extra parameters for date function
There are many more parameters available, like year_extra, which works as separator earlier, but only on years, so you can add your custom code into the select of the year. there are similar for month and day as well. If you want this code on all, there is a simple all_extra for that. you can choose to only select year and month, by display_day=false, or hide year by display_year=false, of course, there are a display_month=true/false as well.

You can select how the month and date is showed by the parameters , month_format (as strftime-coding) and day_format (as sprintf-coding), or how the values should be stored with month_value_format (as strftime-coding) and day_value_format (as sprintf-coding). You can also reverse the order of how the years is showed by reverse_years=true

Time
The time function works much the same way as the date function does, but is much simplier.

{html_select_time prefix="time_" display_meridian=false}

Creates a normal 24-hour clock with hours, minutes and seconds. Other parameters you can use is display_hour, display_minute and display_seconds to show or not show the different parts. minute_interval sets the step to be shown, default is 1, shows every minute, if it is 5, only each 5 minutes is shown. second_interval is the same for seconds.

[Jordan]

Excellent read! From a PHP developer standpoint, that does simplify creating form objects. +rep

[Jaan]

Well.. I really haven't used Smarty.. and I have no idea what it is but it looks cool.. great tut mate

[Orjan]

you can read about what Smarty is on the top section of Part 1.

[Jordan]

Well.. I really haven't used Smarty.. and I have no idea what it is but it looks cool.. great tut mate

I bet you would love them since you do so much website design work with PHP. Check out Orjan's first tutorial: Smarty - Part 1 - Installation and Setup