This section describes how the Web client of the Island Hopper News sample Level C 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\ScenarioC\Source\Web if you accepted installation defaults. For complete information on all the different parts of Level C, see Level C Specification in this chapter.
When you start the Web client (http://servermachine/islandhopperc), the first page you see is Headlines.asp. This is the front page of Island Hopper News, the fictitious online newspaper on which the sample is built. Notice how interesting the page is, visually: moving the pointer over a section block, such as Top Stories, turns the text green and italic, and 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. The other links are there to provide context; in the sample, clicking the other section blocks simply redisplays Headlines.asp. Clicking Classified Ads displays Browse.asp, the Browse/Place an Ad page.
Browse.asp offers you the following two choices.
Although clicking Browse An Ad goes immediately to the Online Classified Advertisement Display page, you must log in with your e-mail address and password to place an ad. If you click Place An Ad without logging in, the text "To place an ad, you must first log in" changes to bold. If you do not have an account yet, click New User to create one.
Notice how the labels change color and style 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.
Choosing Browse An Ad displays AdDisplay.asp, the Online Classified Advertisement Display page. 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.
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_CategoryC component to access the database 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.
AdDisplay.asp also contains a button called Place an Ad. That button displays AdEntry.asp, the form where you can place a new ad.
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 from the server, AdConfirm.asp, but only after the data has been validated.
Place an Ad includes a link to the Customer Maintenance form, CustMain.asp, where you can set up a new user account.
Notice that the Web version of Level C does not include functions for customer maintenance, invoices, or payments. The assumption behind this design is that both the Windows version and the Web version could be used at the same time. Customers would use the Web version via the Internet to browse and place ads; employees at Island Hopper News would use the Windows version at the office to work with customer records, invoices, and payments.