You are on page 1of 30

Assalamu’alaikum… Sorry ya kemaren kalo praktekinnya kecepetan… Oke..!!

Sekarang gw coba bwt cara-caranya aja ya, mudah2an bisa ngebantu..

JAVA PROGRAMMING WITH GUI
Kita mulai ya.. Disini kita bakal praktek ngebuat sebuah form tentang data sederhana sebuah anggota perpustakaan… Pertama-tama kita butuh database buat nampung hasil inputan user, Langkahnya kaya biasa aja.. 1. POSTGRESQL 8.2 CONFIGURATION Mulai di START SERVICE postgreSQL 8.2 nya.. Biz tu kalo dah selesai di START buka pgAdmin III… CONNECT-kin dulu databasenya sesuai ama password yang kita buat… Setelah CONNECT dan kebuka semua databasenya kita buat database yang baru untuk menampung hasil inputan user…

1

Klik kanan pada folder database kaya yang ditunjukkin gambar diatas, truk klik NEW DATABASE…

Kalo dah kebuka kotak dialog kaya disamping bikin aja nama baru, contohnya perpustakaan dengan Owner postgres

Kalo dah selesai klik folder database perpustakaan yang baru aja kita buat buka terus foldernya (perpustakaan-schemas-public-table)… Trus klik kanan di table, biz itu klik new database kaya gambar dibawah ni…

2

Kebuka kan kotak dialognya, truz isi nama table nya sama anggota dengan owner postgres…

Selaen itu sekalian aja klik tab COLUMNS yang ada di sebelah tab PROPERTIES buat bikin kolom baru Tampilannya kaya di bawah eni ni…

Kolomnya sesuai ama yang kita inginin, kalo gw ngebuat idmember-character-5,

firstname-character-15, lastname-character15, address-character-100, telephone-character-15, occupation-character-50.
(disesuain aja ama kebutuhan kita ya…) Truz jangan lupa pilih PRIMARY KEY nya…

3

Caranya klik tab disebelah COLUMNS yang namanya CONSTRAINS… Truz pilih Primary key biz tu klik button Add.. Setelah itu muncul kotak dialog kedua berjudul New Primary Key, klik tab Columns dulu pilih nama column yang mau dijadiin primary key… kalo dah dipilih klik Add.. Nah muncul kan idmembernya truz klik tab properties disitu diisi apa aja sebagai pengenal colom idmember nantinya (ex: Member ID)

Nah kalo dah sampe tahap ini dah selesai persiapan kita pembuatan DATABASE PERPUSTAKAAN… Sama aja kan kaya biasa… Tapi sebelum masuk ke konfigurasi NETBEANS ada baenya dicek dulu datanya… Coba klik kanan di table yang dah kita buat tadi (anggota) pilih view data, trus pilih lagi VIEW ALL ROWS… Kalo udah bakalan muncul gambar kaya dibawah ini, Disana ada judul kolom, type data, panjang data, n primary key…. Kalo dah sesuai ma keinginan kita, yuk lanjut…. Gw yakin pada dah pada bisa kan sampe sini…

4

Gambar tampilan PostgreSQl yang databasenya dah kelar dibuat

2. NETBEANS CONFIGURATION

5

Oke dah masuk dinetbeans nih, dah setengah jalan ko tenang aja… Pertama klik RUNTIME, buka DATABASE-DRIVERS-klik kanan pada driver PostgreSQL(v7.0 and later)… pilih CONNECT USING…

Sesuain isinya ama database yang dah kita buat… Buat <HOST> ganti ama localhost , trus <PORT> ganti ama 5432 (defaultnya postgreSQL), <DB> ganti ama perpustakaan (sesuai database yang kita buat sebelumnya di postgreSQL tadi)… Isi username ama postgres (default postgreSQL) sama password yang kita isi kalo disini password gw ‘admin’…

6

Nah sekedar info (bg yg blm tw) langkah ini untuk ngebuka jalur yg berhubungan ama postgreSQL kita… Makanya yg pertama dikonekin ini spy ga lupha… Oke dah keliatan kan kebuka… Kalo mau diliat dulu ‘yo wess, monggo…’ klik aja jdbc:postgresql://localhost:5432/perpustakaan truz buka tables-anggota trus klik kanan pilih view data… Dah Oke kan…. Lanjut nih…

