Free! Building a website with Restricted Access: Part 1

In this tutorial we will be creating a site, which has several user levels.

We will be using the standard behaviours of Dreamweaver MX 02/04 and we will also add some new ones.

Part one of the tutorial will be covering the Set-up of the site, creating an Access database and providing login access to our site, along with a registration facility.

We will be creating a Login page using the standard Dreamweaver behaviour, and then altering the code to allow us to use a single login page for both Administration and Standard users.

Creating a Login page along with Success page

Now we have our visitors registering we need a way for them to use their access details to access our restricted area in our website.

Login page

Open Dreamweaver

Create a new .asp page, name it login.asp

Add a form tag (name it fmlogin)

Add 2 text fields; name the first one txtUsername and the second one txtUserPassword

You will need to select the Password field and in the properties palette select the Password radio button, so that when a visitor enters their Password, it will display as ****** instead of the text.

Add a Submit button, rename it to Login.

In the Application palette, select...Server Behaviours... User Authentication…Log in User

Choose your connection (this will need setting up before hand to either talk to an ODBC or DSN-less connection)

Select the website_users table.

Dreamweaver would have already entered the Form fields for Username and Password; you will need to tell it which columns in the database are for Username and Password.

Enter the page you wish it to go to if the login is successful (for this example enter the welcome.asp), for the failed login, enter the same name as the page you are working on, and add ?Action=Failed to the end, i.e. login.asp?Action=Failed

Select the Restrict Access based on to Username, password and access level, and select the column UserAccessLevel from the drop down.

Close the Login behaviour window.

In the design view of your page, select next to the Password field, and add a Return (Return key)

Add the following text in two separate paragraphs:

"The details you entered where not found, please try again."

and

"Your Login has either timed out, or you do not have access to the page you tried to view. Please login"

Place the curser at the left hand side of this text, and change to Code view.

Before the <p> and the text you have just typed, enter the following

<% If Request.QueryString("Action") = "Failed" Then %>

Now move to the beginning of the second sentence, just before the <p> and enter

<% ElseIf Request.QueryString("Action") = "NoAccess" Then %>

Move to the end of the sentence, and enter

<% End If ‘ users login fails or session times out %>

You code should now look like:

  <p>
    <label>Password
    <input name="txtUserPassword" type="password" id="txtUserPassword" tabindex="1" size="50" />
</label>
  </p>
  <% If Request.QueryString("Action") = "Failed" Then %>
  <p>The details you entered where not found, please try again.</p>
  <% ElseIf Request.QueryString("Action") = "NoAccess" Then %>
  <p>Your Login has either timed out, or you do not have access to the page you tried to view. Please login</p>
  <% End If  ‘users login fails or session times out %>
  <p>
    <label>
    <input type="submit" value="Login" tabindex="1" />
    </label>
  </p>
</form>

Congratulations, you have finished your login page.

We have now set up the form to log our visitor in, included text to display when our visitor enters the wrong details and if they try to view a page which has restricted access without having logged in first or without the correct level of access.

We will be covering the latter part of this in more detail later in the second part of this tutorial.