Figure 1: Creating the database in DB Manager
Dreamweaver has many tools to help simplify page creation. Beginning with Dreamweaver MX 2004, Dreamweaver contains server behaviors for password protecting PHP pages in your site. This tutorial will show how to password protect your pages using a username, password, and access level defined in a MySQL database. As an added bonus, the tutorial will work with the new CMX Jumpstart Liverpool, which includes a password protected section, being released on January 13th. [Should we be saying this about Liverpool? Would be best to just make it generic I think. DJC ]
The first thing to understand is the concept of an access level. In a dynamic site, you might have areas of the site that are available to anyone who logs in. For these users, a simple login protection scheme works. However, you may also need to protect an area of the site for administrators only -- the same login procedure will work for these users, but they will be given a different access level to access the administrative pages. Regular users who don't have access level permission on these pages will be redirected to another page if they try to access a protected page. You can have as many different access levels as you need. We will define them in a database table, and assign them to users.
Logins are created by storing session variables on the server. Session variables allow information about the user to be stored between page requests. All of this is handled by the Dreamweaver code behind the scenes.
The database script is included in the download at the end of the tutorial, and is also shown here:
CREATE DATABASE `liverpool`;
USE `liverpool`;
# Table Structure for tblaccesslevel
CREATE TABLE `tblaccesslevel` (
`ID` int(11) NOT NULL auto_increment,
`AccessLevel` varchar(10) NOT NULL default '',
PRIMARY KEY (`ID`)
) TYPE=MyISAM;
# Data for tblaccesslevel
INSERT INTO `tblaccesslevel` (ID, AccessLevel) VALUES (1, 'Admin');
INSERT INTO `tblaccesslevel` (ID, AccessLevel) VALUES (2, 'User');
# Table Structure for tbllogin
CREATE TABLE `tbllogin` (
`ID` int(11) NOT NULL auto_increment,
`UserName` varchar(50) NOT NULL default '',
`Password` varchar(50) NOT NULL default '',
`AccessLevel` int(11) NOT NULL default '0',
PRIMARY KEY (`ID`)
) TYPE=MyISAM;
# Data for tbllogin
INSERT INTO `tbllogin` (ID, UserName, Password, AccessLevel)
VALUES (1, 'Tom', 'cmx', 1);
INSERT INTO `tbllogin` (ID, UserName, Password, AccessLevel)
VALUES (2, 'John', 'cmx2', 2);
This script can be run in your MySQL admin of choice. Many web hosts give you access to a web-based admin for creating databases and tables. If you have one of these, use it to create the liverpool database. You can also use one of the many MySQL front-ends available, such as DB Manager from DB Tools, available from http://www.dbtools.com.br/, or the MySQL Query Browser, at http://www.mysql.com/products/query-browser/. Figure 1 shows the interface of DB Manager executing the SQL script from above:
Figure 1: Creating the database in DB Manager
After running the script, you will have two tables: tblaccesslevel and tbllogin. The access levels are stored in the tblaccesslevel table, and the users are stored in tbllogin. This tutorial will also work with any database that contains a users and access level table, as long as it follows this basic design:
Our sample data includes two access levels: User and Admin. The sample data also includes two sample users: Tom and John.
With the database in place, you can move to Dreamweaver to create the pages.
Defining the connection in Dreamweaver is a simple process, if you have access to your database. If you have not connected to a database before, the Dreamweaver help file contains a complete tutorial on how to connect to a MySQL database. For the liverpool database, follow these steps below:
Figure 2: Setting up the connection
Figure 3: A successful connection
With the connection in place, we'll start building the pages.
We'll need a login form. The sample form below will work for our application:
<fieldset>
<form name="form1" id="form1" method="POST">
<label for="username">User Name:
<input name="username" type="text" id="username" />
</label>
<label for="password">Password:
<input name="password" type="text" id="password" />
</label>
<input type="submit" name="Submit" value="Log In" />
</form>
</fieldset>
We'll save this on the index page (index.php). This will be the entry point of the application, and also the page that we will redirect users to in the event of a failed login.
Tip: A non-dynamic web site does not have an entry point, because any page can be accessed at any time. A dynamic web site that has password protection has an entry point, which is simply a page that verifies login information. In more sophisticated sites, the entry point can be contained in an include file that is included on every page, or a page that is set up to run before each and every page.
With the form in place, we can now add the Log In User server behavior. Open the Server Behaviors panel (Window > Server Behaviors) and choose User Authentication > Log In User. The figure below shows the behavior dialog filled in:
Figure 4: The Log In User Server Behavior
The following fields need to be filled in:
Get Input From: Choose the login form (form1)
Username Field: Choose the username field
Password Field: Choose the password field
Validate Using Connection: Choose the myconnection connection (or whatever you named it)
Table: Choose the tbllogin table
Username Column: Choose the UserName field from the database
Password Column: Choose the Password field from the database
If login succeeds, go to: Type in admin.php
If login fails, go to: Type in index.php
Go To Previous URL: Check this box (it will allow users to be redirected to any page they requested after logging in)
Restrict Page Based On: Choose Username, Password, and Access Level.
Get Level From: Choose the Access Level field
Click OK to add the behavior to the page.
You might be wondering why we are redirecting everyone to the admin.php page, including those with the User access level. Let's get to that next.
On the Admin page, we'll use another Dreamweaver server behavior, Restrict Access To Page. This will allow us to set up permission to the page to administrators only (those people stored in the database with Admin access levels). Anybody else will be redirected to another page. Follow these steps to restrict access to the Admin page:
Figure 5: The Restrict Access To Page server behavior
Figure 6: The Define Access Levels dialog box
This is the logic: a user logs in and is redirected to admin.php. If he is an admin, he sees the page. If not, he is redirected to user.php. We will build that page next. As you may have guessed, if the visitor is not a user with an access level of "User", we will redirect again to the login page.
Follow the same steps that you followed for the admin.php page, only this time you can skip steps 5 and 6 because the access levels are defined already. When you get to step 7, fill in level 2, for User. For step 8, fill in index.php as the page to redirect to on failure.
Now, you should be able to test the application. First, make sure the admin.php page is protected. Try to browsse the page. You should be redirected to the index page. Next, try the user.php page. Do the same thing. Now, go to the index.php page and type in some nonexistent user. You should see the login page again. Finally, type in username: Tom and password: cmx. You should see the admin page. Close the browser and try again, this time typing in username John, password cmx2. Now you should see the user page.
One last step for this tutorial is logging out. When a user is logged in, session variables keep track of him so that he has access to the appropriate pages in the site. However, if the user gets up from the computer and someone else sits down, the new person will be able to browse the pages as well, because the sessions still exist. As a security measure, you should offer your users the option to log out of the application. We can do this with another Dreamweaver server behavior: Log Out User
On a blank page, named logout.php, set up the Log Out User server behavior as follows:
Figure 7: The Log Out User server behavior
Now, on your admin.php and user.php pages, you can add a logout link — simply a link to the logout.php page. The Log Out User server behavior code will take care of the rest.
This has been an introduction to the User Authentication server behaviors of Dreamweaver for the PHP server model. We showed how to set up access levels for different sections of your site.