Kita buat project baru untuk ngebuka class dijava pilih tab project yang biasanya ada di sebelah runtime truz klik File-New Project… kaya ditampilin digambar atas. Trus bakalan muncul kotak dialog kaya gambar di bwah eni ni… Pilih aja general – trus pilih Java Application… Klik Next

7

kalo udah di Next – bakalan tampil kotak dialog kaya dibawah ini….

Ganti nama project name sesuai keinginan kita aja.. kalo disini gw pake dbperpus.. Perhatiin juga CHECKBOX pada Create Main Class… “jangan dicentang”, kosongin aja kita pake Main Project aja yg ada diatasnya… Kalo udah bakalan kliatan tuh di dalem tab project ada file dbanggota, itu project yang baru aja kita buat. Coba klik tanda [+] nya bakalan kebuka semua elemen project, ada source

packages, test packages, library, test library…

8

Sebelum masuk kemana-mana, Supaya ga lupa2 lagi… tentuin dulu librariesnya cz running program tanpa library bakalan error jadinya… Sekarang klik kanan Libraries trus pilih Add JAR/Folder…

Pas diklik AddJAR/Folder bakalan kebuka kotak dialog kaya gini… Kalo belom masuk ke jdbc.. Coba pilih dulu PROGRAM FILES dikomputer kita trus cari folder postgreSQL pilih folder 8.2 trus buka folder jdbc, Pilih postgresql-8.2-506.jdbc2 Trus klik OPEN

Udahan… Kalo udah kita lanjut ke tahap berikutnya… Ngebuat Java Class…

9

Liat gambar diatas…. Klik kanan source packages klik new pilih java class…

Kenapa ga bikin javapackage nya terlebih dahulu?
Ternyata kita bisa langsung bikin class dijava yg ntinya bakalan ada pilih untuk ngebuat package baru di kotak dialog class… Coba aja di klik dulu…

Pengaturan Package Langsung melalui JavaClass

10

Kalo udah kebuat java classnya bakalan keliatan script disampingnya… Itu kita SELECT ALL trus DELETE… Kita maen copy paste aja dulu ye… Trus masukin script koneksi yang dah dilampirin di email lw… Tapi perlu ada beberapa perubahan… sesuain aja ama database yg kita buat tadi

package com.perpustakaan; import java.sql.*; import java.sql.DriverManager; import java.sql.Connection; import java.sql.SQLException;

ganti sesuai ama package yg kita buat tadi... class di java yang perlu kita import supaya perintah (script) yg kita jalankan dapat terkoneksi dengan postgreSQL.

public class koneksi {

public koneksi() { } public Connection bukakoneksi()throws SQLException { Connection con = null; String loginUser = "postgres"; String loginPasswd = "admin"; String loginUrl = "jdbc:postgresql://localhost:5432/perpustakaan"; try { Class.forName("org.postgresql.Driver"); con = DriverManager.getConnection(loginUrl, loginUser, loginPasswd); return con; } catch (SQLException se) { System.err.println("Tidak Ada Koneksi yang Terbuka"); return null; } catch (Exception ex) { System.err.println("Tidak Dapat Membuka Koneksi"); return null; } } }
Ganti jika diperlukan Sesuaikan dgn database yg kita buat...

Kalo ini keluar di hasil runningan kita pas waktu ngejalanin java gui berarti Library kita masih belom di connectin atw salah pilih…

Kalo pernyataan ini yg keluar, biasanya ada script yang salah atw ga sesuai makanya koneksi dari netbeans ke postgreSQL ga bisa kebuka..

11

Kalo dah gada yg error (dah kotak ijo di netbeans) baru kita compile… Oke koneksi dari netbeans ke postgreSQL dah kelar…. Sekarang kita buat java GUI nya… Sama kaya yg tadi, Pertama-tama klik kanan package yg tadi kita buat com.perpustakaan, Trus pilih New JFrame Form

Pada Class Name isikan apa saja yg mudah dan berkaitan (ex : FrmAnggota) Klik Finish

12

Pd gambar diatas dah keliatan kan form designnya… Nti bakalan kita isikan : JText Field = mengisikan text pada kolom yg tersedia JLabel = Membuat suatu tulisan yang mewakili isi JText Field JButton = Tombol yang dibuat untuk melaksanakan suatu instruksi

13

Nantinya tampilan diatas bakalan kita rubah kaya gini…

Cara ngedit textnya tinggal diklik 2 x aja di dalem objek Yang kita ingin rubah (ex: Jbutton1 tinggal di klik 2x truz Diganti textnya ama tambah)…

14

Langkah selanjutnya coba liat gambar diatas… Kita masuk penamaan JTextField, supaya engga bingung nantinya JTextField jangan dibiarin default aja (JTextField1, JTextField2, dst…) cz ntinya bakalan bingung kalo ada kesalahn program… (perhatiin icon n kursor penunjuk dimana adanya pada gambar diatas) Dalam JTextField ini kita hanya perlu menamakan saja jadi hanya mengubah Code Generation-nya saja pada variable name tidak perlu masuk ke tab Event karena itu merupakn property untuk memasukkan suatu deklarasi instruksi otomatis pada source netbeans (ini diperlukan pada saat pengeditan Jbutton nanti…) Daripada bingung ama tulisan gw yg ga tw asal muasalnya ni, kita praktekin aje… Coba klik JTextField1 sampe muncul kotak2 editan disekelilingnya…

Trus klik tab code pada jendela disebelah kanan design… Klik kotak titik2 […] pada Variable Name-nya sesuai anak panah diatas, Ganti JTextField1 menjadi text_idmember sesuai kebutuhan kita Begitu seterusnya… klik JTextField2 truk klik Tab Code ganti variable namenya sesuai ama kebutuhan kita (dalam hal ini JTextField2 = Nama Depan) dst… sampe JTextField5…

15

Oia… kenapa JLabel engga diotak-atik… Cz dia Cuma sebagai label yang mempermudah user untuk menginputkan data di dalam JTextField jadi endak perlu dirubah engga apa2..

(bisa c dirubah tapi netbeans bakalan nyuruh kita ganti variable name-nya sesuai ama nama colom yg kita masukin di database.. ga bisa asal2an harus sama… Truz JLabel1 sebagai Judul berarti engga bisa dong kan engga ada colomnya? JLabel1 engga usah dirubah aja biarin variable namenya tetep JLabel1)… Bingung Ga..?? Yawdah kalo bingung engga usah diotak-atik JLabelnya endak opo2 toh…
Sekarang saatnya kita otak-atik JButton, Sama aja kaya kita otak-atik JTextField tadi yg ganti variable namenya Cuma sekarang ditambah sama kita ubah Action Performed-nya pada Tab Events… Gunanya nanti kalo kita rubah maka secara otomatis Netbeans bakalan ngebuat deklarasi button kita pada script source-nya jadi ga perlu repot2 deklarasiin lagi… Langsung aja praktek boss…

Keterangannya dah ngerti kan, sama aja kaya tadi ikutin tanda panah gambar diatas…

16

Klik pada Jbutton Tambah sampe muncul kotak-kotak editor size trus pilih tab Code pada area properties di kanan layer truz klik […] pada variable name sampe muncul kotak dialog yg sama kaya diatas… Truz ganti JButton1 ama btn_tambah… Oke dah sukses… Sekarang kita pindah ke Tab di kirinya Tab Events, coba di klik…

Langkahnya, klik button tambah sampe kluar kotak2 editor size disekitarnya kaya digambar atas, truz pilih Tab Events pada area properties di kanan layar. Truz klik actionPerformed di baris paling atas, klik […] – nya.. bakalan kluar kotak dialog kaya diatas yang judulnya Netbeans for actionPerformed truz klik Add bakalan muncul kotak dialog lagi yg judulnya Add Handler ketik di dalam New Handler Name : click_tambah kaya diatas abiz itu klik OK… truz OK lagi sampe dibawa ke source script button otomatis, tampilannya kaya dibawah ini…

17

Script button tambah otomatis yg dibuat netbeans…

