Tuesday, January 12, 2016

Cara membuat aplikasi penggajian pegawai sederhana dengan VB 2010

Ahoy ini kali pertama saya nge post 'sesuatu' ke blog saya, maklum la ya bang / kak hahaha xD
Saya ingin memberikan apa yang saya tahu tentang pemograman Visual Basic, dan kali ini saya akan membuat program sistem penggajian otomatis dengan Visual Basic 2010. Mohon diperhatikan, bahwa ini bahan yang cocok untuk para 'pemula', karena saya akan menjelaskan scriptnya agar para starter dalam Visual Basic ga cuma bengong. Baiklah, sekarang kita mulai!

Pertama, buka dulu Visual Basic anda:





lalu akan muncul tampilan seperti ini:






Pilih new project, dan akan muncul tampilan seperti ini: 





Ok, disini tugas kita adalah membuat nama project yang akan kita buat nanti. karena ini tentang sistem penggajian namanya 'Gaji' aja kali ya? yaudah bante aja, ganti tulisan WindowsAplication1 menjadi gaji lalu klik ok. jika sudah, maka akan muncul jendala dibawah ini:




Ok, saya akan menjelaskan fungsi dari jendela ini satu persatu. Bagi yang sudah paham maklum ya, supaya para starter bisa mengikuti dengan baik nantinya. Kotak besar yang ada di tengah itu namanya "Form". Untuk gambar yang diatas, nama  Form nya adalah "Form1". Didalam Form inilah kita akan membuat antarmuka yang disediakan oleh Visual Basic, diantaranya seperti sebuah button , textbox dan lain-lain. Coba kalian klik 2 kali pada kotak Form1 itu, jendela apa yang bakal keluar? apakah ini? 





Mungkin agak beda ya? itu karena gambarnya saya crop biar jelas. ok saya akan menjelaskan maksud kedatangan jendela ini. Jendela ini adalah diamana kita membuat script program untuk project kita. Kita masuk kepada script yang ada pada gambar diatas. Fokus! Lihat script Public Class Form1, dan Class itu diakhiri dengan End Class. Maksudnya adalah, semua script yang ada dalam kelas Form1 (dimana Form1 adalah nama Form yang sedang kita kerjakan) hanya akan berjalan dalam Form ini saja. Private Sub Form1_Load , apakah kalian melihat kalimat itu di script? dan lihat, script itu diakhiri dengan End Sub. Private Sub Form1_Load merupakan sebuah sub kelas. Didalam sub kelas itu kita bisa menuliskan script yang kalian mau. Pengertian Private Sub Form1_Load adalah, selama Form1 sedang di muat, maka akan terjadi......(didalam titik2 itu adalah script yang kalian inginkan. Misalnya, selama Form itu di load/muat, variable X = 2 dst. berarti, jika Form1 berhenti di load/muat maka tidak ada deklarasi variable X = 2.). Acuhkan saja itu untuk sementara. Sekarang kita akan masuk ke pembuatan Antarmuka, klik Form1.vb yang ada disebelah tulisan Form1.vb, maka akan keluar jendela ini:






Kita mulai dengan membuat kalimat selamat datang. Lihat gambar, klik Toolbox di kotak yang ada di kiri, disebelah tulisan Database Explorer. Maka Jendela akan berubah seperti ini:






Disini kita akan membutuhkan Tool berupa Button dan Label saja. Anggap saja kita membuat beranda aplikasi kita. Klik Button pada Toolbox dan masukkan kedalam Form. Anda bisa mengatur besar kecilnya button tersebut.






Secara default, Name dan Text pada button yang baru dibuat akan bernama Button1. Name berfungsi sebagai penampung perintah program (kita bahas nanti) sementara Text hanya tulisan yang ada pada Button. Kita bisa mengubah Name dan Text dengan cara berikut ini. Pertama, klik sekali pada satu Button, lalu lihat kotak yang ada di kanan bawah:






Kotak ini namanya "Properties". Disini kalian bisa mengubah Name menjadi sesuatu yang kalian suka (Untuk Name, usahakan sesuatu yang familier untuk kalian. Karena kesalahan script terkadang gara-gara salah masukkan Name suatu Tool.). Jika kalian scroll ke bawah, di dalam bagian Text kalian akan mendapati ada tulisan "Button1". Itu adalah tulisan yang ada dalam tombol itu. Kalian bisa menggatinya sesuka kalian, itu cuma tulisan biasa jadi ga terlalu berpengaruh sama script program nantinya. Sekarang giliran kalian! Coba ganti tulisan yang ada pada tombol menjadi "Lihat Data" dan "Masukkan Data" lalu cari Label dari Toolbox dan masukkan ke Form. Supaya Enak, besarkan aja Form nya, tinggal tarik aja. Ok, apakah sudah menjadi seperti ini?





