This section describes how the Web client application of the Island Hopper News sample Level A works, including both what you see as a user and what happens behind the scenes. If possible, run the application as you read through this section, and look at the source code, which you'll find in Program Files\IslandHopper\ScenarioA\WebA if you accepted the installation defaults. Remember that you must use Internet Explorer 4.0 or higher. For complete information on all the different parts of Level A, see Level A Specification in this chapter.
When you start the Web client, the first page you see is Headlines.asp. This is the front page of Island Hopper News, the fictitious online newspaper that the sample is built on. Notice how interesting the page is, visually: moving the pointer over a section block, such as Top Stories, turns the text yellow. Also, the photographs on the right rotate, as do their headlines. Headlines.asp uses JavaScript and DHTML to achieve the visual effects. Look at the source code for information on how it's done.
Although you can click any of the five section blocks, the only one that displays a different page is Classified Ads. Clicking the other section blocks simply redisplays Headlines.asp. Click Classified Ads to display Browse.asp, the Browse/Place an Ad page.
Browse.asp offers you the following two choices.
Notice how the labels change color when you move the pointer over them. Other items of interest on this page include another series of rotating images on the right and the navigation bar at the bottom. Like Headlines.asp, Browse.asp uses JavaScript and DHTML to produce these effects; look at the source code for Browse.asp to see how it's done. If you're interested in the navigation bar, look at NavigationBar.js.
Click Browse An Ad to display the Online Classified Advertisement Display page, AdDisplay.asp. This page consists of two parts: the list of categories on the left and the list of ads on the right. Click a category to see the ads in that category, and then click the title of an ad to see the text of the ad. AdDisplay.asp also contains a button called Place an Ad. That button displays AdEntry.asp, the form where you can place a new ad.
The list of categories is populated by a server-side script called DisplayCategories. You can see this script if you look at the code for AdDisplay.asp. The DisplayCategories script instantiates the db_CategoryA component to access the database, Classifieds.mdb, and return a list of all the categories in the Categories table.
The list of ads is an additional frame populated by AdsList.asp. AdsList.asp is passed the ID of the selected category; it then displays the ads that apply to that category. To see how this is done, look at the code for AdDisplay.asp.
You can place new ads with the Online Classified Advertisement Entry page, AdEntry.asp. This page presents a form that you fill out to specify your ad, the category it belongs in, how long you want it to run, and your e-mail address and phone number. When you are satisfied with the ad information, click Preview to see how your ad will look when it is displayed online. You can change the ad if you want, and then click Submit to place the ad in the database.
The ad preview function is part of AdEntry.asp; clicking Preview does not request another page from the server. This ensures quick performance for users. The ad submit function does request another page (AdConfirm.asp) from the server, but only after the data has been validated.