store tutorials

8/9/2019 Store Tutorials

1/28

Record Store: Your First ColdFusion MX

Application in Dreamweaver MX

The MX family of products represents a new generation of products from Macromedia.The most significant feature of the MX family of products is the great way in which they

let you work with data in your web pages. If you are reading this, you probably have been

looking at how to move your site to a new level by making it dynamic. This tutorial willteach you to build a simple application using Dreamweaver MX and ColdFusion MX and

will help you understand a few best practices of application design.

In this tutorial, you will build a catalog for an online music label, Record Store. Youll

learn to:

Create a page to view the details of each album.

Build a page that lets you view, add, and update records.

There will be a discussion about deleting records and you will modify your pagesto allow you to hide records from your user.

And, believe it or not, you are going to do NO hand coding. You aren't even going tolook at the code view once. Best of all, you are going to learn quite a bit. Promise...

When you complete this tutorial, you should be able to create a simple application for

ColdFusion MX in Dreamweaver MX. You will also have a nice set of examples for you

to keep as reference files as you get deeper into ColdFusion Markup Language (CFML).Working with databases may be new for you. Don't be intimidated. Beneath all the terms,

this is all pretty simple. If you find yourself getting a little confused, take break and come

back to give it another shot. You may also want to look for some basic articles on what a

database is and how it works. These articles can be found on the Macromedia DesDevCenter at: http://www.macromedia.com/desdev/topics/databases.html

System requirements

To complete this tutorial you will need to:

1. Install Dreamweaver MX locally on your machine.2. Install ColdFusion MX locally on your Windows 2000 or higher PC.

Note:While it is possible to use a remote server for testing and authoring onMacintosh or Windows, this tutorial is designed for working with the files locally.For information on downloading and installing ColdFusion MX, go to

http://www.macromedia.com/coldfusion and click on the link for the latest

downloadable version.

Read the requirements for ColdFusion MX before you install.


2/28

If you do not run this tutorial on a machine with a local ColdFusion MX server,

the steps in this tutorial will not work exactly the same way as they are written.

3. Learn the basics of Dreamweaver. There are points in this tutorial when you canstyle tables and components of the pages. While you are not required to make any

adjustments to formatting, the tutorial offers some suggestions but no specific

directions. If you choose not to apply the suggested changes, simply continue onwith the tutorial.

4. (Optional) Set your local web server to allow directory browsing when you are

working on this tutorial. This is optional, but this may make it easier to selectindividual pages in the browser.

Installing the sample files

Start by unzipping the sample files to a folder on your desktop. The folder will include:

A folder of sample files called RecordStoreCFStart. A folder of completed files that you may look through called

RecordStoreCFEnd.

Note:These files may not run on your machine, because of system-specificconfiguration you may have. If these files do not run, the files that you create

yourself on your machine from the sample files will work.

A folder called RecordStoreCFTutorial that contains this tutorial for you to useoff-line.

Make a copy of the RecordStoreCFStart,and copy it to the web root of your web serverwhere ColdFusion MX is installed. This should be the same folder that you set as the root

in your Dreamweaver Site Definition.

After you have moved the files to the right location, you need to create a datasource inthe ColdFusion Administrator. To do that, you open the ColdFusion Administrator and

click on the Data Sources in the left hand column. Add a New Data Source, use the

Micosoft Access driver, navigate to the RecordStoreCFStart folder and select therecordstore.mdb file. Check the Use Default Username box when you create the data

source.

Once the data source is built, you can click OK and then verify the data source in theColdFusion MX Administration. If the data source verifies, you are all set. If it doesn't,

check to see that you have checked the Use Default Username box.

Note:Some of the user interface features are not implemented in the sample files. The

top navigation links and buttons are disabled intentionally. This keeps extra code to a

minimum so that you can easily study the code that you are going to insert.

Creating the customer facing site

Start by creating the customer-facing part of the site. Your customer will want to see all

the albums in your catalog when they come to the site for the first time. You want to


3/28

present them with that necessary information on the first page of the site. The

administration site, where you can add and modify records, will come later.

Creating the site

The very first thing you need to do when you are working on a new application is tocreate a site. Just like a static site, Dreamweaver MX needs to know where all your assets

are, and where your server is as well as its URL.

1. Open Dreamweaver MX, and close the blank page.2. Check to see if your Site panel is open. If it isn't, go to the Window menu and

