Building your first dynamic website Part 1: Setting up your site and database connection | Adobe Developer Connection

Adobe.com Sign in and join ADC RSS United States (Change)

Search developer content...

PRODUCTS DEVELOPER RESOURCES TECHNOLOGIES

Dreamweaver Dreamweaver

Search Search

Home / Developer Connection / Dreamweaver Developer Center /

Building your first dynamic website Part 1: Setting up your site and database connection
Irina Dumitrascu This is Part 1 in a three-part tutorial series. In this tutorial series, you will learn how to use Dreamweaver CS4 to create a dynamic (or data-driven) website. You'll learn how to retrieve data from a database and display it on web pages. You'll also use Dreamweaver to create a form that enables visitors to provide feedback (or comments about a product or idea) and then saves their comments in a database. In this part, you learn the difference between static and dynamic websites, how to set up and define a PHP site in Dreamweaver, and how to set up a MySQL database and user account and connect to your database.
REQUIREMENTS

To complete this tutorial you'll need to install the following software and files: Dreamweaver CS4
Try Buy

Sample files:
feedback_php.zip (ZIP, 42K)

Prerequisite knowledge You should be familiar with the Dreamweaver workspace and the basics of building a static website as explained in Creating your first website in Dreamweaver.
REVIEW YOUR TASK

The website you'll create consists of:

A page that provides a form for leaving comments and displays the comments already left by others.

An administrative section for managing the comments. This section can be accessed only by the site's administrators and consists of the following pages:
A login page that allows administrators to authenticate A page for administrating feedback A page for deleting feedback items A page for changing the status of feedback items

Figure 1 shows the main page of the finished site, including the feedback form and two comments left by site visitors.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_print.html[4/6/2010 6:22:49 PM]

Building your first dynamic website Part 1: Setting up your site and database connection | Adobe Developer Connection

Figure 1. This is the main page of the dynamic sample website that you'll create in this tutorial.

Note: The design is derived from dreamy.

COMPARE STATIC V. DYNAMIC SITES

Building a website requires familiarity with specific concepts, as well as software products and tools. This section provides a brief overview of these requirements, so you gain a better understanding of the difference between building a static versus a dynamic website. A static site displays the same information to all users, whenever they access it. Consider a site that makes a book available via the Internet. The site's content is the same for all users at all times: each page of the book, with links to the next and the previous page. What would happen if the site owners decided to allow users to add comments on each page? The site would become dynamic: over time its contents would change as users added comments. If the site became very popular, the owners might decide to add another feature that enabled moderators to reject inappropriate comments. In this case, the site would work one way when accessed by a regular user and another way when accessed by a moderator. A key difference between a static website and a dynamic website is the source of the information that is displayed by the site. Static websites All the content data for a static website is contained in the files that correspond to the pages of the site. These files store data in a special format, HTML. Returning to the example of static website displaying the pages of a book, each page of the book would be stored as HTML in a separate file with the .html extension. In order to change the contents of a book page, you would have to edit the corresponding HTML file (using a text editor or HTML editor such as Dreamweaver CS4). To run a static website you need a web server , which is a software application that:
Receives requests for displaying a web page Reads the corresponding file

Sends the contents of the file back to the computer that made the request (see Figure 2).

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_print.html[4/6/2010 6:22:49 PM]

Building your first dynamic website Part 1: Setting up your site and database connection | Adobe Developer Connection

Figure 2. A typical setup for static websites

Examples of common web servers include Apache and Microsoft Internet Information Services (IIS). Dynamic websites In contrast, dynamic sites must be able to display information that changes over time or varies depending on the user who accesses it. For this reason dynamic sites use a software program that acts as a data repository, usually a database system. Information can be added to or retrieved from this repository dynamically. Furthermore, dynamic sites must be able to integrate the static parts of a sitefor example, the book contents in the book websitewith the dynamic ones, for example, comments. This mix of static and dynamic information is realized, in addition to using a web server, by:
Writing the pages in a scripting or tag-based language , that mixes the static part (HTML) with instructions for processing dynamic data. Running software on the server that interprets the instructions in dynamic pages and executes them to retrieve information (data) from the database, add information to the database, or modify it. This software is commonly known as an application server .

The scripting or tag-based language that you'll use must be compatible with the application server that you choose. Popular combinations include:
ColdFusion, which uses ColdFusion Markup Language (CFML) Active Server Pages (ASP), which uses VBScript and JavaScript PHP , which uses the PHP scripting language

Note: In this context, PHP has two meanings: It is used to describe a scripting language and an application server that supports that language. Therefore, in addition to a web server, the following software is required in order to run a dynamic site (see Figure 3):
Database server: Software that manages the database. Some commonly used database servers for the web are MySQL, Oracle, and SQL Server. Application server: Examples of application servers are ColdFusion, IIS (which acts as a web server and an application server), and the PHP application server.

Figure 3. A typical setup for dynamic websites

In the following sections, you will accomplish these tasks:

1. Set up the development environment, including the installation of software needed to run the dynamic website. 2. Create the website and pages in Dreamweaver. In this step you will also set options in Dreamweaver to specify the scripting language in which dynamic pages are written, where to store the files, and so on. 3. Create a database and configure Dreamweaver to use it. 4. Create the dynamic pages that make up the site.
SET UP YOUR PHP DEVELOPMENT ENVIRONMENT

To begin work, you need to create an environment in which you can easily develop and test your dynamic website. This means installing the necessary

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_print.html[4/6/2010 6:22:49 PM]

Building your first dynamic website Part 1: Setting up your site and database connection | Adobe Developer Connection

software: a web server, a database system, and an application server. When setting up a development environment, you can choose from several web, database, and application servers. They all differ in price, functionality, and availability on various operating systems. For this tutorial, you will use the following combination:
Web server: Apache Database server: MySQL Community Server Application server: PHP

These servers have been adopted widely and are proven to work together seamlessly, and you can download them for free. What's more, you can get them packaged in a one-in-all solutionXAMPP for Windows or MAMP for Mac OS Xwhich makes it easy for you to install Apache and MySQL and set up your PHP development environment in Dreamweaver. Note: If you want to use other combinations of server software (such as the IIS web, the Microsoft Access database, and the ColdFusion application servers), the techniques presented in this tutorial still apply. Set up your PHP development environment Refer to the following pages in the Setting up a PHP development environment for Dreamweaver tutorial to install the Apache web server and MySQL database and then test your PHP installation:
To install XAMPP on Windows, follow the instructions in Set up PHP for Windows. To install MAMP on Mac OS X, follow the instructions in Set up PHP for Mac OS X.

Note: Adobe does not provide technical support for third-party products such as XAMPP and MAMP referenced in this article. After setting up your PHP development environment, return to this tutorial to set up your workspace and define a PHP site in Dreamweaver. Set up your workspace For this tutorial, I assume that you are somewhat familiar with the Dreamweaver workspace. If necessary, you can watch the video Introducing Dreamweaver CS4 (6:36) to refresh your memory and familiarize yourself with the tools you need to complete this tutorial. Dreamweaver CS4 includes a workspace configurator, which lets you choose the workspace that you want to use. Each workspace has a predefined layout of the main work area and the helper panels to facilitate quick completion of certain kinds of tasks. For this tutorial, you will want to work in the classic workspace, which features panels that provide easy access to the tools and files you'll need. To get started:
1. Launch Dreamweaver if you haven't done so already. 2. Choose Window > Workspace Layout > Classic. This will arrange the panels in the window; for the moment they are disabled (grayed out) but will become functional after you create a PHP site for Dreamweaver as instructed in the next section. 3. Familiarize yourself with the location of the following panels and toolbar: The Databases, Bindings, and Server Behaviors panels. You will be using these panels throughout the tutorial. The Properties inspector (at the bottom) The Files panel (that lists the folders and files in your application folder). The Insert toolbar, which is located below the main menu bar (see Figure 4).

