In this article you'll learn how to create a basic content management system using Adobe Dreamweaver 8 and KTML 4 Lite edition. You can use this system to manage content for an online newspaper, a company presentation Web site, or a site with articles. At the end of this article users of the Content Management System will be able to:

• See the list of articles that exist in the site database - with title, description, and an Edit link next to each item
• Edit the articles using KTML Lite, a free online HTML editor.

Using KTML Lite, the text boxes or text areas used to edit content can be replaced with an online HTML editor that allows you to format text, style it using CSS, upload and insert images and media, upload and manage files.

You need approximately 20 minutes to complete this tutorial.

Getting Started
Before starting on this project, there are some prerequisites to take care of. You need:

• Dreamweaver 8: Try www.macromedia.com/go/trydreamweaver or www.interaktonline.com/Store/Macromedia-Affiliate/Redirect/
• KTML Lite, a free Dreamweaver extension from InterAKT Online. You can download it from www.interaktonline.com/Products/Online-HTML-Editor/ KTML-for-Dreamweaver/Try-Download/?from=mm_ktml4

Setting Up the Development Framework
First you have to set up your application server environment and install Dreamweaver 8 and KTML Lite. This article assumes that you've already installed and configured a Web server with PHP and MySQL support. If not, take a look at the following articles from the Developer Center:

• Setting Up Your PHP Server Environment Using Linux, Apache, MySQL and PHP (by David Sklar) if you use the LAMP platform
• Setting Up the PHP, MySQL, and Apache Server Platform on Macintosh OS X for Dreamweaver MX (by Minh Huynh) if you're working in Mac OS
• Setting up PHP for Microsoft IIS (by Andrew Stopford) if you're a fan of IIS

If you're using Windows, take a look at WAMP Server, a free tool that automatically installs Apache, PHP 5, MySQL server, phpMyAdmin, and SQLiteManager. For detailed instructions on installing WAMP Server, see this technical note on the InterAKT Knowledge Base.

Defining Your Site
Before you build the application, you need to set up your site in Dreamweaver. For a quick site setup, take a look at this technical note: How to Define a Site in Dreamweaver. The site will only contain two files, which you can create right now:

• index.php - displays the list of articles
• edit.php - contains a form used to edit the content for a selected article.

Setting Up Your Database
The application is entirely dynamic. It stores articles in a database table. As you will only implement displaying and editing articles, the database will only need one table: article_art.

