Dreamweaver Article

Exchanging data using the Spry framework for Ajax and PHP

Sample application: Installation, configuration, and testing

This tutorial is based on a fictious content management system (CMS) named "articles", where all images are stored in a common directory named "images" and each recordset has its related array of images stored in a unique subdirectory named after the recordset's article_id. For example, the first recordset (article_id 1) will store its related images in the subdirectory "1" (see Figure 3).

Figure 3. Images stored in unqiue subdirectories

Installing the sample files

Create a new folder named adobe_xml_imagelist in your site's root and unpack the contents of the provided archive in this directory (adobe_xml_imagelist.zip). These sample files are linked to at the beginning of this tutorial. If they are installed correctly, the resulting directory and file structure should appear as in Figure 4.

Figure 4. Directory structure of the sample files

Setting up the database table

The related MySQL table named adobe_xml_imagelist is really simple and has the following structure:

'article_id' int(3) unsigned NOT NULL auto_increment,
'article_headline' varchar(60) NOT NULL,
'article_content' text

For your convenience, the file articles.sql (located in the "sql" subdirectory in the sample files) can be used for adding this new table to your database plus inserting two related dummy records. When working with phpMyAdmin or another database administration tool, just use the import feature to, well, import this file. Otherwise, copy and paste the code from the articles.sql file into phpMyAdmin's "SQL" field.

Establishing a new MySQL Connection

Because several sample files, such as article_list.php and article_detail_dynamic_xml.php, are already preconfigured to query the adobe_xml_imagelist table and display the existing records including their related images, you need to create a new MySQL Connection named xml_imagelist.

Configuring the application

The following instructions will, by design, not be covering every single configuration option. I would first like to run the preconfigured, ready-to-use sample application on your local testing server without worrying about initially nonessential details. I address these in the "Information for developers" section at the end of this tutorial.

Open the file xml_imagelist_servername_inc.php (located in the "scripts" directory) and change the default value of the following variable:

$http_servername_local = "http://localhost/guenter";

You will need to update the value of this variable according to your testings server's "URL prefix" settings, as defined in your Dreamweaver site's site definition (see the Testing Server category of your site definition).

Testing the application

Now it's time to test the application:

• Open the file article_list.php in Dreamweaver and preview the page in your browser. This page is nothing to write home about. It's just a simple repeat region, showing the core data of both dummy records (ID, Headline) and a "more..." link that's passing the recordset's article_id to where the fun starts—the article_detail_dynamic_xml.php page.

• The file article_detail_dynamic_xml.php displays the "image list from directory" related to the respective article_id and allows for sorting the Spry table according to the above mentioned image and file data.

  Important: By default this file assumes that the Spry libraries are installed in the <site root>/SpryAssets/ directory. If you install them somewhere else, you'll need to adapt the path manually in lines 47 and 48 (script src="../SpryAssets/xpath.js").

Page 3 of 5

Previous Page

Next Page