Figure 4. The Classic workspace Insert toolbar DEFINE A PHP SITE

In Dreamweaver, a site is a group of settings that are important for a web project. These settings specify, for example, where your project files are located on your computer (the working folder ) and the URL address of the web server to be used to test the project on your computer (the testing server ). It's common practice to store project files in a folder inside the root of the testing server, which is what you'll do in this tutorial. This section shows you how to:
1. Install the projects files.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_print.html[4/6/2010 6:22:49 PM]

Building your first dynamic website Part 1: Setting up your site and database connection | Adobe Developer Connection 2. Specify your working folder. 3. Specify your testing server.

Install the projects files If you haven't done so already, download and extract the contents of the feedback_php.zip file that accompanies this tutorial. You will want to move the contents of the ZIP archive to your testing server's document root. If you installed XAMPP and MAMP, the document root is::
On Windows: C:\xampp\htdocs On Mac OS X: Applications:MAMP:htdocs

The ZIP file contains a folder named Feedback , which contains the folders data and images and the file style.css. Move the Feedback and its contents to your testing server's document root. You should end up with the following folder structure:
On Windows: C:\xampp\htdocs\Feedback On Mac OS X: Applications:MAMP:htdocs:Feedback

Specify your working folder To specify your working folder:

1. In Dreamweaver, select Site > New Site. This opens the Site Definition dialog box. If the Basic tab is showing, click the Advanced tab. 2. Enter Feedback in the Site Name text box. The site name identifies the project in Dreamweaver. 3. Click the folder icon next to the Local Root Folder text box to and browse to the Feedback folder that you created in your testing server's document root: On Windows: C:\xampp\htdocs\Feedback On Mac OS X: Applications:MAMP:htdocs:Feedback 4. In the HTTP address text box enter http://localhost/Feedback . 5. Select the Links relative to Document options. This is the most reliable setting for a PHP site. Selecting the Links relative to Site root option can cause problems with PHP include files on some servers. 6. Leave the Site Definition dialog box open. You will specify your testing server next.

Specify a testing server for Dreamweaver To specify a testing server:

1. In the Site Definition dialog box, click Testing Server in the Category list on the left. (Note: If you can't see the Testing Server item, verify that the Advanced tab is selected in the Site Definition dialog box.) The Testing Server screen appears. 2. Select PHP MySQL from the Server Model pop-up menu. 3. Select Local/Network from the Access pop-up menu. 4. Dreamweaver displays the local root folder you specified in the Local Info category in Step 3 in the previous section. Leave the folder unchanged. 5. In the URL Prefix text box, you must enter the URL you would enter in a web browser to request a page in your web application. For the names used so far in this tutorial, the URL Prefix is: http://localhost/Feedback/. 6. Click OK to define the site and dismiss the Site Definition dialog box. 7. Click Done to dismiss the Manage Sites dialog box.

The next step is to create a MySQL database and user account.

SET UP A MYSQL DATABASE AND USER ACCOUNT

MySQL is not a single database, but a database management system. You create individual databases within MySQL. The superuser, root, has complete control over all databases, so it's necessary to set up user accounts with restricted privileges to prevent unauthorized users from gaining access to other people's data. In this section, you'll use the MySQL front end, phpMyAdmin (which is installed with XAMPP and MAMP) to complete the following tasks:
1. Create a new database and import data. 2. Create a MySQL user account. 3. Connect to the database.

Create a new database and import data To perform this task:

1. Verify that your web server and the MySQL server are running. 2. Enter http://localhost/phpmyadmin/ into your browser's address bar and load the page.

If you installed XAMPP in Windows, enter root as the user name, and then your MySQL root password when prompted. You should see a phpMyAdmin welcome screen similar to the one shown in Figure 5.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_print.html[4/6/2010 6:22:49 PM]

Building your first dynamic website Part 1: Setting up your site and database connection | Adobe Developer Connection

Figure 5. The phpMyAdmin main screen

Note: The default list of databases shown in the menu on the left of the screen is slightly different in XAMPP and MAMP, but this is not important.
3. Enter feedback in the text box labeled Create new database, and then click the Create button.

Note: You can ignore the Collation drop-down menu. Collation determines the sort order of records. The default setting is fine for English.
4. When phpMyAdmin reports that the database has been created, click the Import tab at the top of the page. 5. In the File to import section, click the Browse button alongside the Location of the text file text box; navigate to the Feedback folder on your computer (Windows: C:\xampp\htdocs\Feedback , Mac OS X: Applications/MAMP/htdocs/Feedback), select the data folder, and then the file feedback.sql . 6. Click the Go button at the bottom of the page. This creates the structure for the database used in this tutorial and adds initial data. 7. Leave phpMyAdmin open, as you will continue using it in the next section.

Create a MySQL user account The root superuser should be used only for administrative tasks inside phpMyAdmin, because it has the power to wipe out all the data. Once data has been deleted, you cannot restore it. There is no equivalent of the Windows Recycle Bin or Mac Trash in MySQL. So, the next task is to create a MySQL user account with restricted privileges. Follow these steps to create an account that has access only to the feedback database:
1. Click the icon that looks like a little house at the top left of the phpMyAdmin screen to return to the original welcome screen (shown earlier in Figure 4). 2. Click the Privileges link in the menu. 3. Click Add a new user (roughly halfway down the page). 4. In the User name text box, enter feedback_user . 5. From the Host drop-down menu, select Local. This enters localhost in the text box alongside, restricting the user to your local test environment. 6. Type a password in the Password field, and retype it in the field immediately below. 7. Leave the rest of the page unchanged, and click the Go button at the bottom of the page. 8. The next screen confirms that the new user has been added. The Global privileges section, shown on the screen, allows giving privileges on all databases. For the purposes of this tutorial, you're going to limit the user to the feedback database, so scroll down to the Database-specific privileges section. 9. Select the database name from the drop-down menu, as shown in Figure 6.

Figure 6. Limiting a MySQL user account to a specific database

10. This opens a page where you can set the user's privileges for the selected database. For a web application, only the first four privileges are normally required: SELECT,

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_print.html[4/6/2010 6:22:49 PM]

Building your first dynamic website Part 1: Setting up your site and database connection | Adobe Developer Connection INSERT, UPDATE, and DELETE. Select them and then click the Go button.

You now have a MySQL user account ready to access the feedback database. In the next section, you'll learn how to create a MySQL connection in Dreamweaver. Connect to the sample database This section describes how to create a connection in Dreamweaver to the sample feedback database.
1. In Dreamweaver, locate the Files panel; in the Local Files section expand the Site item and double-click index.php. 2. In the Databases panel (accessible on the right side of the screen or from Window > Databases), click the Plus (+) button on the panel and select MySQL

Connection from the pop-up menu. The MySQL Connection dialog box appears.
3. Enter feedback_db as the connection name. 4. In the MySQL Server field, enter localhost. 5. In the User name field, enter feedback_user . 6. Type the password you chose for the feedback_user account in the Password field. 7. In the Database field, enter feedback. 8. Click Test.

Dreamweaver attempts to connect to the database. Note: If the connection fails, do the following:
Double-check the server name, user name, and password. Check the settings for the folder Dreamweaver uses to process dynamic pages; see Specify a testing server for Dreamweaver earlier in this tutorial for more details. Make sure the web server and MySQL server are both running. Temporarily disable any firewall or security program. If the connection works, you need to configure the security program to permit communication between Dreamweaver and MySQL. 9. Click OK. The new connection appears in the Databases panel. 10. Select File > Save to save your changes.

Congratulations! Your PHP work environment and site is now set up and you are ready to begin creating the actual pages for your first dynamic site.
WHERE TO GO FROM HERE

In this part of the tutorial, I've introduced the basic concepts behind dynamic websites, and discussed the software and tools that you'll need to design, develop, and run data-driven websites. You've also seen how to set up your development environment in Dreamweaver in preparation for creating your first dynamic website. In Part 2, you'll learn how to create the site's functionality in Dreamweaver.
ABOUT THE AUTHOR

Irina Dumitrascu is a software developer. She loves programming and creating high-quality web applications. Her favorite off-computer activities are traveling, reading, and getting involved in ecology projects.

ADC Home

Online Privacy Policy

Terms of Use

Contact us

Accessibility

Report piracy

Permissions and trademarks

Send feedback

Adobe.com Home

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009). Search powered by Google

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt1_print.html[4/6/2010 6:22:49 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback
Adobe.com Sign in and join ADC RSS United States (Change)

Search developer content...

PRODUCTS DEVELOPER RESOURCES TECHNOLOGIES

Dreamweaver Dreamweaver

Search Search

Home / Developer Connection / Dreamweaver Developer Center /

Building your first dynamic website Part 2: Adding and displaying user feedback
Irina Dumitrascu In Part 1 of this tutorial series, you set up your development environment, including web server, database, application server, and Dreamweaver. In this part you are going to develop the most important functions of your dynamic website: allowing users to add feedback and showing the feedback already gathered. At first, the focus will be on retrieving and displaying data from the database and on adding to the database information from a form submitted by the user. The layout of the page, including images and colors, will be added after this functionality is in place.
REQUIREMENTS

To complete this tutorial you'll need to install the following software and files: Dreamweaver CS4
Try Buy

Prerequisite knowledge Building your first dynamic website Part 1: Setting up your site and database connection
UNDERSTAND THE DATA YOU WANT TO COLLECT

Figure 1 shows the form that you will use to collect feedback from your users.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback

Figure 1. The form used to collect feedback

For each comment you want to capture the following details:

The title (or subject) of the comment The actual contents of the comment, that is the description of the feedback/idea The name of the user that submits the feedback (Optional) The e-mail address of the user that submits the feedback The date the feedback was submitted (this is automatically generated, not entered by the user) The status of the comment. To help administrators react to feedback, a status will be assigned to each feedback item. Initially, the status is pending; administrators can change it to planned if the suggestions are useful and will be implemented, or declined if they are not going to be implemented.

This information will be collected in a database. Figure 2 shows some sample data in a spreadsheet.

Figure 2. Sample feedback

Databases are structured in a way that is very similar to spreadsheets:

Databases consist of one or more tables; spreadsheets consist of one or more worksheets. Tables and worksheets store related information, for example, feedback details. Each row in a table or worksheet represents a record of an item.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback Columns store detailed information about each record. In the feedback example, this information is the title and contents of the comment, name and e-mail address of the commenter, the time and date of the comment, and its status).

The structure presented as a spreadsheet in Figure 2 exists already in the feedback table of the database that you created in Part 1 of this tutorial. The database also already contains two feedback records, so you can proceed with displaying feedback items.
CREATE THE MAIN PAGE

Now that you know what you want to display, you're ready to create the page that shows the feedback left by site visitors. Before continuing:
1. Make sure that your local test server and the MySQL database server, installed in Part 1, are running.

In Windows, this means that the XAMLL Control Panel should be active and the Apache and MySQL servers should be started. On Mac OS X, the MAMP control panel should show the Apache and MySQL servers as running.
2. Launch Dreamweaver CS4 if you haven't done so already.

The main page of the site is stored in the file index.php, which already exists in your project.
3. In Dreamweaver, go to the Files panel; in the Local Files section expand the Site entry as shown in Figure 3 and double-click index.php to open it.

Figure 3. The Files panel

You can see it selected below the Insert bar (see Figure 4).

Figure 4. The index.php tab

4. By default, Dreamweaver opens pages in Split view. You are going to work mainly in Design view in this tutorial, so click the Design view button (see

Figure 5). The page should appear as a white blank area.

Figure 5. A page labeled index.php is opened.

You can enter text and format this page as you would in a word processor. In addition there are web-specific functionalities available, as you will see as you step through this tutorial. Follow these steps to make your first modification to this page:

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback 1. Give your page a name. In the Title text box in the center top of the window, replace Untitled Document with Feedback and Ideas . This is the text users will see in the title bar of their browsers when they browse to this page. 2. Save the file by choosing File > Save.

Note: When working in a ColdFusion or ASP development environment, you would create a new ColdFusion or ASP VBScript file. You would save these files as ColdFusion Templates and Active Server Pages, respectively. Add headings Next, you start to define the structure of the page by adding two title headings and two section headings to your file, as demonstrated in the following steps and the Adobe Captivate demo.
Play the demo: Adding headings to a page 1. Type Feedback and ideas in the page and select the text you just typed. In the Insert toolbar click the Text tab and then click h1. The text becomes bigger because it is now formatted (or styled ) as the first-level (or top-level) heading. Press the Right Arrow key to clear the selection. This will position the cursor at the end of the paragraph 2. Press the Enter key to insert a new paragraph. Type Received feedback and then select the text you typed. 3. In the Insert toolbar on the Text tab, click h2 to style the text as a level 2 heading. Press the Right Arrow key to clear the selection. 4. Press the Enter key to create space for the feedback items. 5. Press the Enter key again to create a new paragraph; type the text Add your feedback and select it. 6. In the Insert toolbar on the Text tab, click h2 again to format this selection as a level 2 heading. Press the Right Arrow key to clear the selection. 7. In Dreamweaver, the page should look like the image shown in Figure 6.

Figure 6. The main headings of the feedback page.

8. Select File > Save to save your changes. 9. To view your changes in a browser, select File > Preview in browser.

Add a record set Next, you want to display the feedback received so far on the page. This is dynamic data, stored in the database as records (or rows) in the feedback table. To define what data to get from the database you can use the Recordset dialog box, which helps you define what results (or set of records), to get from the

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback

database. Follow these steps or watch the demo: Play the demo: Adding a record set
1. In the Server Behaviors panel click the plus (+) button and choose Recordset. 2. In the Name box, type a name for the record set. For this example, type GetFeedback. 3. For the Connection select feedback_db (the connection already created). For the Table, select feedback as the table to get data from. 4. Change the Sort options to created_at and Descending to display the most recent posts first and the older ones last (see Figure 7).

Figure 7. Specify the data to retrieve using the Recordset dialog box.

5. Click Test to preview the data that is retrieved by this record set. 6. Click OK to continue.

Now you can use the record set you've defined to display the data as an ordered list.
7. Position the cursor in the empty paragraph after the Received feedback heading. In the Insert toolbar on the Text tab click the ol (ordered list) button to

