SIMPLE, FUN MPGH APPLICATON WITH TUTORIAL AND SOURCE CODE
To learn how to program, one of the most important things to know is what your tools do.
Learning how to program can be be very confusing, frustrating, time-consuming, but fun.
If you are trying to learn how to program "to be a hacker", you are not necessarily in the wrong place (because knowing how to program CAN help you in a way), but will probably learn/benefit more by looking up penetration testing/networking and go from there.
GETTING FAMILIAR WITH YOUR ENVIRONMENT:
Some of you may want to start learning how to program, but are wondering, "How do I get my program to LOOK like something?"
Well, Visual Studio lets you design (GUI), write/edit your code, debug, and compile your application.
Visual Basic is an IDE(Integrated Development Environment)
- Code Editor: This is what you need to write and edit your code for your application. In other words, this is the application's brain, which tells it WHAT and HOW to do something.
- Debugger: Looks for any mistakes/bugs in your code, such as syntax errors (typos). This does NOT include logical errors (When the application works, but not how you want it to.)
- Compiler: Converts source code from whichever language you are using, in this case, Visual Basic, to machine code (language that your computer/processor can actually read.)
- GUI editor/builder: Lets you design the way your application will look to users. (What/how many buttons there will be, where they will be located, etc.)
Important::
Before a programmer starts making something, they have to have an objective in mind, and know what they want their program to do.
A good idea is to brainstorm for a few minutes and have a general idea of how you want it to be layed out.
Look into Pseudocode, and familiarize yourself with it.
We won't go too into this phase, but it is one of those practices that will help you develop into a better programmer.
Here, we will be making an applicaton with 4 Buttons, 1 PictureBox, 4 Timers and 1 Label.
The application will have two pictures, which will be displayed when you click the button for each.
There will be a "Pepe" and "MPGH" button, as well as an "Exit" button.
We will also include an "Extra Feature" button, which makes the appliction flash in random colors when pressed.
Lastly, a Label which displays what picture is being displayed.
My symbols: '>' just means that this is the next step
LET'S GET STARTED- Add 4 Buttons to your Form (foundation). You can simply add them by dragging it to your Form.
https://i.imgur.com/2oXIhb5.png
Now let's Name the buttons and change their Text. - On the right side side of your screen you will see Properties. This is what shows you the properties of everything in your Form.
- To see an object's properties, you must click on it, in order for it to be selected.
- In order to make things easier for yourself, make sure the properties are displayed in Alphabetical order, by clicking the icon that has an A and Z:
https://i.imgur.com/2v3Arnz.png
- Click on Button1 > Go to Properties > Text > Replace "Button1" with "Pepe" > Press Enter
- Now, change Button2's Text to "MPGH".
- Button3 = "Exit
- Button4 = "Click Me for Sex!"
Note: The Name property is different than the button's Text property.
Name = for your/computer's reference
Text = the actual TEXT in the Button that users will see. (Pepe, MPGH, Click Me for Sex!, Exit)
Let's add a PictureBox to our Form. This will include the images that will pop up when user presses the button for it.
- The PictureBox is located under Common Controls Section
- We need to add images into the PictureBox, so download the files I attached.
- Select the PictureBox on your Form and click the small arrow on the top right of it > Choose Image > Import > Import Both Pictures
https://i.imgur.com/0wFgEUt.png
ORGANIZATION:
- If you haven't noticed yet, our interface does not look organized, much less, appealing to users.
- Organize your interface to something that looks more professional. You can choose to set it up how I have it below, or however you'd like.
https://i.imgur.com/09M9pcG.png - You can resize everything by dragging it from the corners.
- To center an object, go to Format > Center in Form > Choose an option (I chose Horizontally)
https://i.imgur.com/ozu93dw.png
Before you start writing code, let's change our Objects' Name to something easier for us to work with when we are coding.
-Example: Without renaming our Buttons, they are named Button1, Button2, Button3, and Button4.
This might seem easy to remember which one is which, to some, but if you are working with many more Buttons in the future, it will be extremely difficult, counter-productive, and annoying.
- Click on the Pepe Button > Go to Properties > Change the (Name) to "btnPepe"
- Now do the same for all other Buttons, Labels (lblName), and PictureBox (picBox)
- For my extra features Button, I renamed it "btnSex"
- I did not change the Name of my Form, just because it is my only Form. I did change the text.
To enable the extra feature:
- Add 4 Timers to the Form
- Drag them anywhere in the Form, they will beplaced in the bottom, "outside" the Form
- They are located in the Components section of the Toolbox
https://i.imgur.com/65Av8Bo.png
Timers are literally
timers; they count to a certain number of milliseconds, then tell the computer to perform a specific action when it reaches X amount of milliseconds. Remember, these count in milliseconds, so when using them, be wary of this. 1 second = 1000 milliseconds.
Notice how when you drag a Timer to the Form, it does not go on the actual Form itself, but in the bottom, outside of the Form. This is because the
Components are features
in your application that the user cannot see. They are "internal".
ADDING CODE:
- Now for the fun part!
- Let's start writing code for our Buttons.
- To go to the Code Editor window, you just double-click on an object that you want to write code for.
Exiting:
- Double-click the Exit Button
https://i.imgur.com/wUPev7T.png
- This tells the computer that you want Form1(Me) to close(.close).
- 'Me' is a class. In other words, it is basically "pointing" at something(in this case, Form1).
- After the computer "points" at/locates Form1, it closes(.Close) it
- Now double-click on the Pepe Button and add:
Code:
picBox.Image = My.Resources.Pepe
lblName.Text = "Pepe"
-In short, "Private Sub btnPepe_Click(sender As Object, e As EventArgs) Handles btnPepe.Click" tells the computer to do a certain
thing when the button(btnPepe) is clicked(.Click).
-It tells it to go to your PictureBox(picBox), display an image(Image), which is located (=) in your Resources(My.Resources) file(check the Solution Explorer to see it),
under the name 'Pepe'(.Pepe).
-Then it tells the Label(lblName) that its text must be Pepe ("Pepe")
Extra Feature:
-Double click the Button for the extra features and write the following:
Code:
Timer1.Enabled = True
-In Timer1, write:
Me.BackColor = Color.Blue
Timer1.Enabled = False
Timer2.Enabled = True
-In Timer2, write:
Me.BackColor = Color.DarkRed
Timer2.Enabled = False
Timer3.Enabled = True
In Timer3, write:
Me.BackColor = Color.White
Timer3.Enabled = False
Timer4.Enabled = True
In Timer4, write:
Me.BackColor = Color.Black
Timer4.Enabled = False
Timer1.Enabled = True
This is a fairly simple code. The True/False parts of it are Boolean Expressions. This just means that our our expression (in other words, command) results in either being
False or
True. You can think of
False/
True as
Off/
On for this project.
In
our code above, the computer is being told, 'for Timer1, switch the background color(BackColor) to Blue, then disable(Timer1 = False) Timer1, and enable Timer2(Timer2=True)'. After it does this, it goes on to the next command, which is Timer2. Timer 2 switches the color again, and does the same thing over and over until it reaches Timer4's end. After that, it goes back to the top and performs it from the beginning.
Each Timer switches the Form's(
Me) background color(
.BackColor) to a different one.
In the Properties, you can change the Interval to less/more than 100(currently) to make it flash faster/slower.
All of this code seems hard to remember, right?
That is where Code Snippets come in handy!
Code snippets are small pieces of code to remind you of what a function does. They are can be used by anyone using the same programming language.
Go ahead and mess with the program to experiment and learn more.
Never stop learning!