Chapter 30. Building a Basic PHP Site

CONTENTS

 

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

PHP, the recursive acronym for PHP: Hypertext Preprocessor, is a great dynamic language. It's powerful enough for most needs, it's easy to figure out, and it's free! In addition, its clear and concise code makes it easy to understand and accounts for the rapid increase in its use by web developers. Together with MySQL (also free), PHP is giving many web designers a cheap and easy way to get dynamic.

This chapter, in conjunction with Chapter 26, "Introduction to Dynamic Dreamweaver," explains the requirements for getting your computer set up for PHP and MySQL. (Appendix B, "Online Resources for Dreamweaver Web Developers," has more information about setting up MySQL.) After everything has been installed and is running correctly, you can perform a couple of exercises related to the catalog being used to demonstrate dynamic sites.

Note

PHP support is brand new to Dreamweaver MX! If you're upgrading from UltraDev, this is a welcome addition to the family.

Setting Up Your Workstation to Work with PHP

To use PHP with Dreamweaver MX, you must download and install a few things. Before you can start creating pages, you need to set up a web server and an application server; set up your database, and database management system; create a database driver; and set up a folder where your web pages can officially be "served" by the web server. The following sections take you through that process for PHP.

Setting Up the HTTP (Web) Server

PHP works with any of the three HTTP servers covered in Chapter 26: Internet Information Services (IIS), Personal Web Server (PWS), and Apache. It also works on Windows, UNIX, and Mac OS X.

If you're developing on a Windows computer, it's easiest to set up IIS or PWS, but you can set up Apache if you prefer. (See the section in Chapter 26 called "Setting Up for Development on a Remote Computer" for information on installing these servers.)

If you're working on Mac OS X, Apache is already installed on your computer, so this step is taken care of for you.

Setting Up the Application Server

The PHP application server module functions as an add-on to the web server. Before you can begin developing with PHP, you'll need to download, install, and configure PHP on your computer. Luckily, PHP is free and easy to obtain on the Internet.

Downloading and Installing PHP (Windows)

PHP for Windows works with IIS, PWS, or Apache. To set it up, just follow these instructions.

1. Point your browser to www.php.net/downloads.php. From the Windows Binaries section of the page, download the PHP 4.1.2 installer.

   Note

   

   PHP is always improving. If there's a newer version available by the time you read this, download that instead.

2. The downloaded file is a Windows installation file (EXE). Double-click on this file to install it, and follow the instructions as they appear.

3. Choose the standard installation and install to the default folder (c:\PHP).

4. For SMTP server, type localhost and enter [e-mail] for an email address. These won't be needed for the purposes of this exercise.

5. For server type, select the web server that you are currently running. You might need to double-check what version of IIS you're running.

6. When you're asked what script mappings to choose, select WWW Service Master properties and click.

That's it! PHP is now installed.

Enabling PHP (Mac OS X)

As long as you're running version 10.1 (or higher) of the new Mac OS, the world of PHP is your oyster. Not only does the Mac OS (10.1 and above) ship with Apache, it also ships with a limited version of PHP that includes MySQL support. To get yourself up and running, all you have to do is enable it. Just follow these steps:

1. Launch the Terminal application (find it in the Applications > Utilities folder).

2. Navigate to the folder where the configuration will take place by typing this in the Terminal window:

   cd /etc/httpd

   Press Enter or Return to officially enter this instruction into the Terminal application. (Always end lines of Terminal code by pressing Enter or Return.)

3. Now type the following:

   sudo apxs -e -a -n php4 libexec/httpd/libphp4.so

   Press Enter or Return to finish this line. You'll be asked for your password. Type in the administrator's password that you use any time you make changes to your Mac system. Press Enter or Return again.

4. Finally, type the following (no typos!):

   sudo perl -p -i.bak -e 's%#(AddType \S+-php[ -])%$1%i' httpd.conf

   When you're sure the code is correct, press Enter or Return.

5. The computer will take a few moments to process this information. When the % prompt re-appears, you're all configured. All you need to do is restart Apache by typing this:

   sudo apachectl graceful

Congratulations! Aside from a little typing frenzy, that wasn't hard at all. (Figure 30.1 shows the entire Terminal session happening.)

Figure 30.1. Using the Terminal window to enable PHP in Mac OS X.

