Free: Using Advanced HTML Editor to Create a Content Management System Support

In this free, 20 page tutorial, Matt Machell shows you how to use Dreamweaver server behaviours and the DMXzone Advanced HTML Editor extension to build a password-protected Content Management Solution for a web site, that allows normal users to read news or text or whatever you choose to put on your site, while users with the correct password can add or amend the text using an intuitive word processor-like administration system - so your clients can maintain their own web sites without having to know HTML and without risking breaking the look and feel of the site!

Because Matt's using the extension and built-in server behaviours, there's no handcoding involved, so matt shows you how to use it using both ASP and PHP.

Creating the news_admin.asp page

Open up news_admin.asp and set the page title to News Admin and add a heading so people know where they are. First we'll restrict access to the page. In the server Behaviors panel got to + > User Authentication > Restrict Access to Page. The dialog is pretty simple:

We simply restrict access based on username and password, and set the page to boot unwanted users out to login.asp.

Now we're going to create a recordset to display all our news items. In the server behavior panel hit + >

Recordset. Click the advanced button and fill in the dialog as below:  

 

The SQL query is:

    SELECT *
    FROM cms_news
    ORDER BY news_date DESC

This query grabs all the data from the cms_news table and orders it by the date it was added, newest first. Hit the test button to check that the query works. If you added the test data, you should get one row containing our test news item.

Attach our main.css stylesheet to the page. Next, insert a new table into the page. It'll need 5 columns and 2 rows. In the table headers put id, news, date added, viewable and edit?

Move to the 2^nd row and make sure the cursor is inside the table cell. Then open up the Bindings area of the Application panel. Highlight the id column of the newsitem recordset and hit the insert button (at the base of the panel, see screenshot).

Move to the next cell and repeat for each of id, news_item, news_date, and news_live. For the date, set the format dropdown to the Date/Time > 17 January 2000 option to format it.

In the last cell add the text EDIT. Highlight this text and click on the browse for file link option in the parameters panel. Select the file news_edit.asp. Then hit the parameters button. Name the parameter id, and set it to take its value from the id column of the newsitem recordset (hit the lightning bolt icon to access the recordset). We'll use this link to tell the edit page which record we want to edit. The table should now look something like this:

Next, we want to make sure we can display all the items in the news. Highlight the row containing the bound data, and then add a Repeat Region server behavior. Choose the newsitem recordset and 5 records at a time and hit OK.

Move the cursor below the table and, in the insert panel, select the application tab and hit the recordset paging button. Choose the newitem recordset and the text option.

Finally, add a link at the bottom of the page with the text “To add a new item click here” and link it to news_add.asp. The finished page should look something like this: