Building A Web Database Using Contextual Mode Introduction This tutorial will walk you through the steps necessary to build a simple database that you can deploy on the Web. It is assumed that you are already familiar with creating databases in 4 th Dimension. If you are new to 4D it is recommended that you complete the Quick Start Tutorial found on the 4D v6.5 Product Line CD before using this tutorial. There are two basic ways in which a Web browser can connect to a 4 th Dimension Database: Contextual and Non Contextual connections. Context versus Non Context When building a database that will be deployed on the Web, you need to consider how the browser will interact with 4D's Web server. When using contextual mode 4D will create a process and assign that process to handle the interaction between the browser and 4D. The contextual mode causes 4D to keep a current selection of records and variables for each browser connection. In essence, the Web server treats the browser as though it was a 4D client and tracks its navigation through the database. When web serving using the non contextual mode, 4D's Web server acts as a traditional Web Server. It receives HTTP requests and fulfills the request without regard to maintaining a current selection of records or tracking the browser's navigation through the database. 4D Sales Leads Let's assume you are an inside sales representative at a company that sells life insurance specializing in high-risk policies. It is your job to generate leads for the sales people in the field. Each sales person has a laptop that they use to access their email and the Internet. Your job is difficult because you have to call or email the appropriate field representative every time you generate a new lead. Having to contact each representative is time consuming and prevents you from generating more leads. You need an efficient way to relay sales leads to the field. You decide to build a simple database that you can deploy on the Web. This will allow you to enter leads in real time and prevent you from having to contact the sales people individually.
Create The Database Structure Step 1: Create a New Database Called "4D Sales Leads" Double click on the v6.5 Icon Select the "Create a Blank Database" option In the save dialog, type "4D Sales Leads" Step 2: Define the Tables and Fields for the Database Double click on Table 1 to get the Table Properties dialog Rename the Table to "Leads" Create the following fields for the Leads table Leads Table Field Name Lead_ID Gen_Date Gen_Time Sales_ID Name Address City State Zip Phone Email Occupation Contact_By Data Type / Attributes Long Integer / Indexed, Unique Date / Indexed Time / Indexed Long Integer / Indexed Alpha-30 / Indexed Alpha-60 Alpha-30 / Indexed Alpha-2 / Indexed Alpha-10 / Indexed Alpha-12 / Indexed Alpha-30 Alpha-30 Date / Indexed From the Structure Menu create a new table and name it "Sales Person" Create the following field and the Sales Person table Sales Person Field Name Sales_ID Name Region Data Type / Attributes Long Integer / Indexed, Unique Alpha-30 / Indexed Alpha-10 / Indexed
Step 3: Define the Relation Draw a relation from ([Leads]; Sales_ID) to ([Sales Person]; Sales_ID) In the Relation Properties dialog select, "Auto assign related value in subform" The structure for 4D Sales Leads should look similar to Figure 1. Figure 1.
Build the Forms Step 1: User Environment Forms To create simple, quick forms go to the User Environment. From the "Create Default Forms" dialog, select the "Yes for All" button. This will create input and output forms for both tables. Step 2: Build the Web Forms Due to the limitations of HTML, it's a good idea to build specific forms in 4D for deployment on the Web. The simpler the form, the better chance it will be compatible with the more popular Web browsers. Fortunately, 4D has a built-in Web Template just for this purpose. Create a new form for the Leads table In the "New Form Wizard" dialog, name the form "Web Input" The form type should be "Detail Form" Choose the Web Aware template Select the fields, copying the order shown in figure 1 below Click on the "Advanced" button. Select the "Buttons" tab Change the button family from "Meta Balls" to "Magnet" The "Selected Actions" section should include in order: 1. Delete Record 2. Previous Record 3. Next Record 4. Cancel 5. OK Click "OK" From the dialog select "Yes" to create a new template. Name the template "Web Input" Click "Edit"
Figure 2. Now the Leads table needs a Web output form. Create a new form for the Leads table In the "New Form Wizard" dialog, name the form "Web Output" The form type should be "List Form" Choose the Web Aware template Select the fields, copying the order shown in figure 2 below Click on the "Advanced" button. Select the "Buttons" tab Change the button family from "Meta Balls" to "Magnet" The "Selected Actions" section should include "Done". Click "OK"
From the dialog select "Yes" to create a new template. Name the template "Web Output" Click "Edit" Figure 3.
Create a Menu Bar Now that the forms have been created, it's time to design a menu bar that will be displayed when a browser connects to the database. You want the sales people to be able to do two simple things. 1. View a list of all the current leads 2. Query the current leads Step 1: Create the Menu Bar Create Menu Bar #1 from the Menu Bar Editor Add a separator line between the default File and Quit Menu Items Add a Menu and name it "Leads" Add a Menu Item called "List" Add a separator line Add a Menu Item called "QueryÉ" Figure 4 shows what the Menu Bar Editor should look like. Figure 4.
Step 2: Create the Methods for the Menu Bar Create a method that lists the leads for a Web connection `Method: M_List Input Form([Leads];"Web Input") Output Form([Leads];"Web Output") All Records([Leads]) Modify Selection([Leads]) Create a method that displays 4D's built in Web query form `Method: M_Query Input Form([Leads];"Web Input") Output Form([Leads];"Web Output") Query ([Leads]) Modify Selection([Leads]) Step 3: Assign the Methods to the Menu Items Drag and drop the methods to the Menu Bar Editor. Try it out Now that everything is in place, let's try it out. The forms are basic and will need some further work, but the functionality should be complete at this point. Step 1: Create Some Records in the User Environment There is no mechanism for entering leads and sales people into the database from the web. For simplicity sake, each lead and sales person record can be entered from the User Environment. Switch to the User Environment and enter a new record for the Sales Person table Enter and save the information shown in Figure 5 Figure 5.
Create a new record for the Leads table Enter and save the information shown in Figure 6 Figure 6. Step 2: Connect with a browser Now try to connect to the database via a browser. You should see the menu bar we created. Figure 7. Select the "List" menu item
The Web form should look similar to Figure 8 Figure 8. *Note: 4D's display default is set to show an input form if there is only one record in the table. To see the output form you need to enter another records in the Leads table. Cancel the record and choose "QueryÉ" from the menu bar Make sure the Query Editor is displayed correctly. Summary You've now completed a simple database that can be deployed on the Web using the contextual mode. As a lead generator, you now can enter leads into the database and let the sales people extract the leads at will. Once a sales person has contacted the lead they can delete the record. To add more functionality to the database review the next section for ideas.
Polishing the Database Granted, we now have a functioning database but it lacks some formatting and reporting. Here are some ideas that will polish this database into a usable application. Add in the sales person name field in the Leads input form Rearrange the fields in the Web Input form to form a more logical grouping Format the time field Format the date field Change the form labels to a more user friendly format Add a status field for the Lead table