Dreamweaver UltraDev Cookbook

User Login Example

Hiran de Silva
June 2000

This short tutorial is for Dreamweaver users learning Dreamweaver UltraDev Version 1.0 and ASP

How does the Login Example work?

When the visitor clicks the Enter button the ASP code in the page makes a connection with an MS Access database Members.mdb. This database already has a table of authorised members, their passwords and priviledge levels. If the UserID - Password pair exists then the visitor is directed to the LoginOK.asp page. Otherwise the visitor is taken to Register.asp where he/she/it can register. New User Registration will be covered in a later tutorial.

Steps

1 Create your Members database - MSAccess
2 Create an ODBC Data Source Name pointing to the Members database - Windows Settings
3 Design your Login page including login form - as in Dreamweaver
4 Create a Connection - new in UltraDev
5 Create a Recordset - new in UltraDev
6 Check whether login is valid and redirect accordingly - ASP Code
7 Stuff member details into a Session Variable for use on other pages - ASP Code

Seven easy steps. Ok?

1 Create your Members database

You can download the Access database used in this example here (Access 2000 160k) or here (Access 97 88k). Or just check out the field list.

2 Create an ODBC Data Source Name

Set up a System DSN called Login. Go here to find out how.

3 Design your Login page

Design your login page as you would normally do with Dreamweaver.
Insert a form.
Insert two textboxes and a button.
Rename the text boxes UserID and Password. Make the second text box a Password type.
Rename the button Enter.
In the form properties inspector select POST method and set the ACTION to return back to the same page.

4 Create a Connection

This is where we start to use the new functionality brought to us by UltraDev.

On the menubar Select Modify and then Connections
Click New
In the dialog box Name the connection connLogin
Select Type ADO (ODBC Data Source Name)
Under DSN select the Data Source Name we set up in step 2
If your database needs a username and password you will enter them here. We don't need them in our example.

Click Test to check that all is well.

Click Ok and Done.

5 Create a Recordset

In the Data Bindings inspector click the + sign and select Recordset (Query).

A dialog box opens which looks like this. If it doesn't, click Advanced. What we want to do requires the use of more than one condition, so we need to go Advanced.

However, it will be blank. This is the trickiest part of this whole exercise. So pay attention 007!

Let's Name the recordset rsLogin.
From the Connection dropdown select the one we created in the previous step connLogin.

In SQL, here's where the fun begins. In the Database items box you should now see a collapsible heirarchy. Open the Tables and you will see tblLogin. This table contains the members login and authentication data. Select the table tblLogin and click SELECT button.

Notice the SQL statement building up in the box above.

Now expand tblLogin and you will see the fieldlist in this table. We need to tell the Access database to return the record that matches the UserID and Password, if there is a match. So how do we do that?

Here's how. Select the field UserID in the Database Items box. Then click the WHERE button. Notice what's happening in the SQL statement. Now type = 'strUserID'. Select the field Password and then click the WHERE button again. Type = 'strPassword'.

In the Variables box, click the + sign and enter as shown in the screenshot below. Use the Tab key to move across. Click the + sign to enter the second line.

The finished dialog box should look like this.

Here we are stuffing the UserID and Password input collected from the form into the variables strUserID and strPassword. The SQL statement uses the values in these variables in the WHERE clause to return the relevant record - or not, if validation unsuccessful.

The default value for the variable strUserID plays an important part when the page first loads. See the next section. Make sure that it is unlikely to be a user ID. I have used 'xyz' here.

Click Ok.

If you get an error message at this point you should check that everything has been typed in correctly. Also check that you haven't inadvertently created a third line in the Variables box. If you have, and it is empty, it is not visible. To remove it, select this (invisible) line and click the - sign.

6 Check whether login is valid

This bit requires inserting a few lines of VBScript code.

Open the HTML Source window. Can you see the code generated by UltraDev in the previous two steps?

Insert the following lines of code at the end of the UltraDev generated code. Watch out! rsLogin__strUserID is an MM generated variable, and it has 2 underscores.

Let's look at what's supposed to happen here. If the visitor is validated the recordset will contain 1 record. Correct? If not validated the recordset will contain 0 records. So if the recordset has a record redirect to LoginOK.asp, otherwise redirect to Register.asp.

7 Stuff member details into a Session Variable

Now we are on the home straight!

Just one last thing to do.
We want our site to know who the visitor is as he/she/it navigates through our site, don't we?

We do this by creating a Session Variable and stuffing the visitor's details into them. Data in Session Variables persist for as long as the visitor is in your site.

UltraDev gives us an easy way to create Session Variables - Data Bindings tab and click the + sign. However, (unless someone can show me differently) we will need to type a few lines of code anyway. So let's not bother with UltraDev's dialog box - just go ahead and type in the 3 line of code just above the redirect to LoginOK. Here's how it should look.

If you checked out the demo you would have seen that the LoginOK page knows the UserID, Password and the user's Priviledge Level. How? Session Variables. That's how.

Go here to check out the finished code.

OK. I guess we're done.

Next we'll look at
How to Secure Individual Pages.
How to do New User Registration.
How to get the page to send a Confirmation Email automatically.
How to authenticate email address via an Authentication Link Back.

But that's another day ...

Troubleshooting Tips
Write a Review of this Tutorial
Read Reviews

Please send comments to Hiran de Silva.

Get the UltraDev Extension written by Jjooee MFXLogin as a companion to this tutorial. Save yourself some typing!
Get JavaScript versions written for you by Jaco Smuts.
Hey, there's even a German version of this tutorial now! Brought to you by Jorg.
For a Drumbeat 2000 style starting point check out Sune Pedersen's site.

Thanks all for your contribution.