Adobe GoLive How-to: Getting Started with Dynamic Data

Page 1 of 1

Tying live databases behind your Web sites no longer requires you to be a programming expert. This tutorial leads you through building database-driven forms and a dynamic directory with an added bonus: you can allow a customer or other known visitor to edit their own information on your site, effectively freeing admin staff from manual information updates.

Web site designers and managers are finding they no longer need to be expert programmers to reap the benefits of a behind-the-scenes database. In Adobe GoLive 6.0, it’s a matter of running a dynamic data wizard, using a few drag-and-drop commands, and understanding some basics and you are off and running with dynamic data. The tutorial that follows shows you how to do just that, using Adobe GoLive 6.0 in tandem with a simple Microsoft Access database.[an error occurred while processing this directive]Once you understand this process, you’ll being finding interesting ways to modify it. We’ve used a similar database to drive an alumni directory for a university. Individuals can log in and dynamically update the information the school has on file for them. Similarly, any business with a set of known clients can let individuals view certain data and keep it current. The time it takes to master this technique is negligible when you consider that the university’s administrators, for example, no longer have to manually enter address or phone number changes for alumni.

Step 1. Covering the Basics

First things first – this tutorial assumes you have a hosting account with an ISP (Internet Services Provider) or otherwise have access to server space in which to publish a site or sites. It also assumes you have basic familiarity with GoLive software, and plan to use GoLive 6.0. Third, an entry-level understanding of how a database works is helpful. Fourth, go ahead and update to GoLive 6.0.1 at: http://www.adobe.com/products/golive/main.html. It’s well worth it!

The first question to answer is: does your site host allow the use of ASP, PHP, and/or MySQL data on their servers? Major ISPs often do. Check it out with them, because if they do, GoLive will automatically confirm that everything you need is in place. This means you can skip the entire procedure in the GoLive 6.0 manual “Preparing a site on a Web server.” If your ISP or server isn’t ready, you will need to set up your own server per the manual, or find a server that can accommodate your database. Also, GoLive includes pre-configured server environments that you can run on the same system as the GoLive client. See your Adobe Web Workgroup Server CD for more information on installing the preconfigured servers.

To get started, create a blank GoLive site. Don’t worry about how it will look. At this point, I map out the flow of my site’s pages using GoLive Design Diagrams, but all you need to do is create a page or two to get the database running, as we’ll discuss in Step 2.

If you prefer you can download a ZIP file containing our example sites using both ASP and PHP. Download the sample sites at: ftp://ftp.wdtp.com.

Step 2. Getting Ready for Takeoff

The Database
Now you need a database. It will act as your “data source” in GoLive, and we’ll explain what that is in Step 4. We’ve created a simple Microsoft Access database you can download as a starter [link]here included with our ASP sample site, or you can create one yourself. Whatever database tool you choose (Access is just one example), you’ll need to know what data this file will hold based on the information you want to store and/or present to your viewers.

Our sample database has one table containing five fields: an AutoID field that gives each record a unique identifier, plus four user-defined fields for First Name, Last Name, Phone, and Password. The database should also be password-protected (our sample is not so that you can use it as a starter), which is done in Access by choosing Tools > Security > Set Database Password.

When your database has these or similar elements, set it aside.

