View Single Post - ASP-MySQL: Advance Login Page [Step-By-Step Tutorial

Monie · #1 (**permalink**) 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.