Jika sudah seperti ini, kita akan membuat kalimat selamat datang kepada user. Klik Label1 dan ubah Text nya, caranya sama seperti merubah tulisan di button tadi. Apakah tampilannya sudah seperti ini?






Ok, kita sudah jauh nih. Masih melek? kalo masih ayo lanjut! Kita akan buat Form baru nih, jadi jika saat di Run kita klik tombol Lihat Data nanti kita akan beralih ke Form Lihat Data dan untuk masukkan data juga seperti itu. Klik "Project" pada Toolbar yang ada diatas, lalu pilih Add Windows Form. Lalu akan Muncul jendela ini:






Isi Name Form sesuka kalian, disini saya membuat "lihatdata". Klik Add lalu akan muncul Form baru.







Form baru sudah dibuat, dan itu bernama lihat_data.vb. Perhatikan kotak yang ada di kanan gambar. Itu adalah kumpulan Form yang ada dalam project gaji yang sedang kita buat. Jika kita klik Form1 disitu, maka akan muncul Form1 dst. Kita kembali Ke Form1 sekarang, klik Form1 pada kotak yang ada di kanan. Lalu klik 2 kali pada tombol Lihat Data. Kita akan mulai membuat program. Setelah tombol di klik 2 kali, kalian akan mendapati ada syntax baru disitu yaitu Sub Button1_Click. Coba salin syntax yang ada di antara  Sub Button1_Click dibawah ini.






Penjelasannya adalah sebagai berikut, Button1_Click adalah Name dari button yang sudah saya jelaskan sebelumnya. Saat Button1 di klik maka akan terjadi (perintah yang ada di antara sub itu). Dalam script diatas, penjelasannya untuk baris lihatdata.Show( ) : menampilkan Form lihatdata saat Button1 di klik. Untuk baris Me.hide ( ) : Me itu tertuju kepada halaman yang sedang aktif, dan hide itu adalah perintah untuk menyembunyikan halaman yang sedang aktif, jadi intinya halaman Form1 akan hilang dan diganti dengan halaman lihatdata saat Button1 di klik. Coba kalian Run dengan menekan tombol F5. Apakah berhasil? Jika berhasil, hentikan program dengan tombol stop berwarna biru yang ada di atas. Sekarang giliran kalian! Buat Form baru bernama masukkandata.vb lalu buat tombol seperti diatas! Jika sudah, kita lanjut. Buka Form masukkandata.vb lalu buat seperti ini:






Kotak putih diatas dapat kalian buat dengan menggunakan Tool TextBox dalam Toolbox. Disini kalian harus mulai berhati-hati. Setiap input dari TextBox ini akan kita ambil, dan input dari setiap box hanya akan ada didalam box itu. Jika Kita ingin mengambil input dari TextBox yang berisi nama, kita harus panggil Name dari TextBox penampung input itu. Makanya tadi saya bilang, buat Name dari sebuah tool itu yang familier untuk kalian. Untuk TextBox penampung nama, buat saja TxtNama supaya gampang dan juga TextBox yang lain buat nama yang mirip aja. Sekarang kita masuk ke script. Untuk script tombol Back, buat seperti Form1, perbedaanya cuma halaman perlaihannya kembali ke Form1. Untuk Tombol Reset, klik 2 kali tombol Reset di bagian design dan salin script dibawah:





Jika kalian perhatikan, TxtNama adalah Name dari TextBox yang menampung input nama, dan seterusnya. Ada script '.Text = "" ' disitu, apa ada yang tau maksudnya? Maksudnya adalah, text yang ada dalam TextBox akan menjadi "blank" atau "" saat button Reset di Klik. Jadi Intinnya,  kalau kita mengetikkan sesuatu di dalam TextBox manapun, jika kita klik Button Reset maka semuanya akan kembali kosong. Sekarang adalah bagian sulitnya, mudah2an penjelasan saya dapat dimengerti, sikit lagi kok! Sebelum kita membahas Button Daftar, kita akan membuat database dulu. Disini saya akan menggunakan database Microsoft Office Access 2007. Buka dulu Access kalian, setelah terbuka klik Blank Database, maka tampilannya akan seperti ini:






Isi File Name dengan nama yang familier dan buat ekstensinya ".mdb". Lalu halaman database akan muncul. Klik View dan akan keluar seperti ini:






