Tutorial Program 1 (Form Pendaftaran)

TUTORIAL PROGRAM 1

Pada penggunaan program visual basic 2010 ini kelompok kami membuat sebuah program berupa form pendaftaran. Form pendaftaran yang kami buat adalah form untuk mendaftar BEM KM Undip.

♣ FORM 1

Yang pertama, kami akan membuat form pertama yang berisi data pribadi yang penting untuk diisi.

1. Setelah membuka program Visual Basic 2010 dan klik menu File dan pilih New Project maka akan keluar tampilan seperti di bawah ini :

2. Untuk menggati nama file ketik pada Properties di bagian Text, ganti dengan nama STEP 1, seperti yang ada di bawah ini :

3. Lalu tekan ENTER agar perubahan nama keluar, seperti yang ada di bawah ini :

4. Lalu pada Form 1 tersebut  masukkan beberapa tool  Label untuk menuliskan hal-hal penting seperti  judul form seperti ‘PENDAFTARAN BEM KM’, lalu tool Label berikutnya untuk menuliskan ‘DATA PRIBADI’, lalu tool Label berikutnya untuk menuliskan NAMA, NAMA PANGGILAN, TTL, JENIS KELAMIN, No. HP, AGAMA, ALAMAT, seperti contoh di bawah ini :

Gunakan tool Label juga untuk membuat titik dua (: )

5. Kemudian untuk mengisi data pada form tersebut gunakan  tool TextBox

6,. Namun untuk mengisi data TTL, kami menggunakan tool ComboBox pada bagian date, month dan year nya.

Setelah klik ComboBox pada Toolbox lalu klik kanan dan Pilih Edit

Maka akan tampil kotak dialog seperti  yang ada di bawah ini :

Pada kotak dialog tersebut ketikkan angka 1-31 sebagai tanggal. Lakukan perintah ini untuk Bulan (Januari-Desember) dan tahun (1980-2000). Dan jangan lupa untuk menamai ComboBox tersebut ketik di bagian Text di Properties ‘DATE’, ‘MONTH’, dan ‘YEAR’, seperti tampilan di bawah ini :

7. Untuk mengisi jenis kelamin kami menggunakan tool RadioButton

Dan jangan lupa untuk mengganti nama pada Properties di bagian Text dengan nama ‘PRIA’ dan ‘WANITA’

8. Untuk mengisi nomor hp kami menggunakan tool TextBox

Untuk mengisi data AGAMA kami menggunakan tool  ComboBox juga sama seperti tanggal lahir. Sama seperti langkah membuat tanggal lahir, namun bedanya setelah klik kanan pada ComboBox dan pilih EDIT yang diketikkan pada tab adalah agama,seperti yang ada di bawah ini :

9. Untuk megisi data alamat kami menggunakan tool textBox namun pada Properties di bagian MaxLength kami ganti menjadi  40, maksudya adalah agar penulisan alamat tidak menggunakan lebih dari 40 karakter, seperti yang ada di bawah ini :

10. Lalu tambahkan tool Label yang bertuliskan ‘*maksimal 40 karakter’ yang berfungsi sebagai keterangan.

11. untuk membuat tampilan menarik tambahkan gambar, misal logo BEM KM caranya yaitu dengan klik PictureBox pada toolbox. Maka akan muncul kotak untuk tempat gambarnya, kemudian klik kanan dan pilih choose image

Maka akan muncul seperti di bawah ini :

Kemudian klik Local Resource dan klik import dan akan menyambungkan pada file-file dalam komputer kita, pilih gambar logo BEM KM UNDIP

12.  Untuk memperindah tampilan form1 ini bisa ganti jenis font, warna font, ukuran font,  dan juga background font. Dan semua itu dapat diganti melalui Properties.

Untuk Background Form dilakukan dengan pilih BackgroundImage pada Properties dan klik Local resource lalu klik Import untuk mencari gambar pada file komputer

Setelah diedit sesuai keinginan maka akan menjadi seperti di bawah ini :

13. Pada halaman bawah form tambahkan tool Button sebanyak dua tombol untuk menuliskan NEXT  dan RESET. Tentu saja menuliskannya pada bagian Text pada Properties. Untuk mengganti warna button edit melalui Properties. 

