Creating a Log In form with Database

1. Create database “Example”

2. Create table “tblUsers”
3. In the tblUsers insert the fields id, name, username,password, role
4. Set id as autoincrement
5. Insert the following data

id Name username password role

1 Manuel Admin 12345 admin
2 Peter Pete 123 secretary
3 Paul Jay Paul 1234 encoder
4 Pauline Pau 4321 encoder

6. Create a log in form

Creating the Connection between the Visual studio and the Database
7. Then click on the project menu.
8. Click Add Reference
9. Then a dialog box will appear
10. Then Click on the Browse Button
11. Then locate MySql.Data.dll
12. After locating, the MySql.Data.dll must be added on the list, then check it

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
 13. Then on the SOLUTION EXPLORER, add a MODULE, rename it as “connection” then
copy the following code:

Imports MySql.Data.MySqlClient
Module connection
Public cn As New MySqlConnection("Server=localhost; userid=root; password=;
database=YourDatabaseName")
Public cmd As New MySqlCommand
Public da As New MySqlDataAdapter
Public dt As New DataTable
Public dr As MySqlDataReader

Public Sub connect()

If cn.State = ConnectionState.Closed Then
cn.Open()
End If
End Sub

Public Sub disconnect()

If cn.State = ConnectionState.Open Then
cn.Close()

End If
End Sub
End Module

14. Now go back to your log in form design.

15. Then double click the OK button and type the code below, but modify the necessary
modifications needed
Dim i As Integer = 0

cn.Open()
With cmd
.Connection = cn
.CommandText = "SELECT * from tblUsers where username ='" & txtusername.Text & "'
and password='" & txt_password.Text & "'"
End With
dr = cmd.ExecuteReader
dr.Read()
If dr.HasRows Then
Me.Hide()
'MsgBox("Welcome!", MsgBoxStyle.Information, "Successful Login")

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
 nextform.Show()

Else
MsgBox("Incorrect Username and Password", MsgBoxStyle.Critical, "Login")
End If
cn.Close()

Designing the Main Form

1. Name it as MainForm and make the Text Main Form

2. Drag two buttons. And name them properly according txtCreateUsers and
txtTransactions
3. Then from the Solution Explorer, add two new forms
4. Name the first one as frmUsers and frmTransaction

Design the frmUsers

This is a DataGridView
***Here we will load the data from
the database

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
Note: Upon Dragging the DataGridView this must be how it look like

Click the Edit Columns so we can

have our own Header names.

After Clicking the Edit Columns. This dialog box will appear

Click the Add so we can add our

personalized header to our
datagridview.

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
After Clicking the Add button. Another dialog box will appear

1. -Now Edit the Header Text:

Column1 to Name
2. -Then Click Add: then edit
again the Column2 to
Username
3. -Then to Password
4. -Then to Role
5. And etc.
6. Then close the diaglog box if
you are done.

Your Output should be like this

Now we are done with

our frmUsers design,
we are now ready for
our coding

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
Our Next Task is to do this output!!!

Preview:
We will now load the
data of our tblUsers to the
datagridview

Step 1: Double Click the form

Step 2: Above the Private Sub frmUser_Load….. code, Paste the whole code of the sub
LoadData
Sub LoadData()
Dim i As Integer = 0
Try
cn.Open()
With cmd
.Connection = cn
.CommandText = "Select * from tblUsers"
dr = cmd.ExecuteReader
End With

DataGridView1.Rows.Clear()

If dr.HasRows Then
While dr.Read
DataGridView1.Rows.Add()
DataGridView1.Item(0, i).Value = dr.Item(1)
DataGridView1.Item(1, i).Value = dr.Item(2)
DataGridView1.Item(2, i).Value = dr.Item(3)
DataGridView1.Item(3, i).Value = dr.Item(4)
i = i + 1
End While
End If
cn.Close()
Catch ex As Exception
MsgBox(ex.Message, MsgBoxStyle.Information)
End Try
End Sub

Step 3: Then inside the Private Sub frmUser_Load… paste the following code
LoadData()

Step 4: You can now test the program if it load the data from the database

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
Now we are ready to level up in our task
******************************************************************************

Save Button code

Try
If txtName.Text = Nothing Or txtUsername.Text = Nothing Or txtPassword.Text =
Nothing Or cmbRole.Text = Nothing Then
MsgBox("Please Complete the Information needed", MsgBoxStyle.Information,
"Product")
Else
cn.Open()
With cmd
.Connection = cn
.CommandText = "insert into tblUsers (name, username, password,role)
values ('" & txtName.Text & "', '" & txtUsername.Text & "', '" & txtPassword.Text & "',
'" & cmbRole.Text & "')"
.ExecuteNonQuery()
MsgBox("Record has been successfully saved.",
MsgBoxStyle.Information, "Save")
End With

'clear textboxes
txtName.Clear()
txtUsername.Clear()
txtPassword.Clear()
cmbRole.Text = ""
cn.Close()

'It will load in the datagridview

LoadData()

End If

Catch ex As Exception
MsgBox(ex.Message, MsgBoxStyle.Information, "Ooooops Duplication of Record")
Finally
cn.Dispose()
End Try

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
That’s it!
**********************************************
Now our next task is to Update Record
Oooops!!! But before that we have to select data from
the datagridview for update. So here are the following
steps guys!
Step 1: Double Click your Datagridview
Click that part there and

then Select and click CellClick

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
 Paste This Codes there at the Cell Click event of
DataGrid View!!!

Dim i As Integer
i = DataGridView1.CurrentRow.Index

txtName.Text = DataGridView1.Item(0, i).Value

txtUsername.Text = DataGridView1.Item(1, i).Value
txtPassword.Text = DataGridView1.Item(2, i).Value
cmbRole.Text = DataGridView1.Item(3, i).Value

btnSave.enabled=false

Now we are Ready for our update codes

Update Button Code
Try
If txtId.Text = Nothing Then
MsgBox("No record has been updated", MsgBoxStyle.Information, "Update")
Else
cn.Open()
With cmd
.Connection = cn
.CommandText = "update tblUsers set name='" & txtName.Text & "',
username='" & txtUsername.Text & "', password='" & txtPassword.Text & "', role='" &
cmbRole.Text & "' where id='" & txtId.Text & "'"
.ExecuteNonQuery()
End With
cn.Close()

MsgBox("Record has been successfully updated.", MsgBoxStyle.Information,

"Update")

LoadData() 'select the records

'clear textboxes
txtName.Clear()
txtUsername.Clear()
txtPassword.Clear()
cmbRole.Text = ""
End If

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
 Catch ex As Exception
MsgBox(ex.Message, MsgBoxStyle.Information)
Finally
cn.Dispose()

End Try

*******************************************************************

Will you try to run the Program?

Does the program has Error?

I have a secret to tell you then….....

We have to go back from the top………….

But don’t worry it’s just simple

Can you see that small arrow button

there?
-Click it

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
 Click the edit
columns
Then Add Column
then make the
Header Text as ID

Make sure to set

the Visible
property to False

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
Next to modify!!

Now add 1 text box and 1 label in the form

Like This!!!!
Note!!!
Do not forget to set the VISIBLE
property of the id label and id
textbox to FALSE

Try to run the program

This is how it looks like

when you run the
program!!!

We’re almost done!…

Prepared by: Eloisa M. Santos All Right Reserved 2018
CRUD Tutorial for ICT 007
Let’s proceed to the coding

But wait!!! Please, Will you check your

database?
Make sure that you set ID as Auto Increment

Check your codes on this parts!

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
Delete Button Code
Try

If txtID.Text = Nothing Then

MsgBox("No data deleted")
ElseIf MessageBox.Show("Are you sure you want to delete?", "Message",
MessageBoxButtons.YesNo, MessageBoxIcon.Information) = Windows.Forms.DialogResult.Yes
Then
cn.Open()
With cmd
.Connection = cn
.CommandText = "delete from tblUsers where id='" & txtID.Text & "'"
.ExecuteNonQuery()
End With
cn.Close()

MsgBox("Record has been successfully Deleted.", MsgBoxStyle.Information,

"Deleted")

LoadData() 'select the records

'clear textboxes
txtName.Clear()
txtUsername.Clear()
txtPassword.Clear()
cmbRole.Text = ""
End If
Catch ex As Exception
MsgBox(ex.Message, MsgBoxStyle.Information)
Finally
cn.Dispose()

End Try
End Sub

ADD NEW BUTTON CODES

txtName.enabled=true
txtUsername.enabled =true
txtPassword.enabled =true
cmbRole.enabled =true

CLEAR BUTTON CODES

txtName.Clear()
txtUsername.Clear()
txtPassword.Clear()
cmbRole.Text = ""

NOW WE ARE DONE WITH THE MAIN FOUNDATION CODES OF

CREATING A SYSTEM.
The Save Update Delete
Prepared by: Eloisa M. Santos All Right Reserved 2018
CRUD Tutorial for ICT 007
Now Let us Proceed on Searching a data from
the datagridview

Add the missing parts on our frmUser design

Name the text box as txtSearch

Then double click the textbox and then paste the following codes:
Dim i As Integer = 0
Try
cn.Open()
With cmd
.Connection = cn
.CommandText = "select * from tblUsers where name like '%" & txtSearch.Text &
"%' or Username like '%" & txtSearch.Text & "%'"
dr = cmd.ExecuteReader
End With
DataGridView1.Rows.Clear()

If dr.HasRows Then
While dr.Read

DataGridView1.Rows.Add()
DataGridView1.Item(0, i).Value = dr.Item(1)
DataGridView1.Item(1, i).Value = dr.Item(2)
DataGridView1.Item(2, i).Value = dr.Item(3)
DataGridView1.Item(3, i).Value = dr.Item(4)
DataGridView1.Item(4, i).Value = dr.Item(0)
i = i + 1
End While
End If
cn.Close()
Catch ex As Exception
MsgBox(ex.Message, MsgBoxStyle.Information)
End Try

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
Name: _____________________________________

Individual Type Written Quiz for Finals

Note: This will be your last type written Quiz in ICT 007. After this, we may
now proceed to focus on you final requirement. God bless you guys!

Reflection Paper:
1. As an accountancy students, what can you say that you
can now program?

2. How this programming skills we have develop in this

subject be helpful to you?

3. Could you explain how we integrate the sql queries to

the program design?

***Please send this type written quiz to edmodo.com***

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007
 Individual Laboratory Quiz for Finals
Note: This will be your last laboratory Quiz in ICT 007. After this, we may now
proceed to focus on you final requirement. God bless you guys!

1. Create a Simple Student Information System

2. Make sure to include log in for security purposes. Or else, you may
use the one you created in this activity. Just modify the designs.
3. The following are the information needed in our application:
a. Student Personal Information
 Student Id
 Student First Name
 Student Last Name
 Student Gender
 Student Age
 Student Date of Birth
 Student Home Address
 Student E-mail Address
 Student Course
b. Student Account
 Student Total Tuition Fee
 Student Prelim payment
 Student Midterm Payment
 Student Finals Payment
4. Make your own database for this
5. Do not forget to apply the previous lesson.
6. Be creative. You can add more features.
7. Checking of this Laboratory Quiz is on February 19, 2018
Criteria for checking
CRITERIA ITEM POINTS YOUR
POINTS
1. System Design 10 pts.
2. Applying Special Effects 10 pts.
3. Program Completeness 10 pts.
4. No Error 10 pts.
5. Creativity of the features 10 pts.
6. Following of Instructions 10 pts.
7. Speed and Sacrifice in finishing the Program 10pts.
TOTAL POINTS 70 pts.

Prepared by: Eloisa M. Santos All Right Reserved 2018

CRUD Tutorial for ICT 007