select Site or press F8.3. On the left side of the panel, there is a pop up menu that shows the current site.

Click the site pop up menu and select Edit Sites.

4. Click the New button and name the site "RecordStoreCFStart".5. Set the local root folder to be the RecordStoreCFStart folder. To do this, click the

folder icon next to the Local Root Folder text box, and browse to theRecordStoreCFStart folder that you placed in your webroot folder when you

installed the files.6. Check the refresh local files automatically check box and ignore the default

images and the HTTP address.

When you are finished, you Site Definition Local Info category should look like

this:


4/28

7. In the Category list, select Remote Info. Click the pop up menu and select Local

Network. Set your Remote Folder to be the same as the local folder info path that

you just set. You don't need to turn on the CheckIn/CheckOut for this tutorial,although this feature is handy in a work group situation. It is very useful if you

maintain your site from multiple machines, like home and work.

Your Site Definition Remote Info category should look like this:


5/28

8. In the Category list, select Testing Server. Choose ColdFusion as the Server

Model.

9. In the Access pop up menu, select Local Network. If it doesn't point to the localfolder where your files are, set it now.

10. Within the URL Prefix field, set the location of the local server. Your address is

probably going to be http://localhost/recordstorecfstart if you have ColdFusion set

up to work with most web servers. If you have it set to use the ColdFusion MX

stand alone web server, the address is going to port number 8500. The URL Prefixwill be http://localhost:8500/recordstorecfstart. Note that it needs to be set in

lowercase for the URL Prefix field.

Your Site Definition Testing Server should look like this:


6/28

The URL Prefix should be added automatically when you select Local/Network

from the Access pop up menu. It should be all lower case as you see here eventhough it does not match the other instances of the path.

11. Click OK and close the Site Definition dialog box. Click Done in the Edit Sites

dialog. Your site is now defined.

Your site panel should look like this:


7/28

Creating the catalog page

Now that you have a site to work in, you can start creating your application.

1. From the File Menu, select New or press Ctrl-N to get the New Document dialog.2. In the New Document Dialog Box, select the Template tab. Dreamweaver MX

lists all the templates for the sites that you have set up. You want to select theRecordStoreCFStart site in the Templates For column and you will see one

template for recordstore called recordstore_template. Click on that to select it and

click on the Create button.3. When you create a page from a template, Dreamweaver makes a page with all the

features of the template ready for you to type into. First thing to do though is to

save the page and give it a name.4. Select File Save. Save the file to your RecordStoreCFStart folder and call it

catalog.cfm.

In the file you will see the standard sort of look and feel of a page with graphics and

tables already built and placed.

There are four editable areas on the page: Title Bar Sidebar, Title Bar Main Area, SidebarContent, and Main Area Content. These areas are the only part of the template that we

have access to while we are working. Templates let you create pages that other people

can edit without letting them change areas of the page that need to remain consistentacross the site. If you are interested in learning more about templates, you may want to

check the Dreamweaver MX documentation available under the Help Menu.

In this page, there is a sidebar with the latest news and an area for all the albums to be

displayed. The titles for each sidebar are static and are not going to change from day to

day. However, the latest news and the catalog of albums will change frequently as newrecords are released.

Linking to the database

Add links to your database and view the data live in Dreamweaver MX.


8/28

1. Click in the editable area for the Title Bar Sidebar and delete the sample text and

type, "Latest News".

2. Click in the editable area for the Title Bar Main Area and delete the sample textand type, "Catalog".

3. Open the Bindings panel. If it is not open, select Bindings from the Window

menu.

4. In the Bindings panel, you see some instructions for you to add data to the page. If

step 2, Choose document type, is not checked, click on the link in the instructions

and select ColdFusion from the Choose Document Type dialog.

5. Click the button and add a Recordset (Query)

This is the code that is sent to the database to select the data that is going to be

displayed back in the page.

Fill out the Recordset dialog as you see here. If you see a larger dialog box with

different fields, click on the Simple button to get to this dialog.


9/28

6. Set the name of the query to "LatestNews". This is how you are going to refer tothis query in the code when you want to access the information that this query is

going to return.

7. Set the data source to RecordStoreCFStart which you set up when you installed

the sample files. If you don't have a data source set up, you need to set one up inthe ColdFusion MX administrator.

8. Since there is no password on this database (which is really bad practice and onlydone for the sake of this example) so you don't need to enter any values there.

9. For the Table, select News. There are three tables in this data source, but you

