Hal : 1 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.

Kom

MODUL 1 - MySql dan Form Master

A. Langkah-Langkah Membuat Database MySQL

B. Pembuatan Form Master (Modul Koneksi, Desain Form Master, Pengcodean dengan SQL)
C. Pembuatan Menu Aplikasi (MenuStrip, ToolStrip dan StatusStrip)

A. Langkah-Langkah Membuat Database MySQL

1. DASAR-DASAR MYSQL
Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik
merupakan struktur dua dimensi terdiri dari baris (row atau record) dan kolom (column atau
field). Sedangkan dalam sebuah database dapat terdiri dari beberapa table. MySQL adalah
database jenis RDBMS (Relational Database Management System). Jadi dalam MySQL tetap
menggunakan Table, Baris dan Kolom. Sebuah Database dalam MySQL mengandung beberapa
table dan satu table dalam database terdiri dari sejumlah baris dan kolom.

a. Tipe Data

Tipe Data Numerik

Tipe data numerik dibedakan menjadi dua, tipe data integer dan tipe data floating point.
Tipe data integer untuk bilangan bulat sedangkan tipe data floating point digunakan untuk
bilangan desimal. Tipe data numerik seperti dalam table di bawah ini

Tipe Data String

Yang termasuk dalam tipe data string adalah tipe-tipe data berikut:
Hal : 2 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Tipe Data Waktu dan Tanggal

Yang termasuk dalam tipe data tanggal dan waktu adalah sebagai berikut:

2. MEMBUAT DATABASE MySQL dengan PhpMyAdmin

Pertama kita akan membuat database di mysql dan menampilkannya di browser tentunya
masih menggunakan Php. Untuk membuat database di mysql sebaiknya gunakan PhpMyadmin.
Jika anda menggunakan apache2triad1.5.4 untuk mengakses phpmyadmin, pada browser
ketikkan http://localhost/phpmyadmin/. Selanjutnya akan muncul tampilan sebagai berikut :

Buatlah database DBInventori dengan mengetikan nama database di kotak isian Create New
Database, lalu Klik tombol Create (Lihat Gambar 1.1.)

3. MEMBUAT TABEL DALAM DATABASE

Seteah Database dibuat dengan mengikuti langkah-langkah diatas, Selanjutnya buatlah table
barang dengan nama TbBarang dengan langkah-langkah sebagai berikut :
Hal : 3 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Buatlah Table TBBarang dalam database DBInventori dengan mengetikan nama tabel tbBarang
di kotak isian Create new table on database DBInventori serta mengetikan jumlah field dalam
kotak isian Number of fields, beri nilai 4, lalu Klik tombol Go (Lihat Gambar 1.2.). Struktur Tabel
tbBarang terdiri dari :

Setelah anda klik tombol Go pada tahapan sesuai Gambar 1.2. selanjutnya akan muncul
tampilan Gambar 1.3 yang menuliskan struktur table tbBarang seperti diatas, lalu kilk tombol
Save

Lakukan hal sama seperti pembuatan table tbBarang untuk membuat table-tabel master
dibawah ini :

B. Pembuatan Form Master (Modul Koneksi, Desain Form Master, Pengcodean

dengan SQL)

1. Membuka Program Visual Studio 2010 Professional

Buka program Visual Studio 2010 Professional yang sudah anda install :
Hal : 4 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Selanjutnya akan muncul tampilan layar utama Micorosoft Visual Studio 2010 Professional

Klik New Project, lalu akan muncul tampilan berikut :

Dengan pilihan type project Visual Basic Window Form Application, ketikan nama project
AplikasiInventori, lalu klik OK.
Hal : 5 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Berikutnya akan muncul tampilan Project baru (Gambar 1.7.) yang merupakan tampilan IDE
(Integrated Development Environment) VS 2010 Prof yang terdiri dari
a. Solutionn Explorer
b. Properties Windows
c. ToolBox
d. Layout Form
e. Error List
f. Menu Bar dan Toolbars

Untuk Form standar dalam hal ini form1, kita akan buat untuk form Main Menu setelah
membuat form master Data Barang, Data Pelanggan dan Data Suplier

2. Pembuatan module koneksi ke Database MySQL

Selanjutnya kita akan membuat modul koneksi yang berisi perintah untuk menghubungkan
dari Project yang kita buat kedalam database MySQL, tetapi sebelumnya harus menginstal
dulu MySql Connector, versi yang digunakan mysql-connector-net-6.9.5.

Langkah untuk menambahkan module kedalam project yang kita buat adalah sebagai
berikut :
a. Aktifkan references library MySql.Data dengan perintah :
 Klik Menu Poject – Add Reference

 Klik Tab .NET dan pilih MySql.Data, lalu klik OK