Agar button berfungsi harus mengisi listing dengan cara klik dua kali pada button NEXT dan RESET

Untuk NEXT akan berfungsi jika sudah tersedia Form yang dituju

 

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Form2.Show()

        Me.Hide()

    End Sub

End Class

• Listing ini berfungsi agae saat tombol NEXT pada form1 diklik maka akan muncul Form 2 dan Form 1 tersebut hilang atau tersembunyi.

Button RESET, tambahkan listing seperti di bawah ini :

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

        TextBox1.Text = ""

        TextBox2.Text = ""

        TextBox3.Text = ""

        ComboBox2.Text = ""

        ComboBox3.Text = ""

        RadioButton1.Text = ""

        RadioButton2.Text = ""

        TextBox6.Text = ""

        TextBox5.Text = ""

        ComboBox1.Text = ""

    End Sub

End Class

• Tombol RESET ini berfungsi  untuk meng-CLEAR kan apa yang sudah diketik dalam mengisi data

♣ FORM 2

1. Tambah form dengan cara klik kanan pada WindowsAplication1, pilih Add lalu New Item dan pilih Windows Form, seperti yang ada di bawah ini :

  

Maka akan muncul seperti yang ada di bawah ini :

Ganti nama Form dengan nama STEP 2 seperti langkah di awal yang sudah kami jelaskan.

• Pada form 2 ini kami mengisi form dengan data orang tua. Pada form 2 ini kami menggunakan tool-tol yang lebih sederhana.

 Yaitu dengan tool Label untul menuliskan judul, nama ayah, nomor ayah, pekerjaan ayah, nama ibu, nomor ibu, pekerjaan ibu dan alamat orang tua

2. Lalu sama dengan form 1  gunakan tool Label untuk membuat titik dua (: )

3. Kemudian gunakan tool TextBox untuk mengisi data pada form 2 ini

4. Lalu tambahkan tool Button sebanyak 3 buah, untuk menuliskan tombol NEXT, BACK, dan RESET

5. Agar ketiga button berfungsi maka perlu menambahkan listing pada tiap Button

• Button NEXT , klik dua lalu tambahkan listing seperti dibawah ini (tombol ini berfungsi jika sudah ditambahkan Form berikutnya) :

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Form3.Show()

        Me.Hide()

    End Sub

End Class

Listing ini berfungsi agar saat tombol NEXT pada form 2 diklik maka akan muncul Form 3 dan Form 2 tersebut hilang atau tersembunyi.

•Button BACK, klik dua kali lalu tambahkan seperti di bawah ini :

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

        Form1.Show()

        Me.Hide()

    End Sub

End Class

BACK pada form ini berfungsi  agar pada saat diklik maka akan muncul Form 1 dan menghilangkan atau menyembunyikan form 2 itu sendiri, hal ini dilakukan bila pendaftar  akan membenahi data pada Form 1.

• Button RESET, klik dua kali lalu tambahkan seperti di bawah ini :

Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click

        TextBox1.Text = ""

        TextBox2.Text = ""

        TextBox3.Text = ""

        TextBox4.Text = ""

        TextBox5.Text = ""

        TextBox6.Text = ""

        TextBox7.Text = ""

    End Sub

End Class

Sama fungsi  RESET pada Form 1 fungsi RESET di Form 2 juga untuk meng-CLEAR kan apa yang sudah diketik dalam mengisi data

6. Setelah semua fungsi tombol sudah memiliki fungsi, silahkan memperindah Form dengan  meng-edit jenis font, warna font, ukuran font, memberi warna Button, dan background Form melalui Properties seperti cara pada Form 1.

Maka setelah diedit akan menjadi seperti di bawah ini :

♣ FORM 3

1. Untuk menambahkan Form gunakan cara seperti menambah Form 2

Maka akan muncul seperti di bawah ini :

2. Jangan lupa sebelumnya mengganti nama Form dengan nama STEP 3

• Pada Form 3 ini data yang perlu diisi adalah data tambahan sebagai penunjang  bagi pendaftar agar lebih dimudah kan diterima menjadi anggota BEM KM UNDIP. Data yang perlu diisi adalah  jabatan yang diinginkan, Motivasi, Pengalaman organisasi, dan prestasi.

