Building the Application
The creation of a new application starts at
the Workspace Home page. Navigate to the Workspace Home by
clicking on the breadcrumb menu called Home in the upper left
area of the HTML DB development environment and follow these
Click on the down arrow of the Application Builder icon.
Select the Create Application menu item and click on the Create
from Spreadsheet menu item. This is shown in Figure 4.1 below.
On the Load Method page click on the Upload file (comma
separated or tab delimited) option and click Next.
On the Data page:
File: Conference_RSVP.csv(from the online Code Depot)
Separator: This should be left on the default,
which is a comma.
Optionally Enclosed By: Since the provided file
does not include an enclosed by character, leave this
First row contains column names: verify this is
File Character Set: leave this on the default
On the Table Properties page, HTML DB is told how to
create the table:
On this page, one can see that HTML
DB has scanned the input file and provided a guess as to the
data types for the columns of data. These can be user modified
prior to proceeding past this page. The following steps will
modify the data types and format to match what the data is in
the file being uploaded.
Table Name: CONFERENCE_RSVP
For the EMAIL column change the Column Length to
a value of 50 from the value of 255.
For the PHONE column change the Column Length to
a value of 20 from the value of 30.
For the RSVP_DATE column change the Data Type to
DATE instead of VARCHAR2 and on the Format field enter
For the COMPANY column change the Column Length
to a value of 50 from the value of 255.
For the DONATION column change the Data Type to
NUMBER from VARCHAR2.
For the PAYMENTcolumn change the Column Length
to a value of 20 from the value of 30.
The User Interface Defaults page is shown in Figure 4.2:
Conference Attendees Report
The Create Application wizard will create a
Report and a Form. The Report is used to display
multiple rows from the table being created and the Form
is used to edit each row of the table. The plural name
will be used as the text at the top of the report region
and the singular name will be used at the top of the
Change the PAYMENT column text to Pmt Type.
The Column User Interface Defaultsregion is used to setup defaults for the
columns. Whenever a page item is created on a page that
refers to the PAYMENT column, HTML DB will create the
label next to the page item with the text entered here
by the user. This can help make all the labels in a
user’s applications consistent and their development
On the Summary Page:
Summarize By Column: Click the PAYMENT column.
On the next page:
Aggregate by Column: Click on the DONATION
Aggregate Function to Use: Verify both Sum and
Average are selected.
What was accomplished in steps six and seven is
establishing the criteria the wizard will use to build analysis
pages. A web page will be
built that summarizes the donations and groups them by
payment_type. This example’s data has payment_type
values of: Cash; Check; VISA; and MasterCard. This part of the
wizard will build two pages that sum up the amounts of donations
for each payment type as well as the average donation per
On the Application Options page:
Application Name: Conference RSVP.
Create Mode: Verify this is set to Read and
If this were going to be a web application for
querying purposes only, the Read Onlyoption would be selected. Setting the Read Only
option prevents the creation of several page level
buttons such as Apply Changes, Delete, and Create.
Leaving the option set to Read and Write will cause the
Create Application wizard to add these buttons for
proper navigation among the pages.
Chart Type: This is up to the user, so their
personal preference should be selected. The authors
like using the Pie Chart for demos like this.
On the User Interface Theme page select Theme 2 and click
The User Interface page
shows a list of the 12 built-in themes from which the
user can choose.
Finally, the Confirmation page. Click the Create button.
When the application
finishes building, there will be a page that allows the user to
either Run the application or to make further edits.
Click on the Run Application icon.
If the login page appears, enter the
User Name: easydev
Password: easydev The password is case-sensitive and
must be entered exactly as it was when creating the user.
Either press the Submit button or hit the Enter key while
focus is still on the password page item.
Congratulations! You have just finished
building an application in HTML DB. As I said earlier, as you
get comfortable with this type of application building, you will
be able to accomplish it in less than 10 minutes. More likely
it will be done in less than five minutes.