want the news.

10. You aren't going to select individual Columns, you are going to select all the data.If you have a table with a lot of columns, you want to only select the columns that

you are going to use to save memory on your query, which will generally make

that query come back a lot faster.

11. You don't want to set a filter up at this point. That would limit the records foundto records that match a particular criteria that you would select from the

dropdown menu.

12. In the Sort item you do want to select a sort on the NewsDate. Set the order toDescending, which will return the records in the order of the most recent to oldest

item. The default is Ascending. This way you can display one or two items in a

list and only the most recent records will show.13. Click OK to create the recordset and insert it in your page.


10/28

pplying dynamic data to the page

Now you have a recordset, or in ColdFusion terms, a Query, on the page and you can

now bind the columns of that recordset to various spots on your page. In this example,you want to bind the data to the Sidebar Content so that that sidebar always shows the

latest piece of news.

1. Click in the Side Bar Content editable area and delete the content.2. Make sure that you can see the Bindings Tab of the Application panel. If you can't

see it, then open the Bindings panel from the Window Menu.3. Expand the LatestNews recordset on the Bindings panel.

Each entry represents a column in the database. Each column is a piece of datathat you can bind to things on the page.

4. Select the NewsDate item and drag it to the empty editable area for the Side Bar

Content.

You now see a placeholder on your page that indicates that the spot is going to be

replaced by the date from the database.

5. Select the News Item and drag it and drop it next to the NewsDate placeholder onyour page. Add a dash between the two placeholders to make it easier to see the

end of the date and the beginning of the news.


11/28

To see your data live you can preview your page in the browser, but it is easier to just

turn on the Dreamweaver MX' Live Data feature. To do that, click on the Live Data

Mode icon in the toolbar.

Dreamweaver MX should now show the actual data from the database here in the page as

you work.

This data, while live, is not editable. You can't select the type and correct a spelling error

or add some text. What you can do is select the text and apply styles to the item. You can

add both HTML and CSS styles to the dynamic content.

You probably don't want the date to look like the way it appears. Dreamweaver lets you

fix that easily.

