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; ganti sesuai ama package
import java.sql.*; yg kita buat tadi...
import java.sql.DriverManager;
import java.sql.Connection; class di java yang perlu
import java.sql.SQLException; kita import supaya
perintah (script) yg kita
jalankan dapat terkoneksi
public class koneksi { dengan postgreSQL.

public koneksi() {
}
public Connection bukakoneksi()throws SQLException {

Connection con = null;

String loginUser = "postgres"; Ganti jika diperlukan
String loginPasswd = "admin"; Sesuaikan dgn
String loginUrl = "jdbc:postgresql://localhost:5432/perpustakaan";
database yg kita buat...
try
{
Class.forName("org.postgresql.Driver");
con = DriverManager.getConnection(loginUrl, loginUser,
loginPasswd);
return con;
} Kalo ini keluar di hasil
catch (SQLException se) runningan kita pas waktu
{
ngejalanin java gui berarti
System.err.println("Tidak Ada Koneksi yang Terbuka");
return null; Library kita masih belom
} di connectin atw salah
catch (Exception ex) pilih…
{
System.err.println("Tidak Dapat Membuka Koneksi");
return null; 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 button-
button 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 script-
nya… 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

Nama JTextField1, 2, dst…
Kutip selalu
mengawali jika Nama JTextField1, 2, dst…
ganti baris

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
new Runnable() {
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  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…

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

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