1

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…

2

Klik kanan pada folder database kaya yang ditunjukkin gambar diatas, truk klik NEW DATABASE… 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…

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

3

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…

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…

4

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…

5

2. NETBEANS CONFIGURATION

Gambar tampilan PostgreSQl yang databasenya dah kelar dibuat

6

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’…

7

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

8

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…

9

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…

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

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

10

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

11

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; 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 sesuai ama package yg kita buat tadi... class di java yang perlu kita import supaya perintah (script) yg kita jalankan dapat terkoneksi dengan postgreSQL. 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..

12

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

13

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

14

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)…

15

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… Begitu seterusnya… klik JTextField2 truk klik Tab Code ganti variable namenya sesuai ama kebutuhan kita (dalam hal ini JTextField2 = Nama Depan) dst… sampe JTextField5…

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

16

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…

17

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…

18

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…

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…

Script button tambah otomatis yg dibuat netbeans…

Ga usah dihirauin, Cek dulu scriptnya terus balik lagi ke tab design buat konfigurasi button-button berikutnya…

19

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]

Ini Cuma sekedar comment yg gw buat untuk nandain kalo dibawah ini tu script ending/ terakhir

Script ending (akhir) otomatis yg dah dibuat netbeans…

Dari baris yg ijo eni kita bakalan masukin script yg dibutuhin (script kita sendri)… Jadi disini intinya badan/inti script-nya… kita masukin setelah deklarasi script button, sebelum script ending (diantaranya)

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

20

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..

21

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 Script diatas perlu di sesuain formatnya dan juga perhatiin setiap ganti baris selalu diawali dengan tanda kutip…

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 voidPrivate voidPrivate voidPrivate void click_keluarclick_keluarclick_keluarclick_keluar (java.awt.event.ActionEvent.evt) { ttttambah();ambah();ambah();ambah(); } Scriptnya : voidvoidvoidvoid keluar()keluar()keluar()keluar() { System.exit(0);System.exit(0);System.exit(0);System.exit(0); java.awt.EventQueue.invokeLater(newnewnewnew Runnable()Runnable()Runnable()Runnable() { public void run() void run() void run() void run() { new FrmTool().setVisible(true);new FrmTool().setVisible(true);new FrmTool().setVisible(true);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…

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() + "')";

Nama tabel Nama colom

Nama JTextField1, 2, dst…

Nama JTextField1, 2, dst… Kutip selalu mengawali jika

ganti baris

22

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..??

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…

23

MEMBUAT MENU BAR DI NETBEANS

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

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…

24

Kalo udah kita drag n drop seharusnya bakalan muncul tampilan kaya gini..

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…

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…

25

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

26

Ganti Menu menjadi File setelah itu klik Oke… Sekarang coba liat tampilannya, sharusnya bakaln jadi kaya gini… Caranya… Stelah itu klik kanan lagi jMenuItem1 yang baru aja Kita buat… Pilih Propertis lalu klik […] text untuk merubah Judul MenuItem…

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

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

27

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

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

28

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…

29

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 voidprivate voidprivate voidprivate void jMenuItem1ActionPerformedjMenuItem1ActionPerformedjMenuItem1ActionPerformedjMenuItem1ActionPerformed(java.awt.event.ActionEvent evt) {//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 � truz klik Input Data, Stelah itu kita akan dibawa ke FrmAnggota… Nantinya kita bakalan bisa kaya gini… Haaaaaaaaaaaaaaaaaahhhh…. Alhamdulillah, Akhirnya selesai juga langkah2ny.. Ga nyangka belajar Cuma 1 malem nulis langkah2nya bisa 2 harian…

30

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…