1. Select the date in your sidebar. The date is that long bit {ts '2002-04-28

00:00:00'}2. In the Bindings panel, note that the NewsDate is selected already. If you scroll

along to the far right of that panel, you will see a pop up menu where there are

many formats for you to choose from. Drag down to Date/Time and select themodel marked 1/17/00. Your page will update automatically if you have the AutoRefresh box checked. If the page doesnt update, click the refresh button at the top

of the document window.

3. Save your page.

You have a binding to the data from the page and can see the data come in and preview

as you work in Live Data Mode. The next Recordset you are going to enter is a littlemore complicated.

For the Catalog, you want to display a complete set of information. You need to display

the following items: a thumbnail of the cover of the album, the name of the album, the

name of the band, the type of music and the price.There are a couple ways to think of this data. You can think of it as based on the name of

the album or you can think of it based on the name of the group. If you think of the dataas records based on the name of the album then there are as many records in the database

table as there are albums. If you think of the data as based on the names of the group,

there would be as many entries in that table as there are groups and some of those wouldhave more than one album they have released.


12/28

One way of handling that is to join two tables. That way you can keep track of both the

albums and the groups separately and relate the two sets of data. You want to join tables

if you wanted to keep parts of your data accessible for change. For instance, if the GrapePeople, my favorite band, added a new band member or changed their name, then I would

want to change that information in one place, not for each of the many albums they have

produced.Another great reason to separate the different sets of information into more than one

database table is to keep people from entering information into the database with spelling

errors or content errors. If you or your customer is entering the name of the companyevery time they make an record in the database, then that is an area ripe for typos that end

up costing you money. Imagine that everyone working with the database all dealing with

the Chrysanthemum Corp, spelling that "Chrisandthemum", "Chrysandthemum" or

"Chrisanthnum". If they do that, then you now have records for the same company underfour different names.

In short, you use relational tables to:

Organize your data into like sets Enforce integrity of your data Break out information so that you can access just the portions you need

For the next dataset you are going to join two tables.

1. Open the Bindings panel. If it is not open, select Bindings from the Window

Menu.2. Click on the "+" button and add a Recordset (Query)

This time though you want to click on the Advanced button to get to the advanced

version of the Recordset dialog box.

Fill out the Recordset dialog box as follows:


13/28

3. Set the name of the query to "Catalog". This is how you are going to refer to thisquery in the code when you want to access the information that this query is going

to return.

4. Set the data source to RecordStoreCFStart.5. Since there is no password or username for this database so you don't need to

enter any values there.

6. You can simply type in the SQL if you know your SQL. But you are going to

build that query in a couple steps.7. You don't need any page parameters, so leave that area blank.

8. In the Database Items area, expand the Tables entry. You should see three tablesthere; Artist, Album, and News.

9. Click on the Album table without expanding it, and press the Select Button. The

SQL Query now reads:

SELECT *

FROM Album


14/28

10. Click on the Artist table without expanding it and press the Select Button. Now

the SQL Query reads:

SELECT *

FROM Album, Artist

Now you have selected all the data from both tables, but there is no relationship

between the tables, there is no way to use them together.

11. Expand the Album table, select the ArtistID entry and press the Where button.Now the Query reads:

SELECT *

FROM Album, ArtistWHERE Album.ArtistID

12. Expand the Artist table and select the ArtistID entry and press the Where button.

Now the Query reads:

SELECT *

FROM Album, ArtistWHERE Album.ArtistID AND Artist.ArtistID

you need to change the AND to an "=" sign.

13. Now you need to set the sort order. Expand the Album table and select theAlbumName entry and click on the Order By button. Your final SQL should look

like this:

SELECT *

FROM Album, Artist

WHERE Album.ArtistID = Artist.ArtistIDORDER BY Album.AlbumName

14. Click the OK button to insert the query into the page.

You have created a query that includes all the information from the Album and Artist

tables and joins them so that where the ID of the Artist is the same in both tables that data

is related. That is sort of confusing, but we are going to see how that is used in the nextsteps.

Note: If you want a great resource on SQL, try Sams Teach Yourself SQL in 10

Minutes by Ben Forta.

Now that you have the recordset in the page, you can access it in a number of ways. Lastrecordset you accessed the data directly and put it in the page. This time you are going to

create an entire table of all the albums at one time and you will create a detail page at the

same time using an application object so you can click on an entry and go to a detailpage.

1. Click in the Main Area Content editable area and delete the content. Leave thecursor in the editable area.


15/28

2. Select Insert > Application Objects > Master Detail Page Set.

Fill out the Master Detail Page Set dialog as follows:

3. Select the recordset that you want to pull the data from.

4. You have a lot more fields in the Master Page Fields than you want to appear inthe master page. To remove fields, select them and click the "-" key to remove

them. The point of the master page, remember, is to give enough information to

your user to make a choice, but not to provide so much that you are going tooverwhelm them.

When you are done deleting the fields, you don't need you can re arrange them inthe list. That controls their position in the table that is generated. Doing the workhere is a lot easier than doing it after you have inserted the table into the page.

Use the up and down arrows to move selected fields up and down in the list.

Work on those fields till you get to what you see in this illustration.5. The Link To Detail From pop up menu lets you select which field in the table is

going to be the link to the detail page from the master page. Select AlbumName

from the pop up menu.


16/28

6. The Pass the Unique Key field tells you which information to pass to the detail

page so that the detail page knows which record to show.

7. Set the Show radio button to All Records. When you get many records in adatabase, you may want to limit the number of items shown on a page. Depending

on how many records you are returning, however, you may not want to break the

returned items into multiple pages.

Note:If you break your master page into multiple record sets, you make that page

very difficult to print and to save for your customer. You want to balance the sizeand usability of your page with the ability to access your information off line. If

you go to a site with a list of 30 or 40 used cars, you probably want to be able to

see them all next to one another. If you break those up to three or four screens,

you make that difficult or impossible.

Below the dividing line, you are working with the detail page and not the master page. Inthe detail page, you need to set the name for the detail page and to select the fields that

you want to have in the detail page.

1. In the Detail Page Name box, enter the name of the page you are going to create.In this case, name it albumdetail.

2. As you edited the Master Page Fields, edit the Detail Page Fields. Delete all but

the following and then arrange them in this order: AlbumName, AlbumPrice,AlbumCatalogNumber, AlbumNotes, ArtistGroupName, ArtistStyle,

ArtistNames, and ArtistPhoto.

The order you select the fields here, determines how they appear in the detail

page.

3. Click OK

You should see a table inserted into your page with all the data in the database in each

record if you are in the dynamic data view and have the auto refresh checked. If youdon't, you need to go into the dynamic data view and you should see this table inserted.

There is also a new document in your workspace called albumdetail.cfm. Save that new

page that was created as albumdetail.cfm> You will need it in a little while.


17/28

There is a lot that you want to do to this table to make it look really excellent. You are

going to do that now.

1. In the first row of your table, select each column name and replace it withsomething more readable, except for the first heading. You are not going to need

to have anything there at all, so delete that one.

2. Select all the cells of the first row and set them to bold so that they stand out.3. You don't need the "2 Records Total" visible at the bottom, so delete that now.

4. While the borders are great when you are setting a table up, they have to go

visually. Select the table in the tag inspector at the bottom of the documentwindow. You will get the Table Property Inspector up. In the inspector:

o set the cell padding to 2

o set the border to 0

o set the width to 100% because you want the table to fill the entire space

allotted in the template

o change the alignment to left so that it locks it in relation to the news

sidebar on the left.

Now that the table is well formatted, you need to make the last change on the table. Youare going to display a thumbnail of the album in the first column so the user gets an idea

of which album they are getting information on. Also, it adds some small color to the

page. Each thumbnail is only couple of K, but when you do things like this, you do want

to be aware of how heavy that may make your page. If you can compress the thumbnailsmore, that is a great idea. But, if you still have too many, you may want to consider

setting the master page to only display 15-20 records at a time so that a limited number of

the thumbnails are downloaded at a time.

1. Click on the "assets/bands/YL_hyst_thumbnail.jpg" placeholder and delete it.

If you have live data turned on, the other thumbnails disappear as well.


18/28

2. Click your cursor in the cell where the placeholder was and insert an image.

3. In the Insert Image dialog at the top, there is a radio button to select to insert from

the file system or from the data sources you have set up for your site. Click onData Sources.

4. Expand the Catalog datasource and you will see the same list of fields that you do

in the Bindings panel.

Select AlbumCoverThumbnailURL from the list and click OK.

You should see the thumbnails in the first columns of the table.

5. Save your file.

You have created the catalog page for Record Store. Now you want to work on the detail

page that you created when you inserted the Master Detail Page Set.

Modifying the albumdetail page

1. Open the albumdetail.cfm page if you don't have it open already.

This is one ugly page. You need to get it to match the catalog page and that is

going to be really easy.

2. Open the Assets panel. If you don't see the Assets panel it is grouped with the Sitepanel by default. If you need to, you can go to the Window Menu and select

Assets.

3. In the Assets panel, click on the icon second from the bottom. If you leave yourcursor over the image, you should see a tool tip identifying it as Templates. Last

time you used a template, you did it from the New File Dialog. This time you are

going to apply an existing template to an existing page.4. Highlight the icon for the recordstore_template and click the Apply button at thebottom of the panel.

5. The Inconsistent Region Names dialog box comes up.

This is how you can select areas of your page to flow into a specific area of a

template. This is really useful if you are going to apply templates to documents

that were built with other templates where the names of the editable regions arenot the same.


19/28

6. For the Document body of the albumdetail.cfm page, click on the Move Content

to New Region dropdown and select Main Area Content and click OK.

7. Save your page.

Your document should look like this now.

You can use some of the things you tried in previous steps to make this page look better.

You do not need to do anything at this point. This section is optional.

Some of the optional things you might try on your own include:


20/28

Deleting the title from the Title Bar Sidebar editable area.

Dragging the name of the album from the Bindings panel to the Title Bar Main

Area. Adding an image in the Sidebar Content and bind that to the AlbumCoverURL

from the data source that was automatically inserted in the page when it was

created by the Master Detail Page Set behavior. Selecting rows in the table and cut and paste them to put the table into the order

you want.

Modifying the attributes of the table any way you like. Adding an image in the table to show a photo of the artist.

Changing the format of the price placeholder to currency dollar format in the

Binding panel.

You are ready to test the customer-facing portion of your site.

1. Open your catalog.cfm page and press F12 or open a browser and browse to the

file.(A common URL to the file ishttp://localhost:8500/RecordStoreCFStart/catalog.cfm.)

2. Click on the name of one of the albums and you should go to the detail page.

You now have a simple application formatted in the corporate templates.

Creating the administrative site

Creating a customer-facing site is important and not too difficult, but what do you do to

add records to the database? For example, when there is a price increase how do you

change that? If a band's album stops selling, what do you do to take it out of your catalog.If you were doing your site as static pages, you could hire a production artist or modify

all the pages that use that information yourself every time.Neither is a good option.

What you want to do is create a was to access the data on your site from behind your

firewall that accesses the same database. Or, you need to create a private password-

protected part of the site that you can use to administer the data through a browser. Sincecreating a password-protected site is beyond the scope of what you are going to learn

here, you are going to create a new set of pages in the same site that will allow you to

change the data in the database. In the real world, you would never externally publishpages that would allow someone to administer the site. This example is for you to learn

how to make pages to edit, add and delete data.

Creating the admincatalog page

Since you need to be able to see the data much the same way as the end user of the site, a

great place to start your admin site is copy the catalog.cfm page and save it asadmincatalog.cfm.


21/28

1. Open the catalog.cfm file and select Menu -> Save As and save the file as

admincatalog.cfm.

2. Put your cursor in the price column and right click to get the context menu.3. From the context menu, select Table -> Insert Rows or Columns and insert one

column after the current column.

4. Put your cursor in the new last cell in the second row after the price for the firstalbum. Type "edit".

5. Select the word "edit" that you just added in the table and in the property

inspector click on the folder icon at the end of the Link dropdown.6. In the File Name of the Link dialog type "adminedit.cfm". You are going to create

that file in a minute but it does not exist now.

7. Click on the Parameters button and type "AlbumID" in the name and then tab to

the value field. Instead of typing in a value, click on the lightning bolt icon andclick on the "AlbumID" in the recordset that comes up.

Here, you are setting the link to pass the AlbumID, the unique key for the table is

passed in the URL string to the adminedit.cfm page where there will be arecordset to catch the AdminID and show just that data that matches that record.

This is very much what the Master Detail Page Set behavior does automatically,but this time you are going to have to do it by hand.

8. Click OK to set the link. You should see

"adminedit.cfm?AlbumID=#Catalog.AlbumID#" in the Link dropdown in the

property inspector.9. Save your page.

Creating the edit record page

Now that you have the admincatalog.cfm built, you need to create the adminedit.cfmpage.

1. Create a new page and apply the recordstore_template to the page.

2. Insert a Query from the Bindings panel. Select the Advanced dialog and eithertype or use the interface to create the following query:

SELECT *

FROM Album, Artist

WHERE Album.ArtistID = Artist.ArtistID

AND Album.AlbumID = #AlbumID#

This query selects all the data from two tables, Album and Artist. It joins the two

tables on the ArtistID field. What is new here is that there is an addition of one

more condition to the WHERE statement. The "AND Album.AlbumID =#AlbumID#" tells the database to only find records where the value of the

AlbumID field in the Album table is the same as the value passed in from the


22/28

URL that you just added to the admincatalog.cfm file.

3. Name your query AlbumQuery.

4. Insert a second query, name it ArtistQuery, and add the following SQL statement.

SELECT *

FROM Artist

You are going to use this to populate a pop up menu.

For more detail on creating queries, you should look at the ColdFusion

documentation that installs with your ColdFusion MX server.

5. Click in the Main Area Content Area and delete the placeholder text and selectInsert > Application Objects > Record Update Form.


23/28

6. Fill out the form with the following choices:

7. Select the RecordStoreCF data source for the Data Source.

You will get a warning at this point that there are some fields in the database that

may cause some issues. Ignore the message as the fields you edit won't run into

any problems.8. Select Album from the Table pop up menu.

9. Set Select Record From to AlbumQuery. This is the recordset that you created.

10. Select the Unique Key Column to be AlbumID.

11. Set the After Updating, Go to equal to admincatalog.cfm so that you can see thechanges you made.

12. Below the line, delete the fields until you have only the following fields left:

AlbumName, ArtistID, AlbumPrice, AlbumNotes, and AlbumCatalogNumber.You don't want to insert the AlbumID, because that is automatically generated

and will exist for the record and you don't want to change that. You could also

leave the URL fields in, but not for this example.


24/28

13. Select the ArtistID form field in the Form Field table. You are going to change

this so that it displays as a menu and not as a text area.

14. Click on the Display As: dropdown and select Menu.15. Click on the Menu Properties... button.

16. Select to populate the menu items from a database and select the ArtistQuery as

the recordset that you set up when you started this page. You want to select that

one because you want to get all the names for all the bands in the pop up menu,

not just the name of the selected band. It would be useless to have a pop up menuwith only one choice.

17. Set Get Labels From to ArtistGroupName.

18. Set Get Values from ArtistID.19. Set Select Value Equal To equal to #AlbumQuery.ArtistID#. This makes the

default, or selected entry in the dropdown the name of the selected band.

20. Click OK.

21. Click OK again to OK the Record Update Form.22. Save your file.

You can use any of the techniques we used previously to improve the layout of the page.

One thing that I recommend is that if you are creating a page that is going to insert or

change data of a record, is to put some instructions on the page so that you remindwhoever is working on that page to edit carefully, since they are working with live data.

Your page might look like this:


25/28

Test your application by opening the admincatalog.cfm and previewing it in your browser

or by browsing to it from your testing server. Click on the edit button for one of the

albums and edit a few of the properties and then click Update Record. You will go back

to the admincatalog page and your changes that you just made will show up.

Creating the insert record page

Creating an insert page is even easier than the edit page. You will start with the

admincatalog page and add a button there to add a record and then a page to add the

record.

1. Open the admincatalog.cfm page if it is not already open.2. Select the contents of the Sidebar Content and delete it.

3. Add an image and navigate to assets/b_addrecord.gif and click OK to insert the

graphic.

4. In the link box of the image you just inserted, link to adminadd.cfm which you are

going to create in a moment.5. Save the file.

Now that you have a link from the admincatalog.cfm page, you can create the add page

itself.

1. Create a new page from your template and save it as adminadd.cfm.


26/28

2. Create two recordsets. Name one AlbumQuery and select everything from the

Album table. Name the second one ArtistQuery and select everything from the

Artist table.3. Click in the Main Area Content and delete the placeholder text.

4. Select Insert -> Application Objects -> Record Insertion Form.

Fill out the form with the following choices. This is much the same as the Record

Update form.

5. Set the Data Source to RecordStoreCFStart, Set the table to Album, Afterinserting you want to go to the admincatalog.cfm.

6. In the Form fields you want to leave them all there except the AlbumID, which

the database is going to assign automatically.7. For the ArtistID, set it to Menu and then click on the Menu Properties... button.

8. Set Get Labels From to ArtistGroupName.

9. Set Get Values from ArtistID.10. Leave Select Value Equal To empty because there is no data being handed to the

form to display.

11. Click OK.

12. Click OK again to set the Record Insertion Form.


27/28

13. Save the file.

You now have a complete application for the most part where your customer can view

data from the database and can go to detail records for each piece of data. You can

administer and change the data for each record in the database and you can add morerecords to the data base. You have leaned how to use templates with dynamic data, bind

tables to one another, how to use the Application Objects, and how to use one recordset

with another to select data to display in a form that updates another recordset.

Extra creditWhere should you go from here?

Well, there are few things that are missing from this application. You can't delete a

record, and there is no password protection for the admin part of the site.You will notice if you look at the Application Objects that there is no delete record

object. Basically, that is because deleting records from a database is a bad idea in mostcases. Best practice for databases is to use a Yes/No or Boolean field in your databases todetermine which records are inactive. Then, in every recordset you make, you set a

WHERE condition in the SQL to only show the active records. That way, when you

make a record inactive, it is there in the database for you to access if there was somemistake. But, it will not show up anywhere that you don't want it to. You can do that with

this example. The Album table has a column in it for this purpose. Try to make that work,

and remember to change your queries to have a WHERE condition to show only the

active records.You also didn't create password authentication in this tutorial. There are many techniques

for creating password authentication. You may want to check the Macromedia Exchange

for extensions that add this ability.

Additional reading and resources

There are loads of resources for you to tackle to help you learning Dreamweaver and

ColdFusion MX.

There are constantly new tutorials, tips and articles for Macromedia products that are

published in the Macromedia Designer Developer Center.Another great place to go for information and help is the Macromedia Forums where

there are lively discussions of all our products.

There are lists of ColdFusion MX resources and Dreamweaver MX resources at the

Macromedia support center. Check outhttp://www.macromedia.com/support/dreamweaver and

http://www.macromedia.com/support/coldfusionYou can also see this application working at

http://examples.macromedia.com/dreamweaver/recordstore/catalog.cfm

This tutorial is being written before the release of many of the books on DreamweaverMX, but you can always go to your favorite bookseller and search for ColdFusion MX


28/28

and Dreamweaver MX. Amazon.com has a Macromedia bookstore where you can find

many of the latest publication about Macromedia products.

store tutorials

Documents