ASP.NET Logo Back to WebMatrix Home

 
Build an End-to-End Application
Create Login page
In this walkthrough, you will create a new application login page based on the Login Page project template. You will validate a user's login credentials against the Users table in the Orders database.
  1. Select New from the File menu. You will see the New File dialog box appear.
  2. Select Security from the Templates pane.
  3. Select the Login Page template.
  4. Type a file path in the Location box.
  5. Type Login.aspx in the Filename box.
  6. Select Visual Basic in the Language drop-down box.
  7. Click OK. The Login.aspx file will open in Design view. 

    New File Dialog

  8. Select the Code tab.

    Note The ASP.NET Web Matrix has automatically placed code in the LoginBtn_Click event to validate the UserName and UserPass values:

    Sub LoginBtn_Click(Sender As Object, E As EventArgs)
    
        If Page.IsValid Then
            If (UserName.Text = "jdoe@somewhere.com") And (UserPass.Text = "password") Then
                FormsAuthentication.RedirectFromLoginPage(UserName.Text, true)
            Else
                Msg.Text = "Invalid Credentials: Please try again"
            End If
        End If
    
    End Sub
    
  9. From the Code Builders tab in the Toolbox, drag a SELECT Data Method Code Builder onto the ASP.NET page.

     
  10. You will see the Connect to Database dialog box appear.

     
  11. Type localhost in the Server box.

     
  12. Click the Database drop-down. ASP.NET Web Matrix will connect to the data source and populate the Database drop-down with database names. Select the Orders database and click OK.

     
  13. You will see step one of the Code Builder Wizard appear; it is called the Construct SELECT Query dialog box.

     
  14. Select Users in the Tables list view.

     
  15. Select the check box next to the * item in the Columns list view.

     
  16. Click WHERE.

     
  17. You will see the WHERE Query Builder dialog box appear.

     
  18. Select the Users table in the Table drop-down in the Left Operand pane.

     
  19. Select UserName in the Column list view.

    Note This option sets the Left Operand portion of the WHERE clause.

  20. Select the Filter radio button and type @UserName in the filter box (default).

    Note This option sets the the Right Operand portion of the WHERE clause. You will pass this value as a parameter to the WHERE clause later in this walkthrough.

  21. Click OK.

     
  22. You will return to the Construct SELECT Query step of the Code Builder Wizard.

     
  23. Click AND Clause.

     
  24. You will see the Query Builder dialog box appear.

     
  25. Select the Users table in the Table drop-down in the Left Operand pane.

     
  26. Select UserPassword in the Column list view.

    Note This option sets the Left Operand portion of the WHERE clause.

  27. Select the Filter radio button and type @UserPassword in the filter box (default).

    Note This option sets the the Right Operand portion of the WHERE clause. You will pass this value as a parameter to the WHERE clause later in this walkthrough.

  28. Click OK.

     
  29. You will return to the Construct SELECT Query step of the Code Builder Wizard.

     
  30. Click Next

    Users Select Query

  31. You will see step two of the Code Builder Wizard appear; Query Preview.

     
  32. Click Test Query.

     
  33. Type bsmith into the UserName = box.

     
  34. Type bsmith into the UserPassword = box.

     
  35. Click OK.

     
  36. You will see the Users row corresponding to the specified UserName and UserPassword appear in the Query Preview dialog box results grid. 

    Test Query Results

  37. Click Next.

     
  38. You will see step three of the Code Builder Wizard appear; it is called the Enter A Caption dialog box. Type GetUser into the method name box.

     
  39. Select the DataSet radio button.

     
  40. Click Finish

    Enter Caption

  41. The Wizard will close and ASP.NET Web Matrix will place a function called GetUser in Code view. The function accepts a userName and userPassword as input parameters and returns a DataSet as an output parameter. The DataSet is populated with user detail data for the specified userName and userPassword:

     

    Function GetUser(ByVal userName As String, ByVal userPassword As String) _
            As System.Data.DataSet
    
        Dim connectionString As String = _
            "server='localhost'; trusted_connection=true; Database='Orders'"
            
        Dim sqlConnection As System.Data.SqlClient.SqlConnection = _
            New System.Data.SqlClient.SqlConnection(connectionString)
        
        Dim queryString As String = _
            "SELECT [Users].* " & _
            "FROM [Users] " & _
            "WHERE (([Users].[UserName] = @UserName) AND " & _
            "([Users].[UserPassword] = @UserPassword))"
    
        Dim sqlCommand As System.Data.SqlClient.SqlCommand = _
            New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)
        
        sqlCommand.Parameters.Add("@UserName", System.Data.SqlDbType.VarChar).Value = _
            userName
            
        sqlCommand.Parameters.Add("@UserPassword", System.Data.SqlDbType.VarChar).Value = _
            userPassword
        
        Dim dataAdapter As System.Data.SqlClient.SqlDataAdapter = _
            New System.Data.SqlClient.SqlDataAdapter(sqlCommand)
            
        Dim dataSet As System.Data.DataSet = New System.Data.DataSet
        
        dataAdapter.Fill(dataSet)
        
        Return dataSet
    End Function
    
  42. Update the Button Click event so that it validates user input against the results of calling the GetUser function:

     

    Sub LoginBtn_Click(Sender As Object, E As EventArgs)
    
        If Page.IsValid Then
            Dim userDS As New System.Data.DataSet
            
            userDS = GetUser(UserName.Text, UserPass.Text)
            
            If userDS.Tables(0).Rows.Count = 1 Then
                FormsAuthentication.RedirectFromLoginPage(UserName.Text, true)
            Else
                Msg.Text = "Invalid Credentials: Please try again"
            End If
        End If
    
    End Sub
    
  43. Save and run the Login page.

     
  44. Your Login page will automatically appear in a new instance of your Web browser.

     
  45. Type bsmith into the Username and Password boxes and click Login

    Enter Credentials

  46. By default, the Login page will redirect the user to a page named Default.aspx on a successful login.

    Note The Login Page will display an error message if you supply credentials that do not exist in the Users table. 

    Successful Login

     

  47. Close the Web browser instance.

Next Step >>