Trace:
Differences ¶
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
en:tutorials:simple-jforms-example [2008/03/04 13:36] – bibo | en:tutorials:simple-jforms-example [2008/07/20 00:05] – bastnic | ||
---|---|---|---|
Line 4: | Line 4: | ||
- | ===== Creating the application ===== | ||
- | First, let's create | + | |
+ | |||
+ | |||
+ | ===== Create your application ===== | ||
+ | |||
+ | First, let's create | ||
<code bash> | <code bash> | ||
Line 14: | Line 18: | ||
Don't forget to change rights on ''< | Don't forget to change rights on ''< | ||
- | An application skeleton is created. Your local tree structure | + | An application skeleton is created. Your local tree structure |
* myapp/ | * myapp/ | ||
Line 31: | Line 35: | ||
* var/ | * var/ | ||
* www/ | * www/ | ||
- | * lib/ (jelix libraries) | + | * lib/ (Jelix libraries) |
* temp/ | * temp/ | ||
- | //myapp/// directory contains all files of your application. Note that there is another //myapp/// folder in // | + | //myapp/// directory contains all files of your application. Note that there is another //myapp/// folder in // |
+ | |||
+ | Last, copy the content | ||
- | Then, copy the content of // | ||
===== The contact form ===== | ===== The contact form ===== | ||
- | Now we're going to create a form. The only thing to do, is to create one xml file in the //forms/// directory. | + | Now you're going to create a form. The only thing to do, is to create one XML file in the //forms/// directory. |
<code xml> | <code xml> | ||
<? | <? | ||
- | <forms xmlns=" | + | <form xmlns=" |
< | < | ||
Line 72: | Line 78: | ||
</ | </ | ||
- | You can see that it is a declarative format. | + | You can see that it is a declarative format. |
+ | |||
+ | |||
===== Displaying the form ===== | ===== Displaying the form ===== | ||
- | Now we're going to display the form. First you modify the default controller, default.classic.php: | + | Now you're going to display the form. First, modify the default controller, |
<code php> | <code php> | ||
Line 87: | Line 96: | ||
$f = jForms:: | $f = jForms:: | ||
- | $view->tpl-> | + | $view->body-> |
return $view; | return $view; | ||
Line 94: | Line 103: | ||
</ | </ | ||
- | At the first line, we retrieve an HTML view (a jHtmlResponse object) with the **getResponse()** method. | + | On the first line, you retrieve an HTML view (a jHtmlResponse object) with the **getResponse()** method. |
- | In the **bodyTpl**, | + | In the **bodyTpl** |
- | Next, in the **$f** variable, | + | Next, in the **$f** variable, |
- | Then we pass the **$f** variable to an instance of a template engine (jTpl which works like smarty) stored in **$view-> | + | You pass **$f** variable to an instance of a template engine (jTpl which works like smarty). It is stored in **$view-> |
- | At the end, we return the **$view** object and Jelix will end the job : the view will generate | + | Last line returns |
- | Now let's create this template in // | + | Let's create this template in // |
<code php> | <code php> | ||
Line 111: | Line 120: | ||
</ | </ | ||
- | We use the template plugin | + | It uses **formfull** |
At this step, you can execute the action, **http:// | At this step, you can execute the action, **http:// | ||
- | thing because this action is the default one of the application), | + | thing because this action is the default one of the application), |
+ | {{en: | ||
- | When testing this form, you can see that a check is done on fields before | + | When testing this form, notice the check done on fields before submit : some javascript code is generated automatically |
<code html> | <code html> | ||
Line 132: | Line 142: | ||
| | ||
| | ||
- | | + | |
- | | + | |
// (snip other javascript code...) | // (snip other javascript code...) | ||
// | // | ||
Line 165: | Line 175: | ||
</ | </ | ||
- | Note that some CSS classes | + | Note also that form elements have CSS classes |
+ | |||
+ | **formfull** plugin | ||
<code html> | <code html> | ||
Line 183: | Line 195: | ||
</ | </ | ||
- | We use here the **form** plugin instead of **formfull**. Its arguments are same. **formcontrols** plugin do a loop over the fields declared in the contact.form.xml (except submit and reset controls), and you can display the label and the field with **ctrl_label** and **ctrl_control**. **formsubmit** displays all submit controls. | + | The template above use **form** plugin instead of **formfull**. Its arguments are identical. **formcontrols** plugin do a loop over the fields declared in the contact.form.xml (except submit and reset controls), and you can display the label and the field with **ctrl_label** and **ctrl_control**. **formsubmit** displays all submit controls. |
Here is the result of this template : | Here is the result of this template : | ||
- | ===== Handling datas after a submit ===== | + | {{en: |
- | Now we're going to create the save method indicated in the arguments of the **form** plugin. | + | |
+ | |||
+ | |||
+ | |||
+ | ===== Handling submitted data ===== | ||
+ | |||
+ | Now you're going to create the action | ||
<code php> | <code php> | ||
Line 199: | Line 217: | ||
$f = jForms:: | $f = jForms:: | ||
if(!$f || !$f-> | if(!$f || !$f-> | ||
- | $rep = $this-> | + | $view = $this-> |
- | $rep-> | + | $view-> |
- | return $rep; | + | return $view; |
} | } | ||
Line 210: | Line 228: | ||
</ | </ | ||
- | To get the instance of the form, and by the same time to fill it with submitted | + | To get the instance of the form, and by the same time to fill it with submitted |
<code php> | <code php> | ||
Line 218: | Line 236: | ||
</ | </ | ||
- | So here, we try to get an existing | + | Instead of just creating a new instance of the contact |
- | In **save** method, after the test, this is the opportunity to execute | + | Back to **save** method. After the **$f-> |
<code php> | <code php> | ||
+ | if(!$f || !$f-> | ||
+ | |||
$alldatas = $f-> | $alldatas = $f-> | ||
+ | // or | ||
$firstname = $f-> | $firstname = $f-> | ||
- | // etc. | + | |
+ | // and so on. | ||
</ | </ | ||
- | And at the end of the process, we could display submitted | + | Finally, you could display submitted |
<code html> | <code html> | ||
Line 234: | Line 256: | ||
< | < | ||
- | < | + | < |
< | < | ||
{formcontrols $form, array(' | {formcontrols $form, array(' | ||
Line 243: | Line 265: | ||
</ | </ | ||
- | <p>We will contact | + | <p>We will contact you. Thanks!</p> |
</ | </ | ||
- | We use again the **formcontrols** plugin, but in a standalone manner (so not with a **form** plugin). | + | Use again the **formcontrols** plugin, but in a standalone manner (not with a **form** plugin). |
+ | |||
+ | {{en: | ||
+ | |||
+ | |||
+ | |||
+ | |||
===== Conclusion ===== | ===== Conclusion ===== | ||
- | That's all ! We saw how it is easy with jForms : | + | That's all ! It is really |
+ | |||
+ | * create a form | ||
+ | * display a form | ||
+ | * retrieve submitted data | ||
+ | * validate submitted data (this is done automatically !) | ||
+ | * display the form again with errors | ||
- | * to create a form | + | With only one xml file and few lines of code ! |
- | * to show a form | + | |
- | * to retrieve submitted datas | + | |
- | * to validate submitted datas (this is done automatically | + | |
- | * to show the form again with errors | + | |
- | Notice that jForms has many other features, | + | And jForms has many other features, |
- | * to create your own form " | + | * create your own form " |
- | * to specify your own error messages | + | * specify your own error messages |
- | * to manage how error messages are displayed | + | * localize everything |
- | * to display helps and tooltip | + | * manage how error messages are displayed |
- | * to fill menulist, listbox | + | * display helps and tooltips |
- | * to store automatically | + | * fill menulist, listbox, (and so on) choices |
- | * to create quickly a CRUD controller, by using the jControllerDaoCrud controller (only indicate a jforms file, a jdao file, and that's all !) | + | * read and store data automatically |
- | * and many other controls are availabled: **< | + | * create quickly a CRUD controller, by using the jControllerDaoCrud controller (only indicate a jforms file, a jdao file, and that's all !) |
- | * some others will be available soon: **< | + | * and many other controls are availabled: **< |
+ | * some others will be available soon in Jelix 1.1 : **< | ||