Chapter 27. Building a Basic ASP Site

CONTENTS

graphics/01icon01.gif

 

  •  Setting Up Your Workstation to Work with ASP
  •  Setting Up an ASP Site in Dreamweaver
  •  Setting Up a Database Connection
  •  Displaying Dynamic Data
  •  Summary

One of the friendliest and easiest to set up of all the server technologies, Active Server Pages (ASP) can be a good place to start learning to build dynamic sites; it also can be a cost-effective and simple solution for commercial jobs, as long as your company has access to Windows-based computers for your web hosting. This chapter takes you through the steps of setting up your workstation to work with ASP, creating an ASP site in Dreamweaver, and creating a basic live data page. Along the way, you'll get used to examining ASP code and learn how this script-based language constructs HTML documents for browser display.

Setting Up Your Workstation to Work with ASP

Setting up can be the hardest (and scariest) part of creating a dynamic site. Before you can start creating pages, you need to set up a web server and an application server; set up your database, and database management system; create a database driver; and set up a folder where your web pages can officially be "served" by the web server. The following sections take you through that process for ASP.

Setting Up the Web Server and Application Server

ASP works with the IIS (Internet Information Services) and PWS (Personal Web Server) web servers, on Windows computers. The good news is, if you followed the instructions in the preceding chapter, and either installed or are connected to a computer running IIS or PWS, you're all set for ASP! Unlike other application server technologies, ASP functionality does not need to be installed separately from the web server it's already built in. (Of course the bad news is, if you're not using one of these servers, you can't use ASP.)

Setting Up the Database

The computer housing your web server must have a database management system (DBMS) installed on it. For development purposes, most web authors use Microsoft Access with ASP; if you prefer, you can use MySQL instead. (See Appendix C, "Introduction to MySQL," for detailed instructions on setting up MySQL for use with the exercises in this book.)

After you have the database in place, you also need to create a driver that connects to it.

The Antiques Database

The exercises in this chapter use the antiques.mdb database. It's available on the CD as an Access or MySQL database.

If you're using Access as your DBMS, open the databases folder on the CD and copy the antiques_access folder to the computer where your web server is installed. The folder can be stored anywhere you like.

If you're using MySQL as your DBMS, open the databases folder on the CD and copy the antiques_mysql folder to the computer where your web server is installed. The folder must be stored in the mysql/data directory. (See Appendix C for more detailed instructions on installing the antiques database for use with MySQL.)

The Driver

The driver allows the application server to communicate with the database. It can be set up only after you have properly copied the database to your host computer. Follow the instructions in the preceding chapter to set up your driver. Figure 27.1 shows a driver being created for the Access version of the antiques database.

Figure 27.1. Creating the AntiquesBarn database driver (Access).

graphics/27fig01.gif

Setting Up Your Local and Remote Folders

Dreamweaver dynamic sites must have local and remote folders, just like any Dreamweaver site. If you have your web server installed on the same computer you're developing on, both folders will be on the same computer.

To set up your local root folder, copy the chapter_27 folder from the CD onto your computer. Its exact location doesn't matter for the exercises.

Your remote folder will be called antiques_asp and must be located on the same computer running the IIS/PWS server and must be recognized by IIS/PWS as a shared directory for web serving. To accomplish this, do the following:

  1. Somewhere on the computer where the IIS/PWS server is located, create a folder called antiques_asp.

  2. In Windows Explorer, right-click on the antiques_asp folder, and from the contextual menu choose Properties.

  3. Bring the Web Sharing tab to the front and select Share This Item.

  4. When the Edit Alias dialog box appears, leave the alias name at the default (antiques_asp) and set the access permissions to Read/Write, and the application permissions to Scripts.

If you're working on a Mac and are networking to a Windows computer for your ASP development, you'll also have to set up FTP sharing for the remote folder. To accomplish this, do the following:

  1. On the computer where the IIS/PWS server is located, go to Start > Control Panel > (Administrative Tools) > IIS or Start > Control Panel > PWS.

  2. When the server management window opens, expand the hierarchical list on the left until it shows the local computer's Web Sites and FTP Sites options.

  3. Expand the FTP Sites folder to show the Default FTP Site.

  4. Right-click on the Default FTP Site, and from the contextual menu choose New > Virtual Directory.

  5. Follow the Virtual Directory Creation Wizard, giving your FTP site an alias of antiques_asp and selecting the antiques_asp remote folder created earlier as the folder to share.

