close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Display nested recordsets

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Dreamweaver, MySQL, PHP

rating
4 ratings | Sign in to rate this tutorial | View comments

When you want to show multiple categories on a web page AND show the items within that category, you need to nest recordsets. If that's not second nature to you because... oh, I don't know... you like to see the light of day, follow this tutorial to master the technique.

next sectionarrow down
arrow downWhat you need to start:

  1. A dynamic site set up within Dreamweaver
  2. A blank database
  3. Dreamweaver CS3 or later
  4. Data Bridge installed and activated in Dreamweaver
  5. DataAssist Menu Categories and Menu Items, which can be downloaded here: data-bridge-nested-recordset-display.zip

next sectionarrow down
arrow downImport the preset

  1. In Dreamweaver, click WebAssist > Preset Manager
  2. From the Product drop down, select Data Bridge - Preset
  3. Click the Import button
  4. Browse to the data-bridge-nested-recordset-display.zip preset file you downloaded earlier
  5. Click Open

next sectionarrow down
arrow downThe Category Insert Page

  1. Create a blank PHP page in the root of your site called menu.php
  2. Open the blank PHP page
    This is to make sure DataAssist creates the pages in the correct directory level
  3. Click WebAssist > Database > DataAssist Pages
  4. Change the Application Type to Menu Categories
  5. Make sure the Create the database table for me is checked
    This is going to let Data Bridge create the correct database setup for this specific tutorial. It'll be awesome
  6. Change the connection to the one pointing to your blank database
  7. Edit the Page Design to exactly how you wish it to be
    For this tutorial, this step isn't needed, so we're keeping the Page Design as Basic, but edit away
  8. Click the Manage Pages tab
  9. Ensure the page is named using the following naming convention:
    Insert > menu_category.php

  10. This is done by following these steps:

    1. Click on the pages under the Define Features section
    2. Change the names under the Page Name & Location field


  11. Click Finish
  12. Uncheck the Save as preset checkbox
  13. Click OK

next sectionarrow down
arrow downThe Items Insert Page

  1. Open the blank PHP page we made in the last step
    This is to make sure DataAssist creates the pages in the correct directory level
  2. Click WebAssist > Database > DataAssist Pages
  3. Change the Application Type to Menu Items
  4. Make sure the Create the database table for me is checked
    This is going to let Data Bridge create the correct database setup for this specific tutorial. It'll be awesome
  5. Change the connection to the one pointing to your blank database
  6. Edit the Page Design to exactly how you wish it to be
    For this tutorial, this step isn't needed, so we're keeping the Page Design as Basic, but edit away
  7. Click the Manage Pages tab
  8. Ensure the page is named using the following naming convention:
    Insert > menu_items.php

  9. This is done by following these steps:

    1. Click on the pages under the Define Features section
    2. Change the names under the Page Name & Location field


  10. Click Finish
  11. Uncheck the Save as preset checkbox
  12. Click OK


And look at that... your page is made. Miracles DO happen. Go add some stuff to your database using the pages we just created. Populate!

next sectionarrow down
arrow downAdd Recordsets

  1. Open menu.php page we made in the first step
  2. Click Window > Bindings to open the Bindings panel
  3. Click the Add Binding ( ) button
  4. Click Recordset (Query)
  5. Change the Name to MenuCat
  6. Change the Table to menu_category
    If you are in Advanced view, switch to Simple view by clicking the Simple... button on the left side of the dialog

  7. Click All in the Columns option
  8. This will select all categories that exist
  9. Click OK
  10. In the Bindings Panel, click the Add Binding ( ) button
  11. Click Recordset (Query)
  12. Change the Name to MenuItems
  13. Change the Table to menu_items
  14. Click All in the Columns option
  15. Set Filter to ItemCategory
  16. Make sure the Filter is ItemCategory = URL Parameter ItemCategory
  17. Click OK

next sectionarrow down
arrow downAdd Bindings to the Page

Now we need to add some bindings to the page that will show the data we want from the database.

Step 1: CategoryName

  1. In the Bindings Panel, expand the Recordset (MenuCat) recordset
  2. Click on CategoryName and drag in onto the page
  3. Select the newly added binding
  4. In the Properties Inspector, change the Format on the binding to Heading 1


This will show the CategoryName in an <h1> formatting so it's nice and bold

Step 2: ItemName

  1. In Design view, hit Enter after CategoryName to create a new line
  2. In the Bindings Panel, expand the Recordset (MenuItems) recordset
  3. Click on ItemName and drag in onto the page on the new line after CategoryName
  4. Select the newly added binding
  5. In the Properties Inspector, change the Format on the binding to Heading 2


This will show ItemName in a little less bold, but still nice and bold look

Step 3: ItemPrice

  1. In Design view, hit Enter after ItemName to create a new line
  2. Click on ItemPrice and drag in onto the page on the new line after ItemName
  3. Select the newly added binding
  4. In Code view, float the <p> tag the ItemName binding is in to the right
  5. This can be done by changing the <p> tag to the following:
    <p style="float:right">


And this shows the ItemPrice in a <p> tag that's aligned to the right so it really stands out.

Step 4: ItemDescription

  1. In Design view, hit Enter after ItemDescription to create a new line
  2. Click on ItemDescription and drag in onto the page on a new line after ItemPrice
  3. Select the newly added binding
  4. In the Properties Inspector, change the Format on the binding to Paragraph
  5. Save EVERYTHING!!!

next sectionarrow down
arrow downRepeat Your Regions

Next up we're going to make those bindings loop until they get dizzy.

Step 1: Apply Repeat Regions

  1. In Code view, select all the bindings we added before, and the <h1>, <h2>, and <p> tags around them
  2. Click Window > Server Behaviors to open the Server Behaviors panel
  3. Click the Add Server Behavior ( ) button
  4. Click WebAssist > DataAssist > Repeat Selection
  5. Change the Recordset to MenuCat
  6. Change the Repetitions to All records
  7. Click OK
  8. In Code view again, select the ItemName, ItemPrice, and ItemDescription bindings and the formatting tags around them
  9. Click Window > Server Behaviors to open the Server Behaviors panel
  10. Click the Add Server Behavior ( ) button
  11. Click WebAssist > DataAssist > Repeat Selection
  12. Change the Recordset to MenuItems
  13. Change the Repetitions to All records
  14. Click OK

Step 2: Show the Correct Item Data

In Code view again, we're going to add closing and opening php tags to separate the two recordsets we created, then move the MenuItems recordset into the first Repeat Selection Server Behavior so we can use it to show the correct item information.

  1. In Code view, find the gap between the two recordsets
    If this tutorial was followed exactly, it will be the gap as shown in the following screenshot

  2. Enter closing, then opening php tags
    ?>
    <?php

  3. Select the php code chunk from the opening php tag we just added, until the end of the recordset
    This will be the code chunk shown in the following screenshot

  4. Drag the code chunk, and place it directly before the opening <h1> tag for the CategoryName binding
    This will be within the Repeat Selection that was added around the bindings
  5. Create a new php code chunk between the recordset you just moved, and the php code chunk above it
    This will be within the gap shown in the following screenshot

  6. In the empty php code chunk you just created, set the $_GET variable ItemCategory to the value of the CategoryID binding
  7. This will look like the following code:
    <?php
    $_GET['ItemCategory'] = $row_MenuCat['CategoryID'];

    ?>

  8. Save all of everything forever!
  9. View the page to make sure everything works just peachy

arrow downWhat to do next...

Now you only need to take this knowledge you just gained, and add it to your own site. Make it beautiful, then tell us about it because we'll totally hang a picture of it on our refrigerator out of pride.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
4 ratings | Sign in to rate this tutorial

MarkNewsom: 10 Years, 8 Months, 2 Days, 19 Hours, 20 Minutes ago

Where's the download link for the preset you mention in this tutorial? I've spent 20 minutes trying to find it on your site.

rating

