Adobe
Products
Acrobat
Creative Cloud
Creative Suite
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
Student and Teacher Editions
More products
Solutions
Creative tools for business
Digital marketing
Digital media
Education
Financial services
Government
Web Experience Management
More solutions
Learning Help Downloads Company
Buy
Home use for personal and home office
Education for students, educators, and staff
Business for small and medium businesses
Licensing programs for businesses, schools, and government
Special offers
Search
 
Info Sign in
Welcome,
My cart
My orders My Adobe
My Adobe
My orders
My information
My preferences
My products and services
Sign out
Why sign in? Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
Adobe
Products Sections Buy   Search  
Solutions Company
Help Learning
Sign in Sign out My orders My Adobe
Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change. Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.
Qty:
Purchase requires verification of academic eligibility
Subtotal
Review and Checkout
Adobe Developer Connection / Dreamweaver Developer Center /

Building your first dynamic website – Part 3: Displaying content from a database

by David Powers

David Powers
  • http://foundationphp.com/

Content

  • Review the task ahead
  • Add the HTML structure to the news page
  • Style the news page with CSS
  • Creating the Archives links
  • Linking to recent posts
  • Displaying items in the main content column
  • Creating recordsets for archives and recent posts
  • Merging the recordsets

Created

18 July 2010

Page tools

Share on Facebook
Share on Twitter
Share on LinkedIn
Bookmark
Print
CMS CSS Dreamweaver CS5 dynamic website MySQL PHP

Requirements

Prerequisite knowledge

  • Part 1: Setting up the site and database
  • Part 2: Developing the back end

User level

Beginning

Required products

  • Dreamweaver (Download trial)

Sample files

  • check_php_pt2_complete.zip
  • check_php_pt3_complete.zip

Additional Requirements

XAMPP (if you have Windows)

  • Learn more

MAMP (if you have Mac OS X)

  • Learn more

This is Part 3 of a three-part tutorial series, in which you use Dreamweaver CS5 to build a database-driven news page of a fictitious publication, Check Magazine. Parts 1 and 2 of this series showed how to build a simple content management system (CMS) for the news items. In this final part, working from a designer's image of what the finished page should look like, you'll add the necessary HTML, CSS, and PHP code to draw the contents from the database and display it. The contents of the page will change when a user clicks a link in the Archives or Recent Posts columns.

In the process, you'll learn how to format dates stored in MySQL, and add conditional logic to the PHP code to control which content is displayed. You'll also learn how to use the Recordset dialog box in Advanced mode. You don't need prior knowledge of PHP or SQL, but you should be prepared to dive into the code automatically generated by Dreamweaver's server behaviors and edit it.

Review the task ahead

The designer has given you a piece of artwork (or comp) showing what the news page for a fictitious publication, Check Magazine, should look like (see Figure 1).

The artist's concept of the finished page.
Figure 1. The artist's concept of the finished page.

It's your task to translate this concept into reality. In the first two parts of this tutorial series, you created the database table to store the news items and built a simple CMS to insert, update, and delete items. If you haven't completed parts 1 and 2, please do so now, because the site files and database are essential.

The comp shows the content displayed as three columns: Archives, Recent Posts, and the main column, which displays the two most recent posts. This means you need to create at least three recordsets:

  • The Archives column needs a recordset that displays each month and year in which posts were added to the database.
  • The Recent Posts column needs a recordset to display the titles of recent posts. You'll limit the recordset to the 10 items.
  • When the page first loads the main column needs a recordset that retrieves full details of the two most recent items, but when a link in the Archives or Recent Posts column is clicked, you need to display the appropriate content. You could create different pages to display the details of archives and recent posts, but it's more practical to use PHP conditional logic to display the different recordsets in the same page.

Another challenge is to convert the dates stored in MySQL into different formats. The text links in the Archives column need to display the month and year, but the value passed through the link in a query string needs to be in a format suitable for filtering a recordset. Moreover, the dates in the main content area are formatted as "month date, year".

There's a lot of work ahead. It's time to fire up Dreamweaver.

Add the HTML structure to the news page

Apart from the banner and menu at the top, news.php is a single image. Before doing anything else, you need to add the Point of View heading, and create the structure for the three columns of content.

  1. Open news.php in Dreamweaver.
  2. Delete the image of dummy content. It might be difficult to select in Design view, so the easiest way is to open Code view, and delete the code highlighted on line 23 in Figure 2.
