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.

Making the CSS pages

We'll start with the simplest bits of the system, our CSS files. We're using two, for reasons that I'll explain later. The CSS will be used to style our news items as shown in the screenshot below:

Open main.css in Dreamweaver MX and add the following style declarations:

.highlight{
color: blue;
font-weight:bold;
}
.sideblock{
float: right;
width: 200px;
background: #eee;
}
h1{
font-size: 1.2em;
}
h2{
font-size: 1.1em;
}
h3{
font-size: 1em;
}
body{
font-size: 72%;
font-family:Arial, Helvetica, sans-serif;
}

Open news.css and add the following styles:

.news {
background-color: #66CCFF;
padding: 2px;
height: auto;
width: 400px;
margin-top: 10px;
border: 1px solid #333399;
}
.news p{
margin: 4px;
padding: 0;
}

main.css contains the styles that will be applied to all pages (including the admin section), news.css is only going to be used on the news.asp page to break up the articles and ensure that paragraphs are correctly styled.

Making the login.asp Page

Open up login.asp and add a form containing two textareas and a submit button. Name the text areas username and password, and set the 2nd one to the password type so that it echoes asterisks rather than the actual password. Rename the form to validate. Set the page's title to News Admin Login. The page should look something like this:

For a real application may wish to add some text saying “you are not logged in, please log in now.”

In the databases panel create a new connection by clicking on the + and adding your database details:

I called the connection Jazz. I used a custom connection string (the bits of information you'd need to fill with your own details are databaseserver, mydatabase, username and mypassword):

"Driver={SQL Server};Server=databaseserver;Database=mydatabase;
UID=username;Password=mypassword;"

Next we move to the Server Behaviors panel. Select + > User Authentication > Login-In User. A dialog box will pop up:

The behavior should automatically detect which form fields to grab the login information from, but if it doesn't happen like that, make sure the username and password are the right way round. We choose our database to validate the user against, the database table in which the user data is held and the columns for the username and password. Again, make sure the dropdowns are set to the correct column. We also set the pages to go to if we succeed or fail to login. Click OK to close the dialog.

The login page is now finished, so you can close that as well. Pretty easy, so far, huh? It doesn't get any harder, either!