create a new ordered list. The list will have one empty element in it. The useful items to display for each item in the database are title, contents, the author's name, and the time when it was created. These elements are found in the Bindings panel (in the right side of the screen).
8. Drag title from the Bindings panel to the list element that you created. Press the Right Arrow key to clear the selection. 9. Drag contents from the Bindings panel to the list element that you created. Press the Right Arrow key to clear the selection. 10. Drag author_name from the Bindings panel to the list element that you created. Press the Right Arrow key to clear the selection. 11. Drag author_email from the Bindings panel to the list element that you created. Press the Right Arrow key to clear the selection. 12. Position the cursor between the title part ({GetFeedback.title} ) and the contents part ({GetFeedback.contents} ) and press Shift+Enter to create a new line inside the list element. Pressing Enter by itself would create a new element in the list, which is not desired. 13. Position the cursor after the contents part ( {GetFeedback.contents} ) and press Shift+Enter to create another new lines inside the list element.

Now the cursor is positioned at the beginning of the last line. Type by followed by a space. Move the cursor after the author name field {GetFeedback.author_name} and type a comma followed by a space, the text at and another space. The last line will look like this:
by {GetFeedback.author_name}, at {GetFeedback.created_at}

14. To highlight the title of the item, select the title (the part {GetFeedback.title} ) and click the B (bold) button on the Insert toolbar. 15. The page in Dreamweaver should look like Figure 8.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback

Figure 8. Received feedback

16. Save the file. 17. Now look at the page again in your preferred browser by choosing File > Preview in browser.

Generate multiple list items As you probably have already noticed, the page displays only one item although there are two items in the database. That is because you have not yet specified that you want the list item to be generated repeatedly, once for each item in the record set. To complete your list, follow the steps below or watch the following demonstration. Play the demo: Repeating and paging
1. Position the cursor inside the list item, and then click the Split view button above the editable area. Now both the generated code and the Design view

are visible. The Code view shows the PHP file that Dreamweaver created for the page. For each element in the Design view there is a corresponding segment in the Code view. Locate the part that corresponds to the ordered list. It is marked with <ol> at the beginning and </ol> at the end. Inside it is a list element, marked with <li> at the beginning and </li> at the end.
2. Select all the text of the list element, from <li> to </li> (including the <li> and </li> tags). Switch back to the Design view and note that the contents of the list element are selected. 3. From the Server Behaviors panel click the plus (+) icon and then select Repeat Region. Note that it will repeat for at most 10 items (the default setting).

Now a list element will be created for each feedback record in the database.
4. Save the file. 5. To see this new functionality in action, choose File > Preview in Browser (or refresh the page in the browser if you still have it open). Now the page shows

both items from the database. Next, you'll need to show some additional details on the page to inform the user which comments and which page are being shown. You can display the index of the first displayed element, the index of the last one, and the total number of feedback elements in the database. For example, "Showing 12 out of 2." When you have more than 10 comments in the database, there will be more than one page of comments. So, you will also want to add a way to navigate to the next and previous pages.
6. Start by making space for the additional information. Place the cursor at the beginning of the second heading (Add your feedback) and press the Enter key to insert a new paragraph. Move the cursor up to the created paragraph. It has a heading style; to make it a simple paragraph, go to the Text tab on the Insert toolbar and click the button. 7. Ensure that the cursor is still inside the paragraph and type Showing followed by a white space. 8. From the Server Behaviors panel click the plus (+) icon and then select Display Record Count > Display Starting Record Number. 9. Press the Right Arrow key to clear the selection, and then type: . 10. From the Server Behaviors panel click the plus (+) icon and then select Display Record Count > Display Ending Record Number. 11. Press the Right Arrow key to clear the selection and then type a white space, followed by out of and another white space. 12. From the Server Behaviors panel click the plus (+) icon and then select Display Record Count > Display Total Records. Press the Right Arrow key to clear the selection. 13. To create links for the previous and the next page, move the cursor to the beginning of the current paragraph (before Showing ). From the Server Behaviors panel click the plus (+) icon and then select Recordset Paging > Move To Previous Page. Press the Right Arrow key to clear the selection and type a white space. 14. Move the cursor to the end of the paragraph and type a white space. From the Server Behaviors panel click the plus (+) icon and then select Recordset Paging > Move To Next Page. Press the Right Arrow key to clear the selection. 15. The page in Dreamweaver should loke like the page in Figure 9.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback

Figure 9. Received feedback navigation elements

16. Save the file and preview it in your preferred browser to see the results.
CREATE THE FEEDBACK FORM

The next step is to allow site visitors to add their comments. For this, you need a form to enter the data, as well as some code on the server that processes the data and saves it in the database. Both these elements can be created easily using Dreamweaver CS4. Follow the steps below or watch the demo to create the form. Play the demo: Creating the form
1. Place the cursor after the heading Add your feedback and press the Enter key to make room for the form. 2. To begin creating the form, choose Insert > Data Objects > Insert Record > Record Insertion Form Wizard. 3. In the wizard window: Make sure that the Connection is set to feedback_db; set the Table to feedback. Remove the id, created_at and status rows, as these elements should not be presented to the user. They are set automatically in the database when the record is saved. To remove a row, click it to select it and then click the minus (-) button. Click the contents row, and then change the Display As option to Text Area instead of Text Field. This will provide enough space for users to add lengthy comments. Next to the After Inserting, Go To box click Browse and choose the page that will be displayed after the record is inserted in the database. At this point, the index page is the only page available. Choose the index.php file and click OK to create the form (see Figure 10).

Note that Insert Record appeared in the Server Behaviors panel. This behavior creates the code that saves the entered data in the database.

Figure 10. The Record Insertion Form wizard

4. To improve the layout of the page, delete the empty paragraph between the heading and the table. 5. Also, the table is initially centered and on this page it would look better aligned to the left. To do this, select the entire table as shown in Figure 11; make

sure that the Property inspector is open (choose Windows > Properties if it is not), and set the Align property to Default.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback

Figure 11. The selected table

6. Click somewhere inside the editing area to clear the selection. 7. You can change the labels for the fields by editing them directly. Change the default value "Author_name:" to "Your name:" and change "Author_email:" to "Your e-mail (optional):". 8. Select the form's button, and in the Property inspector change its Label from Insert Record to Add. (These labels could have been specified in the wizard window too.) 9. Also, the text area is a bit too wide by default. To narrow it, select the text area and in the Properties panel enter a smaller number for the field Char

Width, for example, 30. Click inside the page to see how it looks after this change. It should look like the table shown in Figure 12.

Figure 12. The add feedback table in Design view

10. Save the page.

Test the form in the browser Now, view the form in your browser and use it to add several new feedback items. When the total number of items in the database exceeds 10, there will be two pages of items and you will be able to test the paging functionality.
UNDERSTAND THE FILE STRUCTURE OF YOUR SITE

Before you start styling (or formatting) the feedback page, let me explain the correlation between the files that are part of your project folder on your local disk and the pages that can be accessed on a live site. In the Files panel, in Dreamweaver, you can see the file structure shown in Figure 13.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback

Figure 13. The files trcuture in the Files panel.

The name of the site is Feedback, and it is located in the Feedback folder, on your disk, inside the application server's root. Inside the folder, there is the main page, called index.php. When you preview this page in the browser, the address bar of the browser contains:
http://localhost/Feedback/index.php

The first part, http://localhost , tells the browser that it must look for an HTTP page on your computer (the localhost). The next string is the name of the site, Feedback. The last string is the name of the page to visualize, index.php. Next, open the images folder in the Local Files panel. Inside it, there is an image file called header.jpg. To show it in your browser, go to the address bar and type: http://localhost/Feedback/images/header.jpg. This tells your browser that it should look for the image, header.jpg, in the images folder of the Feedback site on your computer. Also in the Files panel, in the data folder, you'll see the file feedback.sql that was provided in order to initialize the database. This file is currently visible, in the site, at the following address: http://localhost/Feedback/data/feedback.sql . Of course, this data should not be visible to the visitors of your site. You should never place files that contain sensitive information in the site's folder.
1. In the Local Files panel in Dreamweaver, select and right-click site root (Site-Feedback), and then choose Explore (or Reveal in Finder on a Mac) from the pop-up menu. 2. In the window that appears, select the data folder and delete it. 3. Go back to Dreamweaver and notice that the data folder dissappeared from the Local Files panel. 4. Go back to your browser and refresh the page: http://localhost/Feedback/data/feedback.sql.

Note that the database information is not available anymore.

FORMAT THE PAGE WITH CSS

Cascading style sheets (CSS) is a standard used to describe the presentation (look and feel) of a structured document. A structured document has structure for its contents, that is, it contains elements that are identified as headings, lists, paragraphs, and so on. CSS files contain a description of the fonts, colors, dimensions and so on to apply to the content of a document based on its structure. By separating the content of a structured document from rules used to display it, you can change its appearance by modifying the CSS without changing the document itself (the content). Note: For a demonstration of this, visit CSS Zengarden. This site shows a variety of designs that you can apply to the same structured document by attaching different CSS files. Attach the provided CSS to the page The index page you created has headings (two levels), an ordered list with multiple elements, and a paragraph with two links ( previous page and next page). It is, therefore, a structured document. Follow the steps below to attach a style sheet to it. Play the demo: Attaching a style sheet
1. From the CSS Styles panel click Attach Style Sheet as shown in Figure 14.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback

Figure 14. The Attach Style Sheet button

2. In the popup that opens select the file style.css from your site's folder.

Note that after you apply the CSS file the look of the site changes, as the layout rules are applied to the document.
3. Save and preview your work in the browser.

Preview the site in Live view In Dreamweaver CS4 you can use Live view to quickly check how the dynamic site looks in the browser, without leaving the Dreamweaver environment. Play the demo: Using Live view
1. Click Live View in the Document toolbar above the main area (next to the Code, Split, and Design buttons). 2. The view changes to show how the site will look in a browser, with the actual information from the database (see Figure 15).

Figure 15. Live view shows how the site will look in a browser.

Finish the layout The last touch for integrating the layout is splitting the document into two areas:

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 2: Adding and displaying user feedback The first contains the elements used to display existing feedback. The second contains the elements used to add new feedback.

The identifiers for these areas are already defined in the provided CSS, as it contains additional formatting for these parts. Play the demo: Finalizing the layout
1. Select the part of the page that refers to showing feedback items (everything from the Received feedback heading to the Next link, inclusive). 2. On the Insert toolbar select Layout and then click Insert Div Tag to insert a new division in the document. 3. In the Insert Div Tag dialog box, set the Insert option to Wrap Around Selection. In the select box labeled "ID" you find the identifiers defined in the

attached style sheet that are not already assigned. For now no identifier is used; the options show the two identifiers defined in the CSS, items and create .
4. Select items as shown in Figure 16. Click OK.

Figure 16. The CSS identifiers

5. Now select all the elements in your page that refer to creating new feedback: everything from the Add your feedback heading to the end of the document, inclusive. 6. Again click Insert Div Tag on the Insert toolbar. In the Insert Div Tag dialog box, set the Insert option to Wrap Around Selection. For the ID, only "create" is available; select it and click OK. 7. Save the page. 8. Preview the page to see the effect of your latest changes.
WHERE TO GO FROM HERE

You have now added dynamic functionality to your website. Visitors can see comments added by other users and add comments of their own. In Part 3 of this tutorial series you'll add administrative functions to the site, so that authorized administrators can review, delete, and approve feedback items.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
ABOUT THE AUTHOR

Irina Dumitrascu is a software developer. She loves programming and creating high-quality web applications. Her favorite off-computer activities are traveling, reading, and getting involved in ecology projects.

ADC Home

Online Privacy Policy

Terms of Use

Contact us

Accessibility

Report piracy

Permissions and trademarks

Send feedback

