HTML Form Exercise

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

From Humanitarian-FOSS Project Development Site


Problem Statement: Due Feb. 26

Write a Sahana module that will display an HTML form that can be used to input data into the MySQL database that you created in last week's assignment. The module should be named something like cpsc225. For this exercise, it will suffice to input three pieces of data into the DB: the members name, email address, and school name. All three inputs can be handled through HTML text fields.

Click here to see what a sample solution would look like.

Getting Set Up

Last week's exercise handled the displaying of data retrieved from a database. You should be able to re-use most of your code from that exercise. However, you will have to modify it to fit into the Sahana module. Your Sahana module will need four files:

  • -- This file generates a module name and inserts it into the Sahana menu.
  • -- This file creates the module's menu items. It contains the default() function.
  • -- This file contains the function that retrieves the members list from the DB and displays it. Here is where you would put your revised code from last week's assignment.
  • -- This file contains the function that will display the HTML form and the function that will process the form data (when the user clicks the Submit button).

These files would be put into a directory named cpsc225 in the Sahana mod directory. See the Hello World example (provided below) for ideas on how these files should be coded.

Naming Conventions in Sahana

Note that function names in Sahana incorporate the module name as part of the function name. For example, if the name of your module is cpsc225, the function that is called automatically to install the module's menu should be shn_cpsc225_mainmenu(). Similarly, Sahana will automatically call shn_cpsc225_default() to display a welcome page. Make sure you follow these naming conventions in developing your module.

Primer on HTML Forms

For those who are not familiar with HTML forms, this HTML Form Tutorial will provide a basic overview. Have a look at it.

As I mentioned in class, there are two methods that HTML forms use to submit data to a server: a GET method or a POST method. We won't worry about the details here. Sahana uses POST. In creating a Sahana form, you will be using built-in Sahana functions, rather than directly coding the HTML code. For this assignment, your form will consist of three input text fields and a submit button. The following table lets you compare the generated HTML code and the Sahana PHP function calls that were used to generate it:

Generated HTML CodeSahana PHP Code
<form method="POST" 
     id="formset" name="">
 <fieldset><legend>Get the Member Data</legend>
  <label>Member name  : </label>
   <input type="text" name="name" value="" size="50" />
   <b class='req'>*req</b>
   <br />
  <label>Email : </label>
   <input type="text" name="email" value="" size="50" />
   <b class='req'>*req</b>
   <br />
  <label>School : </label>
   <input type="text" name="school" value="" size="50" />
   <b class='req'>*req</b>
    <br />
   <br></fieldset><br /> 
   <input type="submit" value="Submit"  />
   </center> <br />
 shn_form_fopen("get_members_info");   // Open Form
 shn_form_fsopen('Get the Member Data'); // Section
 $extra_opts['req']=true;        // Required fields
 shn_form_text(_("Member name  : "),'name',
   'size="50"',$extra_opts);          // Name field
 shn_form_text(_("Email : "),'email', 
   'size="50"',$extra_opts);         // Email field
 shn_form_text(_("School : "),'school', 
   'size="50"',$extra_opts);        // School field
 echo "<br>";
 shn_form_fsclose();           // Close the section
?> <br /> <center>
 shn_form_submit("Submit");        // Submit button
?> </center> <br />
 shn_form_fclose();               // Close the form
?> </div>

The HTML form element is enclosed within form tags. In Sahana, a form element is opened using the shn_form_fopen(function_name) function and closed with the shn_form_fclose() function. Note that in the opening form tag, the method attribute is set to POST. The action attribute is set to the Sahana module and the function that will be used by my program to process the form data (the cpsc225 module and the get_members_info). In Sahana, the function that will process the form is passed as a parameter to fopen().

This form contains a section (fieldset), which in Sahana is opened and closed with shn_form_fsopen(section_name) and shn_form_fsclose().

If you look at the HTML code, you can identify the three input fields, for inputing the name, email, and school respectively, and the submit button. All of these are different types of HTML input elements. Text fields are type text and the submit button is of type submit. To create text fields in Sahana, you would use the shn_form_text(label, name, size, options) function.

Note that the second argument to this functions give's the name of the form element. This is the name that is used to retrieve the data when the form is processed. For example, here's the code that you would use to retrieve the name and email data:

 $name = $_POST['name'];
 $email = $_POST['email'];

As you can see from this code, the POST data are stored in an array named $_POST, which is indexed by the names of the form's elements.

Further Preliminaries

Review the following examples, which show how to create an HTML form in Sahana and how to access a database from an HTML form.

If you want to turn on (or off) error reporting, you may want to review CPSC225/Notes/PHP_Basics.

Importing the CPSC 225 Database into Sahana

You can use PhpMyadmin commands to export your CPSC 225 database into an SQL file and then import it into the Sahana database. It might be a good idea to rename the tables with the prefix cpsc225_, that way, they will occur next to each other in the tables list. You can use the MqSQL Operations menu to rename tables.

Hand In

For this exercise, you must post three results:

  • Your well-documented PHP Source code.
  • A link to your PhpDocumentor generated documentation for your program.
  • A copy of (or a link to) the web page that your program generated.

Follow the example provided below. NOTE: Don't post your source code solution until two hours before Monday's class.


Personal tools