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 steps:

1.       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.

2.       On the Load Method page click on the Upload file (comma separated or tab delimited) option and click Next.

3.       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 blank.

§         First row contains column names: verify this is checked.

§         File Character Set: leave this on the default

§         Click Next.

4.       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.

§         Schema: EASYHDB

§         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       MM/DD/YYYY.

§         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.

§         Click Next.

5.       The User Interface Defaults page is shown in Figure 4.2:

§         Singular Name: Conference Attendee

§         Plural Name: 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 form region.

§         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 faster.

§         Click Next.

6.       On the Summary Page:

§         Summarize By Column: Click the PAYMENT column.

§         Click Next.

7.       On the next page:

§         Aggregate by Column: Click on the DONATION column.

§         Aggregate Function to Use: Verify both Sum and Average are       selected.

§         Click Next.

8.       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 payment type.

9.       On the Application Options page:

§         Application Name: Conference RSVP.

§         Create Mode: Verify this is set to Read and Write.

§         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.

§         Click Next.

10.    On the User Interface Theme page select Theme 2 and click Next.

            The User Interface page shows a list of the 12 built-in themes from which the             user can choose. 

11.    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 following:

1.       User Name: easydev

2.       Password: easydev   The password is case-sensitive and must be entered exactly as it was when creating the user.

3.       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.