Hal : 6 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

b. Menambahkan Module kedalam Poject AplikasiInventori

 Klik Menu Project – Add Module

Ketik nama module modConnection dalam kotak dialog Name, lalu klik tombol Add
Pada jendela Solution Explorer, akan bertambah 1 buah File Lagi dengan nama
“modConnection.vb”.

Pada lembar coding (View Code) yang ada di modConnection. Ketikkan Kode berikut
pada paling atas kode.

Imports MySql.Data.MySqlClient
Lalu didalam bagian ini :
-----------------------------------
Module modConnection

End Module
-----------------------------------

Masukkan Kode Berikut :

Public Conn As MySqlConnection

Public RD As MySqlDataReader
Public DA As MySqlDataAdapter
Public CMD As MySqlCommand
Public DS As DataSet
Public simpan, ubah, hapus As String
Public Sub bukaDB()
Dim SQLConn As String
SQLConn = "server=localhost;Uid=root;Pwd=12345678;Database=dbinventori"
Conn = New MySqlConnection(SQLConn)
If Conn.State = ConnectionState.Closed Then
Conn.Open()
End If
End Sub
Hal : 7 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Jadi, Kode Lengkapnya Seperti ini : (Lihat Gambar 1.10)

Catatan : Sebelum melanjutkan ke tahapan berikutnya, dapat dilakukan dulu penyimpanan project
yang baru sebagian dibuat dengan perintah :
 Klik Menu File – Save All

Selanjutnya akan muncul kotak isian seperti gambar berikut ini :

Hal : 8 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Name terisi secara langsung karena menyesuaikan dengan nama project, Location terisi drive D:\,
tapi bisa diganti dengan klik tombol Browse, solution name sama menyesuaikan seperti nama
project. Semua bagian project yang dibuat di VS 2010 Prof, secara otomatis akan tersimpan dengan
nama folder sama dengan nama project. (Lihat Gambar 1.12)

3. Pembuatan Form Baru (Data Master Barang) .

Untuk menambahkan Form baru kedalam project kita, pada Menu Project – Pilih Add Windows
Form.

Ubah Name nya menjadi frmDataBarang dan Klik tombol Add, seperti Gambar 1.14 dibawah ini :

Selanjutnya tampil Layout Form dari FrmDataBarang yang telah ditambahkan kedalam project.

Dan sekarang lihat pada bagian Solution Explorer nya, akan bertambah satu buah Form lagi
dengan nama “frmDataBarang.vb”
Hal : 9 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

a. Desain Form
Selanjutnya Desain FrmDataBarang dengan menambahkan Control (Label, TextBox, Button dan
DataGridView) serta merubah nilai propertiesnya seperti Gambar 1.17. dibawah ini :
Hal : 10 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Catatan : Desain Form untuk penggunaan Control yang sama bisa dilakukan lebih cepat
dengan cara : Select Control – Ctrl + Drag (copy)

b. Pengkodean untuk untuk Class Form dan masing event control dalam FrmDataBarang.

 Pada lembar kerja coding (View Code) FrmDataBarang, tuliskan kode berikut dibagian atas

Imports MySql.Data.MySqlClient

Sehingga menjadi bagian seperti ini :

Imports MySql.Data.MySqlClient
Public Class FrmDataBarang

End Class

 Tuliskan kode berikut diantara Public Class FrmDataBarang – End Class

Sub isiGrid()
Call bukaDB() 'Panggil koneksi kedatabase melalui modul
DA = New MySqlDataAdapter("SELECT * from tbbarang", Conn)
DS = New DataSet
DA.Fill(DS, "tbbarang")
DgvBarang.DataSource = DS.Tables("tbbarang")
DgvBarang.ReadOnly = True 'Jadikan DGV hanya ReadOnly
End Sub

Sub isiCombo()
Call bukaDB()
CMD = New MySqlCommand("SELECT kodebrg From tbbarang", Conn)
RD = CMD.ExecuteReader
CboKodeBrg.Items.Clear()
Do While RD.Read
CboKodeBrg.Items.Add(RD.Item(0))
Loop
CMD.Dispose()
RD.Close()
Conn.Close()
End Sub

Sub Bersih()
txtkodebrg.Text = ""
txtnamabrg.Text = ""
txthargabrg.Text = ""
txtstok.Text = ""
CboKodeBrg.Text = ""
txtkodebrg.Focus()
BtnTambah.Text = "Tambah"
End Sub


 Tuliskan Kode berikut dibagian Event FrmDataBarang_Load (Klik 2x pada bagian Form
FrmDataBarang)
Call isiGrid() 'Menjalankan perintah dari Sub isiGrid()
Call isiCombo()

 Tuliskan Kode berikut dibagian Event BtnTambah_Click (Klik 2x pada bagian button Tambah)