Now that you have an idea of how your database will look, fire up the sample SQL script in your MySQL console or your favorite database management software (such as phpMyAdmin (see www.phpmyadmin.net/home_page/index.php) and create the database. Before you can connect to the database you have to create the site files.

Create the Database Connection
To connect to the database in Dreamweaver, follow these steps:
1.  Open the index.php file.
2.  In the Application panel click the Databases tab to open it.
3.  Next click the Plus (+) button and select the MySQL Connection option.
4.  A dialog box will open, allowing you to define the connection parameters. Configure it as shown below:

• In the Connection Name text box enter connSimpleCMS.
• In the MySQL server text box enter the address (IP or hostname) of the computer that's running the MySQL database server.
• In the User name text box, enter the name of the user that is allowed to connect to the database. Note: Using "root" as a user name gives your applications full rights on the database and shouldn't be used for real-life cases.
• In the Password text box, enter the password of the user that connects to the database. Note: If you don't know your database authentication information, contact your hosting company or your network administrator.

5.  In the Database text field enter the name of the database you created at the beginning of this article - articles. Note: Make sure you replace the sample database authentication information values with the actual values for your server.

Create the Article List
Now you'll build the main page that displays a list of articles in the database. The page will display the article title, description, and an edit link. To implement this functionality you need to:

1. Create a recordset that retrieves article information - the ID, title, and description.
2. Display the article title and description and loop through the entire set of articles.
3. Create a link to the edit page and pass the article ID as an URL parameter.

Create the Articles Recordset
Dreamweaver retrieves information from a database through recordsets. A recordset is the result of running a SELECT statement on a database and contains the records returned by the query. To create the article recordset:

1. Open the index.php page in Dreamweaver.
2. From the Application panel > Binding tab click the Plus (+) button and select the New Recordset (Query) option.
3. In the user interface that loads configure the recordset properties: table to use, columns to retrieve, etc., as shown:
   a.  In the Name text box enter the new recordset identifier: rsArticles.
   b.  In the Connection dropdown menu select the connSimpleCMS database connection created at the beginning of this article.
   c.  In the Table dropdown menu select the article_art database table.
   d.  In the Columns area click the Selected radio button. This way you can decide what columns to retrieve from the database,
   e.  Holding down the CTRL key (or the Apple key on a Macintosh) click on the id_art, title_art and description_art columns to select them.
4. You can see a fully configured interface in Figure 1. Click OK to complete the recordset creation process and add it to the page. (Figure 2)
   

The newly created recordset will be displayed in the Bindings tab of the Application panel, and you can expand it to see the columns it retrieves. You will use the dynamic fields to display the article details.

Display Article Information
Next you have to display the article data retrieved from the database. Dreamweaver helps speed up the Web development process by providing ready-to-use components for such tasks. To display our data you'll use the Dynamic Table command:

1. Place the cursor on the index.php page in Design view.
2. On the Insert bar switch to the Application tab, then click the Dynamic Table icon.
3. Configure the dynamic table to use the rsArticles recordset and display all the entries. Then hit OK to apply the changes and create the table.
4. The table automatically displays all fields from the recordset and uses the column names as table headers. To make it usable you have to customize it:
   a.  First remove the first column entirely - the one displaying the article ID.
   b.  For the second column change the header text from title_art to Article title.
   c.  For the third column change the header from description_art to Article description.
   d.  Also check the Header checkbox in the Property Inspector for both column headers.
5. The table now displays the information in a clear way. All that's left is to add the link to the edit page. Because we're going to use a single page to edit any of the database articles, the link pointing to it must also pass the unique ID for each article. That way the correct one will be loaded for editing:
   a.  First add a new column to the table, where the links will be. Right-click on the last column and from the Table category select the Insert Rows or Columns option.
   b.  In the dialog box select the Column option and click OK.
   c.  Put the cursor on the second row's last column and type Edit.
   d.  Select the text and click on the folder icon next to the Link text field in the Property Inspector.
   e.  Select the edit.php file in the site root. Click the Parameters button to define what URL parameters will be sent along. To tell the edit page what article to load in the list you must pass its ID as an URL parameter.
   f.  For the first parameter Name enter id_art. For the Value click the dynamic value and select the id_art field of the rsArticles recordset.
   g.  Click OK to create the link.
6. Save the page and preview it in the browser. It should resemble Figure 3.

Now you'll create the article editing form that will display the contents of the selected article and let you edit them.

Create the Article Editing Form
At this point, the articles are listed correctly. In this section you'll move on and create the update form using the Update Form Wizard from Dreamweaver. Then you'll enhance the update form by replacing the default text area with the KTML editor.

First create the basic update form:

1. Open the edit.php file in Dreamweaver.
2. First add a filtered recordset that retrieves only the article referenced by the ID in the URL parameter from the database. Configure the recordset as follows:
   a.  For the name, use rsArticle. Use the same database connection as before - connSimpleCMS.
   b.  This time retrieve all the columns in the database. Check the All radio button.
   c.  In the Filter dropdown menu select the column to filter the recordset by - id_art. For the method use the URL parameter and for the reference use id_art.
   d.  Click OK to create the recordset.
3. In the Insert bar switch to the Application tab and click on the Update Record (Record Update Form Wizard) icon.
4. Configure the user interface as follows:
   a.  In the Connection dropdown menu select connSimpleCMS.
   b.  In the Table to update dropdown menu select the article_art table.
   c.  In the Select record from dropdown menu select the rsArticle recordset.
   d.  In the After updating, go to text box enter index.php. This way after the article's been updated the user will be returned to the list.
   e.  In the Form fields grid click the id_art field to select it. Next click the Minus (-) button to remove it from the operation. The article ID is set to automatically increment so you don't need to give it a value.
   f.  Select the title_art field. In the Label text field enter Article title.
   g.  For the description_art field set the Label to Article description. In the Display as dropdown menu select Text area.
   h.  Do the same for the content_art field: set the Label to Article content and the Display as to Text area.
   i.  Click OK to create the update form.
5. You can see a sample configured interface in Figure 4.
6. The last thing to do is to add a Cancel button so the user can return to the list.
7. Put the cursor next to the Update record button generated automatically by the wizard.
8. From the Forms tab of the Insert bar click the Button icon to add a new one. Then click on it to select it and from the Property Inspector set its action to None. In the Value text field enter Cancel.
9. With the button still selected expand the Tag panel and select the Behaviors tab. Select the Go to URL behavior.
10. In the dialog box, enter index.php for the URL to load. Click OK to apply the changes.

You can test the editing form now. Simply load the article list and click the Edit link for one of them. You'll find that it's not that easy to edit the content, especially if you need to add HTML formatting to the text.

Next you'll replace this text area with KTML Lite, the online HTML editor that will make editing content a breeze. KTML allows even non-technical users to edit content in a WYSIWYG environment much like they would in Microsoft Word or some other word processors.