ASP-MySQL: Advance Login Page [Step-By-Step Tutorial - Example In Action]

Monie · Oct 24th, 2007, 09:15

Hello WebForumz members!

It's been more that 3 years since I joined WebForumz and it is time for me to do something good to contribute to this community.
As you all notice, so far, there is no sticky thread/tutorial on this ASP Thread. Maybe, with my ASP Login Tutorial, I hope that someone will gain knowledge on how to develop them in the right way..

Let's begin our tutorial..

[Step 1: Setting up our MySQL Database]

Provided that you know how to setup your mysql database in your machine, run the mysql command line from C:\mysql\bin\mysql.exe (depends on where you install your mysql), and enter the following commands to create your database and table:

The Database Detail:

Host : localhost
User : root
Database: mydatabase
Password : mypassword

Code: Select all

CREATE database mydatabase;
USE mydatabase;
CREATE table userlogin
(
username varchar(20) not null,
password varchar(20),
fullname varchar(30),
primary key(username),
unique id(username)
);

I won't go into too much detail about the SQL command above, but we've just created a new database named mydatabase, which contains one table named userlogin.
You can add in new field according to your needs.

[Step 2: Creating the login form]

Code: Select all

<%
    Content = "" 'Clear the Content string
    QStr = Request.QueryString("login") 'Save the login querystring to QStr

    Title = "ASP-MySQL Login"

     'The code below saves the contents in the variable Content
    'The content depends on what's in the QueryString
        
     if QStr="passfailed" then
        Content = Content & "<div class=login>"
        Content = Content & "<p>Make sure that you have entered a valid Password</p>"
        Content = Content & "</div>"
        Content = Content & "<div class=button><a href=javascript:history.go(-1)>Back</A></div>"
    elseif QStr="usernamefailed" then
        Content = Content & "<div class=login>"
        Content = Content & "<p>Make sure that you have entered a valid Username</p>"
        Content = Content & "</div>"
        Content = Content & "<div class=button><a href=javascript:history.go(-1)>Back</A></div>"
     elseif QStr="bothempty" then
        Content = Content & "<div class=login>"
        Content = Content & "<p>Make sure that you have entered your <br />Username and Password in the text field provided before you can proceed!</p>"
        Content = Content & "</div>"
        Content = Content & "<div class=button><a href=javascript:history.go(-1)>Back</A></div>"
    elseif QStr="createnamefailed" then
        Content = Content & "<div class=login>"
        Content = Content & "<p>Username already exist!</p>"
        Content = Content & "<p>Please try again with a different Username.</p>"
        Content = Content & "</div>"
        Content = Content & "<div class=button><a href=javascript:history.go(-1)>Back</A></div>"
     elseif QStr="createfullnamefailed" then
        Content = Content & "<div class=login>"
        Content = Content & "<p>Full Name already exist!</p>"
        Content = Content & "<p>Please try again with a different Full Name.</p>"
        Content = Content & "</div>"
        Content = Content & "<div class=button><a href=javascript:history.go(-1)>Back</A></div>"
     elseif QStr="createnewsuccess"then
        Content = Content & "<div class=login>"
        Content = Content & "<p>Register Success! <br /></p>"
        Content = Content & "<br />"
        Content = Content & "<p>Please click <a href=login.asp>Here</a> to Login for the first time.</p>"
        Content = Content & "</div>"
     elseif QStr="createuserfailed" then
        Content = Content & "<div class=login>"
        Content = Content & "<p>Please fill in the form to register yourself.</p>"
        Content = Content & "<p><br />The Administrator may have required you to Register before you can access this page!</p>"
        Content = Content & "<p><br />Thank You.</p>"
        Content = Content & "</div>"
        Content = Content & "<div class=button><a href=javascript:history.go(-1)>Back</A></div>"
     elseif QStr="createnew" then
        Content = Content & "<form name=frmCreate method=POST action=create.asp>"
        Content = Content & "<tr><td border=2 cellpadding=0 cellspacing=0 align=left><font face=Verdana color=#99CC33 size=1>Username :</font></td></tr>"
        Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><input type=text name=txtUsername size=53></td></tr>"
         Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><font face=Verdana color=#99CC33 size=1>Password :</font></td></tr>"
        Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><input type=password name=txtPassword size=53></td></tr>"
        Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><font face=Verdana color=#99CC33 size=1>Full Name :</font></td></tr>"
        Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><input type=text name=txtFullname size=53></td></tr>"
         Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=right></tr>"
        Content = Content & "<tr><td valign=top align=right><input type=submit name=cmdSubmit value=Register><input type=reset name=cmdReset value=Reset_Field><input type=button name=mybutton value=Back Button onClick=javascript:history.go(-1);></td></tr>"
        Content = Content & "<tr><td valign=top align=center></td></tr>"
        Content = Content & "</form>"
     else
        Content = Content & "<form name=frmMain method=POST action=verify.asp>"
        Content = Content & "<tr><td border=2 cellpadding=0 cellspacing=0 align=left><font face=Verdana color=#99CC33 size=1>Username :</font></td></tr>"
        Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><input type=text name=txtUsername size=53></td></tr>"
         Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><font face=Verdana color=#99CC33 size=1>Password :</font></td></tr>"
        Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=left><input type=password name=txtPassword size=53></td></tr>"
        Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=right><font face=Verdana color=#99CC33 size=1><a href=login.asp?login=createnew>Register?</a></font></td></tr>"
         Content = Content & "<tr><td cellpadding=0 cellspacing=0 align=right></tr>"
        Content = Content & "<tr><td valign=top align=right><input type=submit name=cmdSubmit value=Login><input type=reset name=cmdReset value=Reset_Field></font></td></tr>"
         Content = Content & "<tr><td valign=top align=center></td></tr>"
        Content = Content & "</form>"
    end if