Team WebAssist: 10 Years, 8 Months, 2 Days, 18 Hours, 16 Minutes ago

It's the zip in the What you Need to Start section above.

Dave W: 10 Years, 8 Months, 2 Days, 12 Hours, 52 Minutes ago

The zip code is not being accepted by the preset manager, it's stating that it is not a valid databridge application code

rating

Team WebAssist: 10 Years, 7 Months, 4 Weeks, 2 Days, 23 Hours, 20 Minutes ago

We are testing and will post a new zip file ASAP! So sorry for the inconvenience.

Surdej Web Solutions: 10 Years, 7 Months, 4 Weeks, 2 Days, 1 Hour, 19 Minutes ago

Having the same problem with the Zip file... Not A Valid Data Bridge Application Preset. Please let us know when the new ZIP is available.

Justin Hood: 10 Years, 7 Months, 4 Weeks, 1 Day, 19 Hours, 20 Minutes ago

The Presets have been fixed for OSX users. They should now properly import into the Preset Manager.

Dave W: 10 Years, 7 Months, 4 Weeks, 1 Day, 15 Hours, 14 Minutes ago

Still not fixed for Windows then?

rating

Team WebAssist: 10 Years, 7 Months, 4 Weeks, 21 Hours, 9 Minutes ago

We couldn't reproduce the problem in Windows. Are you on Windows? If so, can you give version details on your OS and Dreamweaver.

Dave W: 10 Years, 7 Months, 4 Weeks, 13 Hours, 15 Minutes ago

Yes, I'm using Windows 8.1 and Dreamweaver CS6

Dave W: 10 Years, 7 Months, 4 Weeks, 13 Hours, 9 Minutes ago

I have also tried deleting the WinFile and restating Dreamweaver but still it will not accept it.

rating

Team WebAssist: 10 Years, 7 Months, 3 Weeks, 6 Days, 22 Hours, 1 Minute ago

Passed this on to the testing team to figure out the issue on your platform and get it resolved. You are always welcome to comment on a tutorial and let us know if something isn't working, but in general, you will get much quicker assistance if you go straight to Tech Support. (Click help in the main menu.) We *will* get this resolved; just wanted to give that general advice. :)

Justin Hood: 10 Years, 7 Months, 3 Weeks, 6 Days, 19 Hours, 48 Minutes ago

Dave,
There shouldn't be any issues preventing the installation of this preset into Data Bridge under any OS anymore.
The .zip file provided actually contains two additional .zip files that are the presets themselves.
Are you extracting menu_items.zip and menu_categories.zip from data-bridge-nested-recordset-display.zip and then attempting to import them? You should be selecting either menu_items.zip or menu_categories.zip when using Import in the Preset Manager.
If you are following those steps and still having an issue, please reply with the version of Data Bridge you have installed as well as any other extensions also installed.

Dave W: 10 Years, 7 Months, 3 Weeks, 6 Days, 14 Hours, 29 Minutes ago

Hi Justin,
Thanks for your reply. I have done what you suggest and both the menu items and menu categories imported OK. I will now go through the tutorial and see if it all works OK. Perhaps it would be wise to inform users that it may be necessary to extract the zips before installing them as with previous zip presets it was not necessary to do this.
Thanks again for your help.

: 3 Years, 3 Months, 2 Weeks, 1 Day, 22 Hours, 9 Minutes ago

I've got everything working, until step 3.7. Here's what I have in the code:

<?php
$_GET['ItemCategory'] = $row_MenuCat['CategoryID'];
?>

and in the web page, the categories show up, but the items do not. Here's what's in the php_error.log

[05-Sep-2021 12:17:23 America/Detroit] PHP Notice: Undefined variable: row_MenuCat in /Users/dan/website/menu.php on line 28
[05-Sep-2021 12:17:23 America/Detroit] PHP Stack trace:
[05-Sep-2021 12:17:23 America/Detroit] PHP 1. {main}() /Users/dan/website/menu.php:0

Any suggestions on what's wrong? It seems like the row_MenuCat is having issues...

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Everything else!

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

go to page top