Adobe.com Home

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009). Search powered by Google

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt2_print.html[4/6/2010 6:23:30 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end
Adobe.com Sign in and join ADC RSS United States (Change)

Search developer content...

PRODUCTS DEVELOPER RESOURCES TECHNOLOGIES

Dreamweaver Dreamweaver

Search Search

Home / Developer Connection / Dreamweaver Developer Center /

Building your first dynamic website Part 3: Building the administrative back end
Irina Dumitrascu In Part 1 and Part 2 of this tutorial you set up your development environment and created a dynamic site for gathering and displaying feedback in the form of user comments. In this part of the tutorial, you will add a page to your site that allows an administrator to remove or approve feedback items. To do this you will need to:
Protect this page so it can be accessed by authorized users only Define a list of authorized users Implement a way for authorized users to authenticate themselves (login) and to logout
REQUIRMENTS

To complete this tutorial you'll need to install the following software and files: Dreamweaver CS4
Try Buy

Prerequisite knowledge
Building your first dynamic website Part 1: Setting up your site and database connection Building your first dynamic website Part 2: Adding user functionality
CREATE THE ADMIN PAGE

To create the administrative page, you'll start by creating a page containing just a title, and build around it the protection mechanism to allow access only by authorized users. The first thing you have to do is to create the admin page.
1. Launch Dreamweaver if you haven't done so already. 2. If you see the Welcome screen shown in Figure 1, choose PHP from the Create New column.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end
Figure 1. Creating a new PHP page from the Dreamweaver Welcome screen

If you don't see the Welcome screen, choose File > New and in the dialog box that appears choose PHP as the Page Type, leave <none> as the Layout, and click Create (see Figure 2).

Figure 2. Creating a new PHP page with the New Document dialog box

A new page, labeled Untitled-1, is created and opened.

Next, follow these steps:

1. In the Title text box, replace Untitled Document with a more descriptive title, for example, type Administration. 2. In the new page, add the same text (for example, type Administration again). 3. Make it a level 1 heading: Select the new text and then click the button labeled "h1" on the Text tab of the Insert toolbar. 4. Press the Right Arrow key to clear the selection and press the Enter key to create a new paragraph. 5. To save the page choose File > Save. For the name, type admin . Select PHP Files for the Save As Type option.

Note: If you were working in a ColdFusion or ASP development environment, you would create a new ColdFusion or ASP VBScript file. These files would be saved as ColdFusion Templates and Active Server Pages, respectively.
6. Preview the page using Live view or by opening it in your browser of choice (choose File > Preview in Browser).
PROTECT THE ADMIN PAGE

So far, the administration page is public, which means it can be accessed by users that are not authenticated. To restrict access to only registered and authenticated users, you must add server-side logic. You can do this in Dreamweaver using a dedicated server behavior. Use the following steps or watch the demo: Play the demo: Protecting the admin page
1. From the Server Behaviors panel click Plus (+) and then select User Authentication > Restrict Access To Page. 2. In the Restrict Access To Page dialog box, select your index page for the If Access Denied, Go To option. If a user is not authenticated, then when they attempt to access the administration page, they will be redirected to the index page. 3. Click OK. 4. Save the page. 5. Preview the page using Live view or in your browser of choice. Note that you are redirected to the index page, because you are not authenticated and therefore do not have access to the administration page.
DEFINE AUTHORIZED USERS

The list of users that are authorized to administrate the feedback site is dynamicadministrators can be added or deleted over time. For this reason, it should be stored in a dynamic data repository, the database. The database you have created for this tutorial already contains a table to store information about authorized users; this table is named administrators. To view its structure and data, follow the steps below or watch the demo. Play the demo: Defining authorized users

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end 1. In the Databases panel in Dreamweaver, select the database created for this tutorial (feedback_db). 2. Right-click the table named administrators and select View Data.

As you can see, each record in this table contains a user name and a password that will be used authenticate authorized users to the site.
AUTHENTICATE USERS

Next, you need to provide a way for authorized users to authenticate themselves (through login). The standard way to do this is by creating a form, often on a dedicated page, where the user can enter his or her user name and password. Follow these steps:
1. Create a new page. Choose File > New, and then select PHP for the Page Type. 2. Change the page title from Untitled Document to Login . 3. In the empty document, type Login . 4. Select the text you just typed and make it a level 1 heading: by clicking h1 in the Insert toolbar. 5. Press the Right Arrow key to clear the selection and press the Enter key to create a new paragraph. 6. Choose File > Save. For the name, type login and select PHP Files as the Save As Type.

Next add the login form to the page by following the steps below or watching the demo. Play the demo: Protecting the admin page
1. To add a new form, click in the new paragraph below the Login heading; in the Insert toolbar, choose the Forms tab and click the first item (Form). 2. To add a user name field, click Text Field on the same toolbar. Set its ID to username and its Label to Username:. 3. Press the Right Arrow key to clear the selection and press the Enter key to create a new paragraph. 4. To add a password field, click Text Field again. Set its ID to password and set its Label to Password:. 5. Select the password Text Field and in the Property inspector change its Type from Single Line to Password. 6. Click inside the main area after the field to save this setting; press the Enter key to create a new paragraph. 7. On the Insert toolbar, click Button to create the button that submits the form. In the dialog box that appears, leave the default settings unchanged and click OK. Select the button and, in the Property inspector, change its Value from Submit to Login .

Your page should look like the image shown in Figure 3.

Figure 3. The login page in Design view.

The next step is to add the server-side logic that performs authentication. If the login is successful, the user should be directed to the administration page created in the previous section; if the login fails, the login page should be shown again. To implement this functionality, follow the steps below or watch the demo. Play the demo: Adding admin login behavior
1. In the Server Behaviors panel, click Plus (+) to add a new server behavior and select User Authentication > Log In User. 2. In the Log In User dialog box, set the following options: For Get Input From Form use the login form (leave the default: form1) The identifiers for the Username Field and Password Field are automatically detected by Dreamweaver, so no change is needed Set Validate Using Connection to feedback_db, the database you created for this tutorial. For the Table, select administrators. For the Username Column, select username. For the Password Column, select password. Set If Login Succeeds, Go To to admin.php. Set If Login Fails, Go To to login.php.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

Your Log In User dialog box should look like Figure 4.

Figure 4. Login form

3. Click OK to create the server-side login logic. 4. Choose File > Save to save the login page.

Now that the authentication logic is complete, you can test the login page:
1. Open it using Live view or preview it in your favorite browser. 2. Enter no credentials or some random values and click Login. The login page will be shown again. 3. Enter the credentials that exist in the database. For Username type admin and for Password type CZ7892 . The server will authenticate you and direct you to the administration page.
GIVE AUTHENTICATED USERS A WAY TO LOG OUT

The next step is to allow authenticated users to log out. The only page that will require authentication is the admin page, so the logout link and logic should be placed on this page, as shown in the following demo. Play the demo: Adding admin logout
1. In Dreamweaver, open the admin page. Position the cursor in the paragraph after the heading. 2. On the Server Behaviors panel click Plus (+), and then choose User Authentication > Log Out User. 3. In the Log Out User dialog box change the When Done, Go To option to the main page of the site: Click Browse, select the index file, and click OK. 4. Click OK again. A Log out link is added to the page. 5. Save the page.

Test the entire authentication flow:

1. Log out, access the administration page and you are redirected to the main public page. 2. Access the login page, log in with the proper credentials and you are redirected to the administration page, which is accessible since you are logged in.

One more change is appropriate at this stage: when attempting to access the administration page without being logged in, the user should be redirected to the login page instead of the main page. To do this:
1. Ensure that the admin page is open. In the Server Behaviors panel, double-click Restrict Access to Page and set the If Access Denied, Go To value to the login page. Click OK. 2. Save the page.

Now the entire flow is complete: when attempting to access the administration page, the user is redirected to the login page; after a successful login, the

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

administration page is accessible; after logout, it is not accessible anymore. Test this flow on your computer.
ADD CONTENT TO THE ADMIN PAGE

The first function to implement in the administration page is to allow administrators to delete entries submitted by the users, for example, spam entries or entries that do not respect the terms and conditions of the page. In order to delete items, they must first be displayed. The process of showing all feedback entries from the database is the same as the one you used to show feedback on the main page of the site.
1. Add a new paragraph after the Administration heading with the text Received feedback. 2. Modify the paragraph to be a second level heading: Select the text, and click Text and then h2 on the Insert toolbar. 3. Repeat the process from the section Create the main page in Part 2 of this tutorial series to display the items on the admin page, with pagination and

navigation. Try to do the steps on your own and use the material from that section as a reference whenever needed. When you have finished repeating the process, the page should look like the image in Figure 5.

Figure 5. The administration page after adding feedback items, pagination, and navigation

4. Test the admin page by previewing it in a browser or using Live view. Verify that all the records from the database are displayed.

Next, you can add the author's e-mail address to each feedback entry, in case the administrator wants to contact the author.
1. Drag author_email from the Bindings panel to the page and drop it next to the author's name. Insert a space between the name and the e-mail address. 2. Save and preview the page and verify that the e-mail address is shown. Because it is not a mandatory field, it is possible for some feedback items not to have the e-mail field. 3. Also, it is useful to display the identifier for each feedback entry, so drag the id item from the Bindings panel and drop it after the item's title. Insert a space between the title and the id. 4. Save and preview the page to see how this new information is displayed on the administration page.
DELETE FEEDBACK ENTRIES

Deleting an entry requires two key steps:

Adding a page that contains server-side logic for deleting a specified entry Including a delete link next to each item (in this case, on the administration page).

Note that the information about what entry to delete must be passed to the page that handles the deletion. Since that page will be opened through a link from the administration page, the information should be embedded in the link. To embed information in a link, you can use parameters. Parameters are name/value pairs included in a link that can be accessed on the linked page. Here is an example of a link with one parameter:

http://www.adobe.com/cfusion/cfusion/search/index.cfm?term=dreamweaver

This link (also called a URL) points to a search page that delivers results related to the search term "dreamweaver." The link itself consists of the following parts:
www.adobe.com is the domain that is hosting the page. /cfusion/search/index.cfm is the path to the file that contains the logic of the page. term=dreamweaver is the parameter. The name of the parameter is term and its value is dreamweaver. The search page receives this information and uses it to form the

basis of its search.

The same mechanism can be used on the administration page to pass information (about which item to delete) to the page that handles deletion. The name of the parameter you will use is "id"; therefore, to delete the feedback entry with the id 2, for example, the link should end with the parameter:

?id=2

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

CREATE THE DELETE ENTRY PAGE

To create the page that deletes entries, follow these steps:

1. Create a new page by choosing File > New. Select PHP as the Page Type. 2. Save the page with the name delete . Select PHP Files as the Save As Type.

Follow the steps below or watch the demo to delete entries using the Delete Record server behavior. Play the demo: Adding admin delete behavior
1. On the Server Behaviors panel click Plus (+) and select Delete Record. 2. In the Delete Record dialog box: For the Connection or Data source select the database you created for this tutorial, feedback_db. For the Table, select feedback. For the Primary Key Column select id. This is the name of the column that identifies each record in the chosen database table. For the Primary Key Value, select URL Parameter and then id (the default values). These fields allow you to specify where to get the identifier for the row to delete. In this case you are sending this information via a URL parameter. Set the After Deleting, Go To value to admin.php. 3. Click OK.

Next, the page must be protected; only administrators can delete entries. Use the Restrict Access to Page server behavior just as you did for the administration page.
4. On the Server Behaviors panel click Plus (+) and then select User Authentication > Restrict Access To Page. 5. In the Restrict Access To Page dialog box, select your login page for the If Access Denied, Go To option. Click OK. 6. Save the page.
ADD DELETE LINKS

The next step is to add a delete link to each feedback item on the administration page. To do this, open the admin page and follow the steps below or watch the demo. Play the demo: Adding the admin delete link
1. In the list element for the feedback entry, position the cursor after the entry's id (on the first line of text) and add a space. On the Insert toolbar click Common and then click Hyperlink to add a link. 2. In the dialog box that appears type delete this entry for Text. Click the folder icon (Browse) next to the Link text box, and select the delete page. Click OK to create the link. 3. To add the parameter to the link, select the newly created link, and use the Property inspector to append the first part of the parameter specification to the

Link value, specifically:

?id=

4. The value for the URL parameter must be the value of the id field of the entry, from the database. This field is shown for each entry and in Design view it is represented by the text {GetFeedback.id} . This text is an abstraction for the code that actually displays the id, that is shortened and easier to read. However, for the parameter you need the code that actually prints the id. 5. Select the text {GetFeedback.id} and click the Split button to display the code for this page too. The code that outputs the id of the entry is highlighted

in Code view; copy it (right-click the highlighted text and choose Copy from the menu as shown in Figure 6).

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

Figure 6. Copy the code snippet from Code view.

6. Select the link again in Design view. Then, in the Property inspector, paste the copied text in the Link setting, after the existing text. 7. Save the page. Figure 7 shows a screenshot of the page in Dreamweaver.

Figure 7. The delete link is now on the administration page in Dreamweaver.

8. Preview the administration page (admin) using Live view or your favorite browser. Verify that you can now delete feedback items.
FILTER DATA

So far, you have used Dreamweaver CS4 to create a dynamic feedback site that allows users to provide feedback or ideas. This is complemented, on the administrator's side, with a restricted-access section that allows authorized users to remove unwanted entries. The next feature to implement will allow administrators, after analyzing the received feedback, to categorize it as being planned (meaning that the feedback or

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

idea is going to be implemented) or declined (meaning that it is not suitable to be implemented). When a feedback entry is submitted, its status will have the default value pending and it will remain so until an administrator changes it. The feedback table from the database created for this tutorial already contains a column named Status that stores the values pending, planned, or declined. Figure 8 shows sample data with two pending comments and one that is declined.