%>    

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-16" />
<title>ASP Login Page</title>

<!-- Link to external style sheet  -->
 <link rel="stylesheet" type="text/css" title="default" href="login.css" />
</head>

<body onLoad="this.document.frmMain.txtUsername.focus();">
    <fieldset id="fieldset">
        <legend id="loginLegend"><% Response.Write(Title) %></legend>
        <div id="position">
            <table border="0" cellspacing="0" width="350px">
                <%
                    'Paste the contents in the table
                    Response.Write(Content)
                %>
            </table>
        </div>
    </fieldset>
</body>
</html>

As you can see, I am doing my Login Form in a different way.
Well, as you go along, you'll find it is quiet interesting to do them this way.

The CSS file will be basically for the positioning of some elements and some error message (error message will be in red color to attract user!)
The CSS file can be downloaded from the attachment below this page.

Our next tutorial will be a Verify page that will verify the user login process such as:

checking if the username exist in the database
checking if the entered username and password matched with the value inside the database
redirect the user if they encounter an error (invalid username or password)
redirect the user to the success page if their login is success.

Monie · Oct 25th, 2007, 04:58

Welcome to Part 2 of our tutorial...

Ok, we have created our login form in the "ASP-Way", I would say, now it is time for us to process them!

In this page, we are going to validate the user input that they have entered in the login form before performing any further proces.
Below is the validate.asp page, and I have included enough comment that I hope will make you better understand what's is going on in each line of code.

Code: Select all