Di dalam save as itu adalah nama table yang akan kita buat. Buat saja namanya Tbl_karyawan;





Jika kalian belum paham tentang sistem database, saya akan menjelasakan sekilas saja. Karena jika membahas semuanya pasti akan sangat panjang. Database adalah tempat dimana kita menyimpan data input dari user seperti NIP, nama dst. Jadi kalo sudah disimpan, kita tinggal panggil data yang telah disimpan saat dibutuhkan. NIP, nama dst dinamakan Field, untuk perumpamaan: ada kotak yang bertulisakan NIP diluarnya. Di dalam kotak itu kita hanya menyimpan NIP kedalamnya, bukan nama atau yang lainnya. Data Type adalah jenis data yang akan disimpan, jika kita pilih number, maka yang bisa masuk kedalam NIP hanyalah angka. Jika tipe nya berupa Text, maka input apapun yang diketik akan menjadi sebuah text, dan jika sebuah angka yang dimasukkan kedalam NIP, maka angka itu akan dianggap sebagai text oleh sistem. Close dan Save. Sekarang kita kembali ke project, Klik Data pada Toolbar dan klik Add New Data Source:




  

 Pilih Database lalu next:






Lalu pilih Dataset lalu next:






Pilih New Connection:





pilih change, dan pilih Microsoft Access Database File. Lalu browse database yang tadi sudah di save. Defaultnya, Database disimpan di My Document. Lalu tes koneksinya dengan Test Connection, jika berhasil akan muncul:




Ini menandakan bahwa Database itu memang ada, dan sudah ditemukan. Pastikan kalian telah meng close Access kalian, kalau tidak koneksi tidak akan terjadi. Jika sudah terhubung, klik OK. Lalu kita kembali ke jendela new connecttion, klik OK lalu pilih yes di pilihan yang muncul. Pilihan itu adalah untu memasukkan database kedalam folder project kita. 






Pilih next





Checklist semuanya lalu finish. Setelah itu kita kembali ke Form masukkandata.vb. Klik 2 kali pada tombol Daftar. Sekarang kita akann menggabungkan database dengan project kita. Gunanya agar data yang diinput user bisa kita simpan dan kita panggil disaat kita perlu. Yang perlu diperhatikan dalam penggabungan project adalah Data Adapter dan Data Connection. Agar Tersambung ke database, pertama kita import dulu databasenya, lalu kita deklarasikan Data Adapternya dan Data Connection nya, Lihat script dibawah:






Kan tadi kalian mengklik tombol Daftar 2 kali, tulis script itu di paling atas script kalian. Penjelasan: di imports kita memasukkan sistem data yang berbasis OleDB, dimana Provider Microsoft Access Database File adalah OleDB. Dalam Visual Basic, kita mendeklarasikan sebuah varible dengan DIM lalu didefinisikan tipe datanya dengan kalimat As tipe_data. Untuk mengisi variable koneksi, pastikan kalau database kalian telah masuk ke folder project kalian di folder Visual Studio 2010. Biasanya folder itu ada di My Document. Lalu lihat gambar berikut:





Klik database explorer yang ada di sebelah kiri atas, lalu pilih database kita yang bernama gaji. klik, lalu lihat di sebelah kanan bawah yang tadinya kosong sekarang ada beberapa property disitu. Block semua yang ada di sebelah tulisan connection yang ada di proprty tersebut lalu copy  dan paste kan ke koneksi as string = ".....  . Ada beberapa perubahan yang harus dilakukan. lihat tulisan Source="C di kalimat yang baru saja kalian paste di string. Hapus tanda " dan ganti tulisan Jet menjadi ACE dan versinya ubah dari 4.0 menjadi 12.0. Koneksi ini digunakan sebagai parameter dalam oleDataConnection nanti. conn sebagai OleDataConnection digunakan sebagai sub kelas supaya ga perlu ngetik script banyak2. Deklarasikan OleDataAdapter sebagai da biar gampang diingat. Data Table digunakan untuk mengeluarkan data dari database berbentuk table. OleDbCommand digunakan pada saat kita akan membuat query atau perintah yang akan berhubungan dengan database. Lalu kita deklarasikan gaji, golongan, T_G sebagai tunjangan golongan, T_J sebagai tunjangan jabatan, dan total_gaji.  Lalu, buat sub kelas yang berguna untuk mmembuka koneksi ke database dan bisa dinamai sesuka hati. Isinya adalah variable conn yang kita deklarasikan sebagai OleDbDataConnection tadi = new OleDbDataConnection (koneksi). Lalu, pada sub kelas Load, panggil koneksinya dengan memanggil nama sub kelas yang berisi conn tadi, dalam script ini sub kelasnya adalah MyConn().