Placeholder Pages in GoLive
Go back to your GoLive site. You’ll need to mock up two main pages with placeholder content. At this point don’t worry about Dynamic Content, just focus on visual layout. The first page is a Search page where a person can enter keywords and search your directory. Name this page index.html or whatever suits you. The page should contain the following minimum elements:
  • Search Form with text field and submit button
  • Table to display the search results in a row by row format
  • Form for login using last name and password in order to edit a record

    [Screenshot_01 Picture 1.pdf here]

    The second page is an Edit page, where an individual who logs in can update their record. Call this page edit.html or any other appropriate name. You can work with our sample pages [link]here and [link] here, or at least view them to see the page elements you’ll need.

    Step 3. Going Dynamic

    You’ll now use the Dynamic Site Wizard in GoLive to make your site dynamic.

    From the Site menu, choose Settings > Dynamic Content > Dynamic Site Wizard. Set the server language (ASP in this example, but you may have chosen PHP or JSP). Your server connection is most likely FTP (file transfer protocol), but it could also be WebDav or Site Is Served Locally if you are running a Web server, including those shipping with GoLive 6. If you will use FTP and your settings are not already established, create a connection under the FTP pop up menu Edit Server using the information provided by your ISP (ask them for it if you don’t have it). Next, the Wizard will prompt you for the URL root of your site. This is simply the address of the home page for this test site; e.g., http://www.mysite.com/test.

    Now the Wizard will ask what Security Options you want. GoLive automatically identifies your current IP address and will allow that address unrestricted access to the site files. If you’re on a dial-up modem, however, your IP address is different each time you dial in. In this case, select “Allow Anyone,” which ensures you can access and edit the site for now. You can adjust the security options later when you’re ready to go live. GoLive makes use of IP authorization to prevent unauthorized individuals from tampering with your files. You’ll find a file in your config folder in which you can “include friends” by listing trusted IP addresses. You can open this file (e.g., config > include > friends.asp or similar) in a text editor at any time after the site has been made Dynamic to see instructions on adding other friendly IP addresses or disabling IP authorization altogether.

    Skip the Wizard’s final question on Data Sources for now—we’ll get to that momentarily. Enter Finish on the last screen of the Wizard, and guess what… your site is now dynamic!

    At this point, GoLive has automatically uploaded test files and performed a server check. If GoLive detects any problems, it will notify you, and you can back up to the point in the process where the correction needs to take place.

    Step 4. What is a Data Source?

    Those working with dynamic data for the first time may be wondering what the difference is between a “database,” a “data source,” and a “content source.” They’re not necessarily interchangeable, so a brief explanation will help.

  • Database: this file contains your data organized into one or more tables. Our sample is a Microsoft Access file (.mdb), but you may have chosen to work with Microsoft SQL Server (ASP), Oracle 8 (ASP), MySQL 3.23 (PHP and JSP), or Oracle 9 (JSP).

  • Data Source: this file points to a database and tells your site how to access it. You create a Data Source in the Dynamic Content area of the Site Settings. GoLive then places the Data Source file in the config > datasources folder of your Dynamic Site. If your Microsoft Access database is not password-protected, as in this example, the database itself acts as the Data Source and you don’t have to create a separate one. You’re more likely to want to password-protect your database in a real life situation, so we’ll make a separate Data Source for it below.

  • Content Source: this is a query from your dynamic page to a database in order to provide content for that page. Pages can have multiple Content Sources that provide different content for that page. For instance, you’ll be creating Content Sources (queries) that return all records, or return only records with certain criteria, like only those records with a last name starting with “T”. Adding a Content Source means you’re telling GoLive: “please look in table ‘x’ of database ‘y’, and pull out all records that match my filter requirements so I can have that data available as content for this page.” To add a Content Source, you just drag and drop a Content Source object from the Dynamic Content palette into the head section of a page.

    Identify your Data Source
    So now you need to tell GoLive what Data Source your site will use. If you have an Access database, you could just take your .mdb file and move it into the config > datasources folder, and you’d be done. If your .mdb file is password-protected, however, you’ll want to use the procedure that follows.

    If you’re using a password protected Access database or MySQL, it’s not hard to create a Data Source. Just go to the Site menu and choose Settings > Dynamic Content. In the Data Sources area click New. Then choose the type of Data Source (i.e., ADO Database, MySQL database, etc.). In the Data Source editor, give the Data Source a name first. The Data Source does NOT need to be named the same thing as the database file itself, but it may be easier to give it the same name to avoid confusion. GoLive will add the proper file extension to the name you provide. Next, tell it the URL where the database exists on your web server, and tell it the name of the database itself. You also need to tell it the username and password needed to access the database. That’s it! If you have any questions here, pages 382-385 of the GoLive 6.0 manual can answer them.

    Step 5. Search and You Shall Find

    You’ve created your database, made your site dynamic, and linked the two together. You’re finished with the groundwork, so it’s time for some fun.

    You’ll now create what is essentially a dynamic Search form that can pull up your data and display it based on keyword searches. Doing this even once will open up a new realm of ideas for your site – it means you know the basics of doing cool tricks with site forms or displaying user data in interesting new ways.

    A Dynamic Search Page
    Make your Search page dynamic by opening the static search page you mocked up in Step 1. Open the Dynamic Bindings palette and choose the server scripting language you want (ASP, PHP, JSP) and click Convert Page. GoLive automatically renames the page’s extension to match what you selected.

    From here you can add one or more Content Sources (the queries, remember?) to the head section. To get content, drag a Content Source object from the Dynamic Content palette to the head section of your Search page. Fill in the Inspector fields as follows:

  • Description: “Search_Results” (name it what you want, but this Content Source will hold our search results)
  • Type: ADO Database Query (or MySQL Database Query if using PHP/MySQL).
  • Choose the database name from the pop up menu (adobe, if using the example database)
  • Choose the table name from the pop up menu (adobe_testgolive_test, if using the example database)

    Filter the Searches
    At this point, the Search_Results Content Source will return ALL records from the database table we specified. But… what if we don’t want all records? You can now filter the Search_Results Content Source so it will only return records based on a user’s search request. GoLive provides a very nice visual way to do this via the Content Source Inspector. To get started do the following:

  • Link the search Form Action on your Search page to the file itself (index.asp or the name you gave it)
  • Make sure the Form Method is “Get” NOT “Post”
  • Rename your text field on your search form to “lname” (or, the same name as the last name field of the sample database).
  • Select “lname” from the Field Name list in the Content Source Inspector
  • Choose Match request parameter ‘lname’ from the Match Pattern popup menu to the right in the Content Source Inspector
  • Bind the table you created to display search results to the Search_Results Content Source using the Dynamic Bindings palette by:
  • Selecting the table
  • Clicking Replace Rows in the Dynamic Bindings palette
  • Choosing Search_Results as the Content Source
  • Setting it to display 5 records per page (this is for Block Navigation; more on this later)
  • Bind the fields in the first row of the table to their appropriate fields in the database using the Dynamic Bindings palette. You only need to worry about the first row! The rest of the table will fill in automatically, because you checked “Replace Rows” in the Dynamic Bindings palette. You will bind the fields by:
  • Selecting the mock content first name text and bind it to the first name field in the Dynamic Bindings palette. Do the same for the last name and phone number text in the first row of the table, binding them to their respective fields in the database.

    What we have just done is to tell our Content Source to kick back all the records whose last name field exactly matches what a user typed into your search form text field.

    Step 6. Fine Tuning the Searches

    Your dynamic Search form is working, but now you need to plan for all the ways a user might try to use it. For instance, what if the user calls the page directly, or enters nothing for search criteria? At this point your Search page is looking for a “request parameter” AND it has to match the “lname” EXACTLY. GoLive has given us a great starting place, and from here a few additional steps will cover the contingencies.

    Do this:

  • Rename your text field on your search form to “keyword”.
  • Change the Table pop up menu to Custom SQL in the Content Source Inspector
  • Select the text in the SQL edit box and delete it.
  • Type or paste the text below into the SQL box:
    For ASP:
    select * from adobe_testgolive_test where lname like '%{Request.QueryString("keyword")}%' or fname like '%{Request.QueryString("keyword")}%' or phone like '%{Request.QueryString("keyword")}%'
    For PHP:
    select * from adobe_testgolive_test where lname like '%{@$GLOBALS["keyword"]}%' or fname like '%{@$GLOBALS["keyword"]}%' or phone like '%{@$GLOBALS["keyword"]}%'

    This snippet of source code transforms the Search_Results Content Source into a practical search engine. The above code basically says: “look at what the user typed into the search field and see if it matches anything in any of the fields of all the records. And while you’re at it, return the matching records and make them available as content for this page.” This is what we want! If nothing is typed into the search box, or if the page is called directly with no previous page, ALL records are returned. Anything typed into the search box will be matched to the database fields.

    The “select * from adobe_testgolive_test” statement means to select everything in the database named ‘adobe_testgolive_test’. The ‘where’ statement sets you up to make some qualifications. The ‘like’ word specifies a partial match, so it doesn’t have to be exact. The ‘%’ symbol is a wildcard that tells it to match any number of characters. Because there are ‘%’ symbols on both ends of the expression the search will match every record if nothing is typed into the search box or if the page is called first with no previous page. It’s kind of like asking “show me records that contain any number of characters + what the user typed + any number of characters”. That sounds like word math to me! If the user typed nothing, or if the page is called first, the word math for that would be: Records = ‘any number of characters’ + 0 + ‘any number of characters’. Hey… EVERY record qualifies for that!

    Block Navigation
    Now you want to add some Block Navigation, which is a cool way to deliver users their search results. Block Navigation lets you specify how many records per page you want to display, and puts links that allow the user to browse easily through multiple pages of results.

    Start by adding another blank Content Source to the header of your page. Fill out the fields as follows:

  • Description: Block (again, name this anything you want, but this Content Source will provide our Block Navigation)
  • Type: Navigation Block View
  • Content Source: “Search_Results” (or whatever you named that first Content Source.)
  • Create a regular 1 row x 2 cell table underneath the search results table – in the first cell type “Records:”
  • Drag a Repeat Cells object from the Dynamic Content palette into the second cell of the 1x2 table
  • Delete all but one cell of the Repeat Cells table and type “x-y” in that cell
  • Select the ‘x’ and bind it to the “Block” Content Source with the filed set to “First”
  • Select the ‘y’ and bind it to the “Block” Content Source with the filed set to “Last”
  • Select the whole ‘x-y’ text and link it to your Search page
  • In the Dynamic Bindings palette Click “Bind Link Destination To” and set the Field to “Link_URL”

    What you now have is a page that is looking for searches and doing block navigation. When someone types in a keyword like “John,” all the records that contain “John” in the fields you indicated will be displayed. It also will use the “Block” Content Source to provide those handy links that allow a user to bounce between multiple pages of results. This is Block Navigation in the form “Records: 1-5 6-10 11-13, etc.” Very cool! And you thought you couldn’t program!

    TIP: Remember to set your posting method for your search form to “Get” as “Post” isn’t compatible with Block Navigation.

    At this point you can use the GoLive Preview Tab to see results, but note that your page is not live, so you really are only previewing. If you get an error message when trying to display a custom search, try previewing it in a browser. Also, GoLive 6.0.1 displays this custom code correctly in Preview mode, so ensure you’ve done the upgrade.

    Source: Adobe Systems

    Related sites: • Corporate Media NewsDigital Producer
    Related forums:
    [an error occurred while processing this directive]