User Guide Cancel

Build search and results pages

Search
Dreamweaver

Dreamweaver

Open app
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Note:

The user interface has been simplified in Dreamweaver and later. As a result, you may not find some of the options described in this article in Dreamweaver and later. For more information, see this article.

About search and results pages

You can use Dreamweaver to build a set of pages to let users search your database and view the search results.

In most cases, you need at least two pages to add this feature to your web application. The first page is a page that contains an HTML form in which users enter search parameters. Although this page doesn’t do any actual searching, it is referred to as the search page.

The second page you need is the results page, which performs most of the work. The result’s page does the following tasks:

  • Reads the search parameters submitted by the search page

  • Connects to the database and searches for records

  • Builds a recordset with the records found

  • Displays the contents of the recordset

    Optionally, you can add a detail page. A detail page gives users more information about a particular record on the results page.

    If you have only one search parameter, Dreamweaver lets you add search capabilities to your web application without using SQL queries and variables. Simply design your pages and complete a few dialog boxes. If you have more than one search parameter, you need to write a SQL statement and define multiple variables for it.

    Dreamweaver inserts the SQL query in your page. When the page runs on the server, each record in the database table is checked. If the specified field in a record meets your SQL query conditions, the record is included in a recordset. The SQL query in effect builds a recordset containing only the search results.

    For example, field sales staff might have information about customers in a certain area who have incomes above a certain level. In a form on a search page, the sales associate enters a geographical area and a minimum income level, and then clicks the Submit button to send the two values to a server. On the server, the values are passed to the results page’s SQL statement, which then creates a recordset containing only customers in the specified area with incomes above the specified level.

Build the search page

A search page on the web typically contains form fields in which the user enters search parameters. At minimum, your search page must have an HTML form with a Submit button.

To add an HTML form to a search page, complete the following procedure.

  1. Open the search page or a new page, and select Insert > Form > Form.

    An empty form is created on the page. You might need to enable Invisible Elements (View > Visual Aids > Invisible Elements) to see the form’s boundaries, which are represented by thin red lines.

  2. Add form objects for users to enter their search parameters by selecting Form from the Insert menu.

    Form objects include text fields, menus, options, and radio buttons. You can add as many form objects as you want to help users refine their searches. However, keep in mind that the greater the number of search parameters on the search page, the more complex your SQL statement will be.

  3. Add a Submit button to the form (Insert > Form > Button).
  4. (Optional) Change the label of the Submit button by selecting the button, opening the Property inspector (Window > Properties), and entering a new value in the Value box.

    Next, you’ll tell the form where to send the search parameters when the user clicks the Submit button.

  5. Select the form by selecting the <form> tag in the tag selector at the bottom of the Document window, as the following image shows:
    Form tag

  6. In the Action box in the form’s Property inspector, enter the filename of the results page that will conduct the database search.
  7. In the Method pop‑up menu, select one of the following methods to determine how the form sends data to the server:

    • GET sends the form data by appending it to the URL as a query string. Because URLs are limited to 8192 characters, don’t use the GET method with long forms.

    • POST sends the form data in the body of a message.

    • Default uses the browser’s default method (usually GET).

      The search page is done.

Build a basic results page

When the user clicks the form’s Search button, the search parameters are sent to a results page on the server. The results page on the server, not the search page on the browser, is responsible for retrieving records from the database. If the search page submits a single search parameter to the server, you can build the results page without SQL queries and variables. You create a basic recordset with a filter that excludes records that don’t meet the search parameter submitted by the search page.

Note:

If you have more than one search condition, you must use the advanced Recordset dialog box to define your recordset (see Build an advanced results page ).

Create the recordset to hold the search results

  1. Open your results page in the Document window.

    If you don’t have a results page yet, create a blank dynamic page (File > New > Blank Page).

  2. Create a recordset by opening the Bindings panel (Window > Bindings), clicking the Plus (+) button, and selecting Recordset from the pop‑up menu.
  3. Make sure the simple Recordset dialog box appears.
    Recordset dialog box

    Note:

    If the advanced dialog box appears instead, switch to the simple dialog box by clicking the Simple button.

  4. Enter a name for the recordset, and select a connection.

    The connection should be to a database containing data you want the user to search.

  5. In the Table pop‑up menu, select the table to be searched in the database.
    Note:

    In a single-parameter search, you can search for records in only a single table. To search more than one table at a time, you must use the advanced Recordset dialog box and define a SQL query.

  6. To include only some of the table’s columns in the recordset, click Selected and select the desired columns by Control‑clicking (Windows) or Command-clicking (Macintosh) them in the list.

    You should include only the columns containing information you want to display on the results page.

    Leave the Recordset dialog box open for now. You’ll use it next to retrieve the parameters sent by the search page and create a recordset filter to exclude records that don’t meet the parameters.