Testing Your PHP Installation (Windows and Mac OS X)

To make sure PHP is indeed functioning on your computer, create a test file. Do this:

1. Open a text editor (or Dreamweaver in Code view) and create a new file.

2. Save your new file as test.php and place it in the default location where your web server stores served pages: For Windows, place the file in c:\inetpub\wwwroot\ for IIS/PWS, or c:\Program Files\Apache Group\Apache\htdocs\ for Apache. For Mac OS X, place the file in /Library/Webserver/Documents.

3. Enter the following content:

   <html>  <head>  <title>PHP Test</title>  </head>  <body>  <?php    phpinfo()  ?>  </body>  </html>

4. Launch your browser and enter your page's URL in the address field: http://localhost/test.php. If the resulting page looks like the one in Figure 30.2, PHP is ready for action! (If you don't get this result, make sure you've coded and saved your test file correctly before troubleshooting the PHP installation.)

   Figure 30.2. The PHP information page indicating that PHP is running on your computer.

   

Setting Up the Database

To work with PHP in Dreamweaver, you must also use the MySQL DBMS. (Unlike other application servers, PHP coding is different for different DBMSs. Though it is possible to use PHP with other systems, such as PostgreSQL, Dreamweaver only supports PHP/MySQL coding.) Before you can proceed with the exercises here, you must install and configure MySQL; add the antiques database to your MySQL installation; and if you're working on Windows install the MyODBC driver. See Appendix B for detailed instructions on all of these tasks.

Setting Up Your Local and Remote Folders

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

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

To set up your remote folder, create a new folder called antiques_php and store it where your web server can serve it. (Put it in the same folder where you put your test.php file earlier in the chapter.) This folder remains empty for now.

Note

If you're using IIS or PWS, you can also follow the instructions in Chapter 26 to set a virtual directory by enabling web sharing for a folder. If you do this, your remote folder can be stored anywhere on the computer housing the web server.

Setting Up a PHP Site in Dreamweaver

After you've got your workstation files set up, it's time to tuck into Dreamweaver. The first step here is to define a site, complete with local, remote, and application server information. Dreamweaver needs to know where your local and remote folders are. It also needs to know what kind of dynamic site you'll be creating (PHP).

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

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

or

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

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

http://localhost/mysite/index.html

or

http://192.128.164.123/mysite/index.html

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

Exercise 30.1 Setting Up the Antiques Barn Site (PHP)

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

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

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

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

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

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

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

   

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

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

   

   Note

   

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

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

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

   

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

   

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

   Also in this screen, examine the URL Prefix field. Dreamweaver should have filled in this information based on your previous entries. It needs to have the host name or IP address of your server plus the folder name of your remote folder, like this:

   http://localhost/antiques_php

   or

   http://192.123.111.111/antiques_php

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

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

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

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

Setting Up a Database Connection

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

Exercise 30.2 Creating a Database Connection

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

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

2. From the Application panel group, open the Databases panel. If you have catalog.php open, the panel will have a plus (+) button at the top. Click it and, from the pop-up menu, choose MySQL connection. Figure 30.7 shows this happening.

   Figure 30.7. Choosing a MySQL connection from the Databases panel.

   

   Note

   

   Is you're used to using Dreamweaver with ASP or any other server technology, you might be wondering how you can make a connection before you've defined a database driver. For this kind of page, you don't need one!

3. The MySQL Connection dialog box appears (see Figure 30.8). Several pieces of information are required to fill in this dialog box. For your connection's name, enter antiques_conn. (The connection name will be used in the connection script. It can be any one-word name with no special characters, but it's common practice to include con or conn in the name to denote a connection.)

   Figure 30.8. Defining the antiques_conn database connection.

   

4. The MySQL server is the name or IP address of the computer housing the MySQL DBMS. If you're set up for local development (with the server and MySQL on your working computer), enter localhost in this field. If you're working on a remote computer, enter the IP address of the computer where MySQL and your web server reside.

5. Depending on how you set up your MySQL database, you might not think you have a username, but you do. If you can start up the MySQL client program without specifying a username, then your username is the username that you use to log onto your computer. If you don't need a password to start MySQL, leave the password field blank. You can't leave the username field blank.