Setting Up an ASP Site in Dreamweaver

After you've got your workstation files set up, it's time to tuck into Dreamweaver. The first step here is to define a site, complete with local, remote, and application server information. Dreamweaver needs to know where your local and remote folders are. It also needs to know what kind of dynamic site you'll be creating (ASP); and, because ASP pages can be written using either JavaScript or VBScript, it needs to know which of those to use. Finally, it needs to know how to communicate with your web server.

The main difference between using Dreamweaver for static and for dynamic sites is how it previews your pages. In a static site, when you choose Preview in Browser (F12), Dreamweaver launches the browser and passes it the local address of the current page:

C:\Client Files\Web\My Local Site\index.html

or

file:///Client Files/Web/My Local Site/index.html

In a dynamic site, it's not enough just to view the pages in a browser. Dreamweaver has to activate the web server, passing it an HTTP request so that it processes the files. This requires an address like this:

http://localhost/mysite/index.html

or

http://192.128.164.123/mysite/index.html

That's why, when you define a dynamic site, you must go through the additional steps of making sure Dreamweaver can connect with your server and "serve" your pages.

Exercise 27.1 Setting Up the Antiques Barn Site

In this exercise, you define a dynamic ASP site in Dreamweaver using the Site Definition dialog box. Make sure you've set up your workstation before going through the exercise.

  1. In Dreamweaver, go to Site > New Site. In the Site Definition dialog box that appears, click the Advanced tab to bring it to the front.

    What about the wizard? In this exercise, you're using the Advanced tab of the Site Definition dialog box. The information is more compactly presented using this method, easier to see and troubleshoot. After you have the site defined and working, check out where Dreamweaver has stored your site information in the Basic and Advanced tabs, to see how the two methods of site definition compare.

  2. From the Categories list, choose Local Info. Local site information for a dynamic site is no different from any site information. Name your site Antiques Barn ASP. For the local root folder, browse to the chapter_27 folder you copied from the CD.

  3. From the Categories list, choose Remote Info. You'll enter different information here depending on how you set up your workstation (as discussed earlier in this chapter).

    If you're working on the same computer that's running your web server, set your access method to Local/Network and browse to the shared remote antiques_asp folder you defined earlier (see Figure 27.2).

    Figure 27.2. The Remote Info setup for the Antiques Barn site, if your Dreamweaver site and your web server are on the same computer.

    graphics/27fig02.gif

    If you're connecting to a different computer for your web server, choose FTP access. Enter the IP address of the other computer and username password, if needed (see Figure 27.3). Refer back to the discussion on IP addresses in the preceding chapter, if necessary.

    Figure 27.3. The Remote Info setup for the Antiques Barn site, if your web server software is on a different computer than your Dreamweaver site.

    graphics/27fig03.gif

    Note

    graphics/01icon07.gif

    Use FTP access even if your two computers are networked directly.

  4. From the Categories list, choose Testing Server. For server model and language, choose ASP JavaScript. If the access information hasn't been filled in for you, choose the same Local/Network or FTP access information you chose in the preceding screen (see Figure 27.4 or Figure 27.5).

    Figure 27.4. The Testing Server setup for the Antiques Barn site for a single workstation.

    graphics/27fig04.gif

    Figure 27.5. The Testing Server setup for the Antiques Barn site for a computer networked to a web server.

    graphics/27fig05.gif

    JavaScript or VBScript? ASP works equally well with either language. Which one you choose depends on which language you're more comfortable with. JavaScript has been chosen for these exercises, on the assumption that you're probably used to looking at the JavaScript code used for regular (client-side) behaviors in Dreamweaver. If you prefer to work in VBScript, choose that in the dialog box. You'll then have to open all ASP files in the AntiquesBarn folder and change the opening line of each file to read <%@language="vbscript"%>.

    If you're using FTP access, you also have to enter the name of the FTP shared folder you or your network administrator created on the other computer. After you have done this, click the Test button to see whether you entered your settings correctly. (If you cannot connect successfully, double-check everything IP address, folder name, username, and password.)

    Also in this screen, examine the URL Prefix field. Dreamweaver should have filled in this information based on your previous entries. If you're working on one computer, the address will include the localhost or 127.0.0.1 IP address. If you're working on two connected computers, the address will include the host computer's actual IP address. This is the URL information Dreamweaver will use every time you preview your pages in the browser. It must be correct!

    Note

    graphics/01icon07.gif

    If you defined your shared directory as a virtual directory in IIS or PWS, you might have chosen a different name for the actual folder and for the folder-as-virtual-directory. You must refer to the correct name! Pay attention to the way the addresses are constructed in the input fields. If the address starts with file:// or C:\\, you must use the actual folder name. If the address starts with http://, you must use the virtual directory name. (For the examples here, the same name was used in both places definitely easier to keep track of.)

    When you think all the site information is correct, click OK to close the dialog box. It's time to test things out.

  5. From your local root folder, open index.html and Preview in Browser (F12). You're probably in for a nasty surprise. Either the page will display with broken images or you'll get a File Not Found error. Why is this happening?

    When you're working on a dynamic site, Dreamweaver uses the remote folder to generate its previews. (As explained earlier, this has to happen so that the page can be served rather than merely viewed.) Currently, your remote folder contains nothing! You must get in the habit of uploading files to the remote folder before previewing.

    In the Site panel, select all the files in your site, and click the Put button to upload them all. Then try previewing again. If you entered the correct information in your Site Definition dialog box, you will be able to preview the page. The browser's Address field will show the http:// address of the home page, not its file location on your computer. (If you can't preview, keep double-checking those site settings until you can. You cannot keep working in Dreamweaver until you get this part right.)

Setting Up a Database Connection

In ASP terms, the database connection is a script that calls on the driver to talk to the database. Dreamweaver creates this script for you and stores it in a special connections file when you choose data source name (DSN) from the Databases panel. Because this information gets stored in a special file that can be accessed by any ASP page in your site, you have to define the connection only once for the entire site.

Exercise 27.2 Creating a Database Connection

In this exercise, you create the connection script that will allow your pages to communicate with the antiques database. You must already have installed your database and created a driver for it (as outlined in the preceding section) before continuing with this exercise.

  1. Because Dreamweaver has to know what kind of connection to create, you must have a dynamic document open before you can create the connection. From your local site, open catalog.asp.

  2. From the Application panel group, open the Databases panel. If you have catalog.asp open, the panel will have a plus (+) button at the top. Click it and, from the pop-up menu, choose data source name (DSN). Figure 27.6 shows this happening.

    Figure 27.6. Choosing a DSN from the Databases panel.

    graphics/27fig06.gif

  3. The Data Source Name dialog box will appear. For your connection's name, enter antiques_conn. (The connection name will be used in the connection script. It can be any one-word name with no special characters, but it's common practice to include con or conn in the name.)

  4. If your server is on your working computer, the radio buttons at the bottom of the dialog box should be set to Using Local DSN, and there will be a pop-up list of drivers. Choose AntiquesBarn from the list. (Clicking the Define button will open the ODBC control panel.) If your server is on another computer, the radio buttons should be set to Using DSN on Testing Server, and the dialog box will include a DSN button. Click that button to get a list of DSNs and choose AntiquesBarn from that list. Figure 27.7 shows both of these possibilities.

    Figure 27.7. Defining the antiques_conn DSN on a computer housing a web server (Windows) and on a computer networked to a server (Mac).

    graphics/27fig07.gif

    Tip

    graphics/01icon07.gif

    Occasionally, Mac users will not be able to get a pop-up list of drivers. If this happens to you, carefully type in the name of the driver in the DSN input field. As long as the name is exactly correct, and you have set up a successful link to the host computer in the Site Definition dialog box, this will work.

  5. If you specified a name and password when you defined the driver, enter them here. Otherwise, you can leave these fields blank.

  6. Before leaving the Data Source Name dialog box, click the Test button. If Dreamweaver can find the driver, you'll get a Connection Successful message. The most common reasons for failing the test are incorrect names and passwords, and incorrectly named DSNs. (If you chose the name from a pop-up menu, this won't be an issue.) After you've passed the test, click OK to close the dialog box.

  7. The Databases panel will now contain an icon representing your connection. (Congratulations!) You can now use this panel to explore your database. Expand the connection icon to see Tables, Views, and Stored Procedures. The antiques database contains only tables. Expand the Tables icon all the way to see that the database contains two tables stockitems and customers and to see what columns (information fields) each table contains. You cannot see the records stored in the database from here, but you can examine its structure (see Figure 27.8).

    Figure 27.8. The Databases panel showing the structure of the antiques database.

    graphics/27fig08.gif

  8. In the Site panel, examine your local root folder. You'll see a new connections folder. Inside that folder is the antique_conn.asp file. That file contains your connection script. Open that file and examine it in Code view. You'll see the following connection script:

    <%  // FileName="Connection_odbc_conn_dsn.htm"  // Type="ADO"  // DesigntimeType="ADO"  // HTTP="false"  // Catalog=""  // Schema=""  var MM_antique_conn_STRING = "dsn=AntiqueBarn;"  %>

    You don't need to know what everything in there means. However, one important piece of syntax that you should get familiar with is the <%...%> tags. All ASP code in an HTML document is contained within these tags. Whatever code is inside the tags must be valid JavaScript (or VBScript, if that's the language you chose when setting up). When the application server processes this page, it looks for these tags and executes all code inside them. All other code on the page is assumed to be regular HTML or client-side scripting and is just passed back to the browser.

