ASP Programming for the Absolute Beginner
.pdf
236
ASP Programming for the Absolute Beginner
form element.
select (there are four types: No Constraints, Text, Integer, and Number), this |
||
can activate the Text Format options of theYdialog box. For example, if you se- |
||
lect the Text option, both the Text format options and the Display Name will |
||
become active. See Figure 10.33. |
L |
|
F |
||
|
||
• In Figure 10.33, we have selected the Text option. This, in turn, enables us to |
||
select what type of text formats we’ll allow to be entered into our textbox |
||
form element (for example, letters,Mdigits, white space, other) as well as the |
||
form field, or enters characters that are not acceptable.
A E message which willTbe displayed if the user does not enter information in the
TRAP Use caution when setting the Text Format properties of a form element. In Figure
10.33, we have set the Text Format properties to allow for letters and white space. However, if the user were to enter any numbers in this field, or any special characters (such as a comma), the error message would be displayed upon submission.
When setting form validation, take time to think about the type of information your users will be entering into the form fields. For example, if you have a form field requiring a phone number, you’d want to set the Text Format property to allow for numbers and special characters (such as a hyphen).
FIGURE 10.33
By selecting
different Data
Types, you can
access specific
form validation
properties.
Team-Fly®
FIGURE 10.34
Setting validation
properties for the
textbox.
•The Data Length section enables you to determine the size of the information entered into the field. Note that there are both maximum and minimum value properties.
•Finally, note the Data Value section, which enables you to set specific parameters regarding not just the size of the information, but also within a range it must fall (this is especially useful for capturing numeric data).
4.Go ahead and set the validation properties for this form element so that your dialog box appears like Figure 10.34.
5.Save and close this page. Now, let’s test our form validation properties in a browser.
Testing Form Validation in a Browser
We can test our form validation properties that have just been set, by loading the page within a Web browser and utilizing either IIS or the Personal Web Server.
1.Load the form page you created above into your Web browser. See Figure 10.35.
2.To see the effect of the validation on the textbox field, go ahead and click the Submit button, with no information entered into that field. See Figure 10.36.
3.When you click Submit without any information in the Name field, you are presented with a validation error, just as we specified in the Form Validation dialog box for this specific form element.
TRICK |
Note that the Form Validation message box indicates it is using JavaScript. Through |
|
|
|
the magic (did someone say convenience?) of FrontPage, the underlying JavaScript |
|
code is inserted into your pages automatically—no programming involved! |
4.When you created the FormA.htm page above, you set the Text Format properties to allow only for text and white space. Try entering some numbers in the Name field, but enter less than 10 numbers. Then, try entering more than 10 numbers and compare the differences in error message you receive. See Figures 10.37
and 10.38.
237
C h a p te r
10
A S P
a n d
H T M L
S c r i pt i n g
w i t h
F ro n t P a g e
2 0 0 0
238
ASP Programming for the Absolute Beginner
FIGURE 10.35
The form you
created above, as
viewed in a Web
browser.
FIGURE 10.38
Form validation in
action.
FIGURE 10.37
Because of our specified validation properties, when fewer than 10 numbers are entered, we are presented with the following error message.
FIGURE 10.38
In this case, we’ve entered more than 10 characters so we’ve met that validation requirement. But, because we have entered numbers rather than text, we are presented with this error message.
Validating Other Form Elements
You can use form validation with other form elements, too. In essence, they all follow the same principle as text boxes, in that you set specific requirements for the type of data that can be entered, selected, and checked.
Let’s take a quick look at the other types of form elements you can apply form validation to, by again looking at our FormA.htm page.
•Double-click on one of the radio buttons, and then click on the Validate button in the Radio Button Properties dialog box. This will display the Radio Button Validation dialog box, as shown in Figure 10.39.
If you don’t select one of the radio button options when validation has been activated, you’ll see the error message as presented in Figure 10.40.
•The other useful form validation feature is for drop-down menus. Although we don’t have a drop-down menu on FormA.htm, Figure 10.41 illustrates the validation dialog box for this form element.
The neat thing about the validation features of the drop-down menu is the Disallow First Item. By selecting this, you prevent the user from (surprise!) selecting the first item in the list. That way, you can use this item as an instructional option (for example, “Select from the following list...”) without worrying about the user actually selecting this option.
TRAP
Remember, as with other practical and useful FrontPage functionality, form validation will require that the FrontPage components be installed on the server.
FIGURE 10.39
When you validate a group of radio buttons, you are in essence requiring that one of them be selected by the user.
FIGURE 10.40
Requiring the user
to select one of the
radio button
choices.
FIGURE 10.41
Setting validation
for a drop-down
menu form element.
239
C h a p te r
10
A S P
a n d
H T M L
S c r i pt i n g
w i t h
F ro n t P a g e
2 0 0 0
240Utilizing the FrontPage 2000 Database Results Wizard
ASP Programming for the Absolute Beginner
As I said at the beginning of this chapter, before allowing FrontPage to automate any of your programming, you should do things by hand first. This includes general HTML code, as well as more advanced programming with ASP.
That said, however, I want to level you: After you gain a basic understanding of how everything fits together—for example, the relationship between ADO and ASP, discussed in Chapter 5—there is no reason not to use an application like FrontPage. If you’ve ever struggled with hand-coding an HTML table, you know how frustrating even the simplest of tables can be. With FrontPage (or another application development tool), you can automate this mundane or routine task, moving on to far more interesting aspects of programming, such as ASP scripting.
However (yes, another however!), you need to be aware of the downside of this, too. In the following sections, I’ll show you how you can use FrontPage to generate automatically most of the code examples you worked through in Chapter 5, including the SQL examples utilizing the SELECT, UPDATE, and INSERT statements. As you work through the examples, you will see the advantages—and disadvantages—in using FrontPage to generate your ASP database connection scripts automatically.
Now you will work through a few examples to learn about the Database Results Wizard:
1.Create a new page within FrontPage, and save it under the name FP_Test.asp within your ABG_ASP folder.
2.From the Insert menu, select Database, Results (see Figure 10.42).
3.The first step in the Database Results Wizard is displayed (see Figure 10.43).
4.Select the Use a New Database Connection radio button, and then click the Create button. The Web Settings dialog box opens. Click the Database tab, and then click Add. The New Database Connection dialog box opens (see Figure 10.44).
FIGURE 10.42
Selecting the
Database Results
Wizard option.
FIGURE 10.43
Beginning the
Database Results
Wizard by first
selecting the
appropriate
database
connection.
FIGURE 10.44
In using the Database Results Wizard, you work with a system DSN, which you learned how to create in Chapter 5.
5.In the Name field, enter DBWizard. Click the System Data Source on Web Server option, and then click Browse.
6.In the System Data Sources on Web Server dialog box, select the Music DSN (see Figure 10.45). You created this DSN during your work in Chapter 5.
7.Click OK, and you return to the New Database Connection dialog box. Click OK again to be returned to the Web Settings dialog box. Select the DBWizard name, and then click the Apply button (see Figure 10.46).
8.After a brief moment, the connection is made. Now, click the OK button to be returned to Step 1 of the Database Results Wizard. The Use an Existing Database Connection option should now be selected, with the DBWizard selection highlighted in the drop-down menu. Click Next, and you are presented with Step 2 of the Database Results Wizard (see Figure 10.47).
9.Leave the default Catalog Record Source option selected, and click Next. Step 3 of the Database Results Wizard is displayed (see Figure 10.48).
FIGURE 10.45
Selecting the system DSN to which you want to make a connection, with the Database Results Wizard.
241
C h a p te r
10
A S P
a n d
H T M L
S c r i pt i n g
w i t h
F ro n t P a g e
2 0 0 0
FIGURE 10.46
Completing the
database
connection process
via the Database
Results Wizard.
242
ASP Programming for the Absolute Beginner
FIGURE 10.47
Specify the record source (in this case, an individual table of the Music database) to which you want to establish a connection and run a SQL query against.
FIGURE 10.48
Note that in Step 3, you are asked to specify which fields from the Catalog table will be displayed when the Database Results Wizard performs its magic.
10.For this example, leave all the fields selected, and click Next. In the next dialog box (Step 4), leave the default selection, and click Next again. You are presented with the final dialog box (Step 5). Again, accept the default selection, and click Finish. Your screen should now look like Figure 10.49.
FIGURE 10.49
FrontPage, via the Database Results Wizard, automatically generates the ASP code, as well as a nicely formatted table (complete with navigation buttons) to view the results of the SQL query also generated as you worked through the wizard’s steps.
FIGURE 10.50
The Database
Results Wizard automatically generates the ASP code that allows this type of interaction with your Music database.
11.Save this page now, and then open it in a Web browser. Your screen should look like Figure 10.50.
Viewing the Automatically Generated ASP Code
You probably have noticed, after working through the exercise, that by utilizing the Database Results Wizard you don’t have to know anything about ASP. Also, after coming this far in the book, you probably have formed an opinion of ASP programming: Either you really like it or you are thinking—after looking at the preceding exercise— that the Database Results Wizard is a gift from heaven. That is, you can work with ASP without knowing anything about it.
I hope that your interest level, combined with the instructional nature of this book, is keeping you firmly in the “I like ASP and want to learn more” camp. Regardless, you should be aware of how FrontPage magically allows you fast and easy Web/database access with just a few clicks of the mouse instead of the programming you’ve been doing so far.
To illustrate this, here is the code generated by FrontPage to make the Database Results Wizard successful:
1.If it isn’t still open, start FrontPage on your computer, and open the FP_Test.asp page, in which you created the Database Results Wizard.
2.Now, click the HTML tab, and view the code generated by FrontPage (see Figure 10.51).
243
C h a p te r
10
A S P
a n d
H T M L
S c r i pt i n g
w i t h
F ro n t P a g e
2 0 0 0
If you’re looking at this code and saying to yourself, “Well, hmm, I see some things in here that I’m familiar with—like SQL queries—but I see a lot of strange things I don’t recognize,” you are not alone. You are recognizing both the pros and cons of working
244
ASP Programming for the Absolute Beginner
FIGURE 10.51
FrontPage
automatically
generates
significant code to
make the Database
Results Wizard work
its magic.
with this type of autogenerated ASP code. Yes, it’s easy to use, and the Database Results Wizard gives you a powerful interface. The downside is that when you try to go into the code to understand and/or customize it, you can run into trouble.
It is for this exact reason that I waited until now to show you a tool like FrontPage and asked you to hand-code all your ASP programming. Admittedly, Notepad is not an ideal programming environment, and, yes, FrontPage handles the routine tasks of Web page development (creation of tables, general formatting, and so on) very, very well. As you’ve just seen, though, there are drawbacks in relying too heavily on all the automation that a tool like FrontPage provides.
Still, when you become familiar and experienced with the foundations of ASP programming (if you’ve made it this far into the book, you are well on your way to reaching that plateau), you should consider a tool like the Database Results Wizard. The following sections walk you through a few more examples of what you can do with it. I also show some of the form automation features of FrontPage and how you can use the two together.
Integrating Forms with the Database Results Wizard
In the example from the preceding section, I showed you a very simple illustration of the Database Results Wizard. Basically, you created a simple SELECT statement and then used the features of the wizard to put the results into a nicely formatted table. For the following example, I’ll show you how to customize the wizard to bring it more in line with some of the other SQL statements you worked with in Chapter 5, “Database Access with ADO,” and Chapter 6, “Using Forms.”
For this example, I will first show you how to use some of the form automation features of FrontPage. Then, after you create your form, you can see how to integrate this with the Database Results Wizard. In essence, you will create two Web pages in this example:
•The first page is a typical HTML form, asking you to enter an artist’s name. You will be using the Music database you worked with in Chapter 5.
•The second page, the form processing page, takes the information entered into the form on the first page and, utilizing the Database Results Wizard, displays to the user all records within the Catalog table of the Music database that match the search criteria (the artist’s name you entered within the form).
1.Create a new page within FrontPage, and immediately save it as SearchForm.asp in your ABG_ASP folder.
2.Enter the text, Please enter in the form field an artist for which you want to search in the Music database.
3.Below this text, you insert the actual form field. From the Insert menu, select Form, One-Line Text Box (see Figure 10.52).
4.You can now use the automated form features of FrontPage to establish the specific properties of both the form field and the form itself. Double-click the form field to open the Text Box Properties dialog box. In the Name field, enter Artist. Your screen should look like Figure 10.53.
5.Click OK to apply your specifications. Now, right-click within the dotted line boundary of the form itself, and from the pop-up menu, select the Form Properties option.
FIGURE 10.52
Inserting a one-line
textbox form field.
FIGURE 10.53
Rather than handcode the specific properties of a form and its various elements, you use the FrontPage wizards and dialogs to automate these tasks quickly.
245
C h a p te r
10
A S P
a n d
H T M L
S c r i pt i n g
w i t h
F ro n t P a g e
2 0 0 0