Pages

Pages

Previous: Getting Started Up to Contents Next: Step 2: Decorating the form

How to build submission forms using Xataface

Jump:

A submission form (a form for users to submit information into a database) is a very common use-case for Xataface. This tutorial teaches you how to do it the right way.

Step 1: Create a table to store the submissions

The submissions table should have a columns corresponding to each field of the form.

When creating a submission form, you generally want to have a table with columns corresponding to form fields.

In our example we will be building a registration form for guests at a University open-house. Our form fields (the information we are gathering are as follows:

Salutation
Select list with options 'Mr.','Mrs.','Ms.','Miss','Dr.'
First Name
The registrant's first name.
Last Name
The registrant's last name.
Email
The registrant's email address.
School

The name of the school that the registrant attends.
Grade / Level
The grade or level of education completed by the registrant.
If non student, select one:
Select list with options 'Parent','Teacher','Counsellor','Other' (and a text field to enter a value if the registrant selects "other".
Area of Interest
A select list of a number of areas of interest including 'Computing Science', 'Engineering', and more...
Campus of Interest
There is more than one campus so this is a select list for the registrant to choose the campus that he is interested in attending.

We will create our table as follows:

Field Type Null Default Attributes
   int(11) No    auto_increment 
   enum('Ms.', 'Mr.', 'Miss', 'Dr.') No  Mr.   
   varchar(32) No     
   varchar(32) No     
   varchar(128) No     
   varchar(64) Yes  NULL   
   varchar(32) Yes  NULL   
   enum('Parent', 'Teacher', 'Counsellor', 'Other') Yes  NULL   
   varchar(32) Yes  NULL   
   int(11) Yes  NULL   
   varchar(128) Yes  NULL   
   enum('Burnaby', 'Surrey', 'Vancouver', 'Undecided') Yes  Burnaby   
   timestamp(14) Yes  NULL   

A couple of notes:

  1. registrantid is an auto_increment column added to serve as a primary key for responses.  This is pretty standard.
  2. Most of the fields directly correspond with a column of our table.  VARCHAR fields are used mostly for text input fields.
  3. The ENUM field type is helpful for fields that offer a simple selection between a few options (e.g. non_student_type).
  4. We will use a valuelist on the area_of_interest field to select the area of interest we want.  This field will store the integer id of the area of interest selected by the user.  We use this strategy because we want to be able to store the interests in the database in another table.
  5. registration_date is used to timestamp when the form is submitted.
At this point we are ready to customize the widget display of our fields using the fields.ini file.

Previous: Getting Started Up to Contents Next: Step 2: Decorating the form
blog comments powered by Disqus
Powered by Xataface
(c) 2005-2024 All rights reserved