ASP Programming for the Absolute Beginner
.pdf
206
ASP Programming for the Absolute Beginner
<font color="#FF0000"><%=Request.Form("Word19")%></font> for three hours and I'm ready for a vacation from my vacation! I figure it can't get much worse.
Oh, no! It seems the stamp I wanted to use to mail this letter is stuck to my <font color="#FF0000"><%=Request.Form("Word20")%></font>!</font></p> <HR>
<p align="left"><font face="Comic Sans MS" size="3">Would you like to save this ASP MadLib to a text file?</font></p>
<form method="POST" action="MadLibSave.asp">
|
Y |
<p align="left">Please enter a name for this file: <input type="text" |
|
name="MadLibName" size="20"></p> |
L |
<p align="center"><input type="submit" value="Save this ASP MadLib!" |
|
name="B1"></p> |
F |
|
|
<input type="hidden" name="Word1" value="<%=Request. orm("Word1")%>"> <input type="hidden" name="Word10" value="<%=Request.M orm("Word10")%>"> <input type="hidden" name="Word11" value="<%=Request.A orm("Word11")%>"> <input type="hidden" name="Word12" value="<%=Request.Form("Word12")%>"> <input type="hidden" name="Word13"Evalue="<%=Request.Form("Word13")%>"> <input type="hidden" name="Word14"Tvalue="<%=Request.Form("Word14")%>"> <input type="hidden" name="Word15" value="<%=Request.Form("Word15")%>"> <input type="hidden" name="Word16" value="<%=Request.Form("Word16")%>"> <input type="hidden" name="Word17" value="<%=Request.Form("Word17")%>"> <input type="hidden" name="Word18" value="<%=Request.Form("Word18")%>"> <input type="hidden" name="Word19" value="<%=Request.Form("Word19")%>"> <input type="hidden" name="Word2" value="<%=Request.Form("Word2")%>"> <input type="hidden" name="Word20" value="<%=Request.Form("Word20")%>"> <input type="hidden" name="Word3" value="<%=Request.Form("Word3")%>"> <input type="hidden" name="Word4" value="<%=Request.Form("Word4")%>"> <input type="hidden" name="Word5" value="<%=Request.Form("Word5")%>"> <input type="hidden" name="Word6" value="<%=Request.Form("Word6")%>"> <input type="hidden" name="Word7" value="<%=Request.Form("Word7")%>"> <input type="hidden" name="Word8" value="<%=Request.Form("Word8")%>"> <input type="hidden" name="Word9" value="<%=Request.Form("Word9")%>"> </form>
<hr>
<p align="left"><font face="Comic Sans MS" size="3"> <a href="http://localhost/ABG_ASP/MadLibHome.asp">No
thanks, I want to generate another ASP MadLib!</a></font></p>
</body>
</html>
This game and the two pages that compose it are particularly good examples of how to apply the techniques in this chapter because both pages are very heavy with static or hard-coded text. If the game programmer (you!) wanted to make changes to these pages,
Team-Fly®
he would have to work directly within the Web page code itself rather than simply open a database and make the change there.
You can remedy this situation and make the game code easier to understand and more efficient.
Improving ASP MadLibs!:
Integrating with a Database
If you look closely at Listing 9.9, you can see that the HTML to compose the table has been hard-coded into the page. Recall from the section “HTML Formatting—Beyond the Basics” that I explained how you can drastically cut down the amount of code required to build a typical HTML table, by using simple For...Next loops.
You can do the same thing with the MadLibHome.asp page and its table. However, you must first create an Access database to integrate with this game. Even though you are probably familiar with the process of creating an ODBC connection for use within your ASP page, here is the process again. (For a general overview of Microsoft Access basics, see Appendix C, “Access Essentials.”)
1.Create the database by opening Microsoft Access and selecting File, New. When the New dialog box appears, select Database and click OK.
2.In the File New Database dialog, name the database MadLib, and save it in your ABG_ASP directory in the Inetpub folder.
3.You can now begin creating tables within the database. From the Insert menu, select Table.
4.Within the New Table dialog box, select Design View and click OK.
5.Enter the table field names so that your table looks like Figure 9.11.
207
C h a p te r
9
F o r ma t t i n Pr g o c e s s O ed u t p ut
FIGURE 9.11
Make sure that your
fields are named
and configured
exactly as you see
them here.
208 |
6. Close the table. You are asked to give it a name. Name it WordInfo, as shown in |
|
Figure 9.12. |
ASP Programming for the Absolute Beginner
7.Open the table in datasheet view, and enter each of the 20 words. For the Word field, enter the number of the word (Word1, Word2, Word 3) and for the Type field, enter the element of speech that each of the individual words is calling for (refer to Figure 9.9 to determine the element of speech each word should be). Figure 9.13 illustrates how your table should appear.
8.Now you are ready to establish the ODBC connection to this database. Depending on your version of Windows, navigate to the ODBC Data Source Administrator dialog box. Click the System DSN tab, and click Add.
9.In the Create New Data Source dialog box, select the Microsoft Access Driver option, and click Finish (see Figure 9.14).
FIGURE 9.12
Save the table using
the name WordInfo.
FIGURE 9.13
Entering this information in the database makes your code shorter and easier to change at a later date.
FIGURE 9.14
Preparing to create
the ODBC
connection for the
MadLib.mdb
database.
FIGURE 9.15
Configuring the
MadLib.mdb
database so that it
can be accessed
via ODBC.
10.In the ODBC Microsoft Access database, configure it so that it looks like Figure 9.15.
11.Click OK. Your connection is now added to the System DSN tab.
Improving ASP MadLibs!: Dynamic Page
Formatting
Now that the database is created, you can do some things to improve the code on the MadLibHome.asp page. In the revised code in Listing 9.11, see whether you can spot the changes (many of which are discussed in this chapter).
Listing 9.11 MadLibHome_REV.asp
<html>
<head>
<title>Welcome to ASP MadLibs!</title> </head>
<body>
<p><font face="Century Gothic" size="5"><i>It's Time to Play...</i></font></p> <p align="center"><font face="Comic Sans MS" color="#FF0000" size="6">ASP MadLibs!</font></p>
<hr>
<p align="left"><font face="Century Gothic">Please enter the requested type of word for each space below:</font></p>
<form method="POST" action="MadLibProcess_REV.asp"> <p>
<table border="1" width="100%" height="139"> <tr>
<%
i=0
Set TableFormat=Server.CreateObject("ADODB.Recordset") sqlstmt="SELECT * FROM WordInfo"
TableFormat.Open sqlstmt, "DSN=MadLib", 3, 3, 1
DO WHILE NOT TableFormat.EOF
i=i+1
%>
209
C h a p te r
9
F o r ma t t i n Pr g o c e s s O ed u t p ut
210
ASP Programming for the Absolute Beginner
<td width="25%" align="center" height="23"><input type="text" name= "<%=TableFormat("Word")%>" size="15" value="(<%=TableFormat("Type")%>)"></td> <%
IF i=5 then i=0
%>
</tr>
<tr>
<% END IF
TableFormat.MoveNext
Loop
TableFormat.Close
Set TableFormat=Nothing %>
</table>
<hr>
<p align="center"><input type="submit" value="Create My ASP MadLib Now!" name="B1"></p>
</form>
</body>
</html>
Quite a bit shorter, isn’t it? However, when this new page is loaded into a Web browser, it appears exactly the same as the original MadLibHome.asp page (refer to Figure 9.9). To ensure that you understand how this code has been shortened and improved, take a moment to review the following:
•First, the introductory welcome message is displayed, and the opening <table> tag is inserted.
•Next, a connection is established to the MadLib database, and a SQL query is run to return all the records from the WordInfo table.
•To run through the entire recordset so that each particular record is viewed, you use a DO WHILE loop.
•If you look at how the table is formatted and displayed on screen, there are only four fields per row. To format the table dynamically (that is, so that a new row is inserted after four cells have been placed), you use a simple variable (i) that increases by 1 each time through the loop. When this variable reaches 5, the closing row tag (</tr>) is inserted, and this variable is reset to 0.
•For each column (<td>) of the table, the default value that should appear in each text box, as well as the name of each text box, is derived from the information stored within the WordInfo table of the database:
<td width="25%" align="center" height="23"><input type="text" name=
"<%=TableFormat("Word")%>" size="15" value="(<%=TableFormat("Type")%>)"></td>
In the section “Creating Dynamic Form Elements,” you saw how you can dynamically name and assign form elements. The preceding code is a prime example of
how this is done. Both the form element name and value are set dynamically, based on information contained within the database. Note how this technique drastically cuts down on the length of this code.
•Finally, the connections to the database are closed, and a Submit button is inserted so that the information the player enters can be passed on to the
MadLibProcess_REV.asp page.
Now that you have improved the MadLibHome.asp page, see what you can do to the MadLibProcess.asp page. Take a look at the revised code in Listing 9.12.
Listing 9.12 MadLibProcess_REV.asp
<html>
<head>
<title>Here's Your ASP MadLib!</title> </head>
<body>
<p><font face="Century Gothic" size="5"><i>Thank you! And now, here is your </i></font></p>
<p align="center"><font face="Comic Sans MS" color="#FF0000" size="6"> ASP MadLib!</font></p>
<hr>
<p align="left"><font face="Comic Sans MS" size="3">Dear <font color="#FF0000"> <%=Request.Form("Word1")%> ,</font></p>
<p align="left"><font face="Comic Sans MS" size="3">I am having the most interesting vacation. I've seen so many strange things. Upon my arrival at the airport, a <font color="#FF0000"><%=Request.Form("Word2")%> </font>
man and I mixed up our luggage. At the hotel, I opened his suitcase to find three <font color="#FF0000"><%=Request.Form("Word3")%>s</font> and a <font color="#FF0000"><%=Request.Form("Word4")%></font> toothbrush. I nearly
<font color="#FF0000"><%=Request.Form("Word5")%></font> out of there when I discovered a
<font color="#FF0000"><%=Request.Form("Word6")%></font> wrapped in tissue paper. I took the
<font color="#FF0000"><%=Request.Form("Word7")%></font> man's luggage down to the hotel clerk. The clerk began to
<font color="#FF0000"><%=Request.Form("Word8")%></font> when I told him about the mix-up. He pointed his
<font color="#FF0000"><%=Request.Form("Word9")%></font> at a <font color="#FF0000"><%=Request.Form("Word10")%></font> man standing in the
lobby, wearing my <font color="#FF0000"><%=Request.Form("Word11")%></font> on his head!</font></p>
<p align="left"><font face="Comic Sans MS" size="3">After straightening out the luggage mix-up, I decided to do some sight-seeing. I hardly had made it
211
C h a p te r
9
F o r ma t t i n Pr g o c e s s O ed u t p ut
212
ASP Programming for the Absolute Beginner
out of the hotel when I immediately noticed the sky darkening, and it began to rain <font color="#FF0000"><%=Request.Form("Word12")%>s</font>.
I ran for cover into the closest <font color= "#FF0000"><%=Request.Form("Word13")%></font> I could
find, but I <font color="#FF0000"><%=Request.Form("Word14")%></font> into an <font color="#FF0000"><%=Request.Form("Word15")%></font>
group of school children. They began laughing and pointing at me. </font></p>
<p align="left"><font face="Comic Sans MS" size="3">I checked my reflection in a storefront window, only to discover I had the <font color= "#FF0000"><%=Request.Form("Word16")%></font>
man's <font color="#FF0000"><%=Request.Form("Word17")%></font> hanging from my <font color="#FF0000"><%=Request.Form("Word18")%></font>! Wow! I've only been
<font color="#FF0000"><%=Request.Form("Word19")%></font> for three hours and I'm ready for a vacation from my vacation! I figure it can't get much worse.
Oh, no! It seems the stamp I wanted to use to mail this letter is stuck to my <font color="#FF0000"><%=Request.Form("Word20")%></font>!</font></p> <HR>
<p align="left"><font face="Comic Sans MS" size="3">Would you like to save this ASP MadLib to a text file?</font></p>
<form method="POST" action="MadLibSave.asp">
<p align="left">Please enter a name for this file: <input type="text" name="MadLibName" size="20"></p>
<p align="center"><input type="submit" value="Save this ASP MadLib!" name="B1"></p>
<%
For i=1 to 20 Word="Word"&i Word=Evaluate(Word) %>
<input type="hidden" name="Word<%=i%>" value="<%=Word%>"> <%
Next %>
</form>
<hr>
<p align="left"><font face="Comic Sans MS" size="3"> <a href="http://localhost/ABG_ASP/MadLibHome.asp">No
thanks, I want to generate another ASP MadLib!</a></font></p> </body>
</html>
Although fewer changes have been made to this page, note the end of the code where, using a For...Next loop and the Evaluate function, you significantly reduce the amount of static code used to define and assign the 20 hidden form fields.
TRICK |
You could place the entire ASP MadLib story template into a database and then |
|
|
|
have it read directly from there. See exercise 3 at the end of this chapter for more on |
|
this possibility. |
Summary
In this chapter, I showed you various techniques for integrating basic HTML with your VBScript to produce efficient, easy-to-understand code. By looking at forms and form elements, hyperlinks and QueryStrings, table formatting and integration with Access databases, taking advantage of the various functions available within VBScript (especially the looping capabilities, combining them with the power to step through a returned SQL query recordset), you can add an entire new dimension to your ASP pages. When working on your pages and designing your databases, always be on the lookout for how you can make your coding more efficient. Your code will be more functional and easier for both you and others to understand.
E X E R C I S E S
Try these exercises to improve your understanding of the techniques described in this chapter.
1.Dynamically create three tables within an ASP Web page so that you have only one hardcoded set of opening and closing <tr> and <td> tags. Using loops and other techniques you’ve learned, build the table with as little code as possible.
2.Design a simple database, and then query it using the ADO techniques you have mastered. Then, pass the information you query from the database to another page via a QueryString. Have the page that processes the information read and manipulate the information stored in the QueryString.
3.Looking again at the ASP MadLibs game, place the entire story template into a new table in the MadLib.mdb database. As the game is executed, read and integrate the information from the story template database into the game itself (in other words, program the game so that none of the story template is hard-coded into the MadLibProcess_REV.asp page).
4.Go back and look at another game you’ve programmed in this book to see whether you can apply techniques from this chapter to minimize the game code and make it more efficient.
5.Finally, after you do exercise 4, compare it to the original code. What are the major changes you made? Can you remember to think about these more efficient methods of programming before you write even one line of code? Doing so will save you a tremendous amount of time in the long run and also remind you to plan and sketch out your Web pages (and corresponding databases) before you start to program or develop them.
213
C h a p te r
9
F o r ma t t i n Pr g o c e s s O ed u t p ut
This page intentionally left blank
10C H A P T E R
ASP and HTML Scripting with FrontPage 2000
In this chapter, you will
•Become familiar with the general interface of FrontPage 2000, through an introduction to its primary features and functions.
•Utilize FrontPage with your Web server so that you can use it as part of a complete Web development environment.
•Learn to appreciate how, by taking advantage of its numerous wizards and other automated features, FrontPage can significantly cut the time you spend on mundane or routine tasks involved with ASP programming.
•Review the ADO/SQL examples you worked through in Chapter 5, “Database Access with ADO,” via the FrontPage 2000 Database Results Wizard.