3. Penggunaan tool sama dengan Form 2. Yaitu hanya Label, TextBox, dan Button.

Untuk menuliskan jabatan yang diinginkan, Motivasi, Pengalaman organisasi, dan prestasi menggunakan tool Label. Dan Label juga digunakan untuk membuat titik dua (: )

4. Untuk mengisi data sama, menggunakan tool TextBox, namu yang berbeda ada, kami mengganti ukuran TextBox melalui Size pada Properties

Lakukan hal yang sama pada TextBox3 dan TextBox4

5. Lalu sama seperti Form 2 tambahkan tool Button sebanyak 3 buah, untuk menuliskan tombol BACK, RESET dan NEXT

Agar ketiga button berfungsi maka perlu menambahkan listing pada tiap Button

• Button NEXT , klik dua lalu tambahkan listing seperti dibawah ini ( tombol ini berfungsi jika sudah ditambahkan Form berikutnya) :

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Form4.Show()

        Me.Hide()

    End Sub

End Class

Listing ini berfungsi agae saat tombol NEXT pada form3 diklik maka akan muncul Form 4 dan Form 3 tersebut hilang atau tersembunyi.

• Button BACK, klik dua kali lalu tambahkan seperti di bawah ini :

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

        Form2.Show()

        Me.Hide()

    End Sub

End Class

BACK pada form ini berfungsi  agar pada saat diklik maka akan muncul Form 2 dan menghilangkan atau menyembunyikan form 3 itu sendiri, hal ini dilakukan bila pendaftar  akan membenahi data pada Form 2.

• Button RESET, klik dua kali lalu tambahkan seperti di bawah ini :

Private Sub RESET_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles RESET.Click

        TextBox1.Text = ""

        TextBox2.Text = ""

        TextBox3.Text = ""

        TextBox4.Text = ""

    End Sub

End Class

Sama fungsi  RESET pada Form 1 dan Form 2 fungsi RESET di Form 3  juga untuk meng-CLEAR kan apa yang sudah diketik dalam mengisi data

6. Setelah semua fungsi tombol sudah memiliki fungsi, silahkan memperindah Form dengan  meng-edit jenis font, warna font, ukuran font, memberi warna Button, dan background Form melalui Properties seperti cara pada Form 1 dan Form 2.

♣ FORM 4

1. Tambahkan Form lagi dengan cara sama seperti penambahan Form-form sebelumnya.

2. Ganti nama Form dengan nama STEP 4

3. Pada Form 4 ini berfungsi untuk pengecekan akhir. Form 4 hanya berisi dua tool Button yang keduanya diberi nama masing-masing  RE-CHECK dan FINISH

4. Tiap tombol Button akan berfungsi jika menambahkan listing

• Button RE-CHECK

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Form1.Show()

        Me.Hide()

    End Sub

End Class

Button RE-CHECK jika diklik akan kembali ke Form 1 dan menghilangkan Form 4 itu sendiri.  Button RE-CHECK bermanfaat jika pendaftar akan mengecek ulang data yang telah diisinya dari awal.

• Button FINISH

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click

        Form5.Show()

        Me.Hide()

    End Sub

End Class

Tombol FINISH akan menampilkan Form terbaru dan akan menghilangkan atau menyembunyikan Form 4 itu sendiri.

5. Setelah semua fungsi tombol sudah memiliki fungsi, silahkan memperindah Form dengan  meng-edit jenis memberi warna Button, dan background Form melalui Properties seperti cara pada Form 1, Form 2 dan Form 3.

♣ FORM 5

1. Tambahkan Form baru lagi dengan cara yang sama dengan sebelum-sebelumnya

2. Namai Form 5 dengan nama FINISH

• Form 5 adalah Form terakhir yang berisi ucapan TERIMA KASIH menggunakan tool Label dan Button yang dinamai OK

3. Button OK perlu ditambahkan listing sebagai berikut

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Close()

    End Sub

    Private Sub Label1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Label1.Click

    End Sub

End Class

Maka jika OK diklik maka akan menutup semua Form.

4. Setelah semua fungsi tombol sudah memiliki fungsi, silahkan memperindah Form dengan  meng-edit memberi warna Button, dan background Form melalui Properties seperti cara pada Form 1, Form 2, Form 3, dan Form  4.