Baiklah, sekarang kita akan membicarakan sistemnya. Disini pegawai akan digaji sesuai gol, dan pangkatnya. Schemanya adalah:

Gol                                   Pangkat 
  1                                           -
                             
                             Karyawan Administrasi

  2                             Karyawan Sistem


  3                   Manajer Karyawan Administrasi
                                    
                                    Kabag Sistem


  4                                  Supervisor


Semua pegawai mempunyai gaji pokok sebesar 4.000.000. Gol 1 tidak memiliki tunjangan golongan, gol 2 mendapatkan tunjangan golongan sebesar 650.000, gol 3 mendapatkan tunjangan sebesar 800.000, dan gol 4 mendapatkan tunjangan 1.000.000. untuk tunjangan pangkat adalah, 0 lalu 250.000 lalu 250.000 lagi, lalu 400.000 lalu 600.000 lalu 1.500.000 (dari schema, dari atas ke bawah).

Kita akan merancang sistem sekarang, salin script ini:



untuk script perintah, lengkapnya adalah:

perintah = New OleDbCommand("INSERT INTO Tbl_karyawan VALUES('" & TxtNIP.Text & "','" & TxtNama.Text & "','" & TxtAlamat.Text & "','" & TxtGol.Text & "',' " & TxtJabatan.Text & " ','" & gaji & "','" & T_G & "','" & T_J & "','" & total_gaji & "')", conn) 

Maksud script ini adalah, pertama kita mendeklarasikan gaji pokok sebesar = 4000000. Lalu golongan = val(TxtGol.Text) maksudnya  adalah  input yang masuk ke textbox TxtGol yang awalnya berupa text akan dikonvert menjadi sebuah nilai dengan adanya "val" lalu akan menjadi isi dari variable golongan. Dan isi dari golongan itu akan dijadikan argumen, jika golongannya 1 maka ada 2 kemungkinan lagi. Saya rasa saya tidak perli menjelaskan argumen nya karena sudah jelas. conn.Open( ) berarti kita membuka koneksi ke database, lalu kita membuat perintah SQL dengan perintah = New OleDbCommand. Maksud dari '" & TxtNIP.Text & "' adalah, sistem akan mengambil input yang dimasukkan kedalam textbox TxtNIP untuk menjadi value untuk dimasukkan langsung ke database. Untuk menjalankan perintah diatas, buat perintah.ExecuteNonQuery pada perintah. Lalu tutup database setelah perintah tersebut dijalankan. dt.Clear() agar dapat melakukan perintah berulang. Dan jika data berhasil masuk, maka akan muncul Message Box berisi data telah masuk. Untuk Else , jika Golongan dan jabatan tidak cocok, maka perintah akan ditolak dan user harus mengisi data dari awal lagi. Disini saya cuma menuliskan script untuk Gol 1 saja. Sekarang giliran kamu! Lanjutkan program ini menurut schema diatas. Jika berhasil, maka akan tampil seperti ini:



untuk menapilkan data, kembali ke Form lihatdata.vb lalu masukkan Tool DataGridView dan Textbox seta satu Button seperti ini:





Lalu kllik delete 2 kali untuk membuat peritah hapus, dan perintah lainnya. Salin script ini:





Saya akan menjelaskan bagian sub kelas tampil, karena saya sudah menjelaskan sub kelas myConn. Di sub kelas tampil, saat koneksi database dibuka dengan conn.Open( ), Data Adapter kita set untuk menampilkan semua data yang ada dalam database kedalam dt yang berupa Data Table. DataGridView1 yang merupakan Name dari data grid yang ada di desain akan diisi dengan dt yang sudah memiliki isi semua data yang ada dalam database. Lalu koneksi ditutup.  Dan saat Form lihatdata.vb di load, maka data yang ada di dalam database akan di load kedalam DataGridView dengan memanggil koneksi dan sub kelas tampil. Lalu fungsi tombol hapus adalah untuk mengahapus isi database sesuai NIP yang dimasukkan User kedalam textbox. Cara kerjanya sama seperti memasukkan data yang kita bahas sebelumnya, tapi disini ada syarat yang harus dipenuhi. Yaitu , hapus karyawan dengan NIP yang sama dengan isi textbox baru query bisa terlaksana. Seperti gambar dibawah:





Setelah dihapus:





Terima kasih telah melihat blog saya, lebih dan kurangnya saya minta maaf. Selamat mencoba! :)