<%
   'Capture and Assign the username and password value that the user have entered, input to a variable!
    Username = Request.Form("txtUsername")    
    Password = Request.Form("txtPassword")
    
   'If user did not enter anything into the textfield or accidentally press the submit button, alert user with QueryString!
    If Username = "" or Password = "" Then
        Response.Redirect("login.asp?login=bothempty")
    End If

    'MySQL Database connection to retrieve all the information according to the username!
    Dim connectionString, conn, rs
    connectionString = "DRIVER={MySQL ODBC 3.51 Driver}; SERVER=localhost; DATABASE=mydatabase; UID=root; PASSWORD=mypassword;"
    Set conn = Server.CreateObject("ADODB.Connection")
    conn.Open(connectionString)
    Set rs = conn.Execute("SELECT * FROM userlogin where username='"& Username &"'")   

    'If there is no record with the entered username, close connection and go back to main page with QueryString!
    'Or in other words, if the username does not exist in the database, then the system will alert the user!
     If rs.BOF AND rs.EOF Then
        rs.Close
        conn.Close
        set rs=nothing
        set conn=nothing
        Response.Redirect("login.asp?login=usernamefailed")
     End If

    'If entered password exist in the database, close connection and open mainpage (Success Login)
    'ASP will check whether the password entered by the user exist in the database, 
    'If it exist then you will be rediredted to the success page!
     If rs("password") = Password Then
        
        'Assign Session variable value to the entered username for login security!
        'Once you Log Out, the session value will be cleared off in the logout.asp page!
        Session("name") = Request.Form("txtUsername")
        
        rs.Close
        conn.Close
        set rs=nothing
        set conn=nothing
        Response.Redirect("success.asp") 'Redirect user to the success page!
    
    'If entered password does not exist in the database, close connection and return to main page with QueryString!
     Else
        rs.Close
        conn.Close
        set rs=nothing
        set conn=nothing
        Response.Redirect("login.asp?login=passfailed")
     End If
%>

Alright, we have successfully validate our user login information.
On our next tutorial, we will look into the Log Out page, but first, let us see what is the success.asp looks like.

Monie · Oct 25th, 2007, 05:18

Welcome to Part 3 of our tutorial...

Congratulation! You have successfully logged on into the protected page!

This is basically a simple page. The only important things in this page is the Log Out button/link, where it will cleared off the session variable stored during the login verification,
and don't forget to greet your user with displaying their Fullname or what ever you like, in this tutorial, I'll use their Fullname that I' have drag from the database!

Code: Select all

<%@LANGUAGE="VBSCRIPT"%>
<% Option Explicit %>
<%    
    'This page will not be cache by the browser (security reason)!
    Response.CacheControl = "no-cache"
    Response.AddHeader "Pragma", "no-cache"
    Response.Expires = -1
    
     'This will make sure no user can access this page without login into the system first,
    'If the user type this page address directly into the browser, they will be redirected into the login page!
     If Session("name") = "" Then
        Response.Redirect("login.asp")
     End If
     
    'Open database for greeting user purpose!
    'Database MySQL connection
    Dim connectionString, conn, rs    
    connectionString = "DRIVER={MySQL ODBC 3.51 Driver}; SERVER=localhost; DATABASE=mydatabase; UID=root; PASSWORD=mypassword;"
    Set conn = Server.CreateObject("ADODB.Connection")
    conn.Open(connectionString)
    'At this line of sql statement, we are only quering the database for the particular information about the user!
    Set rs = conn.Execute("SELECT * FROM userlogin WHERE username = '" & Session("name") & "'")
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-16" />
<title>ASP Login Page</title>

<!-- Link to external style sheet  -->
<link rel="stylesheet" type="text/css" title="default" href="login.css" />
</head>

<body>
    <fieldset id="fieldset">
        <legend id="loginLegend">Success Login Page</legend>
        <div id="position">
            <h1>Welcome <%=rs("fullname")%>!</p> <!--Greeting the user with their Fullname-->
            <p>This is a protected page!</h1>
            <h1>You have successfully logged in into this page!</h1>
            <h1><br /><a href="logout.asp">Log Out</a></h1>
        </div>
    </fieldset>
</body>
</html>

In the next tutorial, we will be looking into the Log Out page!

Monie · Oct 25th, 2007, 05:26

Welcome to Part 4 of our tutorial...

As simple as that!

In this logout.asp page, as I've mention earlier, it only perform a function, or a line of code to cleared the session variable!
There is another way of captured or storing the user input into a variable, but in this tutorial, I will show you using session variable.

Code: Select all

