Adding a Multilingual Hello Form to the Hello World Module

[article] [edit page] [discussion] [history]

From Humanitarian-FOSS Project Development Site

In this exercise we will add an HTML form element to the hw module. The form will allow the user to input his or her name and to select a language and a greeting from drop-down menus. It will then display the selected greeting. The various greetings displayed on the menus will be retrieved from tables in the VMOSS database. Here's what the form will look like:
.


Contents

Set Up: Creating the hw_language and hw_greeting Tables

The tables can be created interactively in PhpMyadmin. To save time, we provide the following SQL script:

CREATE TABLE IF NOT EXISTS `hw_language` (
  `id` char(3) NOT NULL,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `hw_language` (`id`, `name`) VALUES
('ENG', 'English'),
('ITA', 'Italian'),
('GER', 'German'),
('FRE', 'French');

CREATE TABLE IF NOT EXISTS `hw_greeting` (
  `language` char(3) NOT NULL,
  `type` varchar(30) NOT NULL,
  `greeting` varchar(50) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

INSERT INTO `hw_greeting` (`language`, `type`, `greeting`) VALUES
('ENG', 'Birthday', 'Happy birthday to you!'),
('ENG', 'Birthday', 'Happy birthday.'),
('ENG', 'Anniversary', 'Happy anniversary'),
('ITA', 'Birthday', 'Buon Compleanno.'),
('ITA', 'Christmas', 'Buon Natale'),
('FRE', 'Birthday', 'Joyeax Anniversaire'),
('FRE', 'Christmas', 'Joyeax Noel'),
('GER', 'Christmas', 'Frohe Weihnachten'),
('GER', 'Birthday', 'Alles Gute zum Geburtstag');

As you can see, the hw_language table has two attributes named id (a three-letter code) and name (a variable length string). The hw_greeting table has three attributes, language (the three-letter code), type, (birthday, christmas, etc), and greeting (the actual greeting). Note that the id attribute is the primary key for the hw_language table.

TO DO: Create the Tables. Copy and paste the above script into the SQL form for the VMOSS database in PhpMyadmin. Then run the script and observe that the proper tables are created.

Creating the Form Element

For this exercise, we will create the form element by modifying the shn_hw_default() function in main.inc. First we need to declare a local variable named $db and assign it a reference to the global database:

    <? 
    global $global;
    $db = $global['db'];

Next, we retieve the various language options from the hw_language table. We query the database and store the results in an array, which requires a loop:

    $languages = array();
    $result = $db->Execute("select id, name from hw_language");

    while(!$result->EOF)
    {
            $languages[$result->fields['id']] = $result->fields['name'];
            $result->moveNext();
    }

The $languages array associates the language id and name: {ENG=>English, FRE=>French,...}. We will use it to populate one of the HTML form's drop-down menus. Note how the attribute names id and name are used as indexes into the $result array that is returned by the query.

Next, we retrieve the various greetings from the DB and store them in an array variable ($greetings):

    $greetings = array();
    $result = $db->Execute("select distinct type from hw_greeting");
    
    while(!$result->EOF)
    {
            $greetings[$result->fields['type']] = $result->fields['type'];
            $result->moveNext();
    }

In this case we are only intereted in the type attribute. We create the associative $greeetings array, which we will use later to populate another of the form's drop-down menus. In this case we associate the greeting's type with itself: {Birthday=>Birthday,Christmas=>Christmas, ...}.

Finally, we create the HTML form element:

     shn_form_fopen("say_hello", null,array('req_message'=>true));
        shn_form_fsopen("Multilingual Hello Form");
        shn_form_text("Your name","name",null,array("req"=>true, "help"=>"testing help"));
        shn_form_select($languages,"Language", "language",$select_opts = "", $extra_opts = null);
        shn_form_select(
        $greetings,"Greeting", "greeting",$select_opts = "", $extra_opts = null);
        shn_form_submit("Submit", $submit_opts = null);
        shn_form_fsclose();
    shn_form_fclose();
    
    ?>

Note the fopen() function call here. The first argument, say_hello, is the name of the method that will process the form data. We describe how to write this method in the next section. Note also that creating a drop-down menu (a select element) requires only that we pass it an associative array that associates a menu item (e.g., ENG) with a description (e.g., English). Note how we use the associative arrays to create the drop-down menus.

TO DO: Modify shn_hw_default() as described.

Processing the Form Data

To process the form we define a function named shn_hw_say_hello(), the function that was named in the call to fopen(). The first task is to retrieve the data that was submitted when the form's submit button was clicked. These data are stored in a global array named $_REQUEST. Note how we retrieve data from the array by using the form element's name as the index:


function shn_hw_say_hello()
{    
    // First get the data from the form
    
	$name = $_REQUEST['name'];
	$language = $_REQUEST['language'];
	$greeting_type = $_REQUEST['greeting'];
}

Once we have retrieved the form data, we know that the language and the type of greeting that the user wants. We now use these data to retrieve a greeting from the hw_greeting table. We then display the greeting on the web page using the PHP echo operator:

function shn_hw_say_hello()
    global $global;
    $db = $global['db'];
        
    $result = $db->Execute("select greeting from hw_greeting where type = '$greeting_type' and language = '$language'");
    $greeting = $result->fields['greeting'];
    echo "<h1>$greeting</h1>"."$greeting, $name!".'<br /><br /><a href="?mod=hw">Back</a>';
}

TO DO: Complete the shn_hw_say_hello() function as described.

Exercises

  1. Add an "endearment" drop-down menu containing words like "dear" and "lovely". These would be used to generate greetings such as "Happy birthday dear Joe!" Use literal values (rather than DB values) to initialize the menu.
  2. Challenge: Revise the shn_hw_say_hello() function to validate the name field, which currently does not report an error if it is left blank. You will need to call the shn_validate_field() function, on the name field (or a variable that stores the name data) with the argument $check_null=true. If the field is null, the function will return false. In that case you can set a variable to remember the error or call the global show_errors() function.

For more on form processing and validation see Sahana Forms Processing and Validation.

Solution

Click here to reveal a complete Solution.

Personal tools