Delete the image that displays the page's dummy content.
Figure 2. Delete the image that displays the page's dummy content.
  1. Add a new <div> to hold the dynamic content immediately after the banner <div> by clicking the Insert Div Tag button in the Common category of the Insert panel/bar, or select Insert > Layout Objects > Div Tag.

    In the Insert Div Tag dialog box, use the settings shown in Figure 3, and click OK.

Creating a new <div> for the page content.
Figure 3. Creating a new <div> for the page content.
  1. In Design view, delete the placeholder text in the new <div>, and click the Image button in the Common category of the Insert panel/bar, or select Insert > Image.In the Select Image Source dialog box, navigate to the images folder, and select blog_hdr.gif.

    In the Image Tag Accessibility Attributes dialog box, type Point of View in the "Alternate text" text box, and click OK. This inserts the blog heading image.

  2. The three columns need to be nested inside the blog <div>, but after the image you have just inserted.

    To insert the first <div>, click the Insert Div Tag button in the Common category of the Insert panel/bar, or select Insert > Layout Objects Div > Tag again.

    In the Insert Div Tag dialog box, use the settings shown in Figure 4, and click OK.

Inserting the <div> for the Archive column.
Figure 4. Inserting the <div> for the Archive column.

Selecting "Before end of tag" and <div id="blog"> inserts the new <div> immediately before the closing tag of the blog <div>.

  1. Insert another <div> by clicking the Insert Div Tag button in the Common category of the Insert panel/bar, or selecting Insert > Layout Objects > Div Tag. Use the settings in Figure 5.
Inserting the <div> for the Recent Posts column.
Figure 5. Inserting the <div> for the Recent Posts column.

This time, the Insert pop-up menu is set to "After tag" and <div id="archive"> is selected in the pop-up menu alongside. This inserts the <div> after the one for the Archive column.

  1. One more to go . . . Add another <div> using the following settings:
    • Insert: After tag <div id="recent">
    • ID: blog_posts
  2. In Design view, the page should now look like Figure 6.
The news page after inserting the <div> tags for the columns.
Figure 6. The news page after inserting the <div> tags for the columns.
  1. Replace the placeholder text in the archive <div> with Archives, and format it as an <h3> heading.

    Press Enter/Return to create a new paragraph, and type Month & year. With your insertion point in the new paragraph, convert it to an unordered list by clicking the Unordered list button in the Property inspector in HTML mode.

  2. Replace the placeholder text in the recent <div> with Recent Posts, and format it as an <h3> heading.

    Press Enter/Return to create a new paragraph, and type Post title. Convert the new paragraph into an unordered list.

  3. Format the placeholder text in the blog_posts <div> as an <h2> heading, and press Enter/Return to create a new paragraph.

    Type Updated on in the new paragraph.

  4. Press Enter/Return again to create a new paragraph, and type Blog post.

    The page should now look like Figure 7.

The page is beginning to take shape.
Figure 7. The page is beginning to take shape.
  1. Save news.php.

Style the news page with CSS