Figure 8. The status column in this table shows two pending comments and one that was declined.

The feedback table was defined so that the status of any new feedback item will be set to pending unless that value is explicitly set during the creation of the new record. As a result, all the entries that you inserted with your feedback form will have a status of pending in the database. You can use the Databases panel to inspect the status values for yourself. Double-click the database you have created for this tutorial, open the Tables section, right-click the feedback table, and select View Data. You should see data structured as shown in Figure 9.

Figure 9. Use this dialog box to view data from the feedback table. FILTER FEEDBACK BY STATUS

In this section, you will add a capability to the main index page to allow users to display only entries with a specific status. Note: Before continuing, make sure that there is at least one feedback entry in your database. If not, you should create one using the form from the main page of the site. To allow users to filter the feedback list by status follow the steps below or watch the demo. Play the demo: Adding filter links
1. Open the index page in Dreamweaver. 2. Create a new paragraph after the Received feedback heading. In this paragraph you will create three links, for filtering on status by showing only pending, planned, or declined items. 3. In the new paragraph, type pending planned declined 4. Select the word pending. On the Insert toolbar, click Common and then click Hyperlink. 5. In the dialog box that appears, select the index page for the Link. Click OK. 6. Next, you'll add a URL parameter to this link. In the Property inspector, append the following text to the Link:
?status=pending

7. Repeat step 2 for the word planned to create a link. 8. In the Property inspector, append the following text to the Link:
?status=planned

9. Repeat step 2 for the word declined to create a link.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end 10. In the Property inspector, append the following text to the Link:
?status=declined

11. Click anywhere inside the main area. 12. Save the page. 13. Now that the links are created, you need to update the server behavior to process the status URL parameter. In the Server Behaviors panel, double-click

the existing Recordset entry. Note: Make sure that the Recordset dialog box is in the Simple mode. If you see a button labeled Simple, then click it; if you see a button labeled Advanced, then you are already in Simple mode.
14. For the Connection, select feedback_db, the database that you created for this tutorial, and for Table select feedback. 15. For the Filter setting select status. The dialog box will automatically set the options for the filter to URL parameter (where to take the value from), and status (the name of the parameter). 16. To test the new definition for the record set, click the Test button, type pending as the value passed for status in the URL, and click OK. In the results window you should see all the items from your database. Click OK to close the test record set. 17. To filter planned items, click the Test button again, type planned as the value passed for status in the URL. In the results window you should see no data, since all the feedback entries in your database have the default status, pending. Click OK to close the test record set. 18. The same should hold true for declined items. Verify this by repeating the test and typing declined as the test value. 19. Finally, test what happens when no status parameter is added to the link. Click the Test button again, but this time leave the value to be passed blank. In the results window there is no data, because all the feedback entries in your database have the default status, pending. Click OK to close the test record set. 20. To handle the case when no status filter is specified in the link, you can provide "pending" as the default value. Start by clicking Advanced. 21. Click the Edit button in the Variables section and type pending as the Default value (see Figure 10).

Figure 10. The advanced Recordset dialog box.

Note: If you are using ColdFusion on the server side, change the type from cf_sql_numeric to cf_sql_clob to indicate that the value you are sending is a text element, not a numeric element.
22. Click OK. Click Test to verify that, indeed, pending items are returned when no value is provided for the URL parameter. 23. Click OK to close the test record set, and click OK again to save your record set settings. 24. Save the page.

View the page using Live view in Dreamweaver or your browser. Note that by default pending items are displayed, while the filter links provide a way to view planned or declined feedback entries.
ALERT USERS WHEN NO DATA EXISTS

After these changes, the filtering feature should work. When you click each link, only the items with that status are shown. When there is no data to show, however, the display is a list element with no data inside. A message informing the user that there is no data to display would be better.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

To add this message follow the steps below or watch the demo. Play the demo: Adding user no data alert
1. Select feedback: the list and the navigation paragraph. On the Server Behaviors panel click Plus (+) and then select Show Region > Show If Recordset Is Not Empty. 2. Next, you'll need to create the text to be shown when there is no data (since the list is not going to be shown anymore). Press the Right Arrow key to clear the selection, and press Enter to create a new paragraph. 3. Type No feedback entries found. Select the text you typed; then on the Server Behaviors panel, click Plus (+). This time click Show Region > Show

