« Webif^2 tutorial part 01 - OpenWrt Gemini 0.2 »

Webif^2 tutorial part 02

22 March 2008
Written by: frank Posted under Webif^2, NAS, Linux

Last time we created a simple “hello world” page. Not very useful. For our NAS box we need a way to input/select configuration data. Web interfaces implement user input using HTML forms. Webif^2 provides some features to make it easier to work with them.

The following example allows us to enter the name (text) and job description (selecting a predefined value) of the person you want to cheer. I start with my explanation at the end of the script.

script output

On the lines 11 to 21 we use the function display_form to create the output you can see in the screen shot. display_form is at its heart an AWK script. AWK works on a line by line basis so every line till the EOF marker will be processed on its own. Processing means that the lines are expanded into fragments that will make up the final form.

start_form/end_form are doing exactly what you expect them to do. What about line 13? display_form is not only generating a form, it also embeds the form elements together with other elements into a table. “field” will put the text following it into a cell of this table. Line 14 creates a drop down box. The following two lines add two options to this drop down box. By passing the value of the variable FORM_job we can preselect a particular option. This allows us to remember user input between script invocations (albeit only on the browser side).

The input field to enter the name is created on line 18. As the last step before finishing the form we add a submit button so we can send the form back to the server for processing (line 19). The action associated with the form will be the embedding page.

  1. #!/usr/bin/webif-page
  2. <?
  3. . /usr/lib/webif/webif.sh
  4.  
  5. header "Test" "Cheers" "Cheers" ” "$SCRIPT_NAME"
  6.  
  7. empty "$FORM_name" || empty "$FORM_job" || {
  8.         echo "cheers to $FORM_name the $FORM_job!</br>"
  9. }
  10.  
  11. display_form <<EOF
  12. start_form|Who is to be cheered?
  13. field|Job description
  14. select|job|$FORM_job
  15. option|Code Simian|Code simian
  16. option|Code Monkey|Code monkey
  17. field|Name
  18. text|name|$name
  19. submit|button_set_name|Set
  20. end_form
  21. EOF
  22.  
  23. footer
  24. ?>
  25.  
  26. <!–
  27. ##WEBIF:name:Test:50:Cheers
  28. –>

To wrap up this tutorial we now only have to do something with the data submitted through the form. On line 07 we check if $FORM_name or $FORM_job are empty. If both of them contain a value we display a customized greeting message.
Where do these variables come from? Haserl is parsing POST/GET requests and places form variables into the context of the script it currently exectues. The variables are always prefixed with “FORM_”.

This example wasn’t extensive of course. display_form provides a number of additional features to create radio buttons, check boxes, text areas, …. For a complete list you have to look up files/usr/lib/webif/form.awk.

The time we will extend this example to do some input validation.


One Response to ' Webif^2 tutorial part 02 '

Subscribe to comments with RSS or TrackBack to ' Webif^2 tutorial part 02 '.

  1. kontra said,

    on March 27th, 2008 at 4:31 pm

    you rule man, continue with this great work of yours
    cheers
    :)

Leave a reply