Simple Login Application || Easy 3/10 || Pictures

Hello everyone.

I will be doing some tutorials for Visual Basic, this is the first.
Today i'm going to show you how to make a simple login application.
This can be used to "protect" your application or just to learn some more Visual Basic.



First of all, install and open Microsoft Visual Studio Express 2012.

Click File.


New project.


Select Windows form application and enter a name for your application.


Go into Properties, and scroll untill you see "Appearance" and go down in that section and change where it says Text and change Form1 to Login, or Please Login.
What you'll enter here will be at the top, as title.


Now we have setup everything yay.
What we are going to do now, is make our application design.
Go into Toolbox (Most times on the right of the screen, hover over it else go to View -> Just below the middle and click Toolbox.)


Just click on the "Tool" you need, and drag it into your program.
When you're done with dragging everything in, make a design like this to make it easy for users to understand.



You can make things larger by clicking on them, and holding the little dots and dragging them to how big you want it to be.

Now we are going to rename everything so it looks logical.
Renaming is done the same as we did change the Title/Form name.
Label1 to Username:
Label2 to Password:
Button1 to Login!
Easy!
It'll look like this.



The design is ready, now the coding part.

What we want to do is make a login application so we need to think of how a login system works.
It's very simple, it works with If statements, here is a explanation.
If Textbox1 Text equals Hello and Textbox2 equals World Then Messagebox show Welcome to the program.
Else Messagebox show Wrong Username/Password.

So what we want to do is check if the username and password is entered correct if the button is pressed.
Now we are going to do some easy coding.
Double-click the Login! button.
You'll see something similar to this.



Explanation:
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

End Sub

This means, that if the Button1 is clicked (Login! button) it will execute the "commands" in the empty part.
The "commands" we will be making in there are to check if the Username and password are right.

This can be done with some easy If statements

We'll start,
In the empty space between Private Sub and End Sub, we'll start our If statement.
Simply type If
You'll see 2 errors coming up, that doesn't matter we'll fix them.

So now we will check if the username and password are right.
So,

If Textbox1 Text equals Hello
This is the start, it now checks if "Username"/Textbox1 text is Hello.

It now checks if "Username"/Textbox1 text is Hello and "Password/Textbox2" text is World.
We got the check, but it still does nothing, so add Then, this will say what it is going todo if Textbox1 equals Hello and Textbox2 equals World.

Press Enter and it will automaticaly write End If, if it doesn't make it look like this.



Now we are going to tell the application what to do if Textbox1 equals Hello and Textbox2 equals World.
There are a lot of things we can do if the username and password is entered correct.
We'll make a Messagebox popup if the info is entered correctly.
So we'll be adding this code to make the messagebox popup.

After the .Show there are (""), these mean what the messagebox displays.
You can set it to Username and Password entered correctly.
Or anything you want, it only has to be between the "".

Now we will have this
Want a titled messagebox? do this:
Replace Your Title with the title you want, like Correct!

After this is done, the code should look like this:



Right now, test your application.
By pressing F5 or clicking this:



As you see, it works.
But, if the wrong username/password is entered it does nothing, let's change that so it'll say: Wrong username/password.

Make some space for code under here, so press enter.

Type:
Here we'll show a messagebox, like we did earlier but now with Wrong Password/Username, try again.

We're done now, everything is set.
The coding part should look like this:


You can change the design, add a menu or what ever you like.
Even add a theme, change the username/password.

The source will be here commented so you'll understand everything.
This is my first tutorial, more will be comming feel free to leave tips.
Have a nice day, i hope you learned something, for questions comment here or pm me.
~Thijz