If BtnTambah.Text = "Tambah" Then

BtnTambah.Text = "Simpan"
Hal : 11 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

txtkodebrg.Enabled = True
txtkodebrg.Focus()
Else
Try
Call bukaDB()
CMD = New MySqlCommand("SELECT kodebrg from tbbarang
WHERE kodebrg= '" & txtkodebrg.Text & "'", Conn)
RD = CMD.ExecuteReader
RD.Read()

If RD.HasRows Then
MsgBox("Maaf, Data dengan kode tersebut telah ada",
MsgBoxStyle.Exclamation, "Peringatan")
Else
Call bukaDB()
simpan = "INSERT INTO tbbarang (kodebrg,namabarang,harga,stok) VALUES (?,?,?,?)"
CMD = Conn.CreateCommand
With CMD
.CommandText = simpan
.Connection = Conn
.Parameters.Add("p1", MySqlDbType.String, 6).Value = txtkodebrg.Text
.Parameters.Add("p2", MySqlDbType.String, 30).Value = txtnamabrg.Text
.Parameters.Add("p3", MySqlDbType.Int32, 8).Value = txthargabrg.Text
.Parameters.Add("p4", MySqlDbType.Int32, 4).Value = txtstok.Text
.ExecuteNonQuery()
End With
Call isiGrid()
Call Bersih()
Call isiCombo()
End If
Catch ex As Exception
MsgBox(ex.ToString, MsgBoxStyle.Critical, "Terjadi Kesalahan")
End Try
End If


 Tuliskan Kode berikut dibagian Event BtnBatal_Click (Klik 2x pada bagian button Batal)
Call Bersih()

 Tuliskan Kode berikut dibagian Event BtnEdit_Click (Klik 2x pada bagian button Edit)

Try
Call bukaDB()
ubah = "UPDATE tbbarang SET namabarang=@p2,harga=@p3,stok=@p4 WHERE
kodebrg = @p1"
CMD = Conn.CreateCommand
With CMD
.CommandText = ubah
.Connection = Conn
.Parameters.Add("p1", MySqlDbType.String, 6).Value = txtkodebrg.Text
.Parameters.Add("p2", MySqlDbType.String, 30).Value = txtnamabrg.Text
.Parameters.Add("p3", MySqlDbType.Int32, 8).Value = txthargabrg.Text
.Parameters.Add("p4", MySqlDbType.Int32, 4).Value = txtstok.Text
.ExecuteNonQuery()
End With
Call Bersih()
Call isiGrid()
Call isiCombo()
Catch ex As Exception
MsgBox(ex.ToString, MsgBoxStyle.Critical, "Terjadi Kesalahan")
End Try

 Tuliskan Kode berikut dibagian Event BtnHapus_Click (Klik 2x pada bagian button Hapus)
Try
Call bukaDB()
hapus = "DELETE FROM tbbarang WHERE kodebrg=@p1"
CMD = Conn.CreateCommand
With CMD
Hal : 12 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

.CommandText = hapus
.Connection = Conn
.Parameters.Add("p1", MySqlDbType.String, 6).Value = txtkodebrg.Text
.ExecuteNonQuery()
End With
Call Bersih()
Call isiGrid()
Call isiCombo()
Catch ex As Exception
MsgBox(ex.ToString, MsgBoxStyle.Critical, "Terjadi Kesalahan")
End Try

 Tuliskan Kode berikut dibagian Event CboKodeBrg_SelectedIndexChanged (Klik 2x pada

bagian Control CboKodeBrg)

Call bukaDB()
CMD = New MySqlCommand("SELECT kodebrg,namabarang,harga,stok FROM
tbbarang WHERE kodebrg = '" & CboKodeBrg.Text & "'", Conn)
RD = CMD.ExecuteReader
RD.Read()
If RD.HasRows Then
txtkodebrg.Text = RD.Item(0)
txtnamabrg.Text = RD.Item(1)
txthargabrg.Text = RD.Item(2)
txtstok.Text = RD.Item(3)
txtkodebrg.Enabled = False
txtnamabrg.Focus()
End If

Untuk mencoba FrmDataBarang yang baru dibuat secara lengkap terlebih dahulu rubah Startup
Formnya ke FrmDataBarang dengan perintah Klik Menu Project – AplikasiInventori Properties

Ubah isian Starup form dengan FrmDataBarang, sebelumnya terisi form1

Jalankan Project AplikasiInventori yang dibuat dengan klik tombol Start Debugging (F5)
Hal : 13 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Maka akan muncul Hasil program FrmDataBarang seperti dibawah ini :

TUGAS :
Dengan menggunakan cara yang sama seperti pembuatan FrmDataBarang, Buatlah Form Data
Pelanggan (FrmDataPelanggan) dan Form Data Supplier (FrmDataSuplier), tinggal disesuaikan
pengaturan Properties Control, Pengaturan Tabel dan field/attribute serta coding.

c. Pembuatan Menu Aplikasi (MenuStrip, ToolStrip dan StatusStrip)

Sebelum proses pembuatan menu, karena menu aplikasi harus disimpan dalam Form, dan Form
yang akan digunakan adalah form1 (form default), maka ganti nama form1 menjadi
FrmMenuAplikasiInventori dengan perintah : Klik Kanan di posisi form1 – pilih Rename seperti
Gambar 1.22. dibawah ini :

Ubah Nama form1 menjadi FrmMenuAplikasiInventori, sehingga tampilan Solution Explorer anda
menjadi seperti Gambar 1.23. dibawah ini :
Hal : 14 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

1. Menambahkan control MenuStrip kedalam Form Menu Aplikasi

Untuk menambahkan control MenuStrip dengan perintah Drag MenuStrip (ToolBox Menus
&ToolBars) kedalam form, lalu tuliskan daftar menu seperti Gambar 1.24. dibawah ini :

Jangan Lupa !!! atur properties FrmMenuAplikasiInventori sebagai berikut :

 Text : Menu Aplikasi Inventori
 Windows State : Maximized
 IsMdiContainer : True

2. Menambahkan control ToolStrip kedalam Form Menu Aplikasi

Untuk menambahkan control ToolStrip dengan perintah Drag MenuStrip (ToolBox Menus
&ToolBars) kedalam form, lalu pilih Button dibagian drop down seperti Gambar 1.25. dibawah
ini :

Atur Properties Control ToolStrip1 yang terdiri dari :


 Name : DataBarangToolStripButton
 DisplayStyle : ImageAndText
Hal : 15 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

 Text : Data Barang

 Images : Import Gambar, hampir semua format gambar bisa (Contoh : JPG, GIF,
WMF, BMP, PNG)
 ToolTipText : Form Data Barang

Catatan :
Jika gambar ICON nya terlihat kecil, Coba ubah properties pada bagian “ImageScalling” ubah
menjadi “None”.

Lakukan hal yang sama, jika ingin menambahkan Button berikutnya, sehingga pilihan ToolStripnya
akan lengkap seperti Gambar 1.26. dibawah ini :

3. Menambahkan control StatusStrip kedalam Form Menu Aplikasi

Langkah Untuk menambahkan control StatusStrip hampir sama dengan MenuStrip dan ToolStrip
menggunakan perintah Drag StatusStrip (ToolBox Menus &ToolBars) kedalam form, lalu pilih
StatusLabel dibagian drop down seperti Gambar 1.27. dibawah ini :

Atur Properties Control ToolStatusStriabel1 yang terdiri dari :


 Name : TanggalStatusStripStatusLabel
 DisplayStyle : ImageAndText
 Text : Tanggal
 Images : Import Gambar, hampir semua format gambar bisa (Contoh : JPG, GIF,
WMF, BMP, PNG)

Lakukan hal yang sama, jika ingin menambahkan StatusStripLabel berikutnya, sehingga pilihan
StatusStripnya akan lengkap seperti Gambar 1.28. dibawah ini :
Hal : 16 | Materi Pemrogramman Database (Vb.Net 2010) Author : Suseno Khaidir, S.Kom

Tambahkan Control Timer1 dan atur propertiesnya sebagai berikut :

Enable : True
Interval : 1000

Lakukan Double Klik (Klik 2x) dan tuliskan kode berikut di Event Timer1_Tick :
JamStatusStripStatusLabel.Text = Format(Now, "hh:mm:ss")

Untuk Menampilkan tanggal di StatusStrip, Klik 2x di FrmMenuAplikasiInventori

dan tuliskan kode berikut di Event FrmMenuAplikasiInventori_Load :
TanggalStatusStripStatusLabel.Text = Format(Now, "dd-mm-yyyy")

Tuliskan kode berikut untuk memanggil FrmDataBarang dari MenuStrip,

ToolStrip di Event DataBarangMenuItem_Click dan
DataBarangToolStripButton_Click :

FrmDataBarang.MdiParent = Me
FrmDataBarang.StartPosition = FormStartPosition.CenterScreen
FrmDataBarang.Show()

Coba Jalankan AplikasiInventori, Atur StarUpform nya ke FrmMenuAplikasiInventori :