Oke sampe sini ga ada yg bingung kan… Kalo dibawa ke source kaya gini ga usah dihirauin kita cek scriptnya bener apa ga truz kita balik aja ke tampilan design di tab sebelahnya… truz lanjutin lagi ke button-button berikutnya… langkahnya sama aja kaya tadi (buat button cari di variable name pada tab code kita ganti jadi btn_cari, pada actionPerformed kita ganti jadi click_cari di Tab Events.. begitu seterusnya ampe abis… Ga usah dihirauin, Cek dulu scriptnya terus balik lagi ke tab design buat konfigurasi buttonbutton berikutnya…

Trus kalo udah semua button kita konfigurasi maka bakalan keluar semua script otomatisnya waktu kita klik Tab Source lagi.. Coba deh klik dulu, Tampilannya bakalan kaya gini…

18

Disini nanti kita import classs-class java yang kita butuhin untuk bisa berhubungan dgan user dan postgreSQL

Script Button otomatis yang dibuat oleh Netbeans.. Ini merupakan hasil konfigurasi kita tadi di actionPerformed pada Tab Events… Kliatan kan yg muncul click_[nama buton] bukan btn_[nama buton]
Dari baris yg ijo eni kita bakalan masukin script yg dibutuhin (script kita sendri)… Jadi disini intinya badan/inti scriptnya… kita masukin setelah deklarasi script button, sebelum script ending (diantaranya)

Ini Cuma sekedar comment yg gw buat untuk nandain kalo dibawah ini tu script ending/ terakhir Script ending (akhir) otomatis yg dah dibuat netbeans…

19

Udah… Sorry ya kalo malah buat bingung… Oke sekarang kita mulai masukin scriptnya satu per satu bagian… Pertama kita masukin class-class yg kita butuhin…

Lanjut ke langkah brikutnya… masukin script kita sendiri… kita masukin disini sebenernya Cuma script buat button karena kita Cuma konfigurasi program disitu aja, Masalah isi dari textnya biarin user yang ngisi, gitu kan… Jadi supaya bisa di jalanin kita harus mendeklarasikan script button… Yang tadi udah dideklarasiin otomatis oleh netbeans hanya bentuknya aja, makanya perlu kita tambahin script buat manggil perintah button itu sendiri.. Daripada bingung ngebayangin kata-kata gw, liat aja yukz..

20

Perhatiiiiin aja yg di kasih kotak ijo entu… Itu script yg perlu kita masukin di source netbeans… (dalam hal ini baru script button tambah), Tgu tapi perlu di perhatiin juga ga Cuma copy paste cz nti ada yg kita rubah di String sql = "insert into anggota (idmember, firstname, lastname, address, telephone) values " + "('" + text_idmember.getText()+ "','" + text_firstname.getText()+ "', " + "'" + text_lastname.getText()+ "', '" + text_address.getText()+ "', " "'" + text_telephone.getText() + "')";

Script diatas perlu di sesuain formatnya dan juga perhatiin setiap ganti baris selalu diawali dengan tanda kutip…
Nama tabel Nama colom

Kutip selalu mengawali jika ganti baris

Nama JTextField1, 2, dst… Nama JTextField1, 2, dst…

Sekarang coba compile running satu-satu, tambah dulu biar ketauan errornya… kalo dah ga error lanjutin ke script button lainnya… Semua langkahnya sama dipersingkat aja ya yg dibahas… Jadi nanti button cari juga kaya gitu, sampe terakhir script keluar… Private void click_keluar (java.awt.event.ActionEvent.evt) { tambah(); } Scriptnya : void keluar() { System.exit(0); java.awt.EventQueue.invokeLater(new Runnable() { new public void run() { new FrmTool().setVisible(true); } }); } OKe dah selesai kalo gini… Sekarng coba Running program, uji semua buttonnya truz coba liat di pgAdmin III (postgreSQL) sesuai engga sama harapan kita…

21

Kita jalanin datanya… Klik tambah Kalo sukses di Netbeans Running bakalan tampil “Anda Sudah Memasukkan Data”

Sekarang coba liat di PostgreSQL seharusnya data kita udah masuk… Kalo enda masuk berarti masih ada yg salah di koneksi atw di scriptnya…

Huuuhhhh… Kelar juga ya JAVA GUI nya… Tapi ada tambahan lagi nih kita buat tampilan menu bar kaya di windows gitu… Mau coba atw istirahat dulu..??

22

MEMBUAT MENU BAR DI NETBEANS Sama kaya sebelumnya kita buat di Netbeans Design Sekarng klik source package com.perpustakaan klik kanan JFrameForm… Namain apa aja kaya FrmMenu… Bakalan muncul Form Design baru… Sekarang kita buat tampilan menu barnya… Caranya :

New

Liat di gambar.. Oia buat bikin hal ini kita butuh bantuan inspector, cara nampilinnya kalo ga ada klik menu bar window inspector… Kalo inspector dah kliatan muncul di [JFrame] kita klik kanan truz pilih Add From Palette Swing JMenuBar… Langsung klik aja nti secara otomatis bakalan tampil ga perlu di drag n drop…

23

Kalo udah kita drag n drop seharusnya bakalan muncul tampilan kaya gini..
Disini lgs di buat 1 JMenuBar tapi di dalamnya ada 2JMenu JMenu1 = File JMenu2 = Option Dalam tiap2 JMenu ada lagi pilihannya File input data Option Exit Kita liat ya caranya…

Pertama kita ke inspector lagi Klik [+] JFrame bakalan muncul JMenuBar1 klik kanan pilih Add JMenu… Kalo udah pilih ulangi lagi langkah diatas sampe ada 2 JMenu…

24

Kalo udah ada 2 JMenu kita konfigurasi lagi JMenunya..

Penjelasannya… Setelah kita punya 2 JMenu seperti gambar diatas yg dikotakin ijo… Kita klik kanan JMenu1 truz pilih properties… Stelah itu muncul kotak dialog properties, kalo kekecilan digedein aja kotak dialognya nanti bakalan muncul semua elemn2nya.. Trus pilih tab properties, klik […] pada text, setelah itu akan muncul kotak dialog baru yg judulnya JMenu1 [JMenu]- Text

25

Ganti Menu menjadi File setelah itu klik Oke… Sekarang coba liat tampilannya, sharusnya bakaln jadi kaya gini…
Nah ini baru ½ jadi perlu beberapa konfigurasi lagi… Sekarang kita buat pilihannya.. Semacam pull down gitu.. Jadi pas di teken menu File dia bakalan munculin menu dibawahnya lagi Kalo disini bakalan kita buat menu untuk masuk ke FrmAnggota kita yg dah selesai kita buat tadi Jd bentuknya File Input data

Caranya… Langkahnya klik kanan JMenu1 Add JMenuItem… Kalo berhasil bakalan keluar tampilan kaya dibawah ini…

Stelah itu klik kanan lagi jMenuItem1 yang baru aja Kita buat… Pilih Propertis lalu klik […] text untuk merubah Judul MenuItem…

26

Pilih text truz ganti text Item menjadi Input Data… Kalo udah selesai bakalan ada tmpilan yg mirip kaya dibawah ini…

Oke… Untuk JMenuItem yg kedua langkahnya sama kaya Yg pertama hanya kita rubah properties text Menjadi keluar.. Kalo dah tampil berarti selesai konfigurasi kita di Design sekarang kita masuk ke konfigurasi scriptnya

27

Langkahnya…

Mirip kaya langkah GUI Events… Disini kita panggil Events ActionPerformed untuk ngebuat script otomatis di Source Netbeans… Caranya klik kanan JMenuItem yg tadi kita rubah jadi Input Data.. Truz pilih Events Actions actionPerformed… Kalo kurang jelas liat tampilan diatas Sekarang kita bakalan dibawa ke source netbeans JMenuItem Input Data…

28

Oke kita lakuin hal yg serupa sama JMenuItem Keluar.. Kita klik kanan Events Action actionPerformed… Oke kalo udah baru kita masukin data script kita yg sesuai… private void jMenuItem1ActionPerformed(java.awt.event.ActionEvent evt) jMenuItem1ActionPerformed {//GEN-FIRST:event_jMenuItem1ActionPerformed // TODO add your handling code here: FrmAnggota objdata = new FrmAnggota(); objdata.setVisible(true); }//GEN-LAST:event_jMenuItem1ActionPerformed Kita masukin script yg warna biru ke source script JMenuItem input Data… Kalo buat JMenuItem keluar kita hanya tinggal menginput System.Exit(0); Oke, Sekarang kita bisa buka FrmMenu lalu klik File Stelah itu kita akan dibawa ke FrmAnggota… Nantinya kita bakalan bisa kaya gini…

truz klik Input Data,

Haaaaaaaaaaaaaaaaaahhhh…. Alhamdulillah, Akhirnya selesai juga langkah2ny.. Ga nyangka belajar Cuma 1 malem nulis langkah2nya bisa 2 harian…

29

Yaaahhh… Sgini-lah batesan yg gw tw… Kalo kliatan sok tau, maapin ya… Maklumin aja cz banyak kekurangan dimana-mana… Kalo langkahnya ada yg salah jgn lupa kasih tw gw juga ya… Segala kekurangan n kelemahan mohon dimaapin… Gud Lak deh… Mudah2an langkah2 ni bisa ngebantu buat lebih ngerti… Okeh.. Wassalamu’alaikm… Oia tolong di kasih tw yg laen y, yg pada belon ngerti… Script nya nanti gw lampirin di email…

30