:::: MENU ::::
  • "Learn To Program a Computer, It Teaches You How To Think"-Steve Jobs

  • "Teaching is Leading"-Anonymous

  • "Writing! Then the World Will Know You"-Anonymous

Friday, February 16, 2018


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.

Reaksi:

0 komentar:

Post a Comment