6. The database field should contain the name of the database you want to connect to in this case, antiques. You can type the name in the input field, but it's a good idea to avoid typos and test your connection by clicking the Choose button. When you do this, if you've entered the above information correctly a dialog box will appear listing all the MySQL databases on the specified host (for example, localhost or the IP address you entered). If some of your information is wrong, or if your MySQL server program isn't currently running, you'll get an error message.

7. Finally, before you leave the dialog box, click Test. If your username or password is incorrect, you'll get a permissions error. If everything is working properly, you'll get a successful connection message.

8. When you have made a successful test, click OK to close the dialog box.

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

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

   

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

    <?php  # FileName="Connection_antiques_conn.htm"  # Type="MYSQL"  # HTTP="true"  $hostname_nr = "localhost";  $database_nr = "ANTIQUES";  $username_nr = "don";  $password_nr = "maxx";  $nr = mysql_pconnect($hostname_nr, $username_nr, $password_nr) or  die(mysql_error());  ?>

    You don't need to know what everything in there means. However, one important piece of syntax that you should get familiar with is the <?php...?> tags. All PHP code in an HTML document is contained within these tags. When the PHP module processes this page, it looks for these tags and executes all code inside them. All other code on the page is assumed to be regular HTML or client-side scripting and is just passed back to the browser.

Displaying Dynamic Data

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

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

Collecting a Recordset

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

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

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

   Note

   

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

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

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

Exercise 30.3 Collecting Data for the Antiques Barn Catalog Page

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

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

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

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

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

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

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

   

   Tip

   

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

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

Inserting Dynamic Elements

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

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

Exercise 30.4 Displaying Dynamic Data in the Antiques Barn Catalog Page

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

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

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

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

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

   

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

   <?php echo $row_Recordset1['itemname']; ?>

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

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

   <p><?php echo $row_Recordset1['itemname']; ?></p>

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

   <p class="itemname">  <?php echo $row_Recordset1['itemname']; ?>  </p>

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

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

5. To dress up the price a little bit, type a $ before its recordset. Figure 30.13 shows this happening.

   Figure 30.13. Adding manual text to a dynamic text element.

   

   Tip

   

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

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

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

   To insert the dynamic image, start by inserting an image as you normally would. (Use the Image object from the Insert > Common panel.) When the Insert Image dialog box appears, however, choose the Data Sources option (see Figure 30.14). The list of image files is replaced with a list of fields from your recordset. Choose imagefile and click OK.

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

   

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

   <img src="<?php echo $row_Recordset1['imagefile']; ?>">

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

Previewing with Live Data

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

• Live Data view. In the Document toolbar, click the Live Data button to switch from viewing placeholders to viewing actual data.

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

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

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

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

   Note

   

   If Live Data view doesn't engage properly, it means there's a problem with your site definition. If this happens to you, go back to the previous exercises, and the preceding chapter if necessary, and troubleshoot.

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

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

   

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

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

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

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

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

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

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

   <img src="images/<?php echo $row_Recordset1['imagefile']; ?>">

    

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

   Figure 30.16. The Antiques Barn catalog page with dynamic image and text in place.

   

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

Displaying Multiple Records with Repeated Regions

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

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

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

   Figure 30.17. The Repeated Region, Recordset Navigation bar, and Recordset Navigation Status objects.

   

Navigating Through Multipage Displays

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

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

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

Exercise 30.6 Displaying Multiple Records in the Antiques Barn Catalog Page

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

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

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

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

   Figure 30.18. Inserting a repeating region that will display five records at a time.

   

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

   Tip

   

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

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

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

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

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

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

   

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

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

   

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

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

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

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

   Figure 30.21. Inserting a Recordset Navigation Status object.

   

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

    As with any dynamic text element, you can format the status line as you like. You also can change any of the static text, as long as you don't disturb the placeholder text. (In Figure 30.20, for instance, the word records has been changed to items.) Congratulations! The Antiques Barn catalog page is now complete. You've built your first PHP document.

Summary

PHP is one of the easiest dynamic languages to learn and decipher. It uses a small amount of concise code to enable powerful functionality. The code is logical and easy to understand if you give it a lookover. It also, along with MySQL, gives a simple, stable and free dynamic environment in which to develop your web applications, on either Windows or Mac.

CONTENTS