Next, you need to add style rules to the site's style sheet to turn the horizontal <div> elements into columns. The Archive and Recent Posts columns have colored backgrounds and need to be of equal height. Instead of applying backgrounds to the columns, you'll use an image as the background to the blog <div>, and float the two columns over it.

  1. Open the CSS Styles panel, and click the New CSS Rule icon at the bottom right of the panel.

    In the New CSS Rule dialog box, use the following settings:

    • Selector Type: ID
    • Selector Name: blog
    • Rule Definition: check_cs5.css

    Click OK to open the CSS Rule Definition dialog box.

  2. Select Background from the Category list, and click the Browse button alongside the Background-image text box.

    Navigate to the images folder, and select blog_bg.gif.

    Set Background-repeat to repeat-y.

    Click OK. The background image tiles down the side of the blog <div> creating the illusion of two columns.

  3. The next task is to start moving the text into position. Click the New CSS Rule icon again, and use the following settings:
    • Selector Type: ID
    • Selector Name: blog_posts
    • Rule Definition: check_cs5.css

    Click OK to open the CSS Rule Definition dialog box.

  4. Select the Box category from the list on the left.

    Deselect the "Same for all" check box for Margin, and set Left to 312 px.

    Click OK.

    The third column moves into place to the right of the colored backgrounds. It's too low down, but will move into place once the other columns have been floated.

  5. Click the New CSS Rule icon again. Use the same values as before for Selector Type and Rule Definition. Set Selector Name to archive.

    In the CSS Rule Definition dialog box, set Color in the Type category to light gray (#CCC). Select the Box category, and set Width to 115 px. Click OK.

  6. Clicking New CSS Rule again, using the same values for Selector Type and Rule Definition, and setting Selector Name to recent.

    Set Color in the Type category to white (#FFF) and Width in the Box category to 135 px. Click OK.

  7. Now float and adjust the text in the Archives and Recent columns.

    Click the New CSS Rule icon. This time use the following settings:

    •Selector Type: Compound

    •Selector Name #archive, #recent

    •Rule Definition: check_cs5.css

    This compound selector will apply the same rules to both columns.

    In the CSS Rule Definition dialog box, set Font-size in the Type category to 12 px.

    In the Box category, set Float to left.

    Deselect the "Same for all" check box for Padding, and set Top and Bottom to 10 px, and Right and Left to 15px.

    When you click OK, the three columns should be correctly aligned (see Figure 8).

The basic structure of the news page is now in place.
Figure 8. The basic structure of the news page is now in place.
  1. The main focus of this tutorial is displaying content stored in a database, so rather than giving step-by-step instructions for the remaining style rules, here they are for you to copy and paste into check_cs5.css:
#archive h3, #recent h3 { margin: 0 auto 10px 0; text-transform:uppercase; } #archive ul, #recent ul { list-style-type:none; margin:0; padding:0; } #recent li { margin-bottom:0.7em; } #archive a, #recent a { text-decoration:none; } #archive a:link, #archive a:visited { color: #CCC; } #archive a:hover, #archive a:active, #archive a:focus { color:#999; text-decoration:underline; } #recent a:link, #recent a:visited { color: #FFF; } #recent a:hover, #recent a:active, #recent a:focus { color:#CCC; text-decoration:underline; } #blog_posts h2, .updated { margin: 0 5px 0 0; background-color: #CCC; padding: 10px 10px 0 10px; } .updated { margin-bottom:10px; padding-bottom: 5px; font-size: 13px; color: #646664; } .blog_entry { padding: 0 30px 0 10px; }
  1. Save news.php and check_cs5.css.

Creating the Archives links

In Part 2 of this tutorial series, you learned how to use the Recordset dialog box in Simple mode. The recordsets needed for the news page are more complex, so you need to use Advanced mode. Working in Advanced mode requires an understanding of SQL, the language used to communicate with a database. Don't worry. I'll explain what you need to know as you go along.

The Archives links need to list the month and year in which items were added to the news table in the database. The updated column contains a MySQL timestamp, which contains the date and time. So, there's no problem finding the dates. The main task is to format them. Conveniently, MySQL's DATE_FORMAT() function is designed to do just that.

  1. With news.php the active document, click the plus button at the top left of the Server Behaviors panel, and select Recordset.
  2. When the Recordset dialog box opens, click the Advanced button on the right to enter Advanced mode (see Figure 9).
The Recordset dialog box in Advanced mode.
Figure 9. The Recordset dialog box in Advanced mode.

The Name text box and Connection pop-up menu are the same as in Simple mode, but the SQL area is where you build the database query. Dreamweaver gives you some help with the tree menus in the "Database items" area and the Add to SQL buttons, but you normally need to edit at least part of the query manually.

You'll see what the Variables area does later when building the recordsets to retrieve news items to display in the main column.

Note: Figure 9 shows a SQL query that selects all columns and records in the news table (an asterisk is shorthand for "all columns"). This happens because you can always switch from Simple mode to Advanced to edit a query. The next time you open the Recordset dialog box in Advanced mode, the SQL area will be empty. When you start using the tools in the "Database items" area, the asterisk will be replaced by the columns you select. Once you start editing in Advanced mode, you need to clear the SQL area to switch back to Simple mode.

  1. Enter getArchives in the Name text box.
  2. Expand the Tables tree menu in the "Database items" area at the bottom of the dialog box, and then expand news. This displays the names of the columns in the news table.

    Select updated, and click the SELECT button twice.

    With updated still selected, click the ORDER BY button.

    The query in the SQL area should now look like this:

SELECT news.updated, news.updated FROM news ORDER BY news.updated

This query selects the updated column twice, and uses the same column to determine the sort order. The date needs to be in two formats: the first to display the month and year, the second to use in a SQL query to retrieve the records for that period. However, this is as far as Dreamweaver will help you. The rest's up to you.

  1. Edit the query in the SQL area like this:
SELECT DATE_FORMAT(news.updated, '%M %Y') AS archive, DATE_FORMAT(news.updated, '%Y-%m') AS link FROM news ORDER BY news.updated DESC

Note: There must be no space between DATE_FUNCTION and the opening parenthesis. Inserting a space triggers a MySQL error.

The MySQL DATE_FORMAT() function takes two arguments: the date column you want to format, and a string that specifies how to format it. You build the format string using plain text and specifiers, which begin with a percentage sign. The specifiers used here are:

  • %M: Month name in full (January, February)
  • %Y: Year as four digits
  • %m: Month number with leading zero

There's a full list of MySQL DATE_FORMAT() specifiers in the Date and Time Functions section of the MySQL Reference Manual.

When you use a MySQL function in a SQL query, you assign the result to an alias, which is how the value will be listed in the recordset. So, this query formats the date as Month Year, and assigns it to the alias archive. It's also formatted as the year and month in numbers separated by a hyphen, and assigned to the alias link.

The other change is the addition of DESC, which returns the result in descending order—in other words, the most recent first.

  1. Click the Test button to see the results of the query (see Figure 10).
The dates are formatted and sorted.
Figure 10. The dates are formatted and sorted.
  1. There's just one problem: you have duplicate entries. Fix that by clicking OK to close the Test SQL Statement panel, and add DISTINCT after SELECT like this:
SELECT DISTINCT DATE_FORMAT(news.updated, '%M %Y') AS archive, DATE_FORMAT(news.updated, '%Y-%m') AS link FROM news ORDER BY news.updated DESC
  1. Click Test again. This time, there's just one record for each month.Click OK to close the Test SQL Statement panel, and click OK again to create the recordset.
  2. Open the Bindings panel, and expand Recordset (getArchives).
  3. In Design view, select the words "Month & year" in the Archives column, and press Delete.
  4. With the insertion point still in the unordered list, select archive in the Bindings panel, and click the Insert button at the bottom of the panel. This inserts a dynamic text object in the unordered list.
  5. With the dynamic text object still selected, click the Browse for File icon alongside the Link text box in the Property inspector.
    • In the Select File dialog box, select news.php, and then click the Parameters button. You're linking back to the current page, but you need to add a query string, which will be used to create a recordset for display in the main column.
    • In the Parameters dialog box, type archive in the Name field.
    • Click in the Value field, and then click the lightning bolt icon on the right of the field to open the Dynamic Data dialog box.
    • Note: Be careful to click the correct lightning bolt icon. Both the Name and Value fields have one. It's the one on the Value field that you want.

    • Select link from the recordset in the Dynamic Data dialog box.
    • Click OK three times to close the Dynamic Data, Parameters, and Select Field dialog boxes.
  6. Click <li> in the Tag selector at the bottom of the Document window to select the list item that contains the dynamic text object and link you have just created.
  7. In the Server Behaviors panel, click the plus button at the top left of the panel, and select Repeat Region.Select the option to show all records, and click OK.
  8. Open Split view to confirm that the code for the archive <div> looks like Figure 11.
The PHP code for the archive <div>.
Figure 11.The PHP code for the archive <div>.
  1. Save news.php.

Linking to recent posts

Creating the links to the recent posts follows the same pattern as for the archives. There are no dates in the recordset, so creating the SQL query is a lot easier. Rather than retrieving all records, you need only the 10 most recent records. Because the results of the recordset will be displayed in a repeat region, your first instinct might be to use the option in the Repeat Region server behavior to show 10 records at a time. However, this generates a lot of unnecessary code if you don't need to use the Recordset Navigation Bar. It's more efficient to set the limit in the SQL query.

  1. With news.php open in the Document window, click the plus button at the top left of the Server Behaviors panel, and select Recordset.
  2. In the Name text box, type getRecent.
  3. Expand the Tables tree menu in the "Database items" area, and then expand news.

    You need the primary key and title of the 10 most recent records, so select post_id, and click the SELECT button. Then select title, and click SELECT.

    The records should be ordered chronologically, so select updated, and click ORDER BY.

    The query Dreamweaver has built in the SQL area should look like this:

SELECT news.post_id, news.title FROM news ORDER BY news.updated
  1. To display the most recent results first, add DESC at the end of the ORDER BY line.
  2. To retrieve a specific number of records, you add LIMIT followed by the required number at the end of the query.

    After editing, the SQL area should look like this:

SELECT news.post_id, news.title FROM news ORDER BY news.updated DESC LIMIT 10
  1. Click the Test button. Only 10 records are selected. You can tell they're in descending order by the values of post_id (see Figure 12).
Using LIMIT specifies the maximum number of records retrieved.
Figure 12. Using LIMIT specifies the maximum number of records retrieved.
  1. Click OK to close the Test SQL Statement panel, and then click OK to create the recordset.
  2. You now need to bind the results of the getRecent recordset to the unordered list in the Recent Posts column. This is the same procedure as you used for the Archives column.

    Select the "Post title" text in the Recent Posts column, and delete it.

    In the Bindings panel, select title, and click the Insert button at the bottom of the panel.

    With the dynamic text object still selected, click the Browse for File icon alongside the Link text box in the Property inspector, and select news.php. Then click the Parameters button.

    In the Parameters dialog box, type post_id in the Name field. Then select the Value field and click the lightning bolt icon to open the Dynamic Data dialog box. Select post_id from Recordset (getRecent). Close all open dialog boxes.

  3. Click <li> in the Tag selector at the bottom of the Document window to select the whole list item in the Recent Posts column, and apply a Repeat Region.

    There's now more than one recordset on the page, so you need to select the correct one in the Repeat Region dialog box.

    Select getRecent from the Recordset pop-up menu, and choose the option to show all records.

    Click OK to apply the Repeat Region server behavior.

  4. In Split view, check that the code for the recent <div> looks like Figure 13.
The PHP code for the recent <div>
Figure 13. The PHP code for the recent <div>
  1. Save news.php.

Displaying items in the main content column

All that remains is to display the blog posts in the main column. When the page first loads, you want to display the two most recent posts, but when a link is clicked in the Archives column, the page should display the posts from the selected period, and when a link is clicked in the Recent Posts column, it should display the selected post. The question is how to control the display.

Each scenario requires a different recordset, but you want to display only one of them. One approach is to create three recordsets, each with its own repeat region, and then add some conditional logic to display the one you want. However, that's overkill. There's no point in querying the database if you're not going to use the result. The solution you're going to use is to build three recordsets, and then merge them into one. It involves some hand-coding, but if you follow the instructions carefully, you should have no problems.

Create the basic recordset and repeat region

The first stage is to create a recordset and repeat region to display the two most recent items when the page first loads.

  1. Click the plus button at the top left of the Server Behaviors panel, and select Recordset.
  2. In the Recordset dialog box in Advanced mode, type getDisplay in the Name text box.
  3. Expand the Tables tree menu in the "Database items" area to access the columns of the news table.

    You want to display all columns, except post_id. In turn, select each of the remaining columns—title, blog_entry, and updated—and click the SELECT button.

    With updated still selected, click ORDER BY.

    This produces the following query in the SQL area:

SELECT news.title, news.blog_entry, news.updated FROM news ORDER BY news.updated
  1. You want to display the date in the format of month name, followed by the date and year. The MySQL DATE_FORMAT() format string for this is '%M %e, %Y'. This introduces a specifier you haven't used before: %e, which displays the day of the month without a leading zero.
  2. You also want the results in reverse order, so you need to add DESC to the ORDER BY clause of the SQL query.

    To limit the number of results to 2, add LIMIT 2 at the end of the query.

    The amended SQL looks like this:

SELECT news.title, news.blog_entry, DATE_FORMAT(news.updated, '%M %e, %Y') AS formatted FROM news ORDER BY news.updated DESC LIMIT 2
  1. Click Test to verify the recordset produces the desired output (see Figure 14).
The test results of the getDisplay recordset.
Figure 14. Use the menu to choose Duplicate Page to make a copy of the Master Page

Click OK to close the Test SQL Statement panel, and then click OK to close the Recordset dialog box.

  1. Open the Bindings panel, and expand Recordset (getDisplay). Replace the placeholder text in the main column with dynamic text objects for the title and blog_entry columns, and position the formatted dynamic text object alongside the words "Updated on" (see Figure 15).
The dynamic text objects have been added to the main column.
Figure 15. The dynamic text objects have been added to the main column.
  1. Click to the right of the blog_entry dynamic text object, and drag upwards and left to select the three dynamic text objects in the main column.
  2. With the dynamic text objects still selected, click the plus button at the top left of the Server Behaviors panel, and select Repeat Region.

    In the Repeat Region dialog box, select the getDisplay recordset and the option to show all records.

    Don't worry if the layout in Design view shifts. If you selected the elements correctly, the page should display correctly when you test it.

  3. Save news.php, and click Live View to test the page. It should look like Figure 16.
The page is beginning to look just like the designer's original concept.
Figure 16. The page is beginning to look just like the designer's original concept.

There are just two problems: the date should be part of each item's heading, and the blog posts are solid blocks of text. The new lines in the underlying code are being ignored.

  1. Exit Live View, and click anywhere inside the "Updated on" text. In the Property inspector, select updated from the Class pop-up menu. The text is restyled to become part of the item's heading.
  2. In the Server Behaviors panel, double-click Dynamic Text (getDisplay.blog_entry) to open the Dynamic Text dialog box. From the Format pop-up menu, select Convert – New Lines to BRs (see igure 17).
Applying a format to a dynamic text object.
Figure 17. Applying a format to a dynamic text object.

This wraps the dynamic text object in the PHP nl2br() function, which converts newline characters to HTML <br /> tags.

Click OK to close the Dynamic Text dialog box.

  1. Save news.php, and test it again in Live View. The items are now formatted correctly (see Figure 18).
The blog post now is now formatted correctly.
Figure 18. The blog post now is now formatted correctly.

Creating recordsets for archives and recent posts

The next stage is to create separate recordsets for the archives and recent posts. The links in both columns use a query string to pass a variable through the URL. You use these variables to filter the recordsets in the same way as you did in Part 2 to update or delete a record. However, you can't use the Recordset dialog box in Simple mode, because the dates need to be formatted. Instead, you define a placeholder variable for the SQL query.

After you have created the recordsets, you need to merge the code manually and build the conditional logic to control the display in the main column. To make this easy, name the recordsets getDisplay2 and getDisplay3.

  1. Exit Live View, and double-click Recordset (getDisplay) in the Server Behaviors panel to open the Recordset dialog box.
  2. Select the query in the SQL area, copy it to your clipboard, and then click Cancel to close the Recordset dialog box without making any changes.
  3. Click the plus button at the top left of the Server Behaviors panel, and select Recordset.

    Enter getDisplay2 in the Name text box, and paste the query from your clipboard into the SQL area.

    You don't need to limit the number of records, so delete LIMIT 2. The query should now look like this:

SELECT news.title, news.blog_entry, DATE_FORMAT(news.updated, '%M %e, %Y') AS formatted FROM news ORDER BY news.updated DESC
  1. Expand the Tables tree menu in the "Database items" area, and select the updated column in the news table. Click the WHERE button. This adds a WHERE clause to the query like this:
SELECT news.title, news.blog_entry, DATE_FORMAT(news.updated, '%M %e, %Y') AS formatted FROM news WHERE news.updated ORDER BY news.updated DESC

On its own, this is meaningless. Dreamweaver expects you to complete the WHERE clause manually. To select the correct records, the WHERE clause needs to match the value in the updated column to the value passed through the query string from one of the links in the Archive column.

The value in the query string is formatted as a year and the number of the month (with a leading zero, if necessary) separated by a hyphen. To compare this with the updated column, you need to format the column in the same way. For example, if the value in the query string is 2010-06, the query needs to find all records where DATE_FORMAT(news.updated, '%Y-%m') matches 2010-06.

  1. Edit the WHERE clause like this:
WHERE DATE_FORMAT(news.updated, '%Y-%m') = var1

This formats the updated column and compares it to var1, which is a placeholder for the value passed through the query string. You can use any name for the placeholder, as long as it doesn't clash with anything else in the SQL query.

  1. You define the placeholder in the Variables section of the Recordset dialog box.

    Click the plus button alongside Variables to open the Add Variable dialog box, and use the following settings (Figure 19):

    • Name: var1
    • Type: Text
    • Default value: -1
    • Runtime value: $_GET['archive']
Setting the values for the placeholder variable.
Figure 19. Setting the values for the placeholder variable.

You need to use Text as the Type because the value contains a hyphen. You could also choose Date, but there's no difference in the way the PHP code handles Text or Date.

Setting the default value to -1 prevents the recordset from returning a result if the variable in the query string is missing.

PHP stores variables passed through a query string in what's called the $_GET array. To access the value, put the name of the variable in quotes between square brackets after $_GET. PHP is case-sensitive, so GET must be in uppercase.

Click OK to close the Add Variable dialog box.

  1. You can reuse part of the SQL query for the Recent Posts links. So, copy the query in the SQL area to your clipboard before clicking OK to create the recordset.
  2. Click the plus button at the top left of the Server Behaviors panel, and select Recordset.
  3. Name the new recordset getDisplay3, and paste the query from your clipboard into the SQL area. Delete the WHERE and ORDER BY lines, leaving the following:
SELECT news.title, news.blog_entry, DATE_FORMAT(news.updated, '%M %e, %Y') AS formatted FROM news
  1. Expand the Tables tree menu in the "Database items" area, and select post_id in the news table. Click the WHERE button. Add = var2 at the end of that line so the query looks like this:
SELECT news.title, news.blog_entry, DATE_FORMAT(news.updated, '%M %e, %Y') AS formatted FROM news WHERE news.post_id = var2
  1. Click the plus button alongside Variables, and use the following settings in the Add Variable dialog box:
    • Name: var2
    • Type: Integer
    • Default value: -1
    • Runtime value: $_GET['post_id']

    The query string in the Recent Posts links contains post_id, which is the record's primary key. It's a whole number, so you need to set the Type to Integer.

  2. Click OK to close the Add Variable dialog box, and then click OK to close the Recordset dialog box.
  3. Save news.php.

Merging the recordsets

Now comes the part that strikes fear into the hearts of many designers—diving into Code view. It's not as scary as you might think. Even if you don't want to write your own code, it's important to understand what the code Dreamweaver has generated does.

  1. Open Code view, and scroll to the top of the page. Dreamweaver has inserted approximately 70 lines of PHP code above the DOCTYPE declaration. This is the code that queries the database and creates the recordsets ready for display in the page. There's a long function definition around lines 3–32, which creates a function called GetSQLQueryString(). Its role is to protect your database from malicious attacks called SQL injection.

    The rest of the code is for the five recordsets you have created. You can recognize them easily because the PHP variables are built from the recordset names. So the SQL query for the getArchives recordset is assigned to a variable called $query_getArchives, the getRecent query is in $query_getRecent, and so on.

  2. Locate the code for the getDisplay recordset (see Figure 20).
The getDisplay recordset code.
Figure 20. The getDisplay recordset code.
  1. Select the code shown in Figure 20, and cut it to your clipboard.
  2. Note: Use the line numbers in the screenshots and instructions only as a guide. The line numbers in your page might be different.

  3. Scroll down to the end of the getDisplay3 recordset code, insert a couple of blank lines, and paste the getDisplay code in the space you have just created. The code should look like Figure 21.
The getDetails recordset code pasted in its new location.
Figure 21. The getDisplay recordset code pasted in its new location.
  1. Now, here comes the tricky bit. Dreamweaver will warn you of syntax errors, but all will come right in the end. Delete the code shown on lines 51–52 and 54–58 of Figure 22.
The Archives recordset code before editing.
Figure 22. The Archives recordset code before editing.
  1. Change the name of the variable shown at the beginning of line 53 in Figure 22 to $query_getDisplay (removing the 2).
  2. At the beginning of the code shown on line 59 in Figure 22, type a closing curly brace, and change if to elseif. The edited code should look like Figure 23.
The Archives recordset code after editing.
Figure 23. The Archives recordset code after editing.
  1. Next, you need to edit the Recent Records recordset in a similar way.Delete the code shown on lines 54–55 and 57–61 of Figure 24.

    Change the name of the variable shown at the beginning of line 56 to $query_getDisplay (removing the 3).

The Recent Records recordset code before editing.
Figure 24. The Recent Records recordset code before editing.
  1. On a blank line above the code shown on line 62 in Figure 24, type } else {.Create a blank line after the code shown on line 62, and type a closing curly brace.The result of all the changes should look like Figure 25.
The code of the three recordsets after merging.
Figure 25. The code of the three recordsets after merging.

What you have done is to create a conditional statement that creates a different SQL query ($query_getDisplay) depending on the following criteria:

  • If the query string contains a variable called archive, use the SQL query for the Archives column.
  • Else if the query string contains a variable called post_id, use the SQL query for the Recent Records column.
  • Else use the original getDisplay query.

    Note that the PHP code uses the same logic:

if (condition 1) { // do this } elseif (condition 2) { // do something else } else { // default action }

The conditions are controlled by if, elseif, and else. Once you get used to it, PHP is not difficult to follow.

  1. Nearly there. Scroll down to the bottom of the page to locate the code shown in Figure 26.
The code at the bottom of the page clears the recordset results.
Figure 26. The code at the bottom of the page clears the recordset results.

This releases from memory the results from the recordsets after they have been used. The getDisplay2 and getDisplay3 recordsets no longer exist, so you need to delete the code shown on lines 122 and 124.

  1. Finally, the moment of truth. Save news.php, and activate Live View. Hold down Ctrl (Windows) or Cmd (Mac), and test the Archive and Recent Posts links. You should now have a fully dynamic page that displays the appropriate content in response to the link you select.
  2. There's just one minor change you need to make. Add min-height: 650px to the #blog style rule to prevent the Recent Posts column being truncated when a single blog item is shown.

Where to go from here

The ability to display different content in the same page in response to user's actions is just one aspect of creating dynamic websites with a server-side technology, such as PHP. Dreamweaver's server behaviors can help give you a head start, but as you have seen in this final part of the tutorial series, moving beyond basic functionality requires knowledge and effort on the part of the developer. You also need a good understanding of database design and SQL. Hopefully, this series has whetted your appetite to learn more about this vast, yet fascinating subject.

Both PHP and MySQL have excellent online documentation:

  • PHP Manual
  • MySQL 5.1 Reference Manual

Dreamweaver CS5 also has full documentation for all core PHP functions and classes, together with examples of how to use the code. The documentation appears automatically when you invoke code hints by pressing Ctrl+spacebar in a PHP code block.

Reading a reference manual is fine when you know what you're looking for, but the following online resources teach PHP in a more structured way:

  • PHP 101: PHP for the Absolute Beginner
  • PHP Builder articles and tutorials

You might also want to explore my books that deal specifically with PHP development in Dreamweaver:

  • Adobe Dreamweaver CS5 with PHP: Training from the Source (Adobe Press, 2010) moves beyond working with Dreamweaver's built-in server behaviors, and uses WordPress and selected components of the Zend Framework to build secure dynamic websites.
  • The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP (friends of ED, 2008) covers the use of Dreamweaver server behaviors in depth, showing how to customize them. Although written for Dreamweaver CS4, the code is fully compatible with Dreamweaver CS5.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

More Like This

  • Responsive design with jQuery marquee
  • Creating a multiscreen theme for WordPress using Dreamweaver CS5.5
  • Building Drupal Zen subthemes with Dreamweaver CS4
  • Marking up your site for easier redesign in five steps
  • Getting Started with CSS excerpts: Styling tables, backgrounds, and borders
  • Checking for cross-browser CSS rendering issues
  • Understanding CSS basics
  • Creating master and detail ColdFusion pages
  • Creating user-defined functions for ColdFusion 8 in Dreamweaver CS4
  • Creating a ColdFusion upload page in Dreamweaver CS4

Tutorials and samples

Tutorials

  • Understanding HTML5 semantics: Changed and absent elements
  • Mobile app with PhoneGap: Submitting to the Apple App Store
  • PhoneGap and Dreamweaver: Releasing on iOS
  • Mobile app with PhoneGap: Creating a release build for Android

Samples

  • Responsive design with jQuery marquee
  • Customizable starter design for jQuery Mobile
  • Customizable starter design for HTML5 video
  • Customizable starter design for multiscreen development

Dreamweaver user forum

More
04/23/2012 Resolution/Compatibility/liquid layout
04/20/2012 using local/testing server with cs5 inserting images look fine in the split screen but do not show
04/18/2012 Ap Div help
04/23/2012 Updating

Dreamweaver Cookbook

More
11/07/2011 Simple social networking share buttons
09/20/2011 Registration form that will generate email for registrant to validate
08/21/2011 Spry Accordion - Vertical Text - Auto Start on Page Load - Mouse Over Pause
08/17/2011 Using cfdump anywhere you like

Products

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • Mobile Apps
  • Photoshop
  • Touch Apps
  • Student and Teacher Editions

Solutions

  • Digital marketing
  • Digital media
  • Web Experience Management

Industries

  • Education
  • Financial services
  • Government

Help

  • Product help centers
  • Orders and returns
  • Downloading and installing
  • My Adobe

Learning

  • Adobe Developer Connection
  • Adobe TV
  • Training and certification
  • Forums
  • Design Center

Ways to buy

  • For personal and home office
  • For students, educators, and staff
  • For small and medium businesses
  • For businesses, schools, and government
  • Special offers

Downloads

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

Company

  • News room
  • Partner programs
  • Corporate social responsibility
  • Career opportunities
  • Investor Relations
  • Events
  • Legal
  • Security
  • Contact Adobe
Choose your region United States (Change)
Choose your region Close

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Ad Choices

Reviewed by TRUSTe: site privacy statement