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:07] – laurent | en:tutorials:simple-jforms-example [2008/04/07 11:36] – laurent | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Simple jForms example ====== | ||
- | |||
- | Here is a little tutorial to show you how jForms is a powerful form system. | ||
- | |||
- | ===== Creating the application ===== | ||
- | |||
- | First, let's create our application. After extracting the [[http:// | ||
- | |||
- | <code bash> | ||
- | ./jelix --myapp createapp | ||
- | </ | ||
- | |||
- | We don't forget to change rights on '' | ||
- | |||
- | Here is the skeleton which is created : | ||
- | |||
- | * myapp/ | ||
- | * modules/ | ||
- | * myapp/ | ||
- | * classes/ | ||
- | * controllers/ | ||
- | * default.classic.php | ||
- | * dao/ | ||
- | * forms/ | ||
- | * locales/ | ||
- | * templates/ | ||
- | * zones/ | ||
- | * plugins/ | ||
- | * responses/ | ||
- | * var/ | ||
- | * www/ | ||
- | * lib/ | ||
- | * temp/ | ||
- | |||
- | |||
- | There is //myapp/// directory, which contains all files of the application. There is also an other //myapp/// directory in // | ||
- | |||
- | Then we copy the content of // | ||
- | |||
- | ===== 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. We call it contact.form.xml. Here is its content: | ||
- | |||
- | <code xml> | ||
- | <? | ||
- | < | ||
- | |||
- | < | ||
- | < | ||
- | <item value=" | ||
- | <item value=" | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | |||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | You can see that it is a declarative format. So it is easy to read and edit. | ||
- | |||
- | ===== Displaying the form ===== | ||
- | |||
- | Now we're going to display the form. First you modify the default controller, default.classic.php: | ||
- | |||
- | <code php> | ||
- | class defaultCtrl extends jController { | ||
- | |||
- | function index() { | ||
- | $view = $this-> | ||
- | $view-> | ||
- | $view-> | ||
- | |||
- | $f = jForms:: | ||
- | $view-> | ||
- | |||
- | return $view; | ||
- | } | ||
- | } | ||
- | </ | ||
- | |||
- | At the first line, we retrieve an HTML view (a jHtmlResponse object) with the **getResponse()** method. Then we set the title of the page (**$view-> | ||
- | In the **bodyTpl**, | ||
- | |||
- | Next, in the **$f** variable, we put an instance of the contact form. jforms creates dynamically a class from datas which are in the contact.form.xml and the " | ||
- | |||
- | Then we pass the **$f** variable to an instance of a template engine (jTpl which works like smarty) stored in **$view-> | ||
- | |||
- | At the end, we return the **$view** object and Jelix will end the job : the view will generate the final page. | ||
- | |||
- | Second, we create the template // | ||
- | |||
- | <code php> | ||
- | < | ||
- | < | ||
- | | ||
- | </ | ||
- | |||
- | We use the template plugin **formfull**, | ||
- | |||
- | At this step, you can execute the action, **http:// | ||
- | thing because this action is the default one of the application), | ||
- | |||
- | |||
- | When testing this form, you can see that a check is done on fields before the submit : some javascript code are generated automatically. Here is the generated html code : | ||
- | |||
- | <code html> | ||
- | < | ||
- | < | ||
- | <input type=" | ||
- | <input type=" | ||
- | </ | ||
- | < | ||
- | //< | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | | ||
- | // (snip other javascript code...) | ||
- | // | ||
- | </ | ||
- | < | ||
- | < | ||
- | <th scope=" | ||
- | <td> <select name=" | ||
- | <option value=" | ||
- | <option value=" | ||
- | </ | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | < | ||
- | <th scope=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | < | ||
- | <input type=" | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | Note that some CSS classes facilitate the designing of the form. **formfull** plugin generate the form in an HTML table, but of course you can change this, by using other plugins, which allow you to control how to generate html. Let's change that in the main.tpl file. | ||
- | |||
- | <code html> | ||
- | < | ||
- | {form $form, " | ||
- | < | ||
- | < | ||
- | < | ||
- | {formcontrols} | ||
- | < | ||
- | < | ||
- | {/ | ||
- | </dl> | ||
- | </ | ||
- | < | ||
- | | ||
- | </ | ||
- | |||
- | 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. | ||
- | |||
- | Here is the result of this template : | ||
- | |||
- | |||
- | ===== Handling datas after a submit ===== | ||
- | |||
- | Now we're going to create the save method indicated in the arguments of the **form** plugin. We add this methods in default.classic.php. | ||
- | |||
- | <code php> | ||
- | function save() { | ||
- | $view = $this-> | ||
- | $view-> | ||
- | |||
- | $f = jForms:: | ||
- | if(!$f || !$f-> | ||
- | $rep = $this-> | ||
- | $rep-> | ||
- | return $rep; | ||
- | } | ||
- | |||
- | $view-> | ||
- | $view-> | ||
- | return $view; | ||
- | } | ||
- | </ | ||
- | |||
- | To get the instance of the form, and by the same time to fill it with submitted datas, we use the **fill** method. Then we test if this instance doesn' | ||
- | |||
- | <code php> | ||
- | $f = jForms:: | ||
- | if(!$f) | ||
- | $f = jForms:: | ||
- | </ | ||
- | |||
- | So here, we try to get an existing instance of the form, and if not, we create a new instance. | ||
- | |||
- | In **save** method, after the test, this is the opportunity to execute business code (not shown in this tutorial). For example: | ||
- | |||
- | <code php> | ||
- | $alldatas = $f-> | ||
- | $firstname = $f-> | ||
- | // etc. | ||
- | </ | ||
- | |||
- | And at the end of the process, we could display submitted datas and says thank you. Here is the contact_ok.tpl file: | ||
- | |||
- | <code html> | ||
- | < | ||
- | |||
- | < | ||
- | < | ||
- | < | ||
- | {formcontrols $form, array(' | ||
- | < | ||
- | < | ||
- | {/ | ||
- | </dl> | ||
- | </ | ||
- | |||
- | <p>We will contact us. Thank you !</p> | ||
- | </ | ||
- | |||
- | We use again the **formcontrols** plugin, but in a standalone manner (so not with a **form** plugin). We indicate as arguments the jFormsBase object (**$form**), | ||
- | |||
- | ===== Conclusion ===== | ||
- | |||
- | |||
- | That's all ! We saw how it is easy with jForms : | ||
- | |||
- | * to create a form | ||
- | * 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, which allow you : | ||
- | |||
- | * to create your own form " | ||
- | * to specify your own error messages | ||
- | * to manage how error messages are displayed | ||
- | * to display helps and tooltip | ||
- | * to fill menulist, listbox etc automatically, | ||
- | * to store automatically datas with a jDao object | ||
- | * to create quickly a CRUD controller, by using the jControllerDaoCrud controller (only indicate a jforms file, a jdao file, and that's all !) | ||
- | * and many other controls are availabled: **< | ||
- | * some others will be available soon: **< | ||
- | |||