Di hari pertama masuk
kuliah ini, gue kembali menata catatan kuliah gue di semester sebelumnya. Kali
ini, gue mau berbagi mengenai Visual Studio. Ditulisan kali ini, gue ingin
berbagi tutorial dalam membuat sebuah aplikasi desktop menggunakan Visual
Studio. Cekidot…
1.
Langkah
pertama adalah memastikan Visual Studio dan XAMPP sudah diinstal dan siap
digunakan.
Microsoft
Visual Studio 2010
XAMPP
Control Panel
2.
Aktifkan
terlebih dahulu Apache dan MySql pada XAMPP Control Panel. Hal ini dilakukan
supaya dapat menghubungkan ke server database yang akan kita gunakan yaitu
berupa localhost/phpmyadmin
Apache
dan MySql yang sudah diaktifkan
3.
Setelah
itu, membuat database terlebih dahulu. Buka browser yang biasa digunakan, misal
google chrome, lalu ketikkan http://localhost/phpmyadmin/ pada link URL. Maka
akan muncul tampilan sebagai berikut:
4.
Kemudian,
kita membuat database dengan cara sebagai berikut:
·
Klik
new pada taskbar sebelah kiri
·
Masukkan
nama database yang akan dibuat. Dalam tutorial ini menggunakan database finance. Kemudian klik buat.
·
Masukkan
nama table dan jumlah kolom yang akan dibuat, kemudian klik kirim.
Pada saat mengisi kolom, jika ingin ada
penambahan otomatis pada id misalnya, maka yang bertuliskan A_I(Auto Increment)
harus diceklist. Jika sudah diisi semua kolomnya, klik simpan. Tidak lupa juga
untuk mengisi datatype dan length pada kolom yang akan diisi.
·
Jika
sudah, maka akan muncul tampilan sebagai berikut:
Pada contoh tersebut, kita membuat
sebuah table bernama percobaan yang
belum diisi dengan data.
5.
Kemudian,
setelah membuat database, kita membuat projek baru di Microsoft Visual Studio
2010 yang sudah dibuka sebelumnya. Klik New
Project pada tampilan yang sudah tersedia. Maka akan muncul tampilan
seperti ini:
Jika sudah, maka pilih
Windows Form Application, beri nama
projeknya dan simpan projek pada tempat yang mudah diingat. Kemudian klik ok.
6.
Kemudian
akan muncul tampilan selanjutnya seperti berikut:
Pada awal membuat
projek baru akan muncul tampilan kosong seperti diatas. Kemudian, design form
tersebut menjadi seperti berikut menggunakan toolbox yang terdapat pada sebelah kiri.
Untuk mengatur warna,
ukuran font, jenis font, dan tampilan lainnya, dapat dirubah pada Properties yang ada disebelah kanan,
berada dibawah Solution Explorer.
7.
Selanjutnya
adalah menambahkan Reference untuk
membuat MySql Connector ke database. Untuk melakukan hal itu, dapat memilih Project, lalu Add Reference. Kemudian akan muncul tampilan seperti berikut:
Kemudian klik .NET pada Add Reference. Lalu cari MySql.Data,
kemudian klik OK. Seperti yang sudah
dibahas sebelumnya, hal ini dilakukan untuk menghubungkan ke database yang
sudah dibuat sebelumnya. Hasilnya adalah sebagai berikut:
8.
Setelah
itu, sekarang kita buat code / script
untuk menjalankan aplikasi tersebut.
9.
Pertama
kita masukkan code sebagai berikut:
Pada code yang diblok, digunakan untuk
meghungkan data dan membuat MySql ke database.
Berikut adalah script code yang dimaksud:
Imports MySql.Data
Imports MySql.Data.MySqlClient
10. Sekarang kita membuat code untuk mendeklarasikan variable
secara global. Codenya adalah sebagai
berikut:
Berikut adalah script code yang dimaksud:
Public Class Form1
'array
'database untuk
konek ke database
Dim dbCon As MySqlConnection
Dim
dbConOutcome As MySqlConnection
Dim
dbConBimbel As MySqlConnection
'query
Dim
strQuery As String
= "" 'untuk
privat
Dim
strQueryOutcome As String
= "" 'untuk
outcome
Dim
strQueryBimbel As String
= "" 'untuk
bimbel
'send query ke
database connect
Dim
mySqlCmd As MySqlCommand
Dim
mySqlCmdOutcome As MySqlCommand
Dim
mySqlCmdBimbel As MySqlCommand
Dim
dataReader As MySqlDataReader
'untuk memilih satu data
'dataAdapter
untuk ngambil satu tabel sekaligus
Dim
dataAdapter As MySqlDataAdapter
'untuk privat
Dim
dataAdapterOutcome As MySqlDataAdapter
'untuk outcome
Dim
dataAdapterBimbel As MySqlDataAdapter
'untuk bimbel
'untuk
perhitungan
'privat
Dim
nilai_privat As Integer
Dim
hasil_nilai_privat As Integer
'outcome
Dim
nilai_deskripsi As Integer
Dim
hasil_outcome As Integer
11. Setelah membuat variable global, selanjutnya membuat sub sebagai suatu blok program atau
perintah yang dijalankan sebagai tanggapan / respon atas terbentuknya suatu
kejadian(event). Codenya adalah sebagai berikut:
Didalam sub tersebut,
juga terdapat beberapa deklarasi variable yang digunakan sebagai variable penghubung
database.
Berikut adalah script code yang dimaksud:
Sub
loadData()
dbCon = New
MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
dbConOutcome = New
MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
dbConBimbel = New
MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
'query
strQuery = "select
* from privat"
strQueryOutcome = "select * from outcome"
strQueryBimbel = "select * from bimbel"
'mySqlCmd
mySqlCmd = New
MySqlCommand(strQuery, dbCon)
mySqlCmdOutcome = New MySqlCommand(strQueryOutcome,
dbConOutcome)
mySqlCmdBimbel = New MySqlCommand(strQueryBimbel,
dbConBimbel)
'open
database
dbCon.Open()
dbConOutcome.Open()
dbConBimbel.Open()
'Menggunakan
dataAdapter untuk menunjukkan semua isi tabel
dataAdapter = New
MySqlDataAdapter(strQuery, dbCon)
dataAdapterOutcome = New MySqlDataAdapter(strQueryOutcome,
dbConOutcome)
dataAdapterBimbel = New MySqlDataAdapter(strQueryBimbel,
dbConBimbel)
Dim cmdBuild As MySqlCommandBuilder = New
MySqlCommandBuilder(dataAdapter)
Dim
cmdBuildOutcome As MySqlCommandBuilder
= New MySqlCommandBuilder(dataAdapterOutcome)
Dim
cmdBuildBimbel As MySqlCommandBuilder
= New MySqlCommandBuilder(dataAdapterBimbel)
Dim
dataTable As DataTable
= New DataTable()
Dim
dataTableOutcome As DataTable
= New DataTable()
Dim
dataTableBimbel As DataTable
= New DataTable()
dataAdapter.Fill(dataTable)
dataAdapterOutcome.Fill(dataTableOutcome)
dataAdapterBimbel.Fill(dataTableBimbel)
'DataGridView
DataGridView1.DataSource = dataTable 'privat
DataGridView2.DataSource =
dataTableOutcome 'outcome
DataGridView3.DataSource = dataTableBimbel
'bimbel
'dataReader =
mySqlCmd.ExecuteReader
'untuk
menampilkan
'While
dataReader.Read
'End While
dbCon.Close()
dbConOutcome.Close()
dbConBimbel.Close()
End Sub
12. Setelah itu, klik dua
kali pada form yang sudah dibuat
sebelumnya, kemudian akan diarahkan ke private
sub form1_load. Kemudian tuliskan code
sebagai berikut:
Berikut adalah script code yang dimaksud:
Private Sub Form1_Load(sender As
System.Object, e As
System.EventArgs) Handles
MyBase.Load
Dim
option_waktu() As String
= {"1", "2",
"3", "4",
"5", "6",
"7", "8",
"9", "10"}
' data array
For i =
0 To option_waktu.Length - 1
With
ComboBox1.Items.Add(option_waktu(i))
End With
Next
loadData()
End Sub
13. Kembali pada form1 yang sudah dibuat sebelumnya, kemudian klik
dua kali pada button Save yang berada
pada bagian Privat. Maka akan
diarahkan pada line code seperti
berikut:
Kemudian buat code seperti yang tertera pada gambar tersebut.
Berikut adalah script code yang dimaksud:
Private Sub Button1_Click(sender As
System.Object, e As
System.EventArgs) Handles
Save_Privat.Click
Try
dbCon = New
MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
'strQuery
= "select * from privat = '" + TextBox4.Text + "' "
strQuery = "insert
into privat (Waktu, Nama, Meet, Jumlah) values(' " &
str_val_waktu.Text & " ', ' "
& str_val_nama.Text & " ', ' "
& ComboBox1.Text & " ', ' "
& int_val_jumlah.Text & " ')"
mySqlCmd = New
MySqlCommand(strQuery, dbCon)
dbCon.Open()
mySqlCmd.ExecuteReader()
dbCon.Close()
str_val_waktu.Text = ""
str_val_nama.Text = ""
ComboBox1.Text = ""
int_val_jumlah.Text = ""
loadData()
Catch
ex As Exception
MsgBox("Database
Eror")
End Try
End Sub
14. Klik dua kali pada button Hitung yang tertletak pada bagian
Privat, dan buat code sebagai berikut:
Berikut adalah script code yang dimaksud:
Private Sub Button2_Click(sender As
System.Object, e As
System.EventArgs) Handles
Hitung.Click
'nilai_privat
= Integer.Parse(str_val_kuantitas.Text)
nilai_privat = Integer.Parse(ComboBox1.Text)
hasil_nilai_privat = 150000 *
nilai_privat
int_val_jumlah.Text =
hasil_nilai_privat
End Sub
15. Kemudian pada button Save yang terletak pada bagian Outcome, dilanjutkan dengan membuat code sebagai:
Berikut adalah script code yang dimaksud:
Private Sub Save_Outcome_Click(sender As System.Object, e As System.EventArgs)
Handles Save_Outcome.Click
Try
dbConOutcome = New MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
strQueryOutcome = "insert into outcome (bulan, deskripsi, jumlah)
values(' " & str_val_waktu_outcome.Text & " ', ' " & str_val_deskripsi.Text
& " ', ' " &
val_jumlah_outcome.Text & " ')"
mySqlCmdOutcome = New MySqlCommand(strQueryOutcome,
dbConOutcome)
dbConOutcome.Open()
mySqlCmdOutcome.ExecuteReader()
dbConOutcome.Close()
str_val_waktu_outcome.Text = ""
str_val_deskripsi.Text = ""
val_jumlah_outcome.Text = ""
loadData()
Catch
ex As Exception
MsgBox("Database
Eror")
End Try
End Sub
16. Klik dua kali button Save yang terletak pada bagian Bimbel, kemudian buatlah code sebagai berikut:
Berikut adalah script code yang dimaksud:
Private Sub Button1_Click_1(sender As
System.Object, e As
System.EventArgs) Handles
Save_Bimbel.Click
Try
dbConBimbel = New MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
strQueryBimbel = "insert into bimbel(waktu, kelas, materi) values('
" & str_val_waktu_bimbel.Text & "
', ' " & str_val_kelas.Text & "
', ' " & str_val_materi.Text & "
')"
mySqlCmdBimbel = New MySqlCommand(strQueryBimbel,
dbConBimbel)
dbConBimbel.Open()
mySqlCmdBimbel.ExecuteReader()
dbConBimbel.Close()
str_val_waktu_bimbel.Text = ""
str_val_kelas.Text = ""
str_val_materi.Text = ""
loadData()
Catch
ex As Exception
MsgBox("Database
Eror")
End Try
End Sub
17. Kemudian pada button Hitung Data yang terletak pada
bagian kanan dibawah Total Privat,
lalu buat code sebagai berikut:
Berikut adalah script code yang dimaksud:
Private Sub btn_hitung_data_privat_Click(sender As System.Object,
e As System.EventArgs)
Handles btn_hitung_data_privat.Click
Try
dbCon = New
MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
strQuery = "select
sum(jumlah) as total_privat from privat" 'untuk
menjumlahkan satu kolom
mySqlCmd = New
MySqlCommand(strQuery, dbCon)
dbCon.Open()
dataReader =
mySqlCmd.ExecuteReader()
While
dataReader.Read
str_total_data_privat.Text =
dataReader.Item("total_privat")
'tes.Text
= dataReader.Item("test")
End
While
dbCon.Close()
Catch
ex As Exception
MsgBox("Hmm
apa yang salah yaa")
End Try
End Sub
18. Lakukan hal yang sama
seperti langkah sebelumnya pada button Hitung
Data pada bagian Outcome, dan
buat code sebagai berikut:
Berikut adalah script code yang dimaksud:
Private Sub Button1_Click_2(sender As
System.Object, e As
System.EventArgs) Handles
btn_hitung_data_outcome.Click
Try
dbCon = New
MySqlConnection("Server=localhost;Database=finance;Uid=root;Pwd=;")
strQuery = "select
sum(jumlah) as total from outcome" 'untuk
menjumlahkan satu kolom
mySqlCmd = New
MySqlCommand(strQuery, dbCon)
dbCon.Open()
dataReader = mySqlCmd.ExecuteReader()
While
dataReader.Read
str_val_total_data_outcome.Text
= dataReader.Item("total")
'tes.Text
= dataReader.Item("test")
End
While
dbCon.Close()
Catch
ex As Exception
MsgBox("Hmm
apa yang salah yaa")
End Try
End Sub
19. Kemudian pada button Income lakukan hal yang sama
seperti langkah sebelumnya, dan masukkan code
sebagai berikut:
Berikut adalah script code yang dimaksud:
Private Sub Button1_Click_3(sender As
System.Object, e As
System.EventArgs) Handles
btn_income.Click
Dim
total_income As Integer
total_income = Integer.Parse(str_val_ka_fauzi.Text)
+ Integer.Parse(str_total_data_privat.Text)
str_total_income.Text = total_income
End Sub
20. Kemudian klik dua kali
button ATM Sekarang, dan masukkan code sebagai berikut:
Berikut adalah script code yang dimaksud:
Private Sub atm_sekarang_Click(sender As System.Object, e As System.EventArgs)
Handles atm_sekarang.Click
str_atm_now.Text = Integer.Parse(str_atm_before.Text) + Integer.Parse(str_total_income.Text) - Integer.Parse(str_penarikan_tunai.Text) - 5000
End Sub
21. Terakhir adalah klik
dua kali button exit, kemudian
masukkan script code seperti gambar
berikut:
Berikut adalah script code yang dimaksud:
Private Sub btn_exit_Click(sender As
System.Object, e As
System.EventArgs) Handles
btn_exit.Click
Application.Exit()
End Sub
22. Setelah membuat code dari masing-masing button dan lainnya, sekarang jalankan
aplikasi yang sudah dibuat. Untuk menjalankan(Start Debugging), bisa dilakukan dengan klik icon Play
atau tekan f5 pada keyboard, yang terletak pada Standard Toolbar Options, kemudia tunggu proses running. Maka akan muncul tampilan
sebagai berikut:
Tampilan setelah
proses run sudah dijalankan:
Pada gambar tersebut
belum ada data yang dimasukkan kedalam DataGridView.
Sekarang coba input beberapa data kedalam TextBox
yang sudah disediakan. Kemudian klik button
untuk melihat hasil input yang sudah dimasukkan. Berikut adalah contoh
input beberapa data ke dalam DataGridView:
23. Jika sudah memasukkan
beberapa data pada DataGridView,
makan secara otomatis akan masuk kedalam database juga. Untuk melihat data yang
masuk kedalam database dapat dilakukan dengan cara membuah browser, kemudian masukkan localhost/phpmyadmin pada link URL browser. Kemudian klik database yang
sudah dibuat dan dimasukkan data sebelumnya. Selanjutnya klik pada nama table
yang terdapat pada database yang sudah dibuat. Untuk lebih jelasnya, perhatikan
gambar berikut:
Hasil data yang sudah
dimasukkan kedalam table bimbel:
Hasil data yang sudah
dimasukkan kedalam table outcome:
Hasil data yang sudah
dimasukkan kedalam table privat:
24. Jika sudah memastikan
data yang dimasukkan sudah masuk kedalam database, maka proses memasukkan data
kedalam database berhasil dilakukan. Namun jika ada kesalahan atau tidak dapat
memasukkan data kedalam database, maka ada kesalahan pada sintaks code yang dibuat.
25. Kemudian, setelah
menggunakan aplikasi tersebut, jangan lupa untuk menutup aplikasi yang sudah
dijalankan sebelumnya.
26. Untuk menutup atau
mengeluarkan aplikasi yang sudah dijalankan, dapat dilakukan dengan klik button Exit yang sudah dibuat
sebelumnya. Untuk lebih jelasnya dapat dilihat dari gambar berikut:
27. Apabila semua sudah
selesai dilakukan, maka aplikasi berhasil dibuat dan dijalankan.
28. Selamat karena telah
berhasil membuat aplikasi sederhana Finance
Planner menggunakan Visual Studio.
Untuk membuat
aplikasi desktop sederhana seperti itu gue tidak membutuhkan waktu yang begitu
lama. Hanya beberapa hari gue dapat menyelesaikan aplikasi Finance Planner. Namun saat memikirkan ide dalam pembuatan, itu
sudah gue pikirkan sejak lama, sejak gue mengenal Database.
Have fun
for all of you guys, see you again and good luck.
This comment has been removed by the author.
ReplyDeleteboleh belajar privat ga sih kk ? aku mahasiswi jurusan Teknik Informatika
DeleteBang Buat Tutorial Vidio Nya Dong
ReplyDeleteTerimakasih sih buat tutornya ,tapi masih banyak yg gk paham