<%
    Session.Abandon
    Response.Redirect("login.asp")
%>

If you recall in the previous tutorial, I have use this code in my success.asp page to validate or block any unregistered user to access the success.asp page.

Code: Select all

<%
'This will make sure no user can access this page without login into the system first,
'If the user type this page address directly into the browser, they will be redirected into the login page!
If Session("name") = "" Then
    Response.Redirect("login.asp")
End If
%>

Somewhere in our verify.asp page, we have set the session variable value to the entered username so that when we access the success.asp page, we will not be redirected to the main page.

The session variable value is equal to our username:-

Code: Select all

<%
'Assign Session variable value to the entered username for login security!
'Once you Log Out, the session value will be cleared off in the logout.asp page!
Session("name") = Request.Form("txtUsername")
%>

Well, in this logout.asp page, we will cleared off the session value to empty "" using the code "Session.Abandon"
When somebody try to access the success.asp page(by typing the address directly into the browser), they will be redirected back to the main page asking them to login first!

That's it!
You have successfully logged off from this page!

In the next tutorial, we will be discussing on the create.asp page where we will create a new user to use/being able to login into this system/page.

Monie · Oct 25th, 2007, 05:43

Welcome to the Final Part of our tutorial...

That is the create.asp page where we will create a page to add new user to be able to use this system to access to the protected content/success.asp page.

Let us begin..

Code: Select all

<%
    'Assign entered username, password and fullname into a variable
    Username = Request.Form("txtUsername")
    Password = Request.Form("txtPassword")
    Fullname = Request.Form("txtFullname")    

     'Check if all of the textfield is not empty when submitting the create new user form!
     'If one of them is empty, alert user with QueryString!
     If Username = "" or Password = "" or Fullname = "" Then
        Response.redirect("login.asp?login=createuserfailed")
     End If
    
    'MySQL Database connection to retrieve all the user information from the database!
    'This database connection is different from my previous tutorial since we are performing add record and update function to the database.
    'The database must be able to accept any update statement by the sql command.
    Dim connectionString,rs
    connectionString= "DRIVER={MySQL ODBC 3.51 Driver}; SERVER = localhost; DATABASE=mydatabase; UID=root; PASSWORD=mypassword;"
    Set rs = Server.CreateObject("ADODB.Recordset")
    rs.Open "SELECT * FROM userlogin", connectionString, 1, 3 'This connection are able to accept update statement!
    
     'Check for duplicated entry for the Username and Fullname entered by the user in the registration form!
     do while not rs.EOF
       'If Username already exist, alert user with QueryString!
        if rs("username")=Username then
            set rs=nothing
            set conn=nothing
            Response.Redirect("login.asp?login=createnamefailed")

       'If Fullname already exist, alert user with QueryString!
        Else If rs("fullname")=Fullname Then 
            set rs=nothing
            set conn=nothing
            Response.Redirect("login.asp?login=createfullnamefailed")
        End If
        rs.MoveNext
    loop
    
    'If everything is OK, no duplication of username, fullname or whatsoever,
    'Add the new user info record into the database!
    rs.AddNew 

    'Insert the value captured earlier at the top of this page:
    'Username = Request.Form("txtUsername"),
    'Password = Request.Form("txtPassword") and
    'Fullname = Request.Form("txtFullname") and put it into the database!
    rs("username")=Username
    rs("password")=Password
    rs("fullname")=Fullname

     'Save record in the database
    rs.Update    
    
     'Close the database connection!
    set rs=nothing
    set conn=nothing

     'Redirect the user to the greeting page where they can login for the first time!
    Response.Redirect("login.asp?login=createnewsuccess")
%>

Finally, this tutorial has come to it's end!
I hope this tutorial will make someone getting new experience and knowledge on asp and hopefully we will help each other soon

[ You can see ASP Login Example Page here! ]

If any of you having problem with this tutorial, please let me know by Private Message me at this [Link]

Thank You Webforumz!
Have a nice day with <%ASP%>