So you’ve just downloaded Microsoft Visual Studio – but what do you do now?

Today you’re going to create a username and password login screen in Visual Basic.

Note: the pictures in this tutorial were taken in Microsoft Visual Studio Express 2012.

Step 1: When you open Microsoft Visual Studio click on ‘New project’.

Capture

Step 2: Select ‘Windows Forms Application’ and name it Login. Click on OK.

Capture

Part 1: Design

Now you should see a window like this:

Screenshot (14)

On the left is the toolbox, where all the components are. Drag 2 labels, 2 textboxes and a button onto form 1. Make both textboxes a bit longer by dragging the square on the side that appears when you click on them, making sure they’re both the same size. Now, under the labels’ properties find ‘text’ and change it from ‘Label1’ and ‘Label2’ to ‘Username’ and ‘Password’. Change the button’s text to ‘Submit’. Change Form1’s shape to a rectangle by dragging the squares on each side. Change the textboxes’ ‘(name)’ property from ‘textbox1’ and ‘textbox2’ to ‘usernamebox’ and ‘passwordbox’. Click on Form1 and change it’s ‘text’ property to ‘Login’, and the ‘ControlBox’ property to false’. Go into passwordbox’s properties, and copy and paste this: • into the passwordChar property. Now, drag everything around so that it look like this:

Capture

(Make sure that the ‘usernamebox’ textbox is under the ‘Username’ label, and so forth.)

Part 2: Coding

If you double click on the Submit button, the coding window should come up and look like this:

Public Class Form1
  Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
  End Sub
End Class

The ‘Class’ is all the code for your form (form1). The ‘Sub’ is the code that is executed when someone clicks on button1 (the submit button). All the code between the ‘Private Sub Button1_click’ line and ‘End Sub’ lines will run if the button is clicked, although there’s nothing there yet.

First we need to check if the text in the texboxes matches the username and password. To do this we use an ‘if’ statement:

If usernamebox.Text = "Admin" And passwordbox.Text = "1234" Then

End If

This goes inside the Button1_Click sub like this:

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    If usernamebox.Text = "Admin" And passwordbox.Text = "1234" Then
    End If
End Sub

Now we need to program what happens if the username and password (Admin and 1234) are correct. For today we’re just going to display a message and close the window. Add the following code inside the if statement:

MessageBox.Show("Correct Password!")
Me.Close()

Now, all the code together should look like this:

Public Class Form1
    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        If usernamebox.Text = "Admin" And passwordbox.Text = "1234" Then
            MessageBox.Show("Correct Password!")
            Me.Close()
        End If
    End Sub
End Class

Next we want to add an ‘else’ to our If-then-else statement to display a message if the username or password is incorrect, like this:

Else
    MessageBox.Show("Incorrect username or password")

It should be placed after the ‘If’ but before the ‘End If’. Now your code should look like this:

Public Class Form1

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        If usernamebox.Text = "Admin" And passwordbox.Text = "1234" Then
            MessageBox.Show("Correct username and password!")
            Me.Close()

        Else
            MessageBox.Show("Incorrect username or password")
        End If
    End Sub

End Class

Now you can run your program by pressing the Start button.

Capture

Congratulations! You’ve finished this tutorial, and created a simple login screen with Visual Basic!

Advertisements