Sams Teach Yourself Dreamweaver UltraDev 4 in 21 Days (Teach Yourself...)

. I’ve centered the document by selecting the text and choosing Center alignment from the Text menu.

Making a Link To create the Click to Enter link, select the text you want to turn into a link and either right-click or Ctrl+click on the selection. This will bring up a contextual menu that contains several operations you can perform on the text, one of which is Make Link. You can also find this option under the Modify menu, or use the Control+I (windows) or Command+I (Macintosh) shortcut. Choosing this option will open a link definition screen, as seen in Figure 2.4. The link can be directed at a file on your hard drive. Be sure that if you pick a file, it is located within your site directory. If not, UltraDev will offer to copy the file to your site directory. This is convenient, but you can end up with multiple copies of files spread across your hard drive.

Using the UltraDev WYSIWYG Layout Tools

47

FIGURE 2.4 Choose a file or URL to link to.

2

Because I don’t have a page created yet, I’m just using mainpage.html as the name of my main Web page. I’ve also had the link generated relative to the Document that contains the link rather than the Site Root. For the most part, this is a matter of personal preference. You can also click the Parameters button to add attributes to the link tag you’re creating. After your link is entered, click the Open button to finish creating the appropriate link tags in your document. The text should now appear blue and underlined within the document design view.

Editing the Head Now that there is a developed page, and a bit of content, let’s change some of the attributes that you can’t see—the elements. These will allow you to change the title of the document and force it to move to another page if the browser sits on the welcome page too long. To display the head elements, choose Head Content from the View menu. You’ll notice that the document design view changes slightly to include an upper frame that has some icons in it. These icons represent the tags that are already defined in your document. In order to edit them, open the Properties palette. Figure 2.5 shows the title tag icon selected and the corresponding view in the Properties window. The two tags that are inserted into the HEAD section by default are the <TITLE> tags (defining the document as being Untitled) and a <META> tag defining the content of the page. Open the Properties palette (if it isn’t already) and click through the tags contained in the head section until you find the title tag. Change it to something appropriate for your welcome page. (I chose Welcome.)

48

Day 2

FIGURE 2.5 Use the Head view and Properties to edit your title tag, among other things.

Tip

With the addition of the toolbar in UltraDev 4.0, you can now directly change the title from within the design view. All you need to do is change the Title field in the toolbar to immediately set a title for the page you’re editing. This is, however, the only heading element that can be changed this way.

For my page, I’d also like to add a refresh tag so that the user is automatically moved to my homepage after a certain amount of time. This pushes the visitor forward without any need for him to move his mouse and click the Click to Enter hyperlink. To do this, either insert the element from the tool palette or by choosing Head and Refresh from the Insert menu. You will be prompted for the URL and the length of time to wait before moving to the next page. If you don’t have a page to link to, you can even refresh to an external URL (such as http://www.poisontooth.com/) Don’t worry, you can always change the properties for any object that is inserted by selecting it and opening the Properties palette.

Caution

Don’t count on a refresh tag working in all situations. Certain older browsers ignore the refresh metatag completely. If you don’t provide a link to the next page, your visitors might never make it to your site. Additionally, search engines might not be able to index your pages if they rely on a refresh to reach the body of your site.

Using the UltraDev WYSIWYG Layout Tools

49

Common Page Attributes As you’ve seen, you can edit the title of your page by using the properties inspector on the appropriate tag within the page heading or directly from within the toolbar. UltraDev also provides another means of accessing common page properties, including the page title, margins, and default link/background colors. To access these attributes for any page, choose Page Properties from the Modify menu. The Page Properties dialog box is shown in Figure 2.6. FIGURE 2.6 The Page Properties dialog box allows you to set a variety of attributes within the head and body sections of the HTML.

As you can see, there are several useful items here: Title—This is the title of the current page. Background Image—Don’t confuse this with the tracing image. The background image is a repeating tiled image that is displayed in the background of the Web page. Background—Sets a background color for the page. You can either type a standard HTML hexadecimal color code into the appropriate field, or click the color square to pop up the color picker. You’ll learn more about the color picker shortly. Text—Controls the color of the text on the Web page. Links—Sets the colors of links, active links, and visited links. Margins—A page’s margins are set using the four margin fields. If you want the contents of a page to adjoin the upper-right corner of the browser window, set these to 0. There are four different attribute settings because margin widths are set with different attributes in Netscape (width/height) and Internet Explorer (left/top). You’ll need to set all four of these fields in order to have full cross-browser compatibility. Document Encoding—This is the default language for the document.

2

50

Day 2

Tracing Image/Image Transparency—In Day 1, you learned how to customize your workspace so that a background image is available for laying out a page based on an existing image. These two options control that image. Remember, the tracing image is for your page is not displayed in the final HTML. Obviously you’ll be visiting this screen again. Since the introduction of this feature in Dreamweaver, I’ve been befuddled why these options are located in a separate Properties window rather than the standard Properties floating palette. Perhaps this will be addressed in a future revision of UltraDev. If you’d like to set any options for your page, do it now and then click OK to continue.

Previewing Your Work Although the UltraDev environment does an excellent job of giving you a preview of the final product, sometimes it doesn’t exactly match what you’re going to see in the browser. To preview your work in an actual browser, use the Preview in Browser submenu within the File menu. It’s best to preview in both Internet Explorer and Netscape; otherwise you might be in for a big surprise down the road. The preview system in UltraDev is a bit different from other HTML editors. Instead of launching the browser with the file you are editing, UltraDev creates a temporary HTML file each time you use the preview option. This eliminates problems with browsers caching the page you’re viewing and not updating correctly between previews.

Tip

Near the Preview option, you’ll see a Debug in Browser selection. This is not helpful in debugging your HTML—instead, it can be used to debug dynamic JavaScript that you’ve added to your site. More on this feature later.

Spell Checking You’re very close to finishing your first page in UltraDev, but, before you close the Welcome page, you might want to double-check your work using the built-in, spellchecking capabilities of the editor. There’s nothing more embarrassing than making a silly spelling error and exposing it to the world. To launch the UltraDev spell checker, choose Check Spelling from the Text menu. This will open the Check Spelling dialog box, seen in Figure 2.7, that should seem familiar to most anyone with experience using a Word processor.

Using the UltraDev WYSIWYG Layout Tools

51

FIGURE 2.7 You can spell check your Web site from within UltraDev.

2 If an unknown word is found, you can choose to add it to your personal dictionary, ignore it, or change it. If you are building computer-related Web sites, you’ll find that you end up adding many words to your personal dictionary. It seems that dictionary programs can’t keep up with the ever-growing list of computer jargon. After you’ve made finishing touches on this document, save and close it. It’s time to move on to the main Web page.

Tables Setting up the Welcome page was simple—let’s take a look at some of the more advanced tools and compose a homepage that provides an introduction to your Web site and allows the user to navigate to other pages. Go ahead and choose New from your File menu to start a new document. Now you’re back to a blank page. Earlier you created some text and a link—there really wasn’t any layout of the document other than centering the content in the viewers browser. The homepage should probably have a bit more content. For the homepage, let’s lay out the page with a navigation bar on the left side of the screen, and a content area to the right. There are a few ways to do this (and we’ll get to them all, trust me), but the most common way of positioning elements is by using a table.

Inserting a Table Tables were originally used for presenting data on a Web site in a spreadsheet-like view. Originally the control of a table was lacking—the layout was determined mostly by contents of the table and the browser that was viewing it. Today, tables are mostly used for the purpose of positioning data on the screen—pictures, text, anything that can be encoded in HTML. To insert a table in the HTML, click the table icon in the Objects palette, or choose Table from the Insert menu. You’ll be prompted for the initial attributes of the table, as shown in Figure 2.8. These values can be changed at any time by directly modifying the HTML, or using the Modify menu in conjunction with the selected table.

52

Day 2

FIGURE 2.8 You can set most of the attributes of a table as it is being added.

I’ve chosen to add a table with two columns, one for the navigation bar, the other for the content area—only one row is necessary. I’ve also made a point of setting the table width to 600—this will ensure that the page contents are fully accessible on almost any computer. The cell spacing is 5—keeping an ample amount of room between the navigation and content portions of the table. Click OK when you’re ready, and the table will be added to your document.

Note

The cellpadding attribute controls the distance (in pixels) between cells in a table. Similarly, the cellspacing is the distance between the inside edge of a cell and the start of the cell’s content.

Resizing Table Cells In its default state, the table isn’t configured entirely correctly for our purposes. Both cells of the table are equal in size, and we need one cell to be significantly narrower than the other. To change the size of a cell, move the cursor to the edge of the table’s boundary wall until the cursor turns into two vertical lines with outward pointing arrows. You can then click and drag the boundary so that it moves into the position you want. The same goes for resizing the vertical boundaries of table cells. We won’t need to do that right now, however. When you’re done sizing your table cells, click inside one of the cells, and then open the Properties palette. The upper portion of the property inspector refers to the attributes for the text being entered. Remember that if your properties window is in simple mode, you can switch to the advanced display by clicking the arrow in the lower right corner. Figure 2.9 shows the properties of a table cell. We’ll use these properties to go over some common attributes that you’ll see when using the Properties palette on other objects. You can always find out what an attribute is by holding your cursor over it and waiting for the tooltip to appear. Don’t worry, we’ll get back to building the Web site in a moment.

Using the UltraDev WYSIWYG Layout Tools

53

FIGURE 2.9 The table properties are a good way to demonstrate some of the many features of UltraDev.

From the Property palette, there are some common features you can set, such as sizes, colors, links and text attributes. Let’s take a look at these properties now.

Object Sizes The lower portion of the window contains the attributes for the table cell. The size of the current cell is shown in the W (width) field. If you can’t get exactly the number you’re aiming for, type the number into the width field of the property inspector and press Enter. You can also set the size of a table cell based on the object that contains it. To do this, you’ll need to use percentages to set the width and height attributes—just insert a % sign after the number you type, and the size will be based on a percentage of the parent object. The table in the design view will immediately adjust itself appropriately.

Setting Colors Setting colors is a common thing to do while setting up a Web page. To set a color in the property view, click in the color square. A Web safe color palette is displayed that lets you pick a color from the 212 available. You can alter the way that the available colors are displayed by clicking the pop-up menu arrow in the upper right corner of the Color palette. Two other options make life easier if you find yourself feeling too constrained by the Web color palette: the eyedropper and the system color pickers. To use the eyedropper, just click the color square—your cursor will change to an eyedropper. Wherever you move the eyedropper, the color will be selected. This will allow you to choose a color from anywhere on the screen, including your desktop background. If, at any time, you want to return to the default color setting, click the default color icon (a square with a line through it) in the upper right corner of the Color palette. A more precise way of choosing colors is by using the system’s color pickers. Once again, open the color safe palette and click the rightmost icon in upper-right corner. This will bring up the color picker that is native to your system. Using the system’s color picker will not result in a Web safe color.

2

54

Day 2

Note

Web safe colors are guaranteed to display correctly on 256-color systems. Using Web safe colors is the only way to ensure that your images will look even remotely correct on an 8-bit system. Today’s computers ship with graphics cards that run in either 16- or 24-bit color—eliminating the need to worry about selecting colors from the Web safe palette. If you are designing a site using new technologies targeted for the most recent browsers, you really don’t need to worry about choosing Web safe colors. In a few years, they’ll be nothing but a distant memory.

Picking Links Another task you’ll perform on a semi-frequent basis is setting links. UltraDev provides three separate ways of setting a link from within the property viewer. First, you can always create a link by typing the name of a file, or an complete URL into the link field. Second, you can click the folder icon to open a file browser window and choose the file manually. There is one final method, however, that makes it easy to set your link with a single mouse click. Notice the small “crosshair” icon located next to the folder. If you click this icon and drag it with your mouse, you’ll see that a line stretches from the crosshairs to your current pointer position. This link can be directed to any file within the site listing to link to that file. You can also use it to point to a file within your system’s file browser. This tool draws together portions of the UltraDev interface and integrates the software with your operating system. Unfortunately, you’ll find that although useful for sites with a limited number of files, the Targeting method of setting a link is rather difficult when you’re dealing with several hundred files. I’ve spent several minutes dragging through the site window trying to get it to scroll to the right file, only to have it auto-scroll way past my intended link. Sometimes it’s just easier to do it the old-fashioned way.

Note

What is this Data Source button you keep seeing in some of these dialog boxes? The Data Source button is used to add dynamic data to an element. This will be covered in detail in Week 2. For now, you can just ignore these settings.

Text Attributes Although not directly related to a table cell, you can see attributes for the text that is being entered into a cell. These attributes are common to anything that holds text, including tables, layers, and the page itself. From the Properties window, you can change the style of the text as it is being entered into the design view.

Using the UltraDev WYSIWYG Layout Tools

55

Moving from left to right, these are the properties that can be set for text within any container view: Format—This is the style of the text that is being entered (heading sizes, and so on). Font—This is the font face of the text. Size—This is the font size of the text. Color—Sets the color of the text. You can either use the color picker, or enter an HTML color directly into the field to the right of the color square. Style—Bold or Italic options are available. Alignment—Chooses left, center, or right justified text. Link—If the text is part of a link, it will be shown on the second line. The link can be reassigned using the techniques we just discussed. Target—The target is the name of the window or frame that should contain the content of the link after it is clicked. Lists—Inserts unordered or ordered lists into the current text. Indentation—Indents the current text. These properties will be very important in editing text and objects in the future. You can also use the Text menu to access even more text formatting options. You’re now ready to get to work.

Image and Text Layout You have the knowledge you need to start adding content to your table. I’ve set the first table cell to be 150 pixels wide and added some color to the main content portion of the table by setting a background color for the rightmost table cell. I’m working to create a site that showcases some of my antique computers, so I’d like to put some pictures and text into the main content area.

Inserting Images Let’s see what happens when you insert an image into the content portion of the table. Make sure that your cursor is located in the right side of the table, and then click the image button in the Common tool palette or choose Image from the Insert menu. Choose an image that is located within your site folder. If you choose an image outside of your folder, UltraDev will give you the option of copying it into your site. You can also specify a URL to an image that is located remotely. Unfortunately, UltraDev will only display local images, so the design view might become a bit confusing if you link all your images into the site via remote URLs.

2

56

Day 2

When adding images to your page, you can choose to allow page text to determine the positioning of the images, or use tables and layers to precisely position everything. There are advantages and disadvantages to each method. Open the Properties dialog for the image that you just inserted.

Aligning Text and Images You should begin to recognize many of the properties that are available for the image, including the ability to make a link from the image to another URL, or set the height and width. The attribute that we want right now is the Align attribute. This will let you choose how text wraps (or doesn’t wrap) around the image that was inserted. You can align to the top, bottom, middle, and more importantly, right and left. Setting the alignment on the image to right will make the text float to the left of the document. Likewise, an alignment of left will position the text to the right of the image. Figure 2.10 shows my current page with text wrapping around the left side of an image. FIGURE 2.10 The alignment tags of an image control the way text flows around the image.

Using these alignment properties to position text and graphics is beneficial when creating Web pages that must be accessible to a variety of computers and browsers. If you are positioning text exactly, you inevitably will create pages that display poorly on low resolution screens, or displays that have different font settings. Using alignment properties allow the images and text themselves to drive the display of the page. If text is too long, it will wrap around the image and fill the screen (or the parent object) as much as necessary. If you don’t have complex image alignment requirements, allow the text to wrap around images on your pages. Any time you can design a page to take advantage of the crossplatform and cross-browser nature of HTML, it’s a good thing.

Using the UltraDev WYSIWYG Layout Tools

Tip

57

Remember to fill in the Alt tags for as many images on your site as possible if you intend it to be viewable from text-only browser systems.

Precise Image Positioning If you are in a situation where you must position images precisely with other elements (images, text, and so on), the alignment tags will be of little use to you. Instead, you can define a table that contains the components you need to position. With the ability to define the precise width in pixels of individual cells, you can control the alignment of your page elements exactly. In Figure 2.11, I’ve added a 2x2 table to my page that contains two images and two cells filled with text. Although this alignment of text and images seems simple, it’s impossible to do without a table (or a layer, but we’re not quite there yet). FIGURE 2.11 Here a slightly more complex page is laid out using table elements.

To use a table for positioning, the best way to control your layout is to set exact widths for the table and its cells. Also make sure that the table you are using to force the positions has border, cellspacing, and cellpadding attributes set to zero. Setting these values to zero in the properties inspector will ensure that the contents of your table cell will be exactly where you want them—not slightly skewed by the border and spacing attributes of the table cells. Make sure that your table widths always add up to the width of the table itself. If the values are off, the resulting table can look strange after it’s loaded into a browser.

2

58

Day 2

Joining Cells and Nesting Tables HTML tables require that the width of table cells is consistent for each row in the entire table. Likewise, the height of a row is consistent across the entire row. Although this might seem as if it limits where items can be placed, it actually doesn’t. In each cell of a table, you can insert another table. This lets you further subdivide tables into smaller units. Additionally, you can combine multiple cells of a table into a single cell, or split a cell into multiple cells. To join cells, select the cells you want to combine by holding down the Command key on the Macintosh or the Alt key on Windows and clicking in the cell to select. (They must be contiguous blocks of cells.) Then choose Merge Cells from the Modify menu. The selected cells will “become one.” Under the Modify and Table menu, you’ll notice that there are quite a few commands to combine and reconfigure a table layout. Here’s a description of the effects you’ll see when these are applied to a table cell: Split Cell—Using the split cell option will create new cells in the selected table cell. You will be prompted for the number of rows or columns to create. Insert Row/Column—The insertion features will insert a new row or column directly before the currently selected cell. Choose the Insert Rows or Columns item to choose what you want to insert and where (before or after the current selection) you want to insert it. Delete Row/Column—Removes the row or column that contains the currently selected item. Increase Row/Column Span—The row span and column span for a cell can be increased with these options. This will connect the selected cell with the cell directly below or to the right of it. This affects the cell immediately below or beside the current cell. You do not need to have multiple cells selected for this feature. In fact, if you do, it won’t work. Decrease Row/Column Span—If a cell is spanning multiple columns or rows, decreasing the row or column span will shrink the current cell back towards its original position. Through a combination of multiple nested tables and combining existing cells, you can create layouts that position your elements in very complex arrangements.

The Positioning Compromise Now you’ve seen how to position elements in ways that are both loose and precise. Let’s take a look at one way that tables can be used to position elements in a manner that will accommodate multiple browser sizes.

Using the UltraDev WYSIWYG Layout Tools

Setting exact pixel sizes for tables and their cells let the page designer position everything perfectly. If, however, the elements only need to be positioned relative to one another, the table can be set up using percentages instead of exact values. Cells based on percentages will expand as the size of the browser is increased. The designer still has the ability to position how elements are laid out with respect to one another, but not with pixel-level accuracy. Unless you’re using a table to position pieces of an image, percentages will probably work well for your project. You can take this one step further by not setting any widths or heights for table cells. This lets the content of the table drive its own layout. As I’ve said before, HTML was designed to present information on as wide a variety of computers and platforms as possible. Giving the browser the control over how items are positioned is always the most favorable option. If you’ve already set up your tables using hard-coded widths, you can quickly convert your widths between percentages and pixels by using the Convert Widths to Pixels or Convert Widths to Percent options of the Table submenu under Modify. To get rid of the widths and heights completely, use the options Clear Cell Heights and Clear Cell Widths under the same menu. You need to select the entire table to do this using the Modify menu and Table submenu.

Tip

Be sure to practice using tables before attempting to do a large scale production using tables for control. Tables are a useful tool, but can be extremely tricky unless you’re used to their eccentricities. For example, you might notice that inserting images in table cells that are supposed to follow one another often results in a small amount of whitespace being inserted between images. If this happens, open the HTML source and check for spaces between the tags and your tags. UltraDev sometimes seems to insert spaces in places you’d rather not have them.

Using the Table Layout Mode UltraDev 4.0 introduces a new layout mode that makes it simple to create complex layouts using tables. Typically, you would manually position the cells in a table to layout information—subdividing and merging as necessary. Layout mode lets you define your content regions without needing to worry about manually determining spacing information. To switch to layout mode, click the rightmost icon in the view section of the Object palette. After switching to the layout mode, there are two new tools you can use—the Layout Table and Layout Cell objects, both located in the Layout section of the Object palette.

59

2

60

Day 2

Think of a layout table as a free-form area on the page where you can do anything that you want. Using the Layout Table, you can click and drag across an area of the design view to add an empty layout region to the screen. An example of an empty layout region is shown in Figure 2.12. FIGURE 2.12 Draw a layout table on the screen wherever you want to precisely position page content.

Within the layout table, you can add in a layout cell to the table, much the same way you added the layout table to page. This cell can be positioned anywhere—with pixel point accuracy—on the entire page. Figure 2.13 shows the layout table with an added layout cell. FIGURE 2.13 Adding a layout cell to the layout table lets you add content to a page anywhere you want.

Layout cells can be moved and resized after they are added to a layout table. Clicking and dragging the edge of a cell will move it within the table region. Clicking the border of the cell a single time will highlight the cell and add resizing handles to it. This will let you resize the cell at any time to add additional room or remove extraneous space.

Using the UltraDev WYSIWYG Layout Tools

61

It’s important to remember that the table layout mode is really just creating a table structure based on the position and size of the cells you’re adding. You can, at any time, switch back to the normal design view by clicking the leftmost button (Standard View) in the View portion of the Object palette. This is an absolutely wonderful tool to use to create precise table layouts especially when using tracing images.

Navigation Buttons and Bars Now that the page you’re working on has a content area that can hold pictures and text, how about providing navigation features to reach the rest of your site? There are a few different ways that you can approach this. Which you choose is a matter of personal preference, although your decision might be driven by the speed at which you’d prefer your pages to load.

Lists of Links The most common form of navigation is a list of links. Text links load very quickly and are easy to set up and maintain. In Day 1, you learned how to set up a link to another page. Creating lists of links is no different, but there is a more efficient way to do it. If you’d prefer to turn a list of items into links, type the labels of the links into the design view as you want them to appear. Remember that you can move down to the next line by pressing Shift and Enter. Pressing Enter by itself inserts a paragraph tag and will doublespace your links. Of course you can use tables to position elements as well. After your list of items is defined, simply move through the items, selecting a line at a time, and then right-click (Windows) or control-click (Macintosh) to bring up the contextual menu for the selection. Choose Make Link from the menu. You should recognize the Link definition screen from earlier. To remove links or display the page that a link is connected to (if it is within the same site), choose the Remove Link, or Open Linked Page options. These selections are also available from the Modify menu. Text links should be used as frequently as possible, if not for your main navigation, perhaps for a miniaturized version of the navigation located at the top or bottom of the page. People who do not have graphical browsers or disabilities will be forever thankful.

Images and Image Maps An alternative way to provide navigation on your site is to use an image-based navigation system. The fastest (in terms of loading speed) way to do this is with simple images. You can easily create single image buttons that are used as links, and then position these buttons where you need them. This, however, isn’t as fast as loading a single image that contains all the navigation images you need.

2

62

Day 2

An Image Map can be used to define areas of a single image that will be active as links and can be clicked on to reach other portions of your Web site. The map is defined within the HTML page, but is defined specifically for a single image. Individual pixel coordinates are mapped onto the image and used to determine where the user has clicked. Depending on what these coordinates are, the browser is directed to a set of defined links. Any image can be an Image Map. In order to make an Image Map, you’ll first need to insert an image into your document. Figure 2.14 shows the navigation bar that I’ve inserted into the current page. It’s a single image with several different navigation buttons that I’d like to activate so that they point to other (future) portions of my site. FIGURE 2.14 Single images can easily be turned into tools to navigate to other sites.

After the image is added to the site, bring up its properties. You’ll notice that the bottom of the Image Properties palette has some interesting looking tools that are only available when making Image Maps. The Image Properties are shown in Figure 2.15. Pay close attention to the bottom-left corner of the palette. FIGURE 2.15 The Image Map tools are located in the lower-left corner of the Image Properties palette.

Using the UltraDev WYSIWYG Layout Tools

63

These tools are the Image Map tools. The Map field is a name for the Image Map that you are about to create. Each image on a page can have its own map, but they must be named uniquely. If you fail to choose a name on your own, the software will pick one for you. The four tools by the map name field are the selection tool, and the rectangle, oval, and polygon tools. You use these much like you would use the tools in any paint program. Select one of the shape tools, and then click and drag on the selected image to draw that shape. The area that you are creating will be used to define a link to another document. Don’t worry about defining the area perfectly, you can always adjust it later. As you might have guessed, the rectangle tool is best used for defining rectangular sections, the oval tool for ovals, and the polygon tool for irregular shapes and areas. The completed area is highlighted in a teal color. After an area is drawn, you can manipulate it by clicking the arrow icon and selecting the shape you want to edit. The control points can be used to resize the object. For precise positioning, use the arrow keys to move it pixel by pixel. The last step you need to take is to define the links that each of the regions will take you when clicked. To do this, select the arrow icon and click one of the image map areas. The Properties palette will change to show the properties for that area. You can define the link and a target, exactly like any other link that you create. Additionally, Alt tags can be set to provide text-based links for those people who are using non-graphical browsers. Depending on the number of map elements that you have defined, you might want to hide the maps by deselecting Image Maps under the View menu. Hundreds of little teal boxes tend to get a bit distracting after a few minutes.

Rollover Images Image Maps are great, but they lack one important attribute that is omnipresent on the Web—user feedback. When you click links, they highlight. In some browsers, links display feedback as you move your cursor over them. An Image Map, however, is a static image that does not change based on the position of the mouse.

Not Quite the Truth… Image maps do not automatically change as the user’s mouse moves over them, but in some cases they can be made to present feedback by swapping out the current image, or displaying a layer overtop the image using customized JavaScript programming. This, however, is taking things to extremes considering that there are other ways to get the same effect without all the trouble.

2

64

Day 2

In the HTML specification, there is no way to change an image based on the actions of the user. That’s where JavaScript comes in. JavaScript can be embedded on a Web page so that when a user moves his cursor over an image, it changes that image out for another one. Each image can have an on, off, and clicked state. Here is an example of the Macromedia JavaScript code that will switch out one image with another: function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
As you can see, this isn’t going to be much fun to type each time you want to create an image that changes on a mouse event. The problem is exacerbated even further by having to handle multiple images on a page. Luckily, UltraDev handles the JavaScript coding for you. All you really need to do is create multiple images for each of the states that you need to display—usually just an off and on image. If you haven’t created images for a rollover, you need to make sure that the images are the same size as one another and in the same orientation. If you create on and off states where the image has shifted, even by a single pixel, you’ll end up with a page that suffers from jumping graphics. This is all too common on sites built by people with little experience using graphic software. A very simple way to design properly aligned buttons is through Macromedia’s Fireworks software. Figure 2.16 shows the graphics necessary for creating an on/off button.

Using the UltraDev WYSIWYG Layout Tools

65

FIGURE 2.16 Buttons must be designed so that they are the same size and maintain a consistent appearance in both states.

After you have your images, you can easily create a rollover image that serves as a navigation link on your site. To do this, click the rollover image on the tool palette, or use the insert menu. You’ll be prompted for the on and off state images, and the URL that should be visited when the image is clicked as shown in Figure 2.17. FIGURE 2.17 Choose the on and off images, and the URL you want to link to.

Notice that the Preload Rollover Image check box is, by default, checked. This requires a bit of explanation. Because each of the rollover images you use on a page actually requires two images, you must wait twice as long for all the images on a page to load. On some pages with many rollover images, this can take quite some time. There are two ways that these multiple images can be loaded—all at once, or when needed. If the images are all loaded when the page loads, both states of a rollover image are loaded before the images are displayed. The alternative approach, loading when needed, means that the page itself loads faster, but the images aren’t loaded until they are needed. Only the initial off state images are loaded at first; then, when the user moves his cursor over the image, the second on state image is loaded from the Web site. Although this might sound like a good idea, there’s actually a bit of a problem with this approach. Loading only the images needed at startup results in rollover buttons that switch to the on state sporadically. If the viewer is using a slower dial-in modem, the alternate state images could take several seconds to load—and completely defeat his purpose. The best approach to take is to determine the least-used rollover images on your page and not preload those images. Otherwise, preloading images is the only way to ensure a consistent and enjoyable user experience.

2

66

Day 2

The JavaScript sequence that preloads images is found in the tag of the document. If you want to remove an image that is being preloaded, you can edit this tag directly:

You can also edit the preloaded images by modifying the client behaviors, as you’ll see in Day 4, “Web Sites with Action—Client-Side Behaviors.” When you’re creating rollover buttons, there’s a good chance you’ll be creating more than one—in fact, it’s common to create entire navigation bars out of rollover images. You can certainly do this with the existing rollover image tool, probably with table-based positioning. The easiest way, however, is to use the rollover navigation bar element from within UltraDev. This creates all the elements you need for horizontal or vertical rollover navigation bars within your site—all from a single interface.

Rollover Navigation Bars The rollover buttons that you just learned about can easily be combined with a table to create a navigation bar—but this can be done automatically with the navigation bar tool. Clicking on the navigation bar icon brings up the dialog box shown in Figure 2.18. FIGURE 2.18 Need a navigation bar? Try the rollover navigation tool.

To add a navigation bar element, click the + button. To remove an existing element, the - button does the trick. You can also shuffle the existing elements with the up and down arrows.

Using the UltraDev WYSIWYG Layout Tools

67

When adding a new element, you can set a name to refer to the set of images in the menu. Additionally, you can set several different image states that aren’t available in the rollover image setup. The states you can use are Up—This is the default state for the image—before any action takes place. Over—This image is displayed when the mouse moves over it. Down—When the mouse is pushed while over the image, this is shown. Over While Down Image—This is the image to be displayed while the mouse is pressed and is over the image. The rest of the options are self-explanatory: the URL to go to when the image is clicked, whether to preload images, the orientation of the images on the page, and the ability to use tables (the default) to create the layout. Using a table results in the most flexible arrangement of the navigation bar.

The Problems with JavaScript Elements The tools to create pre-made JavaScript elements in UltraDev are wonderful. The Macromedia JavaScript routines are extremely efficient compared to the code that is generated by other authoring tools. The only problem is that the UltraDev interface is designed for editing HTML objects via the Properties palette and the WYSIWYG interface. JavaScript elements are inserted into the document, and can be edited with the client-side behavior tools (see Day 4), but cannot be controlled as easily using the Properties palette. If you look at the properties for a rollover image or a rollover navigation table, you’ll see the properties for the image or the table that contains the image. You can certainly edit these properties, but you won’t be editing the JavaScript. Don’t look at this as a shortcoming of UltraDev, but rather a product of the way it is engineered. As you will learn later, the UltraDev interface can be extended by adding extensions to the system. These extensions integrate into the UltraDev interface but can only insert HTML and JavaScript code (or other tags) into the document—they do not have the capability to make the property browser “see” these collections of HTML and JavaScript as objects. Don’t worry too much about this. The benefits of using prebuilt JavaScript elements greatly outweigh the drawback of not being able to view them as integrated objects.

Layers By this point in time, you should be able to build sites that use tables to position your content and navigation. Unfortunately, although tables are a good way to create consistent layouts, they are also cumbersome to use and maintain. Additionally, the complex

2

68

Day 2

table sets that are created within the UltraDev interface are very difficult to edit by hand. Digging through 10 or so nested tables can be a nightmare. To get around the limitations of positioning elements using tables, Netscape created the Layer tag. This tag was designed to form a floating layer that could contain HTML and be positioned on a Web site wherever the author felt necessary. Although a good idea, the folks at Netscape had jumped the gun. There was no corresponding standard in the HTML specification for the layer tag, and only users who were browsing with Netscape could make use of it. Designing completely separate Web sites for Netscape and everyone else didn’t make much sense, so the Netscape-designed version of layers didn’t live a very long or fruitful life. Luckily additional tags were added to the HTML specification that, when coupled with style sheets, gives the author the sort of cross-browser and cross-platform support that was impossible to achieve previously. Before you get too excited, there is one slight drawback to the use of layers: The user must have a modern browser in order to see them displayed properly. If they’re viewing with an older browser, the display isn’t going to look anything like you intended. For most people, this is a design decision that can be made without stepping on too many toes. Looking at the statistics from several Web sites that I oversee, less than 2% of the visitors to these sites use less than a 4.0 browser.

Precise Positioning with Layers Remember how you positioned elements using the width and height tags of a table earlier today? Not too much fun was it? With layers, you can accomplish the same thing in much less time, and with significantly fewer problems. Go back and take a look at Figure 2.13. This uses a table that is partitioned into two columns, and then has one of the columns repartitioned into a 4x4 table to contain the image and text elements. What if you wanted to change the width of one of the images so that it extended slightly beyond the cell where it currently lies without changing the width of the cells underneath it? With standard HTML tables, this gets to be quite a headache because cells would have to be split, or new tables would need to be inserted. With a frame it’s very easy. For example, take a look at Figure 2.19. As you can see, it certainly isn’t very consistent with a table-based layout. The images are not spaced consistently down the length of the table, and the text cells don’t line up with what would be columns or rows. In fact, if you look closely, you’ll see that the images are actually overlapping on the page. This isn’t a specially edited graphic or any sort of trick—it’s just an example of the sort of flexibility that comes with the use of layers.

Using the UltraDev WYSIWYG Layout Tools

69

FIGURE 2.19 Layers let you create some pretty complex page designs without much trouble.

2

To add layers to your own page, click the layer tool to select it, and then move your cursor to the document design view. Next, draw a rectangle about the size of the layer you want to create. Don’t worry, you can always resize it later.

Selecting Layers You’ll notice that two things were inserted into your design view: the rectangle that holds the layer contents, and a tag that represents the layer itself. Seven layer tags are in my example. To add items to the layer, click inside it and begin typing or adding items from the tool palettes. On the top-right corner of the layer is a small square handle (check the text layer on the right of Figure 2.17). The handle can be used to select the layer itself (rather than its contents). This allows you to move (either through dragging or the arrow keys) and resize the selected layer. Additionally, you can click the layer tag icon itself to select a layer. This is actually a useful way of getting to a layer. Because layers can be overlapping, or even invisible, it’s often difficult to find them when you’re looking.

Layers and Tracing Images Go Hand in Hand! If you’ve been waiting for a good reason to use tracing images, layers are your answer. Define a layer for each of the elements in your static tracing image, and then position the layers over top of the tracing image elements. Using the arrow keys, you can create a pixel-perfect replica of the original image. Of course, you can also use the layout tables to position objects with tracing images as well, but you don’t have the ability to position the cells anywhere. When using the layout mode, you are constrained to the size of the parent layout table.

70

Day 2

Properties After you’ve added a layer to your page, open the properties inspector for the layer. Figure 2.20 shows the property inspector for my navigation layer. FIGURE 2.20 Layer properties include attributes that are not shared with any other HTML object.

Layers have several attributes that are not shared with any other object: L/T/W/H—These are Left, Top, Width, and Height. The Left and Top fields specify the coordinates of the upper left corner of the layer. The width and height of the layer are given in the other two fields. Vis—This is the initial visibility of the layer. If you’re going to use JavaScript to control the visibility of your layers, you might have reason to set a layer to be hidden when it is first drawn on the screen. You can use JavaScript to make the layer appear—this is frequently used to create pop-up windows within a Web page. Z-index—The Z (depth) ordering of the layers on the page controls the overlapping of the layers on the HTML page. If you’d like a layer to be above another layer, enter a value that is greater than the “underneath” layer. If you don’t understand what this value does, it’s best to leave it set at the default. Tag—The tag used to create the layer. The default tag is DIV, which works across different browsers. The SPAN tag will also work with other browsers, but the LAYER and ILAYER tags are Netscape only. Overflow—The overflow attribute does not apply to the Netscape-only layers. On DIV and SPAN base layers, setting the overflow determines how the browser handles situations in which the contents of a layer are larger than the layer itself. The visible setting displays all the layer’s contents. Hidden clips the contents that extend beyond the viewable area of the layer. The last two options, scroll and auto, will display scrollbars either constantly, or only if the content exceeds the amount of space available. Clip L/T/W/H—These are similar to the coordinates for defining the layer, but are used to define the visible portion of the layer. Also, instead of giving coordinates in terms of the page, these coordinates are specified in relation to the layer itself. This is mostly useful for JavaScripting layer-based effects. The rest of the layer attributes should be familiar.

Using the UltraDev WYSIWYG Layout Tools

71

The Layers Palette Layers are an important enough object that Macromedia felt they deserved their own tool palette. To see what I mean, insert a few more layers into your document. You can even nest layers within each other by clicking Control (Windows) or Command (Macintosh) when inserting subsequent layers in a document. Now open the Layers palette from the Window menu. Shown in Figure 2.21, this window lets you arrange the Z ordering of all the available layers. FIGURE 2.21 The Layers palette gives you a quick view of the layers in your document.

In addition, you can click within the “eye” column to toggle between visible and invisible modes (open and shut eyes). To change the layer names and ordering, just click the text you want to change and the field will become editable. If you have layers that are nested within one another, these will appear as a hierarchical indented list. You can remove nested layers from their parent list by dragging them within the palette. Near the top of the tool palette, you’ll see the Prevent Overlaps button. Choosing this will prevent new layers that you add to the document from overlapping. You can also access this same functionality by choosing Prevent Layer Overlaps from the View menu. Now let’s see why you’d even want to use this option.

Layers to Tables, and Vice Versa If you like the ease of design that layers give you, but don’t want to sacrifice support for other browsers, UltraDev gives you an option that will make you jump for joy: the ability to convert layer-based pages to tables, and vice versa. You can design your pages using the free-form layer approach, and then convert to tables for the final deployment of your site. The only problem is that you can’t convert overlapping layers to a table—thus the option that you saw in the last section. To test this function, make sure that you don’t have any overlapping layers on your page, and then choose Convert Layers to Table from Layout Mode under the Modify menu. Figure 2.22 shows the resulting dialog box. From my experience, your best bet is to go with the dialog box defaults. If you aren’t concerned about the exact positioning of the cells in the resulting table, you might want to use the Smallest option rather than Most Accurate. When UltraDev generates the accurate tables, it creates enough cells to exactly position the contents of the layers within a

2

72

Day 2

table cell. The smallest setting, however, will snap to the nearest cell if it is within the given number of pixels (default is 4). This cleans up small spaces and produces a less complicated table—if possible. The other available options are listed here: Use Transparent GIFs—Forces the use of transparent GIFs in the newly generated table. These GIFs will force spacing of the table to be correct on any browser. Center on Page—Centers the resulting table on the HTML page. Prevent Layer Overlaps—Toggles the layer overlap checking. Show Layer Palette—Displays the layer palette after creating the table. Show Grid—Displays the document design grid after the table is created. Snap To Grid—Toggles the snap to grid settings once the table is generated. FIGURE 2.22 The conversion between layers and tables is painless.

In addition, if you have an existing site that is based on tables and want to convert it to layers, UltraDev will let you do this as well. Just choose the Tables to Layers option. You’ll probably notice that this does not create a perfect conversion. Using UltraDev itself to go back and forth between layers and tables is a good example of the shortcomings of this feature. If you’ve used transparent GIFs to force the layout of layers into a table and then translate back to layers, the GIFs will each be in its own layers. Still, even with these drawbacks, this is a very useful feature that makes page design with layers for older browsers possible.

Persistent Elements with Frames If you’ve started to link pages together in your site, you’ve probably duplicated the navigation bar on each page. Providing a consistent way to navigate through a Web site is very important in creating a pleasant and seamless user experience. If your navigation is built using rollover images, the process of loading new pages can take quite awhile. Even if the individual images of the rollover navigation are cached, the load time still suffers.

Using the UltraDev WYSIWYG Layout Tools

One potential way to get around this is to use a frameset to define a navigation frame and a content frame. These frames each contain their own HTML document and only the portions of the page that actually need to change have to change. An added benefit of frames is that although the content of one frame might move as the page is scrolled, the other frames do not. This means that your navigation bar stays in the same place on the screen at all times—no need to scroll around and find it when you’re done with a particular page. I’m sure you’ve seen the Target fields that you can set as you specify links on your pages. Now those fields are going to come into play. Each frame in a frameset has a name—when you want a link to attach to that frame, you set the target to the destination frame’s name. If you’d like a link to be displayed in the same frame that contains the link, there is no need to set a target.

Defining a Frameset Setting up a frame isn’t one of UltraDev’s strong points—if you find this at all confusing, don’t feel too bad. The frameset tools are not as intuitive as one might hope. First, create a new document to hold your frames. Next, select the frame objects in the tool palette. I’m going to insert the Left Frame frameset in order to provide a constant navigation element down the left side of the screen. After inserting the frameset, you should see that your design view is now broken into a few segments, similar to a table. Clicking in any of these templates results in live editing of the HTML document that is contained in that frame. It’s important to make the distinction that you aren’t editing cells similar to a table—instead you’re editing entire HTML files that will be loaded into the frame. However, before you do any editing, it’s best to set up the frameset the way you want. You can click on the outline of the frame in your design view to select them. Holding the mouse over one of the frame’s borders will change the cursor to a resizing tool. You can click and drag to change the position of the frame borders to fit your particular application. Selecting the outer-most border will select the frameset itself. Go ahead and do that now, and then open the Properties palette so that you can see the frameset’s information. Figure 2.23 shows the properties for a left-navigation–based frameset. FIGURE 2.23 Select the frameset to set properties for the individual frames.

73

2

74

Day 2

After you have the properties open, you can edit the size of the frames by hand. In the lower right corner of the frameset properties is a small graphical representation of the frames that are available on your screen. Click between them to see what this is actually doing. To adjust one of the frames, just click the one you want to change, and then edit the properties of the frameset: Borders—If you want a visible border around your frames, set this option. Border Width—This is the width in pixels of a border, if any. Border Color—This is the color of the border, if any. Column/Row sizes—Sets the exact pixel size or percentage of the browser that a frame should occupy. With these properties adjusted, you can add some content to your frames. I’m going to set my frameset up so that the frame on the left contains navigation.html and the frame on the right is content.html. (Note: These files must exist before you point to them!) The easiest way to do that is to open the frame palette by choosing Frames from the Window menu. Shown in Figure 2.24, the Frame palette lets you select the actual frame definitions—not the frameset, which we were just editing. The names of each frame are shown inside the content area of that frame within the palette. FIGURE 2.24 Choose a frame to edit its properties.

The Frames Palette After opening the Frames palette, be sure that your properties palette is also open. Next, click one of the content areas and look at your properties palette. You’ll see that it has changed to include very specific information about that palette. In particular, you can modify these attributes: Frame Name—This is the name by which the frame will be referenced in a TARGET attribute. If a link’s target is set to this value, the contents of the link will be displayed in this frame. Src—This is the HTML that will fill this frame. For my example, the filename is navigation.html for the left frame and content.html for the right.

Using the UltraDev WYSIWYG Layout Tools

75

Scroll—Sets whether the frame will scroll if necessary. If you are using a frame as a holder of a static graphic such as a navigation table, you don’t want scrollbars to ever appear. No Resize—If you’d like the user to be able to drag frame borders around and resize content areas, make sure that this selection is turned off. Border—To draw a border around the current frame, set this to Yes. This setting takes precedence over the frameset settings. Border Color—If you want a border, what color would you like it to be? When you’ve finished setting up your frames, save the frameset by choosing Save Frameset from the File menu. The results of my frameset are shown in Figure 2.25. As you can see, the navigation element remains static on the left as the content of the page scrolls downward. FIGURE 2.25 Frames allow you to create static elements, such as navigation, that do not scroll with the rest of the page.

The NoFrames Content Within a frameset definition, a special part of the HTML will be shown if the browser does not support frames. Within this area, you can place an alternate “frameless” version of the page, or inform the viewer that he must upgrade his browser before continuing. You can access this special content by choosing Edit NoFrames Content from the Frameset option under the Modify menu.

Complex Framesets The palette of potential framesets is only a starting place for designing your own frames. Similar to tables, you can nest framesets inside of one another to create subdivisions of a given frame. You can also use the Split Frame options under Frameset in the Modify menu to subdivide a frame. This will let you set up your frames within the current frameset rather than embedding multiple frames within one another—which can lead to some nasty code.

2

76

Day 2

Tip

There is one good reason to embed multiple framesets within one another. As it stands now, a link can only target a single frame, or the top of a frameset. In order to refresh multiple frames within a page, those frames can all be embedded within a single frameset, and the top of that frameset itself can be the target of a link.

To Frame or Not To Frame? There is some debate whether frames are a good idea for Web sites. I’ve recently worked on a few projects in which the goal was to redesign an entire site so that it worked outside of frames, even though the layout was originally designed to be included in a frameset. The trouble with frames is that they can get quite confusing depending on how a user interacts with them. Suppose that a user goes to a page and finds content in one of the frames that he’d like to bookmark. Depending on the browser, it might bookmark the frameset (which doesn’t necessarily include the page the user navigated to), or it might bookmark one of the frames in the frameset if the user highlighted it. For new users, this can be confusing and more than a little distressing. For dynamic applications, if variables are being passed around to programs that generate the content of the frames, these programs might get out of sync with each other. Instead of having to generate a single page, the software needs to update multiple pages in multiple frames. On the flip side, this means that program functionality, in some cases, can be divided up among multiple programs, with each program only knowing how to generate content for its frame. No matter what route you choose, you’ll find reasons for and against it. Frames are an HTML tool, and much like Layers and Tables, they have their benefits and their drawbacks. Go with what works best for you.

Forms The only HTML element that hasn’t been covered in detail today is the Form element. Forms are necessary for inputting data for processing by server-side applications— and, as you’re aware, a large portion of this book is dedicated to creating server-based applications through the UltraDev interface. We’ll take an in-depth look at forms on Day 11, “Storing, Editing, and Updating Data from an UltraDev Application,” when we start saving data to online databases.

Using the UltraDev WYSIWYG Layout Tools

77

Checking Your Code If you don’t have every possible browser installed on your system but want to check for errors that can occur when the page is viewed in another browser, you can use the Check Target Browsers option under the File menu. You’ll first be prompted for the browsers you want to check the file against, as seen in Figure 2.23. You can choose as many as you’d like from the list, and then click the Check button. UltraDev will take a few moments to do its analysis and then will present a concise report of results and compatibility between different platforms. A page optimized for 4.0 browsers is shown in the analysis results of Figure 2.26. FIGURE 2.26 The results page shows everything wrong with your Web site.

If you’re feeling truly adventurous, you can choose the 3.0 Browser Compatible option from the Convert submenu under File. This will make a reasonable attempt at converting your document to be compliant with older browsers, but will most likely make some changes you don’t want in the process.

Reporting If you want to quickly view statistics related to your site or current document, you can choose the Reports option from the Site menu. Shown in Figure 2.27, you can configure

2

78

Day 2

the reporting system to give you information on several conditions that could improve the functionality and performance of your site, such as • Combinative nested font tags • Missing Alt text for images • Redundant nested tags • Empty tags • Untitled documents FIGURE 2.27 Choose the reporting functions you want to run, and the documents that should be included in the report.

You can also generate reports based on who is currently editing one of your site documents or design notes that have been stored in the system. You’ll learn more about distributed editing environments and design notes in Day 3, “Planning and Managing a Web Site.” To use the reporting system, choose the level of reporting (sitewide, single document, and so on), and then click the appropriate check boxes of the reports you want to use. Some reports offer additional configuration options that can be activated by clicking the Report Settings button. Finally, click the Run button to generate the report. An example report is shown in Figure 2.28. FIGURE 2.28 Reports can help you optimize and improve your Web site.

Using the UltraDev WYSIWYG Layout Tools

79

Summary Today you learned many of the tools that you need to create complex Web sites. Tables, Frames, Layers, and the Property inspector should no longer hold any mystery. These tools, although not necessary for creating dynamic Web sites, are an important part of UltraDev’s capability to maintain all aspects of a Web site—from the application logic to the look and feel.

2

Q&A Q If I define the keywords metatags, does it mean that I’ll be able to find my site on search engines? A The keywords are only used when your site has been indexed. You must visit the search engine pages and manually submit the URL for the site before it will be cataloged. Q I keep trying to set up tables to align my images, but they aren’t aligned properly; white spaces keep showing up. What’s going on? A Make sure that your table cells are devoid of any white spaces and that the table cell widths add up to the table width. Tables are a “picky” object. Any garbage that gets into them can create spaces and other weird artifacts when they are displayed. Q I’ve created a document using layers, but I don’t see anything on my browser when I preview the page? A Use of layers requires cascading style sheets and a 4.0 or better browser. Chances are, you need to upgrade. Q I’ve created a frameset, but I want to provide a link to “get out of frames”— how do I do this? A Set the target of your link to “_top”—this will link to the “top” of the frameset and directly into the main browser window.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. How can you access and edit the attributes and tags within the tags? 2. Where can I define the colors that a link is displayed in?

80

Day 2

3. How can I position elements using a table so that they are placed against one another? 4. I’ve designed a table using Layers, but now I need it to display properly on 3.0 version browsers. Am I out of luck? 5. How can you use a table to create pixel-point accurate layouts without resorting to layers or time-consuming manual cell spacing? The Layout mode uses tables to transparently allow you to position cells anywhere you’d like on the screen. This is an excellent alternative to layers.

Exercises 1. Practice positioning elements on your page using tables. Although it’s tempting to just start using layers for everything, it’s still a good idea to know how to work with tables. 2. Create a few JavaScript rollover images and a JavaScript navigation bar. If you’ve never created on/off state images before, you might find that it’s a bit harder to get the effect you want than you might think. 3. Practice using framesets. If you have any existing static sites that you’ve created, try to restructure them to use framesets. Get to know the UltraDev frame manipulation interface if you plan on using framesets in your future projects.

WEEK 1

DAY

3

Planning and Managing a Web Site Although Day 2, “Using the UltraDev WYSIWYG Layout Tools,” exposed the UltraDev design tools, you will need a bit of background before you can fully develop a Web site. Creating an entire site consists of more than sitting down and typing/designing HTML. You must carefully plan how the end user will interact with the site. Today, you will learn • The necessary steps you must take before starting to work on your Web site. • The UltraDev tools that are available to help streamline and simplify the design process. • How to work with existing Web sites from within the outlived interface. • Techniques to keep your site online and working within a distributed working environment.

82

Day 3

Site Planning Site planning is one of the most important phases in the design of a Web site. Much like “painting yourself into a corner,” designing a Web site opens the possibility of creating “dead ends” for the user in terms of navigation. If a site is being designed by multiple people, it becomes more critical to carefully plan its construction to avoid any chance of differing styles in layout and navigation. As I’m sure you’ve all experienced, it’s too easy to get lost on a Web site. Navigation bars switch sides, links disappear and reappear, and the design of the pages itself might vary from section to section. As I mentioned in yesterday’s lesson, one of the drawbacks to frames is that it is easy to get lost in the site if there are multiple pages in multiple frames. Many Web sites actually feature someone else’s content, contained within a frame on their pages. These sites are the most confusing of all because it’s next to impossible to tell where the information you’re viewing is coming from or is going to appear. Proper planning can eliminate these problems and more. Spend a few hours before you start programming and save yourself days of reworking later.

Site Maps So, what is a site map? It’s exactly what it sounds like—a map of the site that you are creating. It provides a visual means of showing how a user can navigate between the different available pages. If you map your site out, only to find that there is one way to reach the most important content—through a single link on an About Our Pets page— you’re probably going to be in trouble. Take a look at a site map for a small computer store. Figure 3.1 shows a potential site map that can be used in the construction of the Web pages. In this site map, pages are grouped by category, and links between these categories are shown with lines. By laying out your site visually before it’s built, you can determine the best way for the user to navigate. You can also avoid the problem of having orphan pages that are not linked to directly from the rest of the site.

Note

Orphan pages occur when someone designs content for an area of a Web site. It gets built, but is never linked into the bulk of the pages. I’ve experienced this firsthand on several occasions when a site has been created without a proper site map. I recently constructed a site following the guidelines that the client had prepared, only to find that it was impossible to reach the About This Company portion of the Web site from any of the other pages. Taking the time to create a simple site map would have solved this problem.

Planning and Managing a Web Site

FIGURE 3.1

83

Welcome Page

A site map can ease the process of designing and linking pages in a Web site. Company Information

Staff

Help

Shopping System

Industry News

Product Catalog

3 Job Opportunities

Checkout

File Layout Site maps also aid in the actual directory structure that you use while building the site. It is all too common to take over the maintenance of a site and find that every single page is located in the same directory, regardless of its position on the site. The process of creating a site map involves defining the relationships between the pages on the site. Later, when you create the site itself, the related pages can be grouped under a common directory. This makes finding and manipulating them much easier. Typically, sites are created with HTML directories for each of the major categories on the site, and an image directory for the images on the pages within that category. You might find that a different layout works better for you. I’ve had many occasions in which the number of images on an individual page warranted creating a separate image directory for that document. The most important thing to keep in mind is that the structure you’re creating will probably have to be maintained by someone else someday. Do a good job now, and you’ll make someone very happy down the road.

Naming Conventions When you’ve determined how your site is going to be built and where the files are going to be located, the next big decision is how you’re going to name them. Depending on the size of a Web site, there are typically several people involved in getting it put together—

84

Day 3

the HTML programmer, graphic designers, and a system administrator. Each of these people should have input into the naming conventions that are used on the files.

The Programmer and Graphic Artist In order for a smooth transition to take place between concept graphics and the final product, the HTML programmer must be able to anticipate how the graphic artist intends files to be used. For example, there are often instances in which large graphic files are broken down into smaller images that must be placed together in a table. If the graphic files are handed off to the programmer as art1.jpg, art2.jpg, and so on, the programmer has to open each image individually and essentially piece together a puzzle (or spend a great deal of time bugging the graphic designer). A better solution would be to set a standard for labeling images by their position within the table based on rows and columns. A file named flowerr1c1.jpg could tell the HTML programmer to insert the image in row 1 and column 1 of the page’s table. Of course, this is just an example of a naming convention. You might have a better idea that works well within your organization. I highly recommend coming up with a system and sticking to it, even if you are the only person working on a site. Receiving a hand-me-down site with images labeled 13123a13.jpg will quickly convince you just how important this is.

The Programmer and the System Administrator If you’re lucky, you fall under both of these categories. If not, pay close attention here before creating any more pages. Whatever naming convention you’ve decided on must work within the naming system of the server software that is being used to run your Web site. If you’re deploying on a Macintosh Web server running on anything less than Mac OS X, you’re going to run into trouble with filenames that are greater than 32 characters long. Likewise, on a Unix server, you need to make sure that you are providing links to pages using case-sensitive conventions. On most Windows-based Web servers, the file HELLO.HTM is the same as hello.htm and can be retrieved by referencing either version of the filename. Unix machines, however, are case sensitive, and must reference the exact filename. All the little quirks about the platform you’re deploying on should be well documented before you start naming files. Here are some rules of thumb that work well: No punctuation—Remove any punctuation from filenames. The only allowable characters should be alphanumeric.

Planning and Managing a Web Site

85

No spaces—Spaces are valid for filenames, but they can be difficult to link to because they must be translated to %20 within the HTML. Most people replace the spaces in their documents with underscore characters: ( _ ). Consistent case—Do not switch case while naming files. Choose uppercase or lowercase names and stick with them. Short and Simple—Keep the names of your files short and simple. This keeps the Web site portable to other platforms without long filenames and makes the HTML more readable. Following these guidelines does not guarantee that your files will work on all systems, but it is very likely. Be sure to check with your system administrator for any other information that you should know about your deployment platform.

The UltraDev Site Map Tools The built-in site mapping tools in the UltraDev package make maintaining and setting up your Web site a breeze. They do not negate the need for a site map to be drawn up by hand, but they do make the process of going from a map on paper to a real-life Web site much easier. Without so much as opening a single file or making a single link, you can create your entire Web site (devoid of content of course) through the use of these tools. You’ve already been using the basic form of the site tool to navigate through the files that you’re using on your site in a simple list form. Another mode, however, will show your pages in a map form and let you define and redefine links between pages. There are two ways you can use this function—either as a way to work with an existing site or a method of designing a new site. Let’s go ahead and take a look at how the site map window looks on an existing site, and then see how it can be used to design a site from scratch.

Using the Site Map on Existing Web Sites If you have defined a site and created a few pages, go ahead and switch to that site using Open Site under the Site menu. If you haven’t yet worked with a site, you can use one of the UltraDev tutorial sites to see how the site map function works. After you’ve opened up a site, you can switch to the Site Map view by clicking the site map icon (the third icon from the top left in the site window) in the Site window. Alternatively, you can just select Site Map from the Window menu to automatically switch to this mode. Your display should look similar to the one shown in Figure 3.2. Nice feature isn’t it? What makes it even better is that this view is actually very useful

3

86

Day 3

besides being pretty. Let’s go through the parts of the site map screen and their uses, and then take a look at the things you can do from within this view. FIGURE 3.2 The site map view gives you a visual overview of your site’s layout.

The site map display looks familiar, doesn’t it? The UltraDev site map tool is very similar to a hand-created site map, but offers some definite benefits from having direct access to the HTML itself.

Icons Each of the icons in the site map display represents a page that it is linked to in the site. Two primary types of icons are local and remote. Local site documents are shown using the standard UltraDev document icons. Documents that are linked to remotely are shown as a generic text style icon with a small globe in the lower right corner. These two icons are the primary place holders for a page on your site map. You can take the map one step further and display all files that are linked into your site (images, style sheets, and so on), by choosing Show Dependent Files from the Site Map View under the Site menu. This can be a bit overwhelming and rarely seems to be of much use—on Windows platforms this is accessible directly from the View menu in the site window. By default, the names of the icons are set to the name of the HTML file. You might find it more intuitive to switch the files to display the name of the HTML page (derived from the <TITLE> tag) rather than its filesystem name. To switch to this view, visit the Site menu again and choose the Show Page Titles option from the Site Map View submenu. You can also set these options from within the Site Map Layout section of the Site definition dialog box.

Planning and Managing a Web Site

Tip

87

Titling your HTML documents is very important in providing a perfect browsing experience to your viewers. Without page titles, bookmarking a page is more or less useless. Properly defined page titles help the user navigate and find previously saved information quickly. Using the Show Page Titles option makes it easy to locate the files that don’t have their <TITLE> tags set. Just scan for the Untitled label.

If there is a file that you don’t want displayed in your site map, you can mark it as hidden under the Site menu using Show/Hide Link options. Unfortunately, if you hide a link, it’s difficult to select it to use the Show option. Luckily, you can choose Show Files Marked as Hidden to show everything. This is another one of those strange UltraDev interface elements that doesn’t seem to be completely intuitive. Hidden files will be shown in italics. One last feature of the icon view is the coloring of the icon label. Broken links are highlighted using red—this makes it very simple to find problems with your site just by looking through for the highlighted icons.

Links As you’ve already seen, the links between files are represented by the connecting lines. Often lines are not spaced as carefully as one would hope. You can change the spacing between linked files by positioning your cursor over the vertical spacing lines and using your mouse to drag the lines over. Near each icon representing a local page is a small target icon, similar to what you’ve seen for making links from the properties palette to other files on your site. You can add links between pages by clicking and dragging between the target and the page you want to link to. This will add a simple text link at the bottom of the HTML page to the target page. You’ll need to open the page and put the link where you want it—don’t expect it to automatically show up in your nice graphic navigation system. An alternate way to perform this function is by choosing the Make Link option under Modify. If you want to change the spacing of the icons in the site map view, just position your mouse over one of the connecting arrows, and drag.

Caution

Connecting to remote links from local files does include the link in the local file, but in the release version of UltraDev that I am using, the link is formatted incorrectly (an extra / is added to http://) and shows up as being broken in the site map.

3

88

Day 3

If your site is more than a single layer deep, you’ve noticed that pages are missing from the map. The UltraDev mapping tool only shows the main level of the site. The lower levels of links can be revealed by clicking the plus and minus icons located near every document icon. You can collapse and expand the tree of links to show or hide as much of the site as you need. If you’d like to move down the tree, you can select another file to be the root node of your site map. Clicking one of the icons in the site map and selecting View as Root will move that icon to the top of the site map display window. The top of the site map window shows where in the site hierarchy you’re currently viewing, as seen in Figure 3.3. You can click the levels shown in the window header to move up in the site tree. FIGURE 3.3 Use the top of the site map window to navigate through the levels of the site hierarchy.

Similarly, if you’d like to redefine which file is the homepage of your site, you can select the file in the local file listing and use the Set as Homepage selection. You can also use the New Home Page option to create a new HTML file that will become the root of your site. Personally, I’ve never really found an applied use for these options. A few useful options are Change Link and Remove Link. If you select an icon and then Change Link, UltraDev will bring up the standard link selection dialog box. Selecting a new link will replace all links in your site so that they point to a new location. Choosing Remove Link will remove links in the site that point to that file. It might seem a bit confusing at first, but you’re not really modifying the file that is selected, you’re modifying the files that point to the selected file.

Selected Files Within the site map, you can use a standard file selection rectangle to select multiple (or single) local files. Cumulative statistics for these files will be shown in the status bar of the site map window. As you select files within this view, notice that the corresponding site files are selected in the file list on the right side of the window.

Planning and Managing a Web Site

89

Miscellaneous Site Map Options A few other options can be set that alter the display of the site map. Choosing Layout from the Site Map View menu will open the Layout portion of the site definition window. Again, the UltraDev interface is a bit confusing here. The only settings found here that you haven’t seen already are Number of Columns and Column Width. The Number of Columns parameter is used for configuring how many columns of icons are shown in each row of the site map. Column Width is a value, given in pixels, that will be used to set the default width of an icon and its label as shown in the site map view.

Using the Site Map on New Web Sites If you already have an existing Web site, you can immediately start using the site map tools to organize it. But what if you’re starting from scratch; how can the site map help you? If you’ve designed a map by hand, the UltraDev tools can be used to immediately implement a skeleton version of the site without actually needing any content, or even the elements that you’ll need to navigate the site.

Define a New Site The first step in designing a site within the site map view is to define a new site. Create a new folder on your computer to hold the local copy of the site files. Set up the site as if you were going to immediately start adding pages. Set a homepage for the site and let UltraDev create the file for you. Next, switch to the site map view. You should see your single homepage file at the top of the window.

Create Content Pages Your site obviously is going to need more than a homepage. You can create the other pages in the site and the links between them in one simple action. Assume, for a moment, that you’re linking to three pages from your homepage: content.html, links.html, and about.html. Click the homepage icon, and then choose Link to New File from the Site Map View menu or the contextual menu. As shown in Figure 3.4, you’ll be prompted with a shortcut file creation screen. From this simple screen, you can set the Title and filename for your new file. FIGURE 3.4 Creating new files in your site is a very simple process.

After the file is created, the corresponding icons appear in the site map view, linked appropriately to the homepage. You can continue this process on any of the new pages in order to create all the pages in the site.

3

90

Day 3

Define the Links Although you’ve defined part of your links while creating your new pages, links between the new pages themselves will need to be defined. If you read the earlier portion of the chapter related to defining links on existing sites, you know what to do. If not, defining links between pages is very simple. Use the target indicator by each file icon to click and drag links between files. Within a few minutes, you can graphically create an entire site, including all the links between the pages. This “instant prototyping” is a good way to test a site’s navigation and get a feel for how the site will work. You can slowly fill in the content of the pages in the site as it becomes available.

Organize the Files One thing that might cause a bit of concern (especially if you read my earlier comments about maintaining a clear directory structure) is that all the created files are in the main root level of your site. The good news is that UltraDev’s link-rewriting capabilities make it simple to add structure to your site after the files have all been created and linked. You can create new folders by using the contextual menu inside the file list view to the right of the site map. After your folders are created, just drag the files into the folders in the list view. UltraDev will offer to rewrite all the links to the file so that they point to the appropriate location.

Save Your Site Map If your Web site is constructed, and you’re happy with the site map, you can save it to a graphic file if you’d prefer using the Site Map View menu. This is very useful if you want to put the site map online. You can use an image map to provide point and click functionality from the site map image to the different pages on your site. Doing this will turn your site map into a navigation tool for the users accessing your pages.

Bringing an Existing Site into UltraDev If you’re an UltraDev user, you fall into one of two categories: you’re going to use the software to create new Web sites, or you want to use UltraDev to work with an existing site. You should have the information you need to start creating a new site, but what about a site that is sitting on a server somewhere that needs to be updated and maintained?

Accessing Your Data Depending on your server platform, you might have more than one option for getting to the information that you need. The easiest way to maintain a site is to access the files

Planning and Managing a Web Site

91

directly through a shared volume. You can then access the files directly on the server. My copy of UltraDev is configured through a shared drive to a Linux server that can immediately access and update Web site files. Servers based on Linux and NT should have no problem sharing drives to both Macintosh and Windows clients, making them nearperfect serving platforms. If you don’t have direct access to the site on the server, you can use FTP to get to the files. Using FTP, you’ll need to maintain a local copy of the files on your design computer. When you make changes to the local files, you’ll synchronize them with the remote site in order to deploy the updates.

Note

Whether you’re working through a file share or an FTP server, you have the option of maintaining a local copy of the files and synchronizing them when you make changes. If you have the option of making changes directly to the site, do you really want to keep a local copy of the files? Working with local files is useful if you cannot be connected to the network constantly, or have a slow connection. Additionally, keeping a local copy lets you work with the files, make changes, and preview those changes before they go live. If you accidentally save a file to the live site that isn’t ready, you’d better hope that you removed any comments you don’t want anyone else to see. I recommend that you work with a local copy and then transfer the files to the server.

Setting Up Your Connection Before you can set up your connection, you must decide whether you will maintain a local version of the files or will interact with the files directly on the server. If you’re constrained to using FTP to get to the files, you will have to maintain a local copy of the files. If you are maintaining a local copy of the files, create that copy on your system now.

Direct Connection to the Web Server For connections directly to the deployment Web server, you need to define the site as if it is local to you. The other access methods rely on a local copy of the files. Other than that small catch, you should be ready to go—it’s the same as what you’ve been doing all along.

Caution

If you are creating a direct access site, be sure to set the server access to None. Setting it to Local seems more appropriate. However, UltraDev will expect your local machine to be running a Web server, which it probably isn’t.

3

92

Day 3

Local/Network Connection The second type of server access is listed in the site definition dialog as Local/Network. Similar to the direct connection previously discussed, this connection relies on you being able to access the directory of your Web server as a local (shared) volume. The difference is that you’ll also maintain a separate local copy of the files that will be used for changes, and then synchronized with the real site. If you have chosen Local/Network as your server access method, you’ll notice that the corresponding site definition screen changes as well. Shown in Figure 3.5, you need to pick a folder that contains the live copy of your Web site. This should be different from the site folder you set in the Local Info area. FIGURE 3.5 Sites hosted locally or mounted from a shared volume can be accessed directly or using the Local/Network option to maintain a separate working copy of the files.

WebDAV Available only in UltraDev 4.0 and later, WebDAV is an up and coming Web management protocol that is becoming widely accepted as an open standard. Windows supports WebDAV in its Web Folders implementation and Mac OS X also adds system-wide support for the feature. Your network administrator should have the information you need to log in to a WebDAV server if it is supported on your network. To define the server, select WebDAV as the Access method, and then click the Info button. You will be prompted for the standard fare—host URL, username, password, and email address. You also have the option of saving your password if you so desire.

SourceSafe Database Also only available in later versions of UltraDev, SourceSafe Database access uses Microsoft Visual Sourcesafe to control access to files. This is, obviously, a Microsoft

Planning and Managing a Web Site

93

product and might not be available in all production environments. If you do have access to a SourceSafe system, click the Info button to set up access. Fill in the path to the SourceSafe database, as well as the Project, username, and password fields. Click the Save button to save the password between accesses. No matter what access method you choose, UltraDev hides the implementation behind its easy-touse interface.

FTP Access The last supported method of server access is FTP—this is the “if all else fails” approach to Web server connectivity. If you have nothing but a dial-in line or a very secure server, you’ll probably end up using FTP. To configure FTP access, choose the FTP option for Server Access. As you can see in Figure 3.6, you’ll need to complete several fields before you can connect to the remote site. I’ve configured my system to connect to 192.168.0.1 and the directory public_html. FIGURE 3.6 Configure your FTP settings by filling in the appropriate fields.

The available options for connecting to your Web server will be explored now: FTP Host—This is the hostname or IP address of the server you’re connecting to. Host Directory—This is the directory path that leads to your Web site’s root directory. There’s a good chance you can leave this blank. Login—This is your username for accessing the remote server. Password—This is the password for the site. If you’re comfortable saving the password with the remote site information, click the Save check box.

3

94

Day 3

Use Passive FTP—Passive FTP is important to select if you’re using FTP from within a private subnet that is using IP masquerading or Network Address Translation. Technically speaking, passive FTP lets the computer making the connection open both the data and control channels of the connection, rather than having the remote server open a connection back to the client. If you aren’t sure if you need this, you might want to check it just in case. It won’t hurt even if you don’t need it. Use Firewall—If your site is firewalled, you might have to set up UltraDev so that it can properly access the remote server from behind the firewall. Your best bet is to try using passive FTP first. If it doesn’t work, firewall settings might be in order. If you have to use a firewall, you’ll need to configure it in the UltraDev preferences. A few of the settings here are also used by the Local/Network site access method, so you might want to take a look at these preferences even if you aren’t using FTP. Site FTP Preferences Open the UltraDev preferences from Edit menu and select the Site category. As demonstrated in Figure 3.7, you can alter the layout of the Site file window and fine-tune the FTP settings for your computer. FIGURE 3.7 The Site preferences alter the way that site files are displayed and how the FTP client performs.

It’s unlikely you’ll need to change anything here, unless your network is behind a firewall. If you decide to adjust the preferences, here’s what the changes will do: Always Show—The site files are separated into local and remote file views. By default, the local files are on the right whereas the remote files are on the left. Changing these first two pop-up menus allows you to select which files will be shown on which side of the site file screen.

Planning and Managing a Web Site

95

Dependent Files—These files are needed by the files that you’re transferring to the server. For example, if you’re working with an HTML file with images, the images are dependent files. The Dependent files options control whether UltraDev will ask you to transfer dependent files when a file is transferred to or from the remote machine. FTP Connection—This checks the disconnect box and enters a value to force an FTP connection to be terminated if no data has been transferred in a certain number of minutes. This is useful if you’re using a dial-in line to access the server and are being charged dial-up fees. FTP Time Out—The maximum length of time to wait for the FTP server to respond before reporting a failure. Firewall Host—If you’re behind a firewall, you probably know what this setting is for. This hostname or address acts as a gateway to the rest of the Internet. Firewall Port—You’ll need to point your computer to a specific port of the firewall in order to get to the outside. The default FTP port number is 21. Put Options—To automatically save your changes before files are transferred, click this check box. Without it, you might make changes, transfer the files to the server, and not see the changes on the production Web site. There’s little need to change most of these options. Setting the firewall options if you’re not behind a firewall will result in a connection failure. Advanced Optional FTP Configuration If you’re familiar with the FTP protocol, you know that it can transfer files in binary or ASCII mode. Transferring a binary file as ASCII is a quick way to corrupt a program or image file. Why transfer in ASCII mode at all? ASCII transfers automatically translate the “end of line” characters, which are different on Unix, Windows, and Mac OS platforms. There is no convenient way to tell the UltraDev FTP software how to transfer files to and from the server. To do this, you’ll need to edit the file FTPExtensionMapMac.txt (Mac OS) and FTPExtensionMap.txt (Windows)that is located in the Configuration folder within the UltraDev program directory. Here’s a portion of that file: CGI CSS DCR DIR DOC DXR EXE

DmWr DmWr MD97 MD97 MSWD MD97 ????

TEXT TEXT FGDC FGDC WDBN FGDC APPL

ASCII ASCII BINARY BINARY BINARY BINARY BINARY

3

96

Day 3

GIF HTM HTML JPG JPEG JS LBI MNO MOV MPEG

MKBY DmWr DmWr MKBY MKBY ttxt DmWr DmWr TVOD mMPG

GIFf TEXT TEXT JPEG JPEG TEXT TEXT TEXT MooV MPEG

BINARY ASCII ASCII BINARY BINARY ASCII ASCII BINARY BINARY BINARY

Windows users only need to pay attention to the first and last columns of this file—the middle two columns are Macintosh creator and file-type signatures. In order to associate a file with a transfer type, add the file extension in the first column and the transfer type in the last column. In the sample list, you can see that HTML files are transferred as text whereas images (GIF,JPG) are binary transfers. To add support for Java, I’d add .jar and .class with binary as the transfer mode. This enables me to transfer Java JAR files in BINARY mode.

Macintosh File Creators and Types The Macintosh has a unique system of identifying what a file is and what created it based on a four character signature that is stored with every file. Therefore, if you create a GIF file in Photoshop, it will open in Photoshop, whereas another GIF file might have a creator signature that points to Fireworks. Each file knows what it is and where it came from. You can use a program like Apple’s ResEdit to look up the signatures for a given file or document. Place the creator and type signatures in the middle two columns of the FTPExtensionMapMac.txt file, and your system will recognize the types of remote files and what program they should be opened in for editing.

Using the Connection If you’ve set up a working FTP configuration or a Network connection, you’re ready to try the file transfer features of the Site Files window. Go ahead and connect to the remote site by clicking the plug Connect icon button at the top of the screen. Figure 3.8 demonstrates a live connection between my local computer and a remote FTP site. If your screen only shows the local files, click the small triangle in the lower left corner of the file window so that it points to the right. You’re now ready to transfer files between your local and remote sites.

Planning and Managing a Web Site

97

FIGURE 3.8 A live connection is made.

Manually Transferring Files The easiest way to move files between the different locations is to click and drag. An extremely beneficial feature of this process is that UltraDev will determine what the selected file(s) dependant files are, and it will offer to transfer them. This saves you the trouble of trying to find everything that goes with a certain file—it will be done automatically. You can drag individual files, multiple files, or even entire folders between these views. Alternatively, you can follow the FTP model for file transfers and use the up arrow Put button to put files from the local directories onto the remote servers. The down arrow Get button retrieves files and folders from the remote server. A status bar in the lower right corner of the Site Files window shows the progress of the files as they are transferred. Clicking the red stop sign by the status bar cancels the current action in progress. If something goes wrong during the FTP process, you can view a log of the FTP commands sent to the remote server with FTP Log under the Site menu on the Macintosh, or under the Site palette’s Window menu on Windows. There’s a good chance you can find the solution to your problems here.

Refreshing the File View If a file changes (is added or deleted) on the local or remote side without the knowledge of UltraDev, it probably won’t show up in the file listing. If you feel that something isn’t appearing on either side of the connection, you can refresh the files that are shown by clicking the refresh button—the circular arrow at the top of the site view. This will reload both sides of the display. If you’d specifically prefer to force the local or the remote file lists to refresh, you can choose Refresh Local or Refresh Remote from the Site Files View submenu located under Site. This forces only the appropriate file listing to be reloaded.

3

98

Day 3

Synchronizing Files The most useful way of transferring files is through synchronization. Instead of trying to find all the updated files you need to transfer manually, you can ask UltraDev to help you figure out what has changed. If you’d just like a list of what has changed, use the Select Newer Local and Select Newer Remote commands from the Site Files View menu. This highlights all the files in the respective list that are newer than the corresponding file at the other end of the connection. You can then drag the files over to the opposite side to synchronize the file listing. This, coupled with UltraDev’s capability to also transfer dependent files, makes this a great way to keep things in sync without turning complete control over to UltraDev. If you prefer to let UltraDev do all the work for you, choose the Synchronize selection from under the Site menu. As you can see in Figure 3.9, just click Preview, and UltraDev will compile a list of files that should be updated. If you’d like to modify the files being transferred, select/deselect the files you’d like. When ready, click OK to perform the synchronization process. FIGURE 3.9 Synchronize your local and remote sites instantly.

With the Synchronize command, you can choose what you want to transfer (the entire site, or only selected files) and which way you want the transfer to take place (from local to remote, remote to local, or both). The final option Delete Remote Files not on Local Drive removes any files from the remote server that don’t match something on the local side. Be very careful in choosing to select this option. If anything on the remote site doesn’t have a corresponding local file, it will be deleted. When you’ve finished transferring files to your site, click the Disconnect button to close the connection between your computer and the remote server.

Tip

The icons in the upper left corner of the Site Map and Site Files windows provide a quick way to toggle between these two modes. Choose the left icon for the Site Files view, and the one on the right for the Site Map.

Planning and Managing a Web Site

99

Maintaining Your Site The hardest part of maintaining any large Web site is making sure that all the pages have the appropriate links to each other. With a few hundred pages, it’s easy to occasionally break a link or two, especially if you’re like me and make minor changes by editing the HTML directly.

Link Verification UltraDev has the capability to check all the links in your site in a few seconds. Choose the Check Links Sitewide from the Site menu. Three different check modes that it can operate in are Broken Links, External Links, and Orphaned Files. Each mode is useful, depending on what you’re looking for. Broken Links are links between local files that are broken. Using the UltraDev tools to move, rename, and edit files will usually keep this problem under control. If you edit the files by hand, however, you might find that you occasionally make a mistake or two. External Links is a listing of the links that go outside your site. If you’d like to quickly generate a list of all the remote sites your HTML connects to, this is where you want to be. Although UltraDev doesn’t check these remote links, it identifies them quickly, for verification in your Web browser. Figure 3.10 shows the results of a search for external links on a sample site. FIGURE 3.10 Using Check Links Sitewide, you can locate all the external links in your HTML pages.

The last form of link checking, Orphaned Files, is used to identify files that aren’t connected to by any links inside the site. Unless external sites connect to these files, there is no way for a Web browser to reach them. They are considered orphaned from the rest of the site. After running the link verification tests on your site, use the Save button to save a report to your drive. The report is a simple text file that can be used to keep track of what you’ve fixed or haven’t. A sample report is included here:

3

100

Day 3

Broken Links: test.html External Links: index.html http://www.zdnet.com/ links.html http://www.poisontooth.com/ links.html http://www.rebooty.com/ links.html http://www.shadesofinsanity.com/ othernewssites.htm http://www.cnn.com/ othernewssites.htm http://www.stepwise.com/

Orphaned Files: icbins.pl news.html index.html

Files: 11 Total, Links: 13 Total,

9 HTML, 3 Orphaned 7 OK, 1 Broken, 6 External

The report contains all three link verification phases as well as a summary of the link status within the entire site.

Tip

If you’d like a quick way to check external links, you might want to try my linkcheck program, which is located at http://jray.ag.ohio-state.edu/. It allows you to check HTML on an existing site in real-time from within your Web browser.

Fixing a Broken Link If you discover a link that is broken across your entire site, such as an external link that has changed or become obsolete, you can quickly make a global change to all the files in your site. Choose the Change Link Sitewide option from the Site menu. In Figure 3.11, I’ve chosen to replace all links to the URL http://www.oldsite.com/ with http://www.newsite.com/. You can also use the folder icon to choose one of the files within your site, rather than typing them manually. Click the OK button, and your changes will quickly be made where necessary. UltraDev will even show you the files that are being updated as it searches them out.

Planning and Managing a Web Site

101

FIGURE 3.11 Quickly replace all links on your site.

A Distributed Editing Environment If you have a group of people who are working together on a site, the need will eventually arise for people to edit files simultaneously. Unfortunately, the problem is that two people might try to edit the same file at the same time. In the normal editing mode, the last person to save the file will overwrite the changes made by the first person. Constantly having to tell your colleagues what file you’re working on is not an efficient way of solving the problem either. As usual, UltraDev has a tool that makes this a nonissue. Using a Check In/Out system, you can exert ownership over a file, and other people will not be able to access the file you have “checked out”. It’s similar to checking a book out of a library. When you check the book out, it’s in your possession until you’re done. People can look up who has it, but can’t access it. When you’re done, you check the book back in and other people can check it out. Several systems implement Check In/Out systems, such as MS SourceSafe and WebDAV. If you aren’t running either of these systems, UltraDev can’t be certain what the remote system is running, it must keep track of who has the file using a simple file locking system.

Enabling Check In and Check Out The first thing you need to do if you want to use the Check In/Out system is adjust the site definition for the Web site that you want to use it with. Open the site definition window, and then choose Remote Info and click the Enable File Check In and Check Out button. As you can see in Figure 3.12, this isn’t the most complex configuration screen you’ve seen. At the very least, you’ll want to enable the Check In/Out system, and provide a name and email address that will be attached to the file when you check it out. Finally, it’s a good idea to select the Check Out Files when Opening option. This will automatically check files out as you open them.

Note

In order to use the Check In/Out functions within UltraDev, you must be using a server access method other than None.

3

102

Day 3

FIGURE 3.12 The Check In/Out options are very sparse.

Using the Check In/Out System Using the tracking system is very simple. If you’ve chosen the Check Out on Open option in the Check In/Out setup, you can operate the system as you normally would. Any file you open will be automatically checked out. UltraDev and DreamWeaver users who are properly configured will not be able to check out files once another user has control. You can also use the check out (down arrow with checkmark) and check in (up arrow with lock) buttons at the top of the Site Files window to control the process of gaining and relinquishing control of the site’s files. The files that are checked out on the system are displayed along with a Check Mark icon and a field showing who currently is using the file. Clicking on the user’s name who has the file checked out will open your email program so you can send them a nasty “give me back my file” message. Figure 3.13 demonstrates the check-out system in action. FIGURE 3.13 Files that are checked out show the user who is currently controlling them.

If you are creating Web sites in a distributed editing environment, you’ll find the check in/out system invaluable. The only other options are clearly defining who should be editing what files, and when, or partition your Web site so that each portion of the site is defined separately within each person’s copy of UltraDev.

Planning and Managing a Web Site

103

Design Notes A final tool that is useful for multiuser editing is design notes. Design notes are pieces of information that can be attached to each Web page during the editing process. These notes are stored in XML in a folder _notes found within the site root. When users check out a file that has design notes attached to it, they can look at the existing notes and add new notes. Because the notes are kept separate from the HTML, there is no need to worry about the XML getting in the way of code for the pages. To attach a note to an open page, choose Design Notes from the File menu. To open the notes from the site files view, select the file you want to work with, and then open the contextual menu and choose Design Notes. The design notes definition screen is shown in Figure 3.14. FIGURE 3.14 Design notes can hold whatever information you want to attach to a file.

From the Basic Info tab, you can set a status for the file from a predefined list of some common project status settings. You can also type in a short note or two (clicking the calendar icon inserts the current date), and turn on an option to have the note displayed when its corresponding HTML file is opened. If you’d like to store more information in the design note, select the All Info tab. Without getting into too much detail of XML, each of the design note attributes is stored as a name/value pair. The Info field shows all these defined pairs. The Name and Value can be changed by picking one of the lines in Info and altering the values in these fields. As with all UltraDev’s property lists, the + and - buttons add and delete items from the list. If you’d like to edit the design note directly, open the _notes directory in your site and find the .mno XML file that matches your HTML file. For example, the design notes for news.html are stored in _notes/news.html.mno.

3

104

Day 3

Here is an example of the XML for a page’s notes:

As you can see, the information is open and very accessible. Many of UltraDev’s configuration files are written in XML, making customization quite simple.

Summary Things are starting to pick up today. By now you should be comfortable with the HTML editing tools and be able to connect UltraDev to your Web server. Creating sites takes planning so that they can function correctly on a variety of platforms. Problems might arise without proper site naming conventions. UltraDev provides powerful site design tools that make it simple to go from paper to a skeleton site in minutes. Additionally, UltraDev can communicate with servers in several ways. After a connection is established, files that are moved between the local machine and the remote server can be checked out to keep other people from editing the HTML while you’re working. Design notes can be attached to these files to provide more information to your fellow editors.

Q&A Q There seems to be a problem linking to files on my server that contain : and \ in the filename, why? A These characters are commonly used as path delimiters by the Mac OS and Windows operating systems. Be sure to determine what characters you can use before you use anything other than alphanumeric. Q I’ve designed plenty of sites without site maps, why start now? A Small sites can be designed without a site map without many problems. Larger sites consisting of hundreds of pages in dozens of separate sections require planning. Approaching a large site from the perspective of a small site is a big mistake. Q What’s the best way to get files to my server? A I prefer to use Network/Local server access, or None to directly edit the files. If you have no other options, FTP should work fine for you.

Planning and Managing a Web Site

105

Q What happens if I check out a file and I don’t check it back in? A You’ll make the other editors unhappy. They can override the file editing, but overriding the file locking negates the entire purpose of the check in/out system.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What characters should be used in filenames? 2. What’s an easy way to find documents that haven’t been titled? 3. What option needs to be set for the UltraDev FTP client to connect to a remote server from within a masqueraded (private) network? 4. How do you make a list of all the external links on your Web site? 5. What system is necessary for keeping other users from editing your files while you’re using them?

Exercises 1. Design a site map for a company Web site—including news, links, contact information, and products. 2. Set up your site map within the UltraDev environment without actually building the pages. Create all the links between the pages. 3. Deploy the skeleton Web site on your Web server. Activate the Check In and Check Out system and start editing the content.

3

WEEK 1

DAY

4

Web Sites with Action— Client-Side Behaviors Everything we’ve covered, up until today, has been related to making Web sites that are very static, both in terms of appearance and content. Although you’ve learned about the prebuilt JavaScript objects, they remain the only way to add actual programmatic functionality to your HTML—until today. Today the UltraDev environment comes to life with DHTML. Today, you will learn • DHTML basics, pros, and cons. • The client behaviors tool and how to use it to attach functionality to objects and edit the functionality of the prebuilt JavaScript-based objects in your site. • How Layers, coupled with DHTML, can be used to create unique Web applications. • The UltraDev timeline’s use as a scripting tool to add time-based actions to your Web site. • Other technologies for creating client side effects and functionality.

108

Day 4

DHTML—What It Is and Isn’t DHTML is a bit of a misnomer. Standing for Dynamic HTML, it implies that the HTML itself provides dynamic behavior to a Web page. Seeing the letters DHTML for the first time, you might think to yourself, “Darn it, not another language to learn.” In fact, DHTML is nothing more than the fusion of HTML, style sheets, and JavaScript.

Caution

If you’re interested in building universal sites that are accessible by anyone using any browser, DHTML might not be appropriate for your needs. By adding DHTML content to your pages, you’re greatly increasing the browser requirements that will be needed to view your content.

Style Sheets Style Sheets, which you’ll learn more about tomorrow, are a means of controlling the precise placement of objects on a page in terms of size and position. The use of layers is highly dependent on style sheets. If you’ve added any layers into your HTML and adjusted any of their properties, you’ve actually been editing a style for the layer. This is well hidden for layers, but for other objects you’re going to have to get your hands a bit dirty. Because style sheets can define positions for objects with pixel point perfection, they’re necessary for adding DHTML based animation and effects to Web pages. Without style sheets, it would be impossible for the JavaScript to control the object attributes necessary to create DHTML actions.

JavaScript The JavaScript language provides a client-side programming language that can access all the objects that are on a Web page and manipulate them. JavaScript can only modify the properties of an object in relation to the HTML and CSS specifications. It can’t for example, take an image and modify its brightness or contrast. If you can’t access an object’s attributes through HTML or with style sheets, don’t expect JavaScript to save the day. This, however, doesn’t mean that JavaScript isn’t useful. The capability to alter an object’s properties means that the object can be manipulated on the users computer. It can change, resize, or even move images and text with only a few lines of code. Providing these effects on the user’s computer free the server from needing to process anything beyond sending the initial page and graphics.

Web Sites with Action—Client-Side Behaviors

109

The DHTML Problem If DHTML sounds like a great idea, you’re right. In theory, it is a great way to provide custom interaction with a user without needing to write any server-side code. Unfortunately, the reality is that DHTML is not as friendly as one would have hoped. In this book’s introduction, I made a point of discussing the evolution of the Web browser and the problems with differing HTML standards. This, for the most part, has been cleared up between the browser companies, and HTML is settling down. The JavaScript implementation in each browser, however, leaves much to be desired. If you’ve ever written a JavaScript program to include in a Web page, you’ve probably managed to get it working in Netscape or Internet Explorer. At that point, you probably also sat back in your chair, quite proud of yourself, and sent off a quick email to your friends, colleagues, and boss telling them to take a look at your new JavaScript-powered page. Regardless of what browser you chose to use to preview your JavaScript creation, inevitably every single person who looks at your page will be using the opposite browser, and the JavaScript will, of course, fail to operate correctly. This isn’t just incredibly bad karma, it’s the major downfall of successfully deploying cross-browser and cross-platform DHTML Web sites. JavaScript just isn’t the same between different browsers. The primary problem lies with the Document Object Model (DOM) that is employed by the JavaScript implementation on each platform. DOM describes how the different objects within JavaScript are referenced and manipulated. The differences between the Netscape DOM and IE DOM is remarkably large. Keeping JavaScript portable between browsers requires no small amount of forethought and planning. Many times, it means keeping two slightly different versions of the code available for each of the browsers. Using DHTML in UltraDev eliminates this problem by auto-generating code that is compatible with both browser systems. When adding client behaviors to your Web objects, you can also specify which version of the browsers you want to support. Depending on your target, your available options change. If you’re bold and target your Web site specifically for IE 5.0, the list of available client actions is very long.

To “D”(HTML) or Not to “D”(HTML)? DHTML is definitely high in the “wow” factor, but it also greatly limits your audience. Without a 4.0 or greater browser and JavaScript enabled, a Web page that relies on DHTML to provide its content becomes useless to other viewers. I often find that DHTML is overdone on some sites to the extent of making them very difficult to use and quite hard on the eyes. In my opinion, DHTML should be used to supplement a page’s

4

110

Day 4

content. If it can add to a page’s content while not completely overwhelming the reader, by all means, use it. However, if you’re just trying to work DHTML into your page because it’s there, you’re better off without it.

Note

Many types of animation can be used on a Web page—GIFs, Flash, Shockwave, Java, QuickTime, and so on. These types of animation (excluding animated GIFs) require browser plug-ins to operate and exist outside of the HTML page that contains them. DHTML animation is contained inside a page’s HTML and does not require anything beyond the browser itself. DHTML, however, cannot produce all the effects capable in plug-ins. Many browsers are shipping with the Flash plug-in already in place, so you might want to consider using Flash for your complex animations.

Introducing Client Behaviors The new tool we’re going to look at today is the client behaviors palette. This small window lets you attach behaviors to objects—that is, it lets you define how an object should react when certain events, such as mouse clicks, take place. The easiest way to introduce this tool is to view it in action. To do this, you’ll need to add a JavaScript element to your page. Add a simple rollover button to an empty document. Next, select the image and choose Behaviors from the Windows menu.

The Behavior Palette The Behavior palette should appear with two JavaScript actions defined: onMouseOver and onMouseOut. If all is well, your screen should look very similar to that of Figure 4.1. FIGURE 4.1 Behaviors are a list of JavaScript actions and reactions.

The Behaviors palette displays a list of the currently assigned events and their corresponding actions. For the example of a simple rollover image, there is an onMouseOut event that will trigger Swap Image Restore. Likewise, onMouseOver triggers Swap Image. These two events combine to swap the existing image with an another image when the mouse is positioned over it, and restore the original configuration when the mouse moves outside the image.

Web Sites with Action—Client-Side Behaviors

111

Creating a Behavior A Show Events For pop-up submenu is within the drop-down menu to the right of every listed event. Choosing one of these options defines the browser platform for which you will be authoring. This is the first thing that you should set before defining a behavior because it will limit the events you can choose from to only those that match your target platform. This list should be self-explanatory—I suggest using 3.0 and Later for the greatest compatibility or 4.0 and Later for the greatest compatibility and largest feature set. The examples shown here use 4.0 or Later.

Adding an Action Adding a behavior to the object is simple—First, make sure that the object you want to work with is selected, and then move to the Behavior palette. Second, click the + button and choose an appropriate action from the resulting pop-up menu, shown in Figure 4.2. FIGURE 4.2 Quite a few actions are just waiting to be used.

4

Some of these will probably seem quite obvious—such as Play Sound. Others will need a bit of explanation. A list of the actions that you can choose from is shown in Table 4.1. TABLE 4.1

JavaScript Functions and Their Use

Function Name

Description

Call JavaScript

If you’ve written a custom JavaScript function, this action will let you call it.

Change Property

Alters the properties for an object. This is useful for adjusting layer attributes, and so on.

112

Day 4

TABLE 4.1

continued

Function Name

Description

Check Browser

Redirects the user’s browser between different URLs depending on the type (that is, Netscape, or other) and version number.

Check Plugin

Checks for the existence of a plug-in and redirects the browser appropriately.

Control Shockwave or Flash

Controls the playback of Shockwave or Flash presentations.

Drag Layer

Sets up a layer so that it can be moved around the screen by the user. We’ll take a closer look at this feature in a little bit.

Go To URL

Moves the browser to a new URL.

Jump Menu

Changes the functionality of a Jump-To menu.

Jump Menu Go

Alters the Go button of a Jump-To menu. This JavaScript element is found in the form area of the tool palette.

Open Browser Window

Opens a new window in the browser containing a certain URL.

Play Sound

Plays a sound on the end user’s browser.

Popup Message

Shows a simple text message in a separate pop-up window within the browser.

Preload Images

Loads images into the cache so that they can quickly be switched out without additional load time. Images for UltraDev-created rollovers are preloaded by default.

Set Nav Bar Image

Changes the image that is being used for the current navigation bar.

Set Text

Adds text to layers, frames, text fields and the status bar.

Show-Hide Layers

Changes the visibility of layer objects.

Swap Image

Swaps one image for another. If you’re building rollover-type functionality by hand, this is what you should be using.

Swap Image Restore

Restores the images that were swapped using the Swap Image function.

Timeline

Although you haven’t seen the timeline yet, you can probably guess what it does: It lets you define actions that happen at a certain time. The Timeline actions let you jump to points in the timeline or otherwise control the flow of time.

Validate Form

If you have a form that has required fields of data, this JavaScript action can be useful in configuring auto validation before forms are even processed by the server.

Web Sites with Action—Client-Side Behaviors

Tip

113

Most of these actions require that the object they are working on is a named object; that is, it has a name= attribute set. If you haven’t set the names for the objects in your document yet, be sure to do that before defining behaviors. Click the object, and then open the properties palette. The object name field is the text field in the upper right corner of the palette.

If you’re a JavaScript programmer already, you’re probably looking at this list of actions and thinking, “These aren’t JavaScript functions.” You’re right. The actions library is a group of pre-written JavaScript functions that are designed to be cross-browser and cross-platform in nature. At the bottom of the list of actions is a Get More Behaviors function. This takes you to an area on Macromedia’s Web site where you can download new and exciting actions for your pages. We’ll look at this and other extensible parts of UltraDev tomorrow.

Adding an Event After you’ve added an action to your behavior list, you need to attach an event that will trigger the action. In the rollover image, the triggering events were onMouseOver and onMouseOut. Different objects allow different events, and depending on your Events For setting, you might be limited to only a few very compatible events, or a ton of Internet Explorer specific events. To set the event that triggers an action, select the behavior you want to work on, and then click the down arrow in the right side of the selected item’s event field. A pop-up list of the available events will appear, as seen in Figure 4.3. FIGURE 4.3 Choose the event that you want to trigger your action.

4

114

Day 4

You’ll notice that in some cases the events are surrounded by parentheses. This indicates that the object itself does not support the event, but an object can be added that DOES. For example, images do not natively support onMouseOver—in fact, images by themselves support almost no useful events. In order to detect a mouse-over event, UltraDev will automatically stick an anchor tag around the image (), this gives the appearance of the image supporting the necessary functions and saves you the headache of having to remember which object supports what events. If you are seeking further information on supported events in Netscape or Microsoft browsers, you can learn more from their Web sites: Microsoft http://msdn.microsoft.com/scripting/jscript/default.htm

Netscape http://developer.netscape.com/docs/manuals/index.html?content= javascript.html

Some of the common events for 4.0 or greater browsers are listed here: onMouseUp—The mouse button has been released over the object. onMouseOver—The mouse cursor is located over the object. onMouseDown—The mouse button is down while the cursor is over the object. onMouseOut—The mouse cursor has moved outside of the object. onClick—The user has clicked on the object. onDblClick—The user has double-clicked on the object. onKeyDown—The user has pressed down a key. onKeyPress—The user has pressed a key. onKeyUp—The user has released a key. onBlur—An object (such as a text field) has lost focus. onChange—The contents of an object have been changed (such as a pop-up selection field). onFocus—An object has received focus. Most JavaScript is triggered based on mouse events, so you’ll probably want to pay the most attention to using those as your triggers.

Web Sites with Action—Client-Side Behaviors

115

Editing Behaviors If you add actions that are triggered by the same event, you can use the up and down arrow buttons at the top of the Behavior palette to adjust the ordering of the execution of the events. The events execute in a top-down fashion. To alter an event, you can always reassign it using the pop-up menu. The action can be redefined by double-clicking the action field for that behavior. To delete the entire behavior, just select it in the behavior list and click the - button. Suddenly, it’s gone.

Creating a Status Bar Behavior Let’s start creating client behaviors by doing something simple—creating a behavior for a rollover image that also displays a description of what clicking the image does in the status bar of the browser. This is a convenient way of providing informative feedback to the user without having to alter the current HTML display or pop up a new browser window. If you still have a document with a rollover image created, open it now. If not, create a new rollover, and then open the Behavior palette. As we discussed previously, two behaviors are already defined for a rollover image based on the events onMouseOver and onMouseOut. In order to set the status bar message, you’ll need to add a third.

Adding the Set Text Action Click the + button in the palette and choose Set Text of Status Bar. A pop-up window, shown in Figure 4.4, appears to let you enter the text you want to be visible in the status bar. FIGURE 4.4 Enter a line of text you want to be visible in the status bar.

If you’ve played with the actions on your own, you’ve probably discovered that almost each defined action includes its own dialog box for configuring how the action will be carried out. The Set Text dialog boxes are among the simplest actions to configure.

Adding the onMouseOver Event The default event that is added to the behavior when adding a new action is onMouseOver—so actually, if this is what you want, you don’t need to set a thing. When the mouse is over the image, the Set Text action is executed, and the text you entered a

4

116

Day 4

few minutes ago is displayed in the status bar. Obviously nothing is stopping you from using onClick or any of the other defined events. Your final display should look very similar to the behavior palette in Figure 4.5. FIGURE 4.5 Three actions are now defined for the rollover image.

Don’t worry that two onMouseOver events are defined in the behavior list. The ordering of the events (top to bottom) indicates their execution order. In the current configuration, the images will be swapped first, and then the text of the status bar will be set. Because this happens too quickly to be discernable, the ordering isn’t important. If, however, you would like the status bar text to be set first, select that behavior line, and then click the up button to move it up in the execution list.

Note

The order of execution is only adjusted within a particular event type. You can’t move an onMouseOver event to be higher in order of execution than an onMouseOut event because they are entirely independent. Two instances of onMouseOver however, can be adjusted in relation to one another.

When you’ve finished setting up your behavior, try previewing it in your Web browser. As you move your mouse over the image, it will toggle to the alternative “over” image as well as place your customized message in the status bar. It’s that simple. Let’s move on to something similar, but that requires a completely different action.

Tip

You might want to check your behaviors in multiple browsers. You’re likely to find that the results are not quite the same, thanks to the inconsistencies in JavaScript.

Wondering how UltraDev did this? Let’s take a look at the JavaScript that it wrote to implement the behaviors: <script language=”JavaScript”>
Web Sites with Action—Client-Side Behaviors

117

var i,x,a=document.MM_sr; for(i=0;a&&i0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }

The first four functions will be included in any document that uses rollover images. The generic routine MM_findObj is an extremely useful function if you’re a JavaScript programmer. It returns a handle to an object given its name—regardless of the browser platform you’re using. If you don’t know what this means, don’t worry about it. The other three functions MM_preloadImages, MM_swapImages, and MM_swapImageRestore are used to load all the images needed on a page, swap the current images with replacements, and then restore the originals. The next function, however, is the one that handles setting the status bar text. function MM_displayStatusMsg(msgStr) { //v1.0 status=msgStr; document.MM_returnValue = true; } //-->

4

118

Day 4

Finally, inserted into the HTML is the JavaScript trigger itself. The onMouseOver event triggers the image change and status bar message, whereas onMouseOut reverts to the original image selection.

Each behavior that you add to the document will add a new JavaScript function to perform its action. Even if you aren’t a JavaScript programmer, you should be able to figure out what code was added by what behavior just by looking at the function names.

Creating Pop-Up Help Changing the text in the status bar is a reasonable way to provide user feedback, but it doesn’t really grab a person’s attention. Something a bit more obvious would be better. Undoubtedly, you’ve seen the tooltips that are so prevalent in today’s software. Wouldn’t it be great to provide that functionality on a Web page through JavaScript? (Of course it would.)

Setting Up a Tooltip Before setting up a tooltip, you’ll need to create some objects that you’ll be attaching tooltips to. I’ve used the same rollover image that I’ve been using all along, and have used it to create two rollover buttons on my page. You can use any object you want, as long as it supports the onMouseOver and onMouseOut events. The tooltips themselves will be drawn in layers. Because I have two buttons, I’m going to create two layers—one for each of the tooltips used on the page. Make sure that you name your layers appropriately. If you have two buttons on your page, create layer1 and layer2 to correspond to each button. Fill in the contents of these layers with whatever text you want to appear when the cursor is over the buttons. Position the layers as you would like them to appear when they “pop” onto the screen. For example, Figure 4.6 shows a two-button setup with two layers. After the layers are positioned correctly and have the content that you want, open the properties for each of the layers and set the Visibility to Hidden. This will make sure that when a user visits your page for the first time, only the buttons being displayed are visible. You’re now ready to configure the behaviors to make your layers appear as tooltips for the buttons.

Web Sites with Action—Client-Side Behaviors

119

FIGURE 4.6 Position the layers as you want them to appear when they pop onto the screen.

Adding the Hide/Show Behaviors For each of the tooltips to appear and disappear, you will need to add a Show/Hide Layers action to the controlling button’s behavior. When the user moves the mouse over the button, the appropriate layer should be displayed. When the mouse moves out, the layer needs to be hidden. Select one of the buttons that you want to add a behavior to, open the Behaviors palette, and click the + button. From the list of available actions, choose Hide/Show Layers. A list of the available layers and options for those layers will be shown, as in Figure 4.7. FIGURE 4.7 Choose the layer you want to hide or show, and then click the appropriate button.

Click the layer corresponding to the button or object you’re working on and click the Hide button. Highlight your newly added behavior and change the event so that it reads onMouseOut—this ensures that the layer/tooltip is hidden when the user moves her cursor off of the button. Immediately repeat this step, adding a new Hide/Show Layer action, but choose the Show button this time. You should now have two Hide/Show events (one Hide and one Show) for the layer containing your button’s tooltip. For this behavior’s triggering event, choose onMouseOver. This shows the layer when the user’s cursor is over the button image. The final behavior palette for your button should look similar to Figure 4.8.

4

120

Day 4

FIGURE 4.8 You should end up with four behaviors defined if you are adding a tooltip to a rollover image.

For the second button, follow this same procedure, except choose the layer that is appropriate for that button. In a matter of minutes, you can make your Web pages come to life with instant information that only appears when needed.

Tip

Many people use onMouseOver to create a tooltip effect by swapping out images on the screen with an informative graphic containing text. This is a less efficient method of providing information about an object’s function than the hide/show layer approach you just implemented. Graphic-only tooltips take longer to load and don’t provide the positioning flexibility offered by layers. If you have to use graphics in your tooltips, remember, layers can hold anything—including graphics.

Pop-Up Browser Windows A popular way of providing information when clicking a button is to “pop it up” in a window outside the main browser. This is typically used when the information being displayed is relatively small and supplements the information in the main browser. You can actually create a pop-up window without defining any behaviors by setting a unique target name for the link that you want to appear in a new window. This, however, will open the default browser window with the navigation bar, toolbar, menus, and so on. Besides not providing a lightweight solution to showing additional information, it often obscures the main browser window and can be rather confusing to the viewer.

The Open Browser Window Action One of UltraDev’s actions is the capability to create a new browser window with or without any of the browser’s standard graphical components. As a basis for the example, I’ll use a simple image this time. We’re interested in trapping the user’s mouse click event and using it to open a new window.

Web Sites with Action—Client-Side Behaviors

121

Unlike the previous examples where the content for the pop-up information has been stored in the same HTML document you’re authoring with the behaviors, the Open Browser action will point the new window to a URL containing the content you want to display. You’ll need to author a new HTML document that contains what will be displayed in the pop-up. I’ve created a new file called help.html for this purpose. When you’re ready, select the object you want to attach the action to, and open the Behaviors palette. Choose the Open Browser Window action from the list. The configuration screen is shown in Figure 4.9. FIGURE 4.9 Choose the options you want to set for the new browser window.

Enter or browse to the URL that you want displayed in the new pop-up window. If you’d prefer to constrain the window size to a certain dimension, enter that size here. If the pop-up screen is designed to supplement the main page, make sure that it is subordinate in size and can be positioned by the user so that it doesn’t obstruct the content of the main page. Next, set the attributes that you want shown when the window opens.

Tip

It’s best to leave the ability to resize the window even if you are forcing the browser to a certain size. Users always have the final word in their browser configuration and can override the display of even the most carefully designed screens. Without the ability to resize, you’ll inevitably end up with someone who can’t see the content you’ve created.

As a last step, you might want to name the window. Providing a name for the window will enable you to use that window as a target for other links. If the user closes the window, however, its name is released and any use of it in other links will result in a new regular browser window being created. That’s all there is to it. To see the pop-up window in action, open your browser and click on the object that you attached the browser window action to. My version of the pop-up is shown in Figure 4.10.

4

122

Day 4

FIGURE 4.10 The infamous pop-up browser window; now it can be yours too.

Tip

You might have noticed that many Web sites pop up a new window when you first go to their homepages. Sometimes this is informative; other times it’s irritating. If you want to implement the same functionality on your site, you need to attach the Open Browser Window action to the onLoad event of the HTML . Although this is useful, in some cases, don’t do it on every page of your site—hundreds of little browser windows aren’t much fun to deal with.

Drag and Drop on a Web Page? Yes, it’s true. You can implement a full drag-and-drop system on your page using only the UltraDev development tools. This example will round out our exploration of the Behaviors panel and provide a close look at one of the more interesting actions built into UltraDev. By now you’ve seen that layers can be positioned with pixel-perfect accuracy, and JavaScript actions can be used to control the attributes of layers. So, it stands to reason that a behavior could be created to actually move a layer around the screen. Although this can’t be used to develop full applications, it is possible to create simple tutorials or educational material that provides feedback to the user. For example, let’s take a look at how we’d put together a draggable behavior to implement a simple History of the World application. I’ve prepared the graphics shown in Figure 4.11 for the behavior to use.

Web Sites with Action—Client-Side Behaviors

123

FIGURE 4.11 With these graphics, you’ll learn how to implement a simple quiz application.

The goal of this exercise is to create an application in which the user drags the three palettes to the appropriate location on the upper Receptor palette. In order to position the elements within my HTML document, I’ve used layers. You must use layers to position the draggable portions of the display. The static portion—the receptor—is also implemented as a layer. You can implement this any way you prefer, but I felt it was easier to work with in this manner. If you’re following the example, your HTML document should resemble Figure 4.12. FIGURE 4.12 I’m using four layers to implement a receptor, or Drop Target.

Adding the Drag Layer Action With the graphics in place, it’s time to start implementing the dragging behavior. Each of the layers must be set up individually, but the steps should become simple after we walk through this first example.

4

124

Day 4

Although you can add draggable layers to the HTML document, as with any other behavior, an event must trigger the action. If you want the layers to be draggable as soon as the page is loaded, use the object’s onLoad event as the trigger. Before adding the event, move the layer you’re working on so that it is in the appropriate final location (if any) that you want to use as a drag target. This will come in handy later, and you can simply move it back to it’s starting position when you’re done defining the drag. Go ahead and add the Drag Layer event to the document’s onLoad handler. You’ll see a dialog box similar to the one in Figure 4.13. FIGURE 4.13 You can define how the layer can be dragged, and an appropriate drag target.

Choose the layer that you’re working with from the Layer pop-up menu. Next decide on how you’d like the layer to be able to move on your page. Constraining Drag Motion If you want the user to be able to drag the layer anywhere on the screen, you can leave the default Unconstrained setting. If, instead, you want to limit the amount of motion to the left, right, up, and down that the dragging can take place, switch the movement popup menu so that it reads Constrained. If you’ve chosen to constrain the motion, you’ll see four new fields appear: Up, Down, Left, and Right. These fields contain positive numbers that describe how far the layer is allowed to move from its original position. I want to be able to drag up and down, but not from left to right—setting right and left to zero means that the object cannot stray left or right from its original position during the drag process. Drop Targets Next, if you want, you can set a Drag Target for the layer you’re dragging. Earlier I told you to move the layer to its final destination before defining this behavior. If you’ve done that, you can click the Get Current Position button to retrieve the correct coordinates for the drag target. You’ll probably also want to set the Snap if Within field. This is a number of pixels that the drop can be off from the target but will still be snapped back into the target location.

Web Sites with Action—Client-Side Behaviors

Tip

125

A good way to estimate a snap value is to take half the width of the object being dragged. This ensures that the object can be half on the target when released and still snap into its destination.

Advanced Properties Advanced properties of the drag action can be set to add even more interactivity to the layer dragging. By default the entire layer is used as a handle for dragging around the screen—the user can click anywhere in the layer and drag it. Alternatively, you could provide a handle on the image that would be appropriate for the application you are building. For example, if you are creating draggable windows, you might want to define a title bar at the top of the layer and use that as the drag handle. To do this, switch Drag Handle to Area Within Layer. You’ll see four new fields appear. Figure 4.14 shows the advanced properties for a draggable layer. FIGURE 4.14 If you want to provide a drag handle or connect to other JavaScript’s, you can do it in the advanced preferences.

4

The Drag Handle fields are specified in relation to the left and top coordinates of the current layer using the height and the width of the handle. The While Dragging options control what happens to the layer as the drag process is taking place. The default action is to bring the layer to the top of all the other layers, and then Leave on Top when the drag is finished. You can also use the pop-up menu to reposition the layer back to its starting level. Additionally, the Call JavaScript field can contain JavaScript that is executed while the object is in the drag process. Finally, the When Dropped Call JavaScript settings can be used to provide additional actions when the user is done dragging the layer. If the Only if Snapped check box is selected, the JavaScript action will only be executed if the layer is snapped into its final position. I’ve chosen to provide an alert box when the layer is snapped into its final position.

Tip

It isn’t entirely obvious, but the Only if Snapped option can be used to validate if the user dropped the object in the right place. If the object is snapped, it has been appropriately positioned and has found its Drop Target.

126

Day 4

When you’ve finished setting up your Draw Layer, click the OK button and you’re set. Remember to position your layer back to its original position. You should be able to preview the resulting drag-and-drop application in your browser. To add the same functionality to the other layers, simply repeat the steps for each layer using the appropriate layer names and the Drag Target locations. To get an idea of the JavaScript complexity that it takes to accomplish this, take a look at the MM_dragLayer function, which is included here just to give you an idea of how much work UltraDev is saving you. function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL, cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0 //Copyright 1998 Macromedia, Inc. All rights reserved. var i,j,aLayer,retVal,curDrag=null, NS=(navigator.appName==’Netscape’), curLeft, curTop; if (!document.all && !document.layers) return false; retVal = true; if(!NS && event) event.returnValue = true; if (MM_dragLayer.arguments.length > 1) { curDrag = MM_findObj(objName); if (!curDrag) return false; if (!document.allLayers) { document.allLayers = new Array(); with (document) if (NS) { for (i=0; i
Web Sites with Action—Client-Side Behaviors

document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP); } else { var theEvent = ((NS)?objName.type:event.type); if (theEvent == ‘mousedown’) { var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft; var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop; var maxDragZ=null; document.MM_maxZ = 0; for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i]; var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex; if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ; var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf(‘hid’) ➥== -1); if (aLayer.MM_dragOk != null && isVisible) with (aLayer) { var parentL=0; var parentT=0; if (!NS) { parentLayer = aLayer.parentElement; while (parentLayer != null && parentLayer.style.position) { parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop; parentLayer = parentLayer.parentElement; } } var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft); var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop); var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth); var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight); if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null || maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } } if (curDrag) { document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE); curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft; curTop = (NS)?curDrag.top:curDrag.style.pixelTop; MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop; document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false; if(curDrag.MM_toFront) { eval(‘curDrag.’+((NS)?’’:’style.’)+’zIndex=document.MM_maxZ+1’); if (!curDrag.MM_dropBack) document.MM_maxZ++; } retVal = false; if(!NS) event.returnValue = false; } } else if (theEvent == ‘mousemove’) { if (document.MM_curDrag) with (document.MM_curDrag) { var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;

127

4

128

Day 4

var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop; newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY; if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL); if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR); if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT); if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB); MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT; if (NS) {left = newLeft; top = newTop;} else {style.pixelLeft = newLeft; style.pixelTop = newTop;} if (MM_dragJS) eval(MM_dragJS); retVal = false; if(!NS) event.returnValue = false; } } else if (theEvent == ‘mouseup’) { document.onmousemove = null; if (NS) document.releaseEvents(Event.MOUSEMOVE); if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS if (document.MM_curDrag) with (document.MM_curDrag) { if (typeof MM_targL ==’number’ && typeof MM_targT == ‘number’ && (Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+ Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) { if (NS) {left = MM_targL; top = MM_targT;} else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;} MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; } if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS); if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;} retVal = false; if(!NS) event.returnValue = false; } document.MM_curDrag = null; } if (NS) document.routeEvent(objName); } return retVal; }

If you’ve successfully completed this section of the chapter, you should be equipped with everything you need to add object behaviors to your Web applications. There is, however, one final way to add dynamic behavior that you will find both easy to use and very powerful.

Using Timelines If you’ve used Flash, or a QuickTime editor, you’ve seen a timeline editor. Timelines are used to coordinate actions to a specific time, rather than a user action on a Web page. With UltraDev you can create timelines that execute when the page is loaded, or when a particular behavior is triggered. How you use timelines is up to you. The only warning I have is that they can be a bit overwhelming if used everywhere on your page. We’ll take a look at a simple way to animate the logo of a Web page upon its initial loading.

Web Sites with Action—Client-Side Behaviors

129

The Timelines Palette The Timelines palette is most often (and effectively) used to animate layers. You can also use it to animate images, but you won’t have the same level of control that you have with a layer. I suggest that you use layers for animations and insert graphics into those layers. For my initial demonstration of the timeline function, I’m going to create a bouncing ball effect with a graphic that bounces into its final position next to my Web site logo. I’ve set up my document with nothing more than a layer containing an image and the text I want to appear on my site. Take a look at Figure 4.15 to get an idea of how my initial setup looks. FIGURE 4.15 You can animate layers very easily using the timeline tool.

4

Create your own version of this document, and insert a layer. When you’re ready to apply some animation to your layer, open the Timelines palette from the Window menu. The default empty timeline window should resemble the one in Figure 4.16. Before adding anything to the timeline, it’s best to understand how it operates. The first thing you’ll notice in the timeline is the row of numbers listed horizontally in the window. These are the frames of animation that can be set. You can move to any point in the timeline by clicking the frame number that you want to move to. A red marker shows the current location in the timeline. There are different tracks down the left side of the timeline. Each of the tracks can hold objects that are being animated simultaneously with the current timeline. There is also a special track labeled B, which is the behavior

130

Day 4

track. When a frame in the B track is selected, you can open the Behavior palette and add an action to that frame. Using this technique, you can have the timeline perform any of the actions normally triggered by clicks and mouse-overs or other events. FIGURE 4.16 The timeline lets you create actions that are triggered by the passage of time.

Across the top bar of the timeline window are the controls for moving within that timeline and controlling how it plays. The first field is the name. You can create multiple timelines— that are triggered by behaviors—for each HTML document, so it’s important to name your timelines so that you won’t get them confused with one another. The pop-up menu to the right of the name lets you quickly choose which timeline you’re working on. The next group of controls is similar to working with a VCR. The Rewind button moves the current frame being viewed back to the beginning. The left and right arrows move through the frames one at a time. To quickly jump to a particular frame, you can key in the frame number between the two arrow buttons and the timeline will immediately center on that frame.

Tip

To quickly view an animation, click and drag the red frame marker over the timeline. This will let you preview your animation in real time.

To control the fluidity of the animation, you’ll need to adjust the FPS setting. The default selection is 15, meaning that in one second, 15 frames of animation will be shown. If the animation on your screen seems a bit too jumpy, try increasing this number to 30. This

Web Sites with Action—Client-Side Behaviors

131

gives you more space on the timeline to design your animation and results in an overall increase in its smoothness. The last two features of the Timeline window are the Autoplay and Loop check boxes. Clicking the Autoplay check box makes the animation appear onscreen when the page is first loaded. This does nothing except add a behavior to the page’s onLoad event to play the timeline. The Loop button will cycle the animation once it finishes with the timeline—by adding a Play Timeline behavior to the last frame in the current timeline.

Tip

To create a decent looping animation, you must try to have the last frame of the objects animation end exactly where it starts. Otherwise, the object will appear to jump around the screen.

Setting Animation Keyframes To create a simple animation with only a few clicks, you can set the location of your layer at certain points in the timeline, and the UltraDev supporting JavaScript will generate all the frames between them. For example, to animate a layer, select the layer you want to use. Then, from the Modify menu, contextual menu, or the pop-up menu at the top right of the Timeline palette choose Add Object. On track one of your timeline, you should now see your layer. You can drag it between different tracks on the timeline, if you so desire. By default, two keyframes are set: the starting keyframe and the ending frame. These are represented on the timeline by white dots within the track you are editing.

Adding and Removing Keyframes For your first animation, drag the ending keyframe out to around 60. This will give you some area to work in. Next click on the 15th frame in the timeline on the track you are editing, and choose Add Keyframe from palette pop-up menu. Continue adding keyframes at the 30th and 45th frames. If you accidentally add too many keyframes, you can use the Remove Keyframe menu option to remote them. Now you’re ready to define your object positions based on these keyframes. I’ve chosen to move my circle logo around the text for my homepage. As you’re adding the keyframes for your animation, you’ll see that a path is drawn on the design view to represent how your image is going to move. The path and timeline for my final image animation is shown in Figure 4.17.

4

132

Day 4

Tip

Be sure to click the Autoplay button in the timeline window so that the animation will start when the page first loads in the browser.

FIGURE 4.17 The timeline and path for a simple animation are shown here.

Easily Defining a Complex Path Well, that wasn’t so bad, but it isn’t the easiest way to create an animation. If you know exactly how you want to animate an object and have a steady hand, you can drag the object in the path you want it to take, and the keyframes will all be generated for you automatically. To animate using this method, start from a clean slate. You can either create a new document with a layer, or by using your existing document and deleting the currently defined path in the timeline. To delete the animation in the current timeline, select the appropriate track by clicking on it, and then choosing Delete from the palette menu.

Recording a Path Make sure that the layer you want to record is selected in the design view and choose Record Path of Layer from the same menu. Move back to the design view, and very carefully drag your layer around the screen in the path that you want the final animation to take. As you drag the object, dots will be drawn onscreen to record the points where your mouse changed directions. After you’re done drawing, the path will be filled in and smoothed out. Chances are, it’s very unlikely that you managed to draw the path perfectly

Web Sites with Action—Client-Side Behaviors

133

on your first try. UltraDev inserts more keypoints than you probably need, so you’ll want to click through the keypoints in the timeline and delete those you don’t need. Additionally, you can select a keypoint and reposition the layer so that it’s positioned exactly where you want. I’ve managed to create a bouncing ball effect by moving the image up and down the screen and cleaning up the points a bit. The document design view and corresponding timeline are shown in Figure 4.18. FIGURE 4.18 Recording a path is a very easy way to create complex animations.

4

Additional Timeline Functions Most of the options under the timeline pop-up menu should be self explanatory. The functions that we haven’t covered directly are listed here: Add Frame—Not to be confused with adding a keyframe, the Add Frame function adds a frame to the timeline. If you find you’ve run out of space and don’t want to manually reposition all your keyframes, you can insert frames until you have enough space. Remove Frame—This function deletes a frame from the timeline. Change Object—To change the object being animated without changing the animation path, you can use this option. You’ll be prompted for the object you want to switch to. Add/Remove Object—This function adds or deletes an object from the timeline.

134

Day 4

Add/Remove Behavior—This is actually one of the more powerful capabilities of the timeline system. Pop-up windows, other timelines, or any action that you can normally write a behavior for can be added to the timeline. Add/Remove/Rename Timeline—This function adds, deletes, and renames timelines. If you aren’t using multiple timelines on your site, these features won’t be of much use to you. Timelines are best explored by playing with them. You can create effects that previously were limited to people using Flash or other plug-ins. The possibilities are almost unlimited. Using behaviors you can trigger sounds to be played during the animation process— all from within a single HTML file.

Instant Flash Starting in UltraDev 4.0, you have the ability to add some special dynamic elements to your pages as easily as creating HTML. Flash is a very popular design tool that can easily create very small and fast vector animations. Unlike traditional animated GIFs or embedded movies, Flash takes a fraction of the space and can produce dramatic results. In order to easily create some simple Flash files, Macromedia has added two tools to the Object palette that let you add Flash content without any Flash authoring skills or the Flash development environment: Flash Buttons—Flash buttons work like a rollover image link, but sport multiple highlight colors, customizable size, and the use of any font on your system. Flash Text—Flash text takes over where HTML text leaves off. Instead of limiting you to a small range of fonts and sizes, Flash text enables you to add any font in any size to your document. In addition, you can use any of the added text as an HTML link. Let’s take a look at how each of these features work. You’ll be surprised at how easy it can be to start using Flash on your site.

Flash Buttons To add a Flash button to your document, click the Flash Button icon in the Object palette or choose Flash Button from the Interactive Media submenu of Insert. Don’t worry if your cursor isn’t exactly where you want the button—you have full control over it, even after it is added to the page. After choosing to insert the button, UltraDev will display the setup dialog shown in Figure 4.19. This is where you configure the behavior of the button you are adding.

Web Sites with Action—Client-Side Behaviors

135

FIGURE 4.19 Choose the appearance and label for your flash button.

The Sample section shows a pre-generated version of what the button will look like. This sample will not change as you adjust the parameters. Choose the style of button you want from the Style scrolling list. A wide variety of buttons are available—from artistic to e-commerce related. After selecting a style you prefer, enter the label for the button in the Button Text field. You can also choose the font that the button will be rendered in as well as its size. To create a link, simply fill in the appropriate field, or click Browse to choose a file in the site. A target for the link can be chosen with the Target pop-up menu. The final step in the creation of a Flash button is choosing the background color and filename. The Flash file you insert will not necessarily be the same size as the button itself. If you want to set a color for the portion of the Flash that falls outside the body of the button, change the Bg Color selection appropriately. When you’re satisfied with your results, you can choose a filename to hold the Flash button. If you’re not picky, UltraDev will happily choose a name for you. Click the Apply button to apply your settings to the new button. After the Flash button is added to the document, you can click to select it, and then use the resize handles to stretch it however you prefer. Being vector based, the Flash button will maintain its high resolution no matter what. Double-clicking the button will jump back to the Flash button configuration screen—allowing you to make changes at any time.

Flash Text Operating much like the Flash Button, Flash Text is a very simple way to add a highquality vector text to your document design. Click the Flash Text button or choose Flash Text from the Interactive Media menu to begin. The Flash text configuration screen can be seen in Figure 4.20.

4

136

Day 4

FIGURE 4.20 Flash Text adds highquality vector text to your document.

The Flash Text controls are similar to a standard word processor. You can choose the font, size, style, color, and justification. If you want to make the text into a link, you can also choose a rollover color. Type the text you want to turn into a Flash file into the Text field. If the Show Font check box is selected, the text will be shown in the selected font as it is being entered. If you want to turn the text into a link, be sure to fill in the Link field and set a link target, if necessary. Finally, similar to the Flash Button, you can choose a background color for the Flash file as well as a filename. Chances are, however, that the given name is more than sufficient. Unlike standard HTML text, the Flash Text is fully resizable and stretchable in the document design view. You can also double-click the text to edit it or adjust its style parameters. Figure 4.21 shows a document design window with Flash Text and a Flash Button. FIGURE 4.21 Flash Text and Buttons allow you to use highquality vector-based objects directly in the HTML authoring environment.

Web Sites with Action—Client-Side Behaviors

Caution

137

Even though it might be tempting to use these tools everywhere, be sure to know your audience first. Not all browsers come with Flash—if you author all of your navigation using Flash Text or Buttons, you’re likely to alienate at least a portion of your visitors.

Other Dynamic Elements There are other ways to get dynamic elements onto your Web pages—such as full-blown Flash animations or Java. Using Java can add a fully interactive program to your Web site. There is very little you can’t do with these other animation/programming languages. The biggest difference is that these elements require plug-ins, or additional work outside of the UltraDev environment. Depending on the type of content, you can use the Property Inspector to display it directly in the design view by using the Play button. After you have an element to insert, you can use the Modify menu to add a Media type to your document. For example, choose Flash to insert a Flash movie into the HTML. You’ll only see a gray rectangle, shown in Figure 4.22, to represent the dynamic element, but you will design around it and set properties for that object. FIGURE 4.22 Other dynamic elements are not as easy to work with as DHTML.

I prefer to use Java objects on my pages where possible, rather than using proprietary plug-in technologies. Unfortunately, using Java just to create special effects and animation is like using a 50-point sledge hammer to drive a finishing nail. Nonetheless, if you’re interested in grabbing some Java objects to spice up your pages, visit http:// www.gamelan.com/ for a complete library of Java applets that can be embedded in your Web site.

4

138

Day 4

Advanced JavaScript Programmers UltraDev offers several features for JavaScript programmers that make it easy to navigate and debug scripts within your documents. If you’re a programmer, you’ll recognize these functions as being standard within most programming debuggers. Try inserting a few behaviors into a new UltraDev Web page, and then switch to the code view of the page. Within the Toolbar, you’ll see a menu represented by a bracket icon {}—this menu lists all the available JavaScript functions and gives you the opportunity to set a breakpoint within the code. Selecting a function jumps your cursor immediately to that area of the code. If you want to set a breakpoint wherever your cursor is, choose Set Breakpoint from the menu. A red dot will appear in front of the line where the breakpoint is located. A breakpoint is a pausing point in the code where the execution of the program will momentarily stop. At this point, you can view the contents of variables to help determine where problems might be occurring. To clear all the breakpoints, choose Remove All Breakpoints from the pull-down menu. After you’ve set the breakpoints in your code, you can choose Debug in Browser from the File menu, or from the pull-down World icon menu in the design view toolbar. Within a few moments, your browser will launch and begin executing the JavaScript code. At the same time, the JavaScript debugger window will open, as seen in Figure 4.23. FIGURE 4.23 Control your debugging session from the JS Debugger window.

Along the top of the window are several icon functions that control how the debugger steps through your code. As you already know, it will stop as it reaches breakpoints, but you can use these icons for even greater functionality. From the right, these controls are

Web Sites with Action—Client-Side Behaviors

139

Run—Runs the script. Restarts the script execution from the beginning. Stop Debugging—Ends the debugging session and exits the debugger. Add/Remove Breakpoint—Toggles the breakpoint status of a line. If a breakpoint exists, it will be turned off. If there is no breakpoint, one will be added. Remove All Breakpoints—Clears all the breakpoints in the script. Step Over—Steps over a line or function, skipping its execution. Step Into—Moves into a function and begins executing. Step Out—Moves out of a function (the opposite of step into). Additionally, you can monitor any of the variables in your functions by adding their names to the list of variables to monitor. Click the + button to add a new variable, and then type the name of the variable in the line you’ve added. As the program executes, the value stored in the variable will appear next to the variable name in real time. For advanced programmers, the JavaScript debugger is an excellent addition to the UltraDev/Dreamweaver environment. JavaScript remains one of the trickiest languages to work with in terms of cross-platform compatibility and the number of “gotchas” to look out for.

Summary Dynamic Web sites are everywhere these days. If you don’t have something moving on your site, you’re behind the times. Although the world hasn’t quite reached that point yet, it’s getting there. Understanding how to create DHTML Web sites is becoming more and more important. Today you learned how UltraDev can automatically create JavaScript Behaviors for your Web pages that would otherwise take extensive JavaScript programming. Additionally, you can create complex animation sequences and drag-and-drop programs all within the HTML of your Web pages—and all from within a point-and-click interface. For those who want to adopt advanced Flash technologies, UltraDev gives you the ability to add buttons and text directly in the design view. Unlike HTML text/images, Flash graphics are vector based and can be resized without any loss of quality.

4

140

Day 4

Q&A Q Will the Netscape JavaScript model ever match that of Internet Explorer? A I wouldn’t count on it. The object model between Netscape and Internet Explorer is very different. If you can target a specific application to Internet Explorer 5 or better, you’ll gain access to many different events unavailable in Netscape. I recommend keeping things as compatible as possible, however. Q The JavaScript action I want isn’t available. How can I add it? A You can check the Macromedia Web site for additional actions, as you’ll see in Day 5, “Reusable Components and UltraDev Packages.” Alternatively, if you’re a programmer, you can read the “Extending Dreamweaver” documentation that is supplied in the UltraDev help system. Q Can I cut and paste DHTML into UltraDev and edit it? A No. You certainly can paste new JavaScript code into the UltraDev environment, but it isn’t going to be editable using the timeline or any of the other tools. Q Which should I use, a plug-in or DHTML? A That’s up to you. Do you want to rely on the user having a plug-in, or him having a 4.0 or greater browser? You might want to survey your target audience before making a decision.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What are behaviors? 2. Some UltraDev events are shown inside of parentheses. What is different about these events? 3. If you want to constrain the movement of a draggable layer to left and right, what values do you put in the constraint fields? 4. How do you set draggable layers to be available when the page is first loaded? 5. How can you increase the fluidity of the animation defined in the timeline? 6. What tool lets you create fully-scalable, vector-based text?

Web Sites with Action—Client-Side Behaviors

141

Exercises 1. Create a behavior that toggles two separate images based on a single image rollover. The built-in rollover tool can only change the image behind rolled over. 2. Create your own version of a bouncing ball DHTML animation, similar to the example. Extend this bouncing ball to include a bounce sound that is triggered on the appropriate frames of the animation. 3. Take some time to research the other types of animation that can be generated through the use of plug-ins. For some interesting examples, look at the Gamelan Java collection (http://www.gamelan.com/) and Joe Cartoon’s Flash animations (http://www.joecartoon.com/). Macromedia’s Web site is a good starting point for other resources (http://www.macromedia.com/).

4

WEEK 1

DAY

5

Reusable Components and UltraDev Packages In the first four days, you’ve learned most everything you need to create Web sites using the entire UltraDev palette of tools. Now you’ll find out how you can use these tools as infrequently as possible. No, I don’t want you to put UltraDev away—I want you to learn how to use it as efficiently as possible. Macromedia has created a variety of tools to help you reuse as much of your HTML code as possible. You can also modify and extend the UltraDev environment by changing the menus, adding new commands, and new behaviors. Today, you will learn • Techniques on planning for code reuse. Learn how to best structure your site for reusing HTML. • How style sheets can make your life easier and create Web sites that work better cross platform. • The UltraDev Library that lets you store HTML for reuse across your site. • How to use templates to create a work environment in which designers can maintain the page design, and content editors can worry about content.

144

Day 5

• How to create command sequences by recording actions. • The ways in which UltraDev can be extended and customized for your work environment.

Code Reuse If you’ve worked on large Web sites, you’ve probably found yourself cutting and pasting code between the different pages to create a consistent look and feel across your Web pages. There are many ways to try to keep your site as efficient as possible, including server-side includes and frames. In some cases they are completely legitimate techniques, but if your server doesn’t support server-side includes, or you don’t want to use frames, what do you do? UltraDev provides tools for minimizing the amount of editing you have to do while keeping the site completely compatible with any server. Before we get into those tools, however, you need to know what they are and how to best plan for their use on your site. By taking these steps and planning ahead, you’ll be creating a site that will be easier to maintain and update in the future—both for yourself and the people who inherit the site from you.

Repetitive Formatting—Style Sheets Take a look through your source code. Do you use tags to set the font face, size, and attributes throughout your documents? If you’re using tables, setting the font for each cell can quickly grow tiresome and eat up a great deal of space as well. Keeping the font sizes and types correct across different pages is even more troublesome. Most formatting and stylizing attributes are easily controllable with Cascading Style Sheets (CSS). A style sheet is a way of defining and redefining style information in browsers that support CSS (Netscape and IE 4.0 or later). For example, using a style sheet, you can tell your HTML document that you want to redefine the tag so that each time it is used, the font Arial at point size 10 is assumed. You can create new style tags as well. These tags can be used to easily apply styles to objects in your HTML— either by hand or through the UltraDev environment. CSS can be embedded directly into the HTML document you’re working on, or, better yet, be maintained in a separate document that is linked to by any of the HTML files in your site. Using this technique, changes to fonts or other formatting information can be applied directly to a single file and immediately carried across the entire site. Additionally, CSS can aid in the creation of cross-platform Web sites. Create a Web site on the Macintosh, and then take a look at it on the PC. Chances are, it looks nothing like

Reusable Components and UltraDev Packages

145

you intended. Design the site on the PC and look at it on the Mac—same thing. Figure 5.1 shows a popular news site as it looks on the Macintosh. FIGURE 5.1 The Macintosh uses 72 dpi fonts.

Compare that to Figure 5.2, which shows the same site on Windows. Notice the amount of information shown on the same size screen. FIGURE 5.2 Windows assumes 96 dpi fonts.

5

146

Day 5

The biggest problem with creating cross-platform sites is that Windows assumes 96 dpi fonts and the Macintosh uses 72 dpi fonts as the default. The result is generally a Web page that looks huge on Windows and significantly smaller on the Macintosh.

Note

The font difference still amazes me. Most Windows machines still ship with 640x480 and 800x600 resolutions—which is nowhere near the assumed 96 dpi for fonts. The amount of information that fits on a Macintosh screen when viewing most Web pages is much greater than that of a similarly configured Windows computer.

CSS have the capability to eliminate this problem by forcing fonts to an exact pixel size rather than a point size. This lets you create sites that are virtually identical wherever you look at them. If you don’t want to use style sheets because they aren’t supported in the browser platform you want to use, you can use HTML Styles that let you create font styles common among pages, but are defined using standard HTML tags.

Common Components Most Web sites have common components used across multiple pages. Headers, footers, and navigation bars are very commonly repeated in HTML. This is fine for small sites, but on sites with hundreds of pages, keeping these objects current is a definite chore. As an example of how this can be a problem—take, for example, a site I recently worked on that is updated with new event information every year. On the site is an archive of the event pamphlet artwork created each year. The artwork is located on a page specifically for that year—but also includes links to all the other pamphlets for other years. When a new year is added, all the other years must also be updated to include the new link. On a site with 20 years, I needed to update 20 individual pages just to add a single link. This could be avoided by using the library tools in UltraDev. A library is a collection of HTML that can be used across many different pages. After a library item is created, it can be used on any of the pages of your site, but it can be edited from a single location. If you’re planning on using server technologies—such as server-side includes (SSI) to provide the same library sort of functionality on your site, you need to identify what is possible before you start building your site. If you don’t know what your deployment platform is going to be, stick to using the UltraDev library system.

Reusable Components and UltraDev Packages

Tip

147

If they’re available on your system, server-side includes are the preferred way of creating reusable components. Using SSI results in smaller files—the reused HTML is kept in its own file and only visible in the final served page. Libraries offer the same flexibility, but the HTML from the library is automatically copied and pasted into other files on the Web site. Larger files are possible, but no dependence exists on the server platform.

As you plan your site and navigation, make note of what components are repeated on your pages. Any common information that might need to change is a good candidate for use in a library.

Templates Templates are a bit different from libraries, but they provide for additional code-reuse possibilities. Templates are exactly what they sound like—a template for a Web site. If you have a common Web site layout for content that is frequently added to your pages, you, as the Webmaster extraordinaire don’t want to have to edit these new pages to add content. A good example would be a real-estate Web site. Although you might have designed the content layout for the site, you’d rather have the agents themselves add new house listings to the site. What you can do is create a template that lets the other people in your organization add content to pages without having to worry about the HTML. A template contains the important parts of the page as locked-down code. The parts that should be editable remain accessible. Using a template can help create an efficient environment for editing pages by distributing the workload among multiple people. Combining a CSS with a template gives you even greater control over the content.

HTML Styles If you want to create font styles that will work on browsers that don’t support CSS, you can create HTML styles using the standard font attributes. The styles that you create are included in the HTML Styles under the Text menu. Several styles are predefined and can be used immediately. Just select the text that you want to apply the style to, and then choose the style from the menu. To define a new style, choose the New Style option under the HTML Styles menu. The screen shown in Figure 5.3 should be displayed.

5

148

Day 5

FIGURE 5.3 You can define HTML styles that will work in any browser.

You’ll need to set a few attributes before your new style becomes usable: Name—This is the name of the style you’re creating. This will be shown in the HTML Styles submenu for easy access. Apply To—This chooses how the style is applied to the HTML: either to a selection or to a parent paragraph element. When Applying—Add to Existing Style keeps the added style within the context of whatever style you’re currently using, rather than the Clear Existing Style option that will apply the new style to the default browser style. Font Attributes—These are the Font face, Size, Color, and Style of the HTML style you’re creating. Paragraph Attributes—If you’re applying the new style to paragraphs, you can also set a default format and alignment for the style. Click the OK button when you’re done and the HTML style will be created.

Tip

An alternative way of creating an HTML style is to format the text in your document the way you want. Then, select the properly formatted text before choosing the New Style option. The attributes of the selected text will automatically be reflected in the HTML style definition.

Besides the HTML Styles menu, you can also access these styles from within the HTML Styles palette. Choose the HTML Styles selection from the Window menu. Your palette should appear, as seen in Figure 5.4. The paragraph symbol and letter a denote paragraph and character styles, respectively.

Reusable Components and UltraDev Packages

149

FIGURE 5.4 The HTML Styles palette gives easy access to defining, applying, deleting, and editing styles.

You can apply the listed styles to your HTML in two ways. By default, auto-apply is turned on by the small check box in the lower left corner. Whenever you select text in the design view and then choose one of the HTML Styles, it will automatically be applied to the selection. If you uncheck this box, the Apply button in the palette will become active—you can then use Apply to force an HTML style to be applied. In the lower right corner of the palette are two other functions that might be of use. Clicking the pad of paper icon defines a new style. The trash can icon deletes the currently selected style. Editing a style is as simple as double-clicking the style in the list. Be careful. If you’re set to auto-apply styles, you might end up applying a style when you only meant to edit it. If you don’t like this behavior, click the Auto-apply button so that it is unchecked.

Tip

HTML styles are a site-wide attribute—you will need to copy the styles.xml file to the Library directory within other sites in order to make it available in order locations. The formatting of the styles, however, will show up in the HTML document, regardless of the styles.xml file.

Cascading Style Sheets Cascading Style Sheets, or CSS, are great tools that can make your life as a Web designer much simpler. Unlike HTML Styles, CSS allow far greater control over the objects in your document and can adjust attributes that aren’t accessible from standard HTML. Because of their complexity, editing CSS manually isn’t much fun. Understanding the syntax isn’t difficult, but remembering all the attributes that you can set is. For example, here is a simple style sheet that alters the and tags: <style type=”text/css”>
5

150

Day 5

th {

font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; color: #660000}

-->

This style sheet sets the font for elements to Arial, Helvetica, Sans Serif and also assigns a default font size and color. Likewise, the tag is also redefined to the same font face, but a larger font size and a different color. Any page that contains this style sheet or is linked to a style sheet containing these attributes will inherit the properties of these tags. The UltraDev interface makes defining tag attributes very simple—just a few points and clicks and you’re set.

Working with Style Sheets The CSS Styles palette is very similar to the HTML style palette. Also, like HTML styles, you can access your CSS styles from the Text menu under the CSS Styles submenu. The CSS Styles palette, however, offers greater control than the menu, so we’ll use it as the starting point for our CSS discussion. Go ahead and open the CSS Styles palette now. It is shown in Figure 5.5. FIGURE 5.5 CSS Styles can be applied across a single page or an entire Web site.

Unlike the HTML styles, this palette starts out empty. If you have an existing style sheet, you can immediately attach it to your document by clicking the first icon in the lower right of the style sheet palette (rectangle with chain line). You’ll be prompted to choose the style sheet within your site directory. To create a new style, click the New icon in the lower right corner (the pad of paper with the + symbol), or choose New Style from the palette’s pop-up menu in the upper-right corner. You should now be at the New Style dialog box, shown in Figure 5.6. FIGURE 5.6 Choose the type of style you want to define and click OK.

Reusable Components and UltraDev Packages

151

Three types of styles you can create are as follows: Custom Style—The custom style can be applied to HTML objects, but must be explicitly specified when you want to use it. Custom styles are named starting with a period (.). Redefined HTML Tag—By redefining a tag, you set the default style for that tag when it is used in the document. In order to override this default, you’ll need to apply a custom style to the document. Use CSS Selector—A CSS Selector is a combination of several tags. The most powerful of these tools is the ability to redefine an HTML tag—suddenly your document can inherit a look without having to change any of the HTML. You can create your styles in two places—an external file, or in the document that you are working in. If you want to add the style to a new style sheet, choose New Style Sheet File from the pop-up menu in the Define in section of the style creation screen. If you’ve already attached a style sheet to your document, you can select that sheet instead of creating a new one. If you prefer to keep the styles defined directly within a document, make sure that This Document Only is selected.

Creating a Style To create your first style, try redefining a tag like . Click the Redefine HTML Tag button and choose B as the tag name. Click OK to continue: 1. Eight different categories of attributes can be set for each style. The most common palette is Type, which controls font attributes. If the type category is not selected, choose it now. The Type definition screen is shown in Figure 5.7. FIGURE 5.7 You can control every aspect of your style’s font definition here.

5

152

Day 5

2. Set a sans serif font face, forced to a 72 pixel size, with a bold weight. If you don’t want to follow this example exactly, you can choose any of the attributes you prefer to use, including color, style, and line height. In fact, the number of attributes is quite overwhelming. Because of the volume of options, I’m including a short reference immediately following this simple tutorial. 3. When you’ve finished deciding what your bold tag is going to look like, click the OK button. 4. Before trying the style out, go through the same process again; except this time define a custom style for yourself. 5. The process of defining a custom style is exactly the same, except for choosing Make Custom Style (class) instead of Redefine Existing Tag. Name the new custom style .heading, and set it as you did the previous font. I choose a size of 128 pixels and an oblique style. 6. Close the style definition window when finished. After your two styles are created, you should be able to look at the HTML source code for your document and see the style definitions in the HEAD section: <style type=”text/css”>

Open the style palette again and take a look at the listed CSS styles that are available. Notice that only superbold is listed. The reason for this is that the only listed styles are custom styles. Styles based on redefined HTML tags are applied automatically and don’t need to be listed.

Applying a Style To apply a CSS based style that redefines an existing HTML tag, you don’t need to do anything except use that tag in your document. Try using the HTML tag you redefined in the previous example. If you followed the example and defined the tag, just enter some text in the design view and choose Style menu under Text. Notice that all of a sudden B doesn’t behave the way it used to. Anytime you use it in the document where it has been redefined, it will appear using the attributes that you set. To set text to a custom style, you can use either the CSS Styles palette or the CSS Styles menu under Text. Simply select what you want to apply a style to, and then click the

Reusable Components and UltraDev Packages

153

style in the palette or choose it from the appropriate menu. If the auto-apply check box in the lower-right corner of the palette is not checked, you’ll need to click the Apply button in the palette before the style will be applied. The none style will remove any applied styles from the current selection. For precise control over where the style is applied, you can use the pop-up menu at the top of the CSS Style palette to choose any of the containing tags of the current selection.

Tip

If you’ve set up styles that aren’t appearing correctly in your document design view, it might be that UltraDev doesn’t support rendering that particular style attribute. Check the CSS definition screens for an * by your missing attribute. If you see an *, you’ll need to preview your document in a browser to see that style attribute rendered correctly.

Editing and Linking to External Style Sheets Defining styles within a document is perfectly fine, but doesn’t make the best use of style sheets. Instead of redefining styles each time they need to be used, you can create a master style sheet that is linked to by every page that needs it. This is a more efficient means of keeping your site consistent. The most direct way to link to a style sheet is using the Attach Style Sheet icon in the lower right corner of the CSS palette, as mentioned earlier. This, however, doesn’t give you the greatest amount of control over the style sheets—you can use the Open Style Sheet icon (represented by a pencil and paper) to manage linked styles in your document. To create an external style sheet, click this icon, or choose Edit Style Sheet from the Text menu. The Style Sheet editor seen in Figure 5.8 should appear. FIGURE 5.8 You can edit and link to style sheets from this window.

5

154

Day 5

From this view, you can create new styles or duplicate, edit, and remove selected styles. The item that we’re mostly interested in right now is the Link button. Go ahead and click it now. You’ll be prompted for a file or URL to link to and given the option to link or import the targeted style sheet. The Link Eternal Style Sheet dialog box is shown in Figure 5.9. FIGURE 5.9 Link to an existing style sheet or provide a new name to create a new file.

If you have a style sheet created, enter its location in the URL. If not, supply a new filename in the URL field such as mystyles.css and click OK. This creates a new empty style sheet. The Edit Style Sheet dialog box will reappear listed with the linked-to style sheet. To start working with the new style sheet file, select it in the list and click Edit. An empty copy of the edit window will appear. This window references the linked style sheet. Here you can add all the styles you prefer. They’ll be saved to the external file, but will be accessible in your current document. On subsequent Web pages, you can simply link to this newly established style sheet and instantly have access to all your styles.

Tip

UltraDev does not currently offer the ability to copy styles between sheets. If you want to merge two existing style sheets, open them up in a text editor and copy the contents from one into the other.

A Style Reference You’ve seen the font attribute style definition screen and, for the most part, it’s simple to understand. The other attribute screens are not as obvious and require some explanation. Additionally, not all the style attributes apply to every situation. If you’re setting positioning attributes for a layer, for example, the font size is of little meaning. An overview of each of the eight attribute screens follows. Let’s take a close look at the attributes in each of these sections now.

Reusable Components and UltraDev Packages

155

You’ve already seen the Type screen. It controls all the style attributes for text objects. Table 5.1 looks at the Type attributes in more detail. TABLE 5.1

Type Attributes

Attribute

Description

Font

The font faces to be applied to the object.

Size

Font size can be specified in pixels for cross-platform consistency.

Weight

The level of the bold applied to the font.

Style

Standard font styles.

Variant

Allows small caps to be used for lowercase.

Line Height

The line spacing for the text object. Determines the amount of space between lines.

Case

Converts the case in the text object to all uppercase, lowercase, or capitalizes the first letter of each word.

Decoration

Additional styles beyond the standard HTML Styles such as strikethrough.

Color

Color.

The Background attribute sets background colors, graphics, and their attributes for objects such as tables and layers. Table 5.2 looks at the Background attributes in more detail. TABLE 5.2

Background Attributes

Attribute

Description

Background Color

The background color of an object.

Background Image

The background image of an object.

Repeat

Controls how a background image repeats (horizontally, vertically, both, or none).

Attachment

Determines if a background image is attached to the page or doesn’t scroll with the page.

Horizontal Position

The horizontal offset for the background image.

Vertical Position

The vertical offset for the background image.

Block attributes control text alignment and spacing attributes for text block objects such as paragraphs. Table 5.3 looks at the Block attributes in more detail.

5

156

Day 5

TABLE 5.3

Block Attributes

Attribute

Description

Word Spacing

The amount of space between words. Negative space collapses the space.

Letter Spacing

Spacing between letters. Again, use negative numbers to tighten spacing.

Vertical Alignment

How an object is arranged in relation to its peers.

Text Align

Controls text justification within an object.

Text Indent

The amount of indent for the first line of a text area, such as a paragraph.

Whitespace

Controls how whitespace is handled. Unlike standard HTML rendering, which condenses strings of spaces into a single space, pre shows all spaces, whereas nowrap prevents all wrapping.

Margin and padding information can be set by altering bounding box attributes for objects. Table 5.4 looks at these attributes in more detail. TABLE 5.4

Box Attributes

Attribute

Description

Width

The width of an object.

Height

The height of an object.

Float

Sets the object position to the right or left and lets other objects float around it.

Clear

Sets a side of the object that does not allow floating. This side remains clear.

Padding

The amount of padding between the boundary of an object and its content.

Margin

The space held between an object and other objects.

The Border attributes control border sizes and colors for tables. Table 5.5 looks at the Border attributes in more detail. TABLE 5.5

Border Attributes

Attribute

Description

Width

Thickness of object borders—for objects such as layers and tables.

Color

The color of the border being drawn.

Style

How the border is drawn (solid, dashed lines).

List attributes for ordered and unordered lists include bullet and number styles. Table 5.6 looks at the List attributes in more detail.

Reusable Components and UltraDev Packages

TABLE 5.6

157

List Attributes

Attribute

Description

Type

The shape/appearance of bullet items in lists.

Bullet Image

An image to be used in the place of the character-based bullet point.

Position

Sets the manner in which list item wrapping occurs.

The Positioning attributes control positioning and determining clipped regions of layers. Table 5.7 looks at the Background attributes in more detail. TABLE 5.7

Positioning Attributes

Attribute

Description

Type

The manner in which a layer is positioned. Relative position places the layer relative to its parent object. Absolute defines the layer’s position in reference to the top of the page, whereas Static places the layer in relation to the document flow.

Z-Index

The front-to-back ordering of the layer in reference to other layers in the document.

Visibility

Whether a layer is hidden or visible in its initial state.

Overflow

How an excess of content should be handled. Layers can be configured to allow all content to be visible, hidden, or scrollable (if the browser allows).

Placement

Location and size settings for a layer.

Clip

Sets a clipping region for a layer.

Extensions include attributes that are not consistent across browsers such as visual Photoshop-like filters and cursor shapes. Table 5.8 looks at the Extensions attributes in more detail. TABLE 5.8

Extensions Attributes

Attribute

Description

Pagebreak

Sets a pagebreak for printing.

Cursor

Sets the cursor when it is positioned over an object. This is only supported in Internet Explorer.

Filter

Another Internet Explorer specific option. Filters apply Photoshop-like filters to portions of a Web page. It’s unlikely that these are going to become a standard anytime soon.

5

158

Day 5

Tip

Remember that UltraDev offers an extensive help section for HTML as well as cascading style sheets. Anytime you need more detailed information, just turn to the Help menu.

A Final Word on Styles When you start using CSS, don’t get carried away. CSS are a great idea and a fantastic tool, but they do not always work the way you would think. There are inconsistencies between Internet Explorer and Netscape, and between the same browsers on different platforms. In my experiences with CSS, I’ve found that they are very useful for maintaining consistent text attributes across pages and keeping sites as cross-platform as possible. Don’t expect things to look exactly as they do in the UltraDev design view, however. Be sure to preview in your browser frequently and have more than one browser platform to use in your tests.

Libraries A Library is just a collection of HTML snippets that you use frequently within your site. These pieces of HTML can be used wherever you need them and can be maintained in a common location. A good example of a component that you might want to reuse is a navigation bar. Let’s take a look at how a navigation bar can be quickly turned into a library item.

Creating a Library Item from Existing HTML The easiest way to put an item into a library is to create the object—that you want to turn into a component—inside your document design view. For example, in Figure 5.10, I have a simple navigation bar made from an imagemap.

Tip

Designing the object inside of a table or a layer provides a convenient way to group the components together.

To add the navigation bar to the library, select the containing layer and choose Add Object to Library from the Library submenu of Modify.

Reusable Components and UltraDev Packages

159

FIGURE 5.10 Design your library item using the UltraDev development tools.

The Site Asset Palette—Libraries The object should now be included in the Library portion of the Assets palette. Open this palette by choosing Assets from the Window menu, and then click the bottom book icon in the lower left of the asset panel icon bar. As you can see in Figure 5.11, the new object is included in the view. FIGURE 5.11 The Library portion of the Assets palette contains all the items you’ve added.

The Asset palette provides quick access to all the items you’ve added to the list. The item that is currently selected in the list is shown in the upper portion of the palette pane. By default, the window is very small, so you might want to resize it so that you can see the upper content portion. You can quickly insert this item into the current document by clicking the Insert button in the lower left corner of the palette.

5

160

Day 5

Creating a Library Item from Scratch An alternative way to create a library item is to start from scratch. To do this, make sure that a document design window is selected; then open the Library area of the Asset palette and click the New icon (notepad with + symbol) in the lower right corner of the palette window. A new empty item will appear in the library list; click it and UltraDev will give you some simple instructions on what to do next, as shown in Figure 5.12. FIGURE 5.12 You can also create a library entry from scratch.

The Edit button referred to by UltraDev’s message is the small pencil and paper icon in lower right corner of the palette. You can use this icon to open a library item and edit it at any time. Closing the document will prompt you to save the item, which will then be updated wherever it has been inserted.

Other Library Functions To rename an item in the Library, click twice on the name to make it editable, and then change it to whatever you prefer. You can also use the Rename command from the popup menu in the upper right corner of the Library palette. The Update Current Page menu item will update the currently opened page with any changes that have been made in the library. Usually, however, you’ll want to work on an entire site and update all the pages with your changes. To do this, use the Update Pages selection. Update Pages will open the dialog box seen in Figure 5.13. From here you can tell UltraDev to Look in an entire site, or choose to only look in pages that reference a particular library item and Update the library items that it finds in those pages. A running log is kept of all the changes in case you what to review the modifications.

Reusable Components and UltraDev Packages

161

FIGURE 5.13 Update all the pages in your site in a single sweep.

Library items can be deleted by selecting them in the palette and clicking the trash can icon, or choosing Delete from the palette menu. Library files themselves are kept in the Library directory within your site files. The items are labeled with the lbi extension, but are stored in standard HTML. You can manipulate these files directly in UltraDev or any other editor.

Template Files Without a doubt, you’ve run into the mention of Templates as you’ve been using the UltraDev. Templates are a special form of file that behaves different from the standard HTML files in the site. A template is used to create pages with a fixed look and feel but with varying content. This is useful for keeping things straight when files are constantly being opened and closed. With standard HTML files, you’ll find that as files are passed around, things will mysteriously break—table dimensions will change, links will break—and no one will have any idea how it happened. If you set up your files as templates, you can safely give the files to content editors without worrying about them disturbing the layout of the page. In distributed editing environments, this is a must. Another way to think of template files is as an inverse of the library function. Instead of providing portions of HTML that are inserted into documents, you provide documents in which portions of HTML can be inserted. The Template interface is even strikingly similar to that of the Library items.

Creating a Template from an Existing Page Because a template is actually a layout of an entire Web page, it’s easiest to create one from an existing page. That way you can design the page in UltraDev without having to worry about defining your editable areas until you are done. For example, look at the

5

162

Day 5

screen in Figure 5.14. This is a simple table-designed screen that features content in two cells of the table. Suppose that you’ve designed this screen and you want to lock it down so that only the two table cells with text can be modified. FIGURE 5.14 Turning existing pages into templates is a snap.

You’ll first need to save the document as a template using Save as Template from the File menu. Unlike the normal Save As dialog box, this one looks a bit different. Templates are saved in a special Templates directory inside of each Web site and have the extension .dwt. From the Save As Template dialog, shown in Figure 5.15, you can select the site that will receive the template and the name of the template you’re creating. After the template has been saved, you can start defining the editable regions. FIGURE 5.15 Templates are saved to a site.

Note

You don’t have to save the document as a template before you start defining editable regions. It does help prevent accidentally editing the original HTML.

Reusable Components and UltraDev Packages

163

By default the entire area of a template file is locked. You have to pick out the areas that are editable. Just select an area on the screen that you want to be able to edit and choose Mark Selection as Editable from the Templates submenu of Modify. You’ll be prompted for a name for the editable area. This name distinguishes this section from other regions while importing content. If you make a mistake and need to unmark a region, just select Unmark Editable Region and choose the name of the region you want to remove. It will revert to locked status. The area that is editable will be highlighted in aqua to show that it is unlocked. When the template is opened to create a new Web page, the locked portion of the page is highlighted in yellow, whereas the editable portion is not highlighted.

Tip

If you don’t like the coloring of the editable/locked portions of templates, you can adjust them in the Highlighting portion of the UltraDev preferences.

When you’ve finished creating the template, make sure that all your changes have been saved, and then close the Template window.

The Site Asset Palette—Templates You can check the templates that you’ve created by opening Assets palette from the Window menu and clicking the Template icon (a single piece of paper, located directly above the Library icon). If you’ve looked at the library items, you should notice a striking similarity between this palette and the library palette. Selecting a listed template will display the page in the upper pane of the palette. The icon buttons and pop-up menu features all function identically to the library section, so, for the sake of consistency, refer to the previous section for information on their functionality.

Creating a Template from Scratch Creating a Template from scratch from within the palette is simple, but, in my opinion, is a less efficient manner for producing templates than using an existing piece of HTML. Click the new icon (the same as in the Library section) to create a new template, and then double-click the new item to edit the template, or click the edit icon. You should recognize all these features from working with the Library. The blank template creation window is just like any other document design window, except for a few extra menu functions that you can access. Design the page as you would any other page. When you get to an area that you want to set as editable, choose the New

5

164

Day 5

editable region option from the Templates submenu of the Modify menu. After entering a name for the new editable region, a text label for the region is entered into the document body. You can erase this label and start inserting your own content. Notice that everything you type is highlighted in the editable color. This will continue until you deselect the region by its given name from the Templates submenu. You can follow this same procedure for the entire creation of your site, or mix and match with the “area at a time” approach. Remember to plan ahead. You can’t easily create an entire site and then retro-fit it for a template. A well-thought out site is key to saving yourself work in the long run.

Got Template? You’ve made templates, so what can you do with them? The easiest way to use a template is to use the New from Template selection in the File menu. This will let you select one of your already defined templates and create a new HTML file based on it. As you’d expect, only the editable regions can change. Other users who have access to this template can now safely create Web pages without having to worry about changing HTML or disturbing the layout. Another way to use a template is to apply the content of an existing file to the template. This will actually insert the template into the document and position the content text into one of the editable regions of the document. You can use the Apply button in the Template palette to perform this action. As with the Library items, you can update a Template file and apply the changes to all the files that use the template from the Template submenu of the Modify menu. This feature enables you to quickly change the entire layout of similar pages in your Web site from a single location. Hurray!

Tip

It is critical that all the users working on a site understand how templates and libraries work before they start using them. If a user just uses a template as a standard HTML document, the benefits of a global update and document content control will be lost.

If you find that you want to make additional changes to a template-based page that would violate the template, you can use Detach from Template to remove the template restrictions from the file while leaving its content.

Reusable Components and UltraDev Packages

Caution

165

Be aware that if you detach a page from its template, changes you make to the template will not be reflected in the page.

Asset Manager As you’ve seen by using Templates and Libraries, the Assets palette contains all the objects (assets) that are available for your use within a site. We’ve only looked at the Library and Template assets because of their complexity—but there are several other types of assets available as well. Open up the Assets palette now. Along the left-hand side are nine icons, each corresponding to a different type of resource that can be tracked. These are, from top to bottom: Images—Any image referenced in your site is included in the image assets. Colors—Color assets contain any HTML colors used on your site. Links—URLs linking pages to other pages or resources are shown here. Flash—Macromedia Flash files used in the site. Shockwave—Macromedia Shockwave files used in the site. Movies—Any movies (embedded or otherwise) are listed in the Movie assets. Scripts—JavaScript or VBScript code is shown here. Templates—Template resources that you’ve created are listed in this section. Library Items—Likewise, library elements are displayed in the Library Items portion of the Asset manager. After selecting a type of asset, you can edit the item, or add/apply it to a page just as you did when using the Library and Template items. Additionally, you can use the top right arrow in the Asset manager to copy a selected asset to another site. This lets you use any of the assets from within another Web site without having to manually copy any files.

Asset Manager Views There are two views within the Asset manager—the full site view and the favorites view. By default, you view all the assets available for a site—including things you probably don’t want to see. To limit the listing a bit, you can select an asset, and then use the top right corner pop-up menu or click the bottom right ribbon icon in the asset manager to add it to your favorite list. You can, at any time, switch to a view of just your favorite items by clicking the favorites radio button at the top of the Asset manager palette.

5

166

Day 5

Extending UltraDev The UltraDev environment is very extensible—beyond what this book can document without taking an extra two or three weeks worth of text. The entire menu system is editable, and new commands written in JavaScript can be added to the system in a way that completely integrates with the rest of the application. Take a look under your Commands menu. Several external commands are already installed on your system such as Clean up HTML and Clean up Word HTML. This functionality is not compiled into UltraDev but exists as an add-on file. If you aren’t a programmer and don’t have any desire to write JavaScript extensions, there are two ways that you can add functionality to the UltraDev environment— recording commands and installing external prebuilt extensions.

Recording Commands The easiest way to add your own custom functionality is to record a command you can use repetitively. Unfortunately, UltraDev cannot repeat mouse selection actions, so your commands are mostly restricted to keyboard commands and object inserts. To create a new command perform the following steps: 1. Type, Insert, or perform the series of actions that you want to record. 2. Open the History palette and select the steps that you want to save. 3. If you want to immediately replay these options, click the Replay button or palette pop-up menu to verify that they do what you want. 4. If you like the results, click the disk icon, or use the Save as Command option from the pop-up menu. 5. Enter a name for the new command. 6. Presto! The command is inserted in the Commands menu. Figure 5.16 shows the History palette with a simple series of actions ready to be saved as a command. If you find yourself typing and retyping styled sequences of text, or inserting tables repeatedly, you can record these actions as commands and replay them any time you want. To rename or delete commands that you’ve created, choose Edit Command List from the Commands menu. From the dialog box shown in Figure 5.17, edit the name of the command by clicking it or delete it with the Delete button.

Reusable Components and UltraDev Packages

167

FIGURE 5.16 Select the actions you want to save as a command.

FIGURE 5.17 Edit and delete commands you’ve created.

There’s also another way to quickly create a command sequence that you can use repeatedly without having to save a command—recording a temporary command.

Recording Temporary Commands To create a sequence of actions that can be replayed during the current UltraDev session, select Start Recording from the Commands menu. You can interact with UltraDev while it records what you do. Once again, you’re bound to the rule of not being able to make mouse selections. When the recording is finished, choose Stop Recording. The Play Recorded Command becomes active once a temporary command is in memory— use it to replay your actions anytime.

Download UltraDev Packages Before you start digging through the UltraDev help system trying to figure out how to write your own packages, check to see what is already available on Macromedia’s Web site. To jump directly to the site, choose Get More Commands from the Commands menu. As you can see in Figure 5.18, there is no doubt you’ll find something that interests you.

5

168

Day 5

FIGURE 5.18 Macromedia’s site has a wealth of packages for the UltraDev environment.

Follow these simple steps to install an package: 1. Click the package you want to download. 2. Click the download icon for the appropriate platform (Macintosh or Windows). 3. Move the downloaded and decompressed file to the UltraDev Packages folder. 4. Double-click the downloaded package After double-clicking the package, the UltraDev Package Manager will be launched and will report on the successful installation of the package. Information about the package and how it can be activated within the UltraDev interface are also shown. The Package Manager can be seen in Figure 5.19. FIGURE 5.19 Package Manager handles all the installed packages.

Reusable Components and UltraDev Packages

169

If you want to remove an installed package, use Remove Package from the File menu of the package manager program. There are literally hundreds of new features that you can add to UltraDev just by browsing Macromedia’s Web site and downloading the appropriate package files. Before you decide that UltraDev can’t do something you need, check out the rest of the freely available tools.

Note

Besides just extending UltraDev, you can also modify the environment to match your tastes. Appendix B, “Customizing the UltraDev Environment,” includes information on modifying the interface to better suit the way you work.

Summary To create an efficient environment for editing any sort of code, the most important thing to do is make sure that you reuse as much previous work as possible. UltraDev has several tools that make this possible. Cascading Style Sheets keep pages consistent across a site, across browsers, and across different computer platforms. The use of a CSS can cut down significantly on the amount of HTML formatting that you need to use in a site. If you’re targeting a browser that doesn’t support CSS, you can use HTML Styles in their place. Libraries and Templates are UltraDev’s way of providing code-reuse facilities. Libraries store commonly used HTML that can be inserted anywhere and changed from a single location. Similarly, templates implement a look for a page that can be applied across many different pages. Once again, changes in a single location are reflected across the entire site. UltraDev is extendable—both by recording your own command sequences and downloading new commands from the Internet. A few clicks and you have new functionality that didn’t ship with the software.

Q&A Q Which is better, a master style sheet, or style sheets contained in each document? A It depends on your needs. A master style sheet is useful for an entire site, but, if your pages have different looks, you might find yourself constantly adding new variations to the master styles just to accommodate the variation. If this is the case, stick to styles defined inside the documents that vary from the norm.

5

170

Day 5

Q Can I use the special styles, such as filters, even though they aren’t supported in Netscape? A Yes, but I don’t recommend it. The Web was designed to be an open environment. Creating pages that target a particular browser on a particular platform is very short sighted. Q What are the best candidates for library items? A Navigation bars, obviously, but also some of the smaller elements on the site might be subject to change such as mailto: links, lists of outside links, and seasonal graphics. If it changes and you don’t want to dig for it, build it into a library. Q Are Templates secure? A Absolutely not. You can’t distribute a template based Web site and completely protect the files from being changed. You should train your team members on how to use UltraDev effectively without going beyond the bounds that the software enforces.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What is a common use for CSS? 2. Do all CSS attributes work across browsers and platforms? 3. The Library is good for what? 4. How can an existing HTML page be turned into a Template? 5. How are packages added to UltraDev?

Exercises 1. Take an existing site or Web page and convert the HTML styles you’ve used so that they are based off a Cascading Style Sheet. 2. Practice using the Library and Template items. Create templates based off your existing pages and try adding data to them. 3. Browse the Macromedia Web site and install new packages for UltraDev. Become familiar with the UltraDev Package manager and its role in the process of installation.

WEEK 1

DAY

6

Introduction to Dynamic Web Applications and Database Design What are database-driven sites, what are they good for, and what background do you need to create your own site? These are the questions we’ll try to answer in today’s lesson. Today is a good day to sit back and take a breather from sitting in front of your computer. What you’ll learn is a lesson in dynamic Web pages and the concepts behind them. It’s mostly theory, but it’s important to know • What types of sites make good database-driven sites? What can be driven dynamically? • What technologies are used to make Web sites dynamic and how does the HTTP protocol support these concepts? • How are database-driven sites built? What planning needs to take place before a good site can be built? • What are the basics of database design and normalization? How can efficient and easy to maintain database structures be created?

172

Day 6

Dynamic Web Sites We’ve spent the past few days building static Web sites, and we’re barely a quarter of the way into the book. So, what in the world is the text building to? The answer is the creation of dynamic Web sites—but what does that actually mean? A dynamic Web site is one in which the information contained on the pages changes. It is generated dynamically as the user browses the page. You’ve learned how to create Web sites that move and change as the user interacts with its objects. Is that a dynamic Web site? Not really. The information needed to create those displays is contained within the Web page itself. All the processing power that takes place on the Web page comes from the computer of the person who is browsing the site. On a truly dynamic site, the page is generated from the code that is executed on the server. The resulting HTML doesn’t necessarily have to be the same between any two users of the site. The processing power of the server is used to build a Web page that is customized for the person browsing the site. That page can contain the sorts of dynamic elements you’ve already seen, or it can be static HTML. The important thing is that it is created on-the-fly by the server, and then sent to the client computer when it is finished. More often than not, dynamic Web sites are powered by some sort of a database backend. This provides a place to store data and an easy access point for Web site administration. You can sometimes tell pages that are generated dynamically by the extension of the filename you are requesting, such as .cgi, .php, .jsp, or anything that varies from the .htm and .html standard. Although a file extension itself doesn’t guarantee that a site is database driven, it is a good indicator. It is also indicative of the technology that is used to drive the Web site. There are two commonly used approaches to creating dynamic Web sites: CGI and embedded programming.

Traditional Web Application Programming Traditional Web application programming centered on writing a single “do-all” application called a CGI (Common Gateway Interface). A CGI application is the equivalent of a local application that you run on your desktop, but instead it is hosted on a Web server. It is programmed similar to a traditional application except for using an HTML interface. The problem with many CGIs is that they require a lot of resources on the computer hosting the Web site. A typical execution of Perl (a popular CGI programming language) takes about 5MB of RAM. For systems such as UNIX and NT, this isn’t a huge problem, but the constant loading and unloading of the program in memory is. Because of this constant context switching, CGI applications require resources above and beyond the embedded languages, which we’ll take a look at in a few minutes.

Introduction to Dynamic Web Applications and Database Design

Note

173

Before everyone starts complaining, there are ways around the Perl problems. The mod_perl library for Apache and ActiveState’s Perl add-on for IIS can attach a Perl interpreter to the active Web server—saving them the need to launch a separate Perl process when a CGI is run.

CGIs are usually written to perform a single action. For example, there are several CGIs on my Web page at http://jray.ag.ohio-state.edu/. You’ll notice that they aren’t typical Web applications that span multiple pages. Instead, each CGI performs a single function (traffic logging, network analysis, and so on). What limits traditional CGI programming languages is that they were designed for programming—not necessarily programming Web applications. What takes dozens of lines in a CGI application might take only a single line in an embedded language. If you’ve worked with CGIs before, you’ll find that switching to an embedded language will shorten your source code dramatically.

HTML Embedded Languages Embedded HTML languages are the successor to the CGI languages. They provide functionality above and beyond CGIs, both in terms of ease of use as well as in terms of power. The biggest difference between CGIs and embedded HTML languages are what dominates the code. In a CGI, the code is dominated by the programming language, which must generate the HTML. In an embedded language, the HTML dominates the code. Instead of writing code and then writing HTML that is generated by the code, you first write the HTML and then fill in the application code wherever it is necessary. The method in which the programs are executed is also different. Embedded programming languages are executed by the server as the page is sent to the client. No external program is executed. The interpreter for the language is attached to the server itself. This makes the embedded languages extremely efficient in terms of execution and resource usage. Another fantastic benefit of embedded languages is that they offer direct access to database systems. Most programming languages have added database support as an afterthought. The creators of embedded languages realized the potential for database access from within HTML source code and built it directly into the language. Speed and ease of use are only a few of the advances of this embracing of complimentary technologies. Obviously, there are great advantages to writing using HTML embedded programming languages. In the past two years, embedded languages have taken off and there is a plethora of them to work with. UltraDev supports three different embedded languages, making it a very flexible tool, and one of the first of its kind to support real-time viewing of database-driven information.

6

174

Day 6

Understanding Dynamic Sites Although it might seem as if building a dynamic Web site would be no different from programming a standard application except for the need to provide an HTML interface, it’s actually a very different process. The HTTP protocol is what makes life a bit difficult for Web application creators. For example, what happens if you want to accept input from a user, process it, collect a bit more information, process it, and compile the results? In a standard programming language, this wouldn’t be a problem; you’d just structure the program exactly as you want the tasks to be performed. For Web deployment, you need to take a different approach to writing the program. The reason for this is that only a single step of the program can be implemented at a time and those steps must somehow be linked together. However, the HTTP protocol is a stateless protocol, and there is no continuation between the user’s computer and the server over the interim that falls between each page of a dynamic site. Every single page that is loaded, if it is generated dynamically, is an individual execution of a program on the server. When a user submits a form, it goes back to the server and is processed, and a results page is usually shown. That’s it for the server’s involvement with this data. After the results are returned, no connection exists between the client and the server. So, what happens if you want to continue working with data that has been returned? In order to maintain a database connection between different accesses to a Web page or to subsequent pages in a site, you must use some kind of session management. Simply put, session management is a way to maintain a permanent virtual connection between the user and a remote Web server, even though no permanent connection exists. There are two ways that session management can be maintained—through variable passing and cookies.

Variable Passing Variable passing is a way of passing values of individual variables between pages. You’ve almost certainly seen URLs that don’t reference a particular static HTML page and look similar to this: http://www.someplaceurl.com/test.jsp?firstname=John&lastname=Ray

In this example, the variables firstname and lastname are passed to the remote program test.jsp with the values John and Ray, respectively. If a program wanted to pass data between different elements, it could embed the links between different pages with the appropriate variables so that when they were clicked, the data is passed to the next page.

Introduction to Dynamic Web Applications and Database Design

175

This method of passing variables is called the GET method. It is very common, but it also leads to ugly URLs that display some of the inner workings of a Web site. If the user bookmarks a page that was retrieved using a GET method, he will end up bookmarking the passed variables as well. Each time he goes to the page, he will be sending the data that was passed to the page the first time it was retrieved. The nice thing about the GET method of variable passing is that it is easy to encode links by hand. You can very easily set up links to include parameters retrieved from a database or data that the user has input on another page. Here is an example of the request that a client makes of a Web server if it is using GET to pass the data: GET /thetest.jsp?firstname=John&password=notonyourlife&lastname=Ray&action=trans ferbankfunds HTTP/1.0 Host: poisontooth.com: User-Agent: Johnclient.pl (Linux)

The alternative method of passing data is through the POST method. This is traditionally used with forms to send data to the remote server without putting all the parameters of the form in the URL field when it is submitted. If, for example, you have a form that accepts a large amount of data, you certainly don’t want to pass that data through URL variable passing. Instead, the POST method passes the data as part of the connection request on the remote server. POST /thetest.jsp HTTP/1.0 Host: poisontooth.com: User-Agent: Johnclient.pl (Linux) Content-type: application/x-www-form-urlencoded Content-Length: 75 firstname=John&password=notonyourlife&lastname=Ray&action=transferbankfunds

As you can see, the differences are subtle, but not the effect. Besides just giving a cleaner appearance to the final HTML code, you also gain the benefit of being able to pass larger amounts of data from a form to the program. The POST method, however, cannot be used directly in the HTML to pass values unless a form is present. You cannot manually create URLs that use this method. This requirement seriously limits use of this method. However, if you have a sequence of forms that the user needs to fill out, the POST method is quite useful.

Session Variables No matter what method of variable passing you’re using, there’s still the problem of managing your data. For example, if you’re creating a shopping cart application and you want to maintain a list of all the items that the user has purchased, it isn’t going to be

6

176

Day 6

terribly efficient to keep appending them as values of a Shopping Cart variable that is passed from page to page in the URL. Instead, you might want to use session variables to track their information. Session variables are virtual variables that exist while a user browses a Web site. They can be used to store anything, and their value is specific to a particular user’s session. Because there really isn’t a way to identify when a user is finished with a site, session variables typically expire after a user quits out of his browser. Sometimes sessions are created that automatically expire after a certain length of time. This will effectively log out a user and forget all information that has been stored about him. Have you ever gone to an online store and picked out a few items, only to decide you’re not going to buy them? Rather than go to the shopping cart and remove the items, you probably closed your browser window. If you returned to the site the next day, chances are your shopping cart was empty. This is an example of a session expiration. Session variables, when used efficiently, are a great benefit to the user and programmer. They allow more complex and secure applications to be built than traditional variable passing. Improperly used, however, they can have significant drawbacks. Most languages that support session variables allow you to store complete data structures in a session variable. For example, you might store an entire shopping cart structure in a single variable. Although this works, it also eats up server resources. Each complex structure that is stored as a session variable must first be serialized—or converted into a stream of data that is easily stored on the server. Likewise, when that information is again requested, it must be converted back to a useable format. With thousands of simultaneous transactions, this eats up server time and resources. A more appropriate approach is to model your database after the structures you want to store and use session variables to access these structures. Instead of your Web server doing the work, your database server is used to handle the load.

Note

Another variable type used in dynamic applications is an application variable. This is a variable that persists across all user sessions and is accessible from anywhere within a Web application. Many people view application variables as a bad idea, just as are global variables in a programming language, but they can be very useful for maintaining an internal statistics within an application.

A session ID is a unique identifier for a user’s session. It is used to trigger the server to remember information about that user. From the perspective of the programmer, you might need to transfer the session ID from page to page, but that’s it. Unfortunately,

Introduction to Dynamic Web Applications and Database Design

177

there’s still a problem with this. The user is likely to bookmark a page that includes the session ID variable in the URL. Depending on how the Web application is configured, this could result in a Session Expired error or other unpredictable behavior when the user attempts to go back to that Web page. What would be completely perfect is a way to handle session management that doesn’t require any custom programming to pass variables between pages and is handled transparently to the user and programmer. Luckily, there is one—cookies.

Cookies You’ve heard of cookies—they’re a constant source of irritation among some, and a savior to others—in reality, they’re a small piece of text information stored on the client browser. A cookie provides a means by which a Web site can read and store information on your computer. To some, this is a very scary thought. If a cookie can store information on your computer, what is keeping it from writing a harmful program on your system that destroys your data? The answer is size. Cookies are limited to only a few thousand bytes—barely enough space to store anything useful, let alone a program. Secondly, cookies are all stored within a special Cookie file on your computer. At any time, you can open up the cookies in your browser and alter their contents or delete them. For example, if you’re a Netscape user, search your computer for a magic cookie file. Internet Explorer users should look for the Cookies folder within the Windows directory. A small snippet of my cookie file is shown here: # Netscape HTTP Cookie File # http://www.netscape.com/newsref/std/cookie_spec.html # This is a generated file! Do not edit.

free.aol.com FALSE /tryaolfree FALSE 993674880 user 31031923 .excite.com TRUE / FALSE 1057815167 mesp_popup y2k%fDyes .excite.com TRUE / FALSE 1057815167 UID 9A7BF6F2Df023B94 .excite.com TRUE / FALSE 1057815167 registered no .doubleclick.net TRUE / FALSE 1920499223 id 8bccs8ce .deja.com TRUE / FALSE 1102550463 GTUID 04.48861.3.0.f.4363

Almost any consumer-oriented Web site uses cookies for one reason or another. I have more than 400 cookies currently set in my cookie file, and I spend most of my time browsing technology-oriented sites, not shopping online. Another fear of cookies is that they can be used to track a user’s actions across multiple Web sites. For some sites this is true, but only through a collaborative effort. Cookies are designed so that their information is only available to the site that set the cookie.

6

178

Day 6

This prevents information stealing. It is very possible, however, for a single site to use cookies to track your actions. In fact, that’s exactly what we’re after. A way to correlate a specific set of Web accesses to a single user. Using cookies, a programmer can set a variable that is accessible from any Web page in the site, without needing any special programming. Cookies are set with a specific path for your site. Any Web page that falls under this path has access to the cookie. For example, here is the actual code that is sent to a browser from a Web site that asks for a cookie to be set: Set-Cookie: SESSION=3424; path=/shopping

After this cookie is set, anytime the client computer requests a URL from the Web site that falls under the shopping directory, the client computer automatically sends back to the remote computer: Cookie: SESSION=3424

By using a path of / when the cookie is set, the Web site creates a condition in which the client browser will send the cookie information back to the Web site for any page that is visited. So, how are cookies typically used on the Web? Are they used to store all the information that needs to be used between different Web pages? Not likely. In some cases, when the amount of data is very limited, it is easiest to store everything in cookies. For most cases, where the site employs session variables, however, a cookie will be used to store a session ID.

Note

The question that you’ll inevitably ask yourself is, “Should I use cookies on my site?” I personally think that cookies are a wonderful way to keep your programming simple and provide fantastic functionality to the end user. If you provide information to the user on how and why you use cookies, you’ll be fine. The alternative to using cookies is variable passing, something I find less than desirable. In the applications we develop in this book, we’ll use each technique where appropriate.

UltraDev automates the process of dealing with both forms of session management. It supports using cookies as a form of global variable and also allows the creation of links between pages that will pass all the variables on one page to the new page.

Introduction to Dynamic Web Applications and Database Design

179

Creating Dynamic Sites Determining when and if a site should be made dynamic is not a decision to be made hastily. I’ve worked with sites that, when first created, were designed as static sites for one reason or other. Now, performing monthly content updates requires several hours of editing to change the various pages on which the set of updates must occur. The larger such sites become, the harder they are to maintain and the more difficult they are to transition to a database-driven model. Decisions made in the early phases effect management of a site long into the future. Be sure to maintain a site map for every multi-page site that you create, regardless of how trivial it seems at the time. Chances are, someday you’ll be glad you did.

Types of Dynamic Sites If a site is subject to constant change, it is an excellent candidate for becoming database driven. The advantage of a dynamic design is that it removes the burden of updating the HTML for elements that change frequently. Instead, a centralized database interface can be developed that is as easy to use as any desktop application. Another good candidate for being a database-driven site is any site that collects data. It’s surprisingly common for user feedback forms and surveys to be collected and sent in email. Literally hundreds of CGI applications are dedicated to formatting the results of forms and sending them in email to a human for interpretation. Interestingly enough, programs are available for the receiving end of Web-generated emails that place the collected data in a database for easy manipulation. Obviously, if you can get the data into the database to begin with, it’s going to be much, much easier than moving from survey to email, and then from email to database. Several large commercial sites that I’ve been asked to revamp accept product information requests and other data through email sent from a form on the Web site. On the receiving end, the system administrators print the email and distribute it among the customer service personnel so that they can handle the various requests. This is not the sort of system you hope to develop as you create your Web sites. Once again, the longer a system like this is allowed to “live,” the more difficult it becomes to exterminate. The final type of site ideal for database integration are those that host a lot of information (and need to provide ways for the user to navigate through it). Enabling the user to search and sort complete books is a much more useful tool than just supplying the information on a Web page. By letting the user query the data in ways that he defines, a simple Web database can become a fantastic research tool.

6

180

Day 6

Planning for Dynamic Sites The first step in creating a dynamic Web site is planning for it. Making a good decision before you begin can save you from headaches later—it isn’t an easy task to take a static site and re-integrate its content into a database. In fact, about the worst thing you can do is build and deploy a Web site as static HTML, and then decide that you want to turn it into a dynamic site. As the site grows and matures, the more interwoven the content becomes with the HTML itself. Usually transitioning from a static site to a dynamic site takes a complete rewrite of the site. To plan for a dynamic site, follow these steps.

Create a Site Map Create a detailed site map that includes all the areas on the Web site and a basic description of the content that they maintain. This is one of the most important steps in creating any Web site. For dynamic Web sites, the importance is exponentially higher. Identifying all the pages and how they are related aids in determining the relationship between the data that they contain.

Find Duplicate Information Identify regions that include duplicate information. These areas of the pages, if significant in size or number, can be drawn from a database. Use common sense when marking out these regions. Just because the word “the” is repeated 19 times on a page doesn’t mean that you should store the word in a database and dynamically query the database for it. Addresses, contact information, personnel biographies—they’re all prime candidates for being stored in a database.

Locate Lists Locate lists of information that contain more than a few items. Lists of items are already a database of sorts, just not stored in a database. Typically Web sites contain pages that are a list of links or a list of industry news releases. These lists are often maintained by someone outside of the Web group. In most organizations I’ve dealt with, lists are generated by the PR and HR departments and handed off to the people maintaining the sites. Depending on the number of items in the list, there can be a great amount of redundancy in the work.

Find Frequent Changes Locate regions of the pages that will need to change on a frequent basis. For example, a book of the week or other temporary item is perfect for being pulled from a database. In the case of a book of the week, after the book is finished being featured, it can easily be switched to an archive section of a Web site, providing information to those who might have missed it the first time around.

Introduction to Dynamic Web Applications and Database Design

181

The most important thing to remember when designing a database-driven site is to keep it in perspective. No hard and fast rules define when a site should be attached to a database or remain as static HTML. If your site is only two or three pages long, it is doesn’t make much sense to invest the time in setting up a database or application server in order to deploy it. Keeping lists and information up-to-date by hand on sites this size is usually the easiest thing to do. On the other hand, if you’re designing sites commercially, your customers will often request that their sites be built to be as maintenance free as possible. Even with the Web in high gear as it is today, many people still would rather not concern themselves with the “hows” and “whys” of HTML. Setting up a database backend to a client’s Web site can provide a simple centralized point to administrate all the information on a site— eliminating the need for them to even know HTML in order to update their site. Finally, there is a tendency for people to follow trends just because “they’re cool.” The trend of Web sites is to move to database-driven solutions and abandon simple static HTML altogether. I’ve been less than pleased when working with sites developed by those in this mindset. They fail to realize that the benefits might not justify the inconveniences. For instance, instead of going into a Web page to change a few lines of copy in the HTML, you might need to connect to a database, find the record with the target content, and change it there. In addition to requiring added steps, database-driven Web sites might also hinder maintenance because of their technology demands. With access to a Unix account and something as simple as Palm Pilot, I could easily connect to a remote server and edit a Web page on just about any server, anywhere. If the data is located in a database, however, that isn’t necessarily the case. Just use your best judgement when making the decision. Never use a technology just because other people say you have to. You might design sites as static HTML that you later wish had been designed as database-driven applications. However, you might also design database-driven sites that would have been simpler to manage if they were static HTML. The trick is making the latter mistake as little as possible.

Database Design For there to be any sort of database-driven site at all, there must be a database backend that drives it. UltraDev does not supply this backend, nor does it pick one out for you. One of the first things that you’ll need to do before you can start designing sites using the dynamic tools of UltraDev is to set up a database server, or at least set up a database, such as MS Access, on your computer. Don’t worry—I’m going to give you step-by-step instructions on how to set up the MySQL database a little later. This database system is free on Unix, and shareware on NT—allowing it to be deployed as a backend system on

6

182

Day 6

just about any platform you prefer, including Mac OS X—and in many cases, it can be deployed entirely for free. Before you can set up your database, you need to know something about database design. Creating a database is not as easy as saying, “Here are the fields I need—let’s put them in a file and call it a database.” Instead, you need to find the most efficient way to store the data. This will enable you to easily work with information after it has been stored. Let’s work through an example of creating a solid database structure from start to finish.

Data Modeling Terminology Before you can create a database, you need to understand some of the terminology that is common to database creation. Starting with the obvious, what is normalization?

Normalization Normalization is the process of simplifying a collection of data to remove redundancy. Flat file database systems lend themselves to storing more data than is actually needed. Normalization breaks up this monolithic data structure into smaller, more efficient collections of information. The goal of normalization is to remove redundancy and ease the process of updating data. There are several levels of normalization that we will look at today. These levels can be thought of as stepping stones that, one-by-one, prepare a collection of data for the final form it will take on in the database.

Entities Entities are individual objects that we want to store data about and are equivalent to tables within a database system. In fact, you’ll eventually end up using these entities to name your tables in the final database.

Attributes Entities contain attributes. Switching to traditional database terminology, this just means that tables contain fields. An attribute is a field within an entity. They are called attributes because they should describe the entity. For example, a car entity might have a year or color attribute.

Unique Identifiers A unique identifier is an attribute, or group of attributes, that can be used to locate a particular piece of data and only that data. There are three rules for choosing unique attributes: It must always contain a value. The identifier must always be defined—it can never be a null value.

Introduction to Dynamic Web Applications and Database Design

183

The identifier must be unique across all instances of data contained in an entity. You cannot create two instances of an entity that have the same identifier. For example, if two teachers have the same name, the teacher’s name cannot be used as the unique identifier. The identifier can never change. This requirement might seem a bit strange, but you’ll soon see why it is necessary. You cannot use a value that will ever change to be the unique identifier for an entity.

Relationships A relationship is exactly what it sounds like—a way of relating (or connecting) different pieces of information. Three types or degrees of relationships that can exist between entities are as follows: one to one—For each instance of one entity, there exists one instance of another entity. This is actually a very rare occurrence because a one-to-one relationship is usually just represented within a single entity, rather than splitting into two entities. one to many—For each instance of one entity, there can be multiple instances of the other entity. The class and room entities are in a one-to-many relationship. For example, there can only be one instance of a particular room, but there can be multiple classes held in that room. This is the relationship most of your data should fall into. many to many—A many-to-many relationship is a relationship in which multiple instances of each entity are related to multiple instances of another entity. You cannot model a many-to-many relationship because there is ambiguity in matching the data from one entity to the data in another. If you find that you’ve accidentally defined a many-to-many relationship, you need to rework your entity model.

A Normalization Example Assume that you want to create a database for a local school with the following information in it: Teachers Classes Students Rooms Used At first glance, you might want to set up the database as a simple table of information with fields such as teacher name, classes taught, students, and rooms used. Just laying

6

184

Day 6

out a few sample records should quickly show you what the problem is with this particular data model. You can see a sample of this in Table 6.1. TABLE 6.1

A Basic Table Containing Information We Want

Teacher Name

Classes Taught

Students

Rooms Used

Mr. Ray

General Science, Chemistry

Sally Roberts, Paul Nelson, Jeffrey Peterson, …

112, 312

Mrs. Ray

Basic Math

Paul Nelson, Jeffrey Peterson, Tim Leffer, …

010, 314, 112

Ms. Ness

Advanced Psychology

Jack Derifaj, Julie Vujevich, Anne Groves, …

212, 112, 322

As you can see, this table easily stores the available data, but it does it in a way that would make life very difficult for anyone who wants to work with it. For example, suppose that you want to find all the classes a student is in. You would have to manually search through each of the teachers and look at the Students field. This takes time and is incredibly inefficient. In order to do it the right way, we need to normalize the data. There are three normal forms that we’re going to use today—first, second, and third. In reality, there are several more normal forms, but the first three are the most important. Each level increases the amount of normalization.

First Normal Form The first step in setting up data in a normalized form is to define the data entities. For example, our initial entity is a Teacher, and we want to store Teacher Name, Classes Taught, Students, and Rooms Used attributes. Figure 6.1 shows the graphic representation of the Teacher entity. In order to fully normalize the data, we’re going to have to add new entities to the database model. It isn’t going to look much like the current model by the time it is finished. FIGURE 6.1

Teacher

The basic teacher entity as defined by the initial data model.

teacher name classes taught students rooms used

Introduction to Dynamic Web Applications and Database Design

185

The first normal form requires that all the entities be singular without any repeating attributes. A simple way to tell if our entity has any repeating attributes is to look for plurals in the attributes. It’s obvious that we’ve got quite a bit to be worried about: Classes Students Rooms These are all repeating attributes and cannot be contained within the Teacher entity in order to reach the first normal form. In order to get to the first normal form, we should break each of these attributes out into their own separate entity table. Additionally, we need to make sure that all attributes are broken into their smallest meaningful entities. For example, names should be broken into both first and last name fields. Figure 6.2 shows the new collection of entities with some additional added attributes. FIGURE 6.2 Break the repeating attributes out into their own tables.

Teacher

Class

fname lname status salary

name time topic grade Level

Student

Room

fname lname age grade level

number capacity condition

There are now four different tables: Teacher, Class, Student, Room. I’ve taken the liberty of adding several attributes to each of the entities: Teacher—fname, lname, status, salary Class—name, time, topic, grade level Student—fname, lname, age, grade level Room—number, capacity, condition Each of the entities is singular and does not contain any repeating attributes. The entities, however, are now self-contained and have no relationship to one another. This makes it

6

186

Day 6

difficult to extract any information from the data model other than what is described by one of the entities—in fact, the entire model will be useless. In order to form relationships between the data, we need to define unique identifiers for the data. Let’s take a look at the entity, one at a time, to see what can be used as a unique identifier. The Teacher entity needs to be addressed. The initial reaction is to use the teacher’s name as the unique identifier. Be sure to ask yourself, however, is this value always unique, and will it ever change? Because the attribute is a name, the answer to these questions is no. It doesn’t matter if it’s unlikely that these conditions might exist, they must never be violated in your data model for the model itself to be correct. Because of this, a unique identifier must be added to the Teacher entity. This attribute, which we’ll just call Employee ID, can be any arbitrary unique database value. Most database systems offer auto increment or auto sequence fields that automatically generate a unique incrementing number for each instance of data. A normalized form of the teacher entity is shown in Figure 6.3. Attributes used as a unique identifier are typically underlined in data models and include data such as Social Security numbers and email addresses. FIGURE 6.3 The Teacher entity is now considered to be in first normal form.

Teacher employee ID* fname lname status salary

The Class entity suffers from the same problem as the teacher entity. Presumably multiple classes can have the same name, possibly occurring at the same time. A unique identifier must also be generated for the Class entity. A simple solution to this problem is to add a class number to the entity. Most classes actually have section numbers that distinguish them from other classes, so this really doesn’t require much of a stretch of imagination. As you work through the normalization of a database, you’ll find pieces of information you unintentionally left out in the initial model and other attributes that would be useful to store for each entity. With the addition of the section number, the Class entity is in first normal form, seen in Figure 6.4. FIGURE 6.4 The section number is used as a unique identifier for the Class entity.

Class class number* fname lname time topic grade level

Introduction to Dynamic Web Applications and Database Design

187

Students were initially “second-class citizens” in the initial data model. There really wasn’t anything you could find out about the student because students were an attribute of the Teacher entity. With students broken out into a separate entity table, we’re free to store additional information along with each instance. As with the teacher table, we run into the same problem of students sharing names. Because there are presumably more students than teachers, it’s actually likely that students could have similar or identical names. Following the same model that we set up for the teacher model, we can add a Student ID attribute to the Student entity in order to uniquely identify each student. This results in the first normal form table shown in Figure 6.5. FIGURE 6.5 Similar to the Teacher entity, the Student entity cannot rely on a person having a unique name.

Student student ID* fname lname age grade level

The last entity that needs to be addressed is the Room entity. We’re actually in luck with the current definition we have. Because a room number uniquely identifies it among all the other rooms in a building, that’s all we need. If there were any question of whether this school system spans multiple buildings, we’d be in trouble. However, in order to make life a bit simpler, we’ll assume that there is one building in the school. Not entirely realistic, but you can certainly expand this model for multiple buildings in today’s exercises section. The final Room entity is shown in Figure 6.6. FIGURE 6.6 The Room entity is already normalized.

Room number* capacity condition

6 After your entities have unique identifiers defined and are in first normal form, you can start to define relationships between the different entities. This will provide a better visual model of the data and will help locate inconsistencies, if there are any. For example, we have the entity class and room. Try looking at the different entities and saying “has a” between them. For class and room, this becomes “each class has a room.” This is our first relationship.

188

Day 6

In the current model that we’ve set up, the following relationships can be defined and are shown in Figure 6.7: • Room/Class (one-to-many)—One room can have several different classes in it. • Teacher/Class (one-to-many)—One teacher can teach several classes. • Student/Class (many-to-many)—One student can be in many classes. One class can have many students. FIGURE 6.7 The current relationship diagram for our data model. We seem to have a problem!

Room number* capacity condition

1 Class ∞

∞

class number* name ∞ time topic grade level

Teacher employee ID* 1 fname lname status salary

∞ Student student ID* fname lname age grade level

We’ve run into a bit of a problem with Student/Class. This is a many-to-many relationship, and we must break it down into a dual one-to-many relationship. To do this, we need to define a third entity that will form the middle of the relationship. This entity must have a one-to-many relationship with the two other entities. For example, in the case of the students and the class, let’s define a third entity called Attendee Seat that will define an attendee seat for a given class. This new entity forms the following relationships: • Students/Attendee Seat (one-to-many)—One student can fill many attendee seats in different classes. • Class/Attendee Seat (one-to-many)—One class can have many different seats for attendees.

Introduction to Dynamic Web Applications and Database Design

189

This solves the many-to-many problem because a seat cannot be occupied by more than one student at a time, and a seat cannot be used by more than one class at a time. Add this new entity and its relationships to the data model, and the picture now resembles Figure 6.8. FIGURE 6.8 The entities are now in first normal form and linked with one-tomany relationships.

Room number* capacity condition

1 ∞ Class

Teacher

class number* name time topic grade level

∞

employee ID* 1 fname lname status salary

1 ∞ Attendee Seat seat ID*

∞ 1 Student student ID* fname lname age grade level

6 Whew! That’s a bit of work, isn’t it? It might seem as if you’re working a little too hard just to design a simple database. The work that you do in the initial setup phase is bound to save you time later. No pain, no gain.

Second Normal Form The first normal form has been reached with only a few bumps along the way. Now it’s time to get entities into second normal form. In order to be considered in second normal form, the entities must be defined so that all the attributes of the entity (disregarding the unique identifiers) describe the unique identifier.

190

Day 6

For example, if any of the attributes are identical in multiple separate instances of an entity, those attributes are not entirely dependent on the unique identifier. Another way to determine this is to ask yourself the question, “If the data in this instance were to change, would it have to change in multiple instances of the entity?” Work your way through the different attributes in the entities we have defined. In each case, all the attributes are dependent on the unique identifier. Each instance of each entity is truly a unique piece of data.

Third Normal Form Usually you’ll find a “broken” part of the data model while you’re working on getting the data into second normal form or third normal form. The third normal form is a bit easier to understand than the second. In order to be third normal form, the entity must already be in the second normal form and must not contain any attributes (other than the unique identifier) that are dependent on one another. This is generally very easy to spot. For example, we definitely have a problem with the third normal form and the Class entity. In the Class entity, we have name and topic attributes. These two attributes are, without a doubt, dependent on one another. This entity needs to be modified in order to reach third normal form. To do this, we’ll need to add another entity that contains this information. A good choice would be a Topic entity that contained a class name and its topic. Because multiple classes can have the same name and topic, the relationship between the topic and the class would be a one-to-many relationship. The final data model for school is shown in Figure 6.9. We now have the following entities defined in the data model: • Teacher—Employee ID, First Name, Last Name, Status, Salary • Class—Number, Time, Grade Level • Topic—Name, Description • Student—Student ID, First Name, Last Name, Age, Grade Level • Attendee Seat—Seat ID • Room—Number, Capacity, Condition This, coupled with the relationship information between them, is all you need to define a database for use with a Web site.

From Model to Database Having a database model on paper isn’t the same thing as actually having a database properly defined. You need to manipulate the information you have now in order to create the physical database structure. This structure is similar to the entities you’ve defined, but it

Introduction to Dynamic Web Applications and Database Design

191

needs a way to define the existing relationships between the different entities. Obviously, creating several tables with the attributes we’ve chosen will not magically link the tables together. Instead, we need to encode information about the relationships into the data held in the table. In order to do this, we need to introduce the concept of keys. FIGURE 6.9

Room

The data model is finally in third normal form.

number* capacity condition

1 ∞ Topic name* description

Class 1

Teacher

number* ∞ time grade level

∞

employee ID* 1 fname lname status salary

1 ∞ Attendee Seat seat ID*

∞ 1 Student student ID* fname lname age grade level

Defining Database Keys Two types of keys exist that you need in order to complete your database model. The first key is a primary key—this is nothing more than the unique identifier created for each of the entities in the model. The primary key enables the database system to determine what constitutes a unique record.

6

192

Day 6

Note

When setting up unique identifiers for each of the records, all we did was add a unique field to the existing entity. However, another technique is also acceptable, especially if the entity is on the many side of a one-to-many relationship. You can combine multiple different entity attributes in order to form the primary key. For example, although a person’s name isn’t necessarily unique, coupled with a few other fields, it might be. It’s extremely unlikely that a person’s name, used along with his or her address and birthday would be in danger of not being unique.

The primary key is simple. You already set it up when you defined your unique identifier for each entity. The second kind of key that you need is the foreign key. This is the key that will “make magic” and define the relationships between the different entities. The foreign key is nothing more than another entity’s primary key that is stored in order to officially define a relationship between two entities. All relationships must have a foreign key defined on the many side of the relationship. The following relationships have been defined for the data model so far: • Room/Class (one-to-many)—One room can have several different classes in it. • Teacher/Class (one-to-many)—One teacher can teach several classes. • Students/Attendee Seat (one-to-many)—One student can fill many attendee seats in different classes. • Class/Attendee Seat (one-to-many)—One class can have many different seats for attendees. • Topic/Class (one-to-many)—One topic can be used in many different classes. In each of these cases, the many instances must inherit the primary key of the one instance. This primary key is considered the foreign key when it is stored in the table that it didn’t originate from. For example, in the Class entity, we need to add the room number from the Room entity. This will complete the one-to-many entity. This same process needs to be repeated for all the entities in the data model. If you want to try this yourself. Do so now. The final representation is shown in Figure 6.10. When this process is finished, you have all the information necessary to create a proper SQL database.

Introduction to Dynamic Web Applications and Database Design

FIGURE 6.10

193

Room

The model is finally complete.

number* capacity condition

Topic name* description

1

Class 1

Teacher

1

number* room number ∞ topic name teacher ID grade level

1 ∞ ∞

employee ID* fname lname status salary

Attendee Seat ∞

seat ID* class number student ID

∞

Student student ID* fname lname age grade level

1

The Final SQL Later in the book (on Day 12, “Writing Advanced Database Queries”), you’ll learn about the SQL programming language. For now, let’s take a look at how the model that we just set up translates into SQL. The entities in the data model translate directly into tables in the database. Additionally, the attributes make up the field names of the tables. You should easily be able to see how the SQL relates to the model: create table RoomTbl ( roomnumber int not null, capacity int, condition varchar(50), primary key(roomnumber)

6

194

Day 6

) create table TeacherTbl ( employeeID int not null, fname varchar(25), lname varchar(25), status varchar(50), salary int, primary key (employeeID) ) create table ClassTbl ( classnumber int not null, topicname varchar(50), employeeID int, roomnumber int, time time, gradelvl int, primary key (classnumber) ) create table TopicTbl ( topicname varchar(50) not null, description varchar(250), primary key (topicname) ) create table Student ( studentID int not null, fname varchar(25), lname varchar(25), age int, gradelvl int, primary key (studentID) ) create table AttendeeSeat ( seatID int not null, studentID int, classID int, primary key (seatID) )

There’s nothing to it. It’s interesting to compare the resulting database structure to the original database model that was proposed. We’ve moved from a single table that contained a bunch of data to a well-structured system of six different tables.

Introduction to Dynamic Web Applications and Database Design

195

Summary The process of setting up a database-driven site requires more than just opening up UltraDev and coding. A considerable amount of time must be applied to the planning process. It’s easier to sit down with a piece of paper and design the database correctly than to immediately start coding and end up needing to redesign the database later. Several types of Web pages lend themselves to being database driven: Lists—Lists of information can easily be pulled from a database and displayed in a table. Repeating information—Information that is used in several places on a site could be stored in a database allowing easy access for easy changes. Information that needs updating—If a piece of information needs updating on a frequent basis a database can be used to provide a user-friendly interface to the site updates. Creating a site map and then locating these types of sections on a Web site are the first steps in successfully planning a site. If you already have the information needed for creating your site, you can prepare by building a model for your data. The process by which redundant data is eliminated from the model is called normalization. Three levels of normalization exist that you should go through in order to prepare your data model for translation into an actual database. The first normal form defines the entities used in the data model and their attributes. It also makes sure that these attributes are singular and any repeating attributes are moved to their own table. After the initial entities are defined, the relationships between them can be defined. Relationships are defined by their degree: one-to-one, one-to-many, and many-to-many. The second normal form assumes that the data is in first normal form and extends the definition by saying that all the attributes must be dependent on the unique identifier for each instance. Finally, the third normal form takes entities that are in the second normal form and modifies them one step further. If attributes in an entity are dependent on one another rather than the unique identifier, they must be broken out into their own table in order for the third normal form to be reached. As a final step in database design, you will need to set up the database structure itself. The database structure is based on the data model that has been developed, but must include extra information in order to encode the relationships between entities.

6

196

Day 6

Q&A Q What’s the best reason to create a database-driven site? A The only real reason to create a database-driven site is because it is the most efficient way to build a site. All too often, sites are built just to use a particular technology, not because of any actual necessity. Only use a backend database if it benefits the function of the site and its upkeep—not because it’s “the thing to do.” Q How can a database provide an easier interface to a Web page than just plain HTML? A From what you’ve see so far, you might be wondering why in the world a databasedriven site would be considered easier to maintain than a site built using plain HTML. Using a database such as MS Access, or a programming language such as RealBASIC, you can easily create a front end to the data that is as simple to use as any other desktop application. Q Can I create a database without normalizing data? A Yes, but it isn’t usually recommended. Normalizing the data results in an efficient data model that offers consistent relations and eliminates redundancy. In some cases, a little bit of redundancy isn’t much of a problem and you can skip the normalization. If you’re working on a professional site, however, I suggest that you spend the time to develop a proper normalized model. Q What problems will I find if I don’t normalize the data? A If you don’t normalize your data, you’ll find that you’re going to have to spend a lot of time keeping your database up-to-date. A database that isn’t normalized has redundancy and cannot be accurately queried. In order to update a database with redundant data, you have to update multiple pieces of data. In a five- or six-record database, this isn’t going to be a problem. In a system of millions of records, the time expended searching for records that need to be updated can be very significant.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What portions of a Web site are best translated into a dynamic site? 2. What does normalizing a database do? 3. What is the first normal form?

Introduction to Dynamic Web Applications and Database Design

197

4. What is the second normal form? 5. What is the third normal form? 6. What is a primary key? 7. What is a foreign key?

Exercises 1. Visit sites that you’ve created, or draw a site map of a site that you want to create. Look for areas that would be more efficient if they were database driven. Don’t just look for the obvious spots such as a personnel database or a video library. Instead, try to find information that lends itself to being manipulated in a database. 2. Create a data model in third normal form from the toy store data that is shown in Table 6.2. The hypothetical toy store wants to be able to create targeted mailings for customers who have purchased similar toys in the past. TABLE 6.2

Create a Normalized Database for This Toy Company

Toy Name

Price

Previous Customers

Category

Big Bike

$109.00

Sally Rider, Paul Neblitz, Jessica Teem …

Bicycle, toddlers

Super Plane

$33.00

Jessica Teem, Terry Poltzer, Quinn Daug …

Young-adult, airplane

Marbles

$2.50

Tim Letry, Paul Nastercin, Julie Vujevich …

Toddlers, young-adult, adult, miscellaneous

6

WEEK 1

DAY

7

Understanding the Supported Scripting Languages If you don’t have a Web server yet, or even a deployment platform, what do you do? UltraDev supports three different scripting languages (actually, three and half). Unless you have a good idea of what these languages do, where they can be used, and how to use them, you’re going to be stuck before you even start. To help address these concerns, today you will learn • What languages are supported in UltraDev, and what the implications are of choosing one over another. • The servers that support the scripting platform of your choice. • How to read and interpret the source code for the different supported languages. This is not meant to be the perfect programming guide, but should let you find your way around.

200

Day 7

The UltraDev Languages When you first set up your site connection to a live database server, you’ll need to make a decision on what language will be used to generate the embedded source code. This will be covered in tomorrow’s lesson. Today, however, will help you make the decisions you’ll need tomorrow. As you can see from Figure 7.1, there are several different supported server platforms: • ASP (VBScript)—The Active Server Pages platform using VBScript as the programming language • ASP (JavaScript)—Active Server Pages using JavaScript for programming • JSP—Java Server Pages. Java Server Pages are programmed using embedded Java programming (not JavaScript) • CFML—Cold Fusion Markup Language. The Cold Fusion Markup Language is not exactly a traditional programming language, but it does make Web-based application creation extremely simple. FIGURE 7.1 UltraDev supports three different server platforms, and four different languages.

So, there are four different languages and three different server platforms available for your use. Which one is right for your application, which is the best long-term investment? In short, if you have no preference, which should you choose?

Note

For the projects in this book, I chose to use the Active Server Pages deployment platform. Although some custom code is used in the examples, you should have little problem translating these applications to work under any platform—especially after reading this chapter.

Understanding the Supported Scripting Languages

201

Active Server Pages The Active Server Pages platform was developed by Microsoft, and was one of the first technologies to implement an embedded programming model. Rather than writing a traditional application in which the HTML is generated by the program, embedded languages let you embed the program directly within HTML. The ASP model is a bit confusing in that it doesn’t represent a programming language, rather a group of technologies that can be used from within a wide variety of languages. Still confused? Look at it this way. Embedded programming languages include the capability of moving information in and out of databases, storing cookies, and so on. The Active Server Page model defines routines to work with all these features, and then makes them available to any programming languages written to take advantage of the ASP model. Although not supported in UltraDev, you can download Perl and install it as an ASP language. The biggest drawback to the ASP platform is that it is proprietary technology and is only available on two platforms. Anyone running MS Windows can download the Personal Web Server (PWS) and install the Active Server Pages components. This is not an ideal platform because it is extremely slow. During the course of writing this book, I initially tried to work with PWS on my 750mhz Althon running Windows Me. After waiting more than 10 seconds for a page to be generated, I gave up and moved to an NT 4.0 server, which performed much more reasonably. Thus is the trouble of ASP. In order to deploy on an ASP server, you are usually limited to Microsoft platforms. If you’re a Mac user, or a fan of the Open Source movement, this might not be your first choice for deployment platforms. Luckily, there is a solution for those who have to use Active Server Pages, but don’t or can’t deploy on a Windows NT/2000 based platform. Using a product called ChiliSoft, you can add the Active Server Pages model to several Unix-based systems, including Solaris and Linux. The drawback of this is that the cost of ownership for a Unix-based ASP solution is much higher than that for NT. You can download evaluation versions of the software and read more about the product at its Web site: http://www.chilisoft.com/

This is certainly a reasonable solution, but it isn’t for everyone. If you’re just starting out, it’s probably best to pick a server and scripting platform based on their merits.

7

202

Day 7

That said, Active Server Pages is a very flexible development platform that offers a wide range of features. Typically the scripting language used with ASP is VBScript, although JavaScript is sometimes used. Although simple to understand, VBScript is not considered by many to be an efficient programming language. If you’re traditionally a C programmer, you’ll probably feel a bit dirty reverting to Basic. The alternative, JavaScript, is a bit better, but doesn’t hold the power (or allure) of “hot” languages, such as Java.

Java Server Pages JSP, or Java Server Pages, is a relatively new embedded programming technology that is based on the Java Servlet Engine, which, in turn, is based on the Java programming language. Java servlets were initially created to address the need for a Java-based method of writing the equivalent of CGIs within the Java programming language. A servlet is a piece of Java code that is compiled and used to generate an HTML page, process Web page input, and so on. Servlets are written entirely in the standard Java programming language, but take advantage of classes specifically designed for writing dynamic Web page applications. Although it is possible to embed HTML into a servlet, you can’t do the reverse—you can’t embed a servlet into an HTML page. In order to overcome this limitation, servlets evolved into Java Server Pages. JSP is nothing more than a means of embedding the Java programming language into HTML pages. What makes this even more interesting is that the JSP system actually compiles each JSP into a servlet before it is executed. Don’t worry, you don’t need to know this in order to use JSP—it all happens behind the scenes on your server.

Note

Before you start saying, “The JSP to Servlet process must really slow things down,” let’s take a closer look at the translation process. When the JSP is translated into a servlet, that servlet is cached on the server. Only when the JSP is changed is the corresponding servlet regenerated. Although a slight delay might exist the first time a page is accessed, there is really no need for speed worries.

One of the best features of JSP is that it is Java. Anything that you can do in Java (except GUI applications, of course) can be done in JSP. The implication of this is that if you’re a Java programmer, you can immediately jump into JSP page creation. Java is a fully modern language whose growth has outpaced other languages for the past several years and that shows no signs of slowing down.

Understanding the Supported Scripting Languages

203

Another benefit of Java is that it is a fully cross-platform language that knows no barriers. Any Web server that supports Java Server Pages can run a JSP page without changing the code at all. This includes everything involved in the page programming, including database access. JDBC drivers allow you to access databases using a single driver file. Copy the JDBC driver to another JSP server on a completely different platform; it will work exactly the same. Deploying JSP applications is a bit more flexible than with Active Server Pages or ColdFusion applications. In fact, it’s actually possible to deploy for free using Java Server Pages. The Apache Software Consortium has implemented and released an open source Java-based JSP server that is available for free download. This server, known as Tomcat is a product of the Apache Jakarta project, and is a full implementation of Java Server Pages 1.1 specification. Experiencing an almost exponential growth in popularity, Tomcat is rapidly becoming one of the most widely used JSP servers available. You can get started immediately with JSP by downloading Tomcat from the Jakarta project Web site at Apache.org: http://jakarta.apache.org/

Because Tomcat is under heavy development, it does come with a few drawbacks—the most notable being less-than-perfect documentation and a not-so-friendly installation process. If you can get over these deficiencies, you’ll find that Tomcat is an almost universal deployment platform which can be used on almost any platform that includes a Java implementation—from Windows 2000/NT to Mac OS X. If you’d prefer to stick with commercial software, you have a few choices to satisfy your serving needs. Several JSP servers are available for Windows and Unix platforms. This is a partial listing: • Allaire JRun—http://www.allaire.com/ • Oracle 8i Jserver—http://www.oracle.com/ • IBM WebSphere Application Server—http://www.software.ibm.com/ • iPlanet Web Server—http://www.iplanet.com/ • Silverstream Application Server—http://www.silverstream.com/ The playing field for JSP servers is increasing very rapidly. You can find the latest server information from Sun’s Web page at http://java.sun.com/products/jsp/industry.html

7

204

Day 7

Note

For those ColdFusion fanatics out there, take a look at the first server in the list. Notice anything unusual? The same company that develops and markets the ColdFusion Web application environment also makes its own (very good) JSP server implementation. If this isn’t an endorsement of the viability of JSP as a deployment platform, I don’t know what is.

Although JSP is a rapidly growing and standards-based server platform, it also carries with it the baggage of Java. Java is a modern object-oriented programming language that is, for beginners, extremely complex. If you’ve used C or C++, you’ll be right at home writing JSP code. Unfortunately, if you’ve been using Visual Basic or RealBasic for the past few years, you’re going to be in for a bit of a culture shock. We’ll look at JSP coding in-depth in a few minutes.

ColdFusion The easiest language to work with is the ColdFusion Markup Language. Bearing little resemblance to a programming language at all, CFML is more like an extended version of HTML that includes database access. By creating a coding environment that is powerful enough for professional developers, but so nonintimidating that casual HTML coders can easily pick it up, Allaire has made Web application development available to a very wide audience. Next week we’ll take a direct code comparison of the different languages that UltraDev can author, and you’ll see, beyond any doubt, that CFML is the cleanest of the bunch. Rather than requiring custom programming code to be embedded within special delimiter tags in HTML (as is the case with ASP and JSP), ColdFusion simply adds a new range of tags to those which you can use when writing your pages. This extended authoring environment was almost stunning the first time I saw it. ColdFusion breaks out of the traditional programming mold and boldly treads into territory that makes database access almost as simple as writing HTML.

Note

If you’ve never looked at ColdFusion before, I urge you to do so. I’ve always programmed in more traditional languages such as Java, Perl, and C, but after spending time working with ColdFusion, I was quite impressed. The designers of the CFML took into account almost every feature a Web application author could want, and then threw in a few dozen more. Despite its simplistic approach to embedded programming, it can be used to create truly powerful applications that perform very quickly and are a cinch to debug.

Understanding the Supported Scripting Languages

205

As with other platforms, there are also drawbacks to using ColdFusion. The first problem is one of mindset. If you’ve spent time programming before, you have a general idea of what you’re looking for when exploring a new language. You look for for...next loops and if...then style conditionals. What you don’t expect is to find a series of tags to represent all these more traditional style constructs. Who would think that the complexities of loop syntax would be replaced by something as simple as a tag? Because of a needed shift in thinking, experienced programmers might find themselves running into more difficulty than those who have never programmed before. Additionally, ColdFusion suffers from the same platform limitations as Active Server Pages. Sold as an add-on product for Linux, Solaris, HP-UX, and Windows, you must pay before you play. The inability to truly run anywhere is one of the only shortcomings of this otherwise tremendous package.

Tip

I probably shouldn’t say this, but if you’re a ColdFusion user with ColdFusion Studio, you’re bound to find out sooner or later: ColdFusion Studio is actually a better CFML authoring environment than UltraDev. UltraDev’s server behavior implementations are mostly homogenous across the different platforms. Because of this, there is little attempt made to take advantage of the strong points of one language or another. The ColdFusion Studio was designed for working with CFML and only CFML—as such it offers greater flexibility and control over your applications. If you’re a Mac user, grit your teeth and use UltraDev. It is currently the only CFML environment available on the Macintosh.

Choosing a Server Originally, I had planned to write this section as a brief sidebar or note, but after thinking a bit more about the content, I decided that it deserved its own section in the chapter. If you’ve decided on a Web server technology to use, the next obvious choice is what type of server OS is going to be used? There are at least two primary choices for each available development environment: Unix or Windows. Which will it be? This is the type of question that is batted around for days without a reasonable answer being given. In fact, I recently read a magazine article that discusses the plusses and minuses of Unix versus NT and, although claiming “The definitive results” on the front cover, the article didn’t bother to claim a preference for either one, nor declare one or another truly better at something than the other. So, if no one is willing to choose a winner, how are you expected to be able to pick the server operating system that you want to use to deploy your Web site?

7

206

Day 7

Choosing a server is largely becoming as “religious” an issue as choosing between Windows and Macintosh as a desktop operating system. The recent increase in Linux’s popularity has sparked the rebirth of Unix and Unix-like operating systems that were, for a time, considered “down for the count” in the wake of NT.

User Friendliness The primary advantage of using NT can be summed up quite succinctly—user friendliness. Anyone, regardless of previous computer experience, can have an NT/2000 server up and running on a network in a matter of minutes. Microsoft has made it very simple to set up the basic services required to become your own Internet server. The integration between different system components makes it easy to get different pieces of software working together and develop complex network architectures from within an easy-to-use interface. Unix and Linux, however, aren’t standing idly by while this happens. In the past two years, Linux has gone from an operating system with a lack of a consistent user interface, to one that features some of the most advanced interface tools available. Thanks to the work of users on the GNOME (http://www.gnome.org/) and KDE (http://www. kde.org/) projects, Linux users now enjoy the same point-and-click setup of services as their Windows counterparts. Unfortunately, the quality of some of the service configuration tools has yet to reach commercial quality. Considering that the development for Linux is far outpacing Windows or any other operating system, this is not likely to remain a factor for long.

Note

Although Linux is sometimes referred to as a different beast than Unix, they are really very much the same thing. Linux is an Open Source implementation of a Unix-like operating system. This is merely a matter of semantics, and you can feel free to read Unix or Linux wherever I use either word.

Type of Services Offered The type of services that each operating system offers is another point to consider when making your OS choice. NT, out of the box, offers basic Internet serving capabilities, File Sharing, Print Sharing, Active Directory features, and so on. Likewise, Red Hat Linux offers the Open Source equivalent of all these services, and many more. The PostgreSQL database server, for example, is an extremely powerful relational database server that, while running industry standard benchmark tests (http://www.greatbridge.com/), competes head to head with commercial offerings from Oracle and Microsoft.

Understanding the Supported Scripting Languages

207

In fact, the Apache Web server that comes with Linux has consistently experienced more growth and development than the NT-only IIS Server. You can check out the latest statistics in server popularity from http://www.netcraft.com/survey/

Unfortunately, although supporting more services out of the box than NT, configuring those services under a Unix server is still far more challenging than setting them up on Windows. Microsoft’s Internet Services Manager provides a single interface for Web, ftp, and other Internet-related services. To accomplish the same configuration of the Unix counterpart usually requires manually editing a file for each of the affected services.

Reliability The reliability of Windows has significantly increased in the past few years, especially with the release of Windows 2000. Overall, however, the advantage is the Unix court. Commercial Unix operating systems such as Solaris and AIX provide the most stability for mission critical applications. It is very difficult to document the stability of one platform in relation to another, and, unfortunately, most of the evidence is anecdotal. For example, here are the uptime statistics from a highly trafficked e-commerce site run on AIX: www3:/> uptime 10:38AM up 285 days,

17:59,

1 user,

load average: 0.26, 0.48, 0.45

This is a full production site under a reasonably heavy load. The development server for this site happens to be an NT 4.0 computer that is put to very light use. The NT 4.0 server must be rebooted at least once or twice a week in order to keep it online. I highly recommend that you ask around and find out the statistics relevant to the hardware and application server platform that you are using. Finding the right combination of hardware and software to keep your servers online will save you from having to deal with phone calls at 3 a.m. because your Web site has crashed.

Performance/Cost Ratio For many years, NT has led the performance/cost ratio by running on relatively low-cost, Intel-based hardware. Traditionally, if you were going to run Unix, you’d run it on hardware that was dedicated to that particular platform. Linux has changed that entirely. Running on the same hardware as NT (and many platforms NT doesn’t run on), Linux requires far less resources than NT and operates smoothly on low-end Pentium systems. The price of ownership ($0) for the Linux operating system also tips the scales in favor of the Open Source operating system.

7

208

Day 7

Support This is the big sticking point for many people—“How can I use a product that has no real support?” This is an entirely valid question often asked within the enterprise environment. NT, without question, has the power of an incredibly large corporation backing it. As bugs are found, they are rapidly documented and addressed. Rarely do you find yourself wandering the Internet searching for someone who knows what you’re talking about. Although commercial Unix packages boast similar support, the same cannot be said for Linux. The Linux operating system knows no “real” ownership and cannot be “fixed” by the vendor who sold you your copy. Most times, you’ll find that a simple post on a newsgroup will generate hundreds of helpful responses, but there are some instances when the lack of someone to turn to can become frustrating. For example, a friend of mine installed a new Ethernet card in his computer. After installing Linux, he found that his network connection would “die” every few hours. Upon searching the Internet for clues, he found that a new driver had been released by the person who had authored the “buggy” driver. Going to the programmer’s Web page, he found that the site no longer existed and had been moved. Tracking down the person who wrote the driver, emailing him for information about the new driver, and waiting for a response took several weeks and was complicated by an installation procedure that was cumbersome and extremely difficult for a novice to perform. Although this is a worst-case scenario, it is definitely something that should be considered.

The Final Decision So, by weighing the advantages and disadvantages of the platforms, which one is right for you? Rather than giving you a single answer, I’ll give you both answers, and why you should choose one over the other. First, the Windows choice. Choosing Windows as a server platform is a safe bet. You get a reasonably stable system that is easy to configure and maintain. You should be prepared to make a large initial investment to purchase the software components you will need to develop your Web site. This is the best choice for someone who doesn’t want to invest time in a dedicated system administrator or learning a complex system.

Understanding the Supported Scripting Languages

209

Second is Linux (or Unix). The Unix decision gives you a very fast and flexible platform that (if you choose Linux) can get you online and serving for no more money than the cost of your hardware and Internet connection. This is a great setup for the budgetlimited or technically savvy. Support is a mixed bag, but you won’t usually run into trouble if you stick with mainstream hardware. If you are not interested in learning how servers work, a Unix server is not the right choice for you. So, what server do I use? You’re more than welcome to find out by visiting my Web site at http://www.poisontooth.com/.

Inside the Supported Languages So far, we’ve looked at what the supported languages are, what application server platforms support them, and how to choose an underlying server operating system. Now we’ll take a look at the actual structure of these languages and how they operate. This is not meant to be a complete programming reference. Instead, it will hopefully give you enough information to find your way around the UltraDev generated server behaviors and modify them to do your bidding. You can consider this an introduction to programming tutorial that is geared toward those who have never programmed before. If this doesn’t include you, I apologize ahead of time.

Programming Concepts Several concepts apply to all programming languages at a base level. Although each of the supported programming languages is different, they all have certain fundamental elements in common. The best way to understand a language you’ve never used before is to understand these fundamental blocks and how they appear within the language you are using.

Note

Although JavaScript is one of the supported programming languages, it will not be discussed here. The structure of JavaScript at the level we’re discussing is similar to Java and therefore would be redundant.

Basics Before looking at the actual languages, here are some basics to keep in mind as you look at the code: Tags—ASP and JSP tags are denoted by <% tagname %>. ColdFusion tags are embedded directly within HTML and look identical to existing HTML tags.

7

210

Day 7

Comments—Comments can be added to ASP code by starting the line with a ‘ character. Likewise, Java and CFScript lines can be commented with //. Because all the languages are embedded directly into HTML, you can always use the standard HTML comment tags to denote a comment. End of Line—VBScript lines end with a carriage return. ColdFusion Script and Java both terminate a command line with a semicolon.

Variables Variables store information during the execution of an application. They can be used to store text, numbers, and other more abstract concepts such as time. Each programming language deals with variables in a different way and offers different capabilities for working with the variables that you define. ASP—VBScript VBScript, or Visual Basic Script, is a very simple language that mirrors Microsoft’s popular Visual Basic development environment. Variables are defined when they are used within a VBScript program. Additionally, you can store text or numeric data in a variable without needing to differentiate between the datatypes. For example, myVar=3

and myVar=”Four”

are both valid variable assignments. Occasionally, you’ll see VBScript that includes the Dim (Dimension) command: Dim myVar

This simply declares that the variable myVar exists but doesn’t assign a value to it. Because variables are automatically declared when they are first used, this keyword is rarely employed. Arrays, which store multiple values inside of a single variable name, are denoted by [] following the variable. By supplying a number to the array (myVar[50]=12345), you can select an element of that array. Java Java is a much more tight language than VBScript. You do not have the ability to add variables wherever you want them in the code. Instead, you must tell the system the name and type of variable you’re using before it appears in the source code.

Understanding the Supported Scripting Languages

211

For example, int myInt; float myFloat; String myString=”This is a string value”; myInt=3; myFloat=4.5;

As seen with myString, you can set the value of a variable when it is first declared. Also notice that each line ends in a ; character. Within Java and JavaScript, these characters are used to denote the end of a command. You can break code across several lines as long as a ; falls at the end of the code segment. Arrays in Java work similarly to those in VBScript. The difference is that you must declare the array (int myInts[50];) before using it.

CFML/CFScript ColdFusion suffers from a bit of an identity crisis when it comes to nailing down the programming language. CFML allows you to do most of your programming very quickly, but is often a stumbling point for those who want to write code in a traditional style. Because of this, ColdFusion provides a second language called CFScript, which can be embedded in a page. UltraDev makes use of both types of programming when writing its server behaviors. Within CFML, declaring a variable is performed like this:

Within CFScript, however, the variables are declared and used in a fashion that is identical to VBScript: myVar=”Test” myInt[50]=75

Within CFML, you can access CFScript variables using “#variablename#”. It’s a bit confusing, but it works.

Conditionals and Looping Constructs In order to do work, applications need to make decisions and adjust their activities to the data that they are processing. For example, if you have an unknown amount of records in your database table, and you want to display them all, you will need to loop through the records until you find the end. Additionally, if you don’t have any records to display, you might want to add a message to the screen that will warn the user that no information is available. Both of these activities require the program to adjust its logic flow depending on a several different things. Let’s take a look at these programming constructs and how to recognize them in the available languages.

7

212

Day 7

VBScript There two types of loops you’re likely to see in UltraDev server behaviors—for...next loops and while loops. The for...next loop counts over a range of values until an upper or lower value is reached. The while loop, however, continues to execute code repeatedly while a condition remains true. For example, For x=1 To 5 ‘ Do Something five times Next

and Do While (x<5) ‘ Continue as long as variable x is less than 5. Loop

In addition to looping, applications also need to make decisions on where to go if certain conditions are met. This is typically handled by an If...Then...Else construct that checks a condition before executing a piece of code: If x=5 Then ‘ Do something useful! Else ‘ Do something else! End If

Using this conditional statement, you can alter the logic flow of the program so that it performs new actions based on the conditions you specify. Java Looping within Java is done according to the C style syntax. Unlike the verbose VBScript code, Java keeps the loops to a minimum: for (x=0;x<5;x=x+1) { // Do something 5 times }

The initial line of the for loop does three things; it initializes the variable x to zero, it sets the condition under which the loop will continue to run (x<5), and finally it tells the program what to do each time the program executes (increase x by one). Code segments within Java are always contained within curly brackets {} rather than several different constructs as in VBScript.

Understanding the Supported Scripting Languages

213

For example, the while loop varies from the for loop only in the initial line: while (x<5) { // Do Something! }

This same structure also carries over to the IF statement: if (x==5) { // Do something useful! } else { // Do something else! }

As you can see, this is a more consistent programming style, but can be difficult to debug if you have several nested conditionals. CFML/CFScript As luck would have it, CFScript follows the same syntax as Java, so we don’t need to look at it here. What we do need to check, however, are the CFML tags that handle looping and conditionals. The tags handle both a counting style for...next loop and the conditional while loop:

This example would loop from 1 to 5, just as the previous ASP and JSP code fragments do.

Note

The CFLOOP tag is spread across multiple lines here to show its components. It could just as easily be on a single line.

To perform a conditional loop, we just modify the tags slightly:

As you can see, ColdFusion aims to make creating dynamic pages as simple as coding HTML.

7

214

Day 7

Creating an IF statement is just as simple—another set of tags control the login flow. For example,

CFML isn’t difficult to work with, but it does take some getting used to!

Dynamic Elements Dynamic elements, for the sake of discussion here, are elements that receive their contents from the client browser. This includes things such as sessions, cookies, and form fields. Each of the programming languages covered here offers a different way to access these elements because they are not a common feature of traditional languages and were implemented as an addition to the core syntax. ASP—VBScript Accessing dynamic client-specific values, such as sessions, cookies, or form results is very simple within Active Server Pages. In fact, if you’ve ever used Perl or another traditional language to develop server-based CGIs, you’ll be astounded by the ease of ASP. Setting a session variable is as easy as assigning any other variable value: Session(“myVar”)=”My Value”

Likewise, setting a cookie is equally simple: Response.Cookies(“myVar”)=”My Other Value”

You can even modify the expiration date of the cookie by adding another line: Response.Cookies(“myVar”).Expires=#12/31/2030#

Caution

Although setting a cookie is indeed very easy, you must set the cookie before any other information is sent to the client computer. Failing to do this will result in an error.

Within UltraDev, you can easily ready the contents of any of these elements by adding a data binding, as you’ll learn in Day 9, “Introducing the UltraDev Dynamic Tools.” Unfortunately, if you want to set a value, you’ll need to do it manually.

Understanding the Supported Scripting Languages

215

Java Setting session variables in Java is similar to ASP, but with a slightly different syntax: session.putValue(“myVar”, “My Value!”)

Note

In both this example and the previous ASP example, the code contained a command that included a period. This denotes a method within an object. You can think of an object as an advanced form of function library—it contains methods (functions) that work with a very specific type of data. For example, the session object contains a putValue function that can be used to set a session variable. If you’re interested in more information about object oriented programming, I suggest purchasing these Sams books: Sams Teach Yourself ASP in 21 Days or Sams Teach Yourself Java in 21 Days.

To set a cookie within JSP, you must add the cookie to the Response header that is sent to the client computer. This is identical (conceptually) to the ASP example—and it explains why the ASP command contains the word Response. myCookie = new Cookie(“myVar”, “My value!”)); myCookie.setMaxAge(50000); response.addCookie(myCookie);

What is a bit different here is that there is an extra step to the creation of the cookie. First, you must create the Cookie object (myCookie in the example). Next, if you want, you can set a maximum age that the cookie can reach in seconds. Finally, the correctly configured cookie object is added to the response header. CFML Before you can use session variables within ColdFusion, you must use the tag to activate session management. This tag is held in the primary application.cfm file for your project and should be only used in the tag in any of the pages.

After session management is enabled for the project, you can set session variables using much the same way to set any other variable:

7

216

Day 7

Cookies, however, get their own special tag that can be used to store a browser based value:

That’s it! Using this information and the UltraDev tools, you should be able to dissect the server behaviors and modify them to do your bidding. More importantly, in areas of the book that require custom programming (don’t worry, only a few lines here or there need to be added), you’ll be able to change the source code for your server platform.

Summary Today’s lesson tied up all the loose ends that we needed to discuss before proceeding. A wide variety of potential development platforms and server platforms can be used with UltraDev, but, if you’re a beginner, it can be difficult to decide what is right for you. We’ve looked at the different embedded languages and their benefits and drawbacks and the server operating systems that they run on. Hopefully you can now make a decision to what makes the most sense from both usability and performance/cost perspectives. Finally, you got to see some of the guts of the programming languages themselves. Although this was not meant to be a full programming guide, it should provide enough information for you to work with UltraDev’s autogenerated code regardless of your previous programming experience. From this point on, the book is going to pick up steam, and, within the next week, you’re going to be well on your way to building complex dynamic Web-based applications.

Q&A Q Why shouldn’t I use Tomcat, if it’s free? A There’s no reason why you shouldn’t because it is free or isn’t free. Some commercial packages offer better support and faster performance, however. It’s best to check all your options before making a decision. Q Why are there so many different embedded languages? A Everyone has a favorite language. Embedding those languages into HTML is the next logical step for creating Web applications. JSP is aimed at Java developers. ASP is aimed at those who have worked in Visual Basic. ColdFusion is one of the few “original” languages that was born solely for the purpose of creating Web sites.

Understanding the Supported Scripting Languages

217

Q I run NT and it never crashes. Are you crazy? A Part of the problem with NT is the hardware that it runs on. The “x86” standard is anything but a standard and NT behaves differently with different hardware. That said, I have a very basic install of NT on a commercial server system that blue screens weekly. Maybe it’s just me. Q I have a Macintosh and I want to be able to run my own server; can I? A Yes. Be sure to look into the Jakarta project’s Tomcat. It will run on Mac OS X and even Mac OS 8/9 with a bit of tweaking.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What does ASP stand for, and who created it? 2. What embedded language uses <%

%>

to denote its start and end tag delimiters?

3. Can you set a cookie value at any time in JSP or ASP? 4. Can you set a session variable at any time? 5. What is the best authoring environment for ColdFusion?

Exercise Today’s exercise is an easy one. Decide on and install the server of your choice. Although you might have gotten this far in the book without a Web server and application server, you can’t get much further. You’ll be required to have a live connection in all future chapters.

7

WEEK 1

1

In Review

2

The past seven days have been a crash course in the Dreamweaver/UltraDev authoring environment. A great deal of information was covered, so let’s take a look at the important things that you should have learned. If any of this remains unclear, you should review these portions of the text before continuing. Understanding the UltraDev environment and available HTML tools is of paramount importance in using the dynamic behaviors. HTML Design Tools—The UltraDev Object palette lets you quickly add and manipulate objects in the UltraDev design view. Clicking an item in the tool palette will either directly add the item to the design view, or present the user with a configuration dialog so that he can choose the parameters needed to create the object. There are two modes of design—the standard mode and the layout mode. Using the layout mode, you can quickly define content regions within your document with pixel accuracy. Be sure that you are comfortable with using this mode and the other tools at your disposal to layout HTML documents. Property Inspector—The Property Inspector palette lets you view and modify almost any attribute of an HTML tag from within the graphical UltraDev environment. This eliminates much of the need for an HTML reference because everything you would want to modify is presented visually. If you need a quick reference, UltraDev includes an extensive online help area for HTML, Cascading Style Sheets, and JavaScript. Timelines and DHTML—Dynamic HTML is a powerful combination of JavaScript and layers that make it possible to create dynamic applications that run from within the

3

4

5

6

7

client browser. Using the timeline, you can create time-based animations, or add actual interactivity with the Drag Layer behavior. Understanding these features, although not necessary for writing server-based behaviors, is important for deciding what portions of your code should run on the client and what should run on the server. Database Design—The final days of the week introduce the concepts behind database design. In order to author effective database-driven applications, you must be able to create the data structures that drive the Web site. Being able to normalize your data is critical for the rest of the text. Without this information, you’ll be unable to design an efficient backend for UltraDev to communicate with. Again, it’s very important that you’re comfortable with these functions before proceeding—even though this is a 21 day book, it doesn’t necessarily have to be completed in that length of time.

WEEK 2

8

At a Glance

9

With the document design tools out of the way, we can quickly move forward to the dynamic server-based tools in Week 2. UltraDev takes three very different programming languages and provides a common interface to using them all. Using a simple point-and-click interface, you can create custom database driven Web sites that require absolutely no programming knowledge. That said, one of the largest mental leaps that needs to be made to use UltraDev needs to be made by people who are programmers. The dynamic tools, although simple to use, are more focused on designers than programmers and require some getting used to. Week 2 will provide straightforward information to non-programmers, and also introduce programmers to the application in such a way that they can incorporate it into existing programming knowledge. UltraDev creates dynamic applications using a series of behaviors along with data that is bound to each behavior. These behaviors accomplish very specific tasks, such as displaying information from a database or showing a message onscreen. By itself, a server behavior is very small and won’t make your site into a dazzling dynamic masterpiece. Combined with other behaviors, however, you can create something that is, indeed, very complex. Some of the available behaviors you’ll work with include the following:

10

11

12

13

• Showing/Hiding information conditionally • Displaying/Updating/Deleting information from a database

14

• Authenticating user information based on usernames and passwords • Passing information from page to page By the end of the second week, each of these behaviors (and several others) will be discussed in depth. You’ll also learn how to use these features together to build common elements of dynamic Web sites. In fact, almost every aspect of UltraDev will be explained by the end of the second week. You should feel completely comfortable with each behavior by the time you’re done. What’s missing, however, is the applied knowledge that you get only by doing. With this in mind, I’ve created each lesson in the final week so that by the end of each day, you’ve created a new and different Web site based on common and useful sites that you see and use everyday.

WEEK 2

DAY

8

Setting Up Macintosh and Windows Systems for Database Interaction In order to start using database systems from within UltraDev, you must be able to connect to a database engine that already exists on your computer or your network. Every day from now on will include features of UltraDev that require the presence of a database system. In order to get you set up for the rest of the book, today, you’ll learn these important things: • The databases UltraDev can communicate with, and how to configure your computer to use them. • The differences between the Macintosh database connection model and the Windows-style connections. • How to connect a Macintosh to a Windows computer to gain access to a larger range of database systems. • How to set up a free database server on both Windows and Unix-based server platforms.

224

Day 8

The Database Connection Because we’re dealing with multiple platforms today, beyond this introduction the text will be divided into sections that are either universal or platform specific and will be denoted as such. Additionally, some sections only apply to ASP (Active Server Pages), JSP (Java Server Pages), or ColdFusion development. You might want to read through everything because you’ll find that this information can be useful for applications outside of UltraDev. If you’re in a Mac- or Windows-only environment or are only interested in a particular server platform, feel free to read the sections that are important to you.

Note

Today’s assumption is that you already have a database server and experience setting up databases. If this isn’t the case, begin by reading the section on setting up MySQL at the end of today—this will provide you with a basic foundation for your UltraDev back end.

As you author dynamic pages within the UltraDev environment, the software will require information necessary to link your application server to a database. Depending on your setup, you might author the Web application based on a local database, and then deploy it on a remote server with a different database connection. If this is the case, your local database must be configured identically to the remote system. The alternative is to author the application based entirely on the database that you’ll be deploying with. Either way, the setup is really quite simple, and, in the cases where you’re using a database on your remote server, your local machine won’t even need a driver to connect to it. UltraDev uses the remote system’s driver to access the data locally.

Caution

A common source of confusion is misconfiguring the database connection so that UltraDev is speaking to a local database that is configured differently from the deployment database on the application server. In this case, UltraDev can talk to the database with no problem, and everything appears to work in the design view. As soon as you attempt to preview your work or transfer it to the server, however, the dynamic functionality will break. It’s important to make sure when using a local data source that it is consistent with the data source on your application server.

Setting Up Macintosh and Windows Systems for Database Interaction

Setting Up a Database Connection (Macintosh/Windows) Multiple database connections can be associated with a single Web site, but typically you’ll just use one. Multiple data sources, however, are completely legitimate, and you could easily design a site that works with data on multiple servers in very different locations. To set up a dynamic Web site, define a site as you normally would, but click on the Application Server category before exiting the configuration. This screen, shown in Figure 8.1, lets you set the server model (ASP, JSP, CFML), the language in which the application will be written, the file extension to use, as well as additional access information. FIGURE 8.1 Set up your remote application server’s language type and location.

UltraDev takes into consideration the fact that you might want your application to reside on a server other than the remote server you’ve set up for the rest of your site. By changing the Access field on this screen, you can alter where your Web application is being stored. This configuration is identical to configuring the location of the remote server, as discussed in Day 3, “Planning and Managing a Web Site.” If you choose not to provide this information, UltraDev will assume that your application server and remote server are one and the same. You can view the files on the application server connection by clicking the second button from the left in the toolbar of the Site Files window (squares with lightning bolt icon). If the remote server and application server are one and the same (more likely than not), this button will add any additional functionality. After you’ve defined your Web site using the appropriate server model, you can define a database connection. Several data access methods are supported by UltraDev—you will be guided by the program into choosing the right one for your server deployment platform:

225

8

226

Day 8

ADO/ODBC—ActiveX Data Objects. ADO technology is Microsoft’s latest method of connecting to data sources. ADO is a generic data-access method that can be used to retrieve many types of information. For database connections, you’ll be using an ADO/ODBC connection (Open Database Connectivity). If you are using the Active Server Pages data model, this is the type of data connection you will be making. You cannot use ADO/ODBC connections for local database connections on the Macintosh, but you can use the remote application server to provide connectivity to these sources. JDBC—Java Database Connectivity. Java Database Connectivity is a fully crossplatform means by which a database can be queried. If you are using a JSP server setup, this is the route you will take. ColdFusion Data Source—A data source that has been defined in the ColdFusion administration package. This data source is specific to the ColdFusion model and is only used on the server connection. Now is the time when the Macintosh users let out a big sigh and say, “But Windows has so much more database connectivity than the Mac—it’s not fair.” (I’m writing this on a Powerbook, so I feel your pain.) If you need to connect to a database in which only Windows ODBC drivers are available, it can be done. Macromedia has added the capability for UltraDev to connect to a database using the application server itself. This means that even if you’re authoring on a Macintosh, you have full access to all the different types of data connections. In addition, you can use JDBC drivers to connect to Windows data sources, giving you even greater connectivity options. For now, let’s take a look at creating the first database connection. Once again, make sure that you’ve correctly set up a Web site definition with the right server model and access method.

Creating a Database Connection To add a connection to your site, choose Connections from the Modify menu. The connection definition screen shown in Figure 8.2 will be displayed. Because this is the first time you’ve defined a connection, the dialog box will be empty. If you have existing connections set up, you can edit, duplicate, or remove them by clicking the appropriate buttons. FIGURE 8.2 Here you can define and modify database connections.

Setting Up Macintosh and Windows Systems for Database Interaction

Tip

Often, duplicating an existing data connection that is similar to one you want to make is easier than defining a new connection. I frequently find myself forgetting the syntax for JDBC connection strings and needing to refer to previous definitions for help.

Click the New button to start a new database connection definition. Depending on the server model you’ve chosen, a pop-up menu will be displayed with a number of different connection configuration methods. Let’s take a look at each of these options and how you go about setting them up. Scan through the following sections, organized by deployment platform, and find the connection type you want to use for your site. Data Source Name (ASP Server) The default connection type is an ADO ODBC connection using a data source name. This is created from an ODBC data source that is defined for your particular server and database. If you’ve never set up an ODBC connection before, I urge you to check out the end of the chapter, which covers setting up a simple database server to use with UltraDev. Along with the instructions for setting up the server, I will also include setting up an ODBC connection to it. As you see in Figure 8.3, five fields need to be configured for a basic connection: • Connection Name—This is the name of the connection. You’ll want to make this something descriptive of what the connection is used for, and keep it simple. If you’re going to want to get down and dirty with UltraDev and edit the source code that it generates, try to name this based on the type of variable it will represent in the code. UltraDev suggests prefixing your selected name with conn to show it refers to a connection. In practice, this won’t really matter unless you’re a code hacker. • Data Source Name (DSN)—This is the Data Source Name for the ODBC data source that you want to connect to. Windows users who are using a local data source can use the pop-up menu in this field to select the data sources that have been defined on that computer. If you are using a data source on the application server (this is the only option for Macintosh users), click the DSN button to poll the available sources from the remote server.

Tip

In addition to the DSN pop-up menu, Windows users also have access to a Define button to open the ODBC control panel. Click this button to define a new DSN for your local machine.

227

8

228

Day 8

• User Name—This is the username to pass to the database for the connection. • Password—This is the required password for the connection. • UltraDev Should Connect—You need to tell UltraDev whether to connect to the DSN through the application server or using a local source. Macintosh users do not have this option and are forced to connect using the remote server’s data source.

Note

The Macintosh actually does support local ODBC connections, but UltraDev does not use this feature. With any luck, if UltraDev is ported to the Mac OS X environment, it will make use of some of the higher-end networking features and ODBC connectivity coming to that platform.

FIGURE 8.3 A Data Source Name connection is made based on a predefined ODBC data source.

Tip

ODBC data sources are often configured with a username and password when the DSN is created. This eliminates the need to provide an additional username and password when setting up the connection document.

When the configuration is complete, you can click OK to exit, or try clicking Test to verify the connection. If you prefer, keep reading to learn about the other types of connections that can be made. Custom Connection Strings (ASP Server) The connection string method of configuring database access is a bit less friendly than using a DSN. Connection strings, however, give you greater flexibility in choosing the location of the database and other parameters without having to define an ODBC data source on your machine. Because the parameters of the connection string vary with the database server being used, you will need your database documentation to fully use this type of connection. Figure 8.4 shows the connection string fields.

Setting Up Macintosh and Windows Systems for Database Interaction

229

FIGURE 8.4 Connection strings provide a way to connect to a database without requiring that an ODBC DSN be predefined.

For this type of connection, there are only two fields that you need to define—the UltraDev connection name, and the connection string. You will need to check your database documentation in order to determine the appropriate syntax to use for the ADO connection string. Two types of connection strings can be set—DSN and DSN-less. A DSN connection is just a variation of the connection you already learned about. Rather than defining all the information about the database, and so on, it just uses the Data Source Name and an optional username/password to create the connection. For example, a connection string to an ODBC data source named “mydatabase” with the username “myname” and password “mypassword” would look as follows: dsn=mydatabase;uid=myname;pwd=mypassword;

A DSN-less connection string contains more information—everything that would normally be needed in an ODBC data source. For example, to connect to an Access database called C:\mydatabase.mbd with a DSN-less connection string, you might use DRIVER={Microsoft Access Driver (*.mdb)};DBQ=c:\mydatabase.mdb

Unlike a predefined data source, the ADO connection string is dependent on the specific database features you want to use. Read your database documentation for more information on the connection string attributes that it supports. Similar to the Data Source Name connection method, you can also choose whether or not you’re connecting using a driver on the Application server or on the local computer. Macintosh users can only connect using the Application server. ColdFusion Data Sources (ColdFusion) ColdFusion manages databases in a manner that is slightly different from that of the rest of the software. Databases are defined within ColdFusion and are managed separately from standard ODBC connections. To define a ColdFusion data source, choose Data Source Name from the New pop-up menu. Figure 8.5 shows the ColdFusion configuration screen.

8

230

Day 8

FIGURE 8.5 Make sure that you’re using a ColdFusion DSN when defining your connection.

The ColdFusion dialog box looks strikingly similar to the connection definition for ODBC DSN connections. The only difference is the DSN. If you select using the DSN on the Application server, you will need to click the Login button to log in to the ColdFusion server and retrieve a list of available data sources.

Note

Similar to ODBC DSNs, ColdFusion DSNs typically store the username and the password in the connection definition. If your DSN is set up this way, you don’t need to fill out the User Name and Password fields.

Because connecting to the ColdFusion server’s database manager might not always be a possibility, you can design using an ODBC DSN on your current machine. This is actually the default for the ColdFusion connection configuration. Use the UltraDev Should Connect radio buttons to toggle between Local (ODBC) DSNs and ColdFusion (Application Server) DSNs. Because Macintosh users do not have access to local ODBC data sources, Macromedia has built in an Advanced Data Source Name definition that can be chosen when clicking the New button to define a connection. This configuration screen is identical to what you have seen here, but also includes the fields necessary to configure a JDBC driver to connect to a local or network database. To configure the JDBC portion, refer to the following section on JDBC connections. JDBC Connections (JSP Server) Finally, the last type of connection that can be set up is the JDBC connection. If you choose JSP as your server platform, clicking the New button will show you a list of all of the available JDBC drivers on your system. If what you want isn’t displayed, you can choose Custom JDBC Connection for a blank configuration. Shown in Figure 8.6, this is the most complicated of the connection types. Borrowing a bit from the custom connection string, it allows you to specify the connection parameters that are needed to access a remote database.

Setting Up Macintosh and Windows Systems for Database Interaction

231

FIGURE 8.6 JDBC drivers are the least user-friendly to use.

As with the other types of connections, you need to define the name of the connection as UltraDev will see it. You’ll also need to set the username and password to access the data source. There are two new fields, however, that require some explaining: • Driver—Although the other types of connections require drivers, they are integrated into the system components. Java still behaves as an add-on to most operating systems, so you’ll need to explicitly tell the program what the driver is called. Java database drivers are implemented as Java classes that can run on any system (if implemented as 100% pure Java). For example, the name of the driver for the MySQL database that you’ll be setting up later is org.gjt.mm.mysql.Driver. If you have the documentation that came with your database server, and it supports JDBC connections, the driver should be very well documented. • URL—Roughly equivalent to the ADO connection string, the URL field sets where and how the connection is made. This is specific to the database, so you’ll have to check your documentation to figure out what you need to use. The URL for MySQL’s JDBC connection is structured like this: jdbc:mysql:// 192.168.0.1/ud1. Testing the Connection As a final test of a connection, you should verify that UltraDev really can talk to the database. The simplest (and most unexciting way) to verify a connection is by clicking the Test button in your connection configuration dialog box. If the test is performed correctly, you should see a “Successful” message on your screen, as shown in Figure 8.7. FIGURE 8.7 If everything goes well, the test will succeed!

8

232

Day 8

If your test is not successful, you will usually get a message describing exactly what went wrong. Common problems include Invalid usernames/passwords Incorrect hostname/IP addresses for remote DB servers Improper database names Invalid driver names Access blocked at the database server

Note

If you’re using an ODBC driver to make your connection and are getting a username/password error, be sure that ODBC DSN is set up correctly. You might have accidentally set the wrong name or password in the ODBC DSN configuration. If you’ve never set up an ODBC driver before, remember to take a look at the section on setting up ODBC drivers to work with MySQL, later today.

Hopefully, the test was completed successfully. If not, go through your settings and double-check them. If everything still looks okay, the problem might lie on the database server itself—especially if the database you’re connecting to is on a remote machine. Most database servers can deny access to users based on their IP addresses—in fact, the default state of most databases is to deny access to all users and then enable access when it is needed. It is likely that you will have to alter some settings on the database in order to connect. Running a Test Query Assuming that you did get the “Successful” message, you’re probably quite happy—but that little dialog box doesn’t really fill you with the kind of joy you were expecting, does it? If you want to really see that the database is connected, click OK to close the connection settings and Done to close the Connections dialog box. Next, create a new page in the document design view. You don’t need to add any content—but you do need to add a server behavior to verify that the connection is indeed active. 1. Open the Server Behaviors palette. 2. Click the + button to add a new behavior to your document. 3. Choose Recordset (Query) from the pop-up menu. 4. From the Connection pop-up menu, choose the connection that you just set up.

Setting Up Macintosh and Windows Systems for Database Interaction

5. Choose a table from your database in the Table pop-up menu. This table should already contain some data. 6. Finally, click the Test button. The recordset test, shown in an example run in Figure 8.8, gives a much more satisfying demonstration that your hard work has indeed paid off. FIGURE 8.8 Testing a recordset displays actual data from the database.

Hopefully, this should give you enough of an indication that things are indeed working. If not, skip ahead to tomorrow’s lesson.

The Java-ODBC Connection (Macintosh/Windows NT) Macintosh users have traditionally been without extensive database support. The Macintosh, although offering an ODBC driver manager, has not made very good use of it. Most people, in fact, are unaware that it even exists. This might all change with the introduction of Mac OS X, which already supports ODBC through the various existing UNIX incarnations. Fortunately, for those of us interested in using the traditional Mac OS to develop in UltraDev, there is a solution to the problem: a JDBC-ODBC bridge coupled with RmiJdbc. This software creates a Java link between two JDBC drivers. Coupled with a JDBC-ODBC driver on Windows NT, the Macintosh can use this driver to access data sources on NT. The Windows NT machine provides a translation service between the ODBC drivers available

233

8

234

Day 8

on the machine and the JDBC connection to the Macintosh. Any ODBC data connection that is available on the NT server is now available as a JDBC data source on the Macintosh. This can open up Macintosh ColdFusion and JSP development to almost any database, anywhere. Figure 8.9 shows a diagram of how the combination of drivers works. FIGURE 8.9

RMIJDBC

Mac OS

RMIJDBC

ODBC/ADO

Databases

The ODBC-JDBC driver provides a translation service so your Macintosh can talk to a wider variety of databases.

Windows NT/2000

Setting Up the Macintosh JDBC Client Driver Okay, let’s move on to the setup. In order to make this work, you will need an NT Server in addition to your Macintosh. You’ll also need these machines to be networked. Don’t worry if you only have an old Pentium 90 lying around. If you install NT, the machine will be able to handle the translation task. Set up the Macintosh side: Copy the RmiJdbc.jar file from the folder on your UltraDev CD to your Macintosh. Or, you might want to download the current RmiJdbc driver, in compressed format, from http://www.objectweb.org/RmiJdbc/rmijdbcDownload.htm

Note

Macromedia supplies a different download location for RmiJdbc in their documentation. The link they give is to a Macromedia-hosted copy of the driver. The link in this text is to RmiJdbc’s development homepage. You might want to check out this page regardless of where you get the driver— it includes helpful information on its use and development.

In case you’re wondering, this driver file is not a Macintosh-only file. You can use it anywhere that you want to have remote access to another JDBC driver (in this case, the Sun JDBC-ODBC driver).

Setting Up Macintosh and Windows Systems for Database Interaction

When the file is on your computer, you’ll need to install it in the appropriate location— the MRJClasses folder, within the System Folder:Extensions:MRJ Libraries path. See Figure 8.10 for a view of the installed driver. FIGURE 8.10 Install the RmiJdbc (and any other) JDBC drivers in the MRJClasses folder.

If this folder does not exist on your computer, you probably don’t have the correct version of the Macintosh Runtime for Java installed. This is easily remedied because the UltraDev CD-ROM includes a recent version of the MRJ. Alternatively, you could download the most up-to-date version from Apple at http://asu.info.apple.com/

After the .jar file containing the JDBC driver is installed in the correct folder, you should reboot your computer so that it will be recognized by the system. At this point, the driver is ready to use. When your machine has restarted, you can set up a connection based on the new RmiJdbc driver. Figure 8.11 shows a properly configured connection. FIGURE 8.11 Set up the RmiJdbc driver within UltraDev to gain access to the remote NT machine.

235

8

236

Day 8

The syntax for setting up the RmiJdbc driver is as follows—you’ll need to set your design-time options appropriately as we discussed earlier, but using these field values: Driver—RmiJdbc.RJDriver User Name—The username needed to connect to the ODBC data source on the remote Windows NT server. Password—The password needed to connect to the ODBC data source. URL—jdbc:rmi://
or hostname of remote NT

server>/jdbc:odbc:<Windows NT Data Source Name>

Note

Chances are, this is your first time using a JDBC driver on the Macintosh. If this is the case, you might look at the Driver field and think that this is a file located somewhere on your computer—but a quick Sherlock search of your hard drive will turn up nothing. The .jar file you installed earlier (Java Archive) contains a Java class or classes that make up the driver. When a JDBC driver name is requested by your computer, it searches the contents of the .jar files for the appropriate classes. This might be a bit different for you, but it works.

After you’ve set up your Macintosh, you’ll need to turn your attentions to the Windows NT computer that will handle the actual ODBC data source and make it available to your Macintosh. The NT Server portion is a bit more difficult to configure, so be patient if things don’t work the first time through.

Configuring the Windows NT JDBC-ODBC Server This section assumes that you are running an NT 4.0 server with at least SP4 installed. If you have just installed NT for the purpose of providing JDBC-ODBC support, make sure that you install the appropriate service packs before continuing. The first step in getting the NT computer to act as the bridge between an ODBC data source and a Macintosh running the RmiJdbc driver is to configure a working ODBC driver for the Windows computer. Developing this foundation before going any further is a wise move—an improperly configured ODBC data source can make life a nightmare when trying to debug a two-computer client/server jdbc/odbc system. If you’ve never set up an ODBC driver before, you might want to jump to “Setting Up an ODBC Data Source to MySQL” at the end of today’s lesson before continuing. The MySQL database is discussed, as is an ODBC connection to it.

Setting Up Macintosh and Windows Systems for Database Interaction

Second, you’ll need to install Java on your computer. This consists of nothing more than downloading the Java 1.1.8 installer from Sun at http://java.sun.com/products/jdk/1.1/jre/download-jre-windows.html

Note

Java 1.1.8 is the last release of the 1.1 Java implementation. If you have Java 2 (1.2) installed, or would like to use it instead, you should have no problems. 1.1.8 is the version of Java that is supported on all platforms (Windows/Macintosh/Linux). Version 2.0 is still experiencing growing pains, but will soon reach the level of maturity and installed user base of the 1.1.8 distribution.

After downloading Sun’s Java Runtime Environment, install it by double-clicking the installer icon and following the installer’s instructions. This will only take a few minutes and does little more than install the Java distribution in a folder on your Windows machine. Next, create a new folder on your computer for the RmiJdbc.jar file, such as C:\rmijdbc. Download the RmiJdbc driver from the ObjectWeb homepage at http://www.objectweb.org/RmiJdbc/rmijdbcDownload.htm. Alternatively, you can install the version that came with the UltraDev CD, or download it from Macromedia’s Web site. So many options exist… As a final setup step, you need to include the location of the RmiJdbc.jar file in NT’s environment variable. This enables the Java runtime environment to find the .jar file and execute the RmiJdbc server class contained in it. This set is equivalent to placing the .jar file in the MRJClasses folder on the Macintosh. The difference here is that NT’s Java allows you to put Java classes in any directory as long as they are included in the CLASSPATH variable. The Macintosh, by default, just looks in the MRJClasses folder. CLASSPATH

To set the CLASSPATH on your NT server, follow these steps: 1. Right-click the My Computer icon. 2. Choose Properties from the pop-up menu. 3. Click the Environment tab. If you are running Windows 2000, click the Advanced tab and then the Environment Variables button. 4. Scroll through the list of System Variables, looking for CLASSPATH. Click it if you find it. The name CLASSPATH should appear in the Variable field near the bottom of the dialog box.

237

8

238

Day 8

5. If CLASSPATH is not a current system variable, enter it into the Variable field. If you are running Windows 2000, click the New button and name the variable CLASSPATH. 6. Edit the Value field to include the path of the RmiJdbc.jar file. For a newly defined CLASSPATH, you’d just type C:\rmijdbc. For an existing CLASSPATH, you can append it to the end of the other paths by typing a semi-colon (;) and then the path. 7. Click the Set button, or OK in Windows 2000. The CLASSPATH variable you just created or modified should show up in the list of system variables. Figure 8.12 shows the CLASSPATH variable and its value after being set. FIGURE 8.12 Set the CLASSPATH variable so that Java can find the RmiJdbc file.

Before you exit the system properties, you might also want to add the path of the Java runtime environment’s bin directory to your computer. If you don’t set this value, you’ll need to run Java by giving the complete path to the executable. Depending on where you installed Java, this might be something similar to: c:\jdk1.1.8\bin. Follow the same steps you used for editing the CLASSPATH, only this time edit the PATH variable and append the Java path to the end of the existing path (There will be a PATH system variable—you won’t need to create a new one). Remember to click Set to commit your changes. When you finished making all the updates to the System properties, click OK to close the dialog box, and then reboot your computer so that the changes can take effect. After your computer restarts, you can initiate the RmiJdbc server. Open up a command prompt on your computer, and type the following: java RmiJdbc.RJJdbcServer sun.jdbc.odbc.JdbcOdbcDriver

Setting Up Macintosh and Windows Systems for Database Interaction

239

The server will start with little fanfare. It isn’t much to look at, but it works. After the server is running, you can go back to your Macintosh and define a connection to any ODBC data source on the NT server. The RmiJdbc driver will talk to the RmiJdbc server on the NT machine, which, in turn, will communicate with the ODBC data source. The problem with this setup, although it works, is that every time you close the command prompt or reboot your computer, you’ll need to restart this process. This doesn’t work very well if you are using this computer in a production environment and need 24/7 access to the database. There is, however, a way that you can install the RmiJdbc driver as a service under NT. Running as a service, the RmiJdbc server will automatically be restarted every time you reboot your computer and will run in the background, without a need for the command line window. The original instructions for setting up RmiJdbc to run as a service were submitted by users of the RmiJdbc Web site. I have modified those instructions for this application and am providing them here. For further help, be sure to check out the ObjectWeb Web site: http://www.objectweb.org/RmiJdbc/.

Setting RmiJdbc Server to Run as a Service In order to run RmiJdbc as a service, you will need the SRVANY.EXE executable that comes with the NT resource kit. The assumption is made that SRVANY.EXE is installed in the C:\TOOLS directory. After installation, follow these steps: 1. Run INSTSRV RmiJdbc C:\TOOLS\SRVANY.EXE. 2. Click Start, and choose Run. 3. Type regedit to start the registry editor. 4. Create a new registry key: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\ Services\RmiJdbc\Parameters. 5. Under that key create a new entry named Application of the type REG_SZ and give it a value of a command file that will contain parameters for RmiJdbc, such as C:\rmijdbc\rmijdbc.cmd. 6. Close out of the registry editor. Now you need to create the C:\rmijdbc\rmijdbc.cmd file that contains the script to start the RmiJdbc server. A sample script follows this paragraph. This script assumes that you configured the CLASSPATH appropriately, and that you’re running Java from the C:\jdk1.1.8\bin directory. Be sure to modify the paths to match your system. @echo off c:\jdk1.1.8\bin\java RmiJdbc.RJJdbcServer sun.jdbc.odbc.JdbcOdbcDriver > ➥ c:\rmijdbc\rmijdbc_server.log

8

240

Day 8

As a final step, you should set the new service to start up each time you boot your computer: 1. Click Start. 2. Choose Settings, Control Panels from the submenu. 3. Open the Services control panel. 4. Find the RmiJdbc service in the listing and select it. 5. Click the Startup button to define how the service is started. 6. Choose Automatic. 7. Close the services control panel, and then reboot your computer. 8. The new service should automatically start when the computer finishes booting. There is no need to log in or manually start the process. After all that, you are ready to continue using your Macintosh. Although this setup might seem like a lot of work, it only requires that you install software that is easily obtained and apply settings similar to those needed for any other remote database connection. Using this arrangement, you can provide almost all the same connectivity options to Macintosh owners that exist for Windows users.

Setting Up MySQL Today’s final section deals with setting up the MySQL database. MySQL is an Open Source database system that conforms to much of the SQL specification. It does not support several useful features of UltraDev, such as Views or Stored Procedures, but it is very fast, very stable, and quite popular for Internet applications. An appealing feature of MySQL is that it is available for multiple platforms, and, being Open Source, can be compiled on other platforms free of charge. (The Windows binary version of MySQL, however, is shareware.) Let’s look at how to configure MySQL on Windows, and then how configure it to run on a Unix (Linux) machine.

Setting Up MySQL for Windows The MySQL server will actually run just fine under Windows 95/98, as well as NT. If you plan to use the software for any sort of serious serving, however, NT is a better choice for deployment. Under NT, MySQL can be installed as a standard service. Installing MySQL only takes a few easy steps on Windows because the software is available in binary form: 1. Download the latest MySQL Win32 release from http://www.mysql.com/. The release might lag slightly behind the Unix version—check back occasionally for new releases.

Setting Up Macintosh and Windows Systems for Database Interaction

241

2. Unzip the distribution archive. 3. Run the setup application. 4. Follow the onscreen instructions for the installation. After the install is completed, you’ll be ready for business in a few minutes. Open the installation directory. You’ll need to find the directory on the installation drive—it is not included in the Start menu’s program groups. The mySQL directory is divided into several components, the one that you’ll want to work with is the bin directory. Inside bin, you’ll find several applications that you’ll need to use to control MySQL. The two that will come in most handy are mysqld and mysql. MySQL is a client/server program. Even when it is running on your desktop computer, it still needs a client to communicate with and control the server. The mysqld program is a faceless server. The mysql executable is the client. To start the server, just start the appropriate version of mysqld. A version called mysqld-shareware will run on your 95/98 desktop. If you’re using NT, you’ll want to opt for the mysqld-nt. version. Double-clicking the application icon will start the server, but the server will immediately disappear. This doesn’t mean it has stopped—it’s placed itself in the background. If you’re running NT, you’ll want to install MySQL as a service. To do this, invoke MySQL like this: C:\mysql\bin\mysqld-nt –install

This, of course, assumes that you installed MySQL in C:\mysql—adjust your paths appropriately. Make sure that you set up the newly installed MySQL service to start up automatically. See the section “Setting RmiJdbc Server to Run as a Service” for more information on how to configure a service.

Setting Up MySQL for Unix Systems To set up MySQL for a Unix system, you need to get your hands a little bit dirty. If you have a Red Hat Linux system, you can just download a RPM and use the point-and-click Red Hat tools to install it. For other systems, you’ll either need to find a precompiled binary or compile the source code yourself. If you find yourself in this situation, the first step is to download the source code from http://www.mysql.com/downloads/.

8

242

Day 8

Next, untar and unarchive the source code. The version of MySQL I’ve downloaded is mysql-3.23.21-beta.tar.gz—this was the latest version of the database server at the time of this writing. [jray@contempt mysql]$ tar -zvxf mysql-3.23.21-beta.tar.gz mysql-3.23.21-beta/ mysql-3.23.21-beta/Makefile.in mysql-3.23.21-beta/README mysql-3.23.21-beta/stamp-h.in mysql-3.23.21-beta/COPYING mysql-3.23.21-beta/COPYING.LIB mysql-3.23.21-beta/Makefile.am mysql-3.23.21-beta/acconfig.h mysql-3.23.21-beta/acinclude.m4 ... mysql-3.23.21-beta/support-files/my-huge.cnf.sh mysql-3.23.21-beta/support-files/mysql-log-rotate.sh mysql-3.23.21-beta/support-files/mysql.server.sh mysql-3.23.21-beta/support-files/binary-configure.sh

| more

Now, run the configure program to create a Makefile for your system. This will collect information about your computer and could take several minutes to complete. creating checking checking checking .. creating creating creating creating creating creating ...

cache ./config.cache host system type... i686-pc-linux-gnu target system type... i686-pc-linux-gnu build system type... i686-pc-linux-gnu sql-bench/Makefile tests/Makefile Docs/Makefile support-files/Makefile include/mysql_version.h config.h

After the configuration has finished, it’s time to compile the software. Type make to begin the process of compiling (this will take some time): [jray@contempt mysql-3.23.21-beta]$ make make all-recursive make[1]: Entering directory ‘/home/jray/mysql/mysql-3.23.21-beta’ ... binary-configure.sh > binary-configure-t /bin/mv binary-configure-t binary-configure make[2]: Leaving directory ‘/home/jray/mysql/mysql-3.23.21-beta/support-files’ make[2]: Entering directory ‘/home/jray/mysql/mysql-3.23.21-beta’ make[2]: Nothing to be done for ‘all-am’. make[2]: Leaving directory ‘/home/jray/mysql/mysql-3.23.21-beta’ make[1]: Leaving directory ‘/home/jray/mysql/mysql-3.23.21-beta’

Setting Up Macintosh and Windows Systems for Database Interaction

The installation process is equally simple. Just type make

install:

[jray@contempt mysql-3.23.21-beta]$ make install Making install in include make[1]: Entering directory ‘/home/jray/mysql/mysql-3.23.21-beta/include’ make[2]: Entering directory ‘/home/jray/mysql/mysql-3.23.21-beta/include’ make[2]: Nothing to be done for ‘install-exec-am’. /bin/sh ../mkinstalldirs /usr/local/include/mysql mkdir /usr/local/include .. make[2]: Nothing to be done for ‘install-data-am’. make[2]: Leaving directory ‘/home/jray/mysql/mysql-3.23.21-beta’ make[1]: Leaving directory ‘/home/jray/mysql/mysql-3.23.21-beta’

Now, start the server. After it is installed (in /usr/local/bin by default), you can start the server by typing: [jray@contempt mysql-3.23.21-beta]$ /usr/local/bin/safe_mysqld &

Obviously, you’ll want to create a startup script to handle loading mysql when your computer boots. Doing so is beyond the scope of this text—you should check out the MySQL documentation and a good Linux book, such as Using Red Hat Linux (ISBN: 0-7897-2258-5).

Testing the MySQL Server To test the MySQL installation (on Windows and Unix), you’ll use the mysql program to connect to the database server. After installation, you can use this program to connect to the mysql database that is already set up on the system. This database includes several tables used to control remote access to the database server. You should refer to the mysql database documentation for a complete description on the configuration. You can run through this command sequence (on Windows or Unix) to test the basic functionality: [root@pointy jray]# mysql mysql Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 12 to server version: 3.22.32 Type ‘help’ for help. mysql> show tables; +-----------------+ | Tables in mysql |

243

8

244

Day 8

+-----------------+ | columns_priv | | db | | func | | host | | tables_priv | | user | +-----------------+ 6 rows in set (0.05 sec) mysql> quit Bye

This sequence connects to the mysql database (an internal database used to control access privileges) and shows the available tables. Although not overwhelmingly exciting, this demonstrates that the server is up and running. Further tests and documentation can be found at http://www.mysql.com/.

Setting Up an ODBC Data Source to MySQL In order to set up an ODBC driver for mySQL, you need to download the MyODBC driver from http://www.mysql.com/downloads/api-myodbc.html. Many different versions of MyODBC are available—be sure to pick one of the full setup versions targeted for your system (Windows 95/98 or NT). After you’ve downloaded the ODBC driver, run the included install program: 1. After the Welcome screen, click the Continue button. 2. At the Install Drivers screen, shown in Figure 8.13, be sure to highlight the MySQL driver. If you don’t, it won’t be installed. Click OK. FIGURE 8.13 Be sure to select the MySQL driver; otherwise it won’t be installed.

3. After the driver has installed, it will prompt you to set up a new ODBC data source. You can safely cancel out of this process. We’ll look at setting up one using the normal process.

Setting Up Macintosh and Windows Systems for Database Interaction

Note

If you get an error message telling you to reboot and try again, you probably need to adjust the installation process a bit. Click the Advanced button on the Install Drivers screen, choose Do Not Install Driver Manager, and then click OK. This seems to cure any installation problems.

After the driver is installed, you can set up a data source at any time by following these instructions. You don’t need to reboot after setting up a data source. 1. Click Start. 2. Choose Settings, Control Panel from the submenu. 3. Double-click the ODBC Data Sources control panel in Windows 9X/NT. In Windows 2000, click Administrative Tools and then Data Sources (ODBC). 4. Click the System DSN tab. 5. Click Add. 6. Choose the MySQL driver from the list, and then click Finish. 7. Fill in the appropriate information for the driver configuration, shown in Figure 8.14. Then click OK. Your data source is ready to use. FIGURE 8.14 Set up a few fields, and you’re connected to the database.

Figure 8.14 shows a configuration for one of the test databases I’ve used while writing the book. The fields are defined here: • Windows DSN name—The data source name is an arbitrary name that you will use to refer to the data source.

245

8

246

Day 8

• MySQL host—The hostname of the database server. • MySQL database name—The name of the database on the mySQL server. • User—The username to connect to the mySQL server with. • Password—The password for the database, if any. • Port—Unless you’ve modified your mySQL networking parameters, you can leave this field blank. • SQL command on connect—A command to be executed on the server after a connection is made. If you’ve properly configured a connection to the mysql database, you can immediately start using it. A quick and easy way to test a connection is by using MS Access, or another product to connect to a table.

Note

Did you notice the myriad of options that you can set for myODBC? You don’t need to modify these in order to use the ODBC driver. If you’re interested in what they do, read the documentation that came with the MySQL server.

Setting Up an ODBC Data Source to Microsoft Access Many users will have Microsoft Access already installed on their computers and can use it for their UltraDev connections. As with MySQL, you can set up an Access-specific ODBC driver and use it within UltraDev. If MS Access is on your machine, the ODBC driver should be ready to use. 1. Click Start. 2. Choose Settings, Control Panel from the submenu. 3. Double-click the ODBC Data Sources control panel in Windows 9X/NT. In Windows 2000, click Administrative Tools and then Data Sources (ODBC). 4. Click the System DSN tab. 5. Click Add. 6. Choose the Microsoft Access driver from the list, and then click Finish. 7. Fill in the appropriate information for the driver configuration, shown in Figure 8.15. Then click OK. Your data source is ready to use.

Setting Up Macintosh and Windows Systems for Database Interaction

247

FIGURE 8.15

8

Setting up an Access database for ODBC access really requires nothing more than a data source name and a database file.

Figure 8.15 shows a sample Access Database ODBC connection: • Data Source Name—The data source name is an arbitrary name that you will use to refer to the data source. • Description—A basic description of the purpose of the connection—this is for your use and will not be needed by UltraDev. • Database—Click the Select button to choose an existing database. You can use the other buttons (Create, Repair, and Compact) as you would within Access—they are not related to the function of the ODBC driver. • System Database—If you are sharing a database among multiple users, contact your network administrator for information on configuring this option; otherwise, leave it blank. If you attempt to configure the driver according to these instructions and do not see an Access ODBC driver, you can load it from your Microsoft Office CD-ROM. As with the MySQL driver, as soon as you’ve set up the Access driver, the data source should be immediately accessible in UltraDev.

Caution

MySQL instruction is provided here as a training tool, and as a way for almost any user on any platform to be up and running with a free database system almost instantly. For advanced applications, a database such as PostgreSQL (http://www.postgresql.com/) or Microsoft SQL server supports additional features within UltraDev. While it might be tempting to use Microsoft Access for your database server, you’ll find that consumer systems are very limited in the number of simultaneous users they can support. After all, if Access could do everything that MS SQL server can, what would the point be in even considering something else? On the other hand, Microsoft Access makes an excellent design time tool that can be used to create a working system that is then deployed on a larger-scale SQL server solution.

248

Day 8

Summary Today’s lesson covered setting up connections to the databases that will drive your dynamic UltraDev sites. You can connect to databases either locally or through your deployment application server. Three different technologies you can use to connect to a database are ADO/ODBC, ColdFusion, and JDBC. Starting in UltraDev 4.0, Macintosh users can use all these connection types, but must connect directly through the Application server. The exception to this is when using JDBC or advanced ColdFusion configurations. Both of these connection types offer Mac users the ability to connect using JDBC drivers. If you are using a Macintosh and feel as though your options are limited, you can use the RmiJDBC driver and server to expand your connectivity options. Coupled with an NT machine, RmiJDBC creates a bridge between the ODBC drivers on the NT server and a JDBC driver on the Macintosh. To round out the information presented today, MySQL was introduced. MySQL provides a stable and extremely cost-effective database server that you can use with UltraDev. It doesn’t support all the features of advanced servers, but it is extremely fast and is well suited to Internet applications. Keep in mind, however, that not all the examples in this book can be easily completed without additional functions.

Q&A Q What databases can be used with UltraDev? A Almost any modern database includes both ODBC and JDBC drivers—even Microsoft’s SQL server. You’ll have no problem finding a way to connect to almost any database. Q How can connections be transferred between computers? A Connections are stored directly with the site files in a Connections directory. Any user who defines his site using the same parameters will have access to the same connection definitions. Earlier versions of UltraDev stored the connection information in the connections.xml file, which was located in the Connections folder within the Configuration folder. If you are using UltraDev 1.0, you can copy this file between different computers so that they all share the same connection information. Q Why can’t you use a JDBC drivers from within ASP? A ASP does not natively support JDBC drivers. Although it’s possible to provide a workaround, UltraDev only supports generating straight ADO ASP code.

Setting Up Macintosh and Windows Systems for Database Interaction

249

Q What functions aren’t supported in MySQL that I might need? A The primary missing functions are views and stored procedures. For complex applications, you’ll probably want a database that does support these functions, or you can edit the auto-generated server code to add the functionality you need.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What database connection types are available? 2. How can Macintosh users access ODBC-based data sources? 3. What systems does MySQL work on? 4. What happens if you don’t run RmiJdbc as a service? 5. Where do you install JDBC drivers on the Macintosh?

Exercises 1. Try setting up a connection to a database and testing it with the techniques discussed today. 2. Set up the MySQL database on your server computer and give it a whirl. Although SQL hasn’t been covered yet, you can use the sample code from Day 6, “Introduction to Dynamic Web Applications and Database Design,” to test its functionality. The commands to create a functional database are given in the text. After a database is created, link to it using the MyODBC driver.

8

WEEK 2

DAY

9

Introducing the UltraDev Dynamic Tools Whether you’re used to database design, are an expert with Dreamweaver, or can create a custom MS Access or Filemaker application in the blink of an eye, you’re still going to need to take some time to get used to the tools that UltraDev uses to keep track of dynamic data. Macromedia has done an excellent job of providing an interface that merges traditional database tools into a Web-centric authoring environment. Today, you will learn • The UltraDev terminology for connecting to databases, making queries, and displaying results. • The purposes of the server behavior and data binding palettes. • How to work with the supplied tools efficiently and choose the right techniques for your authoring style.

252

Day 9

Traditional Databases on the Web Traditional database systems are slightly different from Web-based databases. You have instant access to the data and full control of the flow that the application takes. As you’ve already learned, the Web is a stateless environment. It does not remember what you’ve done from one moment to the next. In order to fully use the UltraDev environment, you must understand the use and limitations of the UltraDev dynamic authoring tools. This chapter serves to introduce you to these concepts and reinforce some things that you’ve already learned. Although most of this information is covered in detail in other chapters, I think you’ll appreciate this overview of the technologies used to create a dynamic site in UltraDev. After reading yesterday’s lesson, you should be able to make a database connection and follow along. In Week 1, you learned about the tools available for static sites; today you’ll learn about the tools used in dynamic Web sites. If you’ve used MS Access or many other desktop database systems, you should recognize some of the constructs that UltraDev uses to represent data within the system. Three primary tools can be used to get your database from the desktop to the Web.

Connections Connections were introduced in Day 8, “Setting Up Macintosh and Windows for Database Interaction,” and are used to connect both UltraDev and the application server of your choice to a database server. Connections operate on a site-wide basis and are specific to the projects that you create. The data for connections are stored in the Connections folder within your site directory. Because connections are stored with the site, this means that they are available on any machine where the site has been defined with the same parameters. Additionally, there is a Connections.xml file within the Connections folder of the UltraDev Configuration directory. You can add entries to the end of the file that will help define your drivers so that you don’t have to retype them each time you enter a new database. Yesterday you learned about setting up JDBC drivers—and you probably noticed that there is a ton of nontrivial typing you need to do. To eliminate this typing, you can add a driverinfo entry that contains the default values for a particular driver. For example, take the following JDBC driver: MySQL JDBC Driver Class Name—”org.gjt.mm.mysql.Driver” Access URL—”jdbc:mysql://[hostname]:[port]/[database]”

Introducing the UltraDev Dynamic Tools

253

Using this information, you can create a driverinfo object in the Connections.xml file:

In order to access the tools that are discussed in the rest of the chapter, you’ll need to have a database connection in place.

Server Behaviors After you’ve created a database connection (see Day 8), the next step in creating a dynamic site is setting up a server behavior to work with the connection. Server behaviors are added and manipulated using the Server Behaviors palette, shown in Figure 9.1. FIGURE 9.1 The Server Behaviors palette is used to add and edit existing behaviors.

You can think of the Server Behaviors palette as a more advanced version of the standard behavior palette that you’ve used when creating standard HTML pages. The difference is that, instead of relying on the client program to execute the behavior, it is executed on the server. This means that you’re no longer relying on unreliable technology such as JavaScript to power the pages; you’re using the processing power of your server to add dynamic functionality. This has advantages as well as a few drawbacks. The biggest advantage is that no matter what you program using server behaviors, your server will operate on any browser platform, regardless of whether it has JavaScript turned on. As long as your server is configured correctly, you can author dynamic applications without the need to worry about the deployment platform.

Note

Server behaviors aren’t always client independent. If the server behavior relies on cookies, they must be enabled in the client browser. This, however, is more reliable than a JavaScript-based solution.

9

254

Day 9

Server behaviors are code fragments that UltraDev uses to construct a working program. These are prewritten pieces of ASP, JSP, and ColdFusion code pieced together so that the end result is a complete working section of embedded code. If you’re interested in seeing how these puzzle pieces are put together, look in the ServerBehavior and Commands folder of the Configuration directory. You’ll see many different files representing all the different server actions. Written in JavaScript, these routines drive everything that UltraDev does. For example, take a look at this snippet of the Recordset.js file: // Copyright 2000 Macromedia, Inc. All rights reserved. //*************** GLOBALS VARS ***************** var helpDoc = MM.HELP_ssAdvancedRecordset var SP_Mode = false;

//Since we have different formatting behavior based // on whether the object is a stored proc or not, // we use this as a switch to keep track of what’s // the current selection.

//The following constants and vars are used to build up the SQL statement. var CONST_SELECT = “SELECT”; var CONST_FROM = “FROM”; var CONST_WHERE = “WHERE”; var CONST_EQUALS = “=”; var CONST_ORDERBY = “ORDER BY”; var var var var

var_select = “*”; var_from = “”; var_where = “”; var_orderby = “”;

var gSimpleParamName = “MMColParam” var ERROR_MESSAGE = “”; …

As you can see, the code files set up the functions that the server behavior will use to generate the SQL code. Although I don’t recommend that you make extensive program changes, you can edit these behavior files to include your preferred defaults. For example, in the code fragment listed here, you could change the default commands that are sent to the database server. If you search further through the code files, you can find the code that is actually inserted into the HTML code. If you edit these files, however, understand that the stress-tested Macromedia code will no longer be used in your final applications. If you’re an experienced programmer, you probably won’t care about this.

Introducing the UltraDev Dynamic Tools

255

If you’re a beginner, think of changing the code as “voiding your warranty”—it will become extremely difficult to find other UltraDev users who will be able to help you. So, what are the server behaviors, and what can they do for you? Let’s look at the most common behaviors and what they’ll do in your programs.

Standard Server Behaviors At a basic level, UltraDev’s dynamic database connectivity is really very simple—it lets you display and change information in a database. Five master features are supplemented by a handful of other simple behaviors that are described in the following sections.

Recordsets A recordset is a construct that represents all the records returned after the database is queried. Within UltraDev, you define a recordset by supplying the application with the SQL code that you want it to execute, and then sit back and let it do the work. Although a recordset can contain multiple records, only the first record is accessible after the recordset is created. In order to access other records, you’ll need to use server behaviors that operate on the recordset that you’ve defined. Two modes of recordset definition exist—the most basic is the simple query, shown in Figure 9.2. FIGURE 9.2 A simple query is used for noncomplex recordsets.

The simple query is used to select a group of records from a database table with as little work as possible. You can use this mode of the recordset creation to select records based on parameters passed in the URL line and sort the final query using a column in the table. Simple mode constrains you to automatically generated SQL statements. Sometimes, however, this isn’t enough to work with. By clicking the Advanced button, you can switch to a far more flexible recordset creation window, as seen in Figure 9.3.

9

256

Day 9

FIGURE 9.3 Advanced queries give much greater control over the application.

From the advanced recordset creation screen, you can enter SQL queries directly into the server. This is the only mode in which you can truly harness the power of your database server. Here you can access tables, views, and stored procedures. It also introduces the UltraDev query variable. Query variables are a way of attaching outside information—such as request values, cookies, and session variables—to a local variable within UltraDev that can be used within a query. Impossible in the simple query, these UltraDev creations let you include outside data within an SQL query. UltraDev query variables are defined by clicking the + button and adding specifying a variable name, default value, and a runtime value: variable name—The name of the UltraDev variable that will be taking on dynamic data. You should use this variable within single quotes to add its value to the SQL view. default value—A default value can be set for each variable so that if dynamic data isn’t available, it takes on the default value. This is useful for making certain that a query always runs, regardless of whether a user supplied the appropriate information. Run-time value—The value that the variable will take on with the application is run on the server. A runtime value is usually set to the value of a form variable, or another piece of dynamic data.

Introducing the UltraDev Dynamic Tools

Caution

Be careful of the default values that you define. Default values are extremely nice in the Live Data view because they let you see the results of an actual query without the need to simulate user input. Unfortunately, it’s all too easy to set a default value and forget it. For example, assume that you’re designing a login screen with a query to look up a username and password to verify that they exist. If you set default values username and password variables, the user might just be able to submit an empty form and log in. The default values will be substituted into the lookup because the values she submitted were empty.

If you plan on implementing anything complicated within UltraDev, such as searches or other queries that process user input, you’ll be using UltraDev’s query variables. After defining a recordset, you can test the query in real-time by clicking the Test button.

Insert Record Adding information to a database is accomplished through the Insert Record server behavior. This behavior takes the result of an HTML form and inserts it into a table within a database connection that you have defined. This function only operates on an HTML form—but with some creative programming, you can use this for more than just asking a user to type in some information. Later in the book, you’ll use an Insert Record behavior to add items to your database shopping cart. Before you can insert, update, or delete records in a database table, you must define a form within your Web pages. Each of these server behaviors is triggered from the input of a form. Figure 9.4 shows the Insert Record behavior configuration screen. FIGURE 9.4 The Insert Record behavior stores data from an HTML form into a database table.

257

9

258

Day 9

Note

Although we aren’t really creating a Web application, you can view these server behaviors if you add a form to an empty document. I highly recommend that you follow along so that you can see the server behavior screens on your copy of UltraDev.

The Insert Record behavior configuration is similar to most of the server behaviors, in that it requires you to set a connection and a table to operate on. After that, it requires a bit of explanation: Form—Because a page can have multiple forms, you’ll need to tell UltraDev what form will be supplying the information for the database table. You must be sure that the form contains all the fields necessary to fill the table, however. Form Elements—All the Form fields are shown in the Form Elements list. In order for UltraDev to match up the elements of a form with their database counterparts, you must click through the list of elements, and then use the first Column pop-up menu to choose a database column, and the second pop-up to set the type of data (Text/Numeric) that the field will be returning. Go To URL—After data has been inserted into the database, the server behavior will redirect the user’s browser to a new page. This is the URL that she should be sent to. Yes, you can send the user back to the same page. You’ll find that the other database-access behaviors bear a striking resemblance to the Insert Record behavior.

Update Record Although it might seem as if an Insert behavior is identical to an Update, they’re two very different behaviors. In order to update information in a database, you must use the Update Record server behavior rather than Insert Record. This server behavior’s setup screen is shown in Figure 9.5. The similarities between the Insert and Update server are obvious—in fact, they’re virtually identical. There are, however, two new values you’ll need to set above and beyond an Insert Record behavior: Select Record From—Unlike an Insert, an Update must operate on an existing record. Where do we get records? From recordsets. The Select Record From field chooses the recordset that contains the record you want to update.

Introducing the UltraDev Dynamic Tools

259

Unique Key Column—The unique field that identifies the record being inserted. Unfortunately, UltraDev only supports single value primary keys, so you’ll have to take this into consideration during your database design. If you want to learn more about keys, Day 6, “Introduction to Database-Driven Sites,” is the place to be. FIGURE 9.5 Updating a record changes an existing database value—it does not add a new one.

9

Advanced Technique:

REPLACE INTO

Some database servers support a REPLACE INTO statement instead of the INSERT INTO that is used by default in the Insert Record server behavior. REPLACE INTO operates exactly the same as the INSERT command, but replaces any existing data in the database if there is an overlap. If you use the REPLACE INTO command in place of the INSERT INTO function, you can just re-insert data into the database without having to worry about the Update behavior. Although I don’t use this technique in the examples (because it isn’t widely available), you might want to give it a try if your server supports it. If you’ve decided to deploy on MySQL, you’ll be happy to know that you have access to this function. To change the Insert Record server behavior to REPLACE INTO, you must edit the Insert Record.js text file within the ServerBehaviors folder in Configuration. The file is divided into four parts—ASP (JavaScript), ASP (VBScript), JSP, and CFML. Open the file and find the section you’re looking for. For example, the ASP VBScript code section that you’re looking for begins as follows: //*********** ASP *************** var WGHT_AspEditMain

= 20;

//*** ASP/JavaScript ***

260

Day 9

var PREP_AspJsEditMain = “MM_insert”; var PATT_AspJsEditMain = ‘Request\\([\’”]MM_insert’; var MASK_AspJsEditMain = “”+

Within this section of code, there is a single line of code that creates the SQL statement: “ var MM_insertStr = ‘insert into ‘ + MM_tableName + ‘ ➥(‘ + MM_tableValues + ‘) values...

To make UltraDev start using this server behavior, simply replace the “insert statement with the “replace into” code:

into”

“ var MM_insertStr = ‘replace into ‘ + MM_tableName + ‘ ➥(‘ + MM_tableValues + ‘) values...

The revised server behavior should be immediately available. You won’t notice any difference when adding server behaviors, but the Insert Record behavior will use the new code in place of the UltraDev-supplied behavior.

Note

If you change a server behavior, don’t expect all your existing code to be automatically updated. The behaviors are stored within each page of the Web site. In order to update the code within the document, you either need to do it by hand or delete the existing server behavior from your document and re-insert it.

Delete Record The final behavior of the “big four” is the Delete Record behavior. Because you can add information to the database, you should also have the ability to delete it. This server behavior does just that. Nothing more. Nothing less. Figure 9.6 shows the Delete Record behavior’s configuration. FIGURE 9.6 The Delete Record behavior deletes records upon submitting a form.

Introducing the UltraDev Dynamic Tools

261

The configuration of the Delete Record behavior is a combination of the other behaviors— you should have no trouble with it.

Command The catch-all server behavior is the Command behavior, which is shown in Figure 9.7. This behavior lets you execute a stored procedure or straight HTML and return a recordset (if necessary). What makes this different from other behaviors is that it includes the capability to tie the behavior to UltraDev variables in ways that are otherwise impossible. FIGURE 9.7 The Command behavior lets you execute stored procedures or other pieces of SQL on the server.

When defining a command, you’ll recognize that it is very similar to the Insert Record and Recordset behaviors. After naming the command, you must choose the type—either one of several standard SQL commands (Insert, Update, and so on) or a stored procedure. If a recordset is returned after the command is executed, you must click the Return Recordset Named check box, and choose a name for the new query. To make this tool even more flexible, you can use the UltraDev variables in the same way as a standard recordset. This means that you can use session data, cookies, or anything you want inside the body of the command. Unlike the standard Insert behavior, a Command behavior can take URL parameters and other pieces of data and use them in an INSERT statement. If you’re interested in one of the more advanced features of the UltraDev authoring environment, this is it. Coupled with Day 12, “Writing Advanced Database Queries,” this behavior can be used to directly access your database and its commands.

9

262

Day 9

The Online Difference Assuming that you’ve worked with databases before, you’re probably saying to yourself “sounds just like a normal database, so what’s the big deal?” The difference between a traditional database and these server behaviors is that the action is not immediate. Each time you use a server behavior, it is expecting information from a Web page, and it uses that information to execute the server behavior. What makes this confusing is that the code for each server behavior is stored in the page that is submitting the data—even though that page is not likely to be the page displayed after the behavior is executed. Here’s how it works: 1. An HTML page is created that will feed information from a form to the database. This information can be a record number to delete, information to insert, and so on. 2. A server behavior to work with the data is inserted into the document. This is typically one of the Insert, Update, or Delete behaviors. 3. The behavior is configured to redirect the user’s browser to another Web page after it is executed. 4. The Web page is deployed. 5. When the user browses the page, she fills out the form and clicks submit. 6. The form submits the data back to the same page that contains the server behavior, which is then executed. 7. After finishing, the behavior redirects the browser to another page, or even another Web site. Hopefully that helps clarify things a little bit. It’s a somewhat bizarre sequence of events, but it is the model you need to become accustomed to in order to author effective multipage sites. Not all server behaviors, however, store information in a database, or redirect the user to a separate Web page. Let’s take a look at some of the other behaviors you’ll need for your applications.

Additional Server Behaviors Displaying and modifying information in a database is the primary purpose of UltraDev. Using the four primary server behaviors that we’ve discussed is a good start, but not enough for a significant Web application. For example, the recordset that we’ve defined contains 20 records—so how can we display all of them on the screen?

Introducing the UltraDev Dynamic Tools

263

Better yet, what if the recordset contained 2,000 records? How can we give the user access to all the records without dumping 2,000 entries to a single HTML page? Everything you need to solve these problems (and several others) is covered by a series of additional server behaviors that work with the recordset data to alter and control its display.

Repeat Region The Repeat Region server behavior operates as a loop over a recordset. You can use this to display multiple records within a recordset—as many as are available, or limited to a certain number. The behavior doesn’t just repeat field values, but everything that falls within a region. For example, fields from a database are typically displayed in a table to keep them aligned. To use the Repeat Region behavior in this manner, you would add the fields you want to repeat to a row in a table, and then select the row and apply the behavior. All the data in the design view that you’ve selected will be repeated over the range of records you’ve chosen to display. Figure 9.8 shows the Repeat Region server behavior configuration screen. FIGURE 9.8 The Repeat Region behavior is used to display multiple different records.

After selecting a region of text to repeat, you will need to set the recordset that you will be looping through, as well as the maximum number of records to display.

Move To Most people don’t want to display 5,000 records on a screen. In fact, most people probably don’t want to display more than 10 or so pieces of information. If you limit the number of records displayed based on the Repeat Region behavior, you’ll also need some way to provide Next and Previous links to display additional information in the database. The Move To series of behaviors can be employed to provide navigation within an existing recordset. These behaviors are found under the Move To submenu of the Server Behavior palette: Move To First Record—No matter what record was last displayed, this server behavior will move just to the start of the recordset.

9

264

Day 9

Move To Previous Record—Move backward through a recordset. If you want to move back to a previous screen of records, use this behavior. Move To Next Record—Similar to the previous record, this behavior advances the recordset one page forward. Move To Last Record—Jumps to the last record in the recordset. Between the Move To First Record and Move To Last Record behaviors, you can quickly provide your users a way to navigate from one end of a database to another. Move To Specific Record—Rather than moving relative to the current record, the Move To Specific Record behavior moves a record based on an identifier that you supply in the URL.

Note

It’s important to realize that these behaviors operate on a specific recordset, not a complete table in the database. If you use the Move To Next Record behavior, for example, the next record might not be the next record in the database table—but it is the next record within the recordset.

The Move To behaviors all feature the same basic configuration—choose a recordset and a link that will activate the server behavior, and you’re in business. Figure 9.9 shows a properly configured behavior. FIGURE 9.9 The Move To behaviors take a link and a recordset, and then move within a defined recordset.

Show Region Although not needed for displaying records from the database, the Show Region behavior is actually my favorite server-based behavior. This collection of behaviors does exactly what you would expect from its name—it shows a region within a document. What could that possibly be good for, you ask? The obvious use, and the only one documented in Macromedia’s own materials is the use of the behavior to conditionally show a region on the screen based on the contents of a recordset. The Show Region behavior is triggered based on the contents (or lack thereof) of a recordset.

Introducing the UltraDev Dynamic Tools

265

For example, suppose that you have a Next button that takes you to the next page in a group of records (using the Move To Next Record behavior). When you reach the end of the recordset, the Next button becomes pointless. You can add the Show Region If Not Last Record behavior, to only show the Next button if the last record hasn’t been reached. Shown in Figure 9.10, the configuration of the Show Region behaviors is very simple.

9

FIGURE 9.10 Choose the right condition to test, and then the recordset to test.

Tip

Showing Next and Previous buttons is indeed an obvious use of the Show Region behavior, but they aren’t the most useful choices. The Show Region behavior can be used to show and hide information—creating Web pages whose content changes completely, based on the results of a recordset. Remember, if you want to hide information based on a condition, you can accomplish the same thing by showing the region when the opposite condition is true. In a few days you’ll learn how to use this behavior to authenticate user logins, and several other interesting techniques.

Dynamic Elements The Dynamic Element server behaviors are probably one of the most common behaviors that you’ll use, and you might not even know it! After you create a query, a new recordset icon will be added to the Data Bindings palette. This icon can be expanded by clicking the disclosure arrow to the left of it. As seen in Figure 9.11, the expanded view of the recordset shows all the available field names. FIGURE 9.11 The Data Bindings palette shows the available fields in a recordset.

266

Day 9

The easiest way to get these fields into the design document is to drag them directly from the Data Binding view into the Document Design view. You’ll do this more frequently than you can even remember, and, you’ll be adding a Dynamic Text server behavior each time you do it. Five dynamic elements are as follows: Dynamic Text—Inserts a database table field value directly into the Document Design view. Dynamic List/Menu—Fills a pop-up menu or selection list with items from a database table. Also allows the database to drive the initial selection in the list or menu. Dynamic Text Field—Inserts a database field into the value attribute of a database table. Often used for restoring user values that were entered previously. Dynamic Check Box—Takes an existing check box and determines if it should be rendered as checked by comparing a database value to a known value. Dynamic Radio—Similar to the check box, the dynamic radio buttons are set to selected, based on a value in a database. Coupled with a Repeat Region behavior, the Dynamic Text behavior will be used to generate most of your online database information displays.

Data Bindings Each time you add a Dynamic Element server behavior to your application, you’re really creating a data binding. The Data Binding palette is your central resource for figuring out what data you have access to, what portions of the HTML it is attached to, and how you can display it. Let’s take a look at these different uses for the panel, one at a time.

Dynamic Data First, the Data Binding palette contains the data from any recordset that you create. Recordsets contain the dynamic data that you can add to your Web site, and, after being defined, will be added to both the server behavior window as well as the data binding window. Unlike with other server behaviors, you can add a recordset directly from the Data Binding palette by clicking the + button and choosing Recordset (query). This is the most common piece of data that you’ll use within UltraDev, but it isn’t the only type of data that is available within this view.

Introducing the UltraDev Dynamic Tools

267

You’ll also find that the Request Variable and Session Variable data bindings are extremely useful. These two behaviors will provide access to a server-based session variable, URL parameters, cookies, form variables, and so on.

Tip

Unlike recordsets or data bindings that rely on database access, session variables and cookie-based request variables are accessible site-wide. Most bindings are specific to the page that they were added to.

Similar to the recordsets, these additional pieces of data are displayed in the data binding window and can be dragged directly into the design view.

Note

The data bindings (session variables, cookies) bring up an important and significant shortcoming within the UltraDev authoring environment. Although you can bind to an existing session variable, and so on, you cannot create new sessions or cookies. In order to use these Web programming constructs, you’ll have to manually edit your source code or create your own server behavior, which we’ll discuss at the end of today.

Design View Bindings You can think of the data binding window in two ways. As you’ve learned, it is a place to find all the dynamic data that has been bound to UltraDev. This is the first level of binding information. Additionally, the palette contains information about how the data is bound to objects within the design view. For example, the simplest type of binding is created between a piece of dynamic text in the document design view and any available data in the Data Bindings palette. Try dragging a piece of information from the palette into the document design view, and then look at the Data Bindings palette, shown with some sample data in Figure 9.12. You can see from the Binding column that the selected field is bound to Selected Text. Any relationship between a design element and a piece of dynamic data is denoted in this display. FIGURE 9.12 The Data Bindings palette shows how items in the design view attach, or bind, to design-time elements.

9

268

Day 9

Design view bindings extend well beyond dynamic text. For example, rather than adding a server behavior to dynamically generate a pop-up menu or selection list, you can bind an existing pop-up menu to a recordset field. By choosing an object in the design view and then the corresponding field in the database design view, you can bind any of the available attributes for an object (shown in the pop-up menu at the bottom of the Data Binding palette) by choosing the attribute and clicking the bind button. You can bind to literally dozens of attributes—names, colors, selected items, and so on. Anything that UltraDev recognizes as an attribute of the object can be bound to dynamic data. To change the binding at any time, click the arrow beside the binding displayed in the palette and choose a new attribute to bind to.

Note

As you now know, there are two ways to dynamically bind data from a database to an HTML object—explicitly, using a server behavior, or implicitly, with a data binding. Both of these techniques will be covered in-depth over the next several days.

Data Formats For each bound piece of data, you can select a format in which it will be made available to UltraDev—either for display, or other data binding use. The formats are accessible by clicking the pop-up menu arrow in the Format menu. Try adding a piece of dynamic data to your design view so that you can look at the contents of this menu. Several different categories of formats are available: Date/Time—If the data being bound is a date or time, you can choose the way it is displayed by using one of these formats. Currency—The Currency formats are used to represent money. Employing a currency format eliminates the need to add currency symbols (such as “$”) manually to the display. Number—If you’re working with numbers, the Number formats can be used to handle rounding, decimal places, and signed values. Percent—Identical to the Number formats, but geared toward percentages.

Introducing the UltraDev Dynamic Tools

269

AlphaCase—Alters text data so that it is in uppercase or lowercase. Trim—Many pieces of textual information stored in databases (especially legacy systems) are padded with spaces. The Trim formats remove spaces from one or both ends. Other types of formats include URL encoding that encodes string data, so it can be passed through a URL. (Special characters are changed to their hex equivalents.) If you can’t find a format that you want, you can use the Edit Format List option from the bottom of the format list to add a new format, or edit an existing format. The Master Edit Format List screen is shown in Figure 9.13. FIGURE 9.13 You can edit or add formats to UltraDev.

To add a new format: 1. Click the + button. 2. Choose the type of format you want to add (Number, Currency, Percent) from the pop-up menu. 3. Set the attributes for the format that you are creating—such as the number of leading zeros, decimal places, and so on. 4. Click OK. You’ll immediately be able to access the new format from within the format pop-up menu of the Data Binding palette. A sample format configuration screen is shown in Figure 9.14. FIGURE 9.14 Customize formats for your Web application needs.

9

270

Day 9

User Authentication UltraDev 4.0 and later versions introduced a series of User Authentication server behaviors to the system. Unlike the other behaviors, these really don’t modify data or change the way it is displayed. Instead, the user authentication behaviors provide a means of restricting Web page access to a group of people. The basis of these behaviors is a database table that you will have to maintain. This table should contain usernames and passwords, in plain text. UltraDev’s behaviors will check this information and compare it to a user’s input from a form. If they match up, a session variable called MM_Username is set. On subsequent pages, this session variable can be checked to see if the user has access to the page. There are a total of four different authentication behaviors, which we’ll take a look at now.

Log In User The Log In User behavior, shown in Figure 9.15, has a rather large configuration screen, but is really very easy to set up. This behavior should be added directly to a login screen. Everything is handled automatically—all you need to do is supply a form. FIGURE 9.15 Configure the login behavior so that it can compare form fields to database fields.

To set up the login page, complete the four regions of the behavior configuration screen based on your site and database: Get Input From Form—Choose the HTML form that will supply input to the authentication behavior. You also need to tell UltraDev which field contains the username, and which contains the password.

Introducing the UltraDev Dynamic Tools

271

Validate Using Connection—Select the database connection as well as the table and table columns containing the username and password that you’ve stored for a user. These must be stored as plain text—not encrypted. Go To—If the username/password from the form matches what is in the database, you can direct the user’s browser to a URL of your choice. You can also select the Go To Previous URL option, which will send the user back to a page he tried to load but was denied access to. For login failures, you can supply another URL that the user will be sent to. Restrict Access Based On—There are two options for this area—to restrict based on username and password, or username, password, and access level. The former is selfexplanatory, whereas the latter allows you to set multiple levels of users who can access different pages (guest, administrator, user, and so on). If you are implementing user levels, you must select the column in your database table that includes the access level. That’s all you need to log in a user. After processing the server behavior, the user will be redirected to the screen of your choice. It is up to you to design these screens!

Restrict Access To Page If a user is logging in, there usually is a reason for it—such as restricted access to certain pages. The Restrict Access To Page behavior allows you to verify that a user has the proper credentials to access a Web page before it is displayed on his screen. It is assumed that you would have already added a Log In User behavior to your document before you start using the Access Restriction behavior. To use this behavior, simply add it to a page that you want only certain users to have access to. As shown in Figure 9.16, the behavior consists of nothing more than a choice of how to restrict the user’s access (based on just a valid login, or a valid login and a user level). If the user has not logged into the site correctly, he is redirected to the URL supplied in the If Access Denied field. FIGURE 9.16 Restrict access to a page based on a username and password, or a username, password, and access level.

9

272

Day 9

If you want to restrict a user’s access based on level, he must have logged in using a Log In User behavior with the same restriction technique. If it is the first time you’ve used access levels, you must click the Define button to add levels to the selection list. Use the + button to add a level, and - to remove one. Be very careful with creating the levels; they must match up perfectly with their database counterparts. Assuming that your levels are defined, just choose a level from the list you’ve created, and only user records including that access level will be allowed to view the page.

Log Out User The Log Out User behavior does exactly what it sounds like. This behavior really isn’t necessary in your Web site, but it does have its uses. When a user logs in, a session cookie is set on his browser. This cookie only lasts the length of time his browser is running. If the user quits Netscape or IE, he has effectively logged out of the system without any need for the Log Out User server behavior. If you want to give a user the ability to log out of an account and then log back in under a different account, all in one session, you’ll need to implement the Log Out User behavior, shown in Figure 9.17. FIGURE 9.17 Choose when the logout should occur, and the page to go to after it is done.

Configure the behavior by defining when the logout action occurs (after clicking a link or when the page with the behavior loads), and then choose a page that the user should be directed to when the logout action is complete. Again, this behavior is not at all necessary. It is very unlikely that you’ll have many users who even pay attention to a logout link on your page—such is the way of the Web.

Check New Username Sometimes a Web site needs to have a Register Online section to enable users to create their own accounts from within their browser. Usually this involves picking a username and password. The trouble is that after you have a few thousand users on your site, the chances that they pick a unique username are slim to none. (If you’ve ever tried to get a personalized Hotmail account, you know what I’m talking about.)

Introducing the UltraDev Dynamic Tools

273

The Check New Username behavior eliminates this condition by providing a means to verify that a username is unique before it is saved to a database. Used in conjunction with an Insert Record behavior, the Check New Username behavior takes just two parameters to work: the database field containing the username field, and a page to redirect the browser to if the username already exists. A sample of this behavior is seen in Figure 9.18. FIGURE 9.18 Choose the column that holds the username and where to send the user if a duplicate name already exists.

As you develop registration pages, you’ll find this extremely useful, and a great way to eliminate insert errors.

Advanced Technique: Editing/Creating Server Behaviors The following information should only be implemented by users who are comfortable with modifying the UltraDev environment and are familiar with one of the embedded programming languages. UltraDev includes a built-in server behavior editor that allows you to very quickly create new server behaviors and alter existing behaviors to suit your needs. I highly discourage everyone from modifying existing behaviors on the system. It is much safer to copy existing behaviors and change them. Let’s work through a quick example so that you get an idea of how the system works. To access the server behavior editor, click the + button and choose Edit Server Behavior to change an existing behavior (not recommended), or New Server Behavior to add a new behavior or copy and edit an existing behavior. Assume that you want to add a server behavior to the ASP behaviors that sets a session variable based on a request variable. Syntactically, it would look like this: <% Session(“MySessionVariable”)=Request(“MyRequestVariable”) %>

First, choose New Server Behavior from the pop-up menu in the Server Behavior palette. You’ll be greeted by the initial naming screen, shown in Figure 9.19.

9

274

Day 9

FIGURE 9.19 Choose the server model and name for your new behavior.

Select the appropriate server model (ASP, in this case), and a name for your new behavior, such as Set Session. If you check the Copy Existing Server Behavior option, you can also choose from the many existing behaviors to modify, rather than starting from scratch. Click OK when you’ve chosen your name and scripting model. The second step in defining your behavior is adding the code to the system in the Server Behavior Builder screen, shown in Figure 9.20. FIGURE 9.20 The Server Behavior Builder is where you define all your ASP/ JSP/CFML code.

Each behavior can have multiple blocks of code, and each block of code can fall in a somewhat arbitrary location in the document. Because this is a relatively simple server behavior (it only has a single block of code), it should be easy to define: 1. Click the + button to add a new code block. Name it Set_Session_block1 (the default name). 2. Make sure that the Insert Code and Relative Position pop-up menus are set to Above the Tag and The Beginning of the File, respectively. These two configuration options control the location where the code will be inserted into the document, and where, relative to that location, it will be written. 3. Change the Code Block to resemble <%

Session(“”)=Request(“”) %>.

4. Position your cursor inside the quotes of the ‘Session(“”)’ portion of the code, and click the Insert Parameter In Code Block button. You will be prompted for a new parameter. Name it SessionName.

Introducing the UltraDev Dynamic Tools

275

5. Position your cursor inside the quotes of the ‘Request(“”)’ portion of the code, and click the Insert Parameter In Code Block button again. You will be prompted for a new parameter. Name it RequestName. 6. You’ve just defined the basis for the server behavior. Click the Next button to continue. The final step of defining the server behavior is creating the dialog box that will be shown to configure it. Not surprisingly, this step, like most everything in UltraDev, is automated. As shown in Figure 9.21, you can change the ordering of the fields that will be created in the behavior configuration form, and, by clicking in the Display As field, you can provide a link to the recordset menu, allowing dynamic data to be used to fill one or more of the parameters. FIGURE 9.21 Choose the ordering of the Server Behavior configuration fields and how they should be displayed.

When you’re satisfied with the display, click OK to continue. After a few seconds, your server behavior will be generated and added to the menu within the Server Behavior palette. The screen for the behavior we just created is shown in Figure 9.22. FIGURE 9.22 The new server behavior is ready to use.

As you work your way through the book, you’ll notice that there are several instances in which the code needs to be customized in order to work correctly. These are not good places to use customized server behaviors. Although it would work, it would take longer to alter an existing behavior to include the new functionality than to just edit the code. The best candidates for new behaviors are actions that you find yourself repeating again

9

276

Day 9

and again—not the occasional oddball case. That said, the server behavior authoring tool is a fantastic addition to the UltraDev product that makes it extremely valuable to the hardcore programming crowd.

Summary Similar to the first day of the first week, today introduced you to the tools that you will be using for the rest of the book. I know you’re anxious to get your hands on the UltraDev tools and create some sites, so we’ll dive right in tomorrow. Later in the week, we’ll take an in-depth look at the SQL language itself so that you can write advanced queries beyond what the simple point-and-click interfaces can get you. You should come away from this lesson with an understanding of what server behaviors are, where they are located within the UltraDev interface, and how you’ll be using them. Additionally, the purpose of the Data Binding palette should be clear. Used to provide an interface to your database queries and other dynamic data, the Data Binding palette will frequently be used when creating dynamic Web sites. The Data Binding palette also provides a means of binding an HTML object in the document design view to piece of dynamic data. Finally, you’ve seen that UltraDev gives you the ability to format data on-the-fly as it is pulled from the database. Because you’re likely to encounter data that varies from record to record, this will, in many cases, be a godsend. Although the purpose of every tool might not be obvious, you’ll learn by doing throughout the rest of the book. Don’t worry, we’ll cover the behaviors in-depth when you meet up with them again; there is no need to memorize everything we’ve covered today.

Q&A Q What limits are there on advanced queries? A The limits are only set by your database server. UltraDev sends the query you define directly to your server; it does not parse the SQL itself. Q How can I hide a region rather than show one? A No difference exists between hiding a region if a condition is true and showing a region if the opposite condition is true. For example, if you want to hide something if “a is equal to 1,” you can use the show behavior to show the element if “a is not equal to 1” and accomplish the same thing.

Introducing the UltraDev Dynamic Tools

277

Q Can you embed repeat regions within one another? A Yes, but no. If you’re using the regions as two embedded for...next loops, you’re going to be surprised. UltraDev writes the embedded code so that the loops are initialized in the same place—before either of them begin. This means that the inner loop will only loop once. Q What does the Get More Formats menu selection do when you choose a format for a data binding? A Anytime you see “Get More…” in a menu, you can choose it to launch your Web browser and instantly be taken to Macromedia’s download site for UltraDev extensions.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What does the recordset behavior do? 2. How do you execute an Insert command directly on the server? 3. Does UltraDev support multiple value primary keys for a query? 4. Is there another way to add dynamic features to your site rather than adding server behaviors? 5. How can you control the format of the output of a field?

Exercises 1. View each of the screens that you learned about today, and experiment with connecting them to one of the database connections that you created yesterday. 2. Explore the Data Binding palette. If you have a valid database connection, try adding a few HTML elements to your document and then bind them to information in a recordset. This doesn’t need to do anything useful, but it will help familiarize you with something that will become a very common activity. 3. If you’ve programmed Web applications before, try to relate your existing programs to the server behaviors you have available. You’ll find that, although different from traditional programming languages, the UltraDev programming environment is flexible enough to handle a wide variety of authoring tasks.

9

WEEK 2

DAY

10

Creating Database-Driven Screens With the appropriate connections to a database server in place, UltraDev becomes a powerful visual development tool. After first connecting to a database, you’ll want to display the information that it contains. Depending on your application, this might be all the database connectivity that you need. You will be shown how to create database-driven screens and the back end you need to support them. Today, you will learn how to • Create a back end database and deliver it on the Web. • Display database-driven information in interesting ways. • Create simple record browsing mechanisms. • Add graphics to your database design in order to completely customize your display.

280

Day 10

Database-Driven Screens The very first thing that you’ll learn how to author within UltraDev is actually one of the most useful and most common devices you need when creating database-driven sites—a simple display of the contents of your database—sometimes called a report. Even if you aren’t supplying user interactivity with the database beyond showing its contents, you’ll want the ability to create screens that show your database content in ways that appear natural to the user. One of the biggest problems with database-driven sites is that they look database driven. This doesn’t have to be the case. Careful design using the UltraDev tools can yield a Web site that uses a database for its back end information, but maintains a free-flowing approach that doesn’t alienate the viewer. Today we’ll look at several different database screens, and you’ll learn how to build them from scratch, including creating the back end database schema. By the end of the day, you’ll be a wizard with the basic reporting features of UltraDev and will be ready to move on to more challenging applications. To make this easy, we’ll start with a very basic screen design and work our way up to something a bit more challenging.

A Simple Table As you learned earlier, a collection of information in a database is called a table. Displaying the tables within a database is the first task we’ll take up today. As you might guess, a table of data from a database is easily represented as a table within HTML. UltraDev makes it convenient to design a program that does just that—unfortunately, without a little work, you’ll find that your information is probably lacking a bit on the style end.

Note

The commands in this example are given using mySQL. They should, however, carry over to any standard SQL server with very little or no changes.

Creating the Back End Let’s look at displaying contact information from an SQL table that is created as follows: create table personnel ( firstname varchar(50) not null, lastname varchar(50) not null, age int, phone varchar(20),

Creating Database-Driven Screens

description primary key

281

varchar(200), (firstname,lastname)

)

This table simply holds a few personnel records that include name, age, phone number, and a brief description. The primary keys are set to be the firstname and lastname of the person—this means that no two people can have the same first and last names. For a real-world application this is unrealistic, but for our purposes it should be just fine. Many of the tables we create today will also be used tomorrow. The use of a two-field primary key today will serve to accentuate some inherent problems in the UltraDev model tomorrow. Now let’s insert some information into that table, as follows: insert into personnel values (‘John’,’Ray’,99,’555-555-5555’, ‘A really swell guy’); insert into personnel values (‘Robyn’,’Ness’,62,’555-555-1234’, ‘An evil munchkin’); insert into personnel values (‘Anne’,’Groves’,12,’230-555-1234’, ‘Has a certain boyish charm’); insert into personnel values (‘Paul’,’Jeebers’,12,’430-555-4444’, ‘An entirely fictional character’); insert into personnel values (‘Jack’,’Dairyfay’,62,’555-555-7123’, ‘Believes that all meat is diseased and must be burnt before eating’);

Note

For those of you who might be wondering, the last person in the list is a friend of mine who doesn’t trust meat unless he has burnt it himself. In order to guarantee the safety of store-bought ground beef, he boils it. Maybe it’s just me, but I find that a little bit strange.

As a final step in setting up the back end database, I’ll just perform a simple SELECT on the personnel table to be sure that all the appropriate data has been added: mysql> select * from personnel mysql> \G *************************** 1. row *************************** firstname: John lastname: Ray age: 99 phone: 555-555-5555 description: A really swell guy *************************** 2. row *************************** firstname: Robyn lastname: Ness age: 62

10

282

Day 10

phone: 555-555-1234 description: An evil munchkin *************************** 3. row *************************** firstname: Jack lastname: Dairyfay age: 62 phone: 555-555-7123 description: Believes that all meat is diseased and must be burnt before eating *************************** 4. row *************************** firstname: Anne lastname: Groves age: 12 phone: 230-555-1234 description: Has a certain boyish charm *************************** 5. row *************************** firstname: Paul lastname: Jeebers age: 12 phone: 430-555-4444 description: An entirely fictional character 5 rows in set (0.00 sec)

Everything looks fine, so let’s get this data onto the Web.

Developing the UltraDev Front End With the database sitting pleasantly in the back end, it’s time to create the Web front end. You’ll need to set up a connection to the database system. Refer to Day 9, “Introducing the UltraDev Dynamic Tools,” for more information on creating database connections. In case you’re interested, my setup for this particular application is a Windows NT machine running as a Web server with IIS, a Linux computer running mySQL and PostgreSQL, and a Macintosh Powerbook as the design tool. As you can see, this is a diverse setup, and it actually works incredibly well. To get things started, make sure that you’ve done the following: 1. Define a new site. 2. Set up a local and server directory for the project. Make sure that the server directory you’re using for deployment has Execute permissions set. 3. Choose the appropriate server model. I’m using the ASP 2.0 model. 4. Define a connection to the database. If you’ve successfully followed all these steps and have tested the connection, everything is ready.

Creating Database-Driven Screens

283

Setting Up a Recordset There’s only one table that we’re worried about with this particular database, so there’s really only one recordset that needs to be created. Open the Server Behavior palette now, and click the + button to add a new binding. Choose the Recordset (Query). I just want to set up a simple set that has all the data from my table, so I’ve configured the recordset as seen in Figure 10.1. FIGURE 10.1 Define a simple recordset that contains all of the fields in the table.

The only changes I need to make to the Recordset dialog is to pick a connection, the table in the database I want to use, and a name for the recordset. I also must make sure that all columns are selected. If everything has gone according to plan, the data bindings palette should now look similar to Figure 10.2. You might need to click the expansion box in front of the named recordset in order to see the fields that are available. FIGURE 10.2 You should see a recordset containing all the fields in your database.

Because this is your first dynamically generated site, let’s play with the tools a little bit. How do you get information from the database into the Web page? That’s simple: Drag and drop it into the Web page.

10

284

Day 10

Add Data to Your Page For starters, drag each of the fields into your design view. The page you create will have several special tags in it that resemble {Recordset.Fieldname}. Figure 10.3 shows a basic document with all the fields from our recordset displayed on the page. FIGURE 10.3 Drag records to the document design view to add them to the Web page.

Note

You might notice a few items in the recordset that are not part of the database schema. There are three extra fields that will be useful later on: first record index, last record index, and total records. Total records is the number of records in the recordset, the last record index is a value for the last record on the page, and the first record index is the value for the first record shown. You’ll see these values again soon.

Designing pages using these abstract field types is certainly possible—just use them as you would any other page element. If you choose to do this, however, you’re going to miss out on what is undoubtedly UltraDev’s most powerful feature: the capability to preview data from the database directly in the design view. Other design tools use tags similar to the ones you currently see in order to represent data on the server. Being able to connect to remote databases, on multiple design platforms, using different server platforms, and different data access techniques is certainly not easy. Macromedia, however, has developed a very effective and novel approach to providing live data access from within the design view.

Live Data Previews In order to see a live preview of the site, UltraDev uploads the page you are working on to the server. It then has the server render the page as it would in real-live production, download the resulting Web page, match it up with the page in the design view, and insert the dynamic data in the appropriate places…all in less than a second on a fast connection.

Creating Database-Driven Screens

285

In order to set up your computer to use the Live Data Preview option, all you need to do is select the Live Data setting under the View menu. Go ahead and select that option now. If you’ve set up your database exactly as I have, your screen should resemble Figure 10.4. FIGURE 10.4 The abstract field tags are now replaced with actual data from the database.

If you have any problems viewing live data in your document view, be sure to check all your site definition information, especially the information under App Server Info. The two important fields for this feature are the Live Data Server and Live Data URL Prefix. You have two options for your live data server: You can choose to use a local server that maintains a mirror copy of the data or a remote server. If you’re connecting to a remote server over a dial-in or very slow connection, using the remote server to generate your live data view is going to be quite painful. The solution is to set up a mirror copy of the server on a local machine and use it to provide the live data view. If you choose to go this route, be aware that the local server must be set up using exactly the same technology as the remote server. You can’t, for example, expect to use a remote Web server to generate a JSP solution and use an ASP server as the local live data viewing server. When you have the live data view functioning properly, you can reload the page using the circular arrow Reload button in the upper-right corner. If a reload is taking longer than planned, click the stop sign icon, which will cancel the current update. To automatically update the Web page as changes are made to the design view, click the Auto Refresh check box. Any changes you make (adding other fields, and so on) will be immediately updated in the design view. Otherwise you’ll need to click the reload button or choose Refresh Live Data from the View menu each time you want to view the progress of your work. The URL field at the top of the Live Data design window gives you a way to send data to the design window that can simulate data being passed from another Web application. This will come in handy when we start developing real applications in the final week.

10

286

Day 10

Displaying Multiple Records You’ve noticed by now that only a single record is being displayed in the design view, but the database has multiple (a grand total of five) records currently available. So, how can you set up the system to display those records instead of just one? You could set up multiple recordsets that retrieve one record from the database. That, however, would be a little ridiculous. It’s easier to just use UltraDev’s Repeat Region server behavior to add multiple record functionality to your site. A repeating region will add all, or a portion of the records in a recordset to your Web page. You select the data that you want to repeat, and UltraDev does the rest. A repeat region works by generating the equivalent of a Do...Until or a For...Next loop to your document. If you choose to display all the records in the recordset, the repeating region will repeatedly display an area in the HTML, fetch the next record, and then display that area using the new data until all the records are shown. If you, instead, choose to only show a subset of the entire recordset, the repeating region will count how many times it has executed and stop when it hits the limit that you have defined.

Tip

Before adding a repeating region, make sure that there is a line break after the end of the dynamic data currently in your site—otherwise, all the records in the table will be listed on a single line.

To create a line with each of the records in it based on the fields you’ve already added, just follow these simple instructions: 1. Select the elements that you want to repeat for each of the records in the table. Because I’ve added all the fields in the database, I’ll just select the entire line of fields. 2. Open the Server behaviors palette. 3. Click the + button and choose Repeat Region from the pop-up menu. You’ll need to define the particulars of the region you’re repeating. Figure 10.5 shows the Repeat Region dialog. Choose the recordset that contains the data you want to repeat, and how many records you want shown in the display. I’ve chosen my PeopleInfo recordset and am going to display all the records.

Creating Database-Driven Screens

287

FIGURE 10.5 Define the recordset you’re repeating from and the number of records you want to display.

When you’ve picked your settings, click OK. If you’re viewing live data, you should see all the records in the database—one on each line. The live data portions of the display are highlighted in yellow, showing that they’ve been successfully translated into real data by the remote or local server. You can change this highlighting color by editing UltraDev’s HighLighting preferences.

Tip

10 After you’ve gotten accustomed to the UltraDev environment and the idea of having live data populate your screen, you might want to turn off highlighting of translated Live Data completely by clicking the appropriate Show check box in the HighLighting section of the preferences. I find that the highlighting is distracting and gets in the way of the design process itself.

Now that you see all your records, try shutting off the Live Data previewing option and look at the change in your display. Shown in Figure 10.6, the non-Live Data preview doesn’t make an attempt at showing what the multiple records would resemble. Instead, UltraDev boxes the region that is going to be repeated and places a Repeat label at the upper-right corner of the region. FIGURE 10.6 Without Live Data previewing turned on, the display is less than beautiful.

Although this view is helpful in seeing exactly how UltraDev views the Web page and makes changes to the appropriate regions, it is less than ideal for a designer to see how the finished product might look.

288

Day 10

A Table in a Table Okay, so your data is being displayed, but it certainly isn’t very pretty. In fact, it’s quite ugly. Five records of varying lengths are displayed with no formatting information at all. How can we correct this? It’s simple. Just use the HTML element that does a wonderful job of keeping data organized on a page—a table. We have five fields of data (firstname and lastname are separate fields), so we could create a five-column table that would hold everything. In the name of user-friendliness, however, let’s put the first and last name into a single column. Go ahead and start a new document that will be built around a table. You’ll need to re-create the recordset that you used in the previous example—or delete all the server behaviors in the current document and reuse it. If you choose the latter route, be sure to open the Server Behaviors palette, select each behavior, and click the - button to remove it.

Caution

If you are reusing or editing a document that has had server behaviors applied to it, do not use the document design view to remove the behaviors. You can certainly select and delete, for example, a repeating region within the document design view, and this will appear to work. However, changes made in design view won’t delete all the UltraDev support code from the region. (You’ll usually be warned about this.) If you then go on to add another repeating region to your document, it will fail when you attempt to run it. The only way to recover a document with this problem is to edit the server-side scripting directly in the HTML. I recommend starting from scratch rather than reusing documents—it only takes a few seconds to redefine your data bindings, and it will eliminate any possibility of residual code in the document.

After you’ve re-created your data bindings, go ahead and add a table to the document design view. For the personnel database, add a table with four columns and two rows. The four columns are for the fields being displayed (remember, the firstname and lastname fields are going to be combined in this example). You might be a bit confused about the two rows, however. Because the database has five records, shouldn’t the table have at least five rows? The answer is simple: Yes, it should, but you don’t have to worry about it—UltraDev will do the work for you. The table we’re adding really only needs a single row to hold the field elements. In a two-row table, however, the first row can be used to hold the names of the fields. That will help “neaten” things up a bit. Go ahead and create a simple table layout now using these steps:

Creating Database-Driven Screens

289

1. Turn off Live Data during the design phase if it is on. You don’t have to do this, but I find it easier to set up the document initially without viewing live data. 2. Insert a four-column, two-row table into the document design view. 3. Add the names of the fields being displayed to the cells in the first row. These will serve as headings for the rest of the table: Name, Age, Phone Number, and Description. 4. Drag the appropriate fields from the recordset in the Data Bindings palette over to the second row of cells in the table. 5. As a last step, highlight the row of cells that contains your data fields, and then add the Repeat Region server behavior for the defined recordset and all the records. If you’ve successfully followed these steps, your display should resemble the one in Figure 10.7. FIGURE 10.7 Laying out the data in a table format is amazingly simple—just design…

As a final test, switch to a Live Data mode or preview the page in your browser. Shown in Figure 10.8, all five records are in the table, just as one would hope. FIGURE 10.8 …Then preview.

10

290

Day 10

Although this might seem almost magical, in fact, it’s really no different than the last example in which the data was listed with each record on a single line. UltraDev will automatically write the code necessary to repeat a group of fields and HTML until all the records are shown. In the first example, the only thing that needed to be repeated was the dynamic data (the fields), and the
at the end of each line. This example worked the same way, but the section being repeated was a table row: .... From the perspective of UltraDev, it’s no more difficult to write repeating tables than it is to write a repeating line of text. From our perspective, however, it’s pretty darn slick. Still, is this table what you really want displayed to people who visit your page? It isn’t incredibly attractive and doesn’t present the information in a way that is natural for Web site layout. So, how can this table be “spiced” up? An obvious way to do this would be to add some graphics to the mix and break up the monotony of the table. UltraDev, however, doesn’t currently support the use of graphics embedded within a database. If you plan carefully, however, this isn’t going to be much of a drawback.

Adding Graphics to the Recordset It would be extremely nice to show a picture of each person in the personnel table, along with his description and information. Without UltraDev’s support, however, how can you use graphics within the database? The answer is simple; just store a URL to the location of the images within a directory on the server. Rather than storing the image itself, you store a reference to the image.

Tip

If UltraDev adds embedded image support in the future, I would still think twice before using it. By employing the blob datatype (Binary Large Object), it is possible to store images, files, and other binary data directly in a database table. Keeping images in a database is at times useful and can speed up retrieval of images from within a large library. Unfortunately, it also removes access to the files from the people who need it—namely, the designers. Depending on the system, the only person who might have access to the files is the database programmer. Because UltraDev and Dreamweaver work to create a distributed editing environment, this works against one of the basic philosophies of the software.

Creating Database-Driven Screens

291

For example, all we need to do to start storing images in our database is to add a new imageurl field to the existing database structure. Within that field, you can store data such as pictures/image1.jpg, and so on.

An Image-Ready Database Back End Here’s the new database table structure that I’m going to be using for the new personnel database: create table personnel2 ( firstname varchar(50), lastname varchar(50), age int, phone varchar(20), description varchar(200), imageurl varchar(80) not null, primary key (imageurl) )

You might have noticed that, besides just adding an imageurl field, I’ve also switched the primary key so that it uses imageurl—it seems like a reasonable assumption that there won’t be two employees who have the same picture. Next, I modified the data in the database so that it now contains insert into personnel2 values (‘John’,’Ray’,99,’555-555-5555’, ‘A really swell guy’,’people/JohnRay.jpg’); insert into personnel2 values (‘Robyn’,’Ness’,62,’555-555-1234’, ‘An evil munchkin’,’people/RobynNess.jpg’); insert into personnel2 values (‘Anne’,’Groves’,12,’230-555-1234’, ‘Has a certain boyish charm’,’people/AnneGroves.jpg’); insert into personnel2 values (‘Paul’,’Jeebers’,12,’430-555-4444’, ‘An entirely fictional character’,’people/PaulJeebers.jpg’); insert into personnel2 values (‘Jack’,’Dairyfay’,62,’555-555-7123’, ‘Believes that all meat is diseased and must be burnt before eating’ ,’people/JackDairyfay.jpg’);

Each of the records now has a field that includes a directory and a filename that has a picture of the person in the database. So, how do we get this on the Web? It’s really very simple. Let’s assume that we’re laying out the page exactly the same as the last tablebased page, but with an extra cell (five columns) for the pictures. You should be getting pretty good at this, but here are the steps you need to take to create this “picture-ready” version of the table: 1. Create a new document, or copy the existing page and delete all the server behaviors from the existing page. 2. Add a recordset to that document including all the fields in the database.

10

292

Day 10

3. Insert a table or modify the existing data in the document that includes a fifth column for the image being displayed with each record. 4. Fill in the table cells the same way as before, except for the fifth cell, which needs to be handled a bit differently. Don’t add the Repeat Region yet. Now that you’ve got a basic table constructed, how about adding those pictures? It’s as simple as adding in a static image.

Adding a Dynamic Image to the Design Go ahead and put the insert point in the last cell of the table to insert an image in that space. Instead of selecting an image from the local drive, click the Select File Name From Data Source button. This will let you configure the image that you’re adding, so you can retrieve its name/location from a database and not treat it as a static piece of information. The Dynamic Data setting screen is shown in Figure 10.9. FIGURE 10.9 Choose the field in the recordset that holds the picture URL.

From the Dynamic Data screen, choose the recordset that contains the field you want to use, and then choose the field that has the path to the image you want to use with that record. Click the OK button when you’re done. UltraDev will insert a small image icon into the table to represent the dynamic image. Now, select the row in the table that needs to be repeated and add the Repeat Region server behavior. Finally, switch to the Live Data mode of viewing, if you haven’t already. Your screen should resemble Figure 10.10. All the images are shown in the appropriate cells of the table.

Creating Database-Driven Screens

293

FIGURE 10.10 The images are displayed along with the rest of the data.

10 There’s nothing to it. There’s still a bit to be said for a more attractive layout, but we’ll address that in a few minutes. Right now, there’s an alternative approach that I’d like to introduce to you before moving on.

An Alternative Approach The files that contain the names of the images are composed of just the first and last names of the person in the database with .jpg appended to the end. Why not just use the two existing database fields to determine the image rather than an entirely new image URL field? This is actually pretty simple, but it will require you to get your hands dirty—well, maybe just a little dusty. Select the image in the design view and open the Properties palette for that image. Now switch to the Attribute view in the palette by selecting the lower of the two tabs on the left side of the Properties palette. If you’re using Active Server Pages, you should see something similar to Figure 10.11 in your palette. If you’re using one of the other deployment platforms, the code will look different, but you should be able to recognize the same pattern. The tag <%=(PeopleInfo.Fields.Item(“imageurl”).Value)%> does absolutely nothing but replace itself with the value of the imageurl field from the database. So how could we set up the system to use the first and last names from the database? It’s simple, use <%=(PeopleInfo.Fields.Item(“firstname”).Value)%> <%=(PeopleInfo.Fields.Item(“lastname”).Value)%>

294

Day 10

FIGURE 10.11 The ASP code to retrieve the image URL is shown here.

This solves most the problem, but we’re still missing “people/” from one end and .jpg from the other. How do you integrate this with the ASP code? This is even easier. The server deployment languages that UltraDev uses integrate the server coding with the body of the HTML. If you want to add plain text around the ASP tags, you just do it. There’s nothing else to it. Thus, the text we want to add to the image src attribute becomes people/<%=(PeopleInfo.Fields.Item(“firstname”).Value)%> <%=(PeopleInfo.Fields.Item(“lastname”).Value)%>.jpg

Try adding this to replace the <%=(PeopleInfo.Fields.Item(“imageurl”).Value)%> tag, and then view your document again in the Live Data mode. It should look exactly the same as it did before. This means that the imageurl field has become essentially worthless in the database. If you want to retain the ability to point an image to something other than a file based on the first and last names of a person in the database, you need to keep the imageurl field. If not, you can revert back to the database structure of the first set of examples and use the technique of concatenating first and last names to generate the image URLs.

Tip

In a large organization, it might be difficult to get all the users’ names to match up with their images’ filenames. For example, the file might be named andysmetz.jpg, whereas the database might contain Andrew Smetz. Using something such as a person’s Social Security number will be more reliable.

Creating Database-Driven Screens

295

Prettifying the Display Well, all these layouts have been functional, but certainly not very appealing and not at all like a well-designed Web page. In this section, we’ll explore an attractive version of the personnel display. In order to give the software a bit more to work with, I’ve changed the descriptions of the people involved to be more realistic in length. The key to creating an attractive, but informative, page is to stop thinking that you’re dealing with dynamic data. If this means that you need to lay out a page with static data first, so be it. Don’t be afraid to take advantage of all the other tools that UltraDev makes available to you. For example, look at the layout in Figure 10.12. This is a much more attractive method of presenting the data in the database. I’ve laid out the fields using tables for both positioning and appearance. FIGURE 10.12 A dynamic site doesn’t necessarily have to be ugly.

I’ve also taken advantage of using different styles of fonts and table background colors. The end result is a something that looks slightly less computer generated and a little more appealing to the eye. For this particular application, I’m also dropping the convention of using a repeating row in a table. Instead, I’m repeating the entire table and a horizontal rule to separate the tables. There’s no real rule to how you should set up your documents; just try designing them as you would any other HTML document. Use the tools that UltraDev has available, and don’t be afraid to break out of the “everything in a row in a table” mindset.

10

296

Day 10

Dynamic Attributes and Complex Displays You’ve already seen the effects of using a dynamic HTML attribute to place an image on a page. The image SRC attribute changed for each row in the database. But how far can you take this? You might be surprised that any existing attribute for an object can be set dynamically. This lets you create a document that is almost entirely laid out according to entries in a database. Before moving on, let’s take a look at one more method of laying out a page, this time using repeating layers. Suppose that you want to lay out a page in a manner that is completely nonlinear. In fact, we have five pictures, so how about laying out those pictures in a pentagon shape? You can easily do this in static HTML using layers, but suppose that the supporting information for the pictures changes on a daily basis, and you want to provide a database back end to the Web site. There are actually two different ways to do this. First, you could set up a different recordset for each of the five different records. This, however, wouldn’t be terribly efficient and would require directly editing the design document if you want to add a new person or change the layout. The second approach, which we’ll take here, is to set up a repeating recordset that uses field data for the positioning and a few other attributes of the layers. To add a new layer to the page, you just add a record to the database. There’s no need to bother with ever opening the HTML itself.

An Extended Database Back End In order to dynamically create the layout of the tables (position and coloring), we need a different type of database layout that includes fields for height, width, and location: create table personnel3 ( firstname varchar(50) not null, lastname varchar(50) not null, age int, phone varchar(20), description varchar(200), width int, height int, xloc int, yloc int, bgcolor varchar(10), primary key (firstname,lastname) )

Creating Database-Driven Screens

297

We also need some specialized data for this database. The best way to develop data that is laid out according to the format we want is to set up the layers beforehand and make note of the top and left positions for entry in the database. For example, this dataset includes coordinates for a pentagon-shaped display: insert into personnel3 values (‘John’,’Ray’,99,’555-555-5555’, ‘A really swell guy’,150,150,300,10); insert into personnel3 values (‘Robyn’,’Ness’,62,’555-555-1234’, ‘A nice girl’,150,150,0,180); insert into personnel3 values (‘Anne’,’Groves’,12,’230-555-1234’, ‘A cold fusion maniac’,150,150,450,180); insert into personnel3 values (‘Paul’,’Jeebers’,12,’430-555-4444’, ‘An Ex-con’,150,150,70,350); insert into personnel3 values (‘Jack’,’Dairyfay’,62,’555-555-7123’, ‘A math wizard’,150,150,380,350);

To create the database-driven layout, I first create a single layer with the attributes that I want. I also set the Style attribute for the layer to position:absolute; width:<%=(PeopleInfo.Fields.Item(“width”).Value)%>px; height:<%=(PeopleInfo.Fields.Item(“height”).Value)%>px; z-index:1; left: <%=(PeopleInfo.Fields.Item(“xloc”).Value)%>px; top: <%=(PeopleInfo.Fields.Item(“yloc”).Value)%>px; width: 170px; height: 158px; left: 217px; top: 3px; background-color: #FFFF99; layer-background-color: #FFFF99; border: 1px none #000000

This little code snippet uses the width, height, xloc, and yloc fields in the database to supply the appropriate corresponding style attributes. Unfortunately, you can’t do this in the UltraDev interface. Because this is actually a combination of attributes, you will need to set it up by hand. Depending on what you might want to do with the layers later, it might help to give the layers descriptive names. Although not necessary for achieving the look you want, you (or someone else) won’t be able to quickly modify a page that has a pile of layers, all with the same name. To dynamically set the names of the layers as they’re being created, you need to bind data from your recordset to the id attribute of the data. To bind data to a single attribute (any attribute), follow these steps: 1. Select the object to whose attribute you want to dynamically bind data. In this case, the object would be the layer whose name you want to set dynamically. 2. Switch the properties dialog box over to the attributes display and select the attribute that you want to bind to information from the database. For the layer’s name, it’s id. 3. Click the little lightning bolt icon at the end of the attribute line. This can be seen in Figure 10.13.

10

298

Day 10

FIGURE 10.13 The lightning bolt or folder icon is used to attach dynamic data to any attribute.

Note

Although UltraDev typicaly uses a lightning bolt to represent dynamic data, sometimes a folder icon may be used to serve the same purpose. UltraDev 4.0 introduces the crosshair icon that can be used to immediately attach an attribute to a file within the site files listing.

4. Select the recordset and the fieldname that should provide the necessary information for the attribute. I’ve used the lastname field to set each of the layers to the last name of the person whose information it will contain. 5. Click OK. Finally, go ahead and add the fields you want to have displayed to the layer. I’ve also added the image to the layer as well, based again on a combination of the first and last name fields concatenated together. As a last step, be sure to select the region and make it a repeating attribute. The final design view for the page can be seen in Figure 10.14. Without Live Data being turned on, the screen isn’t very interesting. However, after you choose Live Data from the View menu, you’re going to see a very different picture. When viewed live, all the layers are laid out according to the coordinates that were set in the database and filled with all the appropriate data as well. Figure 10.15 shows the display of the live data and the database-defined layout.

Creating Database-Driven Screens

299

FIGURE 10.14 The final design view for a Web page laid out entirely by the attributes in a database.

FIGURE 10.15 Viewing with Live Data shows the complete picture.

As a final step to verify that everything is happening the way we want, preview the page in a Web browser, and then take a look at the source code in Listing 10.1. LISTING 10.1 1 2 3 4 5 6 7 8 9

HTML Generated with Dynamic Layer Attributes

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”>

10

300

Day 10

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

top: 3px; background-color: #FFFF99; layer-background-color: #FFFF99; border: 1px none #000000”> John Ray
Age: 99
Phone: 555-555-5555
A really swell guy

Robyn Ness
Age: 62
Phone: 555-555-1234
A nice girl

Anne Groves
Age: 12
Phone: 230-555-1234
A cold fusion maniac

Paul Jeebers
Age: 12
Phone: 430-555-4444
An Ex-con

Creating Database-Driven Screens

61 62 63 64 65 66 67 68 69 70 71 72 73 74

301

z-index:1; left: 380px; top: 350px; width: 170px; height: 158px; left: 217px; top: 3px; background-color: #FFFF99; layer-background-color: #FFFF99; border: 1px none #000000”> Jack Dairyfay
Age: 62
Phone: 555-555-7123
A math wizard

Code Analysis Each of the tables is defined appropriately using the last name of each person as ANALYSIS the id of the layer (lines 8, 21, 34, 47, and 60). The positioning attributes are all included (lines 9, 22, 35, 48, and 61). There’s no difference between this document and one created by hand. The limits of where you can take a database-driven layout are bound entirely by how much time you want to spend laying out the screen, and the technical limitations of the HTML language. With only a little more work, you could set the database-defined layers to be draggable, or animated through a timeline.

Additional Functionality on Dynamic Screens You’re probably thinking “This is nice, but I really want to do more…” Never fear, there’s much more that you can do, but not all in one day. Using what you’ve learned so far today, you can actually create a system that lets you sort the records returned based on the information in one of the columns. The method for doing this that you’re about to learn is not the most efficient way, but it is quite straightforward and should give you something to work with until the advanced techniques are discussed later in the week.

Sorting Sorting records is simple. When you are defining a recordset, take notice of the Sort parameter at the bottom of the recordset definition window. Figure 10.16 shows the recordset definition with sorting enabled for the firstname field. Setting a sorting parameter alters the way that records are returned from a resultset. Given the information you currently have, you can create a Web site that offers sorting of the database results based on a click of the heading in the table cells.

10

302

Day 10

FIGURE 10.16 Sorting alters the way records are returned in a resultset.

For example, if you have four columns in the database that you want to sort by, here’s a quick and dirty way to establish a sorting system for the HTML: 1. Create four copies of the main HTML file that contains your dynamically generated page. 2. Modify the recordset in each of the documents so that it sorts based on a different fieldname. 3. Save each of the files based on the sorting parameter that the recordset is configured with. 4. Use a standard HTML link to connect the files so that the data can be displayed sorted in any format by moving between the documents. The drawback to this approach is that you end up with a different file for each of the fields that you want to sort by. Each of these files would need to be updated separately from one another—not very desirable if you have 50 files or so. There are better (programmatic) ways of sorting documents that you’ll learn about on Day 14, “Advanced Components: User Logins.” If you want to practice, however, this is a good way to start.

Summary Developing database-driven screens in UltraDev is as simple as setting up a database connection, developing a recordset, and dragging and dropping the fields you need onto a page. UltraDev makes previewing your final page extremely easy—the Live Data view is a feature offered in few other Internet application design packages. By actually deploying

Creating Database-Driven Screens

303

a designed page on a remote server and running it, UltraDev can create an environment that, even when using dynamic data, truly is “what you see is what you get.” The challenge in setting up a dynamic screen is in creating something visually appealing while still being functional. Many Web sites resort to a simple (and ugly) table view to get their data across to the user. When designing dynamic screens in UltraDev, you can use the entire UltraDev tool palette to lay out the screens. The UltraDev data bindings can be applied to any object’s attributes, allowing a database to determine any setting for any object that you can add to an HTML page. This makes it possible to create a completely dynamic page in which the database can determine the entire visual appearance of the site.

Q&A Q Do I have to use Live Data previews in order to design a site? A Absolutely not. The Live Data preview works best on low latency networks and fast systems. If you are stuck using a dial-in line and don’t have a local Web server that contains a copy of the content, the Live Data preview will really slow down your development. You can design without live data, but you’ll need to get used to the abstract recordset.fieldname representation of the live data. Q What attributes can be bound to dynamic data? A Any attribute of an HTML object can be bound to dynamic data. Even if the attribute cannot be bound directly, you can just insert the ASP/JSP/CFML code into the HTML, but this is highly unlikely. Q What sorts of data can be stored in a database? A UltraDev can only handle data stored as text. There are currently no provisions for handling binary data such as images. That doesn’t mean, however, that you can’t use the database to provide references to the objects. Q What do I do if the UltraDev-generated code becomes “confused”? A The easiest way to solve this problem is to avoid it completely. UltraDev will try to warn you if it thinks you’re about to do something that will corrupt the automatically maintained source code. As a general rule of thumb, always use the server behaviors palette to handle removing database-driven code from your Web page.

10

304

Day 10

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What two components must be in place before a dynamic Web page can be created? 2. How does UltraDev generate its Live Data view? 3. How do you create a repeating region? 4. What attributes can be bound to dynamic data? 5. How can images be used inside of a database? 6. What happens when a recordset is sorted? 7. Do you need an extra field if you plan to use an image within a database?

Exercises 1. Create your own back end database and develop a front end to it. Experiment with adding images to the database and referencing them on your dynamically generated pages. Try to lay out the page using something other than a simple table. Remember to take advantage of all the UltraDev development tools. 2. Expand your dynamically generated page to include database-bound attributes. If you’re using images, a good use of bound attributes is for image height and width properties (unless all your images are the same size). By adding height and width attributes to all images on a page, the page can be laid out in the browser before everything has finished loading.

WEEK 2

DAY

11

Storing, Editing, and Updating Data from an UltraDev Application Yesterday you learned how to create screens that are driven by a database, all from within the UltraDev point-and-click interface. Now, instead of static HTML, you can build Web sites that pull data from your live corporate (or not so corporate) databases. Think of the amount of time you’ll save rekeying information. Unfortunately, the only interface that you have to this data is the database itself. In today’s lesson, you’ll learn how to build a full database interface in the UltraDev application that will let you insert, update, and delete records in your database application. After today, you will be able to fully control a database system from anywhere on the Internet. Today, you will learn how to • Create forms. So far you haven’t seen the form tools of UltraDev because we haven’t had a reason to use them. Today, you will. • Connect a form to a database to save user-created data. The local database interface is no longer the only way to access your data.

306

Day 11

• Delete data from a database. Inserting is only part of the problem—you also need to delete information where appropriate. • Modify database entries. Although the process of deleting and inserting can be used as a crude form of modifying data, wouldn’t it be nice to be able to change the existing values and resave them?

Online Data Manipulation In order for you to plan your Web applications, you should understand the way that UltraDev builds its auto-generated code. UltraDev builds its programs based on a predetermined flow. The control of the application flows from one program to another, rather than building all the functionality into a single embedded file. For example, the traditional-style Web site that UltraDev can build works as follows: 1. Displays a list of elements in a database. 2. Provides a link from each element to an update/detail page. 3. When visiting a detail page, provides options for updating or deleting the record. 4. After an update/delete action is performed, moves to a new URL to confirm the results. Often this URL will be the URL where the user started. Don’t worry too much if this doesn’t sound as if it offers much flexibility for your Web site’s design. You’ll find that most sites actually do operate using this same pattern, but have hidden it rather well. The key is doing it in an interesting manner.

Note

If you’ve never worked with embedded programming languages before, you might wonder why the previously outlined sequence of events is unusual. The reason is that embedded programming languages offer a great range of flexibility. An entire Web application can easily be built in to a single file. When building applications by hand, I typically build the listing, updating, and deleting functionality in to the same file. Without modifying the UltraDev code by hand, you won’t be able to do this very easily.

The first thing we’ll need to do before inserting data into a database is create a form that corresponds to the fields in the database. You’ll need to use the form tools for the first time—don’t worry if this seems as though we’re heading back into the HTML design tools because we are.

Storing, Editing, and Updating Data from an UltraDev Application

307

Creating Online Forms In Day 10, “Creating Database-Driven Screens,” we created the personnel database view that lists each person in the database along with his picture. Figure 11.1 shows the personnel listing as we originally designed it. FIGURE 11.1 The personnel database was our first database-driven application.

11 The first thing that we’re going to do is add an input screen to the personnel database. What this does is add the data to the database—in order to update existing data, we’ll have to add additional coding to the system. For the personnel2 database used yesterday, the database definition is create table personnel2 ( firstname varchar(50), lastname varchar(50), age int, phone varchar(20), description varchar(200), imageurl varchar(80), primary key (firstname,lastname) )

We’ll need to create a form that has all these fields in it. I’m going to build this as an extension to the personnel database built yesterday, and I suggest you do the same. If you’d rather build today’s lesson as a new project, be sure to set up your database back end and create the appropriate connections to the database before continuing.

308

Day 11

Creating a Simple HTML Form HTML forms are one of my least favorite things to lay out. This might be part of the reason we’re just getting to HTML forms this far into the book. The very nature of forms make them one of the least cross-browser/cross-platform elements in the HTML language. On Windows systems, for example, tags alter the size of fields and other form elements. The Macintosh, however, displays form elements at one consistent size. Additionally, because different elements are rendered using various fonts on diverse platforms, it’s difficult to guess how a form on one system is going to look on another. Be sure that you know what your forms look like on different systems before declaring them done.

Note

Some of you will identify this as a bit of a rant, but I feel that it’s important to bring up at this point anyway. One of the key features of a good user interface is consistency. User input elements should be of a consistent size and form. When HTML alters the basic user interface, there’s a problem. HTML was designed to provide a platform-independent layout of information on any screen. Changing elements of the operating system’s user interface removes some of this independence.

Go ahead and start a new document within the same site as the UltraDev layout—name it userinput, and insert a 6-row×2-column table. Tables are typically used to lay out user input screens. Lining up form elements is extremely difficult without the use of tables because of the varying sizes of the elements. I typically start all my user input screens with a two-column form that has the same number of rows as it has fields. After you’ve added your table, go ahead and add all the field identifiers to the left column of the table. Now, here’s the fun part—adding in the fields. Before you can do this, however, you need to add the object that the fields will be a part of—that is, the form. Click the form element to insert a new form into the design document. Forms are represented by a dotted red line. After you’re done with this step, your screen should look similar to Figure 11.2. There’s a problem with the form that you just inserted. It doesn’t encompass the entire table that will hold your input fields. In order to have the entire table held within the form, you’ll need to edit the HTML directly. Working with forms directly in the document design view is really not worth the trouble. Inserting a form is simple—selecting that form to modify it is another story. For now, switch to the document design view and

Storing, Editing, and Updating Data from an UltraDev Application

309

move the tag so that it falls after the tag. This will place the entire table, and all the fields that you insert, into the form. Your HTML should resemble Listing 11.1. FIGURE 11.2 Add a list of the fields to the left side of the table.

LISTING 11.1

Simple HTML Input Form

1 2 3 4 <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”> 5 6 7 8

User Input form

9

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

11

310

Day 11

LISTING 11.1 30 31 32 33 34 35 36 37 38

continued

First Name
Last Name
Age
Phone
Description
Image URL

Make sure that the form tags encompass the table, as seen in lines 9 and 36. I often find it difficult to use UltraDev’s tools to position form tags and elements within forms. It’s often easier to just edit the code. You should also have a heading for the heading of each fields that will be included in the table (lines 12, 16, 20, 24, 28, and 32) and an empty cell reserved for the input fields you’ll be adding in a few moments (lines 13, 17, 21, 25, 29, and 33).

ANALYSIS

While your HTML editing screen is open, you can also set one of the most important attributes of the form—its name, as seen in line 9. The form name is used by UltraDev to determine what information is being saved. You can also set the form to use the POST method, in case it’s currently set to GET. As seen in line 9, I’m using the POST method. You don’t need to worry about the action right now. The action for the form will be set by UltraDev when it writes the code needed to insert records. You can also set form attributes without editing the HTML if you select the form in the design view and open the Properties palette. Unfortunately, this is easier said than done. If you want to use the Properties palette, the easiest way to select the form is through the tag listing in the lower-left corner of the document design window. Figure 11.3 shows the Properties palette for a form.

Text Fields Go ahead and switch to the Form Element palette and position your cursor in the first cell of the second table column—this will be the First Name field. Add in a text field by clicking the Text Field icon in the Tool palette or by choosing Text Field from the Form Object submenu under Insert. A simple field should be inserted into the document. Go ahead and position your cursor in the next empty cell and repeat this step until the entire form is filled in. When you’re done, your screen should resemble Figure 11.4.

Storing, Editing, and Updating Data from an UltraDev Application

311

FIGURE 11.3 It’s usually easier to edit form properties by hand than to try to select the form and view its properties in the palette.

FIGURE 11.4 You should have a text field inserted for each of the input areas in the form.

11

After the text fields are inserted into the document, you’ll need to manipulate them slightly so they can be used to return data to your UltraDev application. Select each of the fields, one at a time, and open the Properties Inspector palette. Using the Property palette, you can change the type of text field that is being used in the document. The three types of fields available from the one Text Field tool are as follows: Single line—Inputs a single line of text at a time. Although you can use this to input long sentences and even paragraphs, it’s mostly useful for gathering one or two words from the user. This is the default text field type. Multi line—Lets the user type in multiple lines of data in a more free-form style. This field type does not allow styles as in a traditional word processor, but does give the same cursor control that users are accustomed to. Although abstracted behind the Text Field tool, this form element is actually quite different from the other two.

312

Day 11

Password—The password field is just what it sounds like, a field for entering passwords. This field type is identical to the single line field, but it replaces the user input with symbols so that it can’t be read. In all honesty, there is very little protection offered by using this field on a page. It does not secure a site and only offers a very basic visual form of protection. Besides setting a field type, you also need to set a name for each field. This name will be used to match the data from the form with the data in the database, so make sure that you choose a good name.

Note

In case you were wondering… There are pros and cons to naming the form fields the same name as the database fields. The pro is obvious—it enables you to quickly match up your fields between the form and database. On forms with hundreds of fields, that can make a big difference. On the con side, it exposes some of the inner workings of your database. It is unlikely that this would be a problem on a properly secured system, but it does give a hacker a leg up on finding out how your system works.

The Properties palette for the first field in my input document is shown in Figure 11.5. FIGURE 11.5 Configure your field type and name through the Properties palette.

A few other fields can be set in order to restrict the user’s input or change the way the field is displayed onscreen. They are as follows: • Char Width—The character width attribute determines the number of characters that can be entered into the field and displayed onscreen at a time. This does not

Storing, Editing, and Updating Data from an UltraDev Application

313

affect the number of characters that the field can hold; only the number that can be seen. • Max Chars (Single line and Password only)—The maximum number of characters a field can hold. Use this value to set an upper limit on the typing that a user can perform. This is useful for keeping data within the defined size limits of the fields. • Num Lines (Multi line option only)—For multi-line displays, this attribute replaces the Max Chars option. The Num Lines determines the number of rows of text that will be visible to the user when he enters information. There is no way to set the maximum number of characters in a multi-line field, other than checking its size with JavaScript. • Init Val—The initial value that the field will contain. This value will show up in the form when it is first displayed. This value can be edited by the person viewing the form.

Caution

Be careful when using initial values. Users have a tendency to skip over already filled-in fields. You might end up with bad data unless you force them to choose a value.

• Wrap (Multi line option only)—The Wrap attribute controls how text is wrapped when the end of the line is reached in a multi-line form element. The Off setting will scroll the text area horizontally when the user reaches the edge of the text area. Pushing return is the only way to start a new line. Virtual will automatically place the cursor on the next line when it reaches the edge of the text area but doesn’t add an EOL (End of Line) character to the text. Physical behaves the same way as a Virtual wrap, but it does insert an EOL at the end of each line. Go ahead and practice with these values as you set up your table fields. Remember to uniquely name each field with an identifier that will be easy to remember. You might want to make the Description field into a multi-line field and give the user a larger area to type in.

Submit Buttons As a final step, the form needs some way to be submitted back to the server for processing. The easiest way to do this is by adding a submit button to the document: 1. Position the cursor where you want the submit button to appear. Make sure that this is located within the form.

11

314

Day 11

2. Click the button item on the Object palette, or choose Button from the Form Object submenu under Insert. A new button will be added to your document. By default, this is created as a submit button. After you’ve added the button, select it in document design view and open the Properties palette to view the attributes of the button. The properties for a simple submit button are shown in Figure 11.6. FIGURE 11.6 You can name your button from the Properties palette.

If you aren’t doing anything complicated, most likely all you need to set is the Label. The button label is the text that is actually drawn inside the button graphic on the page. Don’t confuse this with the button name, which actually provides a form field name for the button object.

Tip

What good is a field name for a button? Actually, buttons are just as valid an input device as any other field on a form. For example, assume that you have a form collecting data on your inventory of video tapes. Rather than having a radio button or text field that needs to be set each time for the rating (G, PG, R, or NC-17), you could set the value as part of the submit process. You would just create four submit buttons for the form that could be named Rating; each would submit a different value for the movie’s rating when it is clicked. Don’t discount the usefulness of the button as an input device.

There are two other actions that a button can take on. The action you’ve probably seen before on other pages is the reset action. A button defined as a reset button and added to

Storing, Editing, and Updating Data from an UltraDev Application

315

a form will automatically change all field values to their defaults when it is clicked. This provides a convenient way for a user to start over without having to manually clear out data from the fields in the form.

Caution

Be careful when labeling and placing your Submit and Reset buttons on the page. If a user spends 15 minutes filling out a form on a page, only to click the Reset button because it is featured more prominently than the Submit button, he’s likely to give up.

Note

The reset action resets the form to its initial empty state. If you used initial values for your fields, however, those values are restored as well.

The other type of button action is no action at all. This is generally used in conjunction with JavaScript to provide client-side behaviors. After adding the button (or buttons, if you choose to use a Reset button) to your page, the data input screen should now resemble that of Figure 11.7. FIGURE 11.7 The form for submitting data to the personnel database is now complete, but isn’t yet connected to the database itself.

Image Buttons If you want to be fancy with your presentation, there is another type of button you can use to submit data: an image button. This button is a bit strange in that it doesn’t submit data to the server in exactly the same format as the standard HTML Submit button. To

11

316

Day 11

add an image button to your document, click the Image Field item in the Objects palette. As with any image, you’ll be prompted for the location of the image file. This is a pureHTML construct and doesn’t use any JavaScript, so it is just an image—there is no down or rollover state for it. The behavior of the Image Field starts out the same as a standard Submit button—it submits the contents of the current form to the server for processing. However, it also sends additional data about where the user clicked on the image button in order to cause the submit to take place. This additional information is encoded into two additional variables named with the original image field name, but with a X and a Y on the end, and it contains the X and Y coordinates of the user’s click in the image. This information can be used for processing real-time imagemaps of images that are generated on-the-fly, or for guessing games in which the user must click somewhere on an image in order to win a prize. The drawback to using image fields as buttons is that they don’t offer the same level of feedback as traditional buttons, and they are difficult to maintain. Every time you want to change a button on your page, you have to edit the graphic of the button—not just edit its label. On a positive note, I find that graphical buttons are “prettier” and offer a friendlier browsing experience. They can be laid out on the screen precisely as you want them, rather than you relying on the browser to render a button with the same dimensions you happened to have in mind.

Rollover and Text-Link Buttons One more way exists to create buttons for your site. This is the most flexible way of defining Submit and Reset buttons for a form, but is also the most incompatible. JavaScript has two commands that correspond to the submit and reset actions that we’ve already seen with the standard HTML buttons: document.forms[0].reset() document.forms[0].submit()

These two functions (reset() and submit()) will reset and submit a form in the document. In the code fragments shown, they operate on the first form on a Web page (forms[0]). You can easily change anything that operates as an HTML link so that it will work as a Reset or Submit button. For example, suppose that you want to add a Submit button for the first form on your Web page. Just follow these steps: 1. Insert the object that you want to use as a Submit button. This can be a standard text link, a rollover image, and so on. 2. Instead of supplying a URL for the link/image/whatever, use the following JavaScript: javascript: document.forms[0].submit();.

Storing, Editing, and Updating Data from an UltraDev Application

317

That’s it. You can also add a Result button by using the same technique along with javascript: document.forms[0].reset();.

Caution

Using JavaScript to submit forms relies on a user’s browser to both support JavaScript and have JavaScript turned on. For those who aren’t using JavaScript, the form will be inoperable.

Other Form Elements Besides the text field, image field, and Submit buttons, several other form objects can be used to build your data input screens. Rather than discussing these in depth now, we’ll take a closer look when we start using them later in this chapter. For now, here is a summary of applications for which these special types of data input fields will be useful: • Check Box—The check box is used to create a group of items that can be turned off or on. This is usually used on a form to select multiple attributes that apply to something (implying an AND state). The most common misuse of the check box is applying it to OR states, such as “Click yes OR no.” • Radio Button—Similar to the check box, the radio button also enables users to choose among several different attributes on a form. Unlike the check box, however, the radio should be used when an OR state is implied. If two radio buttons share the same name, they are mutually exclusive of one another. (Both cannot be selected at the same time.) Radio buttons are sometimes used in the place of check boxes. If each radio button is named differently, this almost works, except that when a radio button is set, it cannot be unselected unless a Reset button is supplied for the form. • List/Menu—The list/menu is a rather bizarre construct because it behaves very differently between its two different forms. In one configuration, it is simply a popup menu that can be used to choose one option among several choices (that is, choose your state from the list). In its other incarnation, it displays as a rectangular scrolling list in which multiple items can be highlighted. In my opinion, although they take more room, check boxes are better suited to providing the “pick all that apply” functionality than lists are. • File Field—The file field is finally starting to be useful now that all modern browsers support it. If you’ve seen one of the “Upload your files to 20MB of free remote storage” Web sites, you’ve probably seen the file field in use. The file field

11

318

Day 11

enables a Web page to submit an entire file to a server for processing. Some of the more interesting uses of this feature have been on Web pages that allow retailers to customize their merchandise by uploading a logo that is then mapped to their product catalog. • Hidden Field—Hidden fields are used to carry data along with the form that you might not really want the user to see. Check out Day 6, “Introduction to Dynamic Web Applications and Database Design,” for more information on variable passing. Hidden fields should never be used to pass sensitive information. A user can always create a local copy of a form with hidden fields and manually edit the fields to contain whatever data he wants. A bank, for example, wouldn’t want to pass a user’s current balance around through a hidden field. The user could potentially edit the value and drastically increase his net worth. • Jump Menu—The jump menu is not a form element, but is a JavaScript construct that you can use on any page, regardless of whether it is part of a server-processed form. Creating a jump menu in your document creates a simple pop-up menu that visitors can use to quickly jump to different parts of your Web site.

Adding an Insert Action An insert action creates a new record in a database. Because we’ve designed a form to add records to the personnel database, let’s go ahead and connect the form to the existing database. Once again, if you’ve chosen to start a new project for this section, make sure that your database connection is in place and that you have a way to view the records in the database once they have been added. Attaching the form you’ve created to the database is as simple as adding the Insert Record action from the Server Behaviors palette. You do not need to define a recordset because no dynamic information is being displayed in this page. Go ahead and define an Insert Record action now: 1. Open the Server Behaviors palette. 2. Click the + button. 3. Choose Insert Record from the available server behaviors. The Insert Record screen will be shown. This screen lets you tell UltraDev where data should be stored and how to store it. A screenshot of a properly configured Insert Record behavior is shown in Figure 11.8.

Storing, Editing, and Updating Data from an UltraDev Application

319

FIGURE 11.8 The Insert Record behavior must be configured so that the form data can find the appropriate database table to be stored in.

You’ll need to fill out all the sections of this screen in order for your Insert Record behavior to work appropriately. UltraDev does a good job of guessing how a form should be matched up with a database table based on the names of the fields in both objects, so hopefully only a small amount of work will actually have to be done by hand. Make sure that each of the behavior attributes are set up appropriately for your application: • Connection—The database connection that you want to use to store the data. If you haven’t defined a connection to the database yet, you can click the Define button to set up a connection now. • Table to Update—Choose the table in the database that will hold the information you are submitting from the form. This table should have a matching field for every field that is being submitted from the HTML form. UltraDev does not currently have the capability to insert data into multiple tables simultaneously except through the use of views. • Form—The HTML form that is providing the user input to be stored. If you named your form appropriately, you should have no problem making the right selection here. • Form Elements/Column—The Form Elements configuration is the most important part of configuring the behavior. This is where one matches the form fieldname (listed on the right) with the table fieldname (on the left). To start, all the form fields are shown on the right. UltraDev might have made some default matches by comparing the names of the form fields to those in the table. Where a match has not been made, the tag appears in the right column. To attach a form field to a column, make sure that the field name is selected in the Form Elements list, and then choose the table field to attach it to from the Column pop-up menu.

11

320

Day 11

• Column/Type—Next to the Column pop-up is a second pop-up menu that lets you choose the type of data that is being saved. If you are saving a date, for example, choose Date from the pop-up menu. Because check boxes are commonly used for Boolean (on/off, true/false) values, you can choose how a check box on/off state is saved from one of three different options (Y/N, 1/0, or -1/0). • Go To URL—The URL that the user should be taken to after the insert action is completed. For my page, I’m just redirecting the user back to the main personnel listing. If everything worked correctly, the new database entry should show up in the listing. Go ahead and complete the configuration screen, and then give your new application a test run. First, open the newly designed input screen and try typing in some information. Press the Submit button and your new entry will appear in the personnel database. If, for some reason, this doesn’t work, make sure that you’ve done the following: 1. Synchronized the remote server and the local server. 2. Filled in at least the field designated as the primary key. In the database definition that I’m using, the firstname and lastname fields are set as the primary key. 3. Specified a unique value for the primary key. These are really just common sense rules, but they’re also easy to overlook. If an error occurs during the process of inserting a record, the embedded language processor will display an error. For example, trying to insert multiple records with the same primary key generated this error in my ASP application: Microsoft OLE DB Provider for ODBC Drivers error ‘80004005’ [TCX][MyODBC]Duplicate entry ‘’ for key 1 /Test1/TMP8kprugf0ye.asp, line 49

That’s about all you need for inserting records. Of course, you can design the input screen to look like anything you want.

Tip

As you will learn later, many times the primary key is generated automatically by the database server behind the scenes. This keeps the responsibility of “uniqueness” on the server and not on the user—making it very unlikely that you’ll ever see an error message such as the one just shown.

Storing, Editing, and Updating Data from an UltraDev Application

321

Detail Screens and Record Deletion Now that you can add information to your database, how about deleting it? With the ability to add and delete, you gain complete control of your information from within a point and click interface. In many applications, before deleting data, the details of a record are shown, and the user is given the option of deleting it. In this part of the lesson, you’ll learn how to create a detail screen and delete information—a “twofer.”

Detail Screens Let’s start with a detail screen. This is identical to the repeating record displays that you’ve already seen, but minus a repeating region and only displaying the fields from a particular record. This is slightly different from what we’ve been doing and will require a few additions to our current knowledge of what UltraDev has to offer—most notably, how do we tell UltraDev what record we want displayed on the detail screen? First things first: Design a basic detail screen, laid out in a table. Don’t worry too much about the design now—you know the layout tools, and you can certainly alter the screen after you have it up and running. Now you need to design a recordset that properly describes the data you want to retrieve. Previously, the recordset just selected all the information in the database. This time you have a very specific set of information you need to retrieve—a single record. The easiest way to retrieve a single record is to apply a filter to the search. Figure 11.9 shows a filter that is configured for the firstname field and the URL parameter firstname. FIGURE 11.9 The filter can be used to select information based on a URL parameter.

So, what exactly does this mean? It means that, in order for a record to be returned, the firstname field must equal a parameter named firstname specified in the URL. As you recall, the variable-passing methods discussed on Day 6, you can pass variables by appending their

11

322

Day 11

value to the URL. In order to pass the value John in the firstname parameter, the URL might resemble http://www.someurl.com/details.asp?firstname=John. This is the easiest and most common way to pass a value to the page that displays the record details. There are several other ways that you can pass information to a recordset or other server behavior. These values are located under the variable-passing pop-up menu in the filter section: • URL Parameter—The default method of getting a variable to the server behavior. A URL parameter is passed by appending the variable name and its value to the URL. • Form Variable—A variable submitted from a form. If you are using the POST method in a form, you’ll need to use this setting to access its value. • Cookie—If a cookie is set and returned to the server application, it is accessible through this variable passing type. • Session Variable—Like a cookie, a session variable, if set, is available throughout the Web application. We’ll use session variables to create login systems in Day 12, “Writing Advanced Database Queries.” • Application Variable—An application variable is accessible throughout the entire Web application. This type of variable isn’t accessible in all server models. • Entered Value—A value that is defined prior to the program running. Not all these variable passing types are accessible in all the server models. The most useful of these are the URL parameters and session variables that we’ll be using extensively in the rest of the book. Back to the matter at hand: selecting a specific record from the database to display in the detail screen. In the simple recordset dialog window, I’ve set a filter to select records based on a user’s first name. What happens if two or more people have the same first name? Obviously, we need a better selector for the record. The best way to select a record is based on its primary key because this guarantees that only one record can be returned. Unfortunately, the personnel table has a primary key defined by two fields. How can two filters be set at once? The answer is simple—by defining an advanced recordset query. To get a good head start on the advanced query, be sure to define the simple query first. Take a look back to Figure 11.9 if you haven’t set up your query yet. With the basic query defined using a single filter, open the query by double-clicking its name in the Server Behaviors palette. Then click the Advanced button to open the advanced query screen. This screen gives you direct access to the SQL that the server uses to generate the page.

Storing, Editing, and Updating Data from an UltraDev Application

323

The SQL that has been generated so far reads as follows: SELECT * FROM personnel2 WHERE firstname = ‘MMColParam’

The firstname parameter has already been handled, but we still need to add a check for lastname as well. Go ahead and edit the SQL so that it resembles the following: SELECT * FROM personnel2 WHERE firstname = ‘MMColParam’ AND lastname = ‘MMColParam2’

Note

An alternative way to add the AND lastname= to the SQL is to expand the Tables hierarchical menu at the bottom of the Advanced query screen. Find the table you’re querying and expand it. Finally, select the column in the table that you want to query (lastname), and then click the WHERE button to the right. This will add a new condition to the SQL. We’ll cover this and other advanced searches in detail tomorrow.

After the SQL has been defined, you need to let UltraDev know exactly what to do with the MMColParam2 value that was entered. This name and the MMColParam label already used in the HTML are both internal variables used by UltraDev and the server scripting model. You can change these to anything you prefer. In order to tell the application what these variables are, you must edit the Variables portion of the configuration. Because you already defined a single filter in the simple query configuration, there is a single value set. Click the + button to add a new variable to the program, and then click through each of the fields’ Name, Default Value, and Run-time Value. Fill in the fields with values appropriate to the application: • Name—The name by which UltraDev will refer to the variable. You can use this name directly in the SQL after it is defined. Because the SQL was entered with MMColParam2, this should be the value to add into the Name field. • Default Value—The initial value that the variable will take if none is specified. You can fill in anything in this field. You might want to add a generic user to your personnel database and have that user displayed by default on the details page. • Run-time Value—The value that is set when the program runs on the server. For an ASP application, you can use Request.QueryString(“lastname”) to refer to the lastname variable passed through the URL. In JSP, you would change that to request.getParameter(“lastname”), whereas ColdFusion developers can simply use #lastname#.

11

324

Day 11

A properly configured advanced query is shown in Figure 11.10. This is, however, specific to the ASP server model. If you are using one of the other models, you’ll need to adjust your code appropriately as previously discussed. FIGURE 11.10 The advanced query builder offers more flexibility at the price of higher complexity.

We’re about done, and are almost ready to test the detail screen. You’ve configured a recordset, but you haven’t used any of the data from it yet. Open the Data Bindings palette and, one-by-one, drag the fields from the data bindings to their corresponding positions in the table. The final detail view that I’ve defined is shown in Figure 11.11. FIGURE 11.11 At last, the detail screen is finished!

Once you’ve set up your detail page, you can test it using one of the cooler features of the UltraDev interface—the Live Data view, but with dynamic variable values supplied through the URL parameters: 1. Switch to the Live Data mode under the View menu. 2. If you set default values for the variables, you should immediately see that record in the document design view.

Storing, Editing, and Updating Data from an UltraDev Application

325

3. In the empty URL field at the top of the document design view, add some URL parameters: firstname=Robyn&lastname=Ness. (Of course, if you don’t have a person named Robyn Ness in your database, use a different name.) 4. The data for that record is now displayed in the detail screen. 5. Try this for the other records in your database.

Caution

Do not expect robust error handling. UltraDev writes the code to do the job, but don’t expect magic. If you request a record that doesn’t exist, you’ll get an error from the application server. This isn’t really a fault in UltraDev because it is impossible for the software to know exactly what is going to happen or what errors it can expect to occur in the database. In order for robust error handling to be implemented, you’ll need to edit the code by hand. Luckily, this won’t often be necessary because the links to the detail page will eventually be generated automatically.

Deleting Records The detail screen is now complete, and we can focus on providing a means of deleting the record that is being displayed. This is actually a very simple process that will only take a few minutes to set up and test. Server record deletion requires that a form be submitted—this process is what triggers the execution of the DELETE command on the SQL server. On the detail screen, go ahead and add a new form—be sure to get in the habit of naming the form something appropriate. All you need to add to the form is a single button. Just label this button Delete, and you’re ready to go. Now it’s time to add the Delete Record behavior. Click the + button in the Server Behaviors palette and choose Delete Record. Configure the dialog box, shown in Figure 11.12, according to the following standards: • Connection—The connection to the database server to use. Use the same connection you used for the detail screen. • Delete from Table—Once again, use the same table used to build the detail screen. This is the table that the record will be deleted from. • Select Record From—This is where things get interesting. This is the recordset that contains the record you want to delete. In the case of the detail screen, the only record in the recordset is the record we want to delete. Select the recordset used in the detail screen.

11

326

Day 11

• Unique Key Column—The unique column is set as the primary key in the database. Unfortunately, we’ve got multiple primary keys in the currently defined table, so what column should be set? In this case, it doesn’t matter. The recordset we’re deleting from was defined to only return a single record, so it doesn’t matter what gets set here. Under normal circumstances, set this to the primary key column. Click the Numeric box if the column holds numeric values. • Delete By Submitting—Choose the form that will delete the record after it is submitted. This should just be the form with the Delete submit button on it. • When Done Deleting/Go To URL—Choose the URL to go to after the record has been deleted. I want to send the user back to the personnel listing. You can do the same, or point the page to a “Your Record Has Been Deleted” message. FIGURE 11.12 Configure the form that, when submitted, will delete the record.

Once configured, click OK and open one of the records in the database using the same technique shown earlier (specifying parameters in the URL). If you open the page in a Web browser, you should be able to click the Delete button for the form, and the record will be deleted. There’s nothing to it.

Tip

When testing behaviors that involve submitting a form, be sure to use your Web browser rather than the Live Data view; otherwise, the behavior might appear to be broken.

Linking to a Detail Screen UltraDev automates the process of linking to a detail screen (although the server behavior name might make you think that it generates the entire detail screen for you). For the sake of demonstrating, let’s add a details link to a page that displays a list of records in the database.

Storing, Editing, and Updating Data from an UltraDev Application

327

In order to do this, you’ll need to add a new column to the table that will contain the link. For example, the document design view (no live data) for my newly modified recordset view is shown in Figure 11.13. FIGURE 11.13 Reconfigure the repeating recordset view so that there is room for a details link.

You can certainly design your screen differently—this is just a basic idea. If you prefer, you can even use one of the existing dynamic fields to create your link. If you’re creating a new object for your link, go ahead and insert your text or image now. Follow these steps to add the details link to your document: 1. Open the Server Behaviors palette. 2. Click the + button and choose Go To Detail Page. 3. Set up the details link configuration dialog, seen in Figure 11.14. FIGURE 11.14 UltraDev automates the process of linking to the detail page.

4. UltraDev automatically inserts the link into your document. 5. If you need to pass multiple parameters, edit the source code as necessary. Configure the Go To Detail Page dialog box with these parameters: • Link—The link to use to the detail page. If you selected an object before adding the server behavior, this should already be set. • Detail Page—The detail page you created. • Pass URL Parameter—The URL parameter name to be transferred to the detail page. Once again, for the database I’ve been using in this chapter, there are actually

11

328

Day 11

two values that need passed to the detail screen (based on the primary key): the firstname and lastname fields. Just set up one of these parameters now; we’ll get to the second shortly. • Recordset/Column—The recordset that contains the data to pass to the detail page, and the field that will be passed in the URL parameter. I’m passing the firstname field in the firstname URL parameter just to keep things consistent. • Pass Existing Parameters—Pass Existing Parameters lets you pass all the currently set URL parameters and any form-submitted parameters to the detail page. There’s no reason to use that functionality here. Click OK when you’ve finished adding the Detail Page server behavior. Before you can use the new link, it needs to be set so that it also transfers the lastname URL parameter and lastname database field to the detail page. Open the source view of the document and look for the link to the detail page. If you’re using ASP, you should see something similar to this inside the link definition: “firstname=” & PeopleInfo.Fields.Item(“firstname”).Value

This ASP code concatenates “firstname=” with the value of the “firstname” field in the current database record. In order to add the “lastname” URL parameter, you need to concatenate the equivalent of “&lastname=thelastname” to the code. Do this by changing the line to read: “firstname=” & PeopleInfo.Fields.Item(“firstname”).Value & “&lastname=” & PeopleInfo.Fields.Item(“lastname”).Value

Now, the document should be ready to test. If you’re using JSP or CFML, just use the same technique—find the code that UltraDev has added to the document and append an URL parameter onto the existing link text.

Note

You’re beginning to notice that UltraDev has a few limitations, aren’t you? For example, the inability to deal with multiple primary keys in a table is slightly disturbing, but this chapter was created to show a worst case scenario. In future projects, the databases will be designed with a single field as the primary key. The best way to deal with these limitations is to take UltraDev as far as you can, and then edit the auto-generated code to include the functionality that is missing.

Storing, Editing, and Updating Data from an UltraDev Application

329

Your record display and deletion system is done. You should now have a screen created that allows you to insert new records, one that displays all your records (created yesterday and modified today), and one that shows record details and offers the option to delete that record. Although this certainly does give you control over your data, it is still missing something—the ability to update data that is already in your database. Rather than having to delete and re-enter information, why not just update it within the database?

Update Screens Creating update screens is a combination of the techniques you’ve already learned, coupled with a brand new function—the ability to load existing data directly into a form, allowing it to be edited and resubmitted. The best place to start for an update screen is with the already designed detail page. If it isn’t open already, open the detail page that you created and save a copy called Update on your system. If you decide to start from scratch, you’ll need to define a recordset using the Advanced query tool that is identical to the recordset defined for the detail/delete page. Next, modify the Delete form that exists on the page as follows: 1. Expand the form to encompass the entire Detail (soon to be Update) table if it doesn’t already. Rename the form to something appropriate as well. This is easiest and fastest to do by directly editing the HTML. 2. Change the Delete submit button to be more descriptive of the task that the new page is going to perform—namely updating. 3. Delete all the previously defined server behaviors from the form except for the Recordset behavior. If you don’t do this, you might end up accidentally deleting the record you’re updating. 4. Finally, as with the Insert screen you built previously, add text input fields to each of the appropriate cells in the table. Name them with respect to the data they will contain. With the half-insert/half-detail screen created, open the Server Behavior palette, click the + button, and add the Update Record behavior to your document. The Update Record screen, displayed in Figure 11.15, is a hybrid of the Detail and Insert screens.

11

330

Day 11

FIGURE 11.15 The Update Record dialog box is a combination of the detail and insert dialogs.

Add the appropriate values to the Update configuration, much as you did with the past two server behaviors we’ve covered: • Connection—The database connection containing the recordset you’re updating. • Table to Update—Well…, the table to update. • Select Record From—Choose the recordset that defines the record being updated. As in the detail screen, this recordset only contains a single record. • Unique Key Column—The column in the database that makes up the primary key. Unfortunately, once again, UltraDev’s limitations are showing—our database’s primary key is made up of two fields, not one. In order to get around this, the recordset itself returns only a single record based on the two fields that make up the primary key. Because only one record can be in the recordset, the setting of the Unique Key Column is not important. If you are setting up your database with a single value primary key, use it here. • Get Values From Form—The form that, when submitted, will contain the updated values to be stored in the database. • Form Elements/Column—Match the form fieldname (listed on the right) with the table fieldname (on the left). To start, all the form fields are shown on the right. To attach a form field to a column, make sure that the field name is selected in the Form Elements list, and then choose the table field to attach it to from the Column pop-up menu. • Go To URL—The page to transfer the user to after a record has been updated. As with the detail page, I’m simply going to send my users back to the main database listing so that they can see the updated personnel list.

Storing, Editing, and Updating Data from an UltraDev Application

331

Click OK when you’ve finished with the configuration, but don’t sit back just yet. The server action you’ve just created does nothing but update a record based on the information you provide in a form. It does not, sadly, fill in the form with the record data that you’re updating. In order to do that, you need to bind the form fields to data in the recordset.

Creating Dynamic Forms Binding a form element to a database record is simple, but there are two ways to do it. The first way is by adding a specialized server behavior that puts a friendly face on the process. The second technique uses the Properties palette to create the dynamic binding. Personally, I favor the Properties palette method because it is consistent across more than just form elements (remember how the layer attributes were made dynamic yesterday), but we’ll look at both techniques now.

Dynamic Forms Through Server Behaviors The automated way of creating a dynamic form element is quite straightforward. Assuming that you want to connect the text fields in your form to their corresponding database values, follow these steps: 1. Click the + button in the Server Behavior palette. 2. Choose Dynamic Elements and Dynamic Text Field from the pop-up menu and submenu, respectively. 3. In the dialog box shown in Figure 11.16, set the Textfield to the form field that you want to be filled. FIGURE 11.16 A built-in server behavior exists for creating dynamic form elements.

4. Finally, click the lightning icon in the Set Value To field to open up a view of your defined recordsets. 5. Choose the recordset and field you want displayed in the form element. 6. Click OK to close the recordset window. 7. Click OK to finish defining the dynamic field value. 8. Repeat these steps for all the form elements in the update document.

11

332

Day 11

After the dynamic elements are added, your form is complete, and should look something similar to mine, shown in Figure 11.17. FIGURE 11.17 The completed update form is shown here.

Note

When you added the dynamic text field to the document, you probably noticed that UltraDev can also create database-driven check boxes, menus, and other form elements. These are set up in a very similar manner to the text field that we just used. We’ll use these additional behaviors on future projects in the book.

Dynamic Form Elements Through Properties Although the Server Behavior method of adding a dynamic form element is easy, I don’t find that it is as convenient (or as consistent with the rest of the UltraDev interface) as binding a dynamic value through the Properties palette. As you learned yesterday, the Property Inspector palette can be used to dynamically bind any database value to an HTML object attribute. This feature easily can be applied to form elements as well as to other HTML. For example, to dynamically set the value of a field using this technique, implement the following steps: 1. Select one of the fields in your update form. 2. Open the Properties palette and select the lower tab on the left to open the Tag Attribute listing.

Storing, Editing, and Updating Data from an UltraDev Application

333

3. Click the + button to add a new attribute to the tag. 4. Use the pop-up menu button in the first field to choose the value tag (or initial value if you’re working with a multi-line text area) because you want to dynamically bind the value of the form element. 5. Click the lightning bolt icon at the far right of the attribute line. This will open the recordset dialog box that you’ve seen before. 6. Choose the recordset and field you want to use to fill your form element. 7. Click Ok. If you followed all the steps, your Properties palette view of the text field should now resemble Figure 11.18. FIGURE 11.18 The Properties palette can also be used to quickly bind an object attribute to the database.

11

As a final step, you can connect the update document into the main database record display screen by following the same procedure as in the Detail screen. In fact, because the Update screen shows all the same information as the Detail screen (but in editable form), you might want to just use the Update screen as the Detail screen. Refer to the previous section “Linking to a Detail Screen” for more information on setting up your connection. Be sure to try your work once you’re done. You should now be able to update records within your database tables.

Auto-Generating Forms and Screens For the past two days, you’ve created database listings, detail screens, insert screens, and update screens by hand. You’ve probably also noticed that there is a great deal of repetition when writing the HTML. To give you a head start, Macromedia has included several

334

Day 11

new entities in the Object palette that let you generate generic versions of these forms very, very quickly. Although these features are time-savers, you might find that you prefer creating your own screens by hand. I don’t like trying to adapt existing designs into what I’m visualizing in my head. However, if you just need to get a simple database access site online quickly, these new objects can give you everything you need in seconds.

Caution

It is very important that you understand the server behaviors we’ve discussed today if you plan on expanding the automatically generated documents that these objects create. After they are added to a site, you must work directly with their underlying server behaviors to edit their functionality. Only the creation phase is automated—editing is up to you.

Switch to the Live Objects category within the Objects palette. We’ll be looking at the Master Detail Page Set, Record Insert Form, Record Update Form objects—the first, fourth, and fifth icons in the palette, respectively.

Note

As with just about everything in UltraDev, these objects are accessible from the menu system as well as the Object palette. You can use Live Objects under the Insert menu to access these pre-built forms if you don’t want to clutter your screen space with the Object palette.

Master-Detail Pages To create the record listing and detail pages that we’ve already seen using these template objects, you must first create a new document that contains nothing but the recordset that you want to attach to. To try this, create a new document now, and add a new recordset— such as the personnel recordset we’ve been using for the past two days. Figure 11.19 shows the recordset definition being used. Next, click the appropriate icon in the Object palette, or use the Live Objects submenu of Insert to add the Master Detail object to the current page. You’ll be prompted to enter some information about the records you want to display, and so on, as seen in Figure 11.20. Configure these areas as follows:

Storing, Editing, and Updating Data from an UltraDev Application

335

FIGURE 11.19 Add a recordset to a new document.

FIGURE 11.20 Configure the Master Detail object to include the information you need.

11

Recordset—The recordset that you just defined for the document. Columns—Using the + and - buttons, you can add and delete columns from the display that will be generated. You can also use the up and down arrows to change the ordering of the column display. Number of records—Choose to show only a few records or all the records at a time. If you choose to limit the number of records displayed, a navigation bar will be added automatically to allow the user to move to additional records. You’ll learn more about navigation bars and how they work in Day 14, “Advanced Components: User Logins.” Link to Detail From—Choose from the pop-up menu which column should provide the link to the detail page.

336

Day 11

Pass Unique Key—Select the column that uniquely identifies each record. This will be passed in the URL when the user clicks on the field chosen in Link to Detail From. Detail Page Name—Enter a name to use for the auto-generated detail page or click Browse to choose an existing file.

Caution

Be sure to include the appropriate file extension (.ASP,.JSP, and so on) when choosing the detail page name. If you don’t, UltraDev will create the file without an extension and then proceed to open it in Code view because it cannot identify it.

Detail Page Fields—Like the previous columns configuration, here you can choose which columns are shown in the detail page, and what order they are shown in. Presumably you would show more fields in the detailed view than in the master view. When you’ve configured the screen to your liking, click the OK button and sit back. After a few moments of chugging away, UltraDev will present you with your two new documents: the master screen and the detail page, as shown in Figure 11.21. FIGURE 11.21 Master and Detail screens will be generated after a few moments.

Note

As mentioned earlier, any changes you want to make in these documents will have to be made by hand. After the initial pages are generated, you must work directly within the Server Behavior and Data Bindings palettes.

Storing, Editing, and Updating Data from an UltraDev Application

337

As you can see, this simple-to-use object lays out the master record listing and detail screens extremely quickly. Using the other two objects, you can create the Insert and Update pages with equal rapidity.

Record Insert Forms To create a new insert form that will add information to a database table, create a new empty document and choose the Record Insert Form entity from the Object palette or the Insert menu. The configuration screen shown in Figure 11.22 will be displayed. FIGURE 11.22 Choose the fields and captions you want displayed on the insert form.

11 Choose the settings you need to connect to the database: Connection—Choose the database connection to use. Insert Into Table—Select the table that should receive the incoming data. After Insert, Go To—Enter the name of the page to go to after inserting data, or click the Browse button and choose the file. Chances are, you’ll want to return to the master record listing page. Form Fields—The form fields area lists all the fields that will be included in the form, the label that will be placed in front of them, the type of field used to collect the data, and the format that should be used when the data is submitted to the server. Use the +/- buttons to remove or add fields to the form and the up/down arrows to rearrange the positioning of the elements in the form. UltraDev will automatically fill in these values for you, but you can change them at any time. To change a value, highlight it, and then modify the Label, Display As, and Submit As fields. Label—The label that should be included in the form for the highlighted field. Display As—The type of form element that should be used to represent the selected field.

338

Day 11

Submit As—The format of the data that is being submitted. Default value—A default value will be displayed in the form field. The lightning bolt icon can be used to select a recordset field to use as a default value. Again, click OK when you’ve finished configuring the Insert form. After a few moments, your newly generated form will appear, much like Figure 11.23. FIGURE 11.23 The resulting form isn’t necessarily pretty…but it’s functional!

Record Update Forms The Record Update Form is very similar in operation and configuration to the Insert form, but, similar to the Master-Detail object, requires a recordset to be defined before it can be added. Assuming that you’re continuing to work with the same system, create a new document and then add the exact same recordset to the document that you did for the Master Detail pages, but with one small tweak. Instead of selecting all the records for the recordset, you must define a filter—after all, only one record is being updated! Use the filter function of the recordset definition to choose one of the fields based on a URL parameter. In the personnel database examples, the image is a unique identifier. Figure 11.24 shows the query definition needed to set up the document so that a record is selected by comparing the imageurl field to a URL parameter also called imageurl. With the recordset defined, add the Record Update Form object to your document from the Insert menu or the Object palette. Shown in Figure 11.25, the configuration is almost identical to the Record Insert Form you just used.

Storing, Editing, and Updating Data from an UltraDev Application

339

FIGURE 11.24 You must provide a filter to choose the record you want to edit.

FIGURE 11.25 Configure the record update form’s fields in the exact same fashion as the record insert form.

11

A few minor differences exist in the configuration, which are documented here: Table to Update—Choose the database table that will be receiving the updated information. Select Record From—Select the filtered recordset that you’ve created to “seed” the form. Unique Key Column—Pick the database column that uniquely identifies the record. This should be the same column you are using to filter the recordset. Click the Numeric box if this is a numeric column. Default Value—In the Record Insert Form, the default value was, by default, empty. In the Update Form, the default value is set to the current record being edited.

340

Day 11

Click OK to save the configuration and auto-generate the server behaviors that you need. The result is a form similar to that of Figure 11.26. FIGURE 11.26 Your update form is automatically added to the document.

Making the Final Connection All that remains is to add a link from the master listing page to the update page, and you’ve got yourself a complete working online database system. To do this, you’ll need to modify the master listing slightly and add one more server behavior. First, open the master listing page and use the Table and Insert Column option under the Modify menu to add a new column to your master listing table. Next, add a label to the new cell that will be used to link to the update page, such as Click Here to Edit, and then select that label. Finally, use the Go To Detail Page server behavior to link to the update page: 1. Click + in the Server Behaviors palette. 2. Choose Go To Detail Page. 3. Enter the name of the update page to transfer to, such as update.asp. 4. Pass the unique identifier as the URL parameter. This is the same URL parameter you defined as the filter for update form’s recordset. 5. You do not need to pass any other parameters. Click OK to add the behavior to your document. Figure 11.27 shows the Go To Detail Page behavior defined for the sample data used in these examples.

Storing, Editing, and Updating Data from an UltraDev Application

341

FIGURE 11.27 Use the Go To Detail Page behavior to transfer control to the update form you’ve created.

You should now have a fully functional system that allows you to list records, view details, update individual records, and insert new records—all without touching the HTML design tools. You can use these pre-built template objects at any time, or build the forms yourself—it’s entirely up to you!

Summary Following up on yesterday’s lesson of displaying data, today you learned how to insert data into a form, pass variables between pages in order to display details, and update existing records. UltraDev provides built-in server behaviors for all these different actions and makes it very simple to create sites that work based on a basic screen-byscreen flow. Unfortunately, you also learned about one of UltraDev’s weaknesses—the incapability to recognize multiple primary keys within documents. This creates quite a stumbling block if you’re working with existing databases. A potential workaround (which was used extensively today) is to define a recordset that uses the multiple keys to return a single record. This recordset can then be used with the UltraDev delete and update methods without worrying about the key limitations. However, new databases should be designed with this in mind. Although today’s page designs are purely functional, you must keep in mind that all the HTML design tools function perfectly when creating dynamic data. Experiment with the screens you’ve already created to adjust them to your particular look and feel.

Q&A Q Can I use a text link rather than a button to submit a form? A Yes. You can use a link to “javscript:document.forms[]. submit()” to get around having to use the form button.

11

342

Day 11

Q I inserted the form elements onto the page, but when I look at it in my browser, I see nothing. It looks fine in UltraDev’s design view. What’s going on? A You’ve left out the

tag. If the tag is missing, many browsers don’t bother to render the fields on the page. Q Why doesn’t UltraDev handle multiple field primary keys? A UltraDev relies on a very specific set of conditions being true in order to generate code in a point-and-click manner. If these conditions aren’t met, the code will need to be customized, or a workaround will be needed. In most cases, the UltraDev limitations can be worked around without much trouble. Q When will we get to attach the other form elements to a database? A Soon. Many of the projects in the last week will push UltraDev to its limits. If you’re anxious to get started, go ahead and practice with the other elements now. The interface is very similar to what you’ve already worked with, and you should have no problem connecting other elements to your document recordsets.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. How can you set the size of a form field for design purposes? 2. What sorts of applications should check boxes be used for? 3. When should radio buttons be used? 4. How can you test dynamic pages, such as detail screens from within the design view? 5. How many primary key fields can UltraDev work with? 6. What is one workaround for the multiple field primary key issue? 7. Besides server behaviors, what’s another way to bind form elements to a database? 8. How can you quickly create master detail page sets and supporting insert/update pages?

Exercises 1. Create an entire linked database system using your own HTML design. The design, thus far, has been driven by functionality. It’s wise to keep in practice with the

Storing, Editing, and Updating Data from an UltraDev Application

343

UltraDev HTML tools and learn to integrate them into the creation of dynamic sites. 2. Modify the existing Update screen so that it also offers the option to delete the existing record. Be careful, just adding a server behavior to the existing update screen might cause disastrous results.

11

WEEK 2

DAY

12

Writing Advanced Database Queries So far, you’ve seen what UltraDev can do if you stick to the simple queries. You can retrieve information from the database and display it. Many times, you’ll find that the simple query mode is all you need to make your site. For advanced applications, however, you’ll want to tap the power of SQL to handle some of your program logic. This chapter provides a short SQL tutorial so that you can harness the power of your database server. Today, you will learn • How to set up database tables using SQL. • Different techniques for writing SQL queries that perform functions beyond what is possible in UltraDev. • How to point and click your way to an advanced query within UltraDev.

346

Day 12

Why We Need SQL For the past few days, you’ve been using UltraDev’s simple queries and server behaviors to write some site fragments that have dynamic functionality. Unfortunately, there is a limit to the amount of flexibility you can achieve with the built-in behaviors. For example, if you allow a user to input a first and last name on a form, and then want to search the database for those names, you won’t be able to do it with a simple UltraDev query. Simple queries, similar to the one shown in Figure 12.1, only allow you to select data based on a single parameter passed to the behavior. If you want to use multiple pieces of information in a simple query, you’re out of luck. FIGURE 12.1 A simple query is limited to data selection based on a single input parameter.

That’s just the tip of the iceberg. Using the SQL directly, you can select database records based on multiple attributes, sort by multiple attributes, perform mathematical and logical functions on field values, randomize information, and a whole lot more. Today’s lesson will give you a working knowledge of SQL, which will allow you to create truly advanced applications, all without leaving the comfort of the UltraDev environment. Although UltraDev does provide a means of clicking to create an advanced query, as you become accustomed to creating SQL by hand, you’ll probably find it easier to type the queries directly into the application.

Note

In case the term SQL is new to you, it stands for Structured Query Language. SQL is a language that was developed for querying relational database systems. It has become a widely accepted standard and is used in almost all commercial database systems, as well as several Open Source applications, such as MySQL, which you’ll be using with the examples in this book.

Writing Advanced Database Queries

347

Let’s start by looking at the SQL needed to create a database. You’ve already seen the SQL statements used to do this, but do you know how to write your own? After mastering the basic tools for creating databases, tables, and other structures, we’ll move on to queries. Make sure that you have a database server installed before continuing—you’ll need to be able to type commands into your server console in order to follow along.

Note

If you’re using Access, you can still use SQL to create a query. Create a new query, and then choose SQL from the View menu. You will be able to type SQL directly into the resulting dialog box. Microsoft Access, however, isn’t a full-featured SQL system, so some queries might fail.

The Database Objects Four primary objects need to be defined before we can start creating SQL. This might seem a bit trivial if you’re used to working with databases, but if this is all new to you, it might help clarify things a little bit. Within UltraDev, you have access to four remote structures: Databases—These are the container elements, which are defined when creating a connection. A database itself doesn’t contain data—it does, however, contain other elements that actually hold the information. Tables—They hold the actual data in the database. The type of information held in a table is defined when a table is created. Multiple tables can exist within a single database and can be related to one another in order to form a normalized structure. Views—Think of a view as a virtual table. If you perform a single complex query repeatedly, it might be easier to define it as a view. A view is nothing more than a query that, for all intents and purposes, appears to the outside world as a table. Each time this table is accessed, the SQL query used to create it is executed and the data returned, as if it were a real table. Stored Procedures—These are program subroutines that are stored on the remote database server. Like a view, a stored procedure isn’t a storage place for actual data, but a virtual construct. Stored procedures can be used to process data and return the result directly into UltraDev as if the data were a standard recordset. Unfortunately, different database servers support different programming languages for writing stored procedures. If you want to remain truly portable, keep as much of the code as possible written in SQL.

12

348

Day 12

Note

The database system that we’ll be using throughout the examples does not support the use of stored procedures or views. Both of these SQL elements are nice, but rarely necessary. As you go through remaining chapters, feel free to translate any of the complex queries into views, which you’ll learn about today.

Creating Databases and Tables The first step in working with a database system is creating the database container itself. This will hold all the tables, views, and so on for an entire collection of data. Remember, when you say the word database, you’re referring to a collection of data, not the individual pieces of data themselves. To create a database, you must first have a SQL server installed and be at a database command line. Your server documentation should provide the information to get to this point. If you’re using a more visually oriented tool, you’ll need to find the equivalent functions to these commands: create database ;

Note

Because SQL statements often grow quite large, most systems allow them to stretch across several lines and require a terminator character to tell them to execute the statement. In the case of MySQL, which is used extensively in this book, the semicolon is the terminating character.

The create command will create a completely empty database. After a database has been created, depending on your system, you might need to explicitly tell your database server that you want to use the database, like this: use ;

For example, let’s start simple with an employee database: mysql> create database employee; Query OK, 1 row affected (0.07 sec) mysql> use employee; Database changed mysql>

Writing Advanced Database Queries

349

If you want to delete the database that you’ve defined, you can use the drop command, just like create: drop database ;

Caution

Again, be aware that the database is the wrapper for all the data-containing tables. If you use the drop command to delete a database, you’re deleting all the tables, views, and any other structures it contains, as well as the data that those elements hold. Be careful!

After a database has been created, you need to set up the internal tables that will actually hold the data that you want to store. When making a table, you’ll use another create command to tell the system what type of data you want to store—if any. create table (,)

For example, let’s create some tables for the employee database that will store a list of employees and a list of job titles: create table tblemployee ( employeeID int not null, titleID int, age int, salary float, firstname varchar(50), lastname varchar(50), primary key (employeeID) ); create table tbljobtitle ( titleID int not null, description varchar(250), lowersal float, uppersal float, primary key (titleID) );

The uppersal and lowersal fields are meant to provide information about the lowest salary and salary cap for a specific job description. Although the create table syntax is immediately understandable, the fields are probably less so. The first value in a field definition is the name of the field, such as employeeID or titleID. The second value is the datatype for that field, followed by any special modifiers.

12

350

Day 12

Datatypes Let’s take a look at some common datatypes that you’ll be using in future UltraDev projects: int—Integers. char(#)—Holds a specified number of characters. This particular datatype will always use the same amount of space, no matter how many characters are actually stored. varchar(#)—Holds a variable number of characters up to a specified limit. Unlike the char datatype, varchar only stores as much data as needed. float—Floating point numbers (or numbers with decimal places). Typically used for representing money or the results of floating point based calculations. date—Quite simply, stores the date.

Tip

Caution

Many more datatypes are available within different database systems. For example, you might have access to small integers under the type name tinyint, or fields that store the date and time datetime. Check your database documentation to find out what types are available to you.

If you’ve worked with databases before, you might want to use binary fields to embed binary information, such as photographs, into a database. Unfortunately, this is not currently possible in UltraDev. You can, however, store the names of binary files (such as images), then reference those files using UltraDev.

Along with the field definitions are two other pieces of information, the first is the modifier attribute not null. Adding not null to the end of a field name tells the database system that the field must not have a null value in it—that is, it must contain some sort of information. This is not the same as an empty string (“”), which is information. A null value is considered to be a complete lack of data. The second piece of non-field declaration information is the primary key. As you learned on Day 6, “Introduction to Dynamic Web Applications and Database Design,” a primary key is what is used to uniquely identify a piece of information in a table. Obviously, this particular field (or fields) must contain information and therefore is typically declared not null in the corresponding table definition.

Writing Advanced Database Queries

Tip

351

Many database systems will assume that any fields used in the primary key are implicitly defined as not null. MySQL does not take this approach and forces you to add not null to the primary key fields. To maintain compatibility between different database systems, you should include not null in your table definitions.

Similar to the database Drop command, you use drop table

to completely remove a table from the database. This removes the table and all the information it might contain from the database. We haven’t actually entered any data into the tables yet, so now is the time to test a drop command or two, if you so desire.

Adding/Changing Data Entering data into a database is quite simple—you use the insert command. You’ll use two forms for inserting data—one for inserting a partial record, another for inserting a complete record into a table: insert into [()] values <’value1’,’value2’,...>)

Using the first variation of the command (that is, including the field name list), you can provide a comma separated listing of field names and the corresponding data that they should receive. The second variable assumes you will insert all the fields at once and accepts the values in the order of the fields as defined when creating the tables.

Caution

The first form of the INSERT command is often confusing because it gives the implication that you can store any data you want, whenever you want. In reality, you must obey the same not null rules that you set when creating the table. Furthermore, you cannot re-run the INSERT command with additional field names to add information that was missing the first time around. You must either delete the partial record, or use the UPDATE command to change the field values.

12

352

Day 12

Try inserting some records into the two tables that we’ve created: insert insert insert insert insert insert insert insert insert insert

into into into into into into into into into into

tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee tblemployee

values values values values values values values values values values

(‘1’,’2’,’35’,’24000.75’,’Maddy’,’Dogg’); (‘2’,’4’,’21’,’1105.25’,’Peter’,’Paul’); (‘3’,’2’,’22’,’10812.90’,’Mary’,’Ann’); (‘4’,’3’,’68’,’300000.92’,’John’,’Ray’); (‘5’,’3’,’52’,’150321.00’,’Klaus’,’Meine’); (‘6’,’4’,’52’,’1000.00’,’Herman’,’Rarebell’); (‘7’,’1’,’50’,’128312.92’,’Steve’,’Jobs’); (‘8’,’3’,’27’,’200000.55’,’Robyn’,’Ness’); (‘9’,’3’,’28’,’300001.19’,’Anne’,’Groves’); (‘10’,’4’,’23’,’2435.12’,’Julie’,’Vujevich’);

insert insert insert insert

into into into into

tbljobtitle tbljobtitle tbljobtitle tbljobtitle

values values values values

(1,’President/CEO’,’100000.00’,’250000.00’); (2,’Manager’,’10000.00’,’25000.00’); (3,’Programmer’,’300000.00’,’350000.00’); (4,’Designer’,’1000.00’,’5000.00’);

This data adds 10 employees to the employee database and assigns them to one of four different position titles within the organization. We’ll be looking at how you can extract data from both tables simultaneously in a few minutes.

Tip

An advanced feature of the INSERT command is the use of a select statement (a query) to replace the values () portion of the INSERT command. This enables you to insert data that can be retrieved from other tables (in the form of a query) directly into a given table. Read ahead for information about the select syntax.

After you have data in your system, you can use two commands to modify it: update and delete.

Updating Data update does exactly what it’s name implies—it updates existing records in the SQL database. The format of an update is simple, but also very powerful: update SET =<expression 1>, =<expression 2>,=<expression n> [WHERE <search expression>]

To use update, you must supply a table name, as well as the names of the fields that need to be updated, and the new values that they should take on. For example, this is a partial update statement, which will update the last name and age fields in the employee table: update tblemployee set lastname=’Rantherpeen’,age=’62’

Writing Advanced Database Queries

353

That’s part of the update command, but what is missing? Hopefully, it should be obvious that this is lacking any way to identify the records that it is updating. In fact, if you were to run this command on the database server, and then display the results, you might be a bit surprised: mysql> update tblemployee set lastname=’Rantherpeen’,age=’62’;

OUTPUT

Query OK, 10 rows affected (0.13 sec) Rows matched: 10 Changed: 10 Warnings: 0 mysql> select * from tblemployee; +------------+---------+------+---------+-----------+-------------+ | employeeID | titleID | age | salary | firstname | lastname | +------------+---------+------+---------+-----------+-------------+ | 1 | 2 | 62 | 24000.8 | Maddy | Rantherpeen | | 2 | 4 | 62 | 1105.25 | Peter | Rantherpeen | | 3 | 2 | 62 | 10812.9 | Mary | Rantherpeen | | 4 | 3 | 62 | 300001 | John | Rantherpeen | | 5 | 3 | 62 | 150321 | Klaus | Rantherpeen | | 6 | 4 | 62 | 1000 | Herman | Rantherpeen | | 7 | 1 | 62 | 128313 | Steve | Rantherpeen | | 8 | 3 | 62 | 200001 | Robyn | Rantherpeen | | 9 | 3 | 62 | 300001 | Anne | Rantherpeen | | 10 | 4 | 62 | 2435.12 | Julie | Rantherpeen | +------------+---------+------+---------+-----------+-------------+ 10 rows in set (0.00 sec)

This was effective, but probably not in a way that was intended. If you’ve been following along, just ahead of the delete section, reinsert the data so that this sadly miscalculated data modification is a thing of the past. The lesson to be learned from this is that without the where clause, SQL will assume that you mean to operate on all the records. The same holds true for the delete and select statements, which you’ll learn about in a few minutes. So, the next question is, how do you fill in the search expression for the where clause? The search expression must evaluate to a true or false condition, which will indicate whether or not a record can be selected. You can use typical Boolean algebra to create the search expression: = —Selects

records based on a direct comparison to a value.

> —Selects

records where the value of a field is greater than a

given value. < —Selects

given value.

records where the value of a field is less than a

12

354

Day 12

>= —Selects

records where the value of a field is greater than

or equal to a given value. <= —Selects

records where the value of a field is less than or

equal to a given value. LIKE —Selects

records based on a simple SQL patternmatching scheme. The character % matches any number or characters, whereas _ matches a single character. Check your database documentation for additional information on its pattern matching capabilities. These basic expressions can be combined to form more complex searches: NOT <expression>—Evaluates

to true when the expression evaluates to false.

<expression> OR <expression>—Evaluates

to true if either of the expressions are

true. <expression> AND <expression>—Evaluates

to true if both of the expressions are

true. (<expression>)—Uses

parentheses to combine expressions to force an order of eval-

uation. To make things even more complicated (or “feature-ific,” if you prefer) you can use a variety of SQL mathematical and string operations to manipulate field values within expressions, all on-the-fly. For example, if you have a field named a and b, you could create an expression to see if the combined total of the fields is greater than 10, by using “a+b > 10” as the search expression. Each database system offers different levels of functionality, so, again, be sure to check your database documentation for its exact specifications. We’re going to use a few of the more common functions today, but it’s likely that you might have access to many more. Now, back to the matter of updating the employee table. Because you now know how to write a WHERE search expression, what is the SQL needed to update the record for “Mary Ann” with the new age and last name? Nothing more than this: update tblemployee set lastname=’Rantherpeen’,age=’62’ where firstname=’Mary’ and lastname=’Ann’;

Writing Advanced Database Queries

Caution

355

With the data that we have in the tblemployee table, you could just have easily written the search expression to only check for a lastname field equal to ‘Ann’. Unfortunately, as you learned in Day 6, you should never rely on a person’s name as a unique identifier. In a database of a few hundred thousand people, you’re likely to have a few that match. In fact, the update command used here is actually almost as bad. In a production system, if you’re trying to update a single record (rather than a group of records), you should base your search expression on the primary key for the table.

After inserting the record, it should be visible in the tblemployee table: mysql> update tblemployee set lastname=’Rantherpeen’,age=’62’ where firstname=’Mary’ and lastname=’Ann’;

OUTPUT

Query OK, 1 row affected (0.00 sec) Rows matched: 1 Changed: 1 Warnings: 0 mysql> select * from tblemployee; +------------+---------+------+---------+-----------+-------------+ | employeeID | titleID | age | salary | firstname | lastname | +------------+---------+------+---------+-----------+-------------+ | 1 | 2 | 35 | 24000.8 | Maddy | Dogg | | 2 | 4 | 21 | 1105.25 | Peter | Paul | | 3 | 2 | 62 | 10812.9 | Mary | Rantherpeen | | 4 | 3 | 68 | 300001 | John | Ray | | 5 | 3 | 52 | 150321 | Klaus | Meine | | 6 | 4 | 52 | 1000 | Herman | Rarebell | | 7 | 1 | 50 | 128313 | Steve | Jobs | | 8 | 3 | 27 | 200001 | Robyn | Ness | | 9 | 3 | 28 | 300001 | Anne | Groves | | 10 | 4 | 23 | 2435.12 | Julie | Vujevich | +------------+---------+------+---------+-----------+-------------+ 10 rows in set (0.00 sec)

Sure enough, Mary’s last name is now “Rantherpeen” and she is 62 years old. Considering that she was 22 when we started, I’m guessing that she is none too pleased with me right now.

Deleting Data Because you’ve already learned about search expressions, understanding how the delete command works should be no problem. In fact, you’ll be happy to know that many of the available SQL commands use the same search expression to select records from database tables.

12

356

Day 12

When using the delete command, you are deleting an entire record, not just fields from a record. All you need to supply is the name of a field and a search expression to select the records. delete from [WHERE <search expression>]

Caution

Similar to update, the delete command can be used without the WHERE and search expression. As you saw before, this will result in all the records being selected. If all the records are selected in a delete command, they’ll all be deleted! Be careful to define your delete search expression, otherwise you might find that you’re deleting records you hadn’t intended to touch. You might find that testing the search expression within a select command is a good way to find out what you’re about to delete before you delete it.

You now have enough background to create and work with database structures and information. The real power of SQL hasn’t been tapped, but that’s what we’re going to do now.

Querying Database Tables After you have information in your database tables, the true power of SQL can finally become apparent by learning how to query that data. SQL databases were designed to be relational. This means that you can take multiple tables and relate information from one table to another. In the example tables, each employee has a titleID that can be used to relate the different job titles to each of the individuals. By combining information from multiple locations, you can build truly powerful queries that aren’t possible in single table flat-file database systems. All queries are performed using the select command to select records from a table, or multiple tables, based on a search expression. A simplified model of the select syntax looks similar to this: select ,,... from ,,... [where <search expression>] [ORDER BY <expression> ASC|DESC]

If you want to select all the fields in a table or tables, you don’t have to list each field name—instead, you can just use the * character as shorthand for all fields. The simplest query (which you’ve already seen) selects all the records from a single table: select * from mysql> select * from tbljobtitle;

Writing Advanced Database Queries

OUTPUT

Note

357

+---------+---------------+----------+----------+ | titleID | description | lowersal | uppersal | +---------+---------------+----------+----------+ | 1 | President/CEO | 100000 | 250000 | | 2 | Manager | 10000 | 25000 | | 3 | Programmer | 300000 | 350000 | | 4 | Designer | 1000 | 5000 | +---------+---------------+----------+----------+ 4 rows in set (0.01 sec)

Try selecting all records from all tables (select * from tblemployee,tbljobtitle); you might be interested in the results. Rather than one table followed by another, you will get a combination of the two tables (called a Cartesian join or product)—each record in tblemployee is matched with each record in tbljobtitle.

Sorting Information To sort the information based on one of the fields, use order by with an expression (often one or more comma separated field names) and asc for ascending order or desc for descending order: mysql> select * from tbljobtitle order by uppersal desc; +---------+---------------+----------+----------+ | titleID | description | lowersal | uppersal | +---------+---------------+----------+----------+ | 3 | Programmer | 300000 | 350000 | | 1 | President/CEO | 100000 | 250000 | | 2 | Manager | 10000 | 25000 | | 4 | Designer | 1000 | 5000 | +---------+---------------+----------+----------+ 4 rows in set (0.00 sec)

This information is great for retrieving all the information in a particular table, but it doesn’t really do that much. In order to put SQL to work for us, we need to write queries that combine and use the data in multiple different tables.

Joining Tables To really start to see how an advanced query can work for us, we need to join the information in multiple different tables. This means that we create a relationship between the different available tables and combine the information in an intelligent manner. For example, suppose that we wanted to display a list of each employee’s name and job title. Because the job title is stored in a different table from the rest of the information,

12

358

Day 12

joining the tables is the only way to do this. By using the titleid field common to both tables, we can create a simple query that returns exactly what we want: select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid; mysql> select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid;

OUTPUT

Tip

+-----------+-------------+---------------+ | firstname | lastname | description | +-----------+-------------+---------------+ | Steve | Jobs | President/CEO | | Maddy | Dogg | Manager | | Mary | Rantherpeen | Manager | | John | Ray | Programmer | | Klaus | Meine | Programmer | | Robyn | Ness | Programmer | | Anne | Groves | Programmer | | Peter | Paul | Designer | | Herman | Rarebell | Designer | | Julie | Vujevich | Designer | +-----------+-------------+---------------+ 10 rows in set (0.00 sec)

From this example, you can see that we refer to fields in two different ways—by the extended format “.” or simply by the field name. If you are combining multiple tables that have the same field name, you must use this format in order to ensure that the SQL server can correctly identify the fields. You might find that it is a good idea to always write your queries using this syntax—you’ll never find yourself in a situation where the structure of your tables makes your query inoperable.

In this query, the relationship between the tables is defined by “WHERE tblemployee.titleid=tbljobtitle.titleid”

The search expression, however, doesn’t have to stop at a single relationship—it can include any of the other expressions that we’ve mentioned today. For example, how about a query that selects all the records in which the person’s salary is greater than $25,000? Try this: select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid AND tblemployee.salary>25000.00; mysql> select firstname,lastname,description from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid AND tblemployee.salary>25000.00;

Writing Advanced Database Queries

OUTPUT

359

+-----------+----------+---------------+ | firstname | lastname | description | +-----------+----------+---------------+ | Steve | Jobs | President/CEO | | John | Ray | Programmer | | Klaus | Meine | Programmer | | Robyn | Ness | Programmer | | Anne | Groves | Programmer | +-----------+----------+---------------+ 5 rows in set (0.01 sec)

It works, but notice that the salaries aren’t displayed? This is by design, and is intended to demonstrate to you that although only a few fields might potentially be returned from a query, the search expression itself has access to all the field information. Now we’re starting to get somewhere—but we don’t have to stop there. Let’s try finding all the employees who are making at least 75% of the “upper salary” limit—or where tblemployee.salary>=(.75*tbljobtitle.uppersal). mysql> select firstname,lastname,salary,uppersal from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid AND tblemployee.salary>=(.75*tbljobtitle.uppersal);

OUTPUT

+-----------+----------+---------+----------+ | firstname | lastname | salary | uppersal | +-----------+----------+---------+----------+ | Maddy | Dogg | 24000.8 | 25000 | | John | Ray | 300001 | 350000 | | Anne | Groves | 300001 | 350000 | +-----------+----------+---------+----------+ 3 rows in set (0.00 sec)

As you can see, it’s easy to apply a little bit of math to a query in order to create a query that takes into account more than just a simple equality.

Calculations in a Query The last example shows how a mathematical expression can be included in a query, but it doesn’t provide a means by which we can see what the result of the calculation actually is. If we’re trying to match against 75% of an upper salary limit, wouldn’t it be nice to know what that 75% value is? By changing the query slightly to include a SQL variable, we can have the calculation value returned as if it were any other field in the database. The format for this virtual field is <expression> as ‘’

12

360

Day 12

Let’s say that we now want to show the percentage of the upper salary limit that each employee makes. The calculation is simply ((tblemployee.salary/tbljobtitle.uppersal)*100). To display this in a table with the rest of the employee’s information, you can write this query: select firstname,lastname,salary,uppersal, round((tblemployee.salary/tbljobtitle.uppersal)*100) as ‘percent’ from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid;

Notice that I’ve also included a function named “round” which operates on the salary percentage calculation. This function takes the result of the calculation and rounds it to a whole number. You don’t have to use this function, but it makes the results much more readable. mysql> select firstname,lastname,salary,uppersal, round((tblemployee.salary/tbljobtitle.uppersal)*100) as ‘percent’ from tblemployee,tbljobtitle WHERE tblemployee.titleid=tbljobtitle.titleid;

OUTPUT

+-----------+-------------+---------+----------+---------+ | firstname | lastname | salary | uppersal | percent | +-----------+-------------+---------+----------+---------+ | Steve | Jobs | 128313 | 250000 | 51 | | Maddy | Dogg | 24000.8 | 25000 | 96 | | Mary | Rantherpeen | 10812.9 | 25000 | 43 | | John | Ray | 300001 | 350000 | 86 | | Klaus | Meine | 150321 | 350000 | 43 | | Robyn | Ness | 200001 | 350000 | 57 | | Anne | Groves | 300001 | 350000 | 86 | | Peter | Paul | 1105.25 | 5000 | 22 | | Herman | Rarebell | 1000 | 5000 | 20 | | Julie | Vujevich | 2435.12 | 5000 | 49 | +-----------+-------------+---------+----------+---------+ 10 rows in set (0.01 sec)

Suddenly you have access to data directly in a query that didn’t even exist before. Within UltraDev, the recordset generated by this query includes the percent field, which doesn’t even exist in the data tables themselves.

Summarization Tools Summarizing data is another very useful part of any query. Using the summarization functions, you can easily find totals for numeric columns, or count the number of records of a particular type. Let’s take a look at a few of these functions now: max()—The

maximum of a given field. Used to match the highest value. For example, if you use max on the salary field of the employee table, it should return the highest salary in the group.

Writing Advanced Database Queries

361

mysql> select round(max(salary)) from tblemployee; +--------------------+ | round(max(salary)) | +--------------------+ | 300001 | +--------------------+ 1 row in set (0.02 sec)

Note

In several examples, including this one, I’ve combined the result with the round function to present a “prettier” answer.

min()—The

minimum of a given field. It is the exact opposite of the max function.

mysql> select round(min(salary)) from tblemployee; +--------------------+ | round(min(salary)) | +--------------------+ | 1000 | +--------------------+ 1 row in set (0.02 sec) sum()—Sums

the values of a given field. For example, to find the total amount paid in

salaries: mysql> select round(sum(salary)) from tblemployee; +--------------------+ | round(sum(salary)) | +--------------------+ | 1117991 | +--------------------+ 1 row in set (0.01 sec) count()—Provides

a count of the number of occurrences of a given field.

mysql> select count(salary) from tblemployee; +---------------+ | count(salary) | +---------------+ | 10 | +---------------+ 1 row in set (0.03 sec)

At first glance, this might not seem at all useful. After all, this is simply a count of the number of records returned by a search, and UltraDev actually makes that number available to you without having to resort to a separate query. What you can do to make all these summarization tools more useful is to combine them with the group by function to organize data into groups for summarization. For example,

12

362

Day 12

suppose that you want to return a list of how many people work within each job classification of the database. Your initial reaction is probably to create a query similar to this: select description,count(tblemployee.titleID) as ‘total_employed’ from tbljobtitle,tblemployee where tbljobtitle.titleID=tblemployee.titleID

This relates the two tables as we would hope, and also provides a total_employed column that is based on the count of the titleID field in the tblemployee table. Unfortunately, the database server has no way of telling how to group the different records in order to count them, so the query will fail. In MySQL, you’ll get a response like “ERROR 1140: Mixing of GROUP columns (MIN(),MAX(),COUNT()...) with no GROUP columns is illegal if there is no GROUP BY clause.”

To get around this, you just need to add a “group by” clause to the query, listing the fields that should be grouped together—in this case, the “tblemployee.titleID” fields. mysql> select description,count(tblemployee.titleID) as ‘total_employed’ from tbljobtitle,tblemployee where tbljobtitle.titleID=tblemployee.titleID group by (tbljobtitle.titleID);

OUTPUT

+---------------+----------------+ | description | total_employed | +---------------+----------------+ | President/CEO | 1 | | Manager | 2 | | Programmer | 4 | | Designer | 3 | +---------------+----------------+ 4 rows in set (0.03 sec)

From that, almost magically, we get a table of each of the job titles followed by the number of employees within that classification.

Other Advanced Techniques Entire volumes have been written that present SQL and the commands that you can use with it. Obviously, we can’t do that here. Today’s goal is to provide you with enough background in query writing to add advanced functionality to your applications without having to resort to manually editing your embedded code. Before seeing how all this integrates into the UltraDev environment, let’s take a look at what else awaits within the wondrous world of SQL. These are a few of the functions that you might be interested in that are not currently available within MySQL. Although “nice”, there is usually a workaround to provide the same functionality without resorting to a commercial (high priced) database system.

Writing Advanced Database Queries

363

Views As I mentioned earlier, views are essentially a virtual table that is based on a query. After a view is created, you can access it exactly as you would any other table. The syntax for creating a view is simple, but requires that you already understand how to create complex queries: create view [,,...] as <select statement>

The field names can be added to provide new names for existing fields, or, if left out, the view will take on the names of the fields in existing tables. As you’ll see later in the book, UltraDev has some problems referring to identically named fields, so you might want to keep views in mind if your database system supports them. As with databases and tables, you get rid of a view by dropping it: drop view

If you’re interested in a system that does use views, you might want to look into PostgreSQL (http://www.pgsql.com/) or a commercial solution such as Oracle and Microsoft’s SQL Server.

Stored Procedures Stored procedures let you write application logic directly within your database server and have it executed as a query. There are both advantages and disadvantages to using stored procedures, and surprisingly, they’re interchangeable. Most database servers let you write stored procedures using SQL or another language. SQL does not lend itself to programming and can only be used to perform functions that could normally be performed in a query. Therefore, the true power comes from writing the procedures in the language native to the database server. Unfortunately, because this is generally specific to the server, it is not portable to other systems. Your code becomes locked to the SQL server platform that it was written on. The advantage of stored procedures is that they eliminate much of the need to provide custom embedded code in your Web pages to handle application logic. This means that if you write your Web application using stored procedures, you can redeploy on any server platform (ASP, JSP, and so on) using the same programming techniques as long as you’re using the same SQL server platform. As you can see, stored procedures both increase and decrease platform dependence in different ways. What dependencies are more important to you is entirely your choice. In this book, I’ve chosen to modify the embedded server code where necessary—otherwise this would have to become a book on database languages as well as the UltraDev environment.

12

364

Day 12

Tip

A good use of stored procedures is when you are processing secure information. Keeping the application logic as far away from the Web browser is the best strategy when implementing routines that require secure access. For example, rather than embedding credit card processing information into an Active-X control on your Web page, it makes a lot more sense to have it handled by a stored procedure in a database.

Sub-queries An interesting feature of SQL (on some servers, but not MySQL) is the capability to embed select statements within other statements. For example, earlier you saw how to select the minimum salary from the employee table: mysql> select min(salary) from tblemployee; +--------------------+ | min(salary) | +--------------------+ | 1000 | +--------------------+ 1 row in set (0.02 sec)

Unfortunately, after you’ve found out the minimum salary, you’re still a query away from finding out who the poor soul is with the tiny salary: select * from tblemployee where salary=’1000’;

Using a subselect, you can rewrite the sequence of queries similar to this: select * from tblemployee where salary=(select min(salary) from tblemployee);

The inner-most query is executed first and used in the upper query. You can embed multiple levels of queries—each one returns its results to the one before. The level of complexity of the query is entirely in your hands. Sub-queries are very similar to joins, but offer the ability to accomplish in one step what can sometimes take several.

Advanced Queries and UltraDev So, exactly what counts as an advanced query, and how can you use UltraDev to perform it? The answer to the first question is simple—anything that involves more than a single table is considered an advanced query within UltraDev. The simple query dialog only allows you to display information from the fields of one table.

Writing Advanced Database Queries

365

The interface for specifying an advanced query is simple, probably to the point where you’ll find it easier to enter the SQL by hand than to point and click to enter it. Open up UltraDev and a connection to an active database, and then add a recordset to your document: 1. Open the Server Behavior palette. 2. Click + and choose Recordset (Query). 3. Click the Advanced button to switch to advanced mode. Figure 12.2 shows the advanced query configuration dialog. FIGURE 12.2 Advanced queries are defined (within UltraDev) as anything that requires a table join, or special database functions.

12 If you’re interested in saving yourself some typing, you can add objects to the database query by using the Database Items area of the advanced query configuration. There are three items to work with: • Tables • Views • Stored Procedures Each of these can be expanded by clicking the disclosure arrow to the left to show the items underneath them. For example, the tables and views categories contain all the tables and views from the current connection. Stored procedures contain the available stored procedures. Each of these categories can be opened further to reveal additional database information, such as individual fields.

366

Day 12

To incorporate these elements into a query, there are three buttons to the right of the database items area. By pressing one of these buttons when the appropriate data is selected from the database, items will insert the corresponding SQL into the query window. Each of the buttons can be used with a particular type of database item: Select—Inserts a Table, View, Column (field name) or Procedure into the SELECT or FROM portion of the code.



Where—Inserts a field name into the WHERE clause of the SQL. Order By—Inserts a field name into the ORDER

BY

clause of the query.

As you can see, this isn’t exactly rocket science. The query builder is limited to creating a basic SQL query that you must flesh out by hand. As I’ve said before, I think you’ll find that it is far easier to just type the SQL into the application rather than click your way between the database items display and the corresponding Select, Where, and Order By buttons.

Summary In today’s lesson, you learned how to create SQL databases, tables, and queries, and how to enter them directly into UltraDev to create a far more powerful system than what is allowed with the Simple queries. SQL is a very flexible relational database query language that makes it possible to work with data in ways that would be impossible with other systems. The basic syntax is extremely easy to grasp, but allows even the most experienced programmer the ability to develop complex relational systems. MySQL is lacking in several of the high-end features of SQL, but is full-featured enough to be used for many small to mid-sized Web sites. In fact, all the projects in this book are implemented using MySQL. If you want to learn more about the specific functions available in MySQL, you might want to skip to Appendix C, “MySQL Quick Function Reference,” before continuing on to tomorrow’s lesson.

Q&A Q Will MySQL ever support views and subqueries? A With any luck, yes. Both of these features are currently on the To Do list for the software.

Writing Advanced Database Queries

367

Q How can I compare dates within SQL? A Use the same comparison operators that you use with other datatypes (=, <, >, and so on). The SQL Server will handle doing the hard work for you. Q Is it possible to join more than two tables? A Absolutely. The reason the examples consist of a single table is to limit the amount of space they take up. You can just as easily join three, four, or more tables within the SQL. Q Can I update data within a view? A It depends on the features of your database server. Many servers offer the feature of allowing you to update view data just like any other table and even reject updates if the updated data would no longer be included within the view.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. How do you create a database within SQL? 2. Why is the phrase “insert data into the database” syntactically wrong? 3. What does * do in a select statement? 4. How can you refer to a specific field name within a specific table? 5. What happens if you do not supply a WHERE clause when selecting records?

Exercise Because today’s text is mostly about becoming accustomed to the flexibility and power of SQL, all that you need to do is practice using some of the techniques that we learned today. Try building your own movie database that includes these tables: movie—Movie title, year, and so on filmtype—Categories for your film collection (horror, suspense, and so on) actor—Actor and actress table containing the actors in the movies that you own The toughest part of building this database structure (and supporting queries) will be relating the actor table to the movie table. You might want to refer back to Day 6 for information on normalization. Hint: You’ll need to make another table to relate a movie ID to an actor ID.

12

WEEK 2

DAY

13

Advanced Components: Catalogs, Searches Today’s advanced topic involves creating a catalog system. A catalog can be any listing of items that is displayed on the computer—usually featuring item details and other information. The contents of the catalog are completely up to you. In this example, however, the catalog will be very much like a product catalog, containing product descriptions and other information. You have already looked at a basic catalog system with the personnel listings. This system, however, will include advanced features beyond those in the earlier system. Today, you’ll learn how to • Create and test a catalog database system. • Create an advanced interface that explores new server behaviors. • Set up search functionality for the catalog. • Find items based on keywords in their descriptions. • Navigate between detail screens without returning to a search window.

370

Day 13

A Product Catalog Before you can start programming today’s lesson, you’ll need to set up a working catalog database. This isn’t necessarily as easy as it seems. What functionality do you want to include in your catalog? What tables are necessary, and how do you implement them? These are the sorts of questions that are going to be asked (and hopefully answered) at the start of every day for the rest of the book. In fact, we’ll revisit this very project next week when we expand the catalog system into a program that can handle a shopping cart that works alongside an expanded product catalog.

Note

Although this day shares some common ground with previous days and with the e-commerce lesson in the final week, don’t skip this or future lessons without looking through them first. There are plenty of new concepts introduced to keep you occupied.

The features that you’ll be adding to today’s product catalog are common in online information directories: • Catalog searches—Search for a keyword in the catalog, and retrieve only the applicable records. • Related items—Find items that are tagged as related to a given item. • Thumbnail/expanded images—Thumbnail and expanded images for each product. • Limited Search results—Limit the number of results that are returned and enable the user to browse the catalog. Included in the enhanced functionality is a more streamlined interface. The catalog will consist of three different screens: a search screen, a results screen, and a detail screen. Unlike the previous examples, these screens will have an integrated appearance, making the site seem far more consistent than when these functions were displayed earlier. MySQL supports everything you need to follow this chapter completely. A site map for this catalog system is shown in Figure 13.1. The database model that I have developed for this basic catalog system (in SQL table creation syntax) follows.

Advanced Components: Catalogs, Searches

371

FIGURE 13.1 The site map for the catalog system is very simple.

Catalog Search

Search Results

Item Details

Item Details

Item Details

Item Details

Product Categories Product categories are defined for each item in the catalog. An item can only fall into one category in this database model. create table tblCategory ( catID int not null, catName varchar(50) not null, primary key (catID) )

The product category table consists of a catID, which is the primary key, and a category name (catName). The ID will be stored with the catalog in order to associate each product with a category.

Catalog Items The primary product table holds the information necessary to layout all the product listings and detail screens. This is the master table for all of the information that will be displayed in the catalog. create table tblProduct ( prodID varchar(10) not null, catID int not null, prodName varchar(80) not null, prodDesc varchar(250) not null, prodPrice real not null, prodSmPic varchar(80) not null,

13

372

Day 13

prodLgPic primary key

varchar(80) not null, (prodID)

);

The product table fields are defined here: 1.

prodID—A

2.

catID—The

3.

prodName—A

4.

prodDesc—The

5.

prodPrice—The

6.

prodSmPic—The URL for a small (thumbnail) picture. This image will be shown in the main product listings.

7.

prodLgPic—The URL for a large picture. The large image is used in the detail screens of the object.

unique ID for the product being described. It can be any unique character sequence. category ID that the product belongs to. short name for the product.

longer product description. This field will be searchable in the final implementation.

price for the product. The REAL data type is used here to store a number with a decimal point.

If there is extra information that you’d like to display, you can insert it into this table. If you’re not planning to implement a merchandise catalog, you can modify these fields’ names to fit your application.

Related Items A nice feature of this catalog is the capability to relate one product to another. This can create a related-item feature in a category that displays other items a user might be interested in. For non-commercial applications, such as a bird watcher’s database, it could offer the capability to show records with characteristics similar to the one specifically selected. create table tblRelated ( prodID1 varchar(10) not null, prodID2 varchar(10) not null, primary key (prodID1, prodID2) )

There’s nothing in this table other than pairs of product ID numbers. The first number will be used as a master ID, and the second ID field will be an item that is related to that product. The final table definition is shown in Figure 13.2.

Advanced Components: Catalogs, Searches

FIGURE 13.2 The final definition for the catalog database features three tables.

Product Categories CatID* CatName

Product Table prodID* catID prodName prodDesc prodPrice prodSmPic prodLgPic

373

Related Items prodID1* prodID2*

There’s actually another way to set up this same functionality that I like slightly better. Unfortunately, it technically breaks the normalization rules, but, at the same time, is more efficient because less information needs to be stored in the database. In the alternative implementation of the Related Items functionality, this entire table could be dropped, and the product table would be implemented as follows: create table tblProduct ( prodID varchar(10) not null, catID int not null, prodName varchar(80) not null, prodDesc varchar(250) not null, prodPrice real not null, prodSmPic varchar(80) not null, prodLgPic varchar(80) not null, prodRelated varchar(250), primary key (prodID) );

The addition of the prodRelated field gives us the capability to enter in a large number of product ID numbers, but it does limit the number of related items to what can fit in the field. In this model, you would enter the related items into a single field within the product list, separating each of the fields by a comma or other delimiter.

Note

Normalization aside, sometimes it’s best to use common sense when designing your tables. There’s no shame in breaking some of the rules of normalization if you end up with a product that is easier to use. Beginners, however, should stick to the normalization rules until they are comfortable with database design.

SQL can easily be written to parse this field and find the matching catalog entries. This brings me to the next point—designing the SQL itself.

13

374

Day 13

The SQL Putting in some legwork before designing the actual application can save you an immense amount of swearing later. (Some might see this as a drawback.) In order for the application to be built, the database back end must be capable of fulfilling the role that you designated for it. This means writing the SELECT statements that return the appropriate data from the tables. First, you need to add some data to the tables so that there is something to work with. You can use your own data, or use mine. You’ll need image files for your copy of the application, however. Here’s an example of populating the categories: insert into tblCategory values (1,’Shoes’); insert into tblCategory values (2,’T-Shirts’);

(You can fill the table in with as many categories as you need or want!) Next, set up the main product table. To demonstrate some of the features in this section, you’ll need quite a few entries in the product table. In this sample dataset, I’ve only entered one category of products. You can fill in multiple categories following the same pattern I’ve set here: insert into tblProduct values (‘M001’,1,’Xtro Running shoes’, ‘A high quality running shoe. Xtro is imported from Switzerland’, 56.95,’catalogimages/M001sm.jpg’,’catalogimages/M001lg.jpg’); insert into tblProduct values (‘M002’,1,’Black Leather Dress Shoes’, ‘Great for an evening out, these leather shoes are a fantastic buy’, 76.99,’catalogimages/M002sm.jpg’,’catalogimages/M002lg.jpg’); insert into tblProduct values (‘M003’,1,’Women\’s Xtro Running shoes’, ‘A new version of the Xtro, specially designed for women. Imported from Switzerland’,56.95,’catalogimages/M003sm.jpg’, ‘catalogimages/M003lg.jpg’); insert into tblProduct values (‘M004’,1,’Leather Leisure shoes’, ‘Attractive leather shoes that offer a fantastic look and an amazing feel’,25.15,’catalogimages/M004sm.jpg’, ‘catalogimages/M004lg.jpg’); insert into tblProduct values (‘M005’,1,’Pseudo Leather Dress shoes’, ‘For those of you who aren\’t made of money, these shoes are available for a steal’,6.95,’catalogimages/M005sm.jpg’, ‘catalogimages/M005lg.jpg’); insert into tblProduct values (‘M006’,1,’Women\’s Black Leather Dress Shoes’, ‘Great for an evening out, these leather shoes are a fantastic buy for the lady on the go’,76.99,’catalogimages/M006sm.jpg’, ‘catalogimages/M006lg.jpg’); insert into tblProduct values (‘M007’,1,’Women\’s Leather Leisure shoes’, ‘Attractive leather shoes that offer a fantastic look and an amazing feel – for women only’,25.15,’catalogimages/M007sm.jpg’,

Advanced Components: Catalogs, Searches

375

‘catalogimages/M007lg.jpg’); insert into tblProduct values (‘M008’,1,’Women\’s Pseudo Leather Dress shoes’, ‘A version of our top seller for women. For those of you who aren\’t made of money, these shoes are available for a steal’,6.95, ‘catalogimages/M008sm.jpg’,’catalogimages/M008lg.jpg’); insert into tblProduct values (‘M009’,1,’Unisex Tap shoes’, ‘An amazing new shoe, this one-size-fits-all shoe is bound to keep you dancing all night long’,21.75,’catalogimages/M009sm.jpg’, ‘catalogimages/M009lg.jpg’);

Note

In the records listed here, you might have noticed the use of \’ rather than just a simple apostrophe. Because the apostrophe is used to set off a piece of data, it cannot be used in the data itself without being escaped (having a backslash character in front of it). The data delimiting characters vary from database to database, so you might want to check your system for any special requirements it might have.

Finally, indicate some related products. insert into tblRelated values (‘M004’,’M005’); insert into tblRelated values (‘M004’,’M007’); insert into tblRelated values (‘M004’,’M008’);

This sets three items to be related to product ID ‘M004’. In the finished catalog, these items will all be displayed on the detail screen of ‘M004’. As with the rest of the data, you can add in as many related items as you want, but, for demonstration purposes, these are plenty.

The SQL Queries With some sample data, you’re ready to construct the queries that will make your database function. Why aren’t we doing this in the design phase? Simple—wouldn’t you rather design your site than worry about the logic? Get the nasty stuff out of the way first, and then the actual UltraDev work becomes a much more enjoyable activity. Most of the queries in this database system are simple—just a SELECT statement from one of the tables. For example, to display the product table, use the query SELECT * FROM tblProduct.

Searching the Product Database The first trouble comes in when we search the description field for a keyword. In some circumstances, a simple search—which compares a field in the database to a value—will work. A simple search won’t, however, look in the field for the value ANYWHERE, which is

13

376

Day 13

what you need. Depending on your SQL implementation, you might have to do this a bit differently. The easiest way to perform the query with mySQL is to use a patternmatching function to see whether one string is contained within another—namely, if the search string is contained in the description field. For example, a search on leather would work like this: select * from tblProduct where prodDesc like “%leather%” \G

In plain English, the SELECT statement is looking for anything “like” the word “leather” with anything on the right or left of it. The results would look like this: mysql> select * from tblProduct where prodDesc like “%leather%” \G *************************** 1. row *************************** prodID: M007 catID: 1 prodName: Women\’s Leather Leisure shoes prodDesc: Attractive leather shoes that offer a fantastic look and an amazing feel – for women only prodPrice: 25.1500 prodSmPic: catalogimages/M007sm.jpg prodLgPic: catalogimages/M007lg.jpg *************************** 2. row *************************** prodID: M006 catID: 1 prodName: Women\’s Black Leather Dress Shoes prodDesc: Great for an evening out, these leather shoes are a fantastic buy for the lady on the go prodPrice: 76.9900 prodSmPic: catalogimages/M006sm.jpg prodLgPic: catalogimages/M006lg.jpg *************************** 3. row *************************** prodID: M002 catID: 1 prodName: Black Leather Dress Shoes prodDesc: Great for an evening out, these leather shoes are a fantastic buy prodPrice: 76.9900 prodSmPic: catalogimages/M002sm.jpg prodLgPic: catalogimages/M002lg.jpg *************************** 4. row *************************** prodID: M004 catID: 1 prodName: Leather Leisure shoes prodDesc: Attractive leather shoes that offer a fantastic look and an amazing feel prodPrice: 25.1500 prodSmPic: catalogimages/M004sm.jpg prodLgPic: catalogimages/M004lg.jpg 4 rows in set (0.00 sec)

Advanced Components: Catalogs, Searches

377

Precisely as intended, only the records containing leather were returned! Unfortunately, depending on your database server, there might be a hidden problem in this query. To see that problem, try running the same query again, but modify it just slightly: select * from tblProduct where prodDesc like “%LEATHER%” \G mysql> select * from tblProduct where prodDesc like “%LEATHER%” \G Empty set (0.00 sec)

Obviously, that query isn’t going to work in the final product as planned. The problem with the query is that the search is case sensitive. The solution is the UPPER function that takes a parameter and returns it in uppercase. To compare a search item and the prodDesc field, first convert both of them to uppercase, and then perform the search: select * from tblProduct where UPPER(prodDesc) like UPPER(“%leather%”); mysql> select * from tblProduct where UPPER(prodDesc) like UPPER(“%leather%”) \G *************************** 1. row *************************** prodID: M007 catID: 1 prodName: Womens Leather Leisure shoes prodDesc: Attractive leather shoes that offer a fantastic look and an amazing feel – for women only prodPrice: 25.1500 prodSmPic: catalogimages/M007sm.jpg prodLgPic: catalogimages/M007lg.jpg ...

Showing Related Products The biggest problem with the product catalog is defining the query that shows the related products. The related products table is a start, but it doesn’t contain the information you want. For example, to show the items related to product ID M004, you might try a query like this: mysql> select * from tblRelated where prodID1=’M004’ \G *************************** 1. row *************************** prodID1: M004 prodID2: M005 *************************** 2. row *************************** prodID1: M004 prodID2: M007 *************************** 3. row *************************** prodID1: M004 prodID2: M008 3 rows in set (0.00 sec)

These are the correct product numbers, but they aren’t the information you need to build a dynamic page. For each of the prodID2 fields returned, you need to retrieve the given record.

13

378

Day 13

At first, this might seem like a two-step process—retrieve related product IDs, and then look up the full record corresponding to the product ID. You could certainly program this feature using that logic, but it would be a lot of work, and it wouldn’t be supported in UltraDev’s recordset model. Unless the information can be returned in a single query, UltraDev cannot work with it. As chance would have it, this query is possible by using this syntax select tblProduct.* from tblProduct,tblRelated where tblProduct.prodID= tblRelated.prodID2 and tblRelated.prodID1=’M004’;. Before trying this, let’s break apart the query to see the logic: select tblProduct.*—Select

all fields from the tblProduct database. Because this is a multiple table query (a JOIN), you need to be specific about what information you want to see. from tblProduct,tblRelated—These are the tables that the data is pulled from. Both the Product and Related tables are needed for the query. tblProduct.prodID=tblRelated.prodID2—Return

records where the product ID of the Product table is equal to the prodID2 field of the Related table.

tblRelated.prodID1=’M004’—Finally,

limit the records to those where the main product field (ProdID1) of the Related table is equal to what we’re looking for. Seemingly magic, this query performs exactly as we had hoped and returns all items related to the given product, product M004 in this example: mysql> select tblProduct.* from tblProduct,tblRelated where tblProduct.prodID=tblRelated.prodID2 and tblRelated.prodID1=’M004’ \G *************************** 1. row *************************** prodID: M005 catID: 1 prodName: Pseudo Leather Dress Shows prodDesc: For those of you who aren\’t made of money, these shoes are available for a steal prodPrice: 6.9500 prodSmPic: catalogimages/M005sm.jpg prodLgPic: catalogimages/M005lg.jpg *************************** 2. row *************************** prodID: M007 catID: 1 prodName: Women\’s Leather Leisure shoes prodDesc: Attractive leather shoes that offer a fantastic look and an amazing feel – for women only prodPrice: 25.1500 prodSmPic: catalogimages/M007sm.jpg prodLgPic: catalogimages/M007lg.jpg *************************** 3. row ***************************

Advanced Components: Catalogs, Searches

379

prodID: M008 catID: 1 prodName: Women\’s Pseudo Leather Dress Shows prodDesc: A version of our top seller for women. For those of you who aren’t made of money, these shoes are available for a steal prodPrice: 6.9500 prodSmPic: catalogimages/M008sm.jpg prodLgPic: catalogimages/M008lg.jpg 3 rows in set (0.02 sec)

Tip

Always try to make your database server do your work for you. Although it might seem that a query is impossible without additional programming, SQL is a very powerful language and can be adapted to handle just about anything you throw at it. Additionally, the speed at which the SQL server can handle the data processing is, without a doubt, far greater than that of an embedded programming language.

That completes the SQL that you’ll need for today’s project. As you can see, getting the queries out of the way can make the rest of the development go far faster and gives you the knowledge that what you’re going to build is actually going to work.

Tip

Earlier in the day, I mentioned that I would consider implementing the related items differently. As an unofficial exercise, try writing the query to do this. You can get a good idea of what you need to do by looking at the section on the keyword search. The related items could be implemented in a very similar manner.

Designing the Catalog As I mentioned earlier, this site is actually going to be a bit different from the previous dynamic applications. The design will draw together the different elements (search, results, and so on) into a look and feel that is similar across all the functions. Before you can start designing the site, you need to configure a new site and a new database connection, as well as select the appropriate server model. Make sure that you have UltraDev talking to your Web server and database server before continuing. There are many ways that you can lay out the screen, but I’ve chosen to use a simple table design, as seen in Figure 13.3. This is the basis for all the pages that will be designed today. The top of the page is reserved for title information, whereas the right side will eventually have dynamic navigation information inserted.

13

380

Day 13

FIGURE 13.3 A simple layout will work perfectly for the application.

To put some of your previous knowledge to work, save this initial document as a template after making the title, content area, and product category cells editable. Remember from Week 1 that a template provides a way to keep information shared between pages in a single location. To edit the look and feel of all the pages in the future requires nothing more than editing the templates. That said, go ahead and start a new page with the design that you’ve decided upon. This will be the search page.

Search Form We’ve already discussed the use of LIKE and % to do a basic search on the text of a field, but we can take this a few steps further when we design the form. Any of the fields in the database are fair game for a search, but there are only a few that would be useful to the user: Product Description Category Price Let’s go ahead and create a search form that includes these fields. There needs to be a bit of clarification on how the search will be performed, so don’t just immediately create an arbitrary form.

Advanced Components: Catalogs, Searches

381

The form will submit its values to a results page that will display all the matching items. In order to pass these, you will need to set the action of your form to be that of results.asp or whatever name is appropriate to your server platform. Be sure to set this action before continuing, it’s easy to forget and might have you scratching your head when trying to debug the system. The Product Description field can be implemented as a text field. The Category field, however, will be slightly different—it will use a list of elements pulled dynamically from tblCategory. The Price field will be used to search for items whose prices are less than a specified value. A basic search screen is shown in Figure 13.4. Go ahead and lay out your screen to look like this one—you’ll add some dynamic behavior after the HTML is built. FIGURE 13.4 Lay out a simple search screen.

Add both of the pop-up menus by clicking the List/Menu item in the Objects palette. You’ve already added several text input fields in previous exercises, so that should be old hat by now. Be sure that your tags encompass the entire table. Next, define some price limits for the Price Limit pop-up menu. To do this, highlight the Price Limit field and open the Properties palette. Click the List Values button to open the list item definition screen, shown in Figure 13.5. You can add items to the list by clicking the + button and setting values for each field.

13

382

Day 13

FIGURE 13.5 Add these values in for a simple price search function.

Next, configure the Category list. Unlike the Price Limit pop-up menu, this list can be generated from the information in the database. To do this, you’ll add a Dynamic Element server behavior. First, however, you need to define the recordset that contains all the records in the tblCategory table. For my setup, I’ve defined the recordset category to contain all the data that is needed. Imagine this recordset as needing to contain both the text label of each item in the pop-up, and its corresponding value.

Tip

Make sure that you save your file with the appropriate extension for the server model that you’re using. This doesn’t just apply to this project, but any project that you start working on. When I started this page, I originally saved it on the server with an .html extension instead of .asp. The result was a Live Data view mode that didn’t work and a page that didn’t open properly on the application server. Three little letters drove me up the wall for the better part of 45 minutes.

Dynamic Menus After the recordset is defined, you’re ready to add your dynamic server behavior. Highlight the Category selection list, and then follow these steps: 1. Open the Server Behavior palette. 2. Click the + button. 3. Select Dynamic List/Menu from the Dynamic Elements pop-up menu. 4. Fill in the behavior elements as seen in Figure 13.6—you might have to change some elements to match your data definitions. There are a few portions of this dialog box that might need a bit more explanation: 1. Recordset—As with all server behaviors, choose the recordset that was defined for the data. 2. Menu—The name of the menu that needs to be driven from the database. Make a habit of naming your forms so that you can easily find them on pages containing many forms.

Advanced Components: Catalogs, Searches

383

FIGURE 13.6 A server behavior can turn a static pop-up menu into one that is generated on-the-fly.

3. Get Labels From—The field in the recordset that should define what the user sees in the pop-up menu. 4. Get Values From—The field in the recordset that is used as the value of the menu items. In the case of the product catalog, this is the catID field. 5. Select Value Equal To—The selected value in the list. Unfortunately, there is still a minor problem with the Category pop-up menu because the only choices shown on the screen are the ones in the database. What if the user wants to display all the records? The easiest way to do it is to add a static All option to the list of selections. Open the properties inspector for the pop-up list, click the List Values button, and add a new value to the list with these properties: Name: All Value: % Yes, you read that right—the value of the All item should be a %. If you remember the initial SQL queries that we wrote, the % character was used with the LIKE keyword to match any characters. If we use the qualifier catID LIKE ‘%’ in the search, all the catIDs will be matched—which is precisely the behavior that we want. That should complete the definition of the product search screen. Now it needs to turn up some results!

Search Results Building the search results page will follow very much in line with the record listing pages that you’ve built in the past, but with a twist. Because there are potentially hundreds of items in this catalog, it would be nice to be able to step through them without having to worry about overwhelming your browser with 10,000 records on a single page. This is a very typical process for online databases and is, without a doubt, a necessity on a site that has any reasonable volume of data to manage.

13

384

Day 13

To set up the search results, go ahead and create a new page named results.asp that will contain a basic layout for the data. This should be created using the same template structure that you defined earlier, but the results will be returned in a vertical list in the content area, so plan accordingly. To aid in the design, you’ll probably want to access the data in the database so you can see how it fits. This means it’s time to write the master search query! There are three conditions to the search—the keyword, category, and price. Each of these attributes must be used in the WHERE clause of the SQL in order to correctly retrieve only the records that match the search from the database. The following query will do the job nicely: SELECT * FROM tblProduct WHERE catID LIKE ‘formCat’ AND prodPrice<’formPrice’ AND prodDesc LIKE ‘%formKey%’

This query is quite simple, but quite powerful. It is powered by three conditions that are driven from the defined form: 1.

catalog ID must be the same as the catalog ID in the form. The LIKE comparison is used in place of = because the user needs to be able to specify the Any category. In the pop-up menu, Any returns a value of %, which, again, matches anything when used in conjunction with LIKE.

2.

prodPrice<’formPrice’—Quite

3.

prodDesc LIKE ‘%formKey%’—Finally,

catID LIKE ‘formCat’—The

simply, the product price must be less than the price listed on the form. Like the category ID, there must be a condition in which all the products are matched. This was accomplished in the form by adding an All selection with a very large value. If you know of a pair of shoes that costs $999,999, please let me know! the product description field needs to contain the formKey value. In order to search anywhere in the field, use the % character to match any characters around the formKey value.

The easiest way to set up this query in your recordset is to type the SQL statement directly into the advanced query SQL field. You’ll also need to set up some variables (formCat, formPrice, and formKey) that capture the data being submitted from the form. Figure 13.7 shows the advanced query setup with the properly defined variables.

Advanced Components: Catalogs, Searches

385

FIGURE 13.7 The search query should be set up in the advanced mode.

Note

Figure 13.7 assumes that you are using the ASP server model to set up variables for use in the application. If you are using one of the other server models, you need to edit the ‘Request(“variablename”)’ values in the Runtime Value field to match the correct model. This is discussed in Day 11, “Storing, Editing, and Updating Data from an UltraDev Application.”

After the query is set up on your page, go ahead and add the repeating region server behavior so that more than one record is displayed at a time. However, unlike previous instances of the application, change the repeating region so that it only repeats a few times—for my example, I’m using three as the maximum number of records to display at a time. Not showing everything at once keeps the display clean and doesn’t overwhelm the user. Check to make sure that your page is working by connecting to the search page and performing a search on all the items in the database. You should see a display similar to that of Figure 13.8. Unfortunately, the display, although clean, isn’t complete. The user is left without the ability to view the rest of the records in the database.

13

386

Day 13

FIGURE 13.8 Limit the number of items shown to keep the display clean.

The Move To Behaviors The server behaviors that you’ve used up to this point rely on a specific set of data being present, either a complete record or a set of records. They haven’t offered the capability to move throughout the records. There are, however, a set of server behaviors that do let you move between individual records and groups of records in the database. These behaviors are located under the Move To heading of the server behavior: • Move to First Record—Move within the given recordset to the first record in the set. • Move to Previous Record—Move to the previous record in the recordset. If the recordset is within a group of records, this behavior moves to the previous group. • Move to Next Record—Moves to the next record or group of records for a recordset. • Move to Last Record—Moves to the last record in a recordset. • Move to Specific Record—Moves to a specific record in the set.

Note

There is some confusion about the difference between moving to a Detail Record and a Specific Record. Moving to a Detail Record sets up the passing of values to a detail page; change the record UltraDev is working with in a database. The Move to Specific Record server behavior can take the data given by the Detail Record behavior and use it to display a single record in the middle of a recordset. The last time we used the Detail Record, we manually moved to a recordset that consisted of a single record. This new process streamlines the behavior.

Advanced Components: Catalogs, Searches

387

To add Move To functionality to your document, create two links somewhere on your results page—Previous and Next. You can use buttons or text, as long as it can be used as a valid object for a link. To create the Next behavior, select the object that you’d like to link to the next group of records (for me, this is the Next text label), and then add the Move To Next Record server behavior. The configuration for this behavior is seen in Figure 13.9. FIGURE 13.9 Moving to the next group of records is only a server behavior away.

The only thing that you really want to set in the Move To behavior is the recordset that you’re moving through. It’s actually amazingly simple. After you set up the behavior for the Next button, do the same for the Previous link. The setup is exactly the same as what you just did, but it uses a slightly different server behavior—the Move To Previous Record behavior. Go ahead and test the behaviors by pulling up your Web page in a browser. You should be able to click through the different pages and browse the entire contents of the catalog! Figure 13.10 shows the catalog in action on my computer. FIGURE 13.10 The Next and Previous buttons should now be working.

13

388

Day 13

Tip

There’s an alternative to the Previous server behavior that might be better suited for your application. Although the server behavior appears to be almost instantaneous when moving back through records, it really must perform a query on the database each time it is used. On large datasets, this can take time. An alternative method is to use the browser’s history to move back to the previous screen. Using the link javascript:history.back();, you can move backwards through records that you’ve already visited.

If all has gone according to plan, you now have a working search system. There are two areas, however, that still need to be addressed. The first of these, of course, is the detail screen.

Detail Screens The catalog detail screen is actually the easiest portion of the site to build because, in essence, you’ve already built it! The search results page is 99% of what you need for a new detail page. To prepare it for use as a detail page, follow these instructions: 1. Copy the search results page to a new file named details.asp and open it. 2. Delete the Repeating Region behavior. This behavior was only necessary when more than one record is going to be shown on the page. 3. Add the Move To Specific Record behavior to the new document. Figure 13.11 displays this new behavior configuration. Setting the Move To Specific Record configuration is simply a matter of choosing the column that uniquely identifies a record in the set you’re using, and a URL parameter that is used to pass a value for that column. FIGURE 13.11 Tell UltraDev what column in the database should be matched with what URL parameter.

For example, in this catalog system, if we need to find a specific product we can specify its product ID (prodID), so this is the column we want to use. The URL parameter is arbitrary, but must be set to the same identifier that is used in the search results page for the Go To Detail Record behavior. (Don’t worry; this hasn’t been set yet!)

Advanced Components: Catalogs, Searches

389

Finally, lay out the new detail screen so that it displays the large image of the product as well as its full description. My final layout is shown in Figure 13.12. Of course, you can alter the page as you see fit. FIGURE 13.12 Lay out the detail screen with the larger version of the catalog picture and the full description of the catalog item.

Note

Notice that I’ve left the Next and Previous links in the body of my page. This provides a way for the user to casually browse the catalog from the detail view. Feel free to delete these links and their corresponding server behaviors if you’d like.

To actually give the user the ability to get to the product catalog, you need to go back to the results page and add a new link from the product search results to the detail page. Follow these steps to add the behavior to your existing results page: 1. Open the search results (results.asp) page. 2. Select the text or image that you want to use as a link to the detail page. For my project, I’ve used the product name. 3. Open the Server Behavior palette. 4. Click + and select Go To Detail Page from the pop-up menu. 5. Configure the link so that the product ID (prodID) is transferred to the detail record using the URL parameter you set on the detail page.

13

390

Day 13

Be sure to check both of the Pass Existing Parameters options. This ensures that the search is carried through to the detail page.

Caution

If you don’t transfer the existing parameters to your detail page, you might end up pulling your hair out later. The Next and Previous links on the detail page will move through the entire recordset rather than just the results from the search. Additionally, any links to other pages will lose the results of the search—this is important if you plan on expanding the functionality of the catalog.

Related Items Remember how we originally set up a complex query so that related items could be shown for an item? It’s time to add this query to the details.asp page. To do this, open the details page again and start a new recordset, then switch to the Advanced mode. Configure the query as seen in Figure 13.13. FIGURE 13.13 Because the SQL was designed earlier, showing related records is easy.

Again, a variable needs to be added to pick up the URL parameter id and feed it to the recordset definition. Next, you need to modify your detail screen so that the records from the recordset are shown on the screen. Go ahead and make some space at the bottom of the window, and then drag the prodName field from the new recordset over to the design view. Finally, set the dynamic Product Name field that you’ve added to the design so that it is a repeating region. The final page design should look like Figure 13.14.

Advanced Components: Catalogs, Searches

391

FIGURE 13.14 The related items can be added as a repeating region to the bottom of the design view.

Tip

Be sure to choose the right recordset when defining the related items repeating region. This is the first time there have been multiple recordsets in a single document.

When you load the page in your browser, it will show a list of related items at the bottom of the screen—based on the tblRelated table that was created in the database.

Showing/Hiding Page Elements As a final topic in this day, suppose you wanted to include naked pictures of yourself on the Web page, but you wanted to hide them except under very special conditions. UltraDev has a special Show Region element that is specifically created for this very purpose. For today, however, we’ll leave out the gratuitous nudity that the programmers wanted you to use this feature for, and, instead use it for something a bit more mundane—hiding and showing links based on a variety of conditions. After the user performs a search on the Web site, she is taken to the search results page. She can navigate through the search results by clicking the Next and Previous buttons at the bottom of the screen. What happens, however, if she clicks the Previous link while on the first page of results, or the Next link on the last page?

13

392

Day 13

Clicking these links will only take a user to the page that she is already on, but, at the same time, they’ll also requery the database. This adds an extra load on the server system and creates a false link that is presented to the user. Now is the time to say, “Wouldn’t it be great if UltraDev had some way of knowing whether it was at the first or last record in the recordset and displaying elements based on that?” I reply to this question, “It does!” The final set of server behavior that you’ll learn today are the Show Region behaviors. This will enable you to highlight a region of your HTML code and show it only when certain conditions are met during a database query To apply this behavior, open up the search results page and select the Next link. Then open the Server Behavior palette and choose Show Region If Not Last Record from the list of available options under the Show Region submenu. There isn’t much additional configuration, just choose the repeating recordset and click “OK,” as shown in Figure 13.15. FIGURE 13.15 The Show Region behavior can show regions based on the state of a database query.

Repeat this same procedure for the Previous button, except use the Show Region If Not First Record option. There are actually several states that the Show Region behavior can detect. Although these aren’t necessarily useful here, they can certainly come in handy: 1. If Recordset is Empty—If no results are returned by a search, this condition is considered true. 2. If Recordset is Not Empty—If one or more records are returned, the region will be shown. 3. If First Record—If the first record is contained in the current recordset, this evaluates to true. 4. If Not First Record—If the recordset does not contain the first record, show the region. 5. If Last Record—If the last record is shown, show the region. 6. If Not Last Record—If the last record is not shown, the region should be shown.

Advanced Components: Catalogs, Searches

393

You can keep these in mind for future use. After you’ve defined your final behaviors, you can go ahead and test the final version of the catalog searching system. Remember to go back into the product detail screen and hide the Previous and Next links if you left them in your version of the detail screen.

Note

Using a Show Region behavior, a region doesn’t actually hide the region unless the condition is met. If you’re worried about hiding sensitive data from a user, the Show Region behavior is a perfectly legitimate way to do this. Viewing the source will not reveal the hidden information. In fact, the region is actually removed at the server level from the information that is returned to the client browser unless the conditions you specify are met.

Automating the Navigation Bar As you might have guessed, if you wanted, you could use the Master/Detail page behaviors that we discussed in Day 11 to get a jump on the screens that were built today. Because I introduced several new server behaviors, such as the Show Region behavior, it is important that you follow the steps through the catalog creation process in order to fully understand how the different server behaviors relate to one another. That said, there are two other tools that you might want to use in future projects that can help streamline the process even more. These are the Recordset Navigation Bar and Recordset Navigation Status objects—both of which are located under the Server Objects palette in the UltraDev Objects palette.

Navigation Status Navigation status is nothing more than a string of text showing which record is being viewed out of the total number of records in a recordset. This allows a user to gauge how far into the database he is. To insert this information into your document, simply click the numbers icon in the Server Objects category of the Objects palette. Alternatively, you could insert the object directly from the Server Objects submenu of the main Insert menu. Configuration is easy, as shown in Figure 13.16. Choose the recordset that you’d like to show the status of, click OK, and the appropriate information is inserted directly into your document design view.

13

394

Day 13

FIGURE 13.16 Choose the recordset that you want to provide status information for.

You can accomplish the same thing by hand by dragging the [first record index], [last record index], and [total records] objects out of the Data Bindings palette for a given recordset. These three items show the first record in the recordset, the last record, and the total number of records, respectively.

Navigation Bars Earlier today you inserted Next and Previous buttons to provide navigation through the recordset. You also added Show Region behaviors to these links in order to show them only when it was appropriate. You can automate this entire process by clicking the Recordset Navigation Bar object in the Server Objects category of the Object palette. As with the navigation status, you will be prompted for the recordset that you want to provide navigation for, as well as if you want to use graphic or text links. The setup screen can be seen in Figure 13.17. Click OK when you are finished. FIGURE 13.17 Choose your recordset, and whether you want HTML or graphic links.

The recordset navigation that is inserted into your document will contain the next and previous behaviors you added by hand, as well as First and Last buttons to jump to the first and last record in a recordset. In addition, the Show Region behaviors are also added to the document so that the navigation is only displayed when appropriate. Although you can still use the server behaviors you’ve used previously to add this functionality to your document. This pre-built template object makes providing basic record navigation as easy as a single click.

Advanced Components: Catalogs, Searches

395

Summary In today’s lesson, you created a unified layout for a catalog system and developed an easy-to-navigate result page. Limiting the number of entries that can be shown at a time makes it easier to build sites where the appearance can be controlled. The Move To server behaviors enable navigation within the limited amount of data that is being shown. Finally, the Show Region behavior gives you the ultimate in control over the user interface. Instead of having useless links that don’t go anywhere, you can hide these links based on the condition of a recordset. The further you go in the book, the more straightforward I try to make the text. If you are having any difficulty finding the functions discussed in the text, I urge you to look over the past week’s material. Moving into the final week of projects requires that you understand the UltraDev layout and the available server behaviors. Each of the remaining days will follow the general flow of this day—including the back end database development and then the design of the site itself. Remember, although this is a 21 Day text, there is no time limit for actually reading it.

Q&A Q Why shouldn’t I show all the returned records in a recordset? A Returning all the records in a recordset is fine for the limited applications that we’ve built so far, but consider what happens if a database contains a few thousand records. Displaying 2,000 thumbnail images on a single page is likely to slow a user’s browser to a crawl. Q How can I use the Next and Previous buttons to browse the entire database rather than just a subset? A The only reason that Next and Previous are constrained to a few records is because the recordset is defined by the search parameters. Using Next and Previous actions without any search parameters will cause the entire database to become browseable. Q Why didn’t we use the Move To Specific Record option previously? A The Move to Specific Record option is only needed if there are multiple records in the recordset. When we created the last detail record, the result was defined in a worst case scenario and only a single record existed in the recordset—eliminating the need to go to a specific record.

13

396

Day 13

Q What good are the Show Region behaviors except for navigation? A You’ll actually be surprised by how useful these regions can be, especially if you use them to create code that you later modify. For example, you can set up code that performs certain actions other than show regions. Create the basic framework using the server behavior to show/hide a generic region on the document, and then insert custom code into the document.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. How do you match ANY values in SQL? 2. What is an alternative method for handling the related items’ functionality? 3. How do you add Next and Previous functionality to a recordset? 4. How is the Show Region behavior employed? 5. What happens if you forget to name a file with the appropriate extension? 6. What is an alternative to the Previous behavior? 7. What is the fastest way to create a Navigation Bar?

Exercises 1. Add navigation links to move throughout the three pages. Currently there is no way to get back to any of the pages after you’ve moved from them. In order for the catalog system to be completely functional, the user must be able to move throughout the site. 2. Notice that I’ve left a region of the page open on the left side of the screen. This region is intended for a site-wide instant search feature. This feature will add the functionality of being able to click a category link and instantly see all the results in that section. 3. As a final exercise, change the related items that are listed in the catalog so that they are clickable and will take the user to the detail page for each of the entries. Hint: This involves adding one more server behavior to the detail screen—it is a behavior you’ve used before!

WEEK 2

DAY

14

Advanced Components: User Logins Something has been missing from everything that we’ve looked at up until this point. You’ve learned how to create interactive sites and various other databasedriven screens, but there’s one area that hasn’t even been touched—user logins. How many times have you been to a Web site and been asked to create a user profile or been forced to log in before you can use any of the features? The ability to know who a user is when he is interacting with a Web site is paramount in providing true personalized interactive services. UltraDev offers its own authentication system, but in order to better understand how and why it works, today’s lesson will focus on building a similar system by hand. Today you’ll learn • What login systems are good for, and why you need them. • How to set up basic login functionality based on an existing user database. • Security concerns that you should worry about on production Web sites.

398

Day 14

Login Systems There are several ways that you can handle login systems for a Web site, depending on the purpose of your site. If you want a secure site that keeps track of users, you’ll need some form of session tracking. Otherwise, you might be able to get away with one of the less-secure methods.

HTTP Authentication Using the basic authorization functions offered by the HTTP protocol, you can pop up a basic username and password window and retrieve the information for your Web site. This procedure, however, uses the standard browser-defined authentication dialog box and doesn’t offer the flexibility of designing the interface yourself. Typically, you can set this up on your Web server using its basic configuration tools without any interaction in UltraDev. I rarely see this used as the primary form of authentication on a Web site. Instead, it is commonly used to provide limited access to portions of your Web site, such as administrative tools. Because the functionality of the authentication can be handled at the server level, there is no need to make any changes to your existing code in order for it to work. You simply tell the server what directory to protect and what username/password combinations are allowed to access that directory.

Web-Based Login A Web-based login gives you the greatest control over the way that users interact with your site. Using an HTML-based login screen, the system can identify a good user versus a bad user and give a user the option to continue further into the system based on her status. Suppose, for example, you want to create a site where several users can access a particular section, but the system doesn’t need to differentiate who the users are—all it needs to do is verify that a user has logged in to the system. In this particular instance, all that needs to happen is the creation of a screen that blocks invalid logins and allows valid users to continue. In addition, each subsequent page that is a privileged page must also include code to verify that a user has logged in correctly. Otherwise invalid users would be able to guess a URL behind the protection screen and have access to it—regardless of the existence of a login screen. The second way to handle HTML-based logins is to verify the user information in the same manner as the first method. Then instead of just passing a “Yes, this person is allowed to be here” value to the other Web pages, the server sends an identifier that

Advanced Components: User Logins

399

uniquely identifies the person who moves through the Web page. This lets you develop a Web site that is built around the user, and adapts to the user, rather than requiring the user to reconfigure the Web site each time she accesses it. Take the example of a store where you can purchase items from an online catalog with your credit card. For me, this store is generally express.com—an e-commerce site that stocks just about every DVD on the planet. When I make my biweekly visit to the site, I don’t want to have to fill in all of my shipping or billing information again. Instead, I want the system to remember who I am, so I can shop without having to worry about spending 10–15 minutes searching for my credit card and filling in forms. The system used by express.com and other sites allows me to give a username and a password that will retrieve my account information at any point in time. This is far more convenient than having to type it repeatedly. Unfortunately, although this method of handling logins offers that greatest power, it also offers the greatest challenge—keeping track of a user’s information while he is logged in. If you’re offering a simple “remember me” service such as express.com, you don’t have to worry about keeping track of what the user is doing from page to page. You simply ask for the username and password, and then retrieve the information from the database, displaying it on the next screen. The trouble is that many times you’ll want users to be able to log in as soon as they reach the site. This enables you to access information about them (and, if you desire, to store information about them) as they work their way through your Web site. So, the obvious question is where do we begin? The answer—on the very far side of easy. The first variation of a login system will be extremely simple. From there, we’ll build on that system until we have something that will work almost anywhere! Because there are two types of login-based system (secure and not-so-secure), we’ll do our best to be as secure as possible on the Web sites. For example, on sites that could pull information out of a database, the sensitive information will only be used when necessary. On pages that do not require high-level security, the login techniques will be more relaxed. Additionally, we’ll use a little “home-brewed” authentication, as well as the UltraDev user authentication behaviors. Don’t worry—this will all make sense when you start using it. Let’s start by seeing how to build an authentication system by hand.

The SQL The SQL that you need for a user authentication system is trivial. You can keep your basic user information in one table and keep additional information in a separate table. If you follow this structure, you only have to build the user authentication once, and you can use it anywhere you’d like without changes.

14

400

Day 14

Let’s go ahead and get started. What information will you need in your user authentication table? Just a few pieces of information: • User identifier • Username • Password The username and password are certainly commonplace. The user identifier is needed to provide a simple single key for determining whether a record is unique. You could, of course, use the username and password as a combined primary key, but, as you know, UltraDev doesn’t work well with this information. A table that can handle this authentication can be defined as follows: create table tblUser ( userID varchar(50) not null, username varchar(50), password varchar(50), primary key (userID) )

There’s a teensy problem with this table, but it certainly will work as is. So, what’s the problem? The problem is security. How many times have you heard about a Web site’s security being compromised and thousands of customer’s credit cards being held hostage on the Web? What if the table looked like this: create table tblUser ( userID varchar(50) not null, username varchar(50), password varchar(50), creditcard varchar(50), primary key (userID) )

Adding the credit card field to the table might be a bit of a tip-off to the problem. Storing sensitive stuff in a database is always a potential danger. Obviously, there doesn’t need to be a credit card field in the table, but keeping the user’s password in the table is almost exactly the same thing. If the user’s password is kept in plain text in the database, and the database is compromised, the information tied to that record could be exposed. This is the information that must be protected. If you’ve ever called a company to ask for your password, and they’ve been able to look it up, this should have set off a warning alarm in your head! The most information that anyone should ever store about your unencrypted password is a phrase to remind you of what your password is.

Advanced Components: User Logins

401

Passwords should never be stored in a plain text format if the application is supposed to be secure. Although one user’s account could be compromised if his password is guessed, at least the database remains secure in case the entire login information table is accidentally made visible. So, how is the password field protected? There are two ways: either through a built-in function in the database system or by writing a stored procedure on the database server itself. MySQL offers a special function that handles the encoding of passwords and other sensitive information. Called password, this function encrypts the information that is passed to it into something that isn’t easily decrypted by a user. For a production Web site, it’s probably good to use a commercial grade encryption on the password. For now, however, the password function should be more than sufficient.

Note

A question that might be fluttering around in your head right now is “How in the world do you check to see whether the password that the user enters is correct if the field you need to compare it to is encrypted?” The answer is simple. Before comparing the password field to the value that the user entered, you must encrypt the entered value. If the type values are equal, the password is correct.

Inserting records into mySQL using the password function is a bit more difficult than inserting other types of information, but only slightly more difficult. For example, to insert a record for myself into the table, I’d use a command like this: insert into tblUser values (password(‘jray’+’mypass’),’jray’, ➥password(‘mypass’));

The password function takes as its argument the string that you want to encrypt. Notice that the user identifier is set to an encrypted version of the user’s name and password. This is simply how I chose to implement this field—you can use any technique that you’d like, as long as it is set to a unique value. There are two ways to query the database for a user if the ID is defined based on an encrypted username and password, like this: mysql> select * from tblUser where userID=password(‘jray’+’mypass’); +------------------+----------+------------------+ | userID | username | password | +------------------+----------+------------------+ | 606717756665bce6 | jray | 3c7d536348b7ba98 | +------------------+----------+------------------+ 1 row in set (0.00 sec)

14

402

Day 14

Using the userID’s definition to select the user record is acceptable under one condition—the user can never change her password. If the user were to change her password and then try to access her account, the result would be the empty set because the ID cannot change over the life of the record. Even though this approach might be attractive (only one condition needs to be checked), it isn’t the right way to do things. The proper method of selecting a record is by comparing both the username and password to the values in the table, like this: mysql> select * from tblUser where username=’jray’ and password=password(‘mypass’); +------------------+----------+------------------+ | userID | username | password | +------------------+----------+------------------+ | 606717756665bce6 | jray | 3c7d536348b7ba98 | +------------------+----------+------------------+ 1 row in set (0.15 sec)

This is precisely how we’ll check information in the table for the rest of the chapter.

Note

In the remaining chapters of this book, the password function will be eliminated from the code for compatibility between database systems and ease of debugging. You can use the function as you see fit.

A Simple Login Go ahead and populate your database with some user information. You don’t need many accounts, just a few to get started: insert into tblUser values (password(‘jraymypass’), ➥’jray’,password(‘mypass’)); insert into tblUser values (password(‘jackdpass2’), ➥’jackd’,password(‘pass2’)); insert into tblUser values (password(‘robynpass3’), ➥’robyn’,password(‘pass3’)); insert into tblUser values (password(‘maddypass4’), ➥’jray’,password(‘pass4’));

Next, start UltraDev and prepare a login screen: 1. Create a New Project. 2. Add a connection to the new Login database. 3. Create a default login page with username/password form.

Advanced Components: User Logins

403

A sample login page is shown in Figure 14.1. There’s nothing much to the basic login screen—just two fields and a submit button. I’ve named the two fields Username and Password—you can probably guess which is which. FIGURE 14.1 The login screen is simple.

Note

Remember to use the password field type for the Password field. Although this doesn’t offer any real server security, it does have two purposes. First, it protects a user’s password from being seen as it is typed. Second, it offers peace of mind to users. Using the password style for a field shows the user that you (the Web site) recognize that data is sensitive.

My screen consists of no more than this code—feel free to copy it if you’d like: 1 2 3 4 7 11 14 15

➥ 5 Username: 6

8 9 Password: 10

12 13

16

The key portions of the form are lines 5 and 9, which collect the username and password. The rest of the form will vary depending on how you designed your screen. So, how do you actually log in to something? It’s all fine and well to have a login form, but it needs to do something!

14

404

Day 14

The form that you’ve created needs to submit its data to a page for processing. For a change, there’s actually no server behavior on this page—its purpose is to supply data to another part of the program. Set your form so that its action is a second page, verify.asp.

Processing the Login Information Create your new page, verify.asp (or whatever is appropriate for your server model). Remember yesterday how I mentioned that the Show Region method could be used to implement functionality beyond just showing a Next or Previous button? This is precisely what is going to be used today to handle the login. If you remember yesterday’s lesson, the key to using the Show Region behavior is defining a recordset and basing the behavior off of the results of the recordset query. To prepare a recordset for the page, follow these steps: 1. Open the Server Behavior palette. 2. Click the + button and choose the recordset. 3. Switch to the Advanced mode by clicking the Advanced button. 4. Add a varUser variable, using the runtime value of ‘Request(“username”)’. 5. Add a varPass variable, using the runtime value of ‘Request(“password”)’. 6. Finally, add the following SQL statement to the document: SELECT * FROM tblUser WHERE username=’varUser’ AND password=password(‘varPass’)

If you set some default values for the two variables, you can click the Test button to verify that the query is going to work. The final configuration should look very similar to Figure 14.2. Now, the fun part—checking to see whether the login information was valid or not. You can probably guess how we’re going to do this. The recordset was defined so that it would find a record that matches a username and a password. If a username or password is incorrect, the recordset will be empty. To set up your verify.asp document so that it can tell whether a login is valid, you need to define the content for your valid and invalid logins. Define these areas of content directly within the single verify document. A simple way to do this is to set up both of the different scenarios within two tables. For example, Figure 14.3 shows both a successful message and an unsuccessful login message.

Advanced Components: User Logins

405

FIGURE 14.2 Define your login checking query so that it looks like this.

FIGURE 14.3 Set up both the successful and unsuccessful messages from within the single view.

Now that there are two content regions on your screen, you need to set the page so that only the appropriate region is displayed when the user attempts to log in to the page. You can easily do this by setting up the Show Region behavior based on the status of the recordset. For a successful login message to display, follow these setup steps: 1. Select the table containing the successful message. 2. Open the Server Behavior palette. 3. Click the + button and, from the Show Region submenu, choose Show Region If Recordset Is Not Empty. 4. Choose the recordset to check. 5. Click OK when finished. The Show Region behavior is shown in Figure 14.4.

14

406

Day 14

FIGURE 14.4 Show the successful login message only if the recordset is not empty.

Likewise, you need to configure the unsuccessful login message so that it is shown when the recordset is empty. Because the recordset cannot be empty and not empty simultaneously, only the appropriate message is displayed at the appropriate time.

Testing Go ahead and try the login system. Transfer both the login and the verification screens to your application server and test them. As part of the testing process, you need to test all the different options that are available on the form: • Invalid username and password • Invalid username and valid password • Valid username and invalid password • Valid username and password • Empty username and password As you develop more and more applications, you should run through testing procedures similar to this in order to make sure that your application works as expected under all circumstances. As you work through the different combinations, you might notice that you get a successful message when the fields are left empty. If this happens, the problem is almost certainly variables that you’ve configured default values for. The default values are not simply used in the design Live Data view—they are carried into the auto-generated code itself. Set these default values to a nonexistent username and password in order to fully secure the system.

Caution

Be careful when you set the default values for a query. If you set default values for testing purposes and then never delete them, you might be opening a backdoor to your system without even knowing it. In the case of the login system, using a valid default username and password as default variable values creates a situation in which no username or password needs to be given to gain access to the protected pages.

Advanced Components: User Logins

407

Hidden Code As I mentioned yesterday, the Show Region behavior does not pose a security risk in that it doesn’t actually hide a region on a page or make it invisible. Instead of only conditionally showing data, a better way to think of it is as a Delete Region behavior that doesn’t delete a region if the appropriate condition is met. For example, in the final deployed application that I’ve just created, the page displaying the successful message looks a bit like this: 1 2 3 4 <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”> 5 6 8 9 10 You’ve Logged in Successfully! 11 12 13
14 15

Similarly, the unsuccessful login HTML is 1 2 3 4 <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”> 5 6 7
8 9 10 12 13

11 Your login information is incorrect.

14 15

If you compare the two pages, you’ll notice that only the table that you want to have shown on the screen is actually in the HTML. This means that you can include sensitive information on the successful screen without having to worry about it showing up in the HTML source.

14

408

Day 14

Maintaining a Session With the user properly logged in to the system, the problem becomes one of maintaining the user information as users pass from page to page on the site. There are two ways to maintain the identity of users as they make their way through the Web site. First, the user identifier can be passed from page to page as a portion of the URL, or embedded in a form. This method of session management is useful in that it does not rely on cookies to keep track of a user. You’ll find that if you implement a site using cookies to handle session management, eventually someone will complain. The drawback to this approach is that the client is constantly reminding the remote computer who it is. Without custom programming, the user will be able to bookmark a page after logging in to the system and immediately return to the logged-in state. (You might see this as a benefit actually.) Because the user identifier that is being passed between pages never changes, there’s no way to tell whether the user has freshly logged in to the system, or is returning from a previous visit. One possible way around this is to create another table in the database that contains a random session ID that is associated with each user ID after login. This session ID can then be passed from page to page rather than the user ID. After a certain length of time, or a certain event (such as the user clicking a Logout button), the session ID can be removed, and the user is effectively logged out. This level of complexity requires additional server-side programming in order to remove the session ID. There is an alternative, less complex way of handling the same situation. By using cookies to store session information, you place the burden of expiring a session on the client computer. When the user first logs in to the system, you can store a cookie on the computer. This cookie can contain the user ID. UltraDev enables you to interact with cookies as if they were any other variable. This technique is easy to use and very easy to manage—except for a few minor problems. First, the user must have cookies enabled because without cookies the program will be worthless. Second, programming will need to take place outside of the UltraDev environment. UltraDev does not natively enable cookies to be set as a server behavior. The last problem is that there is really no security advantage to cookies—although mostly hidden from the user, cookies are accessible and can be easily modified by a determined hacker. There would be no real challenge in creating a permanent login session using a nonexpiring cookie on the client computer.

Advanced Components: User Logins

409

The best solution in this circumstance is to use the cookie to store a randomly generated session ID and use that session ID to identify an individual user. After a certain length of time, the server can remove this session ID. When that takes place, the cookie will be worthless, regardless of whether or not it has expired.

Note

There is really very little difference between using cookies and passing information from URL to URL. Cookies are more transparent from the user’s point of view, but are less compatible than URL parameter passing.

So, which technique will we be using here? We’ll use a combination of techniques in order to maintain state. I, personally, prefer to avoid cookies whenever possible. The chance of losing customers on a Web site because they choose not to allow cookies is not worth the risk. You certainly might be in a situation where this is not an important consideration—but if you’re trying to serve as wide of a user base as possible, you should attempt to keep cookies to a minimum.

Note

Don’t get me wrong—cookies are a wonderful tool. However, you can’t rely on every end user to always accept the cookies that you try to set. Although I don’t recommend cookies for mass public sites, they are invaluable when you can control the users who access the site. I use cookies extensively to maintain state information on intranet sites. If you’re interested in seeing how often cookies are used on the Web, go to your browser preferences, and enable your browser’s capability to warn you each time it receives a cookie. You’ll be amazed at how many you receive.

Variable Passing Let’s go ahead and implement session management through URL parameter passing. There’s very little you’ll need to do to achieve this. You will, however, need to learn a new server behavior so that you can implement this feature site-wide. Go ahead and open the UltraDev Verify document that includes both the valid and invalid regions. The region that you need to work with is the valid area. In order to let the rest of the site know who we are, we must provide a link from this region to the next page of a valid login. First, create a placeholder page for the rest of the site. You don’t really need any content for the page yet; it’s just the area that you’re going to link to after a valid login. I’m calling my copy of this page online.asp—feel free to follow my naming convention for this example.

14

410

Day 14

After you’ve added the page, go back to the verify.asp page. This is where you’ll make the parameter-passing link. Follow these steps to link to the online.asp document while passing the user identifier: 1. Add a new object or text label to the valid region. This will be the linked object. 2. Select the object and choose Make Link from the Modify menu. 3. Highlight the online.asp file that you’ve created. This is representative of the rest of the site. 4. Click the Parameters button. You need to add a dynamic parameter to the link line. 5. Add a new parameter that will be used to pass the user ID. As shown in Figure 14.5, I’ve chosen to name this parameter userID. FIGURE 14.5 Add a new parameter that will pass the user ID.

6. To set the value for the parameter, click the lightning bolt icon in the value field. 7. Choose the userID field from the Recordset, and then click OK. 8. Your dynamic URL parameter should now be added to the link configuration dialog, as shown in Figure 14.6. FIGURE 14.6 The dynamic parameter will be added to the end of your link.

That should do it. Now, when the user clicks the link to connect to the rest of the site, his user ID will be passed through the link to the next page. This parameter can then be used on the subsequent page to look up or store account information, and so on. There’s actually a server behavior specifically for creating links to other pages while passing all existing URL and form parameters. For this very first link, however, we must manually define the parameter passing because the value doesn’t already exist as a URL parameter or form element.

Advanced Components: User Logins

411

Go ahead and test the page. Notice that when you connect with a valid username and password, the link to the new site page will contain the URL parameter that you want to pass: http://192.168.0.150/login/online.asp?userID=606717756665bce6

If you’d like further verification that this is working, add a new recordset to the online page that runs a query to select the rest of the information (username/encrypted password) from the user table and display it on the Web page. You should be getting used to the procedure by now: 1. Open the online.asp document. 2. Open the Server Behavior palette. 3. Click the + button and choose Recordset (Query) from the pop-up menu. 4. If the recordset definition window is in Advanced mode, click Simple to switch to the simplified view. 5. Choose the appropriate connection and table from the pop-up menus. 6. Leave other options in their default state except Filter. Set a filter for the query that matches the user ID in the database to the URL parameter user ID. 7. After your recordset is complete (it should look like the display in Figure 14.7), click the OK button. FIGURE 14.7 To verify the login information, create a recordset to select the user information based on the URL parameter.

14 Finally, switch to the Data Bindings palette and drag the username and password fields from your recordset into the document design view. Retest your document and verify that the appropriate user information is being displayed.

412

Day 14

Unfortunately, although the page might seem to be complete, there’s actually a bit of work that still needs to be done. Easy work, but work nonetheless. There’s a serious problem with the system we’ve designed. Try playing around with your pages and see what happens. If you follow the logic flow through your site, you’ll find that everything is working perfectly. However, this depends entirely on the assumed site logic. Put yourself in the shoes of a hacker, however—does a hacker need to follow the flow of logic that you’ve defined for yourself? Of course not! To verify that a problem exists, bypass the login screen and load the online.asp page directly in your browser. Do you realize what the problem is now? You’ve accessed the “secure” Web page with absolutely no login information. This isn’t exactly what we intended, is it? Luckily, you already know what you need to do in order to fix this problem—use the Show Region server behavior. You’ve already defined a recordset for the page, so you can use it in your Show Region behavior: 1. Select the entire Web page. 2. Open the Server Behavior palette. 3. Click the + button and choose the Show Region menu. Select Show Region If Recordset is Not Empty from the submenu. 4. Pick the recordset that you’ve created. 5. Click OK to save the configuration.

Tip

Besides just hiding the content of the page so that it isn’t visible when the user isn’t logged in, you might want to provide a warning message. You can add an Invalid Access region to the page that is shown when the recordset is empty. This provides the page content to people who have logged in correctly and a warning message to people who have tried to bypass the security system.

You’ll need to use the Show Region behavior on all pages that are protected from the general public. In some cases it doesn’t really matter whether people access databasedriven pages without logging in because there won’t be any information to show. (There’s no way to look up the userID without a correct login, for example.) The less information a potential hacker has to work with, however, the better.

Advanced Components: User Logins

413

Variable Passing Continued You’re ready to set up the rest of your pages so that they are also connected to, and protected behind, the password dialog box. The technique you’ve seen for linking the userID from one page to another will work on any page. The important thing is remembering that you have to transfer this information between pages. If it is not transferred, the site will forget who the user is. These simple steps can be used anywhere to transfer a specific variable (such as userID) between pages: 1. Select the object that you want to use for a link. 2. Choose Make Link from the Modify menu. 3. Find the file that you want to link to and select it. 4. Click the Parameters button. 5. Add in a new parameter name that you want to transfer. 6. Instead of supplying a value for the parameter, click the lightning bolt icon. 7. Choose the field you want to transmit from your available recordsets. 8. Click OK.

Caution

You’re not going to like this. You’re not going to like it one bit. In fact, you might want to scream. Don’t hate me. Okay, in order to maintain the necessary state information, you will need to pass URL parameters on every link that you make. If, for example, you have a site map that includes links to 100 or so pages within your site, you’ll need to add the appropriate URL parameters to all these links. This can be a major headache, but it is the only way (aside from using cookies) to transfer the data you need. Don’t worry too much—we’re just doing things the hard way now. Treat this as a learning experience!

There are two alternatives that can speed up the process of transferring URL parameters. The first assumes that you’ve already defined a URL with a dynamic parameter, as we just discussed, and that you want to define the same parameter for all the links in the document. For example, here’s the Valid Login table that I display immediately after logging in to the server: 1 2

14

414

Day 14

3 4 5 6 7

11 12

You’ve Logged in Successfully! ”>CONTINUE 8 9 10

Take a look at the portion of the code near the CONTINUE link— in line 7, the portion of the HTML (and ASP code) that transmits the URL parameter is ?userID=<%=(rsUser.Fields.Item(“userID”).Value)%>

If you’d like to quickly add the same URL parameter to all your other links (on the same page), just add this to the end of all your URLs.

Tip

To make life even a bit more bearable, you can always use the UltraDev search-and-replace features to add the URL parameter to the end of all links on your pages. You’ll need to define a regular expression to match the links, but it’s better than doing it by hand.

Moving to a Related Page An alternative way to transfer URL parameters between pages is to use a server behavior. This isn’t really any faster than choosing a dynamic parameter for a link if you’re transferring a single parameter. It does come in handy, however, if you have an entire sequence of parameters that needs to be transferred. You’ve submitted a form to a page, and then want to transfer all the variables to another page. You could do this by setting a few dozen dynamic URL parameters to transfer. Alternatively, the Go To Related Page server behavior is capable of transferring all the parameters that currently exist on a page as well as anything submitted from a form. Essentially, any data that is available on a Web page is transferred to another page by using the behavior. To use the Go To Related Page behavior, select the item that you want to use as the link, and then choose Go To Related Page from the Server Behavior palette. Fill in, or choose the related page that you’re linking to, and choose the parameters that you want to pass.

Advanced Components: User Logins

415

You can choose to pass URL parameters and form parameters to the related page. The URL parameters are the options that you’ve been passing back and forth on the URL line—such as http://www.myurlgoeshere.com/test.asp?name=John

in which the parameter name is passed with the value John. The second type of parameters that you can pass are the form parameters. These are the variables generated when a form is submitted. If the page you’re on is the result of a form submission, you can pass the submitted information to another page by clicking this option. Figure 14.8 shows the Go To Related Page server behavior definition. FIGURE 14.8 Choose the page you want to pass existing parameters to.

Caution

You might be surprised to learn that we haven’t actually created any Web pages that can use this behavior! The obvious place for its use is directly after the user logs in to transfer the user ID to the subsequent pages. Unfortunately, the user ID, at that point, doesn’t exist as either a URL or a form parameter. This is a common stumbling point for first-time users. It’s important to note that the contents of a recordset are not part of the URL or form parameters. Although they are available to be worked with on a page, just like form or URL parameters, they are completely different beasts altogether. Only after you’ve passed the user ID manually on pages can you subsequently use the Go To Related Page behavior to pass the value to additional pages.

Time for Cookies Rounding out today’s work will be a look at the use of cookies to maintain user information. This is not exactly the best-integrated feature of UltraDev, so we’ll do what we can do within UltraDev and step outside when we need to.

14

416

Day 14

So far, we’ve seen a fairly simple way to maintain information about who is logged in, but it involves passing a lot of data across the URL. Using cookies to do the same thing is even easier, and, you can define a cookie for an entire project—not just a single page. We’re going to look at a bit more advanced use of cookies—namely session variables. A session variable is not a cookie, but it does rely on a cookie in order to be used. A session variable stores a particular piece of information based on the session ID stored in a cookie. What makes this incredibly useful is that the cookie set on the client computer stores only a randomly generated session ID—this is the only information stored on the client. The session ID is used to identify other session values that are stored on the server. This means that there are no security problems created by passing data back and forth between the client and the server. Unfortunately, as we’ve already mentioned, the use of cookies, even if it is only one, can be disturbing to users or might not work if users have disabled cookies on their computers. Figure 14.9 shows a typical “You’re about to receive a cookie” dialog box. FIGURE 14.9 Cookies can be an annoyance.

If you’re planning on running a cookie-based site, you should probably supply a disclaimer somewhere on the site so that users understand how and why they are being used. A common misconception of many people is that cookies are inherently evil and will be used to store their credit card numbers, their children’s social security numbers, and detailed plans for a burglary of their home. In reality, cookies, properly used, are a fantastic, benign tool for building secure and powerful Web sites.

Note

Here’s a nice, typical cookie disclaimer that you can use: This site uses cookies only to maintain your information as you move throughout this site. A cookie is a small piece of information usually used to identify an individual when that person is accessing a site. At no time is any personal information stored in a cookie, nor is any tracking information made available to other sites for any reason.

Advanced Components: User Logins

417

To configure your browser for cookies, follow these instructions: Internet Explorer: In IE 4.0, choose Edit from your pull-down menu and select Preferences. If you’re using IE 5.0, use the Tools menu to access Internet Options. Under Receiving Files, select Cookies. Next to When Receiving Cookies, you can select either Never Ask, Ask for each site, or Ask for each cookie. This controls whether your browser prompts you for incoming cookies, or accepts them. Netscape Navigator: Choose Edit from your pull-down menu and select Preferences. Select Advanced and click on the appropriate cookie option.

Setting a Session Variable If you’ve decided to set a session variable in your application, you’ll need to choose the appropriate place to do it. Luckily, you’ve already learned how to do this. By using the Show Region behavior, you’ve defined exactly where the session variable can be defined. If the user has had a valid login, you can then set a session variable so that it contains the userID. This variable, in turn, will then be accessible from any Web page in the site— without the site needing to pass any of the information between pages. For example, to set a session variable with the userID after a user has successfully logged in, open the page that you created with the valid login and invalid login regions. Open your source code and look for the section that defines the valid-login region: 1 <% If Not rsUser.EOF Or Not rsUser.BOF Then %> 2 3 4 12 13

5 6 You’ve Logged in Successfully! 7 8 ”> 9 CONTINUE 10 11

14 <% End If ‘ end Not rsUser.EOF Or NOT rsUser.BOF %>


In defining the show region in line 1, UltraDev has set up the conditions under which the session variable should be set. If you set the session variable in this area, only valid users will have a session ID generated.

14

418

Day 14

So, how exactly do you do this? Simple—by inserting this piece of code into the appropriate area: <% Session(“userID”)= %>

You’ll need to replace the with the actual query that returns the userID field from your database. For my document, with a recordset named rsUser that returns the userID field, I’d use this command: <% Session(“userID”)=rsUser.Fields.Item(“userID”).Value %>

The final block of HTML (and embedded language) code looks a bit like this: 1 <% If Not rsUser.EOF Or Not rsUser.BOF Then %> 2 <% Session(“userID”)=rsUser.Fields.Item(“userID”).Value %> 3 4 5 12 13

6 7 You’ve Logged in Successfully! 8 9 ”> 10 CONTINUE 11

14 <% End If ‘ end Not rsUser.EOF Or NOT rsUser.BOF %>


Note

The code samples shown here are for the ASP server platform. You’ll want to look in the appropriate appendix for more information on how to set session variables in ColdFusion and Java server pages. If you choose not to use session variables at all, you maintain greater compatibility with browsers that have disabled cookies but will have a harder task of programming your sites.

Using Session Variables After a session variable has been defined, you can use it anywhere in UltraDev—just like a form variable or a URL parameter. To do this, you’ll need the Data Binding palette (haven’t used that much, huh?) and these simple instructions: 1. Open the Data Bindings palette. 2. Click the + button and choose Session Variable. 3. Supply the name of the variable that you used in the assignment on your Web page and click OK, as seen in Figure 14.10.

Advanced Components: User Logins

419

FIGURE 14.10 Enter the name of the session variable that you’ve defined in the code.

That’s all you need to do! The session variable that you defined in your code is now accessible from any page in the site. You can use the session variable exactly as you would any other piece of bound data. The session variables and the recordset values are listed under separate sources. Figure 14.11 displays the Data Bindings palette with a session variable added. FIGURE 14.11 Session variables have their own place under the Data Bindings palette.

Session Variables in Queries Session variables can be used in queries, much like the normal Request variables (URL or form). However, instead of using the Request(‘’) function to assign the session variable to an UltraDev variable, you’ll need to use the Session (‘’) function. Using this technique, you can do exactly what you normally do with URL parameters, except, instead of having to pass things to every single page where they might be needed, the values are accessible everywhere. Once again, passing information through session variables is actually safer than using URL parameters. Instead of having data being sent back and forth, it is stored on the server, and the client application is only used to store a session ID that identifies the values on the server. We’re going to use session variables for several of the Week 3 projects. Using them is both cleaner and more efficient than URL parameter passing. If you’d rather keep things compatible with all browsers, you’ll need to use URL parameters as the session management system on your sites.

14

420

Day 14

Note

A quick word on sessions: Session variables are maintained entirely by the server and last for the length of time that the user is using the browser. Although a cookie is used to maintain a session between pages, it is only a temporary cookie and is never even saved to your computer’s drive.

The UltraDev Authentication System The purpose of this chapter is to introduce you to the process of user authentication and maintaining a user’s state across different Web pages. UltraDev’s built-in user authentication behaviors help automate this process, but it is important that you understand how the underlying process works so that you are aware of the shortcomings and benefits. You’ll use the techniques discussed here, and the UltraDev authentication system in depth. UltraDev will perform the same actions you’ve learned here, including setting a session variable—all without editing the code once. One of the problems with the behavior, though, is that it forces you to use the username as the primary key for the user table. Although this is fine for most cases, it eliminates the possibility of allowing the user (or an administrator) to modify her username. As we work through the examples in the final week, we’ll take a look at several different user information tables—from those that match the UserID system we’ve worked with today, to a hybrid UserID/username system, and a pure username-based system. You’ll get the full treatment in user authentication! It is very important to note, however, that the parameter passing method of maintaining user state is the only way to create a site which is accessible by all users. This form of session management is not supported by the UltraDev authentication system in any form.

Real Web Site Security If you’re using a Web-based login to any site, you’re inevitably transmitting a username and password across the Internet using plain text. This is not necessarily (in any way, shape or form) a good thing if you’re trying to run a secure operation. In order to fix this problem, you should look into running a secure, SSL (Secure Sockets Layer) based Web server. If you use a secure Web server to handle your login information, all transactions between the client and the server are encrypted before they take

Advanced Components: User Logins

421

place. This means that a site which uses simple login schemes can become significantly more secure without any additional programming. Unfortunately, there is no perfect solution for Web security. A combination of good Web site authorship and intelligent server operation makes for the best defense against hackers.

Summary Today’s lesson covered one of the most important functions that exist on Web sites— login screens. By combining the use of hidden regions (Show Region behaviors that aren’t being shown) and standard queries, you can develop a login engine for your Web sites. The Show Region behavior can be used to hide information as well as to show information based on the results of a recordset query. After the user has successfully logged in, how does the system maintain the user’s information? It’s not as easy as it might seem! In order for the system to remember who has logged in, it needs to pass information from page to page and look up the needed user information from the database as it goes. The Related Page server behavior can be used to transfer existing parameters from page to page. Another way of keeping session information after a successful login is to use session variables. Session variables are maintained on the server and are not transferred back and forth during each request like URL parameters. Session variables rely on a session ID cookie that is set on a client’s machine. The drawback to this approach is that the client computer must have cookies enabled in order for the program to work. On the up side, the built-in UltraDev authentication behaviors automate many of the techniques in this chapter. Understanding the underlying techniques, however, is very important in developing secure sites that perform as expected.

Q&A Q What sorts of Web sites should logins be used for? A Logins can be used in many different Web sites, regardless of whether they contain sensitive information. For example, you can provide customizable Web content based on who the user is at your site. Although the information might not need to be secure, providing a way for the site to customize itself based around a user is a value-added feature than you can easily employ with a login screen.

14

422

Day 14

Q How can I tell whether I should use a URL parameter passing method or session variables? A First, you need to identify the users for your site. If you have control over your clientele, you can use session variables without fear. Unfortunately, if you must cater to as wide of an audience as possible, you should use URL parameter passing. Q How do session variables work if the information isn’t stored in a cookie? A Session variables are actually kept on the server. They are referenced based on a session ID that is stored in a cookie on the client machine. If the client does not accept cookies, you’ll be unable to set session variables. Q Why do you have to use session variables or URL parameter passing? A The Web is a stateless environment. Each request to a Web site is separate and unique. If the Web server does not receive some sort of information from the client computer, it cannot identify who the client is. Cookies and parameter passing are the two methods by which you can maintain information about a user accessing your site.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. How can you use a Show Region behavior to hide information? 2. What are login systems used to secure? 3. How can you protect pages from being viewed without a valid username or password? 4. What does the Go To Related Page behavior do? 5. Are recordset variables passed by the Go To Related Page behavior? 6. If a user cannot navigate through a session variable-based site, what is the likely cause?

Exercises 1. Create your own login system based on the one seen today. You can modify the user database as you see necessary. For an added challenge, add a user profile to the system so that users can change their passwords if they’d like. This is common on many login-based systems.

Advanced Components: User Logins

423

2. Experiment with the use of the Show Region behavior to show and hide Web page content based on login information. You’ll quickly realize that this behavior, although very simple to use, can be far more flexible that one might be led to believe. 3. Rewrite the login system you wrote in exercise 1 so that it uses cookies to maintain user state. Try to accustom yourself to using cookies on your Web sites wherever possible—they’ll greatly speed up your application development time and will reduce the changes of error caused by not passing state information in URL parameters.

14

WEEK 2

8

In Review

9

Completing the second week of Sams Teach Yourself Dreamweaver UltraDev in 21 Days means that you should have a full working knowledge of the functions that UltraDev offers. The final week will use server behaviors extensively, so you should spend as much time practicing with these behaviors as possible:

10

Recordsets—The recordset is the most common server behavior that you’ll use. Recordsets put you in touch with the data in your database. A working knowledge of SQL is necessary in order to create advanced recordsets that do more than just select information from a database and display it.

11

Repeating Regions—Similar to Do While loops in traditional programming languages, Repeating Regions let you loop over the contents of a recordset, displaying each record as you go. You must understand the use of these regions in order to display more than a single record at a time.

12

Update/Insert/Delete—Showing the contents of a database isn’t extremely useful without the ability to work with the data. The Insert, Update, and Delete server behaviors enable Web pages to modify the database in real-time. Show Regions—Any element on a Web page can be shown or hidden based on the state of a recordset. You can use the Show Region behavior to deliver status messages to the user, or hide information that isn’t applicable. Remember, hiding a region is the same as showing a region based on the opposite condition being true. User Authentication—Checking a username and a password is a very common activity on a Web site. With the UltraDev authentication tools, you can add this functional-

13

14

ity to your site in minutes. If you want greater control over the process, you can build your own authentication routines using recordsets and hidden regions. As practice for the upcoming week, try building the following application from scratch—a movie tracking system: 1. Design a multi-table database that includes a main movie information table and an actor/actress table. 2. Use the recordset, dynamic element, and repeating region behaviors to display all the available movies in the database. 3. When viewing a movie, also show the actors and actresses in the movie. 4. Include administrative screens where you can add to the movie information, add actors and actresses, and attach actors and actresses to a movie. (Hint: You’ll need a third table to relate a movie to its stars.) You should be able to build this system with your current knowledge and no additional modifications to the code. In the final week, we’ll look at similar systems, so don’t be distressed if you don’t get it right away.

WEEK 3

15

At a Glance

16

You’ve reached the final week of the text and should now be an UltraDev expert in terms of understanding the server behaviors, connections, data bindings, and other dynamic elements. What we haven’t done, however, is build any complete Web sites within UltraDev. This final week is dedicated to building a series of sites that can be deployed online with very little modification. Within the next seven days, you’ll create:

17

Randomized banner ads—As you’ve certainly seen before, banner ads are very popular. You can easily add similar randomly chosen images to your system using UltraDev and a simple database structure.

18

Seasonal theme images—Similar to the banner ads, you can even swap out images on your site based on a day or date. Instead of having a site that remains the same all year long, create one that includes images that change sitewide with the seasons.

19

Guestbooks—Let your users add a name and a comment to a Web page. A simple UltraDev application will give you online guestbooks in minutes. Bulletin boards—Expanding the guestbook concept, create a fully function bulletin board system where the users can post/read messages, reply, and delete any message that they’ve submitted. Dynamic, user specified content pages—Many Web sites include my Web page functionality, letting the user choose what content should be on a page and how it should be shown. UltraDev can even author applications like this.

20

21

Online testing applications—With more and more schools and organizations turning to the Web for quizzing, it is important to be able to quickly produce online tests and quizzes. Using UltraDev, you’ll quickly create a system that dynamically generates tests and even scores them online. Complex query systems—Trying to create systems that allow searching available data in a way that isn’t exact is a bit of a problem within UltraDev. Using the power of your database server and advanced queries, you can easily add “fuzzy matching” to your sites. E-Commerce sites—Finally, learn how to build the most common type of site online. Using UltraDev, you can build custom e-commerce solutions too. Each of these projects can be combined with other projects, or expanded upon as you see fit. Every aspect of the site’s creation will be covered, from start to finish. Wrapping up the week will be information on what can and will go wrong when creating Web sites within the UltraDev environment. Although UltraDev is an excellent environment, things can and do go wrong. Learning what to expect can keep you from quietly (or not so quietly) going nuts.

WEEK 3

DAY

15

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools If you’ve been involved with creating Web sites before you picked up this book, you’ve already experienced some situations where you could have used dynamic tools to improve the functionality or add to the appeal or commercial viability of your site. Today we will look at several short UltraDev applications that you can use to supplement or replace existing portions of your “now stale” sites. I’ve tried to choose some applications that might not be immediately obvious as being database driven, but certainly can be. Today, you will learn how to • Use and follow the final week’s projects in the most efficient manner. • Add randomly chosen banner ads to your site. • Automatically adjust your site’s images depending on the season or time of day. • Replace email feedback with a filtered online guestbook.

430

Day 15

Making the Static-to-Dynamic Transition The hardest part of getting started with dynamic Web page programming is getting used to breaking the rules that you’ve come to know and despise. Rather than having static links on your pages, or static objects, suddenly you have the ability to change all the pages in your site each time a user visits them. The most complex online applications, such as e-commerce and searchable databases are covered in detail later this week, but you’ll find that many of the most compelling Web sites use very simple dynamic functionality to make them interesting. For example, how many times have you visited the Dilbert Web site? (If the answer is none, I can only wonder what you’re doing with a computer book.) Many people visit the site daily. The same goes for sites such as CNN, or computer sites such as versiontracker.com. I’m guessing that you visit at least one Web site on a daily basis. So, the question is, “Why do you visit these sites so frequently?” Think about that for a little bit. The answer is that you keep going back to the site because the content changes. Each day there is a new Dilbert comic posted on the Dilbert Web site. Every time you go to CNN, updated news stories are posted. Providing new and fresh content is an excellent way to keep visitors interested in your site. So, what if you don’t want to have to update your site everyday? You can still provide dynamic information and visuals to your readers. Many sites pre-seed content into their databases that is triggered at a specific time or date. Although this wouldn’t work well for a news site (unless you truly believe that the media creates the news before it happens), it does work well for other types of content that can be generated before they are needed, such as images, weekly recipes, or monthly newsletters. Today you’ll complete some little projects that you can use on your Web site to replace traditional static elements. These are common modules of Web sites and can be used to supplement sites that you already have in place. Here’s a brief overview of what you’ll be doing: Random banners/images—Common on many sites, banners offer a way to advertise other sites. Each time the user visits a Web page, the image on the page changes. You can use this for banners or any image that you put on a page. Seasonal/time-based images—Do you like updating your Web site for different times of the year? Do you like changing your graphics to reflect the color (or lack) of leaves on the trees? Changing your site graphics adds variation and interest and requires no interaction on your part, beyond the initial graphic setup.

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

Guest book—A popular Web site feature is a feedback forum. You can add this to your site very easily. You can also add a “neat” feature to the guest book that filters out messages that are “rude” or include language that you feel is inappropriate. Setting up these mini projects will get you into the swing of things, and you’ll be ready for the big projects that we’re going to be building the rest of the week. You might want to go through your existing sites to see if they lend themselves to incorporating these features. Before we get started, let me spend a few moments describing what you’re going to see while reading these last few chapters in the book. My philosophy is simple—learn by doing. UltraDev itself is simple. You’ve already seen all the functions and how to access them through the Server Behavior and Data Binding palettes. In fact, the HTML layout capabilities of UltraDev are actually more complicated to get the hang of than the dynamic database connection tools. Because of this, the final week in this book is dedicated to providing real-world examples that demonstrate the flexibility and many possibilities of UltraDev coupled with a SQL server. All the examples in this final week are compatible with the MySQL server, so you can literally get up and running with no expense beyond your Web server and UltraDev. These chapters are presented in three parts: 1. Database Design—The most important part of any project is designing the backend. Certain limitations of the UltraDev behaviors can be overcome by writing queries in the right way. Even if you’re experienced with databases, you might find yourself running into walls unless you pay close attention here. 2. Site Design—Before the HTML and programming, there is a matter of deciding how the site is going to be laid out. This usually doesn’t take long, but it must be taken seriously. You shouldn’t start coding pages before thinking the project through. Lack of predetermined structure is another sure-fire way to end up at a dead end. 3. Implementation—Each lesson wraps up with the actual implementation of the project—the HTML design and the addition of the server behaviors, and so on. Sometimes this will require editing the source code manually. After the implementation is finished, you will have a fully functional Web site capable of being deployed on a production server. You’ll need to generate your own content, but the framework will be ready to go.

431

15

432

Day 15

I feel that the approach outlined previously is the best way to give you a complete picture of the project flow. You’re more than welcome to skip around, but I recommend reading each chapter and not jumping between sections until you understand the material fully. At times, we’re going to be “tricking” UltraDev into doing things that it wasn’t designed to do. Learning a few tips and tricks is essential for getting what’s in your head into an UltraDev project. Let’s start!

Randomizing Banner Ads Okay, they’re annoying, but they’re popular. Banner ads can be sold for an amazing amount of money if your site is well-traveled. You’ve seen how to dynamically show a series of images, but you haven’t created a single image that is dynamic. Using a table with a collection of images gets us halfway there, but it doesn’t handle changing the image each time the page is loaded.

Table Definitions The key to setting up the changing image is writing a query that returns a different record each time. This is really easier than you might think, but before you can define this magically query, you need to create the database that will drive it. In each of the projects, I’ve made the assumption that you’ve set up the connection to the database before starting the exercises. Go ahead and do this now if you haven’t already. It’s time to get started with the SQL. In order to randomize the selection of an image, you need multiple images to choose from. This is what you’re going to need to store in your database table. Additionally, most banners are actually links to another site, so you need to provide a means by which the application can set a link for the image that it is displaying. The table definition only needs to take these two fields into account—and because we’re assuming that you’d have different image names for each of the banners, we’ll use the filename as the primary key: create table tblBanner ( image varchar(80) not null, url varchar(80) not null, primary key (image) );

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

As you’ve already learned, we can’t actually store images in the table, but we can store their filenames in the table and then insert that filename into an tag. By surrounding the image tag, we’ll add a link that is fed from the url field. Figure 15.1 shows the table layout for this simple banner application. FIGURE 15.1

tblBanner

The banner table holds image location and link URL information.

image* url

Sample Data I’m going to start with three banners in my system that I’ve created as examples—they are shown in Figure 15.2. FIGURE 15.2 I’ve created a few banners for my version of the dynamic image program. I hope yours are a bit better.

Along with these three banners, I have a directory and filename where each is stored on the server along with a URL that the user should be able to reach by clicking them: • banners/fade.gif—http://fade.poisontooth.com/ • banners/buddy.gif —http://buddy.poisontooth.com/ • banners/detailing.gif —http://detailing.poisontooth.com/

Note

No, these URLs aren’t real, but I own the poisontooth domain name. Rather than guessing a nonexistent domain (which is just about impossible nowadays), I’ve used my own in many of the examples. I wouldn’t want a REAL “Carl’s Detailing” to start getting tons of email about the inappropriate uses of Bondo.

433

15

434

Day 15

Enter some sample data into your database table: insert into tblBanner values ➥(‘banners/fade.gif’,’http://fade.poisontooth.com/’); insert into tblBanner values ➥(‘banners/buddy.gif’,’http://buddy.poisontooth.com/’); insert into tblBanner values ➥(‘banners/detailing.gif’, ’http://detailing.poisontooth.com/’);

The SQL Query Although there is data in the banner table, that still doesn’t explain how we select an image at random. Obviously, we can select all the data with a simple select query: mysql> SELECT * FROM tblBanner; +-----------------------+-----------------------------------+ | image | url | +-----------------------+-----------------------------------+ | banners/fade.gif | http://fade.poisontooth.com/ | | banners/buddy.gif | http://buddy.poisontooth.com/ | | banners/detailing.gif | http://detailing.poisontooth.com/ | +-----------------------+-----------------------------------+ 3 rows in set (0.04 sec)

Unfortunately, the information always comes back in the same order each time the query is performed. What would be ideal is changing the ordering of the records being returned. By adding an ORDER BY clause to do the search, coupled with MySQL’s rand() function, you can randomize the return order of these records: mysql> SELECT * FROM tblBanner ORDER BY RAND(); +-----------------------+-----------------------------------+ | image | url | +-----------------------+-----------------------------------+ | banners/detailing.gif | http://detailing.poisontooth.com/ | | banners/buddy.gif | http://buddy.poisontooth.com/ | | banners/fade.gif | http://fade.poisontooth.com/ | +-----------------------+-----------------------------------+

This is much better. However, another problem with this query is that all the records are returned, not just one. Because we’re only interested in displaying a single image, the rest of the records being returned are not important. The clean way to limit the number of results returned is to add a LIMIT to the end of the query. Using LIMIT 1 will limit the number of returned records to one: mysql> SELECT * FROM tblBanner ORDER BY RAND() LIMIT 1; +-----------------------+-----------------------------------+ | image | url | +-----------------------+-----------------------------------+ | banners/detailing.gif | http://detailing.poisontooth.com/ | +-----------------------+-----------------------------------+ 1 row in set (0.04 sec)

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

You don’t need to do this unless you want to. With the way the UltraDev recordset works, the only record that you immediately have access to is the first record returned in the recordset unless you explicitly tell the program to loop through all the records in the database—which is exactly what you want. That’s it for the SQL. Now we’d typically move on to the generation of a site map. However, this project is a bit different from others in that it adds functionality to images that can be placed on any page in any site. For that reason, we’re going to skip the site map because it really could resemble anything.

Implementation To implement the randomized images, open up a new design document in UltraDev. You can also use this with an existing file if you choose. To make the dynamic banner come to life, we’ll need three UltraDev-authored elements in the page: 1. A recordset containing the image being displayed—This recordset will provide us with the image that we need to show. Because the SQL has already been developed, it should be no problem defining the query within UltraDev. 2. An image with its source bound to the image field of the recordset. 3. A link surrounding the image that is set to the URL field. Start by adding the recordset to the page. Because all the other elements are driven from the recordset, it makes little sense to start elsewhere. Open the Server Behavior palette and click the + button, and then choose the Recordset (query) option from the pop-up list. Because this query requires the use of special functions, you won’t be able to configure the simple query mode to randomize the return order. Click the Advanced button to switch into advanced mode. Within the advanced query definition mode, shown in Figure 15.3, you can manually define the queries that are being used on the site. I typically find myself working entirely within the advanced mode because of the added flexibility that it offers. When you become comfortable with manually creating query statements, I’m betting that you’ll do the same. Configure the advanced query as you’ve done before: 1. Set a query named “rsBanner”. 2. Choose the current connection that you’ve created for today’s project. 3. Enter the following as your query: “SELECT LIMIT 1;”.

* FROM tblBanner ORDER BY RAND()

435

15

436

Day 15

FIGURE 15.3 We need to manually define the query in advanced mode. The use of the RAND function is prohibited in the simple query configuration screen.

Click the test button to try the query out a few times—you shouldn’t see any discernible pattern in the records that are being returned. Although no computer can truly be random, this should be close enough for most purposes. If you are not using MySQL, check your database server’s manual for an equivalent randomization function.

Random Events If you happen to see a record coming up more than once in a row, it doesn’t necessarily mean that anything is wrong. Although it is unlikely that a long string of repetitions will be generated, each individual event is equally likely to occur. This means that if you have three images, each time you choose one, you have a one in three chance of choosing the same one.

Now you’ll need to add the image to the document. Open the Object palette and click the image icon, or choose Insert Image from the Insert menu. You will be prompted for the file to insert. Instead of choosing one of the graphic files you’ve created, click the Select file from Datasource button. The binding screen shown in Figure 15.4 will be shown. This screen will allow you to bind one of the fields in the tblBanner table to the SRC attribute of the tag. Click the expansion arrow beside the rsBanner recordset to display its fields. Choose the image field and click OK to complete the binding. Because UltraDev doesn’t have an actual image name to work with in the code, you’ll only see an icon to represent the image. You can, however, activate the Live Data option

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

under the View menu to poll the database and display one of the randomly selected images. Click the refresh button at the top of the window a few times—each time you click, a new image will be selected. Remember, the selection is random, so you might see the same image reappearing a few times. As long as the query is properly defined, you should definitely see something similar to Figure 15.5. FIGURE 15.4 Bind your image to the image field in your rsBanner recordset.

FIGURE 15.5 You should see a banner image. Click the refresh button to see a newly randomized image.

Now you need to add the link from the banner to an external URL. This is very much the same process that you just completed. Select the entire banner image (you can do this while in Live Data mode, if you want), and then choose Make Link from the Modify menu. Again, you’ll be prompted for the file that you should link to. As you did with the image source, click the Select file from Data Source. This time instead of choosing the image field, select the url field and click OK, as seen in Figure 15.6. The URL from the database should now be bound to the link. With that step, you’ve completed the basic banner program. Try loading the page in your browser and see what happens. You now have a completely randomized image on your document. It isn’t an obvious use of UltraDev, but it’s certainly a valid application!

437

15

438

Day 15

FIGURE 15.6 Set the data binding to the second URL field.

Note

The recordset order is randomized each time the database is queried. This doesn’t mean, however, that you can copy and paste your dynamic image to different places within a single page and have the multiple occurrences each be randomized. In order to do this, you’ll need to define multiple recordsets based on the same query. Each of these recordsets, in turn, can drive a single randomized image.

Tip

This project, although simple, has been requested for almost every commercial site I’ve built. Traditionally, it’s handled by a separate CGI—but with UltraDev you can design and develop the feature all within the comfort of a point and click interface. The project is lacking a feature, however—the ability to remember what image a user last saw and not load that image the next time he visits the page. You could implement this feature by setting a cookie equal to the filename that is chosen, and then filtering the recordset where the image filename is not equal to the cookie value. This is an advanced function that involves manually editing the HTML code—you’ll learn how to do this in Day 17, “Advanced Techniques: Tracking and Using User Data.”

Seasonal/Time-Based Images Another popular type of dynamic image that you can add to your Web site is an image that changes with time. This is popular if you want to predefine content and have it automatically updated when a certain date passes. For example, having your Web graphics change with the seasons or even on a monthly basis provides the illusion that the site is

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

under continual development, even though you don’t need to pay any attention to the pages at all. This project is very similar to the random banner ads, but requires a slightly modified query and table definition.

Table Definition As in the previous example, the table definition for these dynamic images is simple. You’ll want to store the image filename along with a date or time. The implementation that I’ll be providing here is based on a certain image being triggered after a given date. After reading this section, you might want to rework the database tables differently and base the image change on time of day, week, month, or several other options. A basic date-based table definition is shown here: create table tblTimebasedImage ( image varchar (80) not null, activedate date, primary key (image) )

Figure 15.7 shows the table layout for a simple time-based image application. FIGURE 15.7 Time-based images are handled with a table similar to the randomized images.

tblTimebasedImage image* activedate

The SQL MySQL provides a series of functions that let you quickly manipulate data based on dates. You can combine these functions to easily create time and date-based queries in any system that you develop: —Returns a numeric value to represent the day of the week. 1=Sunday, 2=Monday, and so on.

DAYOFWEEK()

—Returns the day of the year. For example, January 1st is day 1 of the year, whereas December 31st is the 365th day.

DAYOFYEAR()

DAYNAME()

—The name of the day of the week, rather than a numeric value.

MONTHNAME()

—The name of the month in the given date.

439

15

440

Day 15

WEEK(date) —A numeric result is returned containing the week (1–52) of the year that the given date occurs within. CURDATE()

—The current date.

CURTIME()

—The current time.

NOW()

Tip

—The current date and time.

For a more complete list of the functions that MySQL supports, be sure to check out Appendix C, “MySQL Quick Function Reference,” for a quick MySQL function reference!

To save some time for this example, let’s just use the same banner images that we used earlier—except we will make them appear based on the time or year rather than randomly. Insert some sample data into the table. If the dates in this example have expired, increase them so that they’re relevant: insert into tblTimebasedImage insert into tblTimebasedImage insert into tblTimebasedImage

values (‘banners/fade.gif’,’2000-11-30’); values (‘banners/buddy.gif’,’2001-02-28’); values (‘banners/detailing.gif’,’2001-05-30’);

The trick is getting the query to work. Obviously you need to know what the current date is—as returned by CURDATE() or NOW()—but you can’t just compare for equality between the stored date and the results of the NOW() function. This would result in the record being returned only when it is a certain date. What we’re trying to accomplish is building a system that selects an image after the target date has passed. To do this, select records in the database that are greater than the current date: mysql> select * from tblTimebasedImage where activedate > CURDATE() ORDER BY activedate; +-----------------------+------------+ | image | activedate | +-----------------------+------------+ | banners/fade.gif | 2000-11-30 | | banners/buddy.gif | 2001-02-28 | | banners/detailing.gif | 2001-05-30 | +-----------------------+------------+ 3 rows in set (1.19 sec)

The ORDER BY clause is also needed to make sure that the closest date is at the top of the table. If you leave this value out, you’ll get the results that match in whatever order they were added to the table.

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

Similar to random banner images, you’re only interested in the first result of the query. Either ignore this technicality and use only the first record in the recordset, or limit the query using the LIMIT clause: mysql> select * from tblTimebasedImage where activedate > CURDATE() ORDER BY activedate LIMIT 1; +------------------+------------+ | image | activedate | +------------------+------------+ | banners/fade.gif | 2000-11-30 | +------------------+------------+ 1 row in set (0.71 sec)

This gives you a specific image that becomes active at a certain date. You can then follow the same steps as with the randomized banner image to add it to your page: 1. Add a rsTimebasedImage recordset to your document that contains the query we’ve just defined. Figure 15.8 shows a properly defined recordset. 2. Insert an image into the page that is bound to the image field of your new recordset. FIGURE 15.8 Define an advanced query, just as you did with the banner image.

As you can see, this is actually a little bit easier than the randomized image, because we only need to work with a single field in the database. Unfortunately, although both this and the previous exercise are “neat” examples, this is not exactly usable on a large scale.

441

15

442

Day 15

Multiple Seasonal/Time-Based Images What makes time-based images so useful is that you don’t have to pay attention to them in order for the changes to take place. You can go to bed one evening, be abducted by aliens and delivered unharmed on the international space station. All the while, your server will have taken care of altering the look of your site for you. The problem with the seasonal image, as we’ve defined it so far, is that it works for a single image. All images in the tblTimebasedImage table are considered different variations of the same graphic. What would be ideal is a theme-based system in which different images could be stored in a table and related to a group of dates. The only way to do this with the current system is to create a new table for each image. We definitely need a new technique. For example, you could have a Halloween theme that, coupled with the right queries, would replace the images in your site with scary stuff. Instead of a single image being replaced from the main table, all the site graphics could be managed within the table. To do this, you need to redefine the existing table, and add a new table: create table tblTimebasedImage ( image varchar (80) not null, name varchar(80) not null, themeID varchar(80) not null, primary key (image,name,themeID) )

The new definition of tblTimebasedImage includes a themeID, which will be defined in the second table, and a name. The name field is used to identify an image by an abstract name rather than a filename. This will let you call up an image called MainTitle or some such thing for any theme, even though the actual filename might vary between the different themes. create table tblTheme ( themeID varchar(80) not null, activedate date, primary key (themeID) )

The theme table relates a ThemeID to an activation date. For example, you might want to add in a Christmas theme that is keyed to the date 12/25/20XX. The new database schema is shown in Figure 15.9.

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

FIGURE 15.9

tblTimebasedImage

The new time-based schema uses two tables—one for images, and one for relating themes to a activation date.

image* name* themeID*

15

tblTheme themeID* activedate

The SQL The best way to understand how any system works is to create some sample data and test the queries: insert insert insert insert

into into into into

tblTimebasedImage tblTimebasedImage tblTimebasedImage tblTimebasedImage

insert insert insert insert

into into into into

tblTheme tblTheme tblTheme tblTheme

values values values values

values values values values

(‘mainimage1.jpg’,’header’,’summer’); (‘mainimage23.jpg’,’header’,’winter’); (‘mainimage65.jpg’,’header’,’fall’); (‘mainimage2.jpg’,’header’,’spring’);

(‘summer’,’2000-06-21’); (‘winter’,’2000-12-21’); (‘fall’,’2000-09-21’); (‘spring’,’2000-03-21’);

This set of data sets up four different themes (summer, winter, fall, spring) and four different header graphics to go with them. What makes this system better than the previous table structure is that it allows you to store different images (besides just header) in the same table. To use this new layout, you just need to modify the previous SQL to relate the two tables together and select an image based on its abstract name: SELECT * FROM tblTimebasedImage where activedate > CURDATE() ORDER BY activedate LIMIT 1;

This becomes SELECT * FROM tblTimebasedImage,tblTheme WHERE tblTimebasedImage.themeID=tblTheme.themeID AND tblTheme.activedate > CURDATE() AND tblTimebasedImage.name=’header’ ORDER BY tblTheme.activedate LIMIT 1;

Because you haven’t had much experience with complex queries yet, let’s break this down and clarify what’s going on: tblTimebasedImage.themeID=tblTheme.themeID—Relates

table and the theme table) together based on the themeID.

443

the two tables (the image

444

Day 15

tblTheme.activedate > CURDATE()—Compares

the current date to the activation

date in the tblTheme table. tblTimebasedImage.name=’header’—Selects activedate,

the image based, not only on the but on the abstract name for each of the fields.

To use this revised system, just update your database and replace your queries. You’ll still need to define a different query for each of the images that you want to display. This is better than the original system, which would have required a different table for each time-based image that you might want to add.

Note

As I’ve mentioned before, UltraDev does not currently offer the ability to store images, or any other binary object directly in the database. Hopefully, this will be added in the future. If it is, you’ll be able to create applications that allow you to upload new site images, and so on directly into the database. You can write this now, but it would require custom programming in order to receive the data, save it to a file, and then reference the file from within the database.

Getting Your User’s Feedback The final mini-project for the day is a guestbook. The benefits of providing a guestbook for your users is so they don’t feel that their feedback is “going nowhere.” How many times have you visited a Web site and clicked a link to leave feedback, only to find that it opens your email program so you can send a message to a nameless/faceless person who will never reply. A guestbook lets the user leave his mark on a Web site—something that can’t easily be ignored. I’m sure that you have some concerns about the messages a user can leave in a guestbook, and you should. It’s not uncommon for an unfriendly person to take advantage of a public forum to display his immaturity. Inappropriate language, embedding images, and inappropriate HTML tags in plain text, and so on—there are plenty of potential problems. We’ll see if this guestbook can’t overcome some of downfalls.

The Table Definition The contents of the guestbook table are really up to you. How much information do you want to store? The sample guestbook in this chapter is going to store a user’s name, email address, and comment.

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

445

A table to hold this could be defined as follows: create table tblcomment ( messageID int auto_increment not null, name varchar(50), email varchar(80), message varchar(250), primary key (messageID) );

This is the first time you’ve used the auto_increment type for the messageID. This feature will automatically increment the field each time a record is added. You don’t need to worry about manually generating this number. Unfortunately, this varies from database to database and might not be denoted in the same manner with your system. If you aren’t using mySQL, you could use the message itself as the primary key because it is very unlikely that multiple people will be entering the exact same message. Because there really isn’t any other information that we need to store, or relate to the comment table, the final data structure is shown in Figure 15.10. FIGURE 15.10 Store a message and any other fields you might need in the comment table.

tblComment messageID name email message

The SQL The SQL needed to select and display all the available comments in the guestbook should be immediately apparent: SELECT * FROM tblcomment;

A recordset could be defined that contains all messages, and then a repeating region applied to the fields to create a list of all the messages. This doesn’t address a few problems—namely, the order in which the messages are displayed and the fact that a given message might not always be something that we want to be shown. The best way to demonstrate this is to insert some data into the comment table. For the sake of being polite, I’m going to be inserting some rather benign comments into the database and demonstrate how to filter them out. You’ll want to adjust the filter to include actual naughty language if you deploy the system on your server. insert into tblcomment values (‘’,’John Ray’,’[email protected]’, ‘Best website ever! I couldnt hope for more’); insert into tblcomment values (‘’,’Robyn Nest’,’[email protected]’,

15

446

Day 15

‘Not true. This is sucky!’); insert into tblcomment values (‘’,’Bad Dude’,’[email protected]’, ‘Forget this place! Go here’);

Of these three sample messages, only the first should be displayed. The second message, although not bad in its current form, could potentially be worse. Similarly, the third message has a link to any outside site—and we don’t want to display any messages where the user might have embedded his own HTML. To filter the messages, you can use a partial match in the query to block out root words that you don’t want to appear. For example, try this query on the sample data: mysql> SELECT * FROM tblcomment WHERE message NOT LIKE “%SUCK%” \G *************************** 1. row *************************** messageID: 1 name: John Ray email: [email protected] message: Best website ever! I couldnt hope for more *************************** 2. row *************************** messageID: 3 name: Bad Dude email: [email protected] message: Forget this place! Go here 2 rows in set (0.01 sec)

The message is filtered based on the clause “WHERE message NOT LIKE “%SUCK%””. This query filters based on a pattern in the message field. In this case, the pattern is the word “suck” surrounded by “anything”—as represented by the % symbol. You can combine as many of these conditions together as you want. For example, to filter based on the words “suck”, “lamp”, and “toenail”, you could do this: SELECT * FROM tblcomment WHERE message NOT LIKE “%SUCK%” AND message NOT LIKE “%LAMP%” AND message NOT LIKE “%TOENAIL%”.

As you can see, the query just needs to be expanded with the new conditions to check. Because we wanted to filter out any message that had an HTML tag in it, the original query should be rewritten as mysql> select * from tblcomment WHERE message NOT LIKE “%SUCK%” AND message NOT LIKE “%<%>%” \G *************************** 1. row *************************** messageID: 1 name: John Ray email: [email protected] message: Best website ever! I couldnt hope for more 1 row in set (0.07 sec)

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

That’s it, that’s what we’re looking for. The message containing the HTML is blocked based on a pattern that matches <> with anything in the middle and anything on either side. A final step you might want to take is to add ORDER BY messageID DESC to the end of the query so that the newest messages will appear first.

Note

The query defined here will match anything that resembles an HTML tag. In fact, it will match anything that has a < followed by > in it. You can’t possibly define every HTML tag as a pattern, but you could, if you want, define some of the ones you want to filter out, such as or .

It’s time to create the HTML to get the guestbook online.

Creating the HTML Similar to the past two projects in this chapter, we’re going to skip the creation of a site map because the guestbook is only going to take up a single page. This page will have a short form for submitting comments, and, directly beneath it, the comments themselves. Start by setting up the form for inputting new comments. Open the object palette and switch to the form elements. As with any page that contains a form, you first need to insert the form object itself—without the form tag, the elements themselves won’t appear. The document will look fine in the design view, but it won’t show up in your Web browser. Insert a new form into your document, and name it frmComment—you’ll be saving the contents of this form in the guestbook database. If you don’t remember how to name a form, follow these instructions: 1. Open the Property palette. 2. Click the form tag in the bottom of the document design view to select the form. 3. Change the Form Name to frmComment. Next, insert the elements of the form that you need. You might want to first insert a table to help structure the layout of the form. You will need three fields with these names: • Name • Email • Message

447

15

448

Day 15

You can add these to the document by using the text field object in the form section of the Object palette. The name and email fields are normal text fields (the default field type that UltraDev inserts), whereas you need to adjust the message field so that it is a multiline field. Select the message field in the document design view, and then open the Property palette. Click the multiline radio button to change the field type.

Note

In case you’re interested, the multiline text field isn’t really related to the single line and password fields. This is a completely different form object called a textarea that can contain multiple lines of input.

Finally, add a submit button to the form. Clicking this button will save the new comment to the database. A final version of the form is shown in Figure 15.11. FIGURE 15.11 This is a sample comment form; yours doesn’t have to resemble it.

The last step in making the form functional is adding the Insert Record server behavior. This will add the new comment to the database: 1. Open the Server Behavior palette. 2. Click + and choose Insert Record. 3. Set the connection to the connection defined for this project. 4. Choose the tblcomment table to update. 5. In the Get values from: area, choose the frmComment form. 6. Each of the form elements should match up with the fields in the database. If they aren’t matched, select one of the form elements, and then choose the database column to match it to, and the type of data it is.

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

7. Finally, when done inserting, go back to the page that you’re on. I’ve named my page guestbook.asp. The appropriately defined behavior is shown in Figure 15.12. FIGURE 15.12 Match up the form elements with the database fields.

Now, the only thing that remains is adding a recordset to display the available comments, and then display them. Because we’ve already defined the SQL, all that remains to be done is entering it into the system: 1. Open the Server Behavior palette. 2. Click + and choose Recordset (query). 3. Click the Advanced button to go into advanced mode, if you aren’t there already. 4. Choose your database connection. 5. Name the new recordset rsComment. 6. Add the following SQL into the query window: SELECT

* FROM tblcomment

WHERE message NOT LIKE ‘%SUCK%’ AND message NOT LIKE ‘%<>%’ ORDER BY messageID DESC.

7. Click OK. Notice anything different? The code has changed. Instead of %<%>%, we’re inserting %<>%. If you aren’t using ASP, you can insert the original query without this change. The problem is that <% and %> represent an embedded ASP command, if you insert the query as-is, the system will become quite confused—in fact, it will actually break the server behaviors you’ve already added to the document! After inserting this modified behavior, you’ll need to edit the code by hand so that the query is correct. You can’t insert the % where it belongs because UltraDev/ASP will

449

15

450

Day 15

recognize it as an ASP tag. Instead you need to store it in a separate variable and then add that variable to the query. Open your document and look for the code fragment that looks like this: <% set rsComment = Server.CreateObject(“ADODB.Recordset”) rsComment.ActiveConnection = MM_connChapter15_STRING rsComment.Source = “select * from tblcomment WHERE message NOT LIKE ‘%SUCK%’ AND message NOT LIKE ‘%<>%’ ORDER BY messageID DESC” rsComment.CursorType = 0 rsComment.CursorLocation = 2 rsComment.LockType = 3 rsComment.Open rsComment_numRows = 0 %>

Tip

Remember, if you have trouble locating code in your document, you can quickly access the Find feature under the Edit menu at any time.

This is the section that creates the recordset and defines the query. Modify this code to include a new variable “pc” that is manually concatenated with the query, like this: <% set rsComment = Server.CreateObject(“ADODB.Recordset”) rsComment.ActiveConnection = MM_connChapter15_STRING pc=”%” rsComment.Source = “select * from tblcomment WHERE message NOT LIKE ‘%SUCK%’ AND message NOT LIKE ‘%<”+pc+”>%’ ORDER BY messageID DESC” rsComment.CursorType = 0 rsComment.CursorLocation = 2 rsComment.LockType = 3 rsComment.Open rsComment_numRows = 0 %>

In several projects, you’ll need to manually add a feature here or there—get used to finding your way around the UltraDev code. Sometimes it’s the only way to make a project work. Close the HTML view after you make your changes; that’s all you’ll need to do outside of the UltraDev interface.

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

Now, define a layout for the comment listing. Mine is nothing more than a two-line table—one line that has the comment, and another with the author’s name. The email address (in my version) is stored for the administrator and is not visible in the guestbook. Open the data binding window and expand the rsComment recordset. The Data Bindings window will resemble the palette in Figure 15.13. FIGURE 15.13 Your Data Bindings palette should resemble this.

Drag the message and name fields from the data binding window into your layout. This handle displays the first record in the defined recordset, but what about the others? To show multiple records, you need to add a Repeat Region server behavior: 1. Select the area you want to repeat (the name and message fields). 2. Open the Server Behavior palette. 3. Click + and choose Repeat Region. 4. In the Repeat Region configuration dialog, shown in Figure 15.14, choose the rsComment recordset. 5. Set the maximum number of messages (repetitions) you want displayed. 6. Click OK. FIGURE 15.14 Choose the number of records to display.

You’ve successfully completed all the projects of your first project day. The final document design is shown in Figure 15.15. Test the system—try adding a few comments to the database. Be sure to experiment with the filtering options as well. In fact, now would be a good time to go back and add real words that you want filtered from the system.

451

15

452

Day 15

FIGURE 15.15 A final design of the comment board is seen here.

Summary Today’s projects are meant to be quick and easy pieces of code that you can add to existing static Web sites to increase their appeal and functionality. Although not necessarily something you haven’t seen before, the chapter provides information on how to do some things that might not be considered obvious for the beginner. The use of SQL functions greatly increases the amount of flexibility you have within UltraDev. As it exists now, UltraDev is a tool that lets you display information in a database and insert it. Nothing more, nothing less. It’s up to you to combine the strengths of the UltraDev environment with the strengths of your database server. Unfortunately, you’ve also learned that UltraDev has a few weaknesses. Manually editing code after defining a complex query is not uncommon, but it usually isn’t difficult. Getting used to where UltraDev places its database access code is key in finding and fixing problems. The rest of this week will consist of defining and implementing full Web applications. Sometimes you’ll have to get your hands a bit dirty, but I’ll do my best to keep it to a minimum!

Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools

Q&A Q Can banner images be set to not show the same one twice in a row? A Through the use of cookies, you can have a browser remember (and tell the server) which image it saw last. You’ll learn more about using cookies in Day 17, “Advanced Techniques: Tracking and Using User Data.” Q How can time-based images be applied to more than a single year? A In the example that we’ve provided, the themes expire after a certain date and cannot be reused. However, as discussed in the chapter, MySQL provides functions for comparing dates based on the month, or day of the year. Either of these functions could work for multiple years. Q Do I need to modify the %<%>% query on server platforms other than ASP? A ASP uses <%> to denote embedded code—thus the problem with UltraDev. If you’re using an embedded language that denotes its tags differently, you shouldn’t have a problem. Q Now can I expand the comment board into a full messaging system? A Just wait until tomorrow because that’s exactly what you’re going to be doing.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What does % do? 2. Why do randomized images come up repeatedly? 3. Why must a separate variable containing % be inserted into the code? 4. Why isn’t it important that multiple images are returned in the randomized banner and time-based image applications? 5. What does the RAND() function do in MySQL?

453

15

454

Day 15

Exercises 1. After reading Day 17, see if you can work cookies into the banner program so that images can’t come up twice in a row. It will require some custom programming. 2. Alter the seasonal theme queries so that the image selection is based on the day of the year. This will let you pick specific dates (New Year’s Day, and so on) as well as general times of the year (spring, summer, fall). 3. Using the knowledge you have from Day 10, “Creating Database-Driven Screens,” add the ability to navigate through multiple screens of user comments.

WEEK 3

DAY

16

Advanced Techniques: Data Collection and Reporting Thus far, you’ve learned how to input data and display queries from a database— but there has been very little integration of these two processes. Much of the time when a Web site is displaying dynamic data, there is also a back end to that Web site that is used to update the stored data. Today’s lesson will focus on creating a message board system that uses both data collection and reporting techniques. This will draw together almost all of UltraDev’s capabilities into a single application. You’ll find out how to • Design a Web bulletin board system from the ground up—including the support databases • Implement a user-based record system without the need for a separate user database • Provide moderated message postings • Create a system that can easily be expanded and reused

456

Day 16

Input and Output, a Messaging System Overview One of the most common Web applications that exists is the messaging board, a forum for users to exchange messages. A few years ago, I sold a message board program (written in C) for more than $1,000. Fortunately for anyone needing such a system now, it can be built in UltraDev in an hour or two. Today’s lesson will pull together many of the standard UltraDev behaviors that we’ve seen throughout the book. The result will be a messaging application that offers many of the features of commercial packages, but you’ll be able to build it yourself. Most notably, you’ll offer users and administrators the ability to • Post messages without a signup procedure • Post the popular message icons with each message • Delete messages on the server • Moderate message forums • Search and sort messages

Defining the Site Map As with any project, the first place to start is a site map. The site map defines all the screens that we will need to build, and lays out the basic interaction between them. In the case of the message board project, there are really very few screens needed. Although there is a great deal of functionality in the final product, only a handful of screens do the trick because the content does the changing. Here’s what we’re looking at: 1. Message listing—A list of all the messages that are available in the bulletin board. This screen can include an integrated search feature as well as column headings that can be clicked for sorting. Instead of separate screens for each of these features (sorting/searching), we’ll just use a single display and several server behaviors. 2. Message viewing—When a user finds a message he wants to view, he can open it in a viewing window. One of the unique features of this bulletin board system is that it will also show the responses to a message that is being viewed. If the user owns a message, he’ll be able to delete it after he has viewed it. 3. Message composition—The final portion of the site is for message composition. There are two ways to reach the message composition screen—either through the message viewing screen, for replies, or from the main message listing.

Advanced Techniques: Data Collection and Reporting

457

That’s all we really need for a fully functional system. The more you work with UltraDev, the more you’ll realize that a lot can be done in very few files. Figure 16.1 shows the site map for our messaging board. FIGURE 16.1 The site map for the messaging system is remarkably simple.

16

Master Message Listing

View Message

Message Composition

After the site map is developed, you’ll need to create the back end for the system. Keep track of the features you want to add because they’ll be very important in determining the structure of the database itself.

Creating the SQL The SQL for this system is really very simple, but requires some important decisions to be made in the design process. First off, let’s make note of the information that we know for certain needs to be stored: Message subject Message image icon Message author Message body Simple stuff! So, let’s start with an equally simple table definition like this: create table message ( subject varchar(80), iconURL varchar(80), author varchar(80), body text )

We haven’t defined a primary key yet, because the table is lacking a field that conveniently could be used as the unique identifier. Unfortunately, MySQL can only store 512 bytes in a varchar, so the message length would be very limited. An alternative approach

458

Day 16

is to use a blob—or binary object. A binary object can usually be several gigabytes in size—more than enough for a short message. Some database servers have memo field type datatypes as well. In fact, MySQL has a text field type that can hold as much as a corresponding blob.

Note

If a blob is less limited in scope, why not use blobs all the time? Blobs are not easy to work with if you intend to develop interfaces outside of UltraDev. For example, if you connect to a MySQL database with the myODBC database driver from within MS Access, you won’t be able to access the data within the table. Make sure that you’ll be able to work with your data everywhere you need to. Luckily for us, we have the “text” type which works fine!

Let’s go ahead and address the problem of not having a primary key—a message ID. At the same time, in order to implement a system where we can display all the responses to a given message, we need a second field that also contains a message ID. What? Two message IDs? Why in the world would that be necessary? In our message board system, we’ll need two message IDs. The first ID will be the unique identifier for the message, and the second ID will be set equal to the value of a parent message. For example, if you’re replying to a message with the ID 325, the new message would have the parentID of 325. When the parent message is displayed, any messages that have the parentID equal to that message’s ID will be displayed as a list of responses to that message. Our message table definition has now grown to this: create table message ( ID int not null auto_increment, parentID int, subject varchar(80), iconURL varchar(80), author varchar(80), body varchar(250), primary key (ID) )

Caution

Don’t create this table on your server just yet! There’s a bit more refining to be done.

Advanced Techniques: Data Collection and Reporting

459

The ID of this message is kind of new to us—instead of a normal integer, it is an auto_increment integer. This removes part of the programming trouble from this system. We obviously can’t count on a user typing in a unique ID number, so, rather than handling it programmatically in the ASP/JSP/CFML, the SQL server generates a new number for each message as it is added to the system. Cool, huh? Well, we’re most of the way to a complete model for the database system, but not quite there yet. One of the features of this system is the ability of the user to delete a message that he has posted. Because I’m writing this book, I get to do things my way—that’s the truly fun part about writing. I do not enjoy going to a Web site and trying to participate in a discussion only to find that I have to go through a long registration process in order to post a single message. What’s the point? There’s absolutely no reason to force someone to register in order to participate in a discussion! It doesn’t force the user to enter in accurate information—it just slows them down. I’d rather just post my thoughts and be on my way. Because of this, we’re going to do this message board my way—no long registration processes in order to post! You’re welcome to change it to suit your own opinions though. My preferred technique for giving the user the ability to delete messages (or edit them if you’d like) is to store a simple password with each message. When the message is being viewed, a small password field and delete button form will be shown at the bottom of the window. Just enter the message’s password and click a Delete button. Poof, it’s gone! So, that adds one more field to the table—a password field. We’re not quite done yet. There’s still one more feature that needs to be added to the database for the capability of creating a moderated message board. For those of you who aren’t sure what a moderated message board is, it enables a message board administrator to choose which messages are displayed, and which aren’t. To implement this in our system, just add a hidden field with a Boolean value to the database model. If a message should be shown, the hidden field’s value is set to false (0). If not, it is set to true (1). So, that final piece of information brings our table definition to this state: create table message ( ID int not null auto_increment, parentID int, subject varchar(80), iconURL varchar(80), author varchar(80), body varchar(250), password varchar(50), hidden int, primary key (ID) )

That’s it. The final database definition is shown in Figure 16.2.

16

460

Day 16

FIGURE 16.2 The message board database is pretty darn simple.

Note

Message ID* parentID subject iconURL author body password hidden

You’re probably asking yourself how the database can only be a single table. That’s really all that it needs. The entire message board is based on a single data entity—the message. You could, if you like, set up the image icons in a separate table with an icon ID and an iconURL. I’ve chosen to violate the normalization process because this gives the flexibility of allowing the user to set his own icons. If the system were to evolve to that state, the table would indeed be normalized.

As a final step, populate the message database with a few test messages. Later on, you’ll find that it’s actually easier to insert records through the composition interface because it will handle the parent message IDs automatically. Right now, it’s easiest to just insert some parent ID 0 messages into the system. Here are the three records I’m using: insert into message values (‘’,’0’,’Test Mesage’,’icon1.jpg’,’John Ray’, ‘This is a test of the messaging system’,’smugguy’,’0’); insert into message values (‘’,’0’,’Welcome To The Message Board’, ‘icon3.jpg’,’Administrator’,’Welcome to the new messaging system!’,’ ➥adminmessage’,’0’); insert into message values (‘’,’0’,’This Place is Cool!’, ‘icon1.jpg’,’John Ray’,’Nice Job guys, great system!’,’smugguy’,’0’);

I’m actually going to insert these records into the system a few times, just to fill the database up a bit. How is this possible? Don’t records need to be unique? Yes, in fact, they do! Remember the auto_increment feature that is set for the MySQL database definition? Because our ID field is set to auto_increment, a unique ID will be generated each time a message is added. Even though the INSERT statements might look identical to you, the system is automatically filling in the ID field with a new value each time an insert takes place.

Advanced Techniques: Data Collection and Reporting

461

Building the Main List View Each portion of this site can be built up from simple components—it’s just a matter of putting the building blocks in the right place and keeping your fingers crossed.

Caution

Although finger crossing might be useful in some situations, you should not count on it to fix all problems that you encounter along the way, especially problems outside of the UltraDev environment. Problems that cannot be solved with finger crossing are often best addressed by wishing.

As with any site you create, your first step is to set up a new UltraDev project and create the appropriate connection to your database. I’ve also created a few icon files named icon1.jpg, icon2.jpg, and so on, and have moved them to the server. Now, it’s time to get started. The page that you’ll be designing right now is the main message listing. This is the homepage for the site and will be the primary browsing page for users of the Web application. Go ahead and start your main message listing page now. As with all sites, try to keep it simple. If you’re going to be browsing a thousand messages or so, you’ll want to keep the load time as fast as possible. Also, take into account the features that this page will need to have: Sorting—Provides column headings to click on for sorting. Message Composition—Creates a link for composing new messages. Message Listing Navigation—Sets up Previous and Next links for the message listing. Searching—A simple search form should exist for searching for keywords. A Message List—The format for the message list itself! Because I promised you these features at the beginning of the chapter, I’d better deliver. Figure 16.3 shows a simple layout for my message listing screen. Now, create a recordset that will list all the messages. Because we’re adding functionality a piece at a time, we’ll actually need to go back to the recordset query and adjust it for each of the features.

Creating the Message Listing Our first concern, however, is just getting the message listing onscreen. To do this, create a recordset that includes the fields you need for the message listing. You’ll want to also include a filter that pulls out records that have their hidden fields equal to zero.

16

462

Day 16

FIGURE 16.3 Design your message listing screen so that all the elements you’ll need for the site are included.

Remember that we wanted to provide the ability for an administrator to moderate the message board? If the hidden field for a message is set to 1, we do not want it displayed. Thus, we should only select messages for which the hidden field is set to 0. My initial recordset definition is shown in Figure 16.4. FIGURE 16.4 Create your recordset so that it is similar to this one.

Next, go ahead and create your message listing by following these steps: 1. Open the Data Bindings palette. 2. Expand your recordset view so you can see the available fields. 3. Drag the fields into the appropriate location on the design screen. 4. For the iconURL field, insert a new image where you’d like the icon to appear on your screen. 5. Rather than choosing a filename for the icon image, click the Select File Name from Data Source button and choose the iconURL field from the recordset.

Advanced Techniques: Data Collection and Reporting

463

6. Finally, select the fields and image you’ve added to the screen and add a Repeat Region server behavior. Set the number of repetitions to something reasonable— 600 message headings on a single page might be a bit too much. After you’ve designed your listing, switch into the live data viewing mode. If you’ve followed my basic design, your screen will look a bit like Figure 16.5. FIGURE 16.5

16

The message listing is almost complete.

Note

You might have noticed that I’ve added an indicator to the screen that shows how many messages there are and what the first and last message being shown are. You can add this to your design by dragging the [total records], [first record index], and [last record index] items from your recordset into the design view wherever you’d like them.

The next step is to get the Next and Previous links hooked up and running. You’ve done this before, so it shouldn’t really be very difficult. 1. Select the object or text to link to the next set of records. 2. Choose the Move to Next Record server behavior and add it to your project. You’ll just need to choose the right recordset for this behavior, and, because we’ve only defined a single recordset, that shouldn’t be a problem. Figure 16.6 shows the configuration for the Next link. 3. Repeat these two steps using the Previous Messages link and the Move To Previous Record server behavior.

464

Day 16

FIGURE 16.6 Pick your link and recordset to hook up the message list navigation features.

After making these additions, be sure to test your page. You should now be able to navigate between screens that contain all the available messages. To make the project more user friendly, you’ll want to get rid of the Previous and Next links when there isn’t anything to be seen by clicking the links. That is, when you’re viewing the first message, there are no previous messages. Likewise, when you’re at the last message, the next link becomes pointless.

Tip

If you’re using an earlier version of UltraDev, you may have difficulty with the following section. In earlier versions, the “Show Region” behavior was a “Hide Region” behavior. In order to use the book’s projects with the “Hide Region” behavior, just reverse the conditions under which you’re “showing” a region to get the same “hidden” behavior. For example, “Showing” a region if it is the last record is the same as “Hiding” a region if it is not the last record.

Hide these two regions by using the Show Region server behavior, as follows: 1. Select the Next link. 2. Click + and highlight the Show Region server behavior. 3. Choose the If Not Last Record option. UltraDev will ask for the recordset you’re basing the condition on, as seen in Figure 16.7. 4. Repeat this process for the Previous link—this time choosing the If Not First Record option for the behavior. FIGURE 16.7 Hide the Next and Previous links if they are not connected to anything.

Advanced Techniques: Data Collection and Reporting

Tip

465

While we’re on the topic of hiding and showing regions, you might want to consider adding two more conditional regions to your document design. The first region to hide is the message listing itself! If there are no messages available, why show the message headings at all? Apply this Show Region behavior if the recordset is not empty. This will keep all the column headings from being shown unless there’s an actual message or two being listed. The second region to show is a bit less obvious because you haven’t created it yet. If there aren’t any messages, why not tell the user so they aren’t staring at the screen confused? Add a new “There are no messages available” message to the content portion of the screen—but outside of the repeating region (hidden regions cannot overlap repeating regions). Apply the Show Region behavior to this message text with the condition that it will be shown if you select the option If Recordset is Empty.

Sorting the Message List Okay, now we’re on a roll. Let’s add some sorting capability to the system. This is going to be a bit different from what we’ve seen so far. What we’re going to need to do is link each of the column headings to the page itself, passing a parameter that will signal the recordset and let it know what to sort by. (If that didn’t make any sense, don’t worry, it will). For example, we have three headings that we want to sort by: ID Author Subject These headings correspond to three fields in the database. By some stroke of coincidence, these fields are named identically to the headings. Now, how about the links that need to be made? These are pretty simple—you’ll need to change the index.asp filename to whatever you’ve set this page to: index.asp?sortby=ID index.asp?sortby=author index.asp?sortby=subject

Go ahead and set these links up in your document now. Select each of the column headings, and then use the Properties palette to set the link to the corresponding one in this list. After the links are created, the user will be able to click each of the column headings. This click will send the sortby variable back to the message listing page and set it to the

16

466

Day 16

column by which it should be sorted. Unfortunately, the message listing page doesn’t know how to sort anything. We need to modify the recordset a bit! To give the page the capability to sort, make these changes to the recordset: 1. Open the recordset and switch to Advanced mode. 2. Add a new variable to the query named varSortby. Its initial value should be ID and the Run-Time Value should be Request(‘sortby’). 3. Finally, change the ORDER TO clause of the SQL statement so that it orders by the variable varSortby (that is, ORDER BY ‘varSortby’). 4. When finished, your recordset definition should look like the one in Figure 16.8. FIGURE 16.8 Add the ORDER BY information, and your site will sort!

If you’ve defined your links correctly, everything should work! Clicking the links will pass the appropriate sortby parameter to the recordset, resulting in the list of records being sorted by that column.

Adding Parameters to the Go To Related Page Behavior Unfortunately, there’s a problem with this technique. Although it will indeed work for the basic message listing, try going to a second page of messages and clicking the heading to sort. You’ll see that the message listing is indeed sorted by the heading field, but the messages being displayed are the messages from the first page.

Advanced Techniques: Data Collection and Reporting

467

All the parameters that control the records being viewed are lost through the direct links that we made. So, how do you get around this? You use a slightly modified version of the Go To Related Page server behavior. Follow these steps to make links that will work correctly in all cases, not just the basic message listing: 1. Select the object or text to turn into a sorting link. 2. Add the Go To Related Page behavior, pointing the link back to the same page that it’s coming from. 3. Be sure to pass both URL and form parameters along with the link. 4. Repeat this procedure for all the links. After you have the behaviors added to the page, you’ll need to go in and edit the code directly. In their current state, the links will only pass the existing parameters. You’ll need to add back in the capability to pass the sortby parameter on the URL line. Open up the source code and look for your links. They’ll look a little bit like this: ”>Subject

Manually edit this line to include the command line parameters that we were originally trying to pass: ”>Subject

Caution

Be sure you put the & between the sortby=subject and the <%= MM_keepBoth %> code. If you’re missing this symbol, the results will be very unpredictable.

This is all that’s needed to get the links working. Of course, this is less than perfect because it isn’t completely automated within the UltraDev environment. It does illustrate the fact that you can frequently get around UltraDev’s limitations by building the code up as much as possible from within the interface, and then editing what you need to by hand.

Tip

If you really want to stay within the UltraDev interface to make the changes to your links, you can use the property inspector to add the extra code to the link.

16

468

Day 16

That completes the task of providing sorting functionality. Now we need to add the capability to search messages and provide a listing of only messages that contain the keyword that we’re looking for.

Searching the Message Listing You’ve already seen how to create a search function for the catalog system that we developed last week. What you’re going to be doing today is no different from that. Only one decision needs to be made before we can start implementing the search feature—what exactly are we going to be searching? Should we search the author field? The subject field? Or how about the message body itself? That decision is up to you, but for the sake of being thorough, we’ll go ahead and implement the search for all the different possibilities.

Caution

On a full-scale production Web site, be sure to test the speed of complex searches before deploying them. Searching the body text of thousands of messages takes a while—even on fast computers.

In order to search all the fields, we need to work still more logic into the recordset that we’ve been slowly refining. If you remember the chapter on catalogs from a few days ago, we can match a keyword with a field by using the LIKE syntax: WHERE searchfield LIKE ‘%varSearchterm%’. Because there are several fields that need to be searched, the WHERE clause needs to be expanded a bit: WHERE subject LIKE ‘%varSearchterm%’ or WHERE author LIKE ‘%varSearchterm%’ or WHERE body LIKE ‘%varSearchterm%’. Let’s go ahead and add this to our recordset definition for the page now. Open up the Server Behavior palette and double-click the recordset behavior for the page. If you are not in Advanced mode, be sure to click the Advanced button to switch over. The current query should look something like this: SELECT ID, subject, iconURL, author FROM message WHERE hidden = MMColParam ORDER BY ‘varSortby’

Notice that there already is a WHERE clause in the SQL statement. We can’t just delete that condition and stick in a new one, but we can supplement it by rewriting the query to look like this:

Advanced Techniques: Data Collection and Reporting

469

SELECT ID, subject, iconURL, author FROM message WHERE hidden = MMColParam AND (subject LIKE ‘%varSearchterm%’ OR author LIKE ‘%varSearchterm%’ OR body LIKE ‘%varSearchterm%’) ORDER BY ‘varSortby’

Before closing the query, be sure to define the varSearchterm variable: 1. Click the + button by the Variables: heading to add a new row to the variable list. 2. Set the variable name to varSearchterm. 3. Set the default value to %. This ensures that if no search term is given, all the results will be shown. 4. Set the Run-Time Value to Request(searchterm). The final query configuration should look very similar to Figure 16.9. FIGURE 16.9 Modify the recordset one last time to add searching capability.

The final step in getting the search function hooked into your code is to make sure that the entry field for the search form is named searchterm. (This is required by the Request(searchterm) Run-Time Value configuration we just set.) The form action must also be set to point back to the same page.

Note

Like the sorting capability, the search function is implemented within the embedded code on a single page. Although you could have the search feature performed on a different page, it would just result in a site that is more difficult to maintain. I try to include as much related functionality as possible within the code of a single page.

16

470

Day 16

Congratulations! You just survived the toughest part of today’s lesson. Aside from a few links that need to be created, the message listing view is complete. Next, we’ll move on to reading messages, and then, finally, to message composition. These last two segments are significantly easier to complete than the message listing!

Reading Messages Although it actually is possible to implement the capability to read messages within the same document as the message listing, it’ll be easier to implement this in a new document. To keep things easy to remember, name this document message (with the extension appropriate to your server platform). Before you start designing your view for reading messages, we need to add a link to the message listing view so that users will be able to click the link in order to see a message. Go ahead and select the text that the user should click in order to see the full message. The subject line is a perfectly acceptable choice. Use the Go To Detail Page server behavior to create the link, as follows: 1. Select the text or object to link to the message reading window. 2. Add the Go To Detail Page server behavior. 3. Configure the behavior, as seen in Figure 16.10, so that it passes a URL parameter ID that is set to the ID field in the recordset to the new message.asp page. 4. Pass along existing URL and form parameters for good measure. 5. Click OK when completed. FIGURE 16.10 Pass the message ID to the new message page.

One last thing to do before starting the message viewing screen—add in a few replies. Remember how the message database is set to hold both a message ID and a parent ID for each entry. The parent ID is the message ID of the message that has been replied to. For example, if a user replies to a message that has an ID of 15, that ID would become the parent ID of the message. We want to set up the system so that, when this hypothetical message 15 is being displayed, all its replies would be listed as well. Go ahead and add some replies into the SQL database:

Advanced Techniques: Data Collection and Reporting

471

insert into message values (‘’,’2’,’A Reply!’,’icon1.jpg’,’John Ray’, ‘This is a test of the messaging system’,’smugguy’,’0’); insert into message values (‘’,’2’,’I think this place is awful’,’icon3.jpg’, ‘Administrator’,’Welcome to the new messaging system!’,’adminmessage’,’0’); insert into message values (‘’,’2’,’This Place is NOT Cool!’,’icon1.jpg’, ‘John Ray’,’Nice Job guys, great system!’,’smugguy’,’0’);

These records have a parent ID of 2, meaning they are replies to message ID 2. With that out of the way, go ahead and design the message viewing page. Remember that we need to take into account these three features of the message view: 1. A list of replies to the message being viewed 2. The view of the message itself 3. A small password/delete form that asks for a message’s password and enables a user to delete the message Figure 16.11 shows a basic layout for a message display screen. Yours, of course, can be as ornate or as simple as you’d like. FIGURE 16.11 The message view screen needs to include the three functional elements we’ve defined for the site.

Creating the Recordsets There are two recordsets that need to be defined for the message viewing page: a recordset that contains the message itself, and one that contains a list of all the available replies to that message. These are really extremely simple to define, so you should be up and running in a matter of minutes. Let’s go ahead and define these recordsets now. First, define the recordset that contains the message being displayed: 1. Add a recordset/query behavior to the document. 2. If you aren’t in Simple mode, switch to it now by clicking the Simple button in the recordset definition window.

16

472

Day 16

3. Set your connection and table. (There’s only one table in this project, so be careful!) (That’s a joke, people!) 4. Leave all fields selected. 5. Set a filter for the query. ID should equal the URL parameter ID, as passed in the Go To Detail Page behavior defined earlier. That’s it! The completed recordset for the message being displayed is shown in Figure 16.12. FIGURE 16.12 Make sure you filter based on the message ID.

The second recordset (containing all the replies to the message being shown) is almost identical to the recordset you just created. Go ahead and add another new recordset to your document. However, this time, the filter needs to change slightly. Because we want to select all the messages that have a parent ID equal to the message ID (passed as a URL parameter), the filter should reflect this. Figure 16.13 shows this reply recordset. FIGURE 16.13 Only the filter needs to change for the second query.

Advanced Techniques: Data Collection and Reporting

473

Laying Out the Page Creating this page is pretty cut and dried—by now you’re used to dragging elements from the recordsets that you’ve defined and into the document design view. Go ahead and drag the author, subject, and body portions of the recordset for the current message into their appropriate positions in the design view. Remember, you’re dragging from the message recordset, not the reply recordset. Handling the view of replies is a little more complicated, but nothing that you haven’t seen before. For my version of the page, I’m just going to add a simple repeating region that has the author’s name and subject for each of the replies: 1. First, drag the subject and author’s name to a new line in the replies area of the message view. Make sure you’re using the reply recordset. 2. Select the subject and name in the document design view. 3. Open the Server Behavior palette. 4. Click + and add a repeating region to the document. Have the region repeat all the available records.

Caution

Be absolutely certain that you select the appropriate recordset when defining your repeating region. If you choose the recordset that contains the message being displayed, the program will fail to run correctly and might be difficult to debug.

If all has gone according to plan, you should be almost done with the viewing screen. Switch to the live data mode and supply ID=2 on the URL line to see whether both the message view and the reply list is visible. Let’s go ahead and finish up the reply listing. Because the replies are listed, you should be able to click them and move to a page that contains that message, much as you could with the master message listing. 1. Select the text from the reply (The subject? The author? Both!) that you want the user to click in order to view the reply. 2. Add the Go To Detail Page server behavior. 3. Configure the behavior, as seen in Figure 16.14, so that it passes a URL parameter ID that is set to the ID field in the reply recordset. It should be passed back to the message page itself for display. 4. Click OK when completed.

16

474

Day 16

FIGURE 16.14 Pass the ID of the replies back to the message page.

Caution

For viewing replies, you should not pass the existing URL or form parameters. If you do, you’ll end up with multiple ID= parameters on a single URL. This can confuse the server and cause unexpected results.

You should now be able to click the link of one of the replies to view it.

Message Deletion The final step needed to complete the functionality of this page is implementing message deletion. Hopefully, you designed the screen with this function in mind by adding a password field and a Delete button. Be sure that you’ve named your form something memorable, such as Delete—and the password field something equally simple—such as Password. The desired behavior of this feature is that, if a user wants to delete a message that he owns, he’ll type in the message’s password, click the Delete button, and it will be instantly removed from the database. You might remember that there is a server behavior that can automate most of this process for us! Open the Server Behavior palette and add the Delete Record behavior to the document. Configure the behavior as follows: 1. Connection—The Messageboard database connection. 2. Delete From Table—The message will be deleted from the main message table. 3. Select Record From—Choose the recordset for the message being displayed. 4. Unique Key Column—The key for the message field—this should be set to ID. 5. Delete By Submitting—The delete form that you’ve created. 6. When Done Deleting—Take the user back to the main message listing. In my implementation, this is index.asp.

Advanced Techniques: Data Collection and Reporting

475

After you’ve completed the Delete behavior, click OK. You’re almost done, but there’s something missing. At what point does the application check to see whether the password is correct? Sadly, it doesn’t! You’ll need to add this code to the document manually. Go ahead and open your source code now and look for the construction of the DELETE SQL statement. On the ASP platform, it will look something like this: ‘ create the delete sql statement MM_editQuery = “delete from “ & MM_editName & “ where “ & MM_tableColumn & “ = “ & MM_recordId

Edit this code to include a check for the password that is being submitted from the form: ‘ create the delete sql statement MM_editQuery = “delete from “ & MM_editName & “ where “ & MM_tableColumn & “ = “ & MM_recordId & Request.Form(“password”) & “‘“

This modification to the ASP code will add AND password= Request.Form(password) to the SQL that is being executed on the server. The delete function is now implemented—but only after tweaking the code a little bit. If you’d rather not edit the code manually, there is an alternative way to implement this feature using only the native UltraDev server behaviors. Instead of modifying the embedded code, you could choose to add a third recordset to the document. This recordset would execute the SQL: SELECT * FROM message WHERE ID=’varID’ AND password=’varPassword’

The recordset would need to be created in advanced mode with the ‘varID’ set to the runtime value of Request(“ID”) and ‘varPassword’ set to Request(“password”). After this recordset has been generated, you can use the same Delete Record behavior that you already set up, but select the record out of this new recordset. The recordset itself doesn’t exist (because it doesn’t match any records) until the password is successfully submitted. Additionally, when the password is submitted, the Delete Record behavior is called to operate on that recordset. It might seem a bit strange, but it’s doable!

Note

In all honesty, the second approach is the favored approach because it keeps all development within the UltraDev environment. However, it also takes longer to set up and, if you’re in the mood to make things work as soon as possible, editing the code is definitely a faster route!

16

476

Day 16

Wrapping Up the Viewing Screen Functionally, the message viewing screen is done—but there are two loose ends that should be taken care of before we design the composition window. First, there needs to be a way to reply to a message, and, second, there should be a link back to the main message listing. Of these two links, only one is out of the ordinary—the link to the reply screen. In this link, we need to pass the message ID of the message that we are currently reading. This will be stored as the parent ID of the new message—indicating that it is a reply. Go ahead and add a Reply link to your message view, and then follow these steps. I’m assuming that the message composition page will be called Compose. Adjust the name as you see fit, making sure that you change it in these steps as well! 1. Select the text or object you want to link to the reply feature. 2. Choose Make Link from the Modify menu. 3. Select the compose page or enter it manually in the URL field. 4. Click the Parameters button to show the recordsets and database fields. 5. Add a new parameter named ID to the parameter list. 6. Click the lightning bolt in the value field to set a dynamic value for the ID parameter. 7. Choose the ID field from the main message recordset (not the reply recordset). 8. Click OK to exit from each of the dialog boxes. With that link out of the way, just add a normal link (no dynamic parameters) back to the main message listing. Providing a user the ability to go back is always very important if the branch of the site you’re working on is a dead end. The final version of the message view screen is shown in Figure 16.15. FIGURE 16.15 All the necessary features have been added to the viewing screen.

Advanced Techniques: Data Collection and Reporting

477

The Composition Screen The message composition screen is the last piece of the puzzle—and the easiest. This is simply a form where users can enter their messages to submit back to the server. Keep track of the fields that we need to store: 1. ParentID—This value is being passed in as the URL parameter ID. We’ll need to create a hidden field that is set to this value. 2. Subject—The subject of the message. 3. IconURL—The filename/URL of the icon to display with the message. For the composition screen, I’m simply going to create a series of radio buttons to choose the value for the iconURL. 4. Author—The name of the message’s author. 5. Body—Message content. 6. Password—A password that can be used to delete the message. 7. Hidden—Use a hidden field to store the value for the field named hidden. If you want messages to be displayed immediately after posting, set this field value to 0. Otherwise, set it to 1. As you go through the steps of creating the form, try to keep things simple by naming your HTML fields the same as the database fields. Also, be sure to name the form itself. This will make matching things up pretty simple. However, if you feel this is a security risk, don’t hesitate to change the names. Figure 16.16 shows the layout I’ve created for my compose.asp page. FIGURE 16.16 Create the message composition form.

16

478

Day 16

The image icons radio buttons might be the only confusing part of this layout. Here’s the table that contains this information on my page:

Just a series of radio buttons, all named URLicon (to provide a logical OR condition between the options) with the value attribute set to the URL of the image to be displayed in the message listing.

Adding the Hidden Fields There are two hidden fields that you need on the form. The first field, hidden (an appropriate name for a hidden field, huh?), can be inserted manually into the HTML, or you can use the hidden field form element and property inspector to set it up, like this:

The second hidden field (parentID) is a bit more difficult to configure (but only very slightly). In order to add this field to the document, you need to add a new data binding for a request variable. We’ve mostly dealt with bindings to recordsets—this will be a binding to the request variable ID. To add this to your system, open the Data Bindings palette and follow these steps: 1. Click + in the Data Bindings palette. 2. Choose Request Variable. 3. Enter ID into the request variable binding configuration screen. This is the URL parameter we need to access.

Advanced Techniques: Data Collection and Reporting

479

Now you have direct access to the ID parameter that is being passed to the page. You can use this to define the second hidden field: 1. Add another hidden field to the document. 2. Select it and open the Property palette. 3. Switch to the attribute view tab in the Property palette. 4. Click + to add a new attribute. 5. Set the attribute to value. 6. Click in the value of the Value field and select the lightning bolt to bind to the request variable. 7. Select the ID binding. The attribute view of the Property palette for this hidden field should look similar to Figure 16.17. FIGURE 16.17 Your hidden field binding should look like this.

That’s it! The form is now ready to be used for the Insert Record behavior. We’re only a few minutes from being done!

Saving the Message To save the message, you need to insert the message as a record into the database. Everything has already been configured for the form, but one last server behavior needs to be added. Open the Server Behavior palette and add the Insert Record behavior to the document. Choose the connection and table to update. In the Get Values From: portion of the configuration, choose the form being submitted with the new message, and then match the form elements with the column name and data type. As a final step, set the Go To URL to the main message listing. Figure 16.18 shows the complete configuration for the Insert behavior. As a final step, you need to go back to the main message listing and add a link to the Compose screen so that messages can be composed without the user having to reply to an existing message. You can just add a simple link to the file—no need to pass any parameters. That’s it! We’re done! You should now have a fully functional message board!

16

480

Day 16

FIGURE 16.18 All that remains is to add the capability to insert records into the database.

Summary We covered a lot of ground today, and built a reasonably complicated application. Many of the available server behaviors came into play on the message listing and viewing screens. Hopefully you have a better idea of how server behaviors work together and how they can be combined to perform complex feats of Web programming! Although I chose a different route today, an important limitation of UltraDev was shown. It is not possible to use multiple attributes to select a record for deletion. In an earlier chapter, I used a specially designed recordset to only select the records that should be deleted. In this case, it isn’t necessary to worry about the multiple attribute problem, so I modified the SQL code directly. If you run into a wall with UltraDev, see whether combinations of other server behaviors can get you out of trouble. If not, you’ll need to edit the source code directly.

Q&A Q Why is the searching so slow? A If you’re searching across multiple different fields in multiple different records, the search can take a while. You can always add a pop-up menu to choose the field that is being searched. Q How does the moderator moderate? A The moderator needs to update the records in the database and toggle hidden to 0 or 1, depending on whether he wants to show or hide a record. Q What’s the best way to handle the problem with the inability to delete records based on two parameters?

Advanced Techniques: Data Collection and Reporting

481

A Thus far in the book, there have been two techniques presented. If you’re the sole programmer and you’re comfortable quickly editing the code, go with that approach—otherwise define another recordset to limit the amount of data that the delete behavior can handle. Q How can I expand the site? A There’s actually quite a bit of room for improvement—message dates, message editing—these are all features you can add in with your existing knowledge.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What is the parentID field for? 2. What is a problem with the blob data type? 3. Why shouldn’t you pass all parameters in the Go To Detail Page behavior when they are applied to the list of replies? 4. On multiple recordset pages, what do you need to watch out for? 5. What is the problem with having the field named Hidden exist as a hidden field on the form?

Exercises 1. Modify the system so that it includes more information for the messages—such as the date and a topic. This could then be used to make a multiple board message system based on the topic. 2. Add editing capabilities to the system. This could be a fourth screen in the existing site map. Use the password field to determine whether the user should be allowed to edit messages. 3. Provide an administrative interface to the software. This could be used to toggle the hidden attribute for messages or delete offending posts. Currently, this needs to be handled directly within the database—not the most user-friendly way to handle things.

16

WEEK 3

DAY

17

Advanced Techniques: Tracking and Using User Data When a user enters data into a form on a Web site, it isn’t always just for an online survey, or to complete an order form—it could, in fact, be information that the user wants to store for herself. For example, it is possible to create a Web site that allows users to set up custom homepages for themselves by filling in a few forms. Too often the assumption is made that if a Web site is collecting data, its only purpose is marketing. Today’s lesson will show you how to create Web sites that collect information from a user, and then use that information to customize the user’s browsing experience. In a way, you give users the ability to author their own customized version of the Web site. Today, you will learn how to • Let a user log in to the system and create a new account with her preferences. • Set a cookie so that the user is remembered each time she visits the site. • Alter the appearance of a Web site so that it is customized for the user browsing it.

484

Day 17

Customized Web Sites Have you ever been to a Web site and seen the option of customizing the site based on your own personal preferences? This is an extremely popular technique that, when used correctly, gives a user an incredible amount of control over a site’s environment. If you have a Web site that offers more than one service (various types of news, shopping, and so on), you can win repeat visitors by showing them only what they want to see on a page. For example, I visit a popular Internet DVD site at least two or three times a week. In the beginning, I was forced to view their weekly specials before reaching the New Releases section to find what I was looking for. I thought if I could browse to their homepage and see the content I want, when I want, I’d be much happier. Luckily, they’ve implemented this feature in a revision of their site. Now, instead of clicking through pages I’m not interested in, the “good stuff” appears as soon as I load the first page. In today’s lesson, you’ll learn how to create exactly the same behavior on your Web site. You can later apply this to any site you create in order to give it value above and beyond a traditional site. The first question that you need to ask yourself is, “What portions of the site should I make customizable?” There are several different levels of service that you can give to the viewer, depending on the nature of your site. For example, as you’ve already learned, any tag attribute on a page is easily made into a dynamic element simply by selecting the object in the document and opening the Property Inspector palette. From the default user-friendly view of the palette, you can switch to the attribute listing by clicking the second tab on the left side of the panel. Shown in Figure 17.1, this portion of the palette lets you quickly and easily set up attributes to a tag that are pulled out of a database when the page is loaded. FIGURE 17.1 All tag attributes can be set dynamically.

Advanced Techniques: Tracking and Using User Data

485

Anything that you can set manually in a tag can be set dynamically from the database: Color Images Text Fonts You can quite literally set up a site that pulls all its look and feel from a remote database— without hard-coding anything at all.

Note

You must take into consideration one slight drawback when designing a dynamic site—if you are adding a dynamic component to the site, it cannot contain any dynamic elements itself. For example, if you’re storing the HTML to generate an entire table in a database record, you can’t turn around and add dynamic tags to that HTML—the tags will not be interpreted recursively.

The extreme case of a customizable Web site is one that allows the content of the site, not just tag attributes, to be changed. This is common on portal sites that offer customized news based on what the user has chosen. Today’s lesson will attempt to follow this model and provide a completely customizable portal site where the user can control the information that is being displayed.

Configurable Web Site Map Surprisingly, the majority of the work in this site will be handled by the database server and a few simple queries. Providing the interface through which the user can customize her software will actually take longer than designing the portal screen itself. In order to use the site, a person must take her browser through a series of registration steps where she will set her preferences for the Web site. At the end of the registration, a cookie will be saved on her computer to allow her to return to the site and have it appear exactly the way she wants—at any time. A basic site map for the registration system and portal are shown in Figure 17.2.

Note

Some of you might want to build Web sites that offer these services without the trouble of having to deal with a login system. Although this is certainly possible by more or less leaving out the registration system (only a cookie would be used to identify the user), it doesn’t give the user the ability to go back to the site and change her settings. If the user moves to another computer, she won’t be able to recover her previous settings.

17

486

Day 17

FIGURE 17.2 The major portion of the site is the registration section.

shortcut for users w/ cookies

registration

login

registration preferences

content

A question that you should be asking yourself is, “Why can’t we just store all this stuff in cookies rather than bothering with a database?” In order to fully answer the question, you must consider the number of elements that you want to make dynamic on your site. Is it one? Two? Ten? Five hundred? At what point do you stop allowing the user to customize her environment? By resorting to cookies for the means of storing the configuration data, you place a limit on the amount of data that you can manipulate dynamically. Cookies are best suited for storing small amounts of information, such as user IDs. Additionally, each time you add a new element, you’ll need to modify the code that supports that element, or write a somewhat sophisticated, generic cookie configuration utility before you start. Don’t get me wrong—if you want to store a value or two, cookies are great—but enough values to configure an entire Web site? That might be a bit of a problem. A cookie-only approach also forces a user to re-register her preferences if she changes browsers or computer systems—not a very user-friendly way to handle things. Using a database tied to a single userID within a cookie creates a much more flexible and extensible system. Only a single value is stored on the client’s machine—that value, however, is tied to as many database entries as you need to create your perfect site.

Advanced Techniques: Tracking and Using User Data

Caution

487

Using cookies to store a userID is a great way to handle something such as Web site preferences, but it shouldn’t be used for secure-access sites. One of the fun things about today’s lesson is that the resulting site doesn’t need to be totally secure. No private information is being stored, or anything that a user would truly want to mess with. If there were, we could use a more random method of coming up with a userID than just letting the database auto-sequence record numbers for us. Typically, secure cookies contain encrypted information that is only valid for a very short period of time.

Table Definitions The table definitions for the site are going to be interesting, to say the least. Let’s start with the simple stuff first—the user information table.

User Authentication and Preferences Users need the ability to log in to the system and register their preferences. This is accomplished by a simple user table that will auto-generate userIDs and store them with usernames and passwords: create table tblUserInfo ( userID int not null auto_increment, username varchar(50) not null, password varchar(50) not null, primary key (userID) )

The second table to build is also related to the user, but will require significantly more thought to build than the UserInfo table. One’s first thought in making a table to store user preferences might be to create a table with a field for each feature that you want to be able to store a dynamic value for. This certainly would work, but it doesn’t allow for the sort of flexibility that we’re looking for. Instead, we need an approach that allows the number of options in the system to grow without the need to constantly add fields to the system. So, what values make up a dynamic option? Let’s try to enumerate the things we’ll need to track in the preferences table: 1. The feature that we’re storing a preference for (page color, image location, whatever) 2. The userID of the person storing the feature 3. The feature value—whatever the dynamic value is that is being stored

17

488

Day 17

An example of a feature might be the background color of the Web page. In order to store the feature, we’ll need to maintain a list of featureIDs that we can add to as the site grows. The other fields are self-explanatory—the userID identifying the person setting the preference and the feature value being the dynamic data (such as a color #FFBBFF).

Note

Although the approach I’m taking for the system offers the highest degree of flexibility, it is also the most taxing on the server. Instead of a single query being able to return multiple preferences, each preference must be returned by a separate query. If your server and site can handle the increased DB traffic, use this method. If not, you should probably switch to an entirely flat table structure for storing the field values.

Using this information, we can set up the following table structure for the user preferences: create table tblPreference ( featureID int not null, userID varchar(50) not null, optionValue text, primary key (featureID,userID) )

Features and Options Next is the matter of providing a master table of features that the user can choose from. Although this doesn’t necessarily have to be driven from a database table, it does make the life of an administrator much easier. If you have 100 or so options, don’t keep track of them by writing them down on a piece of paper. Instead, use another table in the database to keep track of these options and their corresponding featureIDs. create table tblOption ( featureID int not null, optionName varcchar(50) not null, optionValue text, primary key (featureID,optionName) )

Tip

Don’t create any of the database tables until we reach the final data definitions at the end of this section. Some significant changes will need to take place along the way.

Advanced Techniques: Tracking and Using User Data

489

At this point, some explanation is needed. Rather than talking about the field values, let’s take a look at some potential values: featureID: optionName: optionValue:

1 Blue #0000FF

featureID: optionName: optionValue:

1 Red #FF0000

featureID: optionName: optionValue:

1 Green #00FF00

featureID: optionName: optionValue:

1 Yellow #FFFF00

These are obviously color names and their associated HTML coded value. The featureID ties them all together. Feature 1 for example, could be the background color of the Web page—it’s entirely up to you. Using this structure, you can dynamically generate the lists of preferences for the user. This eliminates a bit of typing during the design phase and also keeps things flexible, so you can easily add new options directly to the database and have them immediately appear on the Web page.

Tip

Even with the options table, you still need to keep track of the features that the options are for. Currently only identified with a single featureID value, you’ll very quickly lose track of these values unless you have a table or other means of storing the information. Although this is not needed at all for the Web application, you might still want to build a table within your Web application database to store them.

That’s all for the database structure—but how about some information to store in it? For this application, the only data needed are a few options that the user will be able to select. So, what will these options be? Don’t answer that too quickly. The options that we choose here will drive the development of the Web site. Remember that we want to allow the user to choose what data she sees on her screen. Additionally, we’ll also give her the option of setting the actual location on the page that holds the information.

17

490

Day 17

So, how in the world is this possible? Simple—using techniques very similar to those that we already learned in Day 10, “Creating Database-Driven Screens.” Layers provide a great deal of flexibility that we can use to create very complex sites that are entirely driven from a user’s preferences. For this site, what are the features that we want to offer to a user? • Alter the background color of the site. • Set the background color of each content area. • Choose the content areas of the sites. • Choose the location of the content areas. The first two items are self-explanatory—you’ll just be dynamically altering some of color tags in the document. The others are not (seemingly) so simple. Multiple content areas exist that a user can choose to display on her page when she visits the site. These content areas are divided up into individual layers that contain the variable information. The critical decision becomes one of choosing how to implement the multiple layers that must be present in order to offer the user the choice of picking any content at any time. You can approach the problem in one of the following two ways: • Add several static layers to the site and implement the user’s preferences to change her location and visibility. Each page contains all the information that could be displayed, and this is modified by the dynamic settings made by the user. • Use layer content that is also pulled from a database, such as any other attribute. Obviously the preferred technique is to have everything in the database. This provides a completely centralized point for updating the page’s content. Using the first approach, the page would constantly need to be edited in order to provide new content. I find it highly unlikely that news sources such as CNN have an HTML editor open and waiting for a story to break.

An Optimized Structure Unfortunately, we’ve got a bit of a problem with the database structure that we created. Suppose that four content regions are on the screen and six possible pieces of content can be displayed in these regions. In order to make all content available in all regions, we’ll need to enter a total of 24 entries in the options table. This repetition of data will quickly become a headache when the information must be updated.

Advanced Techniques: Tracking and Using User Data

491

To get around this redundancy problem, let’s shorten or change the option table so that it resembles this: create table tblFeatureOption ( featureID int not null, optionID int not null, primary key (featureID,optionID) )

Instead of relating a featureID to an option name and value, it is related to an optionID instead. Finally, one last table needs to be created to contain the information we’ve just removed from what was the option table. This will be put back into a new option table: create table tblOption ( optionID int not null, optionName varchar(50), optionValue text, primary key (optionID) )

17

Now a single option can be related to the multiple features without repeating the actual information. This requires a teensy bit more work for the queries, but the final product will be much more maintainable in the long run. This, however, forces us to re-evaluate the preferences table. Because options are now identified by an OptionID, this can be stored in place of the OptionValue: create table tblPreference ( featureID int not null, userID int not null, optionID int not null, primary key (featureID,userID) )

The final database table definition is shown in Figure 17.3. FIGURE 17.3

tblUserInfo

The final database definition consists of four tables.

userID* username password

tblPreference featureID userID* optionID

tblOption

tblFeatureOption

optionID* optionName optionValue

featureID* optionID*

492

Day 17

For a final step in the preparation of the site, we need to decide on some site features and options. First, let’s set some options. The colors that I listed earlier should be sufficient for demonstrating the choice of various page color elements, so add them into the system: insert insert insert insert

into into into into

tblOption tblOption tblOption tblOption

values values values values

(1,’Blue’,’#0000FF’); (2,’Red’,’#FF0000’); (3,’Green’,’#00FF00’); (4,’Yellow’,’#FFFF00’);

Black and white are probably some good colors to throw in as well: insert into tblOption values (5,’White’,’#FFFFFF’); insert into tblOption values (6,’Black’,’#000000’);

Next, we want to be able to choose the positions of the layers that will hold the content, so we can add some coordinates to the list of available options: insert insert insert insert

Note

into into into into

tblOption tblOption tblOption tblOption

values values values values

(7,’Top Left’,’left: 45px; top: 38px’); (8,’Top Right’,’left: 336px; top: 38px’); (9,’Bottom Left’,’left: 45px; top: 325px’); (10,’Bottom Right’,’left: 336px; top: 325px’);

The location coordinates that I’ve added to the database are not off the top of my head. Instead, I laid out a page with four rectangular layers that were spaced the way I wanted, and then I copied their location information so that it could be added to the database.

Seeding the Available Options Finally, we need actual content for the system. You can make up your own records for this part of the project, or use something similar to this: insert into tblOption values (11,’Local Weather’, ‘

Cleveland Weather

Hot and humid with a chance of a minor hurricane or earthquake.

No Chance For Survival’); insert into tblOption values (12,’Web Links’, ‘

Hot Links

Want to see some of the best news sites on the web, look here!

CNN
MacNN
MacCentral’); insert into tblOption values (13,’US News’, ‘

Top Stories

Large monsters have invaded Redmond and are threatening to take over the Earth. Known only as “Gates”, the leaders only fear is being near windows’); insert into tblOption values (14,’Local News’,’

Local News

Local write falls asleep while watching reality TV. Film at 11pm’);

Advanced Techniques: Tracking and Using User Data

493

insert into tblOption values (15,’TV Shows’,’

Whats on TV

Tonights TV lineup includes coverage of the 2001 presidential election being held in Atlantis. Many are favoring the younger candidate, known only as “Mr. Teedles”, who has promised develop a form of underwater cattle.’);

These are obviously not realistic pieces of content, but they should be sufficient to illustrate the point of the site.

Tip

Notice that these option records containing content include HTML. Although it might seem strange at first, there is nothing at all wrong with storing HTML in your database. It is rendered the same as static HTML pages after it is retrieved from the database and inserted into your document.

Now that the options are entered into the database, you need to create a few entries in the tblFeatureOption—these tie options to a particular feature (or features). For this sample site, there are 10 features that the user can set: 1—Page background color 2—Content area background color 3–6—Content area content (for each of four content regions) 7–10—Content area position (for each of four content regions) Tie these features to the appropriate options with these database entries. First comes the page background. These tie the color options to a featureID of 1—which we’re going to use as the page’s background color. insert insert insert insert insert insert

into into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values values

(1,1); (1,2); (1,3); (1,4); (1,5); (1,6);

Next, comes the background of the content regions. Similar to the page background, this ties a featureID of 2 to the same set of available color options. insert insert insert insert insert insert

into into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values values

(2,1); (2,2); (2,3); (2,4); (2,5); (2,6);

17

494

Day 17

Now comes the fun stuff—the content of the content regions themselves. Four content regions are being defined (featureIDs 3 through 6). Each of these regions should be capable of holding any of the five pieces of content we’ve defined (optionIDs 11 through 15). Tie the options to these features with these entries: insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(3,11); (3,12); (3,13); (3,14); (3,15);

insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(4,11); (4,12); (4,13); (4,14); (4,15);

insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(5,11); (5,12); (5,13); (5,14); (5,15);

insert insert insert insert insert

into into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values values

(6,11); (6,12); (6,13); (6,14); (6,15);

Four content locations also need to be set. Each of the content areas can be in one of four locations. This requires a new featureID tied to the available optionIDs for each of the possible locations of each of the content regions: insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(7,7); (7,8); (7,9); (7,10);

insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(8,7); (8,8); (8,9); (8,10);

insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(9,7); (9,8); (9,9); (9,10);

insert insert insert insert

into into into into

tblFeatureOption tblFeatureOption tblFeatureOption tblFeatureOption

values values values values

(10,7); (10,8); (10,9); (10,10);

Advanced Techniques: Tracking and Using User Data

Tip

495

Before you start scratching your head and asking, “What in the world just happened?” think of it in terms of one content region. For a single region, both a location feature and a content feature exists. This feature is tied to multiple options. When we add another content region to the system, it also must have its own featureIDs to describe its content and location because it is entirely independent of the first one. Thus, with four content regions, each one has a location featureID and content featureID that must be tied to the appropriate options in the database.

Default Preferences The final step in the preparation of the database is setting up a generic userID that will be used as the default userID for all the available preference queries. Doing this will allow users to browse the site using a default set of preferences before they set any of their own. First, set a generic user account. This account will never be changed or logged in to—it is just a placeholder for userID 0: insert into tblUserInfo values (0,’guest’,’nevergonnaguessme’);

Then, add some default values that tie userID 0 to an option for each of the 10 available features: insert insert insert insert insert insert insert insert insert insert

into into into into into into into into into into

tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference tblPreference

values values values values values values values values values values

(1,0,5); (2,0,5); (3,0,11); (4,0,12); (5,0,13); (6,0,14); (7,0,7); (8,0,8); (9,0,9); (10,0,10);

To select a preference from the preference table, we need to relate the Preference table to the Option table. The following SQL will serve as the basis for all the queries on the preference database: SELECT tblOption.optionValue FROM tblPreference,tblOption WHERE tblPreference.featureID=’’ AND tblPreference.optionID=tblOption.optionID AND tblPreference.userID=’’

With that out of the way, we’re finally ready to start building the actual site. Three components to the finished site need to be built—the login system, preferences, and content

17

496

Day 17

page. You might be surprised to learn that the login pages are actually the key to the site and will take the longest to create. The second most difficult portion is the setting of the preferences. Although not exactly simple, this is still just a matter of a few applied server behaviors. Be sure to set up your database connection in a new UltraDev project before continuing.

The Registration and Login System The login system for this site will require four different pages—two for the login process, and two for the user’s registration. At the end of the registration process, the user will be allowed to view the site with a default set of preferences, or she can begin to set her own. The functions of the four pages that we need to set up the user account are as follows: register—Asks the user to enter a username for her account. Each account will be forced to have a unique username, so we’ll want to check it before saving the user account information. register2—This page receives the output of the first register page, checks to see if the username is already registered, and then, if it is valid, prompts for a password to be saved with the account. login—Collects the username and password for a valid user account. login2—Verifies the username and password. If the username and password are valid, a cookie is set on the user’s computer, and she is provided with a link to the content page. There is a teensy bit of customization that will need to take place on a few of these pages, but, for the most part, the design and implementation is very straightforward.

The Registration Pages The first page to complete is the register page. This collects a potential username that will be used to query the UserInfo table on the register2 page. There are absolutely no server behaviors on this page at all. Start building the site by creating this first page. It should consist of a single field and a submit button to send the data to the next page. Add a form object to your page, followed by the needed form elements. Name the text input field username and the form action to register2.asp (with whatever extension is appropriate for your server platform)—this will pass the form’s data to the second page, which takes care of the processing. Your form should be no more complicated than the one shown in Figure 17.4.

Advanced Techniques: Tracking and Using User Data

497

FIGURE 17.4 The first form will only collect a username for testing.

17 Now, move on to the second part of the registration process—creating register2.asp. Similar to the first page, this document consists of a form with a single (visible) field and a submit button. Unlike the first form, it actually needs to do some work. First, create a form on the page that includes a field named password and a submit button. You don’t need to set a form action, but you might want to set a name for the form, such as registerName for clarity. You also want to insert a hidden field with a dynamic value that contains the username. Because the username is being passed from the first page, we need to add a new Request Variable data binding to the UltraDev project—this will let us interact directly with the username field that was submitted on the first page: 1. Open the Data Bindings palette. 2. Click + and choose Request Variable from the list. 3. Configure the request variable so that the Type is Request and the Name is username. Figure 17.5 shows the Request Variable configuration dialog box. Now, proceed with adding the hidden field to the system. Make sure that your insertion point is within your form, and then insert the hidden field. Open the property inspector for the field and set its name to username. To bind the username value to this hidden field, make sure that it is selected and the property dialog box is open. 1. Switch to the Attribute view in the Property palette. 2. Add a new value attribute by clicking the + button.

498

Day 17

FIGURE 17.5 The set the request variable name to username.

3. Click the lightning bolt icon at the right of the Value field. 4. Choose the username request variable from the data-binding dialog box. We’ll finish the form by adding an Insert Record server behavior to the system. These steps will insert the completed registration into the userInfo table: 1. Open the Server Behavior palette. 2. Click + and choose the Insert Record behavior. 3. Choose the connection for the current project and tblUserInfo table to receive updates. 4. Make sure that all the fields from the HTML form match up with the fields in the database. 5. Configure the behavior so that it goes to the login.asp page after the registration. Your behavior should end up looking very similar to the configuration screen shown in Figure 17.6. FIGURE 17.6 Insert the username and password into the UserInfo table.

To finish up the registration process, we have to handle the condition in which a user has entered a name on the first page that already exists in the user database. To detect this state, we perform a simple query on the database that selects all the records in which the username field in tblUserInfo is equal to the request variable username.

Advanced Techniques: Tracking and Using User Data

499

Open the Server Behavior palette and add a new recordset. If it happens to come up in the Advanced mode, click the Simple button to switch to the simple query mode. Here, you should design a simple recordset called rsUsername that selects all the recordset values in tblUserInfo that are filtered based on the username database field being equal to the Form Variable username. The final recordset is shown in Figure 17.7. FIGURE 17.7 Define a simple query to select based on the first form’s username.

17

Based on this recordset, we can hide the registration form if the username does exist—or, using UltraDev terminology, show the region if the recordset doesn’t exist. By checking to see if the recordset has data in it, we determine whether there is indeed a matching username already in the database: 1. Select the entire form in the Document Design view. 2. Open the Server Behavior palette. 3. Click + and choose Show if Recordset is Empty from the Show Region submenu. 4. Choose the rsUsername recordset. Now, all that we need is another region in the document that will be shown if the username exists. This can be a simple message that the username is invalid, with a link back to the first registration page. Follow the same procedure we just used to show the registration form for this new region, only choose to show the region if the Recordset is Not Empty. The “not empty” condition indicates that the username has been used before. That should finish up the registration pages. We now need to concern ourselves with the login process. The final design for the second registration screen can be seen in Figure 17.8.

500

Day 17

FIGURE 17.8 The final version of the second registration screen should look similar to this.

The Login Pages The first login screen (login.asp), like the first registration screen, is nothing but a form with a username and password field that submits data to the second login2 screen, which handles the majority of the processing. Create this form now. If you want, use the register.asp file as the basis for this document with these modifications: 1. The addition of a password field. 2. The form’s action should send the data to login2.asp (or your server’s equivalent). Figure 17.9 shows an example of what the completed login screen should resemble. FIGURE 17.9 The first login form should be designed the same way as the first registration screen, including a password field.

Advanced Techniques: Tracking and Using User Data

501

The second login screen uses the Show Region server behaviors and a recordset to show valid and invalid login messages—similarly to the second registration screen. Start building this screen now. Add two regions to the document that contain two different messages: Thank you for logging into the system. Click here to continue. Your username or password are incorrect. Click here to retry.

The first message should link to the content.asp screen that we’ll be creating in the next section of this chapter, whereas the second notification links back to the first login screen. In order to hide and show these documents, we’ll need to define a recordset to select the user information that has been registered by filtering based on the input of the username and password on the login form. If the recordset turns up empty, the username or password is incorrectly defined. Add this recordset now: 1. Open the Server Behavior palette. 2. Click the + button and choose Recordset (query). 3. Switch to the Advanced view, if it isn’t chosen already. 4. Choose the appropriate connection for this project. 5. Add the SQL: SELECT

* FROM tblUserInfo WHERE username=’varUsername’

AND password=’varPassword’.

6. Click + and add a new UltraDev variable named varUsername to the query. 7. Set the default value of the variable to a nonexistent username and the runtime value to “Request(“username”)”. 8. Repeat steps 6 and 7 for the varPassword variable—make sure that you use varPassword in place of varUsername. 9. Click OK. The final recordset definition is shown in Figure 17.10. With the recordset defined, the process of finishing the page becomes one very similar to finishing the registration page. Define two regions in the document that should be displayed when there is a good login and a bad login. In the case of a bad login, the user should be given the opportunity to link back to the login screen in case she mistyped her information. Select the portion of the screen that has this message and the appropriate link, and then add a new Show Region server behavior to the document. This server behavior should be selected so that the content is shown when the new rsUserInfo recordset is not empty.

17

502

Day 17

FIGURE 17.10 Define an advanced query to select records based on the supplied username and password.

The valid login text and link are set up in a similar way. Select this information and apply another Show Region behavior with the condition that the area is displayed when the recordset is not empty. The final design view of the login2 screen is shown in Figure 17.11. FIGURE 17.11 The final design for the second login screen should incorporate valid and invalid login messages.

With these behaviors in place, the document is as good as done. We still need, however, to add a tiny addition to the document. Because we need to set a cookie, it makes sense to add the cookie information directly into the document in the same place where the Valid Login region is shown.

Advanced Techniques: Tracking and Using User Data

503

Unfortunately, we can’t do that. A cookie must be set before anything else is sent to the browser, otherwise there will be an error. A possible solution to this would be to pass the userID from the selected record in the recordset to the content page—setting the cookie at the start of the content page itself. This, however, isn’t a good idea—it allows a user to take over another’s ID just by changing the userID on the URL line. Even though this is a low security site, we really want to avoid this. Let’s take a different approach—set a sessionID on this page, and then set the cookie to equal the sessionID when the user goes to the content page. This is an easy fix to our problem. Search your code for the valid region—it should look similar to the following: 1 2 3 4 5 6 7 8 9 10

<% If Not rsUserInfo.EOF Or Not rsUserInfo.BOF Then %>

Congratulations, you’ve successfully logged in! Please enter the system by clicking here.

<% End If ‘ end Not rsUserInfo.EOF Or NOT rsUserInfo.BOF %>


Add into this area (between lines 1 and 2) a session variable named tempUserID set to the userID field in the rsUserInfo recordset with a piece of code such as this: <% Session(“tempUserID”)=(rsUserInfo.Fields.Item(“userID”).Value) %>

The final piece of code representing a valid login will resemble this: 1 2 3 4 5 6 7 8 9 10 11

<% If Not rsUserInfo.EOF Or Not rsUserInfo.BOF Then %> <% Session(“tempUserID”)=(rsUserInfo.Fields.Item(“userID”).Value) %>

Congratulations, you’ve successfully logged in! Please enter the system by clicking here.

<% End If ‘ end Not rsUserInfo.EOF Or NOT rsUserInfo.BOF %>


The session variable code is set in line 2 of the previous code sample. The login page is now officially done. We’re ready to build the content page itself. Because we’ve already set up a temporary user with preferences, we can design this screen based on those temp preferences—then finish up the project with the preferences settings.

17

504

Day 17

The Content Screen It’s time to set up the content screen—this sets up what the user sees after she logs in to the system, or if she has a cookie set on her machine. Essentially, it is nothing but a series of queries that are embedded into the HTML code. For the most part, this screen is going to be simple to build. It will, however, require some custom code before we start writing queries. In the previous section, we let the user log in and create a new account, and then set a session variable based on that userID. Before we do anything else on this page, we need to set a cookie that will register the userID for future visits. We also need to redirect the user if she doesn’t have a cookie currently set. So, how does all this look? The pseudo-code breaks down as follows: if (session(“tempUserID”) exists) then set cookie(“UserID”)=session(“tempUserID”) set strUserID=session(“tempUserID”) end if if (cookie(“UserID”) doesn’t exist) then redirect to the login.asp page else set strUserID=Cookie(“UserID”) end if

Let’s go ahead and translate it into ASP code that we can add to the page: 1 <% If (not (Session(“tempUserID”)=””)) Then 2 Response.Cookies(“UserID”)=Session(“tempUserID”) 3 Response.Cookies(“UserID”).Expires=#12/31/2030# 4 strUserID=Session(“tempUserID”) 5 End If 6 If (Request.Cookies(“UserID”)=””) Then 7 Response.Redirect(“login.asp”) 8 Else 9 strUserID=Request.Cookies(“UserID”) 10 End If 11 %>

Note

Sadly, UltraDev makes no provisions for setting cookies within the development environment. You’ll need to handle this code by hand each time you have to set a cookie or a session variable.

This code actually handles the bulk of the work on this site. It essentially guarantees us that the variable strUserID is set by the time we reach the Web page (line 2), or the user is redirected to the login screen (lines 6–7). The cookie’s expiration date is set to 12/31/2030 (line 3)—which should be sufficiently far in the future for most applications.

Advanced Techniques: Tracking and Using User Data

505

With this code entered into the basic page, create four layers that will hold the content for the Web page. Don’t spend too much time on the design of the page because it will all end up being driven by the database anyway. All you really need is something similar to Figure 17.12. FIGURE 17.12 Just set up a simple four region page similar to this—but don’t worry about aligning things too much.

17

Now comes the fun part—setting the queries for all the preferences that the user can set. This isn’t tough, but it is slightly tedious. To make matters simpler, let’s enumerate the recordsets that need to be created as they correspond to a featureID: • rsPageColor • rsContentColor • rsRegion1Content • rsRegion2Content • rsRegion3Content • rsRegion4Content • rsRegion1Location • rsRegion2Location • rsRegion3Location • rsRegion4Location

506

Day 17

We’ll set up one of these recordsets now, and then you can follow the same pattern for the others. This is an advanced query that uses the strUserID variable we created directly in the code. The only portion of the recordset that varies from feature to feature is the featureID and the recordset name. Open up the Server Behavior palette and add a new recordset to the document. Immediately switch to the advanced mode by clicking the Advanced button. Be sure to name the recordset based on the feature that it will be supporting. Enter this SQL into the recordset: SELECT tblOption.optionValue FROM tblPreference,tblOption WHERE tblPreference.featureID=’1’ AND tblPreference.optionID=tblOption.optionID AND (tblPreference.userID=’varUserID’ OR tblPreference.userID=0) ORDER BY tblPreference.userID DESC

Notice that this isn’t exactly the query we defined in the start of the chapter—there are these additions: tblPreference.userID=’varUserID’ OR tblPreference.userID=0

This selects the current userID’s preferences as well as the preferences for the userID 0 (which we already entered into the Preference table). Because we don’t know whether the user will actually have any preferences set, we’ll need something to use in order to display the page. By selecting from both of these records, we’re guaranteed to always have a value. Although multiple values might be returned, we won’t be using a repeating region, so only the first record in the set is displayed. But how do we know which record comes first? This code handles that little problem: ORDER BY tblPreference.userID DESC

This will order the records in descending order by userID. Because any user will certainly have a userID greater than the 0 user, her preference record, if it exists, will be the first in the recordset. The rest of the query is pretty straightforward. The featureID is selected: featureID=’1’

and the userID is compared to varUserID to select the preference value for the user viewing the site: tblPreference.userID=’varUserID’

Speaking of which, the ‘varUserID’ variable still needs to be defined. Click the + button inside the advanced query view to add a new UltraDev variable. Set the name of the

Advanced Techniques: Tracking and Using User Data

507

variable to varUserID, the default value to 0, and the runtime value to strUserID. The strUserID value, to refresh your memory, was set at the start of the page when we checked for and set the userID cookie. The final recordset definition is shown in Figure 17.13. FIGURE 17.13 Define the rsPageColor recordset similarly to this.

17

Now that you’ve completed the first recordset, you need to do the same thing with the other nine recordsets. When you’re done, your Data Bindings palette should look similar to mine—shown in Figure 17.14.

Tip

Recordsets can be copied using Copy from the Edit menu. This can greatly speed up the process of making multiple similar recordsets.

With all 10 recordsets in place, you can start attaching attributes to objects. The first attribute is the background color of the Web page. Choose the body tag in your HTML view and open the Properties palette. Click to the Attribute view in the Properties palette by clicking the bottom tab on the left side. Add the bgcolor attribute if it doesn’t already exist—then switch to the left value field and choose the lightning bolt icon to bind to a dynamic attribute. UltraDev will prompt you for the recordset—choose rsPageColor, and then OptionValue as seen in Figure 17.15.

508

Day 17

FIGURE 17.14 Your finished document will have a total of 10, yes, 10 recordsets.

FIGURE 17.15 Choose optionValue from the same recordset.

That’s one out of the way. Now the other attributes need to be done. These are a little bit simpler because we can add them to the document by hand rather than binding to attributes. Looking at the HTML, you can see that the background color for the page body is inserted by this line: <%=(rsPageColor.Fields.Item(“optionValue”).Value)%>

Likewise, we can insert the rsContentColor with something similar to this: <%=(rsContentColor.Fields.Item(“optionValue”).Value)%>

The Region1 is described as follows: The content: <%=(rsRegion1Content.Fields.Item(“optionValue”).Value)%>

The location: <%=(rsRegion1Location.Fields.Item(“optionValue”).Value)%>

Likewise, all the other region’s attributes can be defined based on the same pattern (with a different number, of course).

Advanced Techniques: Tracking and Using User Data

509

Using this information, we can construct a template for all the layers—just insert these pieces of code into the layer definition as follows:

; background-color: <%=(rsContentColor.Fields.Item(“optionValue”).Value)%>; layer-background-color: <%=(rsContentColor.Fields.Item(“optionValue”).Value)%>; border: 1px none #000000”><%=(rsRegion1Content.Fields.Item(“optionValue”).Value)%>

In fact, because all the important attributes of the layer are being defined in the database, you can simply copy and paste this definition three times—changing the region number each time. For example, the second region is just:

; background-color: <%=(rsContentColor.Fields.Item(“optionValue”).Value)%>; layer-background-color: <%=(rsContentColor.Fields.Item(“optionValue”).Value)%>; border: 1px none #000000”><%=(rsRegion2Content.Fields.Item(“optionValue”).Value)%>

You should be able to deduce what the next two regions are without much difficulty. Each of these regions can be entered anywhere in the content area of the HTML document. You’ll want to enter them by hand—the alternative is using the very limited space of the attribute view for a layer to set all the dynamic attributes. Guess what? You’ve just finished the content page. You still need one more thing though—a link to the configuration page. Near the bottom of the page, add a link called Preferences that goes to the page preferences.asp. You should now be able to go through the registration process and view the content page (with the default userID 0 settings). The final view resembles Figure 17.16. Obviously you could do a little bit to make it prettier, but it works, doesn’t it?

Caution

Before continuing, open the source code of the document, and make sure that the custom programming to set the cookie is still at the top of your document. If it isn’t, cut and paste it so that it falls above any of the other UltraDev-generated code.

Now… on to the final part of the site—the preferences.

17

510

Day 17

FIGURE 17.16 The content page should now be functional, although not terribly attractive.

The Preferences The first preferences screen doesn’t actually set the attributes, but it does provide the links to the page that does set the preferences. These links need to pass an identifier to a second page preferences2.asp that will identify what the user wants to set. For example Page Background Color would link to preferences2.asp?featureID=1

This passes a URL parameter featureID set to 1 to the preferences2.asp page. Set up your list of links now. A sample page that lists all the available preferences is shown in Figure 17.17. FIGURE 17.17 The features are listed, along with a link to the second preferences page.

Advanced Techniques: Tracking and Using User Data

511

Make sure that all your links are correctly set before continuing. The second preferences page is the final page that we need to design in this document, and it would be a good idea if everything was working before we design it.

Note

In this application, we must manually pass featureID to the second preferences page. If there were a table in the database that listed feature name and ID, we could dynamically generate the table of links. You might want to think about adding that later. Additionally, the method we are using to set links is fast, but if you’d rather stay in the UltraDev interface, you can use Make Link under the Modify menu and then click the Parameters button to set the featureID parameter.

Let’s go on to the final screen. Start a new preferences2.asp document. This page will contain a very simple form containing a database-driven pop-up menu, two hidden fields with the userID and featureID, and a submit button. To generate the pop-up menu, we need to write a query to select all the available options for the featureID that was passed to the page: 1. Open the Server Behavior palette. 2. Click + and add a new Recordset (Query) behavior. 3. Switch to the Advanced Query mode. 4. Name the recordset rsFeatureOptions and set the project connection. 5. Set the SQL to: SELECT

tblOption.optionID,tblOption.optionName FROM

tblFeatureOption,tblOption WHERE tblFeatureOption.optionID=tblOption.optionID AND tblFeatureOption.featureID=’varFeatureID’.

6. Add a new UltraDev variable ‘varFeatureID’ variable that is set to the runtime value “Request(“featureID”)”. 7. Click OK. Now, add the form object to the page. Inside of this form, add a new List/Menu from object—this will be the dynamically generated pop-up list of available options. Set the name of this pop-up menu to optionID. To bind the pop-up menu to the dynamic query, we could add a new Dynamic Element server behavior to the document, or we could use an alternative means of creating a data binding. Although it is not as user-friendly as the method we’ve used in most of the projects, I think you’ll find yourself using this technique more and more. It saves time and doesn’t make you leave the comfort of the UltraDev interface.

17

512

Day 17

Select the pop-up menu in the Document Design view, and then switch to the Data Bindings palette. Choose the OptionName field from the recordset, and then look at the pop-up menu that appears at the bottom of the Data Bindings palette—select item label and then click the Bind button. That will bind the field optionName to the names of the items in the pop-up menu. You can repeat the same thing with the OptionID, except that you should choose item value as the binding. Figure 17.18 shows the Data Bindings palette after these settings have been made. FIGURE 17.18 Items can be bound to attributes directly from within the Data Bindings palette.

To set the two hidden fields, we can use the same technique after we add the userID cookie and featureID request variable to the data bindings. Do this now: 1. Open the Data Bindings palette. 2. Click + and Choose Request Variable. 3. Enter userID and click OK. Repeat this for the featureID request variable. Both variables should now be shown in the Data Bindings view. Next, add the two hidden fields to the document. Name one of them featureID and the other userID. Bind the value of these fields to the featureID request variable and userID cookie following the same technique we user to bind the pop-up menu to the recordset. Select the tag for the appropriate hidden field in the document design view, and then click the appropriate item in the Data Bindings window. Choose input.value as the binding, and then click Bind. To finish the form off, add a submit button that will be used to save the preference. The last thing you need to do is actually save the data to the preferences database. Add the Insert Record behavior now: 1. Open the Server Behavior palette. 2. Click + and choose the Insert Record behavior.

Advanced Techniques: Tracking and Using User Data

513

3. Set the connection to your project’s data source. 4. Choose tblPreference to update. 5. Select the form you defined on the page, and then match the elements in the form to the columns in the database. 6. When done inserting, go to content.asp so that the user can immediately see her changes. Figure 17.19 shows the completed Insert Record action. FIGURE 17.19 Insert the preference into the user preference database.

Wait! What if the user has already chosen a preference for the page? The system will generate an error if the user already has saved a preference for one of features and then tries to save over that preference. If you prefer, you could choose to work an Update Record option into the system. A simpler approach is to delete an existing preference before adding a new one. Look for the insert code in your document: ‘ execute the insert Set MM_editCmd = Server.CreateObject(“ADODB.Command”) MM_editCmd.ActiveConnection = MM_editConnection MM_editCmd.CommandText = MM_editQuery MM_editCmd.Execute

Directly before this code, add the following: ‘ finish the sql and execute it Set deleteRec = Server.CreateObject(“ADODB.Command”) deleteRec.ActiveConnection = MM_editConnection deleteRec.CommandText = “delete from tblPreference where userID=’” & Request(“userID”) & “‘ AND featureID=’” & Request(“featureID”) & “‘“ deleteRec.Execute

This block of ASP will connect to the database and delete an existing parameter record if one exists.

17

514

Day 17

Now the system should be fully functional. Try going through and setting a few options: Quit out of your browser, restart it, and load the content page. All your preferences are retrieved with no interaction.

Caution

The technique I used for deleting a record before attempting to add a new one is only employed because of the trivial nature of the data being stored. If this were a system in which the information were extremely important, you would use the Update Record behavior or manually add the new preference into a temporary record and then move it to the correct spot after it has been saved properly. As it stands now, if the program were to crash in between the delete and insert commands, the user loses her previous setting. It’s very unlikely, but possible.

Summary Today’s lesson was more about a concept than providing a fully working news portal. Using cookies to customize a user’s Web browsing experience provides an environment where she can feel at home and get the information and features she needs. At the same time, you can use the collected preferences to better gauge what users like on your site and how they like it presented. Obvious areas are open to improvement, but the overall concept is what’s important. The region locations, for example, are currently limited to four settings, which will only allow the content regions to be placed on top of one another. You could easily expand this into more interesting layouts. Additionally, you should now consider how you can make other projects remember and react to individual users on-the-fly.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Q&A Q Why can’t all the preferences be set at once? A This is the biggest problem, in my mind, with the site. Because of the extensibility of the system, the table structure does not lend itself to showing all the attributes on a single page. If we had built a system that used a single table entry to store all the user’s preferences, you could build a page that sets all attributes at once.

Advanced Techniques: Tracking and Using User Data

515

Q How can controlling the location of the layers be useful? A Although we presented more of a technology demonstration in today’s lesson than anything else, dynamic locations can be used to offer the user a variety of different screen layouts for her information. Q What happens if a user tries to access the site from a computer other than the one with a cookie? A The site will force the user to log in again. This will set a new cookie with the userID on the client’s browser. Q What happens if the user has cookies turned off? A If the user does not have cookies turned on, the site is inaccessible. The cookie is checked when the content page is shown. If it doesn’t exist, the browser is redirected to the login screen.

Quiz 1. What is the session variable for in this project? 2. How do you add a cookie data binding? 3. Why are layers useful for customized pages? 4. How long will the server remember a user’s preferences? 5. Why aren’t the user’s preferences all stored in a single long table?

Exercises 1. Update the preferences selection screen so that the currently selected feature option is visible in the pop-up menu when the user is presented with the pop-up menu. 2. Add an additional feature table that matches feature IDs to a description of that feature. This will let you add a dynamically generated preference screen rather than the static table version currently used. 3. Modify one of your existing sites to use the features we’ve discussed today. For example, you could modify the message board so that it remembers what messages are yours, or what your name and email address are. 4. After reading tomorrow’s lesson, revisit today’s exercises and try re-implementing the login and registration systems using the UltraDev user authentication system.

17

WEEK 3

DAY

18

Advanced Techniques: Complex Query Systems Many of the most difficult tasks that your Web sites will perform can be made easier by using the features of your SQL server to do the work for you. The capabilities of your database server can greatly increase the complexity of the applications that you build. Today’s lesson will discuss one such case in which the query makes a seemingly impossible task quite easy. Today, you will learn • Alternative ways to think about problems. Approaching from the side is often better than approaching head-on. • A technique for implementing a “fuzzy” search that lets you write a “non-exact” query for the user who isn’t quite sure what he’s looking for. • How to develop matching Web sites that lets a user specify criteria to use in finding an “imperfect” (or perfect) match. • Get hands-on experience using the UltraDev authentication system.

518

Day 18

Complex Searches As you build Web sites that collect user information, you’ll discover that providing searching features for the databases is a necessity. SQL, by its very nature, provides an excellent system for querying tables of information. Unfortunately, what if the user wants to search the system based on parameters outside a direct SQL query? Even worse, what if the search needs to match some items but not all of them? For example, consider a search on a database of used cars. The user is searching for a car that is a convertible and is blue, but he wouldn’t mind purple—if there isn’t any purple, black would be fine. That sort of logic is very difficult to represent in a search that isn’t directly written for the user making the query. So, how can a system be created that allows “shades” of an answer to be matched? Let’s build this up by looking at a few different cases—each one increasing in complexity. By starting slow and getting complicated, hopefully you’ll see what I’m getting at. You can follow along with mySQL if you want: First, let’s create the situation in which you are trying to match a number in a table that is close to a number you’ve chosen. A sample table can be defined as follows: create table tblNumber ( a int );

Next, insert some sample data: insert insert insert insert insert insert insert insert insert insert

into into into into into into into into into into

tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber tblNumber

values values values values values values values values values values

(5); (6); (1); (15); (9); (8); (21); (500); (10); (50);

Now, let’s pick a number that we want to search for. Try just picking a number in the range of 1–500 off the top of your head. So, we want to match records that are like the number six. The first query to try is a direct selection: mysql> select * from tblNumber where a=6; +------+ | a | +------+ | 6 | +------+ 1 row in set (0.05 sec)

Advanced Techniques: Complex Query Systems

519

That wasn’t very effective in finding numbers that are similar to six. So, how can we manage this feat of magic? We could modify the selection with an or condition to find numbers that are around six: mysql> select * from tblNumber where a=6 or a=5 or a=7; +------+ | a | +------+ | 5 | | 6 | +------+ 2 rows in set (0.02 sec)

This is a better approach, but it isn’t perfect. The search is still limited to what can be specified directly in the query. We could do a bit better by adjusting the selection to a range of numbers around six, but it still doesn’t solve the overall problem. It’s time to shift our way of thinking. The WHERE clause of the query sets a condition that limits the search based on the parameters set, but how can we be certain how limited a user wants to make his search? Does he want to find a number within the range of 6 +/- 5, or 6 +/- 500? By focusing on how we select the data, we’re actually overlooking a somewhat simple solution. The correct approach is to analyze the relationship between six and all the other numbers in the table. Take, for example, the number seven. How closely related to six is it? It is within one position of the number six. Likewise, how close to six is the number 10? It is four away from 10. The answer to all our problems is subtraction. By subtracting the values in the table from the chosen value, we’ve established a relationship between a given number and the other entries in a table. That’s nice, but how exactly do we work this knowledge into a query? It’s not as difficult as you might think. The most important thing to realize is that all numbers are related to the chosen number—it’s just a matter of how closely they’re related. Are you catching on yet? The trick isn’t limiting how we chose records, it’s limiting how the chosen records are displayed. The working portion of the query is entirely handled by a custom ORDER BY clause added to the query. Let’s draft a first attempt for the new query: mysql> SELECT *,(6-a) as ‘difference’ FROM tblNumber ORDER BY difference; +------+------------+ | a | difference | +------+------------+ | 500 | -494 | | 50 | -44 | | 21 | -15 | | 15 | -9 | | 10 | -4 |

18

520

Day 18

| 9 | -3 | | 8 | -2 | | 6 | 0 | | 5 | 1 | | 1 | 5 | +------+------------+ 10 rows in set (0.04 sec)

This query defines a variable difference that contains the expression (6-a), which is evaluated for each of the records in the database—the results are then ordered by this parameter. The problem is that numbers under the chosen number result in a positive response, whereas the larger values are negative. This won’t do. According to this result, the numbers one and nine are equally similar to the number six. In reality, nine is closer than one. The negative and positive distances must be treated equally. One function in particular lends itself to being used in the query: ABS, or absolute value. The absolute value of a negative number is its positive counterpart. Adding this function to the query, we get something similar to this: mysql> SELECT *,ABS(6-a) as ‘difference’ FROM tblNumber ORDER BY difference; +------+------------+ | a | difference | +------+------------+ | 6 | 0 | | 5 | 1 | | 8 | 2 | | 9 | 3 | | 10 | 4 | | 1 | 5 | | 15 | 9 | | 21 | 15 | | 50 | 44 | | 500 | 494 | +------+------------+ 10 rows in set (0.05 sec)

That’s more like it. The listing of results shows how closely related all the numbers in the table are to the number six. The further down the table we go, the more distant the number is from our chosen value. So, how is this related to the real world, where we aren’t usually asking a user to pick a number? That’s easy to explain—although the user might be picking a non-numeric response from a pop-up menu or something, that response can probably be represented by a number. For example, choose your desired traveling mate’s smoking habits: 1. Non-smoker 2. Light smoker

Advanced Techniques: Complex Query Systems

521

3. Regular smoker 4. Can’t see out the windows Here, the possible selections are ranked numerically in relation to one another. Querying a database to find potential matches for your desired smoking habits can use these values and the technique that we’ve developed for ranking similar responses to find people who “kinda” match your preferences but don’t necessarily happen to have the same habits as you. The world isn’t black-and-white—your queries shouldn’t be either. This doesn’t do us much good, however, if multiple questions need to be answered— that’s our ultimate goal. The system needs to be expanded so that you can take a group of responses and determine how close they are to other responses. To model this case, let’s use a slightly expanded table that can hold two values to represent the two responses we want to match: create table tblTwoNumber ( a int, b int );

Add some values to the table: INSERT INSERT INSERT INSERT INSERT INSERT INSERT INSERT INSERT INSERT

INTO INTO INTO INTO INTO INTO INTO INTO INTO INTO

tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber tblTwoNumber

VALUES VALUES VALUES VALUES VALUES VALUES VALUES VALUES VALUES VALUES

(2,5); (10,5); (9,1); (15,50); (1,2); (20,5); (2,5); (11,2); (3,7); (6,6);

Pick two numbers to use as the values that you’re trying to find a close match for. I’ll pick eight and 12 as values for “a” and “b,” respectively. Using the exact same procedure we used with a single answer, we come up with two lists of results that show the ranking of the other records in relation to the numbers we’ve chosen: mysql> SELECT *,ABS(8-a) as ‘difference’ FROM tblTwoNumber ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 9 | 1 | 1 | | 10 | 5 | 2 |

18

522

Day 18

| 6 | 6 | 2 | | 11 | 2 | 3 | | 3 | 7 | 5 | | 2 | 5 | 6 | | 2 | 5 | 6 | | 15 | 50 | 7 | | 1 | 2 | 7 | | 20 | 5 | 12 | +------+------+------------+ 10 rows in set (0.02 sec)

and mysql> SELECT *,ABS(12-b) as ‘difference’ FROM tblTwoNumber ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 3 | 7 | 5 | | 6 | 6 | 6 | | 2 | 5 | 7 | | 10 | 5 | 7 | | 20 | 5 | 7 | | 2 | 5 | 7 | | 1 | 2 | 10 | | 11 | 2 | 10 | | 9 | 1 | 11 | | 15 | 50 | 38 | +------+------+------------+ 10 rows in set (0.01 sec)

Notice that the listing of selected matches when looking at the “a” field is very different from looking at “b.” This highlights the problem we need to overcome. How do you take into account both of the variables when performing the query? No problem—all we need to do is modify the query so that it sorts by the combined error (or distance from the original number) in the two queries. mysql> SELECT *,(ABS(8-a)+ABS(12-b)) as ‘difference’ FROM tblTwoNumber ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 6 | 6 | 8 | | 10 | 5 | 9 | | 3 | 7 | 10 | | 9 | 1 | 12 | | 2 | 5 | 13 | | 2 | 5 | 13 | | 11 | 2 | 13 | | 1 | 2 | 17 | | 20 | 5 | 19 | | 15 | 50 | 45 | +------+------+------------+ 10 rows in set (0.00 sec)

Advanced Techniques: Complex Query Systems

523

By adding the two absolute values, we get a measurement of how far off each of the records is from the two chosen numbers. This model can be expanded to handle checking as many values as we need simply by following the same pattern and using the combined differences between the desired values and actual values.

Thresholds Wait… you don’t really want to have to deal with showing everything that even remotely comes close to the desired values. These queries are different from the other queries you’ve used for searching because they match all the records in the table being searched. Because of this, you will generally want to impose some sort of cut-off on the number of records displayed. The records near the end of the list are likely to be of little importance to the user. There are two ways you can limit what the user sees when he performs the query—either by imposing a limit on the returned records, or by imposing an upper threshold for the results. Limiting the results to a certain number of records is usually fine, but it doesn’t give the user much control over what he sees. Suppose you decide that you’re going to generate a top 10 list for the user, which shows him the top ten matches. Unfortunately, that doesn’t really do much good for the user if the first 50 records are perfect matches. He will miss 40 other results that might satisfy his query just as well as the first 10. Still, limiting the results to a range of values is often more than sufficient for the task and is easily accomplished directly through the UltraDev Repeating Region behavior. A more advanced way to limit the results shown is to impose a threshold on the search, such as an upper limit on the amount of error that can exist in order for a record to be returned. Suppose that we want to check for a combined error of less than 20, we can modify the last query to include a WHERE clause, similar to this: mysql> SELECT *,(ABS(8-a)+ABS(12-b)) as ‘difference’ FROM tblTwoNumber WHERE (ABS(8-a)+ABS(12-b))<20 ORDER BY difference; +------+------+------------+ | a | b | difference | +------+------+------------+ | 6 | 6 | 8 | | 10 | 5 | 9 | | 3 | 7 | 10 | | 9 | 1 | 12 | | 2 | 5 | 13 | | 2 | 5 | 13 | | 11 | 2 | 13 | | 1 | 2 | 17 | | 20 | 5 | 19 | +------+------+------------+ 9 rows in set (0.00 sec)

18

524

Day 18

Note

The redundancy of the calculation of difference for both the ORDER BY and WHERE clauses is a limitation of mySQL. Your database server might provide a more efficient means of performing the query where the error value isn’t calculated twice.

Setting a threshold doesn’t force the number of results a user can see—instead, it forces a certain quality of response to be shown to the user. When allowing the user to set a threshold, you probably want to present the value selection in a user-friendly manner. Asking the user to “type in a threshold level” isn’t very nice. A real-world solution would be to provide a percentage of allowable errors that he could set. The question then becomes, how do you relate the amount of error to a percentage? For each of the questions you use to define your query, add up the maximum amount of error between the first and last response. For example, if I have these two questions: How do you like your toast? 1. Lightly Brown 2. Brown 3. Dark Brown 4. Burnt and Do you eat eggs? 1. Never 2. Once a week 3. Once a day There are two questions; the first one has four possible responses, whereas the second has three.

Note

This entire query system is based on providing answers that vary from one end of the spectrum to another. This lets us evaluate how far off from a desired response we are. It also imposes a strict ordering on the response lists. Each possible option must be assigned a value that is only slightly changed from its closest variant. For example, in the toast list, we cannot number Burnt as 2. If we did, this would be implying that Burnt Toast is closely related to Lightly Brown toast, which it isn’t.

Advanced Techniques: Complex Query Systems

525

The worst-case scenario for the first question is that the user wants a match for the first Lightly Brown response, and it is compared to the Burnt response. The distance between these two options is three—so that is the maximum amount of error possible in the first question. In the second problem, the maximum amount of error is, once again, the difference between the first and last responses—or two. Combining these, we see that the total amount of error possible is five—so 100% error is equal to five, 50% error is 2.5, 0% is 0, and so on. After calculating these values, you can provide a pop-up menu for the user that correlates percentage error to a threshold value, thus limiting the number of values returned.

Tip

If you’re wondering if you can provide a percentage match instead of percentage error, of course you can! Inverting the values will give you what you’re looking for. For example, using the same scenario we just set up—if you wanted to match with 100% confidence, you want a threshold of 0. Likewise, if you wanted 0% confidence, you’d use a threshold of the maximum amount of possible error—or, in this case, five.

Weighing Responses Another useful tool for the query system we’ve been muddling our way through is a way to weight responses if they are of higher importance than others. This places more importance on the question’s response than other questions, or other options within a response. For example, if you have a question that tries to match someone around where you live: Where do you live? 1. Ohio 2. California 3. Jupiter These values are not closely related, but they’re the only options we have. Rather than numbering them sequentially, we can impose a penalty for choosing anything other than the one that would result in a direct match, but simply renumber the options: Where do you live? 1. Ohio 10. California 3. Jupiter

18

526

Day 18

This numbering expresses the relationship between these locations. Ohio and California are somewhat far apart, while Jupiter is out there. Using these numbers would almost certainly place anyone choosing Jupiter at the bottom of the list for someone trying to find a match in Ohio or California.

Note

The querying system we’ve developed over the past few pages should not, by any stretch of the imagination, be considered the pinnacle of searching technology. This is merely a template and a starting place for developing your own complex query systems. You can add additional conditions and other features to the SQL in order to fit it to your needs. Remember—make your database server do the work for you. Any custom programming you can avoid, the better.

So, how are we going to use all this in a site? By developing a “traveling buddy” site to help others find traveling companions/car-pool buddies in a fictitious city. Let’s go ahead and start developing the site map and strategy now.

The Site Map Today’s programming project is to produce a site that uses the complex query system we’ve developed to match up people as traveling companions. The layout will be very simple—a login and registration system, and a query/results screen. The login and registration screens are very much the same as what you created in yesterday’s project, except they use the built-in user authentication server behaviors. The user will also have the ability to reset his preferences at any time. The rest of the site consists of a single query screen and a another that displays the matching results. When all is said and done, the site map should resemble Figure 18.1.

The Table Definitions The tables that we need to complete the site are really, simple. Most of the information we need is stored in a single table. A second table relates the answers for the questions to the values that will be used to calculate the error between different profiles We’ve spent more time discussing the theory behind this project than the others, so we’re going to take less time to build it. The first table that we’ll need to create is the UserInfo table—much like we’ve been using. This table will contain the username, password, and all preferences. So, what are the preferences?

Advanced Techniques: Complex Query Systems

527

FIGURE 18.1 Today’s lesson will demonstrate the principles of our fuzzy search engine.

registration

login

register profile

search

results

The UserInfo Table The user’s preferences are implemented to create a profile that others can search against, and then he can use to “seed” the search system so that he doesn’t have to enter all the options by hand. So, in order to set up the preferences, we first need to decide how many questions there are. The user table will include a field for each question—this field will contain a response ID that is used to lookup the value for that answer. Let’s go ahead and say that five questions will be used in the queries. We’ll also collect the user’s email address so that other people can contact potential matches. create table tblUserInfo ( userID int not null auto_increment, username varchar(50) not null, password varchar(50) not null, email varchar(200), fullname varchar(200), q1Response int, q2Response int, q3Response int,

18

528

Day 18

q4Response int, q5Response int, primary key (userID) );

Note

Yesterday we kept all the user’s preferences in a separate table so that the preferences could easily be expanded in the future. Although that is fine if you want an easily expandable system, it doesn’t lend itself to being set up by UltraDev in a friendly way. Because only a single record can be inserted at a time, the only way to display/set all the preferences simultaneously on a single screen is to include them in a single record.

Today’s lesson makes use of the built-in User Authentication behaviors within UltraDev. These behaviors implement the username field as the primary key and offer very little flexibility otherwise. I prefer to stick with the UserID scheme we’ve been using because it offers the possibility of creating systems where the user can alter his username (because it isn’t the primary key). However, because we’re going to force the user to choose a unique username in today’s project, we can assume that the username field will also be unique in the database, and therefore use the authentication system along with our existing table definition. If you want to build a system where the username can change, you will not be able to use the built-in authentication behaviors, and you will need to make use of a “by-hand” system, as demonstrated yesterday. This also applies to UltraDev 1.0 users who do not have access to the new authentication behaviors.

The Options Table In order to allow the user’s preferences to fill the search form with default values, we need to store more than just the value of the response he’s chosen. Because of this requirement, a second table must be used to store all the information about a response (its label, value, and ID). The responseID will be stored in the user preferences and used to relate back to the options. This table should be what we need: create table tblOption ( optionID int, optionName varchar(200), optionValue int, primary key (optionID) );

Advanced Techniques: Complex Query Systems

529

Unfortunately, this will not work with the UserInfo table that has been set up. The reason for this is because we need to relate multiple options to multiple fields in the tblUserInfo table. This many-to-many relationship is not possible with our system. To get around this, we can create a separate option table for each of the questions—then each question can be related to a separate table, eliminating the problem. This also means that we can shorten the option table to this: create table tblOption1 ( optionName1 varchar(200), optionValue1 int not null, primary key (optionValue1) );

Create four other versions of the table, named tblOption2 through tblOption5 with the fields numbered similarly. We can use these tables to dynamically generate pop-up menus for each of the questions in the query.

Note

Each of the fields in the five option tables must be named uniquely (optionName1, and so on) in order for it to be differentiated between the other option table fields. Near the end of the project, you will be querying all five tables simultaneously and will need to have access to all five optionName values.

The final database structure is shown in Figure 18.2. FIGURE 18.2 Two tables are used to collect information and rank its value.

tblOption1 optionID1* optionValue1 tblUserInfo userID username password email fullname q1Response q2 Response q3 Response q4 Response q5 Response

tblOption2 optionID2* optionValue2 tblOption3 optionID3* optionValue3 tblOption4 optionID4* optionValue4 tblOption5 optionID5* optionValue5

18

530

Day 18

Inserting Sample Data The next step is setting up the options and the sample user data. Before the option data can be stored, we have to define the questions that the options answer. This site is going to be a travelling match site, so let’s try to come up with some questions and options that are somewhat reasonable. Obviously a real site would have a larger list of questions and options, but because I don’t know what you want to build, this will have to suffice. Try these on for size: 1. What direction/route do you want to travel? 1. 315 South 2. 670 South 3. 270 Southwest 10. 315 North 11. 670 North 12. 270 Northeast

Note

Notice that several numbers are skipped in the middle. This will help weigh the query such that the route being traveled is quite important.

2. Do you mind a smoking companion? 1. No smoking 2. Light smoking 3. Normal smoking 4. Fill the car with smoke! 3. What type of transportation do you prefer? 1. Motorcycle with sidecar 2. Economy car 3. Luxury car 4. SUV or Van 4. Time to arrive at destination? 1. 8:00 a.m. 2. 8:30 a.m.

Advanced Techniques: Complex Query Systems

531

3. 9:00 a.m. 4. 9:30 a.m. 5. Time to leave for home? 1. 4:00 p.m. 2. 4:30 p.m. 3. 5:00 p.m. 4. 5:30 p.m. They aren’t fantastic, but they’ll do. Go ahead and insert options into the option table. Each option should be related to a particular question and include a unique optionID as well as the numeric value that is used to calculate closeness of an answer. INSERT INSERT INSERT INSERT INSERT INSERT

INTO INTO INTO INTO INTO INTO

tblOption1 tblOption1 tblOption1 tblOption1 tblOption1 tblOption1

VALUES VALUES VALUES VALUES VALUES VALUES

(‘315 (‘670 (‘270 (‘315 (‘670 (‘270

South’,1); South’,2); Southwest’,3); North’,10); North’,11); Northeast’,12);

INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption2 tblOption2 tblOption2 tblOption2

VALUES VALUES VALUES VALUES

(‘No smoking’,1); (‘Light smoking’,2); (‘Normal smoking’,3); (‘Fill the car with smoke!’,4);

INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption3 tblOption3 tblOption3 tblOption3

VALUES VALUES VALUES VALUES

(‘Motorcycle with sidecar’,1); (‘Economy car’,2); (‘Luxury Car’,3); (‘SUV or Van’,4);

INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption4 tblOption4 tblOption4 tblOption4

VALUES VALUES VALUES VALUES

(‘8:00 (‘8:30 (‘9:00 (‘9:30

AM’,1); AM’,2); AM’,3); AM’,4);

INSERT INSERT INSERT INSERT

INTO INTO INTO INTO

tblOption5 tblOption5 tblOption5 tblOption5

VALUES VALUES VALUES VALUES

(‘4:00 (‘4:30 (‘5:00 (‘5:30

PM’,1); PM’,2); PM’,3); PM’,4);

Next, add some corresponding records to the user table: INSERT INTO tblUserInfo VALUES (‘’,’jray’,’johnpass’,’[email protected]’, ‘John Ray’,2,3,1,1,2); INSERT INTO tblUserInfo VALUES (‘’,’eking’,’hairy’,’[email protected]’, ‘Elvis King’,1,4,4,3,3); INSERT INTO tblUserInfo VALUES (‘’,’ptoe’,’remote’,’[email protected]’, ‘Paul Toenail’,3,1,1,1,2);

18

532

Day 18

INSERT INTO tblUserInfo VALUES (‘’,’jlamp’,’monitor’,’[email protected]’, ‘Jeff Lamppost’,2,2,3,1,3); INSERT INTO tblUserInfo VALUES (‘’,’tchee’,’recliner’,’[email protected]’, ‘Tuffy Cheese’,11,3,2,1,2); INSERT INTO tblUserInfo VALUES ➥(‘’,’mcliff’,’pomeranian’,’[email protected]’, ‘Marty Cliffton’,12,3,4,1,2); INSERT INTO tblUserInfo VALUES (‘’,’graey’,’kitty’,’[email protected]’, ‘Graeyling Smetana’,10,3,4,3,2); INSERT INTO tblUserInfo VALUES (‘’,’jvuj’,’johnpass’,’[email protected]’, ‘Jules Vuje’,2,4,2,1,1); INSERT INTO tblUserInfo VALUES (‘’,’lhans’,’computer’,’[email protected]’, ‘Leftie Hans’,1,2,4,4,2); INSERT INTO tblUserInfo VALUES (‘’,’jbow’,’dasboot’,’[email protected]’, ‘Jim Bow’,12,1,2,3,2);

This is a good start, and should give us everything we need to build and test the system.

The Login System The login system is virtually identical to the system that we built yesterday. Four screens— will collect the system data, store it, and then allow the user to login by setting a session variable. An additional screen, update, will let the user update his profile.

Registration and Initial Profile A user visiting the site for the first time will want to be able to register with the system and set up his profile—so let’s get the registration working first. The registration screen works in much the same way as yesterday’s—it consists of a small form that prompts the user for a new username and submits it for processing. In today’s lesson, however, we’ll use the built-in authentication methods rather than one built by hand. If you didn’t read through yesterday’s lesson, the first step we took was to ensure that the username being registered was unique before continuing. If it is not unique, the user must be asked to pick a new username. This entire process is now handled automatically by a server behavior. First, go ahead and design a registration form that includes username, full name, password, and email address fields—all the basic information you want to collect. Next, because the user’s profile should contain some data before he is allowed to search, add five hidden fields to hold this default profile. These fields should be named q1Response through q5Response and contain a default value of 1 (or whatever option value you want to be the default). These are not dynamic fields in any way; they’re just five fields hard-coded with a single value.

Advanced Techniques: Complex Query Systems

533

Figure 18.3 shows a completed register.asp document. FIGURE 18.3 The first registration page checks the username and saves the registration information if it is correct.

Finally, you need to add two server behaviors to the registration page in order to make sure that the username is unique and then insert the registration information into the tblUserInfo table. Surprisingly, UltraDev requires that you add the Insert Record behavior before adding the behavior to check the username. Add the insert behavior now: 1. Open the Server Behavior palette. 2. Click + to add a new Insert Record behavior. 3. Choose the appropriate connection and match the form elements to the fields in tblUserInfo, as seen in Figure 18.4. 4. After inserting values, configure the behavior to take the user to the login (login.asp) page. FIGURE 18.4 Make sure that the fields from the registration page are matched to the tblUserInfo fields.

18

534

Day 18

The last step for this page is to insert the Check New Username behavior to verify that the username is new to the database: 1. Open the Server Behavior palette if it isn’t already. 2. Click + and choose Check New Username from the User Authentication submenu. 3. When prompted, configure the behavior so that it checks the username field for uniqueness. 4. If the username already exists, have the behavior go to a page that will provide an error message to the user, such as duplicate.asp. Your setup should be similar to that of Figure 18.5. 5. Click OK when finished. FIGURE 18.5 The Username field should be checked for uniqueness. If it isn’t unique, the user should be redirected to duplicate.asp.

Finally, as in yesterday’s example, we need to provide a “that username is taken” message which is shown if the visitor has chosen a name identical to one already in the system. Because the UltraDev behaviors will automatically redirect the user to a new page if a duplicate exists, all you need to do is provide an informative message on your duplicate.asp page and a link back to the registration screen so that the user can try again. Figure 18.6 gives an example of what your Duplicate Username screen might look like. FIGURE 18.6 Warn the user if he’s chosen a duplicate username.

Advanced Techniques: Complex Query Systems

535

Login Screens Similar to the registration process, logging into the system also takes two screens—one to collect and check the user information, another to display a bad login message. As we did yesterday, we’ll be setting a session variable to track the user after he’s logged in. We won’t, however, be setting that variable by hand! The UltraDev authentication system will internally set a session variable containing the current user’s username—we can use that variable rather than editing the code!

Note

The UltraDev user authentication behaviors store the username of a person with a valid login in a session variable. Storing the UserID would be a better choice because it would open up the possibility of allowing a user to change his login name at a later time (primary keys cannot change!). Because we’re working with the assumption that all usernames are unique, there’s no problem.

The first login screen (named login.asp) does the exact same thing as the first registration screen. It collects some information (in this case, the username and password) and uses a server behavior to analyze the data, then redirects the user based on the result of the input. Design the login page however you prefer. The sole requirement is that it contains a username field, a password field, and a submit button. An example of this screen is shown in Figure 18.7. FIGURE 18.7 The login screen should contain the username and password fields for processing by the user authentication behavior.

18

536

Day 18

With the form completed, open the Server Behavior palette and add the Log In User behavior to handle verifying the username and password that has been provided. 1. Within the Server Behavior palette, click +. 2. Choose Log In User from the User Authentication submenu. 3. Choose the form that is submitting the login information, as well as the username field and the password field in the form. 4. Set the database connection to use and pick the tblUserInfo table and username/password columns to use from the database table. 5. On a successful login, the user should be sent to the search.asp page so that he can start searching the system. You can select the Go To Previous URL option if you prefer. 6. If a login fails, send the user to badlogin.asp. 7. Finally, be sure that access is restricted based on a username and a password. 8. When completed, the Log In User form should look very similar to Figure 18.8. Click OK when you are satisfied with your work. FIGURE 18.8 Choose the username/password fields from both the login form and the database.

As with the registration system, you now need to create your badlogin.asp page that the user will visit if his information is not correct. You’ll probably want to provide links back to the login and registration pages from this screen. An example badlogin.asp page is shown in Figure 18.9. That’s it, we’re done with the login and registration systems. Time to get started on the fun stuff—writing the profile management page and search engine.

Advanced Techniques: Complex Query Systems

537

FIGURE 18.9 The second page in the login system should contain an error message for an invalid username/password.

Creating the Update Profile Page The Update Profile page is the most difficult page you will create today—not because it is hard to write or uses any complex behaviors, but because the coding is monotonous. This page allows the user to update any information in his profile—password, email address, and all his default responses to the five questions. Start by setting up a form with the five questions and five corresponding pop-up menus named q1Response through q5Response—include fields for updating the email address and password. Finally add a submit button that will save the user’s changes to his profile when he’s happy with the selections. All these fields need to be bound to data that is in the database—that’s where the work comes in. A total of six recordsets are needed to drive the page. The first recordset selects the user information from the tblUserInfo table. This is used to fill the email address and password fields. Define this query, named rsUserInfo, now. You can define this as a simple query that selects all the fields in tblUserInfo based on a filter where the session variable MM_Username must equal the username field within the database.

Note

The MM_Username session variable is set automatically when the user successfully completes the Log In server behavior. You can use it as you would use a session variable that you set yourself.

Next, bind the email address to the email address form field following the same technique that I recommended earlier. Select the email address in the document design view, and then choose the email field within the rsUserInfo recordset. Set the binding type at the bottom of the data binding window to input.value, and then click the bind button. If you prefer the alternative method of binding attributes (through the Properties palette), you could use that instead. Repeat this procedure for the password field.

18

538

Day 18

Now you need to create five recordsets that contain the options for each of the five questions. Define these recordsets, rsOption1 through rsOption5, as simple queries that select everything in the table. This should only take a few minutes to set up. After you’ve created the five option recordsets, you need to bind them to the five pop-up menus in the document design window. Again, just follow the binding procedure you’re most comfortable with to bind the item label of the menu to the OptionName# field and the item value attribute of the menu to the OptionValue# field in the query. Repeat this for all five pop-up menus. The result will be five dynamic menus that are bound to the corresponding option tables in the database. Figure 18.10 shows the data binding window with rsOption1 correctly bound to the pop-up menu. FIGURE 18.10 Your option recordsets should be bound to the pop-up menus similarly to this.

When you’ve had a chance to catch your breath after creating the bindings for the pop-up menus, prepare yourself to do it all over again. To show the items that the user has selected, you must bind the item selected attribute of each of the option menus to the corresponding response field in the rsUserInfo recordset. For example, the item selected attribute of q1Response pop-up menu should be bound to the q1Response field in rsUserInfo, and so on. This ensures that the items which the user has stored with his profile are shown as the default selection in the database. The last step in setting up the page is adding the server behavior to update the user’s profile after he clicks submit. Add this behavior to the profile.asp page now: 1. Open the Server Behavior palette. 2. Click + to add an Update Record behavior. 3. Select your connection type. 4. Set tblUserInfo as the table to update. 5. Choose username as the unique key column. Although our standard database tables use the UserID as the unique column, the user authentication system we’re using assumes unique usernames.

Advanced Techniques: Complex Query Systems

539

6. Make sure that all the values match up in the Get Values From section. 7. Finally, set the Go To URL value to search.asp. 8. Click OK. Good job! You’ve finished the hardest page in today’s lesson. My final design for the profile page is shown in Figure 18.11. FIGURE 18.11 A simple page, but a ton of supporting recordsets.

The final portion of the site that you’ll be creating is the search page and results form. The search page will be set up the same as the profile page, but without the additional email, password, and userID fields. To save yourself a bunch of work, make a copy of the profile.asp document named search.asp—this will form the basis of the first search page.

The Search and Results Pages The search and result pages are simple to build—mainly because you already did the work on the profile page. If you haven’t made a copy of your profile page, do so now, saving it as search.asp. Open this new page in the document design view. Because the search page requires most of the behaviors that were already implemented in the profile page, all we really need to do is trim down the existing page. First, clean out the form so that it only includes the five questions and their responses. You don’t need the hidden userID, email, or password fields. Next, open the Server Behavior palette and select the Update Record behavior, and then click the - button to remove it from the project. No hidden fields should be left in the form—so if you happen to see any, it’s because UltraDev missed something—remove them manually.

18

540

Day 18

Tip

The best way to keep UltraDev from “getting confused” when removing server behaviors is to remove everything you can from the Data Bindings palette or Server Behavior palette before manually editing the document. Even so, you might still find yourself in a situation where a few straggler fields need your attention.

Finally, select the form in the document and set its action to searchresults.asp. You can also add an Update Your Profile link to the page that links the user to profile.asp for easy access to his profile information—because the MM_Username session variable is handling identifying the person browsing the site, there is no need to pass any additional values to the page. A final view of the search page is displayed in Figure 18.12. FIGURE 18.12 The search screen is nothing but a stripped down version of the user profile management page.

Start the final screen of the project searchresults.asp by laying out a basic screen design for your results. For example, I want to display all the results in a table view, so I’ve laid out a table with the columns: • Name • Email • Route • Smoking Pref. • Transportation • AM Departure • PM Departure

Advanced Techniques: Complex Query Systems

541

I’ve also left a second row of the table blank so that I can insert the search results into it. Only a single query in this document can handle the search, but it’s a real beauty. Remember the basic search pattern that we set up early in the day? We want to combine the absolute values of the differences between the desired response and the actual response. The full SQL of the query for the search is SELECT *,abs(‘varQ1’-tblOption1.OptionValue1)+abs(‘varQ2’➥tblOption2.OptionValue2)+ abs(‘varQ3’-tblOption3.OptionValue3)+abs(‘varQ4’-tblOption4.OptionValue4)+ abs(‘varQ5’-tblOption5.OptionValue5) as ‘difference’ FROM tblUserInfo,tblOption1,tblOption2,tblOption3,tblOption4,tblOption5 WHERE tblUserInfo.q1Response=tblOption1.OptionValue1 AND tblUserInfo.q2Response=tblOption2.OptionValue2 AND tblUserInfo.q3Response=tblOption3.OptionValue3 AND tblUserInfo.q4Response=tblOption4.OptionValue4 AND tblUserInfo.q5Response=tblOption5.OptionValue5 ORDER BY difference

Note that a WHERE clause is set up to match the responses for each of the UserInfo records to the corresponding record in each of the option tables. This is required so that we can use the OptionName field from the tblOption tables to show the response that the user gave to the survey. Create an rsResults advanced query that includes this SQL. You will also need to define the ‘varQ1’ through ‘varQ5’ UltraDev variables set to the runtime values “Request(“q1Response”)” through “Request(“q5Response”)”. Be absolutely certain that the query is defined correctly before clicking OK. Click the Test button to verify that the query works. The reason for taking all the precautions is that after entering this query into UltraDev, you’ll may be unable to edit it. Older versions of UltraDev (and, indeed, the most recent version of the application), have problems editing certain queries. Assuming your version of UltraDev doesn’t have a problem with the query, open the Data Binding window and drag the fields you want into your document design view. If you have to manually insert all the dynamic data into the document, it isn’t as difficult as it sounds—just a bit more cumbersome than you might hope. For example, here are the fields I’ve inserted, and the ASP code you would need to add to show them: • Name <%=(rsResults.Fields.Item(“fullname”).Value)%>

• Email <%=(rsResults.Fields.Item(“email”).Value)%>

18

542

Day 18

• Route <%=(rsResults.Fields.Item(“optionName1”).Value)%>

• Smoking Pref. <%=(rsResults.Fields.Item(“optionName2”).Value)%>

• Transportation <%=(rsResults.Fields.Item(“optionName3”).Value)%>

• AM Departure <%=(rsResults.Fields.Item(“optionName4”).Value)%>

• PM Departure <%=(rsResults.Fields.Item(“optionName5”).Value)%>

FIGURE 18.13 The query becomes jumbled if you try to edit it after initially defining it.

To enter these by hand, just switch from the design view to the code view, and enter everything between the ASP tags <% %>. That’s all you need to do! After entering these into the document, they will appear as Dynamic Text server behaviors. As such, you can work with them as if they were automatically added to the design. You can drag them to the appropriate spots in the table to set up the final view of your results. Hopefully, you won’t need to do a thing by hand, and just dragging the fields will suffice. Either way, you’re prepared. The last step in creating the screen is to select the row of dynamic data that you’ve inserted into the document and add a Repeat Region server behavior so that multiple matches are shown. If you want, you can display either all the records, or a specific number. Limiting the responses to a certain threshold of error is left as an exercise to the reader, but it was covered earlier and shouldn’t be too difficult.

Advanced Techniques: Complex Query Systems

543

Go through your Web site and test the functionality. If everything is working correctly, you should get a result listing that is similar to that of Figure 18.14. You’ve finished your site. FIGURE 18.14 Your dynamic search result should look similar to this.

Note

A quick test to show that everything is working is to verify that the profile you’ve logged in with shows up at the top of the search results.

18

Protecting Your Pages A final step that you can take for your site is to protect the search.asp, searchresults.asp, and profile.asp pages. After all, these pages shouldn’t even be accessible by someone who hasn’t registered with the system. Because this isn’t exactly a high-security Web site, you might not find this necessary. If you do, however, it’s a very simple process to complete. 1. Open a page you want to protect, such as profile.asp. 2. Open the Server Behavior palette. 3. Click + and Choose Restrict Access To Page from the User Authentication submenu. 4. Configure the behavior, as seen in Figure 18.15, to restrict access based on Username and Password.

544

Day 18

5. If access is denied, send the user to the login.asp page. 6. Click OK when finished. 7. Repeat this process for the other pages you want to protect. FIGURE 18.15 Restrict access to the pages that unauthorized users shouldn’t see!

If a user tries to access any protected page before logging in, they will immediately be sent to the login.asp page. Simple, but effective.

Summary Today’s lesson covers one of the most powerful tools that you have at your disposal— UltraDev’s authentication system and your database server! The UltraDev authentication behaviors greatly speed up the process of developing protected sites, while the database makes it possible to perform minor miracles by creating advanced SQL queries. The query system that you’ve just developed is useful, but it is also limited because it places equal emphasis on all the queries. You can refine the process that we’ve created today by adding weights to the various elements of the query. Additionally, traditional search elements can be used to limit the recordset to values that are exact matches. For example, rather than matching all the records, you could modify the query in the WHERE clause. If people wanted exact matches based on smoking preferences, this comparison would be moved out of the absolute value calculation into the WHERE portion of the SQL. My hope is that after reading this chapter, you have some new ideas on how to create your own searches. It’s too easy to think that all the queries have to match records by filtering based on the attributes used with WHERE. Breaking out of the traditional query mold opens up the manipulation of your Web site data to a whole new world of complex queries.

Advanced Techniques: Complex Query Systems

545

Q&A Q How many questions can this query handle? A You could add as many questions to this recordset as your SQL server can handle in a single query. Unfortunately, UltraDev seems to have some problems with lengthy queries. In fact, the query used here confused the SQL entry field when I first entered it. Hopefully this will be corrected in a future version of UltraDev. Q What sorts of applications can this be used with? A Anything. Although today’s lesson used the search technique to match people, you can use it anywhere. For example, you could provide attribute rankings for products in a shopping catalog that could be queried. Essentially, anywhere you have a search, you could consider using this technique. Q Do I have to set up the separate option tables all the time? A These tables are only needed because we wanted to display the names of the options that the users have selected. If that information wasn’t important, we could make due with just the tblUserInfo table.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What is the absolute value? 2. Why do we add the absolute values together? 3. How can query items be weighted? 4. What is a threshold? 5. Why is it important to enter the master search query right the first time?

Exercises 1. Add a threshold value to the search. You will need to calculate the total amount of error possible in the query. 2. Fix the search so that the results do not include your own record. You’ll have to add a condition to the WHERE clause of your search query to accomplish this.

18

546

Day 18

3. If you’re feeling truly adventurous, you can provide even more advanced search capabilities by combining multiple select statements using unions. This will allow you to group the error into categories, and then join the results of these queries. It might be more appropriate than combining all the error together in a single query. 4. To gain more practice with the authentication system, convert yesterday’s project to use the built-in behaviors rather than the by-hand method.

WEEK 3

DAY

19

Advanced Techniques: Testing and Educating Online One of the hottest topics in schools around the country is distance education— creating courses where children and adults alike can learn without needing to be in a classroom. The World Wide Web is an excellent medium to make distance education accessible to a very large number of users. This chapter discusses the creation of an online testing forum that could easily be adapted to many academic and non-academic uses. Today you will learn • How to create an extensive survey/testing system. • How to control the interaction of UltraDev with several different database tables. • How to use SQL to handle the scoring of tests in real-time—as the answers are submitted.

548

Day 19

Survey and Testing Systems I’ve spent hours setting up online testing courses for faculty at The Ohio State University. Usually this is just a matter of creating a few HTML forms that email the student’s answers to the professor or save the results for the professor to grade later. Generating these HTML forms repeatedly gets to be a bit tedious, and more than slightly pointless. A better way to handle the task is to set up an extensible system where the HTML is separate from the questions being asked. The system that you’ll be developing today can do just that—record a series of questions and their answers, and then “play back” the questions to students. In order to access the site, the students will log in to the system and complete the questions. When finished, the administrator will be able to view the statistics for each of the students.

The Site Map The development of this system takes a bit of forethought. Unlike some of the other applications we’ve developed, some interaction here might not be obvious at first glance. Surprisingly, however, the site map will be very small. As we’ve done before, let’s list the features that must be in place in this system: • Multiple Arbitrary Questions • Multiple Arbitrary Answers • A login screen to authenticate users • Immediate scoring of correct answers • An administrative backend to view students scores So, let’s think about the site map. Obviously, there must be a login screen and a question screen, as well as an administrative screen to search for a user and display the result data. A total of five or six screens will need to be created, but the majority of the program’s functionality will be contained on the question screen. What makes this interesting is the multiple questions and multiple answers. This means that there can be an arbitrary number of questions, and each question can have any number of answers. A single screen will handle displaying this information. Many people I’ve known who have set up online testing have developed individual pages for each of the questions—don’t worry, we’re not going to have to do that with our system! The site map for the testing system being developed here is shown in Figure 19.1.

Advanced Techniques: Testing and Educating Online

FIGURE 19.1

USERS

549

ADMINISTRATORS

There are four areas in the testing site map.

view scores Login

Process Logins

quiz

Creating the SQL The SQL that we need for this section is really just a few forms, but you need to make sure that the tables are developed in a way that isn’t limiting. The first table that we need is the username and password table—this will handle logins to the system. We won’t bother creating a registration screen because the assumption is made that the administrator will be entering the users who should have access to the system. Let’s go ahead and look at this table—because we’re going to rely fully upon the UltraDev authentication system, this will look a little different from previous user tables. We can also provide some access levels for administrative control. create table user ( username varchar(50) not null, password varchar(50), userlevel varchar(50), primary key (username) );

Tip

As I’ve mentioned before, the UltraDev authentication system does not make provisions for the use of an arbitrary field (such as userID) to identify a user. By implementing usernames, we’re stuck with manually (or using UltraDev behaviors) checking for duplicates. Previously, we used autoincrement userIDs, which eliminated any reason to worry about duplicates.

19

550

Day 19

Moving right along, the next table that we need to create is the question table—this holds all the questions that the administrator wants to ask. Unfortunately, each of the questions needs to have multiple answers. At first glance you might be tempted to create a table layout such as the following, but don’t do it! create table question ( questionID int not null auto_increment, questionTitle varchar(50), questionText varchar(250), answer1 varchar(50), answer2 varchar(50), answer3 varchar(50), etc...

This obviously isn’t going to work. Instead of a single table for the question, two tables are needed. One table will hold the question itself, and another table will hold the answers to the question. In order to relate the two tables, the answer table will hold a questionID for each of the answers. Because we need to implement online scoring, the system also needs to know when an answer is correct. To implement this feature, add the ID of the correct answer to the question field. We can define the question table similar to the following, but again, it still won’t be quite right. create table question ( questionID int not null auto_increment, questionTitle varchar(50), questionText varchar(250), answerID int, primary key (questionID) )

This table contains all the questions and their IDs. The answers themselves can be kept in a table like this: create table answer ( answerID int not null auto_increment, questionID int, answerText varchar(80), primary key (answerID) )

Take a look at these two tables—you might notice that there is going to be a little bit of a problem entering the data into the tables. Because you don’t know the questionID when you enter the answer, and you don’t know the answerID when you enter the question, it’s going to be slightly difficult to get everything in sync.

Advanced Techniques: Testing and Educating Online

551

To eliminate this problem, go ahead and make the questionID a non-auto–increment field. You’ll have to keep track of the questionID’s manually, but this means that you can enter the answers first, and then enter the questions. Because there are fewer questions than answers, it’s easier to turn the questionID into the manually generated value. So, the final question table resembles the following: create table question ( questionID int not null, questionTitle varchar(50), questionText varchar(250), answerID int, primary key (questionID) )

Tip

If you’ve entered a table definition and want to change it, you can always use the ALTER TABLE SQL function to change the table’s structure. You cannot however, alter the primary key without dropping the table.

Now, let’s go ahead and add some sample data to the program. We’ll add the answers in first so that we have an answerID to use in the question table. Here’s some simple answer data that can be inserted into the database: insert insert insert insert insert insert insert insert insert insert insert insert

into into into into into into into into into into into into

answer answer answer answer answer answer answer answer answer answer answer answer

values values values values values values values values values values values values

(‘’,1,’G4 Cube’); (‘’,1,’G4 MP Tower’); (‘’,1,’Ruby iMac’); (‘’,1,’Pentium III’); (‘’,2,’Apples’); (‘’,2,’Pears’); (‘’,2,’Grapes’); (‘’,2,’Lemons’); (‘’,3,’Playstation 2’); (‘’,3,’Nintendo 64’); (‘’,3,’Dreamcast’); (‘’,3,’X-Box’);

The question table can then be populated with a few sample questions: insert into question values (1,’The Best Computer’, ‘There is only a single computer that was released in Y2K that is worth ➥ buying. What is that computer?’,1); insert into question values (2,’A Sour Fruit’, ‘If you were holding a party and you wanted to have fresh fruit, what fruit wouldnt you want to serve?’,8); insert into question values (3,’Video Game Consoles’, ‘In the 2000-2001 video game marketplace, there is a single gaming console that doesnt belong. Which is it?’,12);

19

552

Day 19

Note

Notice that in the sample data, there are only three questions and four different answers per question. The system is created to handle any number of questions or answers. In fact, each of the questions can have an arbitrary number of answers. You can easily move from multiple choice questions, for example, to true and false. Also, the questions and answers are based on the preferences of yours truly.

Now, some users. Let’s enter a few users into the user database so that they can log in to the system and complete the quiz: insert into user values (‘jray’,’johnpass’,’student’); insert into user values (‘vuj’,’snaffle’,’student’); insert into user values (‘doorknob’,’thedoor’,’teacher’);

So, we’ve got everything set for the program! We’ve got the database setup so that the user can log in, and the program can list the questions and possible answers. That’s everything, right? Login… questions… answers… Is anything missing? Yes. You’d better believe something is missing. Although the application will certainly be able to check logins and ask questions, what in the world is it going to do with the answers that the user gives? We’ve forgotten one of the most important parts of the program—the storage of the user responses. Without this information, it’s going to be very difficult to track how the user did on the quiz. The user response table is simple to build—all we need to do is track the username and the ID of the response that they’ve chosen for a given question. create table response ( username varchar(50) not null, answerID int not null, questionID int not null, primary key (username,questionID) )

One of the hardest parts of this lesson is the calculation of the number of correct responses the user has made. Before we start building the pages themselves, let’s figure out exactly how this process is going to take place. As I’ve said all along, before you start building the site, you should have a good grasp on how it’s actually going to work. Let’s insert some information into the response table: insert into response values (‘jray’,1,1); insert into response values (‘jray’,2,7); insert into response values (‘jray’,3,12);

Advanced Techniques: Testing and Educating Online

553

This sample data assumes that the user ID 1 has answered all three questions—two of them correctly and one of them incorrectly. Now, how can we determine the number of responses that the user has given that are correct? We can use a bit of clever SQL, that’s all: select * from response,question where response.username=’jray’ AND response.answerID=question.answerID AND ➥response.questionID=question.questionID;

This statement, when executed, returns a set of records that contain all the responses the user entered that are correct. For example: mysql> select * from response,question where response.username=’jray’ AND response.answerID=question.answerID AND ➥response.questionID=question.questionID \G *************************** 1. row *************************** username: jray answerID: 1 questionID: 1 questionID: 1 questionTitle: The Best Computer questionText: There is only a single computer that was released in Y2K that is ➥ worth buying. What is that computer? answerID: 1 *************************** 2. row *************************** username: jray answerID: 12 questionID: 3 questionID: 3 questionTitle: Video Game Consoles questionText: In the 2000-2001 video game marketplace, there is a single gaming console that doesnt belong. Which is it? answerID: 12 2 rows in set (0.04 sec)

To look up the incorrect responses in the database, you can just invert the test condition “response.answerID=question.answerID”. The new “incorrect response” query becomes mysql> select * from response,question where response.username=’jray’ AND response.answerID!=question.answerID AND ➥response.questionID=question.questionID \G *************************** 1. row *************************** username: jray answerID: 7

19

554

Day 19

questionID: 2 questionID: 2 questionTitle: A Sour Fruit questionText: If you were holding a party and you wanted to have fresh fruit, what fruit wouldnt you want to serve? answerID: 8 1 row in set (0.00 sec)

These two pieces of SQL, coupled with the “[total records]” UltraDev parameter will give you the ability to display the total number of responses that were correct and what they were. It can also do the same thing for the responses that are not correct. This should be everything that we need to get started. The rest of the process will be handled in the UltraDev application itself. The final design of our UltraDev database is shown in Figure 19.2 FIGURE 19.2

user

We’ll need answers, responses, and questions for this online testing application.

username* password

Response answer answerID* questionID answerText

username* answerID* questionID*

question questionID* questionTitle questionText answerID

Let’s start building! Be sure to set up your database and server connection.

Building the Login Screen As we mentioned earlier, the testing screen is the primary screen for handling the interactions with the user. It is not, however, the first screen that we need to build. In order to store the information that a user enters on the Web site, the system must first know who the user is. This needs to be a somewhat secure system, so we’ll build this login system using Macromedia’s authentication routines and the MM_Username session variable that you’ve seen in previous chapters.

Advanced Techniques: Testing and Educating Online

555

There’s nothing special about this login screen. All we really need is a username and a password prompt. Go ahead and design a basic screen now. Be sure to name your username and password fields appropriately, as well as the form they are contained in. Because this is the first page the user will need to go to, I’m naming my document index.asp. A sample login screen is shown in Figure 19.3. FIGURE 19.3 The login screen doesn’t need to be anything fancy.

The real work of authentication comes into play when you add the Log In User server behavior to verify a user account. This will check to make sure that a username and password combination is valid and redirect the browser based on the outcome: 1. Open the Server Behavior palette. 2. Click the + button and choose Log In User from the User Authentication submenu. 3. Choose the form you create as well as the username and password fields. 4. Select your database connection and the table and fields within it that will be matched to the fields in your form. 5. If the login succeeds, send the user to quiz.asp. Otherwise, he should go to an error screen such as badlogin.asp. 6. Choose to restrict access based on the Username, Password, and Access Level option. 7. Select the userlevel field as the database field to retrieve the user’s access level from. The final configuration should look very much like Figure 19.4. With the server behavior defined as shown in Figure 19.4, we can go ahead and create the badlogin.asp page to provide error messages if the username and password are incorrect.

19

556

Day 19

FIGURE 19.4 Match the username and password fields from your login form with the database fields to create a working authentication system.

The badlogin page doesn’t need to be anything fancy—just an error message with a link back to the login screen so that the user can try again. Depending on your application, you might want to provide a warning message for unauthorized users. A sample screen is seen in Figure 19.5. FIGURE 19.5 Provide an error message for the user as well as a link back to the login screen.

That’s all we need for the login pages. Before moving on, however, let’s go ahead and add in the session variable into the data bindings so that we can access the current username from anywhere in the site: 1. Open the Data Binding palette. 2. Click + and choose Session Variable. 3. Type in the name of the Macromedia authentication session variable MM_Username, as shown in Figure 19.6. 4. Click OK.

Advanced Techniques: Testing and Educating Online

557

FIGURE 19.6 Enter the name of the session variable to track.

Tip

Remember, you can define a session variable anywhere in your site and access it from anywhere else. The session variable is active until the user starts a new browser session (quits and restarts the browser). Of course the user must have cookies enabled for this site to work—if he doesn’t, the site will be unable to figure out who has logged in.

Creating the Quiz Form The quiz form is the hardest portion of the program to implement, and is obviously the most important. Before getting started, let’s take a few minutes to figure out exactly what we need to do and how we’re going to do it. This page is actually very similar to some of the pages you’ve created before. So, what exactly does the quiz.asp portion of the site need to do? It must perform the following: • Maintain the user login information—We’ve tested to see if a user should be able to access a Web site, but we need to do this throughout the entire site. This will be the last feature we add to the page—but one of the most important. If the user is able to access the page without a login and password, he can preview the questions and cheat. • Ask questions—Obviously. The purpose of the site is to create an online quiz, but there are a few things that make this slightly confusing. For example, there are an arbitrary number of responses to a question—all these need to be displayed. Additionally, the responses need to be stored. • End the quiz—Because we aren’t just browsing back and forth between records, what happens when the user reaches the last question? The system must be able to tell when the quiz is done and react appropriately. So, how are we going to handle these requirements? Let’s figure out how the quiz page is going to work before we start building it. The most important part of the quiz is asking the questions—so how do we accomplish this? We create a basic catalog system that contains questions instead of products. Imagine the product catalogs that we’ve already developed, but with a forced browsing sequence rather than a full catalog system.

19

558

Day 19

In fact, the question system is actually a crippled form of the catalog system—no searching, no browsing, and so on. The questions for each page are generated based on the question ID that is being shown. This is accomplished simply by using a database driven pop-up menu. Navigation through the questions is allowed, but only in one direction. Another thing that might not be completely obvious is the answering of the questions. On most of the pages, we’ve seen the information presented as static data. There is absolutely nothing dynamic about the site. In the case of the quiz, the data that is displayed for each of the questions is actually generating a portion of a dynamic form. The form consists of the pop-up menu containing the question answers and a submit button. When a form is submitted, the system must store the answer in a database for future use by the administrator. Finally, we’ll use hidden regions (basically a “Hide Region” behavior, written by hand) to implement a few features of the quiz screen. For example, when the quiz ends, the user will be notified by a hidden region (it remains hidden until the user reaches the last record). At the same time, the entire page needs to be hidden if the user hasn’t correctly logged into the system. Let’s go ahead and start creating the quiz screen. We won’t be adding all the functionality at once, so just get a basic screen design in place for now. Figure 19.7 shows my basic quiz.asp screen. FIGURE 19.7 Set up your basic quiz screen now.

The first step in hooking up the quiz screen is connecting to the database. We need to develop a recordset for the page. We’re actually in a good spot here—the recordset for the questions is a simple query: “SELECT * FROM question”. Set up your recordset as a simple query, similar to the one shown in Figure 19.8.

Advanced Techniques: Testing and Educating Online

559

FIGURE 19.8 The question recordset is a simple query of all question records.

Drag the question title to a general heading area (it is meant to contain the question name—you could potentially use this field later to create custom quizzes on a specific topic rather than using all the questions in the database). Next, insert the question text into the document as well. This is one of the few instances in which we don’t need to use a repeating region to view all the different questions in the database. When the recordset is defined and the record fields are inserted into the document, they refer to the current record in the database. Because only one question can be onscreen at a time, this is all that we need.

Skipping Questions What we do need to add, however, is a Move To Next record behavior. This will enable a user to skip questions that he doesn’t want to answer. Rather than adding a skip question answer into the database, we can actually give the user the option of not supplying any answer at all. To add this function, perform the following steps: 1. Make sure that you have a Skip Question link in your document. 2. Select this link. 3. Open the Server Behavior palette. 4. Click the + button and add the Move To Next Record behavior to the document. 5. Choose the link and the appropriate recordset, as shown in Figure 19.9.

Note

I know I’ve said this repeatedly, but just in case you forgot—you need to add a form to the document. Before going any further, make sure that you have a form in place to handle the Submit Response button as well as the soon-to-be-placed answer pop-up menu. I’ve named my form saveResponse because that’s what its function is going to be.

19

560

Day 19

FIGURE 19.9 Add the ability to skip a question.

Dynamic Answers The next step in setting up the quiz screen will be creating the answer pop-up menu. In order to do this, you’ll need to create an advanced query based on the answer table of the database. Unfortunately, you’ll need to do some of this by hand. The SQL to select the answer we need is something similar to this: SELECT * FROM answer WHERE questionID=<whatever question we’re currently viewing>

You can begin to set up this functionality by following these steps: 1. Drag the questionID from your existing question recordset into the document design view. This will give us the ASP code for referring to the questionID of the currently displayed question. 2. Add a new recordset to the document. You should be in Simple mode. 3. Set up the recordset to a simple query of the answer table—”SELECT answer”.

* FROM

After you’ve added the recordset, go through the process of setting up a pop-up menu that is driven from this recordset. It is very important you do this now, rather than after we tweak the recordset: 1. Insert a pop-up form element into the document wherever you want. This element will contain all the answers in the answer table. 2. Open the Server Behavior palette. 3. Click the + button and choose Dynamic List/Menu from the Dynamic Elements menu. 4. Set the recordset to the answer recordset that currently contains all the answers in the database. 5. The Menu field should be set to the form’s pop-up menu that you added to the system. 6. Labels should be retrieved from the answerText field. 7. Values for the elements in the pop-up field should be set to the answerID field. Click OK after configuring the behavior completely, as seen in Figure 19.10.

Advanced Techniques: Testing and Educating Online

561

FIGURE 19.10 Configure the pop-up menu so that it is generated dynamically from the answer recordset.

Now, you need to get your hands dirty again. Open up the source code and look for this section of code: <% set rsQuestion = Server.CreateObject(“ADODB.Recordset”) rsQuestion.ActiveConnection = MM_connChapter19_STRING rsAnswer.Source = “SELECT * FROM answer” rsAnswer.CursorType = 0 rsAnswer.CursorLocation = 2 rsAnswer.LockType = 3 rsAnswer.Open rsAnswer_numRows = 0 %>

This is what handles generating the recordset that will then be used to create the pop-up menu. What we have to do is modify the SQL so that it includes the condition of looking for the questionID currently being viewed. If you dragged the questionID field from the main question recordset into the document design view, you should be able to find the code that represents the questionID on your page. It resembles this on my Web page: <%= rsQuestion.Fields.Item(“questionID”).Value %>

The value rsQuestion.Fields.Item(“questionID”).Value is what we’re after. Go ahead and copy this value, and then remove the ASP tag you got it from. Edit the recordset code so that it resembles this: <% set rsQuestion = Server.CreateObject(“ADODB.Recordset”) rsQuestion.ActiveConnection = MM_connChapter19_STRING rsAnswer.Source = “SELECT * FROM answer WHERE questionID=’” & rsQuestion.Fields.Item(“questionID”).Value & ➥”’” rsAnswer.CursorType = 0 rsAnswer.CursorLocation = 2 rsAnswer.LockType = 3 rsAnswer.Open rsAnswer_numRows = 0 %>

19

562

Day 19

With the additional condition added to the code, the recordset will now select only the answers that are appropriate for the question at hand. Unfortunately, there’s still a problem with this recordset—it is created before the questionID value is available. If you leave this code block in the program where it is currently located, it will not function properly. Instead, you must move it to the bottom of the ASP code—directly above the HTML. When the code is moved to the end of the other ASP procedures, the questionID value is available and useable.

Caution

No harm exists in editing the embedded code on the server pages, but there are some side effects. After you edit the code manually, don’t expect to always be able to edit it via the standard server behavior configuration dialogs. Furthermore, if you do open a modified recordset (or other behavior) in the server behavior editor, you’re likely to break the code that you added. Finally, additional code might also prevent you from being able to correctly delete the server behaviors. As a precautionary action, you might want to backup your Web page before modifying any of the behaviors by hand. It’s a good thing I mentioned this now, huh?

At this point, the page should be ready for a casual inspection of functionality. You should be able to do three things with the current pages: • Browse the available questions. • View the appropriate answers for each of the questions. • Skip a question. Be sure to test these functions before continuing. If anything is not working, go back through the steps that we’ve completed so far and make sure that you’ve followed the steps completely. If we add additional functionality before correcting any errors, it’s only going to lead to confusion later when you try to debug the system.

Saving the Response The most important part of the quiz system is saving the user’s response back into the database. This is what we will deal with next. With this part of the system out of the way, all we’ll need to do is work on the administrative screens, which is a bit more fun because they aren’t “mission critical” to the application. So, how are we going to save the response? The form is already set up, but the data isn’t all accessible.

Advanced Techniques: Testing and Educating Online

563

To refresh your memory, here is the structure of the response table: create table response ( username varchar(50) not null, answerID int not null, questionID int not null, primary key (username,questionID) )

Before values can be inserted into this table, it needs to be defined as a recordset. Do this now. Set up a simple “rsResponse” query that selects all the fields in the response table, as shown in Figure 19.11. Although we won’t be querying this recordset now, it is necessary for the Insert behavior. FIGURE 19.11 The response recordset must be defined in order to use the Insert action.

The form that we’ve created has the questionID in it, but what about the username and the answerID? You can add these values to the response in two ways—either by accessing the answerID (as you did earlier) and adding it directly to the insert statement, or by using a hidden field. Likewise, the session variable containing the username could be added directly to the insert statement. Because we’ve seen how to do this before, we’ll leave this as an exercise to be completed later. For the sake of getting the show on the road, let’s just store these values in hidden fields in the existing form. Add two hidden fields to your document—”questionID” and “username”. Next, you’ll need to provide the values for these fields to take on. You can do this by editing the field attributes as we have in the past or by directly inserting the fields into the HTML, as follows: ”> ”>

This will handle getting all the field variables filled in that we need for the response form. So… we’re ready to add the Insert Record server behavior:

19

564

Day 19

1. Open the Server Behavior dialog. 2. Click + and choose Insert Record. 3. Choose the Response recordset and match up each of the form fields with the table fields, as demonstrated in Figure 19.12. Don’t worry about the Go to URL field— leave it blank. FIGURE 19.12 Create the behavior that adds the response to the database.

Now comes the tough part. The Insert Record behavior has a feature that we don’t want to inherit in our code. By leaving the “Go To URL” field blank when inserting a record, we tell UltraDev to send the user back to the quiz page. Unfortunately, if it does this, it will go to the first record—the current record number is not maintained. Getting around this issue means editing the embedded source code to switch around and disable some functionality. The problem exists of not moving to the new record when the form is submitted. The answer to this quandary is found by looking at the SKIP QUESTION link that is currently in the document: ”>SKIP QUESTION

If we use the “<%=MM_moveNext%>” code in place of the current form action, the page will move to the next record, the same as the SKIP QUESTION link. Go ahead and edit the beginning of your form so that it looks something similar to this:

”>

Advanced Techniques: Testing and Educating Online

Tip

565

If you don’t want to manually edit the HTML, you can just select the form, open the Properties palette, and change the form’s action to be “<%=MM_moveNext%>”.

Try the page again; the program should work exactly as we want.

Note

Earlier versions of UltraDev would try to redirect the browser if the Go To URL field was left blank—this usually resulted in an error message. In order to get around this in UltraDev 1.0, it was necessary to manually edit the code and comment out the UltraDev-added redirection statements.

Measuring Correct Responses (Optional) While the user is taking the test, he’s building up a table of information containing all his responses. These answers could be used at anytime to determine the number of correct responses the user has given. Providing this information to the user might be a good thing, depending on how you view online testing. If you do want to add this information to your testing page, this is the section for you. If not, go ahead and skip ahead to the next chapter. Remember that earlier we came up with this SQL to display a list of the number of correct user responses: select * from response,question where response.username=’jray’ AND response.answerID=question.answerID AND ➥response.questionID=question.questionID;

This is the code that we’ll need now. Using this SQL and the MM_Username session variable, we can display real-time scoring within the quiz.asp page. Add a new recordset to the system to get things rolling: 1. Create a new recordset from the Server Behavior palette. 2. Switch to the advanced query mode. 3. Define a new rsCorrect recordset that will contain all the valid user responses. 4. Enter “select

* from response,question where

response.username=’varUsername’ AND response.answerID=question.answerID AND response. questionID=question.questionID”

into the SQL definition.

19

566

Day 19

5. Add a new UltraDev variable named “varUsername” with a runtime value of ‘Session(“MM_Username”). 6. Click OK. Figure 19.13 shows the completed recordset. FIGURE 19.13 Define this advanced query in order to calculate the number of correct responses for the current user.

In a perfect world, we’d be ready to run as soon as we dragged the “[total records]” field from the new recordset into the design view, but in this perfect world, we’d also all have PowerMac G4 cubes and 22-inch cinema displays as well. As we’ve seen from past experiences, UltraDev is not perfect. It’s pretty darn good, but not perfect. If you attempt to use the “[total records]” value on your page, you’ll receive an error message. In fact, if you attempt to do much of anything with your newly defined recordset, you’ll see that it is pretty much broken completely. The reason lies in what we’ve already done in this chapter. Earlier, when we manually repositioned code inside of UltraDev, it became slightly confused. The new recordset that we added has been defined at the bottom of the embedded code, whereas its supporting functions are defined near the middle. All we need to do is find the offending block of code and move it to the correct location. Open up your document’s source code and look for this block: 1 2 3 4 5

% Dim rsCorrect__varUsername rsCorrect__varUsername = “jray” if (Session(“MM_Username”) <> “”) then rsCorrect__varUsername = Session(“MM_Username”)

Advanced Techniques: Testing and Educating Online

567

6 %> 7 <% 8 set rsCorrect = Server.CreateObject(“ADODB.Recordset”) 9 rsCorrect.ActiveConnection = MM_connChapter19_STRING 10 rsCorrect.Source = “SELECT * FROM response,question 11 WHERE response.username=’” + Replace(rsCorrect__varUsername, “‘“, “‘’”) ➥ + “‘ 12 AND response.answerID=question.answerID 13 AND response.questionID=question.questionID” 14 rsCorrect.CursorType = 0 15 rsCorrect.CursorLocation = 2 16 rsCorrect.LockType = 3 17 rsCorrect.Open() 18 rsCorrect_numRows = 0 19 %>

You should be able to locate it near the start of the main HTML body of your page. This defines the rsCorrect recordset that you created earlier. Select everything in this block, including the delimiting “<% %>” characters. You’ll want to find the rest of your recordsets in the document and paste them somewhere in the block of the recordsets already defined. You should end up with something that looks as follows: 1 <% 2 set rsQuestion = Server.CreateObject(“ADODB.Recordset”) 3 rsQuestion.ActiveConnection = MM_connChapter19_STRING 4 rsQuestion.Source = “SELECT * FROM question” 5 rsQuestion.CursorType = 0 6 rsQuestion.CursorLocation = 2 7 rsQuestion.LockType = 3 8 rsQuestion.Open() 9 rsQuestion_numRows = 0 10 %> 11 <% 12 set rsResponse = Server.CreateObject(“ADODB.Recordset”) 13 rsResponse.ActiveConnection = MM_connChapter19_STRING 14 rsResponse.Source = “SELECT * FROM response” 15 rsResponse.CursorType = 0 16 rsResponse.CursorLocation = 2 17 rsResponse.LockType = 3 18 rsResponse.Open() 19 rsResponse_numRows = 0 20 %> <% 21 Dim rsCorrect__varUsername 22 rsCorrect__varUsername = “jray” 23 if (Session(“MM_Username”) <> “”) then 24 rsCorrect__varUsername = Session(“MM_Username”) 25 %> 26 <%

19

568

Day 19

27 set rsCorrect = Server.CreateObject(“ADODB.Recordset”) 28 rsCorrect.ActiveConnection = MM_connChapter19_STRING 29 rsCorrect.Source = “SELECT * FROM response,question 30 WHERE response.username=’” + Replace(rsCorrect__varUsername, “‘“, “‘’”) ➥ + “‘ 31 AND response.answerID=question.answerID 32 AND response.questionID=question.questionID” 33 rsCorrect.CursorType = 0 34 rsCorrect.CursorLocation = 2 35 rsCorrect.LockType = 3 36 rsCorrect.Open() 37 rsCorrect_numRows = 0 38 %>

The recordsets shown here are the question (1-10), response (12-20), and the newly generated correct response (20-38) recordset. If you skipped around in the chapter, your definitions might not be in the same place, but it should be pretty similar. Now things are ready to go. Go ahead and add a “[Total Records]” field to your design view—this will be the count of correct responses that the user has entered. Congratulations! You’ve managed to implement one of the trickier parts of the system.

Ending the Quiz We’ve gotten the system to the point where the user can work his way through the quiz material until the last question. Unfortunately, after he answers the last question, there’s nothing left for him to do but keep answering it (which is impossible because he already have a response for that question). In order to end the quiz, we need to use a Hide Region behavior that has been modified just a bit. We also need to add yet another recordset to the document. This recordset will contain all the given user’s responses—when we compare this number to the total number of records in the database, we can tell if the user has answered all the questions. Let’s go ahead and add this recordset to the document. I promise this is going to be the last recordset we have on this page. Add the recordset as follows: 1. Add a new recordset server behavior. 2. Switch to simple mode if you aren’t there already. 3. Name the new recordset rsResponseAll because it will contain all the responses. 4. Configure the query to select everything from the response table of the database.

Advanced Techniques: Testing and Educating Online

569

5. Filter the query based on the username column of the table being equal to the session variable MM_Username. 6. Click OK. This recordset definition is shown in Figure 19.14. Yours should look similar, if not the same. FIGURE 19.14 Define your recordset as seen here.

Now, once again, UltraDev has added this server behavior into the wrong area of the document. If you read the last optional section, you know this is because we’ve manually edited the code and confused UltraDev—if you didn’t read it, now you know. Look in your HTML source code for the region that defines your new recordset: 1 <% 2 Dim rsResponseAll__MMColParam 3 rsResponseAll__MMColParam = “0” 4 if (Session(“MM_Username”) <> “”) then 5 rsResponseAll__MMColParam = Session(“MM_Username”) 6 %> <% 7 set rsResponseAll = Server.CreateObject(“ADODB.Recordset”) 8 rsResponseAll.ActiveConnection = MM_connChapter19_STRING 9 rsResponseAll.Source = “SELECT * FROM response 10 WHERE username = ‘“ + Replace(rsResponseAll__MMColParam, “‘“, “‘’”) + “‘“ 11 rsResponseAll.CursorType = 0 12 rsResponseAll.CursorLocation = 2 13 rsResponseAll.LockType = 3 14 rsResponseAll.Open() 15 rsResponseAll_numRows = 0 16 %>

Chances are that this code is located near the top of your HTML. Select this code fragment (including the enclosing tags) and move it so that it falls near the top of the document—by the other recordset definitions. You should end up with a section that resembles this:

19

570

Day 19

1 <% 2 set rsQuestion = Server.CreateObject(“ADODB.Recordset”) 3 rsQuestion.ActiveConnection = MM_connChapter19_STRING 4 rsQuestion.Source = “SELECT * FROM question” 5 rsQuestion.CursorType = 0 6 rsQuestion.CursorLocation = 2 7 rsQuestion.LockType = 3 8 rsQuestion.Open() 9 rsQuestion_numRows = 0 10 %> 11 <% 12 set rsResponse = Server.CreateObject(“ADODB.Recordset”) 13 rsResponse.ActiveConnection = MM_connChapter19_STRING 14 rsResponse.Source = “SELECT * FROM response” 15 rsResponse.CursorType = 0 16 rsResponse.CursorLocation = 2 17 rsResponse.LockType = 3 18 rsResponse.Open() 19 rsResponse_numRows = 0 20 %> <% 21 Dim rsCorrect__varUsername 22 rsCorrect__varUsername = “jray” 23 if (Session(“MM_Username”) <> “”) then 24 rsCorrect__varUsername = Session(“MM_Username”) 25 %> 26 <% 27 set rsCorrect = Server.CreateObject(“ADODB.Recordset”) 28 rsCorrect.ActiveConnection = MM_connChapter19_STRING 29 rsCorrect.Source = “SELECT * FROM response,question 30 WHERE response.username=’” + Replace(rsCorrect__varUsername, “‘“, “‘’”) ➥ + “‘ 31 AND response.answerID=question.answerID 32 AND response.questionID=question.questionID” 33 rsCorrect.CursorType = 0 34 rsCorrect.CursorLocation = 2 35 rsCorrect.LockType = 3 36 rsCorrect.Open() 37 rsCorrect_numRows = 0 38 %> 39 <% 40 Dim rsResponseAll__MMColParam 41 rsResponseAll__MMColParam = “0” 42 if (Session(“MM_Username”) <> “”) then 43 rsResponseAll__MMColParam = Session(“MM_Username”) 44 %> <% 45 set rsResponseAll = Server.CreateObject(“ADODB.Recordset”) 46 rsResponseAll.ActiveConnection = MM_connChapter19_STRING 47 rsResponseAll.Source = “SELECT * FROM response 48 WHERE username = ‘“ + Replace(rsResponseAll__MMColParam, “‘“, “‘’”) + “‘“ 49 rsResponseAll.CursorType = 0 50 rsResponseAll.CursorLocation = 2

Advanced Techniques: Testing and Educating Online

51 52 53 54

571

rsResponseAll.LockType = 3 rsResponseAll.Open() rsResponseAll_numRows = 0 %>

This includes the optional recordset to show the number of correct responses in the document. Your source code might be missing this last recordset definition if you decided to forego the correct response section. Two more steps need to be taken before we can finish the hidden region we need to create to end the quiz. Open the Question recordset in the Data Binding palette and drag the “[Total Records]” field to your document. Do the same thing for the same field within your new recordset. Test the application to verify that the two numbers work correctly—one should show the total number of questions, whereas the other is the total number of responses given. UltraDev adds special code to calculate the total number of records in the recordset, and having these elements in your document will make sure that the supporting code is generated. If everything looks correct in the test run, you’re ready to add a final hidden region. Because no server behavior can actually perform the action we want, you can simply add the behavior by hand. What we want to do is compare the variables that containing the total number of records in the Question recordset and the All Responses recordset: “rsQuestion_total” and “rsResponseAll_total”, respectively.

Note

You might have to adjust variable identifiers if you named your recordset differently. Using the dynamic “Total Record” elements you added to the document, you should be able to find what these names should be.

When these two values are not equal, the quiz should be displayed. When they are equal, the document should show a “Your quiz is finished” message to the user. To do this, simply add an If Then statement around the code you want to hide: <% If rsResponseAll_total <> rsQuestion_total Then %> … <% End If %>

19

572

Day 19

This checks to see if the number of responses is equal to the number of questions. If they aren’t equal, the quiz is shown. When they are equal, the quiz is over and the HTML between the If and End If statements is hidden. Similarly, add the “Your

quiz is finished”

code using a condition similar to this:

<% If rsResponseAll_total = rsQuestion_total Then %> Congratulations! You’ve finished the quiz! <% End If %>

Obviously, you can put anything you want inside these regions. Finish up the HTML code for this area of the quiz, and you’re done! This is certainly a complicated screen, but you’ve made it through.

Note

In adding this last bit of functionality, we’ve actually added a rather nice feature to the source code. Because the quiz isn’t done until the number of responses equals the number of questions, the user can always come back to the page and complete the questions that he’s previously skipped. He cannot, however, submit a new response to a question that he previously answered. Using the questionID and username as the primary key has ensured that only one response can exist for any given user in the system.

Protecting the Quiz To protect the quiz screen, you must apply the Restrict Access To Page server behavior. Open up the Server Behavior palette and follow these steps to limit access to your page: 1. Click + in the server behavior palette, and choose Restrict Access To Page from the User Authentication menu. 2. Choose to restrict access based on the Username, Password, and Access Level. 3. Define two access levels, student and teacher, by clicking the Define button and using the + button to add the new levels. 4. Restrict access to both the student and teacher levels—this means that anyone can take the quiz—even someone with teacher-level access. 5. If access is denied, send the user back to the login page. In this case, index.asp. 6. When finished, the behavior should be configured much like that of Figure 19.15. Click OK to finish the definition.

Advanced Techniques: Testing and Educating Online

573

FIGURE 19.15 Restrict access to the page based on username, password, and access level.

To provide easy access to the administration section, you might want to create an Admin link from within the quiz.asp document that links to the administrative section you’re about to create (admin1.asp)—otherwise administrators will have to enter the URL by hand.

Administrative Access We’re finally ready to wrap up today by creating the administrative interface to enable the test administrator to easily view the score of anyone who took the test. This will only take a second (or an hour, depending on the accuracy of your clock). The first screen you need to develop is a simple form where you can enter a user’s name to look up information. You need a single field username and a submit button, that’s all. This page will not have any server behaviors—aren’t you happy to finally have something “light” to work on? A sample screen for handling this function is shown in Figure 19.16. FIGURE 19.16 The first screen of the administrative back end is extremely simple.

19

574

Day 19

I’ve named the username field on my copy of the form username—if you want to follow the example exactly, I suggest that you do the same. The form’s action is set to the second administrative page—admin2.asp on my machine.

Creating the Results Screen After you’ve finished the first admin page, create the second page. Make sure that you name this page the same thing as your form action value on the first page. Before you can design this screen, you need to create two recordsets. These queries will generate lists of the correct user responses and the invalid user responses. We already have a query that does this: select * from response,question where response.username=’varUsername’ AND response.answerID=question.answerID AND response.questionID=question.questionID;

For incorrect responses, the SQL is very similar; only the comparison between “response.answerID” and “question.answerID” needs to change: select * from response,question where response.username=’varUsername’ AND response.answered!=question.answerID AND response.questionID=question.questionID;

Go ahead and design a rsCorrect and rsIncorrect recordset now: 1. Open the Server Behavior palette. 2. Click + and choose the Recordset behavior. 3. Switch to the Advanced query mode if you aren’t currently there. 4. Add the recordset name and query for the first Correct recordset. 5. Define an UltraDev variable varUsername with the runtime value of “Request(“username”)”—assuming that “username” is the name of the field you’re submitting from the first administrative form. 6. Click OK. 7. Repeat this process for the Incorrect recordset. Figure 19.17 shows the query definition for the recordset containing correct responses. Now you can design your results page using the two recordsets you’ve defined. The “[Total Records]” field can be used to show the total number of responses that are correct, or the total number that are wrong (depending on if you insert them from the Correct or Incorrect recordset, obviously).

Advanced Techniques: Testing and Educating Online

575

FIGURE 19.17 Define both of your recordsets for this page based on this model.

It would be helpful to show the actual question titles that the user got right or wrong. You can add this feature to your page by dragging the fields you want to your document design view, and then applying a Repeat Region server behavior to the fields. My final administrative summary screen is shown in Figure 19.18. FIGURE 19.18 Add the features and information you want to the administrative summary screen.

As a last step, follow the same sequence you used to protect the quiz.asp file to restrict access to the administrative screens—admin1.asp and admin2.asp: 1. Open the Server Behavior palette. 2. Click + and choose Restrict Access To Page from the User Authentication submenu.

19

576

Day 19

3. Configure the restriction to base access on Username, Password, and Access level. 4. Restrict the access level to teacher only. This will prevent students from looking up scores and answers. 5. If the login is incorrect, send the user back to the login page (index.asp in this case). 6. Click OK when finished. That’s it. That’s all there is for this one. You have more than enough experience to extend this example to a full-blown testing system, or use it as is.

Summary Today’s exercise created an application with some unique features that we haven’t seen before in an UltraDev application. For example, bypassing the Go To URL behavior after a data insert is performed. This is just one of many modifications we made to the code today. By the end of the quiz screen, I’m sure that you were painfully aware of the number of custom modifications we made. Unfortunately, all the modifications weren’t for free. In adding custom code and altering the automatically generated material, we “killed” UltraDev’s capability to deal with the page. After we manually changed the code, UltraDev began adding behaviors in the wrong places, and we had to move things around a little bit. UltraDev, of course, can’t read our minds, so it does the best it can. Even with the problems we saw today, it is still light years ahead of its competitors. On a final thought, I want to point out that today’s project, although a working system, is definitely open for expansion. A full testing site could include actual education material that is presented before the tests, and so on. Feel free to expand on what we’ve created today to fit your own educational or recreational applications.

Q&A Q The quiz’s security…how secure is it? A It’s secure to the point of handling the questions correctly, but it has the problem of allowing a user to potentially fake his identity by changing the username within the form. If you’re security minded, you should replace the hidden field submitted with this value so that it is handled entirely by the MM_Username session variable.

Advanced Techniques: Testing and Educating Online

577

Q What is the difference between using a Go To URL function and skipping the page redirection altogether? A If we had just redirected to the same page we were on when setting up the insert behavior function, the result would have been moving back to the top of the question stack. When redirecting to the URL, the current recordset offset is not passed along, and the quiz would start at the beginning. Q What happens if the user answers a question that he has already answered? A The system fails because only a single record can exist for a user. Take a look at the exercise section for a tip on how to fix this problem. Q Could multiple tests be held in a single database? A Yes, actually. If you decided to use the question topic as attribute of the main question query, you could limit the topics of the quiz. You could also expand the database so that an additional category field can be used as an attribute to select questions.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. Why did we have to bypass the Go To URL behavior that is inherent to the Insert Record behavior? 2. How is security of the administration section handled? 3. Why did you have to move code around manually in this chapter? 4. How did we hide a region without a Hide Region behavior? 5. Because there isn’t a server behavior to handle hiding a region when the quiz is done, how did we accomplish this amazing feat?

Exercises 1. The program, in its current state, will fail if the user tries to answer a question more than once. The optimal way to handle this is to only display questions that do not have a corresponding user response. Go ahead and modify your SQL so that it works in this manner.

19

578

Day 19

2. Add an administrative front end to the question and answer section. This should be a matter of creating a few simple insert pages and tying them together, but it will create a friendlier system for the people running the tests. 3. Fix the security problem with the username being accessible on the quiz form. You can do this by using “Session(“MM_username”)” directly when the data is being stored for a particular question.

WEEK 3

DAY

20

Advanced Techniques: E-Commerce Solutions What do you use your Internet access for? Browsing news and information? Investing online? No matter who you are, you’ve probably used your Internet account to purchase something online. If you own a business, you’ve almost certainly placed your products and services online—if not, you should. E-commerce is changing the way the world does business. Today’s lesson will expand upon the catalog system that we developed in Day 13, “Advanced Components: Catalogs, Searches,” by adding a shopping cart system. This presents several unique challenges that will have to be overcome in order to create a functional system. Today, you will learn • How to maintain individual user shopping carts. How do you keep track of a few thousand users, all with separate orders? • How to create an interactive cart that allows items to be removed as well as added. • How to retrieve stored user profiles to automatically fill out shipping/billing information when the order is completed.

580

Day 20

The Simply Complex Think of an e-commerce site. Think of the interactions that users have with the system. They’re relatively uncomplicated. The users browse through a catalog, find products to buy, and then click a purchase button. When they’ve finished shopping, they proceed to the checkout and complete their orders. The steps are simple, but the backend isn’t as straightforward. When a user adds an item to her cart, where does that item go? The information must be transmitted back to the server and stored in one form or another. But how is it stored? How can you ensure that an order doesn’t get mixed up with other user’s orders?

Note

In all fairness, there are shopping cart systems that do not rely on the server to maintain the contents of the cart. In fact, some systems are written entirely in JavaScript. Although this is a helpful solution for people who have no access to server-side processing, it is a less than desirable way to put an e-commerce site online. JavaScript is fine when it works, but with more people turning to alternative browser solutions such as Opera and iCab, there is no guarantee that it will. Keeping the important processing on the server ensures full client compatibility.

Traditionally, there are several approaches to handling the shopping cart dilemma. Two of the techniques employed by commercial software packages are discussed in the next two sections.

Shopping Based on a Session ID For one method, the shopping cart is keyed to a particular session ID stored on the user’s computer. As the user adds items to the cart from the online catalog, they are stored in a table that relates the session ID to the chosen product. When it comes time to checkout, the system finally associates a session ID with the actual user information and stores it in a final order form. A drawback to this approach is that extraneous data is stored on the system, which must periodically be cleared from the system. Because a user can leave and re-enter the site at any time, the system must be able to generate multiple session IDs and multiple carts per user. This information would keep building ad infinitum until all disk space is exhausted— unless the system employs an expiration of the data. Periodically, a house-cleaning process sweeps sessions that have not turned into submitted orders from the system. This requires some back-end database programming that is beyond the scope of this book.

Advanced Techniques: E-Commerce Solutions

581

Another drawback to this approach is that some of these systems gather this session information and the user’s credit card information and store it all in one place. If the session is somehow breached, the perpetrator could essentially see all the information related to the session.

Note

Maintaining user information separate from the shopping cart information might not seem to be a big deal, but it can be. A recent shopping system that I “dissected” was based on a piece of commercial e-commerce software that stored each session in a new database table. Unfortunately, the people who had put the site together neglected to properly set the permissions of the tables as they were generated. As a result, anyone could very easily open up a person’s shopping cart by slightly modifying the URL on screen. Doing this would display everything stored in the shopping cart table—the user’s name, address, credit information, and, of course, the items that the user was buying. Needless to say, the site was immediately taken offline until the problem was fixed. If the user information had been stored in a separate, well-protected, database, this could have been avoided. A few days later, the site was brought back online and appeared to be working perfectly—until orders were placed using the wrong credit card information and a mix of products. A bug in the server’s session ID management resulted in overlaps between sessions. The server was not expiring old sessions as it should, and, instead, was allowing new users to continue shopping using old order information. You might think that this happened to a fly-by-night e-commerce site or by using an inexpensive piece of software at the backend, but in reality, the amount of money spent on site development, software, and servers easily exceeded $200,000.

User Accounts A second method of handling user information is to create user accounts on the system. Before the user can enter the virtual store to make purchases, she must register with the system. Registering creates a user account, and thus, a userID—in this case, a username. This username can then be used in place of the session ID for tracking the user on the system. Instead of maintaining a separate shopping cart based on the session ID, the system either passes the username through the URL line or via a session variable. All shopping cart transactions are placed in a master shopping cart table that records the item being purchased and the person purchasing it. The user information itself is stored in an expanded version of the login system that we’ve used in other projects.

20

582

Day 20

By taking this approach to the e-commerce site, you restrict the amount of extraneous data that you have to store by keeping all order information associated directly with a specific user rather than a session. Although there still might be “data buildup,” the rate at which it is created will be much lower. Depending on how the developer chooses to implement the site, there is also a benefit to the customer in that she can leave the site at any time and come back to her shopping cart in the state she left it. This allows her to save the order she created so that she can submit it when she actually has the funds to make the purchase. The potential drawback to this is that the user will have to login to the system before she can go shopping. This will discourage the casual shopper and might turn some off altogether.

Our “Perfect” Approach The approach we’re going to take is the perfect approach. What is this perfect option? We are going to base our e-commerce site on the second approach discussed previously. The difference, however, is in the details. The site that we’re going to create will allow a user to browse the catalog without logging in, but, when she attempts to click a button to put an item in her shopping cart, she’ll be taken to a login screen. If the user doesn’t have a login and password, she will need to fill out a short registration form. This form will add a new account to the system and a new username, which will be used to track subsequent selections in the catalog. Following this approach, you can set up a system that allows new users to browse the catalog unhindered, but, before they can make a purchase, they are forced to login or register. Logging in and registering will set a session variable to the username that can then be used to store subsequent selections in the shopping cart. Truly, this is the best of both worlds.

An E-Commerce Site Map Unlike the last exercise (surveying/quiz system)—today’s e-commerce framework will have much simpler server behaviors with less custom programming. To make up for this easier site, you’ll have to do a lot more work creating support pages. The site map is similar to the catalog system that we’ve already developed: • A Search Page for finding the right product for you • A Results page for browsing the items in the catalog • Details pages that include close-up images and the full product descriptions

Advanced Techniques: E-Commerce Solutions

583

To this list, we also need to add • A login page • A User registration screen • Error screens for both of these • A Checkout screen • Billing Information collection • Various other acknowledgement screens • Any other screens that happen to appear necessary along the way Most of the work in the system is going to be updating and inserting records in tables, so it shouldn’t be difficult to program the pages—the trick is getting it all to work together. When it all comes together, you’ll have a system that can be used as a basis for your own online store. As this is the last project in the book, you’ll notice that it draws together many of the components that we’ve already used in other projects. A reasonable representation of a site map for the e-commerce system is shown in Figure 20.1. FIGURE 20.1 This is the basic site map for the e-commerce site. SEARCH

CATALOG ITEMS

20 ITEM DETAILS

SHOPPING CART

CHECKOUT

LOGIN

REGISTRATION

584

Day 20

As we’re using portions from other days, you’ll recognize some of the material today. I’m going to summarize as much as I can in order to fit this into the amount of available space. So let’s get to work on the SQL.

The Table Definitions The SQL that we need today is based very closely on the system we created for the basic catalog system—with some important additions. We’re also going to need space to store user address/billing information as well as the contents of the shopping cart for each user. Let’s go ahead and look at what we developed on Day 13.

Product Categories Product categories are defined for each item in the catalog. An item can only fall into one category in this database model. create table tblCategory ( catID int not null, catName varchar(50) not null, primary key (catID) )

The product category table consists of a catID, which is the primary key, and a category name (catName). The ID will be stored with the catalog in order to associate each product with a category.

Catalog Items The primary product table holds the information necessary to layout all the product listings and detail screens. This is the master table for all the information that will be displayed in the catalog. create table tblProduct ( prodID varchar(10) not null, catID int not null, prodName varchar(80) not null, prodDesc varchar(250) not null, prodPrice real not null, prodSmPic varchar(80) not null, prodLgPic varchar(80) not null, primary key (prodID) );

Advanced Techniques: E-Commerce Solutions

585

The product table fields are defined as follows: • prodID—The prodID is an unique ID for the product being described. It is any unique character sequence and could be defined as an autonumber feature. • catID—The category ID that the product belongs to. • prodName—A short name for the product. • prodDesc—The longer product description. This field will be searchable in the final implementation. • prodPrice—The price for the product. The real datatype is used here to store a number with a decimal point. • prodSmPic—The URL for a small (thumbnail) picture. This image will be shown in the main product listings. • prodLgPic—The URL for a large picture. The large image is used in the detail screens of the object. If there is extra information that you want to display, you can insert it into this table. If you’re not implementing a shopping catalog, you can modify the fields to fit your application.

Related Items Related Items are often used to create “cross-sells” in online catalogs. This lets the user browse similar products and can be used to promote the sale of less visited items. create table tblRelated ( prodID1 varchar(10) not null, prodID2 varchar(10) not null, primary key (prodID1, prodID2) )

I know, I know, such naked scheming makes you feel dirty in a way, doesn’t it? Unfortunately, it’s our job to design a system that has the features that administrators might want in their shopping system, so this is definitely a good attribute to offer.

User Information Unlike the previous catalog system, we need to be able to handle user logins and storing billing and other information. This is a combination of the user preference and login systems that we’ve used before, so the table structure shouldn’t seem out of the ordinary to you: create table tblUserInfo ( username varchar(50) not null, password varchar(50) not null,

20

586

Day 20

address1 address2 city state zip primary key

varchar(100), varchar(100), varchar(100), varchar(20), varchar(15), (username)

)

This information will be used to store a basic profile for the user. It will also be used to help “seed” the checkout information so that the client won’t need to fill in a ton of information every time he goes shopping. This, however, isn’t the only information we need to store for the user. We also need to store his billing and shipping information at the time the order is placed. A second table can be created for this purpose: create table tblOrderInfo ( orderID varchar(50) not null, username varchar(50), billaddress1 varchar(100), billaddress2 varchar(100), billcity varchar(100), billstate varchar(20), billzip varchar(15), shipaddress1 varchar(100), shipaddress2 varchar(100), shipcity varchar(100), shipstate varchar(20), shipzip varchar(15), paymethod varchar(50), payaccount varchar(50), payexpire varchar(15), primary key (orderID) )

Keeping all this information in a single table allows it to change from order to order, and it keeps it away from the data that is constantly changing and being accessed. This means that the OrderInfo table is the only place we need to worry about security. Because we never read data from this table, we definitely limit the amount of ways that things could go wrong.

Tip

Feel free to include other information in either the order table or the user information table. Data such as email address, phone number, and so on might be useful for your application.

Advanced Techniques: E-Commerce Solutions

587

Shopping Cart Information The order information is the final table that we need to create. This stores all the information about the items as they are added to the cart. Because the other tables store most of the text information, this table is simply needed to relate the information together— that is, who ordered what? create table tblCart ( cartID int not null auto_increment, prodID varchar(50), username varchar(50), orderID varchar(50), primary key (cartID) )

The orderID is the only thing that might seem a bit out of place in the table. This value will be filled in after the final order is submitted. It associates order information to the items in the shopping cart.

Note

A question you might be asking yourself is why you need an orderID if you can just associate the username to the shopping cart. You could do just that, but then the user would only be able to enter a single order at a time. Having an orderID lets you differentiate between orders from a single user. For example, assume that a user wants to place five consecutive orders to five different addresses. This would be impossible if we only used the username to relate the order to the shopping cart.

That’s it for the table definitions. The final data structure is illustrated in Figure 20.2.

Caution

If you haven’t read Day 13, you should probably review it now. The SQL necessary to relate the catalog tables together is explained there in depth. The additions that we’ve made to the system are relatively straightforward and shouldn’t require additional explanation.

Go ahead and create these tables in your database system now and insert some sample data. Again, if this looks familiar, it is because it is being populated by the same data from Day 13—you’re welcome to modify it in any way you see fit. Populating the categories: insert into tblCategory values (1,’Shoes’); insert into tblCategory values (2,’T-Shirts’);

20

588

Day 20

FIGURE 20.2

tblProduct

We’ll need all these tables to build a basic shopping cart system.

prodID* catID prodName prodDesc prodPrice prodSmPic prodLgPic

tblRelated prodID1* prodID2*

tblCart cartID prodID username orderID

tblUserInfo username* password address1 address2 city state zip

tblOrderInfo orderID* username billaddress1 billaddress2 billcity billstate billzip shipaddress1 shipaddress2 shipcity shipstate shipzip paymethod payaccount payexpire

You can fill in the table with as many categories as you need or want. Next, the main product table: insert into tblProduct values (‘M001’,1,’Xtro Running shoes’, ‘A high quality running shoe. Xtro is imported from Switzerland’, 56.95,’catalogimages/M001sm.jpg’,’catalogimages/M001lg.jpg’); insert into tblProduct values (‘M002’,1,’Black Leather Dress Shoes’, ‘Great for an evening out, these leather shoes are a fantastic buy’, 76.99,’catalogimages/M002sm.jpg’,’catalogimages/M002lg.jpg’); insert into tblProduct values (‘M003’,1,’Women\’s Xtro Running shoes’, ‘A new version of the Xtro, specially designed for women. Imported from Switzerland’,56.95,’catalogimages/M003sm.jpg’, ‘catalogimages/M003lg.jpg’); insert into tblProduct values (‘M004’,1,’Leather Leisure shoes’, ‘Attractive leather shoes that offer a fantastic look and an amazing feel’,25.15,’catalogimages/M004sm.jpg’, ➥’catalogimages/M004lg.jpg’); insert into tblProduct values (‘M005’,1,’Pseudo Leather Dress shoes’, ‘For those of you who aren\’t made of money, these shoes are available for a steal’,6.95,’catalogimages/M005sm.jpg’, ‘catalogimages/M005lg.jpg’);

Advanced Techniques: E-Commerce Solutions

589

insert into tblProduct values (‘M006’,1,’Women\’s Black Leather Dress Shoes’, ‘Great for an evening out, these leather shoes are a fantastic buy for the lady on the go’,76.99,’catalogimages/M006sm.jpg’, ‘catalogimages/M006lg.jpg’); insert into tblProduct values (‘M007’,1,’Women\’s Leather Leisure shoes’, ‘Attractive leather shoes that offer a fantastic look and an amazing feel – for women only’,25.15,’catalogimages/M007sm.jpg’, ‘catalogimages/M007lg.jpg’); insert into tblProduct values (‘M008’,1,’Women\’s Pseudo Leather Dress shoes’, ‘A version of our top seller for women. For those of you who aren\’t made of money, these shoes are available for a steal’,6.95, ‘catalogimages/M008sm.jpg’,’catalogimages/M008lg.jpg’); insert into tblProduct values (‘M009’,1,’Unisex Tap shoes’, ‘An amazing new shoe, this one-size-fits-all shoe is bound to keep you dancing all night long’,21.75,’catalogimages/M009sm.jpg’, ‘catalogimages/M009lg.jpg’);

In this example dataset, I’ve only entered one category of products. You can fill in multiple categories following the same pattern I’ve set here. Finally, some related products: insert into tblRelated values (‘M004’,’M005’); insert into tblRelated values (‘M004’,’M007’); insert into tblRelated values (‘M004’,’M008’);

As a last preparation step, upload some large and small catalog images to the system— the sample data uses the directory catalogimages to store its product pictures.

Note

Notice that we aren’t adding any data other than what is contained in the catalog itself (products, related items, and so on). The other tables will be filled in by the e-commerce system, and we want them to be empty now. If you want to create test login accounts, you’re more than welcome to, but we’ll still need to create the automatic account creation screens.

The Catalog System We have so much to cover today that it’s going to be difficult to fit it all into the chapter. For that reason, we’re going to build off the same catalog system that was developed in Day 13, and add the additional functionality after the catalog is up and running. With any luck, you’ve followed the process of creating the catalog in Day 13 and already have the files in place so that today’s lesson will mainly be adding the new catalog functionality. In case you haven’t, a summary of the steps in creating the catalog system is

20

590

Day 20

presented here. If you need more detail, feel free to refer to a previous day. If not, this is a good way to test your knowledge of UltraDev because there will be no hand-holding here.

Search Form The search form will be the starting place for anyone who wants to use the system. Any of the fields in the database are fair game for a search, but only the description, category, and price would really be useful. Create a search form that includes these areas. The form should be built as follows: • The product description search field can be implemented as a text field. • The category field will use a pop-up list of elements pulled dynamically from tblCategory. • The price field will be used to search for everything less than a specific value. To keep this simple for the user, implement a pop-up menu of reasonable dollar amounts for this field. Unlike the price pop-up menu, the category list can be generated from the information in the database. To do this, you’ll add a dynamic-element server behavior. First, however, you need to define the recordset that contains all the records in the tblCategory table. For my setup, I’ve defined the recordset category to contain all the data that is needed. This recordset needs to contain both the text label of each item in the popup and its corresponding value. After the recordset is defined, you’re ready to add your dynamic server behavior. Highlight the category selection list and then follow these steps: 1. Open the Server Behavior palette. 2. Click the + button. 3. Select Dynamic List/Menu from the Dynamic Elements pop-up menu. 4. Fill in the behavior elements as needed—you might have to change some elements to match your data definition. After this behavior is defined, you still need to handle the case in which the user wants to display all the available items. Edit the category list separately to add this functionality. Open the properties inspector for the pop-up list, click the List Values button, and add a new value to the list with these properties: Name—All Value—%

Advanced Techniques: E-Commerce Solutions

591

That should complete the definition of the product search screen, as shown in Figure 20.3. FIGURE 20.3 The finished search screen should resemble this.

Search Results To set up the search results, go ahead and design a basic layout for the data. This should be created using the same basic layout for the site that you defined earlier. The results will be returned in a vertical list in the content area, so plan accordingly. There are three conditions to the search—the keyword, category, and price. Each of these attributes must be used in the WHERE clause of the SQL in order to correctly retrieve only the records that match the search from the database. The following query will do the job nicely: SELECT * FROM tblProduct WHERE catID LIKE ‘formCat’ AND prodPrice<’formPrice’ AND prodDesc LIKE ‘%formKey%’

Type this SQL statement directly into the advanced query SQL field of a new recordset. Be sure to set up the UltraDev variables (formCat, formPrice, and formKey) that capture the data being submitted from the form. After the query is set up on your page, go ahead and add the repeating region server behavior so that more than one record is displayed at a time. Setting a number in the range of 5-10 records per page will keep the display clean for the final product. After creating the basic search layout, you need to give the user the ability to navigate through the catalog’s pages.

20

592

Day 20

Create two links somewhere on your results page—Previous and Next. You can use buttons or text, as long as it can be used as a valid object for a link. To the Next link, add the Move To Next Record server behavior. For the Previous link, use the Move To Previous behavior. That’s all you need for now. Figure 20.4 shows the layout for the nearly finished browse mode of the catalog. FIGURE 20.4 The catalog browser should resemble this after it is completed.

Detail Screens The detail screen is based on server behaviors that you’ve already added to the catalog view. Rather than start from scratch, you can re-use your last screen to create the detailed view of each product. To prepare it for use as a detail page, follow these instructions: 1. Copy the search results page to a new file and open it. 2. Delete the Repeating Region behavior through the Server Behavior palette. This is only necessary if more than one record is going to be shown on the page. 3. Add the Move To Specific Record behavior to the new document as described here. Setting the Move To Specific Record configuration is simply a matter of choosing the column that uniquely identifies a record in the set you’re using. If we need to find a specific product, we can specify its product ID (prodID), so this is the column we want to use. The URL parameter is arbitrary, but it must be set to the same identifier that is used in the search results page for the Go To Detail Record behavior. (Don’t worry; this hasn’t been set yet.)

Advanced Techniques: E-Commerce Solutions

593

Finally, lay out the new details screen so that it displays the large image of the product as well as its full description. The final design of the detail screen is shown in Figure 20.5. FIGURE 20.5 The detail screen is based on the catalog search results, so it is very simple to create.

Now you need to go back to the results page and add a new link from the product search results to the detail page. Follow these steps to add the behavior to your existing results page: 1. Open the search results page. 2. Select the text or image that you want to use as a link to the detail page. For my project, I’ve used the product name. 3. Open the Server Behavior palette. 4. Click + and select Go To Detail Page from the pop-up menu. 5. Configure the link so that the product ID (prodID) is transferred to the detail record using the URL parameter you set on the details page. 6. Be sure to pass existing parameters so that the search information is carried to the detail page.

Related Items Finally, the related items must be added to the detail screen. This will enable the user to find products related to the one that he is currently viewing. To do this, start a new recordset, and switch to the Advanced mode. Configure the query as follows: SELECT tblProduct.* FROM tblProduct,tblRelated WHERE tblProduct.prodID=tblRelated.prodID2 AND tblRelated.prodID1=’relatedID’

20

594

Day 20

An UltraDev variable relatedID should be added to pick up the URL parameter id and feed it to the recordset definition. Next, set up your detail screen so that the records from the recordset are shown on the screen. Go ahead and make some space at the bottom of the catalog window, and then drag the prodName field from the new recordset over to the design view. Finally, set the dynamic product name field that you’ve added to the design so that it is a repeating region. The final page design should resemble Figure 20.6. FIGURE 20.6 After adding related items, the detail screen should look similar to this, but may be lacking a few features.

Cleaning Up the Display To wrap up the catalog system for now, go through and locate the Next and Previous links that have been added to the Search Results and Detail View pages (unless, of course, you chose to leave them out of the detail view). You can clean the catalog display up a bit by hiding these regions when they aren’t applicable to the display. For example, when the user is displaying the first or last item in the search results recordset, there is no need to display the Next and Previous links, respectively. Although this doesn’t affect the functionality of the site, it does make a bit more sense than displaying links that essentially go nowhere. To add this feature, select the text or object to hide, and then configure the server behavior: 1. Open the Server Behavior palette. 2. Click the + button and select the Show Region menu. Choose Show If Not Last Record or the Show If Not First Record condition, depending on if you’re working with the Next and Previous links, respectively.

Advanced Techniques: E-Commerce Solutions

595

3. Choose the recordset that you want to test against. 4. Click OK to add the Hide Region behavior. This will complete the catalog system for now. We will definitely have to revisit some of these pages to add links for the shopping cart and user registration models, so you will see the pages again today, but these will only be minor additions to the system.

Tip

Make sure that you test the catalog system before proceeding. A total of three more modules need to be implemented today. We’re going to move pretty quickly, and because the catalog system is the backbone for the entire project, you’ll want it to be functioning correctly before implementing the rest of the system.

The User Authentication System This portion of the application handles registering a user with the system and verifying the username and password when he tries to login. The user authentication system for our catalog will consist of four different pages: • register—Collects all the information we need to register a user. • duplicate—If the username is invalid, an error message should be displayed and the user given the opportunity to re-register. • login—Collects the username and password for a valid user account and tests it. • badlogin—If the user’s login information is incorrect, they should be given an option to re-enter it. Let’s go ahead and start building these pages. Hopefully you’ve kept the catalog template handy so that you can use it with these pages (and others).

The Registration Pages The first part of the project to complete is the registration page. If we can’t register with the system, obviously we can’t login—so this is a good place to start. This page (register.asp) and the login page are the simplest parts of the project because they collect information and use one or two behaviors to process it. Design the registration page so that it collects all the information needed for the basic user profile, namely • Username • Password • Address1

20

596

Day 20

• Address2 • City • State • Zip Be sure to name each of the fields so that it matches up with the tblUserInfo table. Add a Save Profile button to round out the form. The finished document should look similar to Figure 20.7. FIGURE 20.7 The register.asp screen should collect all of the information needed for the user profile.

Next, the contents of the form itself should be saved after the user fills out the form and submits it. We accomplish this with the Insert Record server behavior. Go ahead and add this behavior to your document now. Configure the behavior so that it is updating the tblUserInfo table and be sure to match up all the database fields with the form elements. If you named the form elements the same thing as the database fields, this should already be done for you. Finally, direct the program to go to login.asp (with the extension needed for your system) after it is done inserting. This will let the user log in to the system after he’s finished registering, which is almost certainly what he wants to do. Before the register.asp page can be considered done, we need to verify that the username which a person has selected is unique. To do this, add the Check New Username server behavior:

Advanced Techniques: E-Commerce Solutions

597

1. Open the Server Behavior palette and click +. 2. Choose Check New Username from the User Authentication submenu. 3. Choose the username field in tblUserInfo (username). 4. Configure the behavior so that the user goes to duplicate.asp if the username already exists. 5. The final setup is shown in Figure 20.8. Click OK when you are finished. FIGURE 20.8 Verify that the username is unique before allowing the registration.

To finish up the registration process, create a duplicate.asp document that contains an error message warning the user that the username he’s selected has been taken. You should also provide a link back to the registration page so that he can try again. The next step in the process is creating the login screens. This is actually something that you’ve handled before, so the process should come as no surprise. Nonetheless, we’ll cover it now.

The Login Screens The main login screen (login.asp) is nothing but a form with a username and password field that checks to verify if the data in the form matches the data in the tblUserInfo table. Create this initial login screen now. A completed sample version of the form is shown in Figure 20.9. FIGURE 20.9 The login form is identical to the other login forms you’ve created— just a username and a password field.

20

598

Day 20

With the form created, you now need to add the Log In User behavior to the document. This will, as you know, check the submitted username and password and direct the user to a specific page (setting a session variable to the username along the way), depending on the outcome. 1. Open the Server Behavior palette and click +. 2. Choose Log In User from the User Authentication submenu. 3. Choose the login form for the source of the username field and password field. 4. Select the connection for the database containing the tblUserInfo table. 5. Pick the username and password columns from the tblUserInfo table that will be matched with the fields in the form. 6. If the login succeeds, send the user to the search page of the catalog (index.asp). 7. If the login fails, send the user to badlogin.asp. This will be your error page for the login process. 8. Click OK when done. This should complete all the necessary functions on this page. As a final touch to the screen, add a link to the registration page that is always visible on the screen. There’s a good chance a näive user will attempt to log in without registering. Giving him or her a quick and easy way to access the registration is a good idea. To finish the login pages, you still need to create badlogin.asp. This should be a very simple page that provides a username/password invalid error message to the user and then gives him a link back to the login screen to try again.

Checking the Session Variable After a user logs in, you might want to provide some sort of feedback as he browses the site to show his status. Because we need to tell the site about the session variable we just set, this would be a good time to think about a login notification as well. Open the Data Binding palette and click the + button. Choose the Session Variable option and provide MM_Username as the variable name. The session variable should now be accessible from the Data Binding palette. If you want to provide a user feedback about his login status, you can drag the session variable from the Data Binding palette into the document design view of the catalog system (in the index.asp or details.asp pages, for example) so that the user’s name is displayed if he is correctly logged in.

MM_Username

Now, on to the final, and most important, portion of the shopping cart site—the shopping cart.

Advanced Techniques: E-Commerce Solutions

599

The Shopping Cart The shopping cart handles the addition of catalog items to the shopping cart database. You might be surprised to learn that this is actually a very small addition to the catalog system itself. The majority of the work left for today deals with the checkout—not entering items into the shopping cart. To add items to the shopping cart, all we need to do is add a very small form to the item detail page in the catalog. This form will include an insert server behavior to add the database to tblCart. The troublesome element of the insert is the username, which is stored in a session variable rather than a form. That, however, can be easily overcome as you’ll soon see. Open the catalog detail screen now. You need to insert a submit button and a form with a single hidden field that is set to the prodID field of the record being shown. To create this form, perform the following steps: 1. Add a new form to the document. 2. Click the hidden form field to insert it into the document. 3. Open the Property palette and select the hidden field tag. 4. Switch to the attribute view mode. 5. Add a new value attribute. 6. Click the lightning bolt icon at the far right of the attribute field. 7. Choose the ProdID field from the database recordset used to generate the detail view. Add the Add to Shopping Cart submit button as you would any other submit button. The resulting form should look something similar to this: ”>

This is all you need to add to page HTML-wise, but there are still some server behaviors that need to be added and tweaked. The first behavior we’ll add is the Insert Record behavior—this will be used to add the product ID to the tblCart table. In order to use the Insert Record behavior, you need to first define a recordset that accesses the contents of the tblCart record. Add this recordset to your document under the name rsCart—define this as a simple recordset that selects all the records. Because we’re only using it to insert data, it doesn’t matter that we’re using a simple query definition.

20

600

Day 20

Now, add the Insert Record behavior to the document: 1. Open the Server Behavior palette. 2. Click + and choose Insert Record. 3. Configure the behavior to save to the tblCart table. 4. Make sure that the prodID hidden form field is matched to the prodID field in the database. 5. Tell UltraDev to go to checkout.asp when it is done inserting the record. 6. Click OK when finished. Now, you need to alter the added behavior a bit in order to get the desired behavior. As it stands, the record being inserted doesn’t have the associated username because it is stored in a session variable. We need to manually edit the code so that this value is accessible when the form is submitted. Open your HTML source view and look for the insert line. It should resemble this: MM_editQuery = “insert into “ & MM_editTable & “ (“ & MM_tableValues & “) values (“ & MM_dbValues & “)”

The insert statement needs to be changed so that values for all of the fields are inserted and the session variable containing the username is accessed: strUsername = Session(“MM_Username”) MM_editQuery = “insert into “ & MM_editTable & “ values (‘’,” & MM_dbValues & “,’” & strUsername & “‘,’’)”

That should take care of business. Go ahead and create an empty checkout.asp page so that the behavior has somewhere to go, and then test it. If everything works as planned, the tblCart should be updated after you click the Add to Cart button in the form. However, remember that the user cannot be allowed to shop until he has logged into the system. This means that the Add to Cart button should not be shown if the user hasn’t logged into the system. Because we determine this based on whether the MM_Username session variable is defined, we can’t use the Hide Region server behavior to hide the button. Instead, we’ll have to do it manually. Find the form in your details source code and edit it so that it is only displayed when the session variable MM_Username isn’t empty: <% If Session(“MM_Username”)<>”” Then %>

”> ”>

Advanced Techniques: E-Commerce Solutions

601

<% End If %>

At the same time, you should add a region that is visible when the user hasn’t logged in. This should be a link to the login screen, so a client can quickly log in if they prefer: <% If Session(“MM_Username”)=”” Then %> Log into the system <% End If %>

This should be the only other change that needs to be made to the catalog pages. The rest of the work lies in the checkout system. We’re ready to start that last section now.

The Checkout System The last portion of the e-commerce site that needs to be addressed is the checkout system. The shopping cart pages are the hardest pages to build because they require some semi-serious modifications of the existing server behaviors. Luckily, the auto-generated code still does 99% of what we need, so it won’t take that long to finish the system. There are a total of three pages that we need: • The main checkout page—this shows the listing of what is in the user’s shopping cart and allows him to delete from the cart or continue shopping. • The secondary checkout—when the user has decided that he is ready to commit his order, he uses this page to enter in the shipping/billing/and so on information into the system. • The we’re done page—when it’s all finished, we need to display a page to the user. This requires one line of text and no server behaviors. No problem!

The Shopping Cart View The first checkout page will display the shopping cart and a total of all the items in the cart. Additionally, it allows the user to delete from the cart items that he has decided against purchasing. The first thing we need to do is add two different recordsets to the document—one to display the items in the cart, and the other to display the total of the order. Set up the first recordset as follows: 1. Add a new recordset server behavior to the document. 2. Switch to the advanced recordset. 3. Name the recordset rsCart.

20

602

Day 20

4. Define the SQL as follows: SELECT tblCart.cartID,tblCart.prodID, tblProduct.prodName,tblProduct.ProdPrice FROM tblCart,tblProduct WHERE tblCart.username=’varUsername’ AND ➥tblCart.prodID=tblProduct.prodID AND tblCart.orderID=’’

5. Add an UltraDev variable to the system varUsername that is set to the runtime value of “Session(“MM_Username”)”. This recordset is shown in Figure 20.10. FIGURE 20.10 Define this advanced query so that the shopping cart contents can be displayed.

Note

The attribute “tblCart.orderID=’’” is used to verify that the orderID field in the shopping cart hasn’t been set yet. This means that it is an order-inprogress. After an order is finished, the orderID field is filled in.

The second recordset is similar, but it uses the sum function to add up all the prices in the shopping cart. Define this new recordset as rsCartTotal with the same varUsername variable and this SQL: SELECT sum(tblProduct.ProdPrice) FROM tblCart,tblProduct WHERE tblCart.username=’varUsername’ AND tblCart.prodID=tblProduct.prodID AND tblCart.orderID=’’

With these recordsets defined, you can start building the contents of the screen.

Advanced Techniques: E-Commerce Solutions

603

As you can see in Figure 20.11, I’ve set up a table to contain each of the items in the shopping cart. The total is added to the bottom of the table by dragging it from the rsCartTotal recordset into the appropriate portion of the table. FIGURE 20.11 My shopping cart display is shown here.

Add a repeating region server behavior to row of the table with the cells that contain the individual shopping cart items. This will display all the items in the cart, rather than just the first in the recordset. After adding the dynamic data to the screen, be sure to select the price field and use the Data Binding palette to choose a Currency style format for the field. You should do the same for the Total field as well. Notice that in the screenshot of the design I’ve created, there is a radio button that can be used to select an item in the shopping cart, and a Delete Selected Item button to delete the selected item. You can add these to your document by first enclosing the table in a form. Submitting this form will delete the item from the cart. After adding the basic enclosing form, add a radio button that is displayed beside the repeating element in the form. This button should be named DeleteID and must be set to equal the cartID field of the shopping cart: 1. Select the radio button. 2. Open the property inspector. 3. Switch to the attribute view of the inspector. 4. Add a new value attribute.

20

604

Day 20

5. Set the value of the value attribute to the CartID field of the rsCart recordset by clicking the lightning bolt icon and choosing the appropriate field and recordset. Next, add the Delete Selected Item button at the bottom of the table. This will complete the form itself—next you need to add the Delete Record behavior itself. Go ahead and add this behavior to your document—configure it with these parameters: Connection—The database connection you’ve been using all along. Delete From Table—tblCart—you want to delete items from the shopping cart. Select Record From—The rsCart recordset contains all the items in the current shopping cart. Unique Key Column—cartID (numeric)—This value isn’t really important because the recordset we’re deleting from already restricts UltraDev to a single record. When Done Deleting—Leave this empty. We want to return to the same screen after deleting an item. The final Delete Server behavior definition is shown in Figure 20.12. FIGURE 20.12 The delete behavior will enable users to remove items from their shopping carts.

Now comes the fun stuff—editing the source code to make it all work. We need to remove a hidden field that UltraDev adds to the document to choose the item being deleted. Because we’re using our own cartID selection, we can’t use the UltraDev generated value. Open the source code and look for a line similar to this in your form: ”>

Remove this line completely from the HTML. Next, the delete behavior relies on “MM_recordId” being set before it will execute. We need to disable this check. Near the top of the source code, locate this line: if (CStr(Request(“MM_delete”)) <> “” And CStr(Request(“MM_recordId”)) <> “”) Then

Advanced Techniques: E-Commerce Solutions

605

Depending on the version of UltraDev you’re using, this line might be repeated in multiple places. You must make sure that it is changed throughout the document so that it doesn’t use the MM_recordId check like this: if (CStr(Request(“MM_delete”)) <> “”) Then

Only a few more lines to go, and this page will be done. Now we worry about the SQL itself. The original SQL line: MM_editQuery = “delete from “ & MM_editTable & “ where “ & MM_tableCol & “ = “ ➥ & MM_recordId

This line relies on the MM_recordId, but because we’ve set up this value differently within the radio button named DeleteID, the SQL can be changed to read: MM_editQuery = “delete from tblCart where cartID=’” & Request(“DeleteID”) & “‘“

Finally, the redirect server behavior can be modified so that it doesn’t redirect back to itself and just skips the redirect altogether. Unfortunately, leaving it blank doesn’t solve the problem in this case. You must completely disable the redirection. Find the following code line: Call Response.Redirect(MM_redirectPage)

Delete it entirely. Rather than jumping to a new (or the same) page, the program will generate the page as it normally would. An item that has been deleted will disappear from the list.

Note

Removing the redirect behavior will speed up page operations on sites where you are going back to the same page after the behavior completes. Instead of needing to process a redirection, the client browser simply receives the page information as it normally would.

To finish this page, add a link to the final checkout (where billing information is collected)—checkout2.asp, and a link back to the shopping area (“javascript: history.back()” will work well.)

The Final Checkout The final checkout page (checkout2.asp) lets the user enter all his billing and shipping information into a form and then finalizes the order on the system. A good place to start with this page is creating a copy of the checkout.asp file and editing it to include additional behavior.

20

606

Day 20

To prepare the existing checkout.asp page for the task, create a new copy of it (checkout2.asp) and remove the delete server behavior from the page. Follow that by taking out the form elements as well. The top of the page should just have a table that shows the items in the shopping cart and the total cost. The rest of the page is simple to create—it’s a giant form that contains the billing and shipping information from this table: create table tblOrderInfo ( orderID varchar(50), username varchar(50), billaddress1 varchar(100), billaddress2 varchar(100), billcity varchar(100), billstate varchar(20), billzip varchar(15), shipaddress1 varchar(100), shipaddress2 varchar(100), shipcity varchar(100), shipstate varchar(20), shipzip varchar(15), paymethod varchar(50), payaccount varchar(50), payexpire varchar(15), primary key (orderID) )

The two values that you aren’t collecting manually are the orderID (this is generated when the user finally submits the order) and the username—which we already have in a session variable. A final version of the form is shown in Figure 20.13. Feel free to design the form as you see fit—for example, I’ve used a pop-up menu to choose the paymethod field. You might consider using pop-up menus for the shipstate and billstate fields as well. We also need two new recordsets for the document—a UserInfo recordset and an OrderInfo query. The UserInfo is used to populate the shipping and billing form, whereas the OrderInfo recordset is needed so that an Insert server behavior can be added later. Define the rsOrderInfo recordset as a simple recordset query: 1. Open the Server Behavior palette. 2. Click + and choose “Recordset

(query)”.

3. Add a new query named rsOrderInfo that selects all the records from tblOrderInfo.

Advanced Techniques: E-Commerce Solutions

607

FIGURE 20.13 Create a form that contains all the fields needed to complete the order.

The second query, rsUserInfo, must be created as an advanced query: 1. Add another recordset server behavior to the document. 2. Switch to the Advanced query definition mode. 3. Define the SQL so that it selects the information from tblUserInfo based on the variable varUsername: SELECT * FROM tblUserInfo WHERE username=’varUsername’

4. Create the UltraDev variable varUsername that is set to the runtime value of “Session(“MM_Username”)”. With the UserInfo table now accessible, you can use the Dynamic Text Field server behavior to attach each of the fields in the form to the corresponding field in the database. This will fill out the form with information that the user has already supplied when registering—making it easier to complete. We’ve now reached the last step of the project—the Insert action. We’ll need to customize this quite a bit, but, as usual, we start with a basic UltraDev behavior: 1. Open the Server Behavior palette. 2. Click + to add a new Insert Record behavior.

20

608

Day 20

3. Configure the Insert record behavior to insert into the tblOrderInfo table using the information from the form that you’ve set up on this page. 4. Make sure that all the form elements match the table columns. 5. Finally, when the insert is done, instruct UltraDev to send the user to finished.asp—this is the final screen that simply says “Thanks for shopping!”. What makes this behavior different from other Insert behaviors is that multiple records need to be updated, not just the information being submitted. The orderID needs to be generated when the Insert takes place and the items that belong in tblCart must be updated to reflect the newly calculated orderID. It’s not tough, but we’ll need to do some more source code editing. Open up your source code now. Look for the SQL INSERT statement generation: MM_editQuery = “insert into “ & MM_editTable & “ (“ & MM_tableValues & “) ➥ values (“ & MM_dbValues & “)”

In its place, add this code: orderStr=Date() & “-” & Session(“MM_Username”) & “-” & Time() MM_editQuery = “insert into “ & MM_editTable & “ (orderID,” & MM_tableValues & “) values (‘“ & orderStr & “‘,” & MM_dbValues & “)”

The first line creates a string “orderStr” that is set to a combination of the date, username, and current time. This will allow the user to submit multiple orders, as long as they occur at different times (this is likely). The second statement creates the proper insert statement for adding the new OrderInfo record with the appropriate orderID to the system. Now, all that needs to be done is to update all the tblCart entries for the current shopping cart so that they have the correct orderID. This is really very simple. Find this block in your code: ‘ execute the insert Set MM_editCmd = Server.CreateObject(“ADODB.Command”) MM_editCmd.ActiveConnection = MM_editConnection MM_editCmd.CommandText = MM_editQuery MM_editCmd.Execute

Do not delete it! It handles the code execution necessary to insert into tblOrderInfo. Directly following this code block, add the following: ‘ Modify the order items to have the same ID Set FixOrder=Server.CreateObject(“ADODB.Command”) FixOrder.ActiveConnection = MM_editConnection FixOrder.CommandText = “UPDATE tblCart SET orderID=’” & orderStr & “‘ WHERE username=’” & Session(“MM_Username”) & “‘ AND orderID=’’” FixOrder.Execute

Advanced Techniques: E-Commerce Solutions

609

This executes the SQL statement needed to update the contents of the tblCart table so that the orderID is set to the new orderStr value that was generated previously. That’s it! This finishes the checkout2 page. Only one more page needs to be created: finished.asp. This page is shown after the user submits the completed order form.

The Finished Page Let’s end the book’s projects on a relaxed note. Follow these instructions to create your finished document. 1. Open a new page—Add a thank you message. 2. Save it as finished.asp (with the extension appropriate to your server). If it resembles Figure 20.14, you’ve worked too hard. FIGURE 20.14 Simple is good.

Congratulations! You’ve completed today’s lesson and the last programming exercise in the book!

Summary Although this isn’t the last day in the book, it is the last programming chapter. Tomorrow’s lesson will focus on a few techniques for figuring out why your applications aren’t working correctly and preventing trouble when authoring interactive Web sites. Today’s lesson covered just about every server behavior in UltraDev and brought together many techniques that you’ve learned in other days. Although the e-commerce site we created today isn’t perfect, it is a good start. With a little bit of work, it can turn into an excellent online catalog system.

20

610

Day 20

One thing you’ve probably noticed by now is how simple it is to edit the SQL that UltraDev has generated. Don’t ever feel afraid of doing this—just create a backup first. UltraDev will usually write 75-90% of the code you need for a fully functional application. You’re still going to have to “hack” in order to get complex applications to work, but with a basic framework in place, it’s far easier than the alternatives.

Q&A Q Is this site secure? A Mostly. There is actually a point of failure that can occur in the shopping cart area. Because we’re using a form to submit cartID when items are deleted, a user could potentially modify the form and delete items from other carts. Of course you shouldn’t commit sensitive data to the database without proper testing. Q What kind of expansions can I make to the site? A An easy expansion that I think would be worthwhile is to add a Web site specials area that is shown when the user first reaches the site. These specials could be stored in the existing database under a new category. Q Could I create the site so that the user can shop without logging in? A Yes. To do this, you’d need to generate an orderID when the user first visits the site. This ID would be stored in the shopping cart as the user browses, rather than when he is finished. Q How do you find the orders once they’ve been placed? A The OrderInfo entries can be related to the tblCart table based on the orderID. For each orderID in tblOrderInfo, there are potentially several entries in tblCart. Generating this SQL is simple and is left as an exercise to the reader.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. Why is the orderID based on the time? 2. Why isn’t the billing information stored with the userInfo? 3. Why do we need to delete the UltraDev-added recordID from the Delete behavior? 4. Why is the finished.asp page so very empty?

Advanced Techniques: E-Commerce Solutions

611

Exercises 1. The user can enter his information, but he can’t edit it. Provide the option to edit the user’s profile and store updated information, including a new password. 2. Provide the Web site specials feature that I mentioned in the Q&A section. These can be keyed to a special category in the database and shown when the user first connects to the catalog system. 3. In the current state, the shopping cart does not handle shipping/handling charges or tax. Add these values to the OrderInfo table and the checkout system. You can very easily add to the total by modifying the SQL that calculates the total.

20

WEEK 3

DAY

21

Testing and Deploying Dynamic Applications To close out this three week guide to Dreamweaver UltraDev, we’ll take a look at one of the most overlooked but important aspects of setting up any Web site—the process of testing and debugging. Even on static Web sites, there are times when something that you think should be happening isn’t. The key to keeping your sanity and not cursing your Web server is to understand what can go wrong and why. Today, you will learn how to • Diagnose common HTML-based problems • Test dynamic applications thoroughly • Find additional help resources for your problems

Coding Problems Part of creating a Web site is an understanding that it is extremely unlikely that a page or program is going to work correctly the first time you view it. Many times, this will be nothing more than a table cell width being off, and the

614

Day 21

change will take a few seconds to detect and correct. Unfortunately, there are also cases in which you can stare at your HTML page for hours and never figure out what is going wrong. When you take the already finicky HTML and toss in an embedded programming language, the result can be even more painful. What happens when you dynamically add HTML to the screen, but there is an error in the HTML code? Instead of having to debug in one place, suddenly you need to make the determination of whether the HTML code or the embedded language is causing the problem. Sometimes, it might even be both! By using UltraDev’s automatic code generation, you’re pretty much guaranteed that the underlying code will be correct. But even with a hands-off code approach, you can still get errors on your site. The only way to get rid of these problems is to understand where they come from, and that is the point of what you’re going to learn today. The following three areas in particular need attention: • HTML design errors—Problems that occur directly within the HTML, whether dynamically generated or not. • Server behavior problems—Errors that might occur with some UltraDev added server behaviors. • Testing regiments—How to test your site to ensure that it works every time for everyone.

HTML Design Errors Whether generated by a program or generated by hand, HTML design errors are a common problem, even on commercial Web sites. What makes matters worse is that many problems are compensated for by the browser—that is, the browser guesses what you intended to do and often renders the page correctly even though the HTML is wrong. This is nice if you happen to be using a browser that has correctly fixed the problem, but if you’re not, the results can be very difficult to debug.

Forms Let’s start with the most common design problem that you’ll run into—especially if you end up tweaking your HTML by hand. Rather than give away what the problem is, try entering this HTML into a text file, and then view it using Netscape:

Testing and Deploying Dynamic Applications

615

Hello World

Hello World

Hello World As you can see in Figure 21.1, although three tables are defined that contain “Hello World”, there is absolutely no content appearing in the Netscape window. FIGURE 21.1 The code contains three tables, but where are they? Now, if you happen to have a copy handy (that is, you’re using any computer that shipped in the past three years), open up Internet Explorer and take a look at the exact same HTML document. Suddenly, the tables are there. A view of the exact same document from within IE is shown in Figure 21.2. What in the world is going on? FIGURE 21.2 Three tables, and they’re all here. 21 616 Day 21 If you haven’t caught on already, the trouble with the code is that there is a missing

tag in the document. There are three start tags, but each does not have a corresponding end tag. When Netscape encounters a table like this, it doesn’t render it. There isn’t enough data, in its opinion, to lay out the table without knowing where it ends. Internet Explorer, on the other hand, automatically assumes that there is a missing end tag and renders the table anyway.

So, Which Browser Is Misbehaving? Although it might seem as if the better browser behavior is that of Internet Explorer, I would strongly disagree. By compensating for a human error, Internet Explorer is allowing bad HTML to go unnoticed. Netscape, although not making it immediately obvious what the problem is, does demonstrate that there is definitely a problem with the page. So, the question is, where does it stop? How sloppy can the coders get without having to be accountable for their own HTML? How many users will be unable to view the Web site because of it?

Luckily for everyone, UltraDev does notice the missing end tag and highlights the actual HTML in the design view, as shown in Figure 21.3. For awhile I found this to be an obnoxious feature because I knew about some of the errors, and I didn’t need to be so boldly reminded. Then I grew to appreciate just how obvious it makes a problem appear to the user. FIGURE 21.3 UltraDev will highlight problem tags directly within the design view.

Testing and Deploying Dynamic Applications

617

Besides just showing that there is a problem with a tag, UltraDev also gives you some information so that you can fix it on your system. Click the highlighted tag in the design view, and the Property palette, shown in Figure 21.4 will describe exactly what the problem is. FIGURE 21.4 Clicking a highlighted tag will show exactly what is wrong with it.

Tip

One of the most common explanations for empty pages that appear as though they should have content is an incomplete table. This can commonly happen when using a Repeat Region server behavior if the area being repeated is a table row. If something goes wrong during the loop, the application server might die before it has a chance to spit out the rest of the page, including the end table tag. As a result, you’re left wondering exactly what happened because nothing is appearing onscreen. The simple solution to the invisible content problem is to always use your browser’s View Source feature to look directly at the HTML if you feel something is missing. You’re likely to see the start of a table, followed by an error message from your server describing what went wrong.

A similar, but more bizarre problem is that of the vanishing form. Again, demonstration through example is the best way to explain exactly what I’m talking about. Try entering this HTML into a new page:

21

618

Day 21

Enter your name:
Choose your favorite color:	<SELECT NAME=”color”> Red Blue Yellow Black Green

As you can tell, I’ve been very careful with the formatting and all the tags and end tags are definitely in place. Everything looks fine, right? In fact, looking at everything in the UltraDev interface, shown in Figure 21.5, it all looks completely fine. FIGURE 21.5 Everything looks fine within the UltraDev interface.

Now, try Internet Explorer. Again, as you can see in Figure 21.6, everything looks completely fine. It isn’t exactly the most wonderful form in the world, but it looks functional. Because we’re on a roll, go ahead and open the document in Netscape. FIGURE 21.6 Again, all is well in Internet Explorer.

Whoa! What in the world is that? Seen in Figure 21.7, Netscape renders the form in an entirely unpredictable manner. The input field is missing, the submit button is missing, but the selection list is just a big bunch of jumbled words that come from the option tags. So, if UltraDev doesn’t detect anything wrong and it looks fine in Internet Explorer, what’s up with Netscape? Again, Netscape is the “outcast.” The explanation for this rather peculiar activity is that the document is missing the

tags. It isn’t necessarily the wrong behavior, but it does seem to be inconsistent when compared to other browsers (IE, Opera, iCab, and so on). Inserting the appropriate tags will immediately solve the problem.

Testing and Deploying Dynamic Applications

619

FIGURE 21.7 Netscape makes a bit of a mess of the form.

Tip

It’s actually easier to find yourself in this position than you might think. UltraDev will warn you (until you tell it not to) that you need to insert a form tag upon adding a form element—it will even do it for you. The funny thing is, subsequent fields might not insert within the same form. The easiest way to make sure that all your form tags end up in the correct place is to insert a form tag before adding form elements. Then, check the HTML after the form is created and make sure that all the fields are within the and

tags by moving the form elements manually.

Layers Layers are fun. They enable the HTML designer to place objects with pixel-point precision and can be combined with JavaScript to create dynamic Web pages that run entirely within the client browser. Best of all, layers work with almost all the browsers currently shipping. If your users have a 4.0 or greater browser version, they can view your layered site, right? Not necessarily. Create a simple layered page within UltraDev, or enter the following HTML into a text editor:

I’m a test too!

21

620

Day 21

This is a test!

This code defines two overlapping layers, one green, one blue, and both with a test message as their content. Within the UltraDev design view, these layers should look similar to the screenshot in Figure 21.8. FIGURE 21.8 Two overlapping layers should work fine in a 4.0 version browser, right?

After the past two examples, you’ve probably figured out that what is going to go wrong will only go wrong in Netscape. So, if you’re waiting for the Internet Explorer screenshot, don’t bother. It looks exactly as you would expect. So, go ahead and load the page in Netscape. What do you see? There is an extremely good chance that it looks absolutely perfect in your document. This doesn’t mean that all is well because a very simple change in your Netscape preferences can completely ruin the layout of the layers. What makes this even more interesting is that the change isn’t related to layers at all.

Testing and Deploying Dynamic Applications

621

Turn off Netscape’s capability to run JavaScript: 1. From within Netscape, choose Preferences from the Edit menu. 2. Choose the Advanced category from the left hand scrolling list. 3. Uncheck Enable JavaScript. 4. Exit the preferences window. Now, ask yourself, what JavaScript did I insert into the Web page? Take a look at the source code—you’ll find that absolutely no JavaScripting is present. So, with no JavaScript in the code, it shouldn’t make any difference if it is turned off. Go ahead and load the layered page now. As you can see from Figure 21.9, it isn’t at all like what we laid out. The layers are completely gone, and only the text within them remains. FIGURE 21.9 Where did the layers go?

If you’re like me, you occasionally get tired of having JavaScript windows pop up all over the place. Imagine my surprise when, in one of these instances, I visited a site that was originally laid out in layers. Instead of a Web site, I was greeted with a blank page. Checking the source code showed that the HTML was present, but it wasn’t being displayed. This can be especially unnerving if you’ve never run into the problem before. Your page is fine, but doesn’t show up in a Web browser. Isn’t that lovely?

Netscape and Relative Positioning You haven’t seen the last problem that comes from using layers in Netscape. Another problem is as bizarre as it is annoying. This is the use of relative positioning in an HTML document. UltraDev doesn’t support the use of relative positioning directly within the UltraDev interface. It does the best it can to represent the layer, but it isn’t perfect.

21

622

Day 21

If you’ve never used relative positioning, don’t worry too much about this. If, however, you’re a big fan of layers, it’s only a matter of time before you need relative positioning. Instead of absolute positioning, which places the layer at an exact pixel coordinate, relative positioning places the layer an exact distance relative to another object. If you want to create a group of layers that center themselves on the page, this is the only way to accomplish it. Unfortunately, Netscape has a problem with this. To see what happens, add this to another new page:

Click Here to Jump to Poisontooth

This is nothing more than a layer that is moved in from the edge of the page. Inside the layer is a single link. Open the page in Netscape. Your screen should look similar to Figure 21.10. FIGURE 21.10 The screen looks fine…but is it?

Testing and Deploying Dynamic Applications

Note

623

In this example, the use of relative positioning yields the same visual results as absolute positioning. This is because the layer is positioned relative to its parent object—the page itself.

Everything looks fine, but all is not well. Take your cursor and position it over the link. Give it a click or two. Notice that absolutely nothing happens. In fact, the link does not behave like a link at all. The destination URL does not show in the status bar of the browser as it would normally. So, what is going on? Netscape does not render links within relative positioned layers correctly. Picture the layer as if it were positioned in the upper left corner of the Web browser. Now, move your cursor over the area where the link would be if the layer were in that position. Surprise! The link is indeed there—completely invisible, but there. The layer attributes are actually part of a larger problem with Netscape’s cascading style sheet implementation. Positioning attributes are inconsistently handled, and often lead to problems.

Note

Don’t get me wrong, I like Netscape. In fact, Netscape is set as the primary browser on all the computers I use. In fact, I highly recommend that everyone using Internet Explorer to preview their Web work switch to Netscape Navigator. By designing a site that works in Netscape, you’re almost guaranteed a working IE site. It doesn’t quite work out the same the other way around.

These are some of the more common and more frustrating problems that you can run into in the HTML design portion of your projects. But what about the database driven sites? What can go wrong there?

Server Behavior Problems As you’ve read through the book, you’ve certainly noticed that there are many different cases in which you need to “finesse” the UltraDev output a little bit. The problems are generally not with the code itself, but with some very special cases that you must learn to avoid. By following some general guidelines, you can usually keep yourself out of trouble.

21

624

Day 21

Leftovers The first problem is easy to avoid, but difficult to remember to do. UltraDev has a bit of a problem cleaning up after itself, especially if you have manually inserted HTML or embedded program above and beyond what is already in the document. It’s very often that you’ll add server behaviors to your page, only to decide that they need to be removed later. Removing portions of the code from the HTML results in an unstable document that might not be able to function properly upon adding new behaviors. UltraDev does what it can to force you to remove behaviors in the correct order, but sometimes it just doesn’t work out the way you would hope. I highly recommend that you either become comfortable with manually removing embedded code from within the HTML view, or start fresh each time you need to revise your server behavior. Users of ASP and JSP should have no problem locating the embedded tags in the HTML—although CFML tends to blend a bit more. UltraDev, however, should highlight the code for you, making it easy to find and remove.

Advanced Queries One of the most common places for something to go wrong is the specification of an advanced query. A number of troublesome events can take place, and little can be done to stop them. These problems will usually force you to manually edit the embedded SQL in order to fix them.

Identical Field Names When developing one of the chapters in the book, I laid out a series of tables that I wanted to link together. The original table layout looked something like this: create table tblAnswer ( userID int not null, question1 int, question2 int, question3 int, primary key (questionID) ) create table tblOption1 ( optionID int not null, optionText varchar(50), primary key (optionID) ); create table tblOption2 ( optionID int not null,

Testing and Deploying Dynamic Applications

625

optionText varchar(50), primary key (optionID) ); create table tblOption2 ( optionID int not null, optionText varchar(50), primary key (optionID) );

From these tables, I wanted to create a list of all the matching optionText fields for each of the three questions (that is, I wanted to related question1-3 to the corresponding optionID in tblOption1-3). The SQL for this is pretty simple: SELECT tblOption1.optionText,tblOption2.optionText,tblOption3.optionText FROM tblAnswer,tblOption1,tblOption2,tblOption3 WHERE tblAnswer.question1=tblOption1.optionID AND tblAnswer.question2=tblOption2.optionID AND tblAnswer.question3=tblOption3.optionID

It simply joins the tables together. From this, you should have access to the fields tblOption1.optionText, tblOption2.optionText, and so on—but, within the Data Bindings window, all these fields become nothing more than three copies of optionText. Choosing any one of these optionText fields from the bindings gives the same value. It isn’t uncommon to run into tables that have multiple fields that are named similarly. If you’re working with legacy data, the problem is confounded by the inability to alter the database design. If you do have control over your data, the easiest solution is to make sure that all your fields have unique names—at least in the tables that you plan to relate. If you have no option other than working with the existing data, you could use mySQL’s as feature to alter the fieldnames on-the-fly. As you might recall from Day 18, “Advanced Techniques: Complex Query Systems,” you can use as with a query to store an expression in a variable and make it available as a field within a query. For example, create this simple table on your system, and populate it with some sample data: create table tblTest ( field1 int, field2 int ); insert into tblTest values (1,3); insert into tblTest values (2,4); insert into tblTest values (3,5);

21

626

Day 21

Next, perform a query on that data—a standard query to display the normal recordset headings: mysql> select * from tblTest; +--------+--------+ | field1 | field2 | +--------+--------+ | 1 | 3 | | 2 | 4 | | 3 | 5 | +--------+--------+ 3 rows in set (0.00 sec)

Next, use a query that dynamically renames the fields on-the-fly: mysql> SELECT field1 as ‘myfield1’,field2 as ‘myfield2’ FROM tblTest; +----------+----------+ | myfield1 | myfield2 | +----------+----------+ | 1 | 3 | | 2 | 4 | | 3 | 5 | +----------+----------+ 3 rows in set (0.00 sec)

The actual field names in the database are field1 and field2, but using the as keyword, we can make them available in the recordset as myfield1 and myfield2. This provides a convenient way to get around the problem if you don’t have direct control over the database structure.

Query Length and Complexity Another stumbling block in the creation of the advanced queries is the awkward behavior that UltraDev displays when working with extended queries and queries that use advanced SQL techniques. It’s annoying to spend 15 minutes designing a query within the advanced query builder and save, only to come back a few minutes later find that it has been butchered beyond recognition. Unfortunately, this happens all too often within UltraDev. The first problem appears to be related to the length of the query. At times, I’ve been happily entering SQL into the advanced query field, only to find that I can no longer scroll to the end of the query or correctly position my cursor. Although I have no doubt that this is a bug in the current version of UltraDev, it becomes extremely difficult to take the advanced query builder seriously. I highly recommend that any queries that you build be created in a text editor outside the UltraDev environment, and then be pasted back into the query window when you want to use them. The benefits of this approach are two-fold. First, you have a copy of the query

Testing and Deploying Dynamic Applications

627

saved in case anything goes wrong. Second, pasting lengthy queries into UltraDev seems to circumnavigate the troubles with long queries. In all honesty, the advanced query builder itself really only saves a few keystrokes here and there, and, from my perspective, has never really been that much of a time saver after you become familiarized with SQL.

Caution

If you do save your queries in an external editor, try to make it a text-only editor. If you use a traditional word processor, such as MS Word or WordPerfect, you’re likely to inadvertently paste smart quotes back into the query window. These are very hard to detect in the mono font used in the query builder and will cause you nothing but headaches as you wonder why your perfect query is failing repeatedly.

Similar to the length problem is complexity. UltraDev, in its current state, seems to have difficulty recognizing advanced queries after they have been entered into the system. Again, Day 18 is a prime example of how things can go wrong with a query. Part of this is caused by the way in which UltraDev stores its data. Rather than maintaining information in a separate file and correlating that information to the page, UltraDev only uses the page itself to keep track of server behaviors and data bindings. What this means to you, the developer, is that it is very simple to transfer files from one system to another. In fact, you can even add simple embedded code to the document and have it show up in the Data Bindings palette. In order to provide this functionality, UltraDev must parse the page and figure out what code is a server behavior, what is a query, and so on. As you can imagine, this involves some pretty heavy-duty pattern matching. When you manually alter the code so that it no longer fits UltraDev’s view of what a behavior should look like, it can no longer track or work with it. Sometimes, just entering complex query elements can cause this to happen. The best way to handle the problem of lengthy and complex queries is to use an SQL view to simplify things. If you don’t remember, a view is best defined as a virtual table. It is the product of a standard SQL query, but it is accessible as if it were its own entity. You can learn more about views in Day 12, “Writing Advanced Database Queries.”

Note

Views, unfortunately, are not a supported feature in the current version of mySQL. They’re on the “coming attractions” list, but haven’t quite appeared yet. Most commercial databases support views, and some non-commercial products, such as PostgreSQL, also have this feature. Check your database documentation to see if they are supported.

21

628

Day 21

Multiple Primary Keys UltraDev does not support the use of multiple primary keys in many of its server behaviors. This is usually just a matter of semantics. You can force UltraDev to insert and delete records from a subset of a table by defining a query that selects records based on the appropriate keys. Unfortunately, it is not currently possible to tell the software about multiple primary keys. Again, this is an instance in which a view can be extremely useful. Using a view, you can limit the amount of data that UltraDev has access to, and only update the data that is contained in the view.

Note

Using views in this manner presents a problem with some database systems. First, your database system must support views, and second, it must support inserting data into a view. Again, your database documentation is going to be the best place to find this information.

Keep It Simple If you’re a programmer, you’ll recognize some of the functions that UltraDev offers and you might try to use one or two of them in a traditional programming construct. For example, consider repeating regions. If you have programming experience, you’ll recognize these as a limited sort of loop. A common trick used in programming is embedded loops. For example, you could easily manually program two embedded loops that lay out a series of photos, and so on in a table format. One loop would handle laying out the columns of cells, whereas another would loop through all the rows. Using UltraDev, you can embed two loops, but let’s look at exactly how those two loops work: <% Dim Repeat1__numRows Repeat1__numRows = 3 Dim Repeat1__index Repeat1__index = 0 rsTest_numRows = rsTest_numRows + Repeat1__numRows %><% Dim Repeat2__numRows Repeat2__numRows = 10 Dim Repeat2__index Repeat2__index = 0 rsTest_numRows = rsTest_numRows + Repeat2__numRows %>

Testing and Deploying Dynamic Applications

629

The first part of the program sets up the loop limits. The first loop should run for 3 iterations, whereas the second should run for 10. <% While ((Repeat2__numRows <> 0) AND (NOT rsTest.EOF)) %><% While ((Repeat1__numRows <> 0) AND (NOT rsTest.EOF)) %><%=(rsTest.Fields.Item(“featureID”).Value)%> <%=(rsTest.Fields.Item(“optionID”).Value)%> <% Repeat1__index=Repeat1__index+1 Repeat1__numRows=Repeat1__numRows-1 rsTest.MoveNext() Wend %><% Repeat2__index=Repeat2__index+1 Repeat2__numRows=Repeat2__numRows-1 rsTest.MoveNext() Wend %>

Here, the two loops are nested. Unfortunately, there is one slight problem. For both of the loops, the counter (numRows) is initialized in the same place. After the first loop has finished running, it cannot run again because the looping variable has already reached its limit. Because of the way that UltraDev handles these behaviors, you cannot simply apply programming knowledge to the UltraDev way of doing things. You must do what you can inside of UltraDev, and handle the rest by hand.

Testing The most important part of any application is testing. Because all the UltraDev code is dynamically generated, you have little to fear with something going wrong programmatically. If you decide to add your own code to the system, it’s up to you to debug it. What can go wrong, however, are the queries that you’ve defined for the system. If we go with the assumption that everything in UltraDev is correct, the problems can be limited to what we, the users, are providing the program to work with—namely, the SQL and the database definitions. Let’s look at a couple of situations where the results you get aren’t what you expect, and what steps you should take to test your system before deploying it.

Check for NULL Values As each of the databases we designed throughout the book, you’ve noticed that certain fields are denoted as not null—this always applies to the primary keys. The mySQL

21

630

Day 21

database forces you to include the not null attribute for the primary key, but some systems might not. It’s important to keep in mind that even if your primary keys are not defined as being not null, it is implied. So, what does this mean to you? Any field that is defined as not null must have a value. If you’ve never built database-driven systems before, this can be slightly confusing. For example, consider this table: create table tblUserInfo ( userID int not null, username varchar(80) not null, password varchar(80) not null, email varchar(250) not null, primary key (userID); )

In order to store data in this table, each of the field values must be defined. If you create a form that submits data to this table, you must make sure that all the fields are defined. You cannot expect UltraDev to come back with a message explaining that the form needs to be filled in. Instead, the user would get an error message from the server describing (in programming terms) the problem. You need to intercept this problem before it happens. The easiest way to do it is to use the Validate Form behavior, shown in Figure 21.11 (not server behavior): 1. Create a form that submits data to the database. 2. Determine which fields must have values and make a note of them. 3. Open the Behavior palette. 4. Click + and choose Validate Form. 5. Select a field from the list that you want to force a value for. 6. Choose whether the field is required, or if it should accept a particular type of data (number, email address, or number range). 7. Click OK. FIGURE 21.11 Choose the fields that you want to force a value into.

Testing and Deploying Dynamic Applications

631

Using a form validation behavior forces certain form elements to have values before they are submitted to the Insert or Update server behavior. This eliminates the potential problem of having a user submit a form with fields that are empty, but are required to have a value in the database. Always check your forms to see what happens when a form that collects user input is submitted blank. This is the most extreme case of testing not null values, and should demonstrate any problems if they exist.

Validate Using Duplicate Data The second type of problem that you might encounter with the server behaviors is the matter of duplicate data within forms. You cannot use an Insert behavior to replace existing data in the database. Although this is probably obvious, it does present a potential problem when a system bases records and queries off user input. Throughout this final week of projects, there have been a few that give the user the ability to create her own account on the system. In creating these systems, we had the user input the data that could not be duplicated (such as her chosen username) one step at a time. By doing the registration process in steps, we can check for duplicate data before it becomes a problem. If we try to input all the data at once and it is in conflict with existing data, the database server will generate an error and cause the Web application to crash. Even if you don’t think this problem affects you, you should always test your application (if it accepts user input) by entering multiple identical records and verifying that no server errors are generated.

Test Maximum Lengths How does your database server handle values that exceed the maximum length? Does it cut them off? Does it generate an error? What happens? There’s no way to tell without testing. MySQL, for example, will truncate the data if it is longer than the allowed field. This is yet another one of the extreme cases that needs to be tested.

Tip

Remember, you can limit the amount of data that an input field can accept by adjusting the max chars attribute in the Property palette. Unfortunately, this only works for basic single-line input fields. Multiline input fields (textareas) cannot be limited.

If you follow a basic testing regiment using these three conditions, you’re very likely to find everything that can and will go wrong with your Web application. To summarize, each application could go through several stress tests:

21

632

Day 21

• Empty (null) values—What happens when an application that accepts data receives empty values? Can it handle them? You might find that forcing field input using a JavaScript behavior is an excellent way to eliminate this potential hang-up. • Duplicate values—Likewise, what will your program do if you submit the same data twice? You must make sure that your database structure can handle multiple identical field values (an auto incrementing field could be useful here), or that you test values as they are submitted to eliminate any chance for conflict. • Size limits—Make sure that your database is large enough to handle the amount of data that it is getting. Force input field limits where you can. Even if you think you know how your application will react to these conditions, test them anyway. It’s easy to make a mistake, and you might end up paying for it later.

Tip

Some of the restrictions that you might be forced to place on a form might not be obvious to the user. Be sure to include instructions in the form that document the required fields, size limits, and so on.

Additional Troubleshooting Resources A wealth of information is available on the Internet that can make solving problems much easier. As much as I would have liked, this book simply cannot be made large enough to cover ASP, JSP, CFML, and SQL programming in an in-depth manner. Although I’ve done what I can to provide an informative overview of these topics, sometimes you’ll need further information: •

http://www.blooberry.com/—BlooBerry is, in my mind, the definitive site for information on HTML and Cascading Style Sheets. Beyond just defining what the tags and attributes are, BlooBerry shows examples of the tags, as well as provides information about the browsers that support them, and what potential problems you might encounter.

•

http://www.mysql.com/—To

•

http://jsptags.com/—The

effectively use UltraDev as a development tool, you must know your database server because it will be providing a great deal of the application logic. If you decide to use MySQL, be sure to check out the homepage, which has extensive documentation on how to run the server and use SQL itself. everything reference to JSP, including links to the official Sun documentation and reader forums to ask questions. JSPtags is an excellent site for anyone who uses JSP, whether an amateur or professional.

Testing and Deploying Dynamic Applications

•

633

http://www.allaire.com/documents/cf4/CFML_Language_Reference/—There’s

no better reference for the ColdFusion Markup Language than Allaire’s own Web site. Providing detailed information on all the available tags and functions, you’ll want to bookmark this site if you’re a CF developer. •

http://aspfree.com/—This

site has examples, online tutorials, and free Active Server Pages help. If you’ve never programmed ASP before, the complexity can be a bit overwhelming—this site will make everything clear.

Summary Well, folks, that’s it. You’ve made it through the full text of Sams Teach Yourself Dreamweaver UltraDev in 21 Days. Today’s lesson wrapped up the final week with a look at a few of the things that can go wrong with your Web site, and how you can prevent them from happening. As you set out to start creating your own applications and projects, keep in mind that UltraDev is only a tool, and it does have limitations. The best way to use the software to its fullest is to know your database server and the UltraDev environment. Together, these are the two components that make everything possible. Everything is not always going to go smoothly, but I hope that the special cases you’ve seen throughout this text will prepare you for the potential problems that can come from server behavior problems or the need to expand the code beyond the built-in functions that UltraDev currently offers. If you have any questions about the projects in the book, I’d be more than happy to answer them. Feel free to email me at [email protected]. Good luck, have fun, and play nice.

Q&A Q What is the best approach to development, considering all the problems with Netscape? A Develop for the problem child (which currently is Netscape), and deploy everywhere. If you develop for the browser with the most problems, you won’t have to go back and adjust your code later. Q Why are layers controlled by JavaScript in Netscape? A I’m not sure why this is the case. Layers display perfectly with JavaScript disabled inside Internet Explorer.

21

634

Day 21

Q Is there any definitive way to identify a query that is going to confuse UltraDev? A Beware of queries that use the tag identifiers for the embedded language you’re using. For example, using <%> to match HTML tags in an SQL query is dangerous. Q If I test the document the way you described, is it going to be perfect? A Maybe, maybe not! That depends on how you defined your database, the server behaviors you used, and what you intended the final product to be. I can only give you hints to point you in the right direction. It’s up to you to do the rest.

Workshop The Workshop area is meant to reinforce your reading with a series of questions and exercises. The answers can be found in Appendix A, “Quiz Answers.”

Quiz 1. What happens when you try to display a table with no end tag in Netscape? 2. What feature of cascading style sheets should be avoided at all costs? 3. How can you prevent a not

null

error on an input form?

4. How can you limit the amount of input so that it doesn’t exceed the limits of the database?

Exercise The only real exercise left to do is to explore UltraDev using your own projects and database designs. Be sure to take into consideration that problems that we talked about today. It’s time for you to start developing.

WEEK 3

15

In Review

16

This week’s lessons introduced you to new and different ways of using and combining the UltraDev behaviors. There are still many areas where the projects can be improved, however. Try revisiting the past week’s projects and adding the following features:

17

Day 16—Alter the message board system so that it allows the user to set a default password to use on all her messages. Store this value in a cookie by manually editing the code. You should be able to enhance the functionality even further using this cookie by allowing a user to have oneclick deleting of email messages that she’s posted.

18

Day 17—Add an administrative interface to the system so that the site content can be controlled from a centralized location. You might also want to add additional information that the user can customize. With the database structure developed in this chapter, the sky is the limit.

19

Day 18—The complex query system presents a good start on a fully functional matching system. In order to turn this into a more commercially viable system, you can add the ability for a user to store messages directly in the private mailbox for other users. This is commonly used on systems that pair people together in order to protect their privacy and not distribute email addresses publicly. Day 19—Add an interface for the instructor to add questions to the database system. To make things more interesting, you can also add a point value system to the database so that questions can have different weights.

20

21

Obviously, many other portions of the projects could be expanded. These are just a few additions that I think would be worthwhile and beneficial to the operation of the system. I certainly hope that this book has been beneficial to you in using the UltraDev environment effectively. I’ve enjoyed developing project lessons that I feel are both useful and interesting. I hope you find them to be helpful in your Web programming endeavors. Good Luck! John Ray

APPENDIX

A

Quiz Answers Answers for Day 1, “The UltraDev Interface” 1. How can you select objects from within the design document view? Objects can be selected by clicking, clicking and dragging through the HTML, clicking in the tag hierarchy at the bottom of the document design window, or by clicking at the top of the selection and then shiftclicking at the bottom. 2. The floating palettes are great, but you switch between the design view and a palette. The palette window keeps floating on top. How can you fix it? Turn off the Float On Top attribute of the source palette by editing the UltraDev palette preferences. 3. How can you alter the HTML for a tag directly without going into the HTML view? Use the Quick Tag Editor.

638

Appendix A

Answers for Day 2, “Using the UltraDev WYSIWYG Layout Tools” 1. How can you access and edit the attributes and tags within the tags? Choose Head Content from the View menu to display all of these otherwise hidden tags. 2. Where can I define the colors that a link is displayed in? Open the Page Properties selection under the Modify menu. This is an eclectic collection of options that don’t fit elsewhere in the program. 3. How can I position elements using a table so that they are placed up against one another? Make sure that the border, cellpadding, and cellspacing options on the table are set to zero, and then insert your elements. 4. I’ve designed a table using Layers, but now I need it to display properly on 3.0 version browsers. Am I out of luck? Nope. Choose Convert Layers to Tables from Layout Mode of the Modify menu. This will convert all your layers into tables that are compatible with older browsers. 5. How can you use a table to create pixel-point accurate layouts without resorting to layers or time-consuming manual cell spacing? The Layout mode uses tables to transparently allow you to position cells anywhere you’d like on the screen. This is an excellent alternative to layers.

Answers for Day 3, “Planning and Managing a Web Site” 1. What characters should be used in filenames? Alphanumeric characters and the underscore (_) are usually safe for any server. 2. What’s an easy way to find documents that haven’t been titled? Use the Show Page Titles under the Site Map View menu—scan for Untitled documents.

Quiz Answers

3. What option needs to be set for the UltraDev FTP client to connect to a remote server from within a masqueraded (private) network? Set the Passive FTP check box under the Web Server Options of the site definition window. 4. How do you make a list of all the external links on your Web site? The menu option Check Links Sitewide under the Site menu can check all the links on your site and provide a list of external links. 5. What system is necessary for keeping other users from editing your files while you’re using them? The site Check In/Out system. Enabled from within the Check In/Out screen of the site definition window.

Answers for Day 4, “Web Sites with Action— Client-Side Behaviors” 1. What are behaviors? Behaviors are the combination of an event and an UltraDev action. 2. Some UltraDev events are shown inside of parenthesis. What is different about these events? Some events require an extra HTML object to be inserted into the document in order to work correctly. These events are enclosed in parentheses. 3. If you want to constrain the movement of a draggable layer to left and right, what values do you put in the constraint fields? The up and down fields should be set to zero, whereas the left and right fields should be empty. 4. How do you set draggable layers to be available when the page is first loaded? Set the draggable layers so that it is triggered by an onLoad event in the of the HTML. 5. How can you increase the fluidity of the animation defined in the timeline? Spread the animation out over more frames and then set a higher frames-persecond (Fps) rate. 6. What tool lets you create fully scalable, vector-based text? The Flash Text tool lets you transparently create vector text in a document without any additional authoring tools.

639

A

640

Appendix A

Answers for Day 5, “Reusable Components and UltraDev Packages” 1. What is a common use for CSS? Style sheets are most commonly used for providing a consistent textual look and feel throughout Web sites. They are also key in the use of layers and DHTML. 2. Do all CSS attributes work across browsers and platforms? No. CSS are not implemented consistently across the browser platforms. The best sort of information on what works is the BlooBerry site: http://www.blooberry.com. 3. The Library is good for what? Maintaining an easy to access list of commonly used or edited components. 4. How can an existing HTML page be turned into a Template? Existing pages can be turned into templates using the Save as Template menu option and then by selecting the editable regions and using Mark as Editable. 5. How are extensions added to UltraDev? Extensions are added by downloading the software from Macromedia, or a third party, and then placing it within the UltraDev Extensions folder and running the Extensions Manager.

Answers for Day 6, “Introduction to Dynamic Web Applications and Database Design” 1. What portions of a Web site are best translated into a dynamic site? Repeating information, lists, and commonly updated information. These three components make up most of the dynamic data found on sites. You can certainly explore other areas of dynamic data, but these are the most prominent. 2. What does normalizing a database do? Normalizing a database removes redundancy from the existing data model. Redundancy can lead to problems when inserting, deleting, or updating records because multiple records might be affected by the change.

Quiz Answers

641

3. What is the first normal form? The first normal form of a data model is met when all the defined entities are devoid of repeating attributes. All repeating attributes must be broken out of the entity and placed in a new entity. 4. What is the second normal form? An item is considered to be in the second normal form when all the attributes are dependent on the entity’s unique identifier. If attributes between different instances of an entity are dependent on one another, these attributes must be broken out into a new entity. 5. What is the third normal form? The third normal form exists when an entity is in the second normal form and does not possess any attributes that are dependent on one another. If any of an entity’s attributes is dependent on another attribute, those items must be placed in a newly defined entity. 6. What is a primary key? The primary key for a database table is the unique identifier that was defined for the originating entity. 7. What is a foreign key? A foreign key is nothing more than another table’s (entity’s) primary key, stored in order to create a relationship. For example, if I have many students in a single class, I would want to store the unique identifier (primary key) of the class with each of the students. That way, I could relate each of the students back to the class that they are taking.

Answers for Day 7, “Understanding the Supported Scripting Languages” 1. What does ASP stand for, and who created it? Active Server Pages—it is a Microsoft creation, but is available on multiple platforms through the third-party ChiliSoft product. 2. What embedded language uses <%

%>

Both ASP and JSP use this style tag.

to denote its start and end tag delimiters?

A

642

Appendix A

3. Can you set a cookie value at any time in JSP or ASP? No. The value of a cookie is sent to the client browser before any other page contents are delivered. Because of this, the cookies must be added before any data is sent to the client. 4. Can you set a session variable at any time? Absolutely. Session variables rely on a cookie that already exists on the client computer. Setting a session variable stores a value that is maintained on the server, not on the client. 5. What is the best authoring environment for ColdFusion? ColdFusion is best authored in the ColdFusion Studio tool from Allaire. Although UltraDev is nice (and the only option for Mac users), it doesn’t offer the full integration with CFML that the dedicated Studio environment has.

Answers for Day 8, “Setting Up Macintosh and Windows for Database Interaction” 1. What database connection types are available? The primary types of connections are ODBC Data Sources, ADO connection strings, CFML data sources, and JDBC drivers. 2. How can Macintosh users access ODBC-based data sources? Macintosh users access ODBC sources transparently by connecting through the application server. They can also use the RmiJDBC software to connect to any ODBC data source available on a Windows machine. 3. What systems does mySQL work on? Almost any. MySQL is an Open Source piece of software that is available for Windows and a wide variety of Unix systems, including Solaris, Linux, and Mac OS X. 4. What happens if you don’t run RmiJdbc as a service? RmiJdbc must be run as a service under NT if you want it to start at reboot. If the software is not run as a standalone process, you must remain logged in and the command window where the process is started must remain open at all times. 5. Where do you install JDBC drivers on the Macintosh? The Macintosh expects classes to be installed in the MRJClasses directory. The easiest way to do this is to search for the directory with Sherlock. You can also find it under the System Folder:Extensions:MRJ Libraries folder. Windows users can install classes anywhere that is defined in the CLASSPATH environment variable.

Quiz Answers

Answers for Day 9, “Introducing the UltraDev Dynamic Tools” 1. What does the recordset behavior do? The recordset behavior performs a query on your database server—the results are made accessible through the Data Binding palette. 2. How do you execute an Insert command directly on the server? The command server behavior is the only way to execute an insert directly. 3. Does UltraDev support multiple value primary keys for a query? Nope. Not currently. If you have control over your database, define the tables so that they only have a single value primary key. 4. Is there another way to add dynamic features to your site rather than adding server behaviors? Yes, the Data Binding palette can be used to directly bind HTML objects to information in a database. 5. How can you control the format of the output of a field? Setting a format value in the Data Binding palette will force the data being used into a predefined format—such as a date or percentage.

Answers for Day 10, “Creating DatabaseDriven Screens” 1. What two components must be in place before a dynamic Web page can be created? Before you can even start creating a dynamic Web page, you must have a database connection in place. When you can connect to a database, you’ll need to define a recordset that contains the fields you want to use on your Web page. 2. How does UltraDev generate its Live Data view? In order to show live data within the design screen, UltraDev takes a unique approach. It takes a copy of the page that is currently being written and saves it to either a remote or local production server. It then accesses the file from the server, forcing it to be executed. The resulting Web page is used to render the Live Data preview.

643

A

644

Appendix A

3. How do you create a repeating region? Repeating regions are very simple to create—just select the appropriate data to be repeated in the design view and choose the Repeat Region server behavior. UltraDev handles all the dirty work. There is no need to worry about how table rows are repeated—as long as the row is selected, it will work. 4. What attributes can be bound to dynamic data? Any HTML attributes can be bound to dynamic data by clicking the “lightning bolt” in the Properties palette. If you can manually set an attribute in an HTML tag, you can set it using data from within a database. 5. How can images be used inside of a database? Images cannot be used inside of a database—at least not using the currently available version of UltraDev. In order to provide dynamic image support, you can just provide references to images from within the database. 6. What happens when a recordset is sorted? A sorted recordset alters the way data is returned from the resulting data. Instead of returning records in the order they are stored in the database, sorting them will return them in an order based on one of the fields in the database. 7. Do you need an extra field if you plan to use an image within a database? No, you do not need an extra field unless you plan to change the image file that a record references. An easier (and effective) way to provide an image reference without using a new field in the database is to name the images after the primary key in your database. Because the primary key must be unique for every record in the database, it can also be used to reference a unique file.

Answers for Day 11, “Storing, Editing, and Updating Data from an UltraDev Application” 1. How can you set the size of a form field for design purposes? The Char Width attribute for text fields can set the width of a field in characters, but there is no cross-platform or cross-browser means of providing perfectly sized input fields. 2. What sorts of applications should check boxes be used for? Check boxes are best used for selecting multiple attributes of an item on a form

Quiz Answers

(that is, check all that apply). They imply an AND condition and can be either on or off. Check boxes should not be used for OR conditions such as yes or no. 3. When should radio buttons be used? Radio buttons should be used on forms to create an OR condition between multiple values. If used the same as check boxes, they set up a condition where, after being selected, the buttons cannot be deselected without resetting the form. 4. How can you test dynamic pages, such as detail screens from within the design view? Pass URL parameters on the Live Data view URL line. These parameters are interpreted by UltraDev in exactly the same way that they would be handled by a Web browser viewing the final application. This lets you quickly test the functionality of a Web-based program without having to launch a Web browser. 5. How many primary key fields can UltraDev work with? One. If you have more than one primary key field, you’ll need to work around the limitations in the software by editing the code manually, or coming up with a workaround. 6. What is one workaround for the multiple field primary key issue? Using a recordset that only returns a single record eliminates the need for UltraDev to locate a record based on its primary key. When there’s only a single record in the recordset, it doesn’t matter what UltraDev thinks the primary key should be. 7. Besides server behaviors, what’s another way to bind form elements to a database? The simplest, and ultimately, most flexible means of creating dynamic form elements is to use the Properties palette to bind the elements to the database. Although not offering the pretty interface of the customized server behavior dialogs, this method of adding dynamic bindings is much more streamlined and fits better in the UltraDev interface. 8. How can you quickly create master detail page sets and supporting insert/update pages? Use the Live Objects category within the Objects palette. These special template objects will automatically generate simple database-driven screens in a matter of seconds.

645

A

646

Appendix A

Answers for Day 12, “Writing Advanced Database Queries” 1. How do you create a database within SQL? Use the database create command. 2. Why is the phrase “insert data into the database” syntactically wrong? Although I probably use the same phrase in several places of the book, it isn’t entirely correct. A database is the wrapper for one or more tables, views, and so on. These internal structures hold the actual records and are the object of the insert command. 3. What does * do in a select statement? Selects all the fields, rather than a named subset. 4. How can you refer to a specific field name within a specific table? Use the format “.”. Although it is possible to use just the field name in many cases, this leads to ambiguities when dealing with multiple tables with identical names. 5. What happens if you do not supply a WHERE clause when selecting records? If a query, delete, and so on receives an empty search expression, it will select all the records in the database. This can be a bit distressing for a first-time SQL author who guesses (incorrectly) that an empty search expression would match zero records.

Answers for Day 13, “Advanced Components: Catalogs, Searches” 1. How do you match ANY values in SQL? An easy way to match all the values in a field is to use LIKE % as a qualifier for the field. The % character matches any character and therefore will match anything in the database. 2. What is an alternative method for handling the related items’ functionality? An alternative way to have related items is to use a repeating value within a field and then search the contents of the fields for that value. This is not normalized, but it is cleaner code than the alternative solution.

Quiz Answers

647

3. How do you add Next and Previous functionality to a recordset? The Move To set of server behaviors enables you to navigate through a recordset using Next and Previous links—it also enables you to quickly go to a particular detail record within a recordset. 4. How is the Show Region behavior employed? The Show Region behavior is used to show a selection on a Web page, depending on conditions of a recordset. To use the behavior, just select the region in the document to show, and then choose the behavior from the Server Behavior palette. 5. What happens if you forget to name a file with the appropriate extension? Most likely, the program will fail to run. If you fail to name your files using the naming convention set by your application server model, the files will probably be interpreted as HTML and will not be displayed properly. 6. What is an alternative to the Previous behavior? In order to keep your server from having to repeat a query, you can use the browser’s history to navigate back in the dataset. Just set a link to use javascript: history.back();, and all should be well. 7. What is the fastest way to create a Navigation Bar? Use the Recordset Navigation Bar object in the Object palette. This prebuilt collection of server behaviors will add all of the necessary navigation behaviors, as well as the Show Region behaviors, to a given document.

Answers for Day 14, “Advanced Components: User Logins” 1. How can you use a Show Region behavior to hide information? The Show Region server behavior can be used to hide information if it is keyed on the inverse of a query that should show it. For example, if you want a region to be hidden when a recordset isn’t empty, you should define a Show Region behavior that is activated when the recordset is empty. 2. What are login systems used to secure? Login systems typically are used for two purposes—allowing access to a secured area of a Web site and giving special access based on a user account. The former method doesn’t care who the user is—just that the user has the proper information to access certain pages on the Web server. The later technique opens up portions of the site based on the user’s identity, not just whether or not she has a valid username and password.

A

648

Appendix A

3. How can you protect pages from being viewed without a valid username or password? Use the Show Region behavior to hide the contents of an entire page based on a recordset that determines whether a login/password is valid. If you forget to hide the pages that are supposed to be password protected, all a potential hacker needs to do is guess the URL of a page that is past your login screen, and he’ll have access to your site! 4. What does the Go To Related Page behavior do? The Go To Related Page behavior is used to create a link to another page that will pass all the existing URL parameters and/or form elements to a subsequent page. You need this for maintaining session information without session variables. 5. Are recordset variables passed by the Go To Related Page behavior? Absolutely not! The contents of a recordset must be generated each time a page is visited. You can, of course, manually transfer a recordset value through the URL or a hidden form field, but this is not automatic! 6. If a user cannot navigate through a session variable-based site, what is the likely cause? If a user is having trouble accessing a Web page that uses session variables, chances are the user is not allowing cookies to be set on his computer. A cookie containing the user’s session ID (as determined automatically by the application server) is needed to retrieve session variables. the user should enable cookies and give it another go.

Answers for Day 15, “Advanced Techniques: Converting Existing Web Sites to Use Dynamic Tools” 1. What does % do? The % character, in a SQL pattern, matches any number of occurrences of any given character. 2. Why do randomized images come up repeatedly? You don’t necessarily get a new image each time your randomized banner reloads because each reload is an independent event. Statistics tells us that independent events are of equal likelihood—or it is equally probable that you’d get the same image on a reload that you got on the first load.

Quiz Answers

649

3. Why must a separate variable containing % be inserted into the code? In order to keep the sequence <% or %> from occurring, we have to store % in a variable, and then concatenate it and the query string together. 4. Why isn’t it important that multiple images are returned in the randomized banner and time-based image applications? Because you only have access to the first record in a recordset without adding a repeating region or other server behavior, you are limited to accessing one value anyway. 5. What does the RAND() function do in mySQL? Returns a random number. When used with ORDER is randomized each time the query is performed.

BY,

the ordering of the records

Answers for Day 16, “Advanced Techniques: Data Collection and Reporting” 1. What is the parentID field for? The parentID field contains the ID number of a message that is the parent of another message. If, for example, a message has a parent ID of 15, it was created as a reply to the message ID 15. 2. What is a problem with the blob data type? ASP and other products might not deal with binary data types correctly. This is not a fault of the database—rather the software accessing the fields. 3. Why shouldn’t you pass all parameters in the Go To Detail Page behavior when they are applied to the list of replies? If you pass the ID parameter on a page that’s already passed the ID parameter, you’ll end up with two copies of the ID being passed through the URL. This will cause headaches for the server. 4. On multiple recordset pages, what do you need to watch out for? Make sure you’ve chosen the right recordset when adding server behaviors to the pages. If your code doesn’t act the way you think it should, you might be working within the wrong recordset.

A

650

Appendix A

5. What is the problem with having the field named Hidden exist as a hidden field on the form? The field Hidden is not necessarily a good thing to put on the form page. A user could easily modify the page locally on her machine and change the hidden value. A better way to do it is to edit the SQL code directly on the page to save the value. Because this isn’t a high-security application, it’s not overly important.

Answers for Day 17, “Advanced Techniques: Tracking and Using User Data” 1. What is the session variable for in this project? The tempUserID session variable is used to temporarily store the userID until it can be set in a cookie. URL parameters are not used because they offer too much of an opportunity for the user to change the userID. 2. How do you add a cookie data binding? A cookie is actually just another type of response variable (in ASP); you use the exact same data binding used for URL parameters. 3. Why are layers useful for customized pages? Layers offer almost all the features of a full Web page “within a Web page”—this makes it extremely easy to work with and manipulate. Additionally, the ability to position a layer anywhere on a page is very useful . 4. How long will the server remember a user’s preferences? The date that was set in the code is 12/13/2030. You can modify the cookie’s expiration date when it is first assigned. There’s little doubt that most people will probably find 2030 sufficiently far in the future to be considered forever. 5. Why aren’t the user’s preferences all stored in a single long table? Using the tables defined in the chapter, you can easily extend the available options. If the user’s preferences were stored in a single table record, you’d have to add new fields to the table each time a new feature was added.

Quiz Answers

Answers for Day 18, “Advanced Techniques: Complex Query Systems” 1. What is the absolute value? The absolute value function returns the positive distance between a given value and zero. This can be used to determine how far off two values are from each other. 2. Why do we add the absolute values together? The combined absolute values are representative of the total amount of error in the query. The less total error, the better the match overall. 3. How can query items be weighted? You can weight certain elements of a query by changing the distance between the option values. For example, in the travel buddy query, the North routes were numbered sequentially, and then there was a big jump (numerically) before the South routes started. 4. What is a threshold? The threshold for a search is the maximum allowable amount of errors that a result item can have to be included in the search results. You can relate a threshold value to a percentage by calculating the total distance between all the responses and relating that number to 100% error. 5. Why is it important to enter the master search query right the first time? If you don’t enter the search query right the first time, you might be unable to edit it later. This is a problem with UltraDev, not the query.

Answers for Day 19, “Advanced Techniques: Testing and Educating Online” 1. Why did we have to bypass the Go To URL behavior that is inherent to the Insert Record behavior? If we have redirected to another URL, or the same URL, the user’s place in the test would be lost.

651

A

652

Appendix A

2. How is security of the administration section handled? In this exercise, the UltraDev user authentication behaviors are used to their fullest. The ability to define and use multiple levels of security allow you to build Web sites that offer many features at many different levels. 3. Why did you have to move code around manually in this chapter? When we changed some of the code around, UltraDev keyed on this code and lost its place on the page. This is one of the problems with manually edited code. 4. How did we hide a region without a Hide Region behavior? Never forget that you can edit the code in the page or add your own code at any time. UltraDev is a tool to help generate the code, but you can certainly make changes to the source code as you deem fit. So, the answer is, we didn’t insert a hidden region, we inserted our own equivalent. 5. Because there isn’t a server behavior to handle hiding a region when the quiz is done, how did we accomplish this amazing feat? To hide the quiz when the user has finished answering questions, we had to create two datasets—one with the number of questions, the other with the number of questions answered by the user. Comparing the total records in these two recordsets provides a perfect way to determine whether the quiz should be hidden.

Answers for Day 20, “Advanced Techniques: E-Commerce Solutions” 1. Why is the orderID based on the time? The orderID needs to be different each time a user makes an order. By basing this value on the time, the only way an order could be confused is if a single user submits multiple orders simultaneously. 2. Why isn’t the billing information stored with the userInfo? Storing billing information in the user database is a bad idea. Not a day (well, a week) goes by without a site having credit card information exposed. Keeping this information only associated with an order and NOT PERMANENTLY STORED ON THE SYSTEM is the best security measure.

Quiz Answers

653

3. Why do we need to delete the UltraDev-added recordID from the Delete behavior? The Delete behavior inserts its own information about the record being deleted. Because we’ve created our own field for holding this information, UltraDev’s field conflicts with this value. 4. Why is the finished.asp page so very empty? We’ve reached the end of the UltraDev projects and it’s time to take a break!

Answers for Day 21, “Testing and Deploying Dynamic Applications” 1. What happens when you try to display a table with no end tag in Netscape? The contents of the table are not displayed on the screen. This is different from Internet Explorer, which assumes that you wanted to end the table and does it for you. 2. What feature of cascading style sheets should be avoided at all costs? Relatively positioned objects that have links in them. Netscape renders the links in relatively positioned objects as if that object was located in the upper-right corner of the document. The layout looks right, but is non-functional. 3. How can you prevent a not

null

error on an input form?

Validate the form using the Validate Form JavaScript behavior. This will guarantee that the form is filled in before the data is sent to the server. 4. How can you limit the amount of input so that it doesn’t exceed the limits of the database? Using simple input fields, you can do this with the “Max chars” attribute of the field. Unfortunately, this is not available for multi-line fields, which is where it actually counts.

A

APPENDIX

B

Customizing the UltraDev Environment In several places of the 21-day text, you’ve seen that you can edit the UltraDev configuration files manually to include your own preferences or alter existing defaults in the application. What makes UltraDev truly unique among modern complex applications is that almost all the files that UltraDev uses to configure its interface and behaviors are text-based. This means that with a bit of tinkering, you can change almost anything you want. The best place to get started with modifying the UltraDev system is by reading the “Extending Dreamweaver” portion of the online help system. This will give you a good idea of what you can and cannot do. If you’re impatient and just want to tinker, open up the configuration directory within your main UltraDev program directory and take a look around.

656

Appendix B

Tip

It is wise to make a copy of the configuration directory before you make any changes. If UltraDev fails to work properly, just replace the modified files with a copy of the original.

Menus An interesting place to start fiddling is the Menus subdirectory. Within this directory is a menus.xml file that contains the definitions for all the menus used in the system. Near the bottom of the file, for example, you can find the XML definition of the Window menu—it should look something similar to this: <menu name=”_Window” id=”DWMenu_Window”> <menuitem name=”O_bjects” key=”Cmd+F2” domrequired=”false” enabled=”true” command=”dw.toggleFloater(‘objects’)” checked=”dw.getFloaterVisibility(‘objects’)” id=”DWMenu_Window_Objects” /> <menuitem name=”_Properties” key=”Cmd+F3” domrequired=”false” enabled=”true” command=”dw.toggleFloater(‘properties’)” checked=”dw.getFloaterVisibility(‘properties’)” id=”DWMenu_Window_Properties” /> <menuitem name=”La_uncher” key=”” domrequired=”false” enabled=”true” command=”dw.toggleFloater(‘launcher’)” checked=”dw.getFloaterVisibility(‘launcher’)” id=”DWMenu_Window_Launcher” /> …

This is a much abbreviated copy of the complete file, but you get the overall picture. Each line is made up of a <menuitem> that has a name and a keyboard shortcut equivalent. You can actually go into these values and modify them to whatever you prefer. The only danger is in changing the command that executes a Dreamweaver/UltraDev JavaScript function and makes a window appear or disappear.

Tip

Although this is indeed a good way to edit keyboard shortcuts, an even easier way is to choose Keyboard Shortcuts from the Edit menu within UltraDev.

Customizing the UltraDev Environment

657

If you feel so inclined, you can copy menu items from one menu to another, or rearrange the menu system entirely. All you have to do is make sure that your tags are intact and valid.

Dialog Boxes and Windows Look in the Behaviors and Actions folders within the Configuration Folder. Here you’ll find the majority of the window and command definitions for UltraDev’s many windows and dialog boxes. For example, open the Popup Message.js file within the Behaviors directory. An annotated copy of the functions in the file is included here. Set up the behavior function that will be included in the HTML. Here, the function is just a rehash of the already existing alert function: //******************* BEHAVIOR FUNCTION ********************** //Passed a expression string, pops it up in an alert. function MM_popupMsg(msg) { //v1.0 alert(msg); }

Defines the events that can be used with the function. The onClick event is set to be the default. //******************* API **********************

//Can be used with any tag and any event function canAcceptBehavior(){ var retVal = “onClick,onMouseUp,onMouseDown,(onClick)”; return retVal; }

Defines the function from the behavior document (this document) that will be included in the HTML. In this case, it’s the MM_popupMsg function. //Returns a Javascript function to be inserted in HTML head with script tags. function behaviorFunction(){ return “MM_popupMsg”; }

Creates the function call string, including the message to display as taken from the user interface form. //Returns fn call to insert in HTML tag

B

658

Appendix B

function applyBehavior() { var index,frameObj,presBg,msgStr=””,retVal; with (document.theForm) { msgStr = escExprStr(message.value,false); } if (msgStr == null) retVal = MSG_BadBraces; else if (msgStr) retVal = “MM_popupMsg(‘“+msgStr+”’)”; else retVal = MSG_NoMsg; return retVal }

Sets the value of the message field in the user interface form in case the behavior is edited. function inspectBehavior(fnStr){ var argArray, msgStr; argArray = extractExprStr(fnStr); if (argArray.length == 1) { //expect 1 arg document.theForm.message.value = unescExprStr(argArray[0],false); } }

Finally, the initializeUI function sets any initial conditions in the user interface that must be addressed. //***************** LOCAL FUNCTIONS

******************

//Load up the frames, set the insertion point function initializeUI(){ document.theForm.message.focus(); //set focus on textbox document.theForm.message.select(); //set insertion point into textbox }

As you can see, using Javascript as the behavior/command programming language, Macromedia has opened up the extension of UltraDev and Dreamweaver to anyone who has a text editor and the patience to script. Supporting the behavior code is the user interface. Open the user interface file that corresponds to the JavaScript behavior file—Popup Message.htm. Amazingly, the interface itself is also defined in a text format that you might be familiar with—HTML. You can actually edit the interface of UltraDev within UltraDev itself. The source code for this simple UI is shown here: 1 2

Customizing the UltraDev Environment

3 <SCRIPT LANGUAGE=”JavaScript” 4 SRC=”Popup Message.js”> 5 <SCRIPT LANGUAGE=”JavaScript” 6 SRC=”../../Shared/MM/Scripts/setText.js”> 7 <SCRIPT LANGUAGE=”JavaScript” 8 SRC=”../../Shared/MM/Scripts/CMN/string.js”> 9 11 <SCRIPT SRC=”../../Shared/MM/Scripts/CMN/displayHelp.js”> 12 13 <SCRIPT LANGUAGE=”javascript”> 14 // Copyright 1999 Macromedia, Inc. All rights reserved. 15 16 //--------------- LOCALIZEABLE GLOBALS --------------17 18 var MSG_NoMsg = “Please enter a message or click Cancel.”; 19 var MSG_BadBraces = “Curly braces are reserved for 20 embedding variables and must be matched correctly.\n 21 Please fix the braces or click Cancel.”; 22 //--------------END LOCALIZEABLE --------------23 //--------------END JAVASCRIPT --------------24 25 <TITLE>Popup Message 26 <META HTTP-EQUIV=”Content-Type” CONTENT=”text/html”> 27 28 29

30

31

32 33 34 38 39 40 41

	35 36 37
Message:

42