If Recordset Is Empty. The first part of the page in Dreamweaver should look as shown in Figure 11.

Figure 11. The new index page in Design view.

4. Save the page. Test the new filtering functionality using Live view or use your browser of choice. Click the planned and declined links and verify that only the "No data" text is shown. Then click the pending link and check that all the items from the database are shown.
ADD FILTERING TO THE ADMIN PAGE

The next step is to duplicate the filtering functionality on the administration page.
1. Open the administration page: Choose File > Open and then select admin. 2. Repeat the process of filtering the feedback entries according to their statuses (as covered in the previous two sections).

Important: This time the links must point to the admin page, not to the index page, since you want to see the items filtered in the administration section, not in the site's public index page!
3. Try to perform the steps on your own; use the material from the sections above as a reference whenever needed. 4. Test the filtering functionality on the admin page.
CHANGE THE STATUS OF FEEDBACK ITEMS

The last feature in the administration section of the site will allow administrators to change the status of any feedback item. This requires two steps:
1. Creating a page in which the administrator can see the current status of a feedback element and can choose another status for it 2. Adding change status links next to each feedback item in the main administration page (admin)

This is very similar to the process you completed for for deleting a page, in which you created the following:
1. A page with server-side logic for deleting an entry 2. Delete links in the administration page

The difference is that now you will use an Update Server Behavior instead of a Delete Server Behavior. As with the delete functionality, the information about what entry will have its status changed must be passed from the administration page to the page where the status change is performed. Because that page is opened through a link (from the administration page), the information will be embedded in the link through a URL parameter, for example, by appending text such as ?id=2 to the link.
CREATE A PAGE FOR CHANGING THE STATUS OF A FEEDBACK ENTRY

To create the page that allows administrators to change the status of a feedback item, follow these steps:
1. Create a new page by choosing File > New. Select PHP as the Page Type. 2. Change the page's title from Untitled Document to Change Status. 3. Save the page. Name it change-status and select PHP files as the Save As Type.

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

The Update behavior that is used in this section requires to have, in the page, a record set that selects the item to be modified from the database. The convention is to pass the identifier of the element (id) through a URL parameter with the same name: id. Play the demo: Changing status (part 1)
1. Create a new record set: Go to the Server Behaviors panel, click the + icon and then Recordset. Make sure that the wizard is in Simple mode (click the Simple button if available). 2. Give the record set a suitable name, for example, GetFeedbackItemToUpdate . 3. For connection (data source) choose the database created for this tutorial. 4. Select feedback as the Table to get data from. 5. The Filter section allows specifying conditions on the element(s) to be retrieved. You need the element with the same identifier as the one passed through the URL parameter id, so select id in the first input. The wizard automatically completes the rest of the input fields from this section, and the values are exactly the ones that you need. 6. Click OK to create the record set.

Next, you'll use Record Update Form Wizard to create a form that will allow the user to update the status of a feedback item. Play the demo: Changing status (part 2)
1. In Design view, choose Insert > Data Objects > Update Record > Record Update Form Wizard. For the Connection (or Data source) select the database you created for this tutorial, feedback_db. For Table To Update select feedback. The field Select Record From is filled automatically with the RecordSet created previously, GetFeedbackItemToUpdate. Because status is the only field you want to update, remove all other fields from the Form Fields area. Select the status field and change the label to Change status: 2. Because the administrator must choose from a predefined set of options for the status (pending, planned, declined), a suitable user interface element to

display these choices is a group of option buttons, also called radio buttons. Select Radio Group for the Display As option. Click Radio Group Properties and in the dialog box that appears create the following three items:
One with the Value and Label set to pending One with the Value and Label set to planned One with the Value and Label set to declined 3. Click OK to close the Radio Group Properties dialog box. 4. Next, specify the administration page as the page to show after the status change. Click Browse next to the After Updating and select the admin page. Click OK. 5. A form is created in the page, showing the options that you specified in a table. The table is centered on the page, but it should be aligned to the left.

Select it and in the Property inspector set the Align option to Default. Click inside the editing area to save this setting, and then save the page. The page should look as shown in Figure 12.

Figure 12. The change status form.

6. Because only administrators can change statuses, you must protect the page using the Restrict Access to Page server behavior. 7. On the Server Behaviors panel click Plus (+) and then select User Authentication > Restrict Access To Page. In the dialog box select the login page as the If Access Denied, Go To option. 8. Save the page.
CHANGE STATUS LINKS

Now you have to a add link for changing status for each feedback item in the administration page. Follow these steps:
1. Open the admin page in Design view. In the list element displaying a feedback entry, position the cursor after the delete this entry link and insert a space to separate the links. 2. On the Insert toolbar, click Common and then click Hyperlink to add the link. In the dialog box that appears type change status for the Text and select the changestatus page as the Link. Click OK to create the link. 3. To add the parameter to the link, select the link test and append the following text to the Link in the Property inspector:
?id=

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]

Adobe - Developer Center : Building your first dynamic website Part 3: Building the administrative back end

4. The value for the URL parameter must be the value of the id field of the entry, from the database. This field is shown for each entry, so select it in the page. Click the Split button to display the code for this page too. The code that outputs the id of the entry is highlighted in Code view; copy it (right-click the highlighted text and choose Copy from the menu). 5. Select the change status link again in the page, and in the Property inspect and paste the code after the text in the Link input. Click anywhere in the page. 6. Switch back to the Design view. 7. Save the page. Preview the administration page (admin) using Live view or your favorite browser. Test the change status functionality.

The administration section is now complete. You can use it to display feedback items, delete them, filter them by status, and change their status. It complements the public section created in Part 1 to complete a useful dynamic site.
WHERE TO GO FROM HERE

Congratulations! You have learned how to use Dreamweaver CS4 to create dynamic sites with multiple pages and features using off-the-shelf server behaviors and document editing in Design view. Some possible next steps for this web application are:
Upload the site to a server so it is accessible on the Internet. Refer to the Set up a remote folder section in Dreamweaver help to learn how to do this. Use a versioning system. A versioning system enables you to save your site's code and content from time to time, just as you would keep revisions to documents. Having intermediate versions of your work allows you to easily revert to a previously saved version if you want to. You can learn more in this video tutorial, Connecting to an SVN server.

Refer to the following resources to further refine the design and layout of your web application:
For more tutorials and articles on working with dynamic websites refer to the Learn to build dynamic websites page, which includes a comprehensive section on working with databases. To learn more about a specific Dreamweaver feature, refer to Dreamweaver Help. To learn how to use CSS to change the appearance of your pages, refer to the Styling text in the CSS Property inspector video tutorial as well as the Learn to work with CSS page. For adding in-page rich interactivity to your sites using Ajax, use the Spry framework, a JavaScript library that provides simple but powerful Ajax functionality that lets designers build richer pages. For more information, go to the Spry framework for Ajax Technology Center.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
ABOUT THE AUTHOR

Irina Dumitrascu is a software developer. She loves programming and creating high-quality web applications. Her favorite off-computer activities are traveling, reading, and getting involved in ecology projects.

ADC Home

Online Privacy Policy

Terms of Use

Contact us

Accessibility

Report piracy

Permissions and trademarks

Send feedback

Adobe.com Home

Copyright 2010 Adobe Systems Incorporated. All rights reserved. Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009). Search powered by Google

http://www.adobe.com/devnet/dreamweaver/articles/first_dynamic_site_pt3_print.html[4/6/2010 6:24:55 PM]