Displaying Dynamic Data

Probably the most basic task you'll want your ASP pages to perform is to display information from a database. This involves creating a framework of static page elements (banner, navigation controls, a table for layout, and so forth) and adding dynamic text and pictures like a catalog page in a commerce site shows pictures and descriptions of items for sale.

Displaying dynamic data involves several tasks. First, you must query the database to collect the information you want to display (which records, which fields, in what order, and so on). This collected information is called a recordset. Then you create a dynamic element for every field you want to display. (A field is a column in one of the database tables, remember.) Then, unless you want your page to display only information from the first record it finds, you must create special code that steps through all the collected records and displays them one after the other. In Dreamweaver language, this is called creating a repeating region, and it can be refined through various recordset navigation controls.

Collecting a Recordset

In Dreamweaver, you collect a recordset with the Bindings panel, in the Application panel group. To collect the recordset, follow these steps:

  1. Open the Bindings panel, click the plus (+) button and choose Recordset (Query).

  2. In the Recordset dialog box that opens, choose whatever database elements (usually table columns, which translate into record fields) you want.

    Note

    graphics/01icon07.gif

    When you choose items in the Recordset dialog box, you're actually telling Dreamweaver how to write a SQL query for you. To see the actual SQL syntax, click the Advanced button and examine the SQL input field. (Click the Simple button to get back to the standard dialog box.) See the preceding chapter for an brief overview of SQL.

  3. After you've collected the recordset, the collected columns will appear in the Bindings panel. Because Dreamweaver has to write an ASP script to collect the recordset, technically speaking the collection action is a behavior. It will appear in the Server Behaviors panel (in the Applications panel group).

You also can create a recordset by going to Insert > Application panel, and choosing the Recordset object. Doing this is exactly the same as using the Bindings panel. Think of it as a shortcut.

Exercise 27.3 Collecting Data for the Antiques Barn Catalog Page

In this exercise, you add dynamic elements to the catalog.asp page, which already has its static layout elements in place. This page is meant to display all the items for sale at the Antiques Barn, so you'll collect information from the stockitems table of the antiques database. You'll display a picture, name, description, and price for each item (see Figure 27.9).

Figure 27.9. The Antiques Barn catalog page being served with one record displaying.

graphics/27fig09.gif

  1. Begin by opening catalog.asp. Examine the layout structure in Design view, and you'll see that the middle row of the main layout table is ready and waiting for a picture in one column and various text items in another.

  2. First, you have to query the database to collect some data to play with. From the Application panel group, open the Bindings panel. Click the plus (+) button and, from the menu, choose Recordset (Query). The Recordset dialog box appears.

  3. You can give your recordset a custom name or accept the default name. (For the examples shown here, the default name is used.) If your DSN connection (antiques_conn) doesn't automatically appear in the Connections field, choose it from the pop-up menu. That will populate the rest of the dialog box with information from the antiques database.

  4. You want information from the stockitems table, so choose it from the Tables pop-up menu. You don't need to collect all the columns (fields). For columns to choose, select the Selected radio button. Then Ctrl/Cmd-click to choose itemname, description, price, and imagefile. Choose to sort the information based on itemname, ascending (from A Z). Figure 27.10 shows the completed dialog box and resulting Bindings panel.

    Figure 27.10. Collecting the recordset for the Antiques Barn catalog page and the resulting Bindings panel.

    graphics/27fig10.gif

    Tip

    graphics/01icon07.gif

    From within the Recordset dialog box, click the Test button to see what information your recordset will collect. This is a handy way to make sure you've collected the proper set of data, before you get too far into the process of making the page.

  5. Click OK to close the dialog box. The Bindings entry is made and the appropriate code is placed in your code.

Inserting Dynamic Elements

Data from the database can be inserted anywhere in your document. Names, prices, and descriptions can become dynamic text elements you can even format them using all the standard HTML and CSS text options. Database fields also can be used behind the scenes, to help construct the HTML code of your page. Therefore, although most databases cannot contain images or other media elements, a field might contain a filename that can be used in the src parameter for an <img>. This is how you insert dynamic images into your pages. (For details on creating dynamic text, see the dynamic data sidebar in Chapter 4, "Working with Text." For more on dynamic images, see the sidebar in Chapter 5, "Working with Images.")

Most databases used for dynamic sites cannot contain actual media, such as images or sound files. They can contain only text.

Exercise 27.4 Displaying Dynamic Data in the Antiques Barn Catalog Page

In this exercise, you use the recordset you collected in the preceding exercise to create dynamic text and image elements for catalog.asp. You also familiarize yourself with the Live Data previewing options in Dreamweaver.

  1. Open catalog.asp, if it's not already open. In the Applications panel group, open the Bindings panel and expand the view of your recordset so that you can see the individual fields you have collected.

  2. It's easiest to start with the dynamic text elements. As you can see from Figure 27.9, the rightmost column of the layout table should contain the item name, description, and price, each in its own paragraph.

    Inserting a dynamic text element can be done in various ways. By far the simplest is just dragging the desired field from the Bindings panel to the proper place in the Document window. Try that method for the first text element drag the itemname field into the layout table (see Figure 27.11).

    Figure 27.11. Inserting a dynamic text element by dragging a field name from the Bindings panel.

    graphics/27fig11.gif

    When in the document, the dynamic element becomes a text placeholder. In Design view, it looks like {Recordset1.ItemName}. Switch to Code and Design view, and you'll see that the ASP code looks like this:

    <%=(Recordset1.Fields.Item("itemname").Value)%>

    You should already recognize the ASP tag structure. The <%= tag means "insert the following value here." The code in parentheses refers to the itemname column. When the server sees that code, it will substitute whatever text is in that field for the current record.

  3. As far as Dreamweaver is concerned, this item is a stand-in for real text. To demonstrate that, stay in Code and Design view but use Design view to select the new placeholder. From the Property inspector, apply paragraph formatting (choose Paragraph from the Format pop-up menu). Note that, in the code, the placeholder is now surrounded by <p> tags:

    <p><%=(Recordset1.Fields.Item("itemname").Value)%></p>

    From the Design panel group, open the CSS panel. With the placeholder text still selected, choose the itemname style class. Then display changes to accept the new formatting, and your code changes to the following:

    <p class="itemname">  <%=(Recordset1.Fields.Item("itemname").Value)%>  </p>

    The placeholder is being treated as though it were real text.

  4. Use the same method to insert the description and price into the layout, each in its own paragraph in the table cell. For the price, apply the price CSS class.

  5. When you insert dynamic text, you're actually creating an ASP behavior (a script that tells the server to insert certain text). In the Applications panel group, open the Server Behaviors panel, and you'll see one behavior for every dynamic text element you've added, plus a behavior for collecting the recordset (see Figure 27.12). Just like regular behaviors, you can double-click a server-side behavior in the panel to view its properties and edit it.

    Figure 27.12. Dynamic text elements in catalog.asp and the server behaviors used to insert them.

    graphics/27fig12.gif

    You can use the Server Behaviors panel to apply special formatting to dynamic text elements things such as changing capitalization and decimal point display. For the Antiques Barn catalog page, you probably want the item price to display a little nicer, with a dollar sign and some decimal values.

    In the Server Behaviors panel, double-click the entry for the price to open it for editing. In the dialog box that appears, use the Formatting pop-up menu to choose Currency-Default (see Figure 27.13). Click OK to close the dialog box.

    Figure 27.13. Adding scripted formatting to a dynamic text element.

    graphics/27fig13.gif

    Tip

    graphics/01icon07.gif

    To delete any dynamic element in a document, it's safest to delete the server behavior that created the element, instead of just selecting its placeholder in Design view and deleting. (Dreamweaver will warn you if you try to delete an element the wrong way.)

  6. Each catalog entry must also show a picture of the item. A look at the structure of your database (in the Databases panel) will show you that the stockitems table has a field called imagefile. These can be used as the src attribute of an <img> tag to create dynamic images.

    To insert the dynamic image, start by placing your cursor in the page at the location you want to add the image and insert the image as you normally would. (Use the Image object from the Insert > Common panel.) When the Insert Image dialog box appears, however, choose the Data Source option (see Figure 27.14). The list of image files is replaced with a list of fields from your recordset. Choose imagefile and click OK.

    Figure 27.14. Inserting a dynamic image by specifying Data Source, rather than File System, for the src attribute.

    graphics/27fig14.gif

    Design view now shows the image as a cute little image placeholder icon (with a lightning bolt for dynamic data). If you check your code, you'll see another ASP <%= tag stuck right in the middle of the <img> tag:

    <img src="<%=(Recordset1.Fields.Item("imagefile").Value)%>">

    Note that no width or height has been entered. That's because Dreamweaver can't determine the dimensions from this data because no actual image has been put here yet.

Previewing with Live Data

You're tired of placeholders! You want to see this page in action. After you've completely set up your site definition, Dreamweaver can send an HTTP request to your server and show you your page, with "live" data in place. As discussed earlier, the live preview originates from the shared remote folder you set up as an IIS/PWS directory. Therefore all image files must have been uploaded to the remote site before the preview will work properly. After you've done that, you can preview data in two ways:

  • Live Data view. In the Document toolbar, click the Live Data button to switch from viewing placeholders to viewing actual data (see Figure 27.15).

    Figure 27.15. Live Data view in action.

    graphics/27fig15.gif

  • Preview in Browser. Choosing this command, when you're in a dynamic site, will activate the server and "serve" your page in your primary, secondary, or another browser.

Exercise 27.5 Previewing and Troubleshooting Live Data in the Antiques Barn Catalog Page

In this exercise, you try some different previewing methods (if you haven't already experimented), and use them to troubleshoot your code.

  1. With catalog.asp open, click the Live Data view button. It might take a moment, but real data should pop into your Document window.

    Note

    graphics/01icon07.gif

    Sometimes Dreamweaver holds the database connection open, which doesn't allow the Live Data view or previewing dynamic pages to function properly. If Live Data view doesn't engage properly, try saving the page and closing Dreamweaver. Next, open your browser and type http://localhost/yoursitename/catalog.asp and see if it displays. If you still get an error, your site probably isn't configured and you'll need to revisit the previous exercise and the preceding chapter to troubleshoot.

    You'll immediately notice that there's a problem; your lovely dynamic image isn't displaying properly (see Figure 27.16). You might have guessed why but in case you haven't, it's time to visit the browser.

    Figure 27.16. Live Data preview of catalog.asp, but there's a problem with the dynamic image.

    graphics/27fig16.gif

  2. Turn off Live Data view by clicking the Live Data button to toggle it off.

  3. Preview your page in the browser (F12). You'll undoubtedly see the same problem: a missing image. Here in the browser, however, you have some troubleshooting tools at your disposal. If you're in Internet Explorer, go to View > Source. If you're in Netscape, go to View > Page Source.

    Examine the code here. You might notice that it looks different from the code you viewed in Dreamweaver. There are no ASP <%...%> tags. That's because the server has executed the script within those tags and used it to construct plain old HTML. The HTML code that was constructed to display your table row looks like this (dynamically generated code shown in bold):

    <tr valign="top">  <td><img src="bookcase.jpg"></td>  <td>&nbsp;</td>  <td>  <p class="itemname">Bookcase</p>  <p>Big old heavy bookcase, good for holding those books you don't  want anybody to read. </p>  <p class="price">$275.00</p>  </td>  </tr>

    There's your dynamic text! And there's your problem, in the <img> tag. If you examine your site's file structure, you'll see that all images have been stored in an images folder, so the correct relative URL to the clock image is images/ bookcase.jpg. However, the database entry doesn't include that extra folder name. No wonder the browser cannot find the image!

  4. You could, of course, fix every single database entry to include a folder name. However, it's much easier to tweak your ASP code, just a little, to do the job for you. When you get used to the way the server just adds the placeholders right into the main code, it'll be easy.

    Back in Dreamweaver, select the dynamic image placeholder. Then open the Server Behaviors panel. The behavior that is creating your image will be highlighted. Double-click to open the editing dialog box. Because you know you have to add the folder name to the entry, manually fix the URL entry so that it looks like this (new code in bold):

    <img src="images/<%=(Recordset1.Fields.Item("imagefile").Value)%>">

     

  5. After you've done this, try previewing your page in a browser again (F12). The image should show up! (If it doesn't, select View > Source to check your constructed code; and back in Dreamweaver, check Code view to make sure your <img> tag looks exactly like the one shown here.)

    The only drawback to manually adding relative path information to your dynamic image source is that you have to know what the relative URL to your images should look like. You can't just browse to an image and let Dreamweaver do the thinking for you!

Displaying Multiple Records with Repeated Regions

A repeated region is any chunk of page code that you want to repeat for as many records as you want to show. A repeated region can be a line of text, an item in a list, a table row, or even an entire table. To create a repeated region, follow these steps:

  1. Select the part of your page that you want to repeat.

  2. In the Server Behaviors panel, click the plus (+) button and choose Repeat Region; or choose the Repeated Region object from the Insert > Application bar (see Figure 27. 17). A dialog box will appear, asking which recordset you want to display and how many records you want to show. (Only choose to display all records if you know for sure your database won't have too many records to fit on a decent-sized web page.)

    Figure 27. 17. The Repeated Region, Record Navigation Set, and Record Navigation Status objects.

    graphics/27fig17.gif

Navigating Through Multipage Displays

If you've set up the repeating region not to display all records simultaneously, you need to give your visitors a way to view the first group of records, the next group after that, and so on. Dreamweaver offers two tools to help with this: Record Navigation Bar and Record Navigation Status. Both are technically server behaviors, but also are easily accessible as objects from the Insert > Application bar (see Figure 27. 17).

The Record Navigation Bar object (or server behavior) determines whether there are more records in the recordset than are displayed on the current page; and if so, displays previous page, next page, first page, and last page navigation controls. All the hard work is done for you. All you have to do is insert the object (or server behavior), and Dreamweaver creates the links and adds the scripting to display different records on your page.

The Record Navigation Status object (or server behavior) determines how many total records are in the recordset, and which are currently displaying on the page, and adds a text message to the page Records 1 to 10 of 56. Again, all you have to do is insert the object; Dreamweaver takes care of the rest.

Exercise 27.6 Displaying Multiple Records in the Antiques Barn Catalog Page

In this exercise, you build the catalog page further by displaying multiple records. You also add navigation controls that enable visitors to move between records easily.

  1. Open catalog.asp, if it isn't already open.

  2. You want the table row containing your dynamic elements to repeat. Select that row. (Drag across the cells, or click inside a cell and use the tag selector to select the <tr>. It's important to make sure you get exactly the right table parts selected!)

  3. From the Insert > Application panel, choose the Repeat Region object. The Repeat Region dialog box will appear, asking you which recordset to base the repeats on (you have only one recordset, so there's nothing to choose here) and how many records to show. Set the number of displayed records to 5 and click OK (see Figure 27.18). Note how the Design view display has changed to indicate the repeated region.

    Figure 27.18. Inserting a repeated region that will display five records at a time.

    graphics/27fig18.gif

    4. Preview your work in the browser (F12). There are the first five records of your recordset!

    Tip

    graphics/01icon07.gif

    If there's anything wrong with your ASP code, you'll get a Page Cannot Be Displayed message from the server. Read through the text of this message and you'll find some very specific information on what's wrong with the page, including what line of code contains the error. Occasionally, even Dreamweaver-generated code generates errors. Examining these errors and troubleshooting them is a great way to increase your knowledge of ASP!

  4. This is great as far as it goes, but the visitor can never go beyond those first five records. You need some navigation controls. Back in Dreamweaver, the new elements should be added below the repeated elements but above the bottom navigation bar.

    You need to add a new table row for the controls. Be careful here! If you place the insertion point in the table row that contains the dynamic elements, and insert a new row below it, Dreamweaver will assume that you want the new row to be part of the repeated region. Instead, you must position the cursor in the empty table row directly above the navigation bar and insert a row above. You'll have to be sneaky doing this, because that "empty" row is actually filled with transparent GIF images. Select one of the images. Then use the tag selector to choose the parent <td> tag. Then go to Modify > Table > Insert Row. (Unless you're very accurate with your mouse clicks, it's easier to choose the menu from the menu bar than to right-click to access the contextual menu.)

    You want the new navigation elements to stretch all the way across the layout, so select all three cells in the new row and merge them (Modify > Table > Merge Cells).

  5. With the insertion point in the new merged row, choose the Recordset Navigation Bar from the Insert > Application bar. In the dialog box that appears, choose to use text navigation elements and click OK. Figure 27. 19 shows the resulting insertion.

    Figure 27. 19. The Recordset Navigation Bar being inserted in the Antiques Barn catalog page.

    graphics/27fig19.gif

  6. Preview your page in the browser again (F12), and you'll see the navigation controls at work. You can click to move forward and back through pages of displayed records. Also note that the controls appear only if there are records to view you cannot go to previous or first, if you're at the first page already, for instance (see Figure 27.20).

    Figure 27.20. The Antiques Barn catalog page with all recordset navigation elements in place.

    graphics/27fig20.gif

    Oops! If you inserted your new table row inside the repeating region, you'll get navigation controls after every single record. There is no easy fix for this, unless you're willing to tinker around in the code. The quickest solution is to Edit > Undo, or use the History panel, backing up to before you inserted the new table row. . .and start again.

  7. The newly inserted elements are just dynamic text links in a table. Feel free to format them as you like you can even change the text, so long as you don't change the link information. To match the formatting in Figure 27.20, set the table width to 640 and apply the nav CSS class to each text element.

  8. Finally, you can make your catalog page complete by letting visitors know where they are in the recordset ("Records 1 to 5 of 10"). For the Antiques Barn page, you'll add that information directly above the recordset navigation controls.

    Start by adding a new row at the top of the nested table that contains the recordset navigation (see Figure 27.21). As long as you're working with this table, you're well outside the repeated region, so you don't have to worry about that.

    Figure 27.21. Inserting a Recordset Navigation Status object.

    graphics/27fig21.gif

  9. Merge the cells of the new row so that it stretches across the entire table. Then, with the insertion point inside the new row, choose the Recordset Navigation Status object from the Insert > Application bar. There's your new dynamic text (see Figure 27.21). Preview in the browser to see it in action (F12).

    As with any dynamic text element, you can format the status line as you like. You also can change any of the static text, as long as you don't disturb the placeholder text. (In Figure 27.20, for instance, the word records has been changed to items.)

    Congratulations! The Antiques Barn catalog page is now complete. You've built your first ASP document.

Summary

In this chapter, you learned the basics of setting up an ASP site in Dreamweaver and creating a page that displays dynamic elements. This is only a taste of what you can do with ASP. Instead of displaying all stock items, you could tie the catalog into a search page so that visitors can choose what category of antiques to display. You could link small thumbnail images to separate pages containing detailed information about each item. You could have visitors sign in, so that when they revisit the site their favorite antiques will show at the top of the list. Dreamweaver provides objects and server behaviors for all this functionality and more.

CONTENTS


Inside Dreamweaver MX
Inside Dreamweaver MX (Inside (New Riders))
ISBN: 073571181X
EAN: 2147483647
Year: 2005
Pages: 49

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net