Create the recordset filter

  1. From the first pop‑up menu in the Filter area, select a column in the database table in which to search for a match.

    For example, if the value sent by the search page is a city name, select the column in your table that contains city names.

  2. From the pop‑up menu beside the first menu, select the equal sign (it should be the default).
  3. From the third pop‑up menu, select Form Variable if the form on your search page uses the POST method, or URL Parameter if it uses the GET method.

    The search page uses either a form variable or a URL parameter to pass information to the results page.

  4. In the fourth box, enter the name of the form object that accepts the search parameter on the search page.

    The name of the object doubles as the name of the form variable or URL parameter. You can get the name by switching to the search page, clicking the form object on the form to select it, and checking the object’s name in the Property inspector.

    For example, suppose you want to create a recordset that includes only adventure trips to a specific country. Assume you have a column in the table called TRIPLOCATION. Also assume the HTML form on your search page uses the GET method and contains a menu object called Location that displays a list of countries. The following example shows how your Filter section should look:

    Form object parameters

  5. (Optional) Click Test, enter a test value, and click OK to connect to the database and create an instance of the recordset.

    The test value simulates the value that would otherwise have been returned from the search page. Click OK to close the test recordset.

  6. If you’re satisfied with the recordset, click OK.

    A server-side script is inserted on your page that checks each record in the database table when it runs on the server. If the specified field in a record meets the filtering condition, the record is included in a recordset. The script builds a recordset that contains only the search results.

    The next step is to display the recordset on the results page. For more information, see Display the search results .

Build an advanced results page

If the search page submits more than one search parameter to the server, you must write a SQL query for the results page and use the search parameters in SQL variables.

Note:

If you have only one search condition, you can use the simple Recordset dialog box to define your recordset (see Build a basic results page ).

  1. Open the results page in Dreamweaver, and then create a recordset by opening the Bindings panel (Window > Bindings), clicking the Plus (+) button, and selecting Recordset from the pop‑up menu.
  2. Make sure the advanced Recordset dialog box appears.

    The advanced dialog box has a text area to enter SQL statements. If the simple dialog box appears instead, switch to the advanced dialog box by clicking the Advanced button.

  3. Enter a name for the recordset, and select a connection.

    The connection should be to a database containing data you want the user to search.

  4. Enter a Select statement in the SQL text area.

    Make sure the statement includes a WHERE clause with variables to hold the search parameters. In the following example, the variables are called varLastName and varDept:

    SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE ¬ 
WHERE LASTNAME LIKE 'varLastName' ¬ 
AND DEPARTMENT LIKE 'varDept'

    To reduce the amount of typing, you can use the tree of database items at the bottom of the advanced Recordset dialog box. For instructions, see Define an advanced recordset by writing SQL.

    For help on SQL syntax, see the SQL primer at www.adobe.com/go/learn_dw_sqlprimer.

  5. Give the SQL variables the values of the search parameters by clicking the Plus (+) button in the Variables area and entering the variable’s name, default value (the value the variable should take if no run-time value is returned), and run-time value (usually a server object holding a value sent by a browser, such as a request variable).

    In the following ASP example, the HTML form on the search page uses the GET method and contains one text field called LastName and another called Department:

    ASP example

    In ColdFusion, the run-time values would be #LastName# and #Department#. In PHP, the run-time values would be $_REQUEST["LastName"] and $_REQUEST["Department"].

  6. (Optional) Click Test to create an instance of the recordset using the default variable values.

    The default values simulate the values that would otherwise have been returned from the search page. Click OK to close the test recordset.

  7. If you’re satisfied with the recordset, click OK.

    The SQL query is inserted in your page.

    The next step is to display the recordset on the results page.

Display the search results

After creating a recordset to hold the search results, you must display the information on the results page. Displaying the records can be a simple matter of dragging individual columns from the Bindings panel to the results page. You can add navigation links to move forward and backward through the recordset, or you can create a repeating region to display more than one record on the page. You can also add links to a detail page.

For more information on methods of displaying dynamic content on a page other than displaying results in a dynamic table, see Displaying database records.

  1. Place the insertion point where you want the dynamic table to appear on the results page, and select Insert > Data Objects > Dynamic Data > Dynamic Table.
  2. Complete the Dynamic Table dialog box, selecting the recordset you defined to hold the search results.
  3. Click OK. A dynamic table that displays search results is inserted on the results page.

Create a detail page for a results page

Your set of search and results pages can include a detail page to display more information about specific records on the results page. In this situation, your results page also doubles as the master page in a master-detail page set.

Create a link to open a related page (ASP)

You can create a link that opens a related page and that passes existing parameters to that page. The server behavior is only available when using the ASP server model.

Before adding a Go To Related Page server behavior to a page, make sure the page receives form or URL parameters from another page. The job of the server behavior is to pass these parameters to a third page. For example, you can pass search parameters received by a results page to another page and save the user from entering the search parameters again.

Also, you can select text or an image on the page to serve as the link to the related page, or you can position your pointer on the page without selecting anything, and the link text is inserted.

  1. In the Go To Related Page box, click Browse and locate the related page file.

    If the current page submits data to itself, enter the current page’s file name.

  2. If the parameters you want to pass were received directly from an HTML form using the GET method, or are listed in the page’s URL, select the URL Parameters option.
  3. If the parameters you want to pass were received directly from an HTML form using the POST method, select the Form Parameters option.
  4. Click OK.

    When the new link is clicked, the page passes the parameters to the related page using a query string.

More like this

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy