Where the idea meets creativity

1

Where the idea meets creativity

2

Sekedar nyoba-nyoba aja sob, gimana sih bikin sebuah form pendaftaran gitu di java, tapi yang gak sekedar nyoba-nyoba #maksudnya?. Yaaa istilahnya kan biasanya form sign up gitu, bener gak ? :p Nah sambil nunggu cucian kering di luar, gimana kalo kita nyoba nyoba-nyoba bikin yuk sob! :D

Desain GUI Yap, pertama kita coba bikin desain guinya dulu sob. Bikin desainnya di project yang udah dibikin di komputer masingmasing ya, udah tau kan cara bikin project? Tau gak? :B Hahaha, yaudah pertama bikin project dulu dah!

Desain GUI bikin project Klik aja icon new project di pojok kiri atas tuh, bisa juga pake kombinasi tombol Ctrl + Shift + N, pada keyboard.

Terus pilih Java Application.

Kalo udah kepilih klik aja Next. Terus kasi nama projectnya, misal ane kasi nama TheZogank, buset gaya sekalee ;}


3

Klik Finish kalo udah sob. Sekarang kita bikin packagenya. Kalo bikin package pasti udah tau semua kan? B) Tinggal klik kanan pada project yang dibuat tadi terus pilih New dan klik Java Package.

Kasi nama yang keren sob packagenya, misal ane kasi nama zoganksytem, hahaha.. 8D

Klik Finish kalo udah sampai, ehh kalo udah selesai maksudnya.


4

Desain GUI Woeetss.. sekarang waktunya kita desain guinya sob. Pada package yang sudah tercipta tadi, aseek bahasanya baku banget. Yap klik kanan aja pada package yang udah dibuat barusan tuh, terus pilih New dan klik JFrame Form.

Sekarang giliran loe sob, kasi nama tuh JFrame Form. Jangan tanya ane ngasi nama apa, soalnya ane cuman ngasi nama index aja sob, wkwkwk ;D

Udah gak sob ? Sekarang pertama-tama kita nyoba desain background guinya sob. Caranya klik kanan pada JFrameForm nya, terus pilih Set Layout dan klik Null Layout.


5

Akan keluar null layout pada inspector JFrame.

Kemudian tambahkan Jlabel ke Form sob, buat ntar jadi gambar backgroundnya.

Oh

yaa,

ganti

nama

variable

itu

jadi

background, buat ngemudahin kita sob.

Klik tombol OK kalo udah. Terus di properties label tadi, klik kotak icon.

Akan keluar jendela dimana kita nyari gambar untuk icon label, yang kita manipulasi jadi latar belakang form nantinya.


6

Klik tombol Import to Project, dan cari gambar yang akan dijadikan sebagai background.

Klik Next sob, terus klik Finish, dilanjut klik OK. Akan keluar gambarnya nutupin label barusan sob.


7

Nah sekarang kita atur ukuran JFrameForm-nya .. Caranya,

ganti

ukuran

panjang

lebarnya

di

properties

JFrameForm-nya pada bagian minimumSize.

Ini

isinya

terserah

lo

sob,

jadi

intinya

ukuran

yang

dimasukkan nanti itu ukuran yang keluar pas di running. Misal ane masukin kayak gambar dibawah.


8

Hasilnya nanti akan berubah di propertiesnya.

Terus di JFrameFormnya atur dah ukuran kira-kiranya panjang dan

lebar

sesuaikan

dengan

ukuran

yang

di

masukkan

minimumSize barusan. Misal nih punya ane kayak gini ..


di

9

Oh iyaa, sampe’ lupa.. Kita kosongin dulu text yang ada pada label yang sekarang udah jadi gambar. Caranya klik aja gambarnya, terus pada properties bagian text kita hapus isinya.

Oke masalah background form tuntas. Sekarang isinya! Tambahkan beberapa label, yang dibutuhkan. Bisa keliatan gak labelnya ? gak bisa ya ? kalo ada yang bisa berarti AJAIB tuh programnya, wkwkwk :p Nah sob, labelnya otomatis akan gak keliatan seperti ini.

Itu

karena

dia

ada

di

belakang

background

yang

dibuat

sebelumnya tadi. Biar keliatan kan pastinya ada dua cara kalo gak labelnya yang keatas, backgroundnya yang kebawah. Ya gak ? Yaudah labelnya aja yang kita naikin! Caranya sob, lihat pada inspector, yang gak punya inspector cara manggilnya klik menu Window > Navigating > Inspector.


10

Biasanya akan keluar disebelah layar monitor. Nah lihat disitu, labelnya ada di bawah background.

Sekarang kita naikin labelnya, caranya klik kanan pada label tersebut, terus pilih Move Up, awas jangan sampe pilih Move On yaaa .. :D

Dan label tersebutpun akan naik sesuai perintah kita, hahahaha (>_<)


11

Sesuaikan

labelnya

dengan

kebutuhan

misalkan

untuk

judul

program, dan untuk memberikan keterangan pada textfield nanti.

Tuuh contohnya diatas tuh, kasi warna putih biar keliatan soalnya backgroundnya agak gelap ane. Sekarang tambahkan beberapa textfield sebagai inputan nanti. Misal untuk inputan User Name nanti.


12

Jangan lupa di naikin ya sob, diatas background biar keliatan. Kosongin teks pada textfield itu, dan kalo mau variasi atau ganti warna bisa diganti di propertiesnya sob, misalkan ane mau

ganti

warna

hitam.

Klik

pilihan

background

pada

propertiesnya terus akan keluar banyak pilihan warna, ganti warna yang diinginkan lalu klik OK.

Hasilnya sob.


13

Sampai disini ada yang mau nanya? Angkat tangan kalo mau nanya sob. Gak ada yang mau nanya neh? Oke berarti semuanya paham. :> Lanjut

sekarang

tambahkan

lagi

beberapa

textfield

untuk

inputan Email dan Full Name. Hasilnya kayak gini.

Kalo

untuk

password,

JPasswordField.

kita

Yaudah

gak

pake

sekarang

JTextField

tambahin

tapi

pake

2

buah

aja

PasswordField untuk inputan Password sama RePassword.


14

Yaah kalo udah dimasukin, di desain persis sama kayak text fieldnya ya sob. Terakhir sebagai inputan jenis kelamin, kita gunakan anu, emm apa namanya? Combo Box, yaah pake itu.

Untuk mengisi pilihan pada combo box, caranya klik pilihan model pada propertiesnya combo box si itu.

Terus isikan pilihannya sob, misal kaya gini.


15

Sekarang

ganti

nama

variable

masing-masing

textfield,

passwordfield, sama comboboxnya sob, untuk memudahkan kita nantinya. Kalo ane ganti nama variablenya kayak gini sob.

box_username box_email box_fullname box_password box_repassword combobox_sex

Udah tau cara ganti nama variable kan sob? Cara paling cepetnya, klik kanan pada field terus pilih Change Variable Name.

Kalo udah, ganti dah nama variablenya.


16

Terus klik OK kalo udah selesai. Okesip, sekarang kita tambahkan button atau tombol. Sebagai

variasi,

kali

ini

ane

gak

pake

JButton

sebagai

tombolnya, tapi ane pake JLabel. Caranya

sama kayak

kita memasukkan

background tadi,

yaitu

masukkin label di form terus, ganti iconnya dengan gambar tombol yang kita mau. Hasilnya gini sob.

Sedikit lagi untuk desainnya, kita tambahkan 2 label dah ya. Satunya

untuk

pesan

error

kalo

satunya lagi sebagai jam, hehe.


ada kesalahan

nanti,

sama

17

Label pertama yang sebagai jam, kita tempatkan pada pojok kanan atas, terus ganti nama variablenya jadi labeljam.

Label yang kedua, kita tempatkan pada samping tombolnya. Berikan label tersebut warna merah, dan ukurannya di besarkan.

Emm, ganti posisinya sob. Maksudnya posisi label itu diganti jadi rata kanan. Ganti horizontalAlignmentnya jadi RIGHT.


18

Setelah itu ganti nama variablenya sob, jadi label_error.

Terus pada labelnya kita panjangkan aja areanya.

Kalo udah klik kanan pada label, terus pilih Edit Text.

Terus hapus teks, pada labelnya, sehingga labelnya gak ada tulisannya.


19

Oke desainnya selesai, hasilnya kayak gini.

KONEKSI DATABASE Oke, sebelum kita koneksikan java gui kita sama database, kita bikin dulu databasenya sob. Ane contohin kalo bikin database di MySQL aje yeee. Misal ane bikin database namanya jac, terus table namanya t_member. Gak perlulah dikasi tau cara bikin databasenya yaa, pasti udah tau, kalo belum tau coba deh tanya om google :D Terus

pada

table

t_member

lengthnya seperti ini :


kita

isikan

field,

type

,

dan

20

Pada

field

user_name,

jadikan

Primary

Key

biar

nama

user

pendaftar itu gak boleh sama.

Kembali ke NetBeans masing-masing. Untuk mengkoneksikan gui kita dengan database, kita perlukan sebuah library sql connector. Kalo gak punya minta di lab yaa :> Kalo udah punya sekarang kita masukin di library project kita, caranya

klik

kanan

pada

library

kemudian

Jar/Folder.

Pilih sql connectornya, dan klik tombol open.


pilih

Add

21

Kalo udah sob, muncul penampakan kayak gini.

Sip sip, untuk sementara udah beres semua.

SOURCE CODE Untuk menambakan script-script pada program, masuk kebagian Source pada gui.

Pertama kita importkan beberapa library yang kita butuhkan berikut. import java.sql.*; import javax.swing.*; import java.awt.event.*;


22

import java.util.Date; import java.awt.*;

Biar gak bingung taruh dimana, letakkan aja persis dibawah nama packagenya. Kalo udah, sekarang kita masukkan beberapa nama method yang nantinya program

akan di

kita

run.

buat

dan

Masukkan

di

jalankan

nama-nama

method

langsung

ketika

tersebut

pada

constructornya. Letakkan persis di bawah initComponents();. koneksi(); jamjam(); setLocationRelativeTo(this);

Pada script diatas, koneksi(); merupakan method yang nantinya kita fungsikan untuk menghubungkan dengan database. Kemudian jamjam(); kira-kira apa? Hahaha, yaa benar buat jam yaa :p *ngikutdora* Nah

script

yang

ini

:

setLocationRelativeTo(this);,

itu

fungsinya biar form kita nanti pas pertama di jalanin itu munculnya di tengah layar monitor, bukan di pojok kiri lagi seperti pada defaultnya. Di

bawah

konstruktor

ini,

kita

tambahkan

beberapa

script

konstanta, seperti berikut. private Connection konek; private Statement eksekusi; private ResultSet res;

Taruh dibawah konstruktornya yaa, bukan di dalamnya. Sekarang

kita

buat

method

scriptnya.


koneksinya

sob,

kayak

gini

neh

23

public void koneksi() { try { Class.forName("com.mysql.jdbc.Driver"); konek =DriverManager.getConnection ("jdbc:mysql://localhost/jac","root",""); eksekusi = konek.createStatement(); } catch (Exception e){ JOptionPane.showMessageDialog (null, "Web Server Not Actived Yet", "JAC Error", JOptionPane.ERROR_MESSAGE); } }

Sebelum kita ke script utamanya sob, tambahin dululah method yang agak kurang penting wkwk. Misalkan script method buat jam ini. Yang ane buat sob, yang formatnya 12 jam, jadi ada AM, sama PM nya sob. public void jamjam() { // ActionListener untuk Keperluan Timer ActionListener taskPerformer = new ActionListener() { public void actionPerformed(ActionEvent evt) { String nol_jam = ""; String nol_menit = ""; String nol_detik = ""; // Membuat Date Date dt = new Date(); // Mengambil nilaj JAM, MENIT, dan DETIK Sekarang int nilai_jam = dt.getHours(); int nilai_menit = dt.getMinutes(); int nilai_detik = dt.getSeconds(); // Jika nilai JAM lebih kecil dari 10 (hanya 1 digit) if (nilai_jam <= 9) { // Tambahkan "0" didepannya


24

nol_jam = "0"; } // Jika nilai MENIT lebih kecil dari 10 (hanya 1 digit) if (nilai_menit <= 9) { // Tambahkan "0" didepannya nol_menit = "0"; } // Jika nilai DETIK lebih kecil dari 10 (hanya 1 digit) if (nilai_detik <= 9) { // Tambahkan "0" didepannya nol_detik = "0"; } String anu; //nah ini biar formatnya 12 jam sob if (nilai_jam > 12){ nilai_jam -= 12; anu = "PM"; }else{ anu = "AM"; } // Membuat String JAM, MENIT, DETIK String jam = nol_jam + Integer.toString(nilai_jam); String menit = nol_menit + Integer.toString(nilai_menit); String detik = nol_detik + Integer.toString(nilai_detik); // Menampilkan pada Layar labeljam.setText("

" + jam + " : " + menit + /*" : " + detik + */"

"+ anu);

} }; // Timer new Timer(1000, taskPerformer).start(); }

Pas nampilin jamnya di layar, ane hilangkan detiknya sob, kalo lo maunya di tampilin, tinggal hilangin komentar pada detiknya yang ada pada set nampilin jam di layar itu.


25

analisa Oke sob, sebelum kita kasi script pada masing-masing kotak isian yang ada pada form kita, kita analisa dulu apa yang kira-kira dibutuhin dan apa yang kira-kira menjadi masalah pas user sign-up nanti. Biar-biar program kita bener-bener user friendly, hehe semoga.. Misal

kita

buat

variable untuk

ngambil

inputan

seperti ini: String un = box_username.getText();//1 String em = box_email.getText();//2 String fn = box_fullname.getText();//3 String pw = new String(box_password.getPassword());//4 String rpw = new String(box_repassword.getPassword());//4 String sex =(String)combobox_sex.getSelectedItem();//5


dari

user

26

Analisa pertama sob, inikan masing2 field harus diisi, jadi gak boleh kosong. Jadi jika user tidak mengisi salah satu field akan keluar penampakan error sob. Kira-kira kayak gini if(un.equals("")||em.equals("")||fn.equals("")||pw.equals("") ||rpw.equals("")||sex.equals("- Select Sex -")) { label_error.setText("There is an empty box."); }

Analisa kedua, bikin sebuah penampakan error kalo si user masukin password tidak sama pas di suru masukin lagi tuh password di kotak ‚RePassword‛. if (!pw.equals(rpw)){ label_error.setText("Password don't match."); }

Analisa

ketiga,

kalo

si

user

nginputin

nama,

email,

dan

sebagainya itu melebihi dari kapasitas yang udah kita sediain di database sob.

Jadi kita harus batasi maksimal karakter yang akan di inputkan si user sob, dengan menghitung jumlah karakter yang diinputkan dengan fungsi string length(). if(un.length()>20){ label_error.setText("Username is too long."); }else if(em.length()>50){ label_error.setText("Email is too long."); }else if(fn.length()>100){


27

label_error.setText("Full Name is too long."); }else if(pw.length()>20){ label_error.setText("Password is too long."); }

Analisa penting keempat, email itu bentuknya gimana sob? Misalnya kayak gini kan : [email protected] ? Syaratnya apa ? - Harus ada @ - Harus ada . (dot) Jadi bisa kita bikin script kayak gini donk : if(!em.contains("@") || !em.contains(".")){ label_error.setText(em + " is not a valid email"); }

Kita

bisa

memaanfaatkan

fungsi

string

contains(),

yang

berfungsi untuk mencari karakter/kata di dalam kalimat string. Pada script itu kita hanya mengecek email yang benar dengan mencari ‚@‛ sama ‚.‛. Nah sekarang gimana kalo si user itu menginputkan email kayak gini : - zogank@[email protected] Itu alamat email yang benar gak ? gak kan ? atau si user inputin email kayak gini : - @zogank.com - [email protected] Atau bahkan si user cuman menginputkan email kayak gini - @. Itu akan dianggap benar sama script yang kita pake, soalnya kan dia cuman nyari ‚@‛, sama ‚.‛, udah gitu aja. Terus gimana donk ? Nahh ,, buat yang belum tau ~ Ane perkenalkan REGEX, jeng jeeeng~~ :D


28

Regex itu adalah metode yang di pake untuk nyari sebuah pola pada string. Jadi kita bisa mengatur sebuah pola pada string, misalkan pada email bisa kita atur polanya seperti terdapat sebuah kata pada awal string

bentuknya adalah kumpulan huruf

(a-z) atau angka (0-9) kemudian setelahnya bisa ditambahkan underscore

titik

dll

seperti

pola

email

pada

umumnya

dilanjutkan dengan tanda ‚@‛ dan kemudian kumpulan karakter lagi

untuk

domain

email.

Dari

hasil

pembentuka

pola

itu

didapatkan pola Regex seperti berikut : String emailRegex = "^([a-z0-9\\+_\\-]+)(\\.[a-z0-9\\+_\\-]+)*@([az0-9\\-]+\\.)+[a-z]{2,6}$";

Untuk mengambil kode-kode pada pola tersebut berikut table aturan dasarnya:


29

Sumber table : bisakomputer.com

Okesip,

sekarang

analisa

terakhir,

yaitu

apabila

user

memasukkan nama user_name yang sama lebih dari sekali maka akan error, karena pada database tadi user_name sudah di set menjadi primary key. Disini ane mikir karena kesalahan yang bisa terjadi pada database

cuman itu, maka ane letakkan pesan

error nya pada catch di dalam try-catch input ke database. Dari semua analisa yang kita lakukan di atas, tercipta script berikut yang bisa kita namakan method signup. public void signup(){ String un = box_username.getText(); String em = box_email.getText();


30

String fn = box_fullname.getText(); String pw = new String(box_password.getPassword()); String rpw = new String(box_repassword.getPassword()); String sex =(String)combobox_sex.getSelectedItem(); String emailRegex = "^([a-z0-9\\+_\\-]+)(\\.[a-z0-9\\+_\\-]+)*@([a-z0-9\\]+\\.)+[a-z]{2,6}$"; if(un.equals("")||em.equals("")||fn.equals("")||pw.equals("") ||rpw.equals("")||sex.equals("- Select Sex -")){ label_error.setText("There is an empty box."); }else if(un.equals("zogank")){ label_error.setText("UserName already in use."); }else if (!pw.equals(rpw)){ label_error.setText("Password don't match."); }else if(un.length()>10){ label_error.setText("Username is too long."); }else if(em.length()>50){ label_error.setText("Email is too long."); }else if(fn.length()>100){ label_error.setText("Full Name is too long."); }else if(pw.length()>20){ label_error.setText("Password is too long."); }else if(!em.matches(emailRegex)){ label_error.setText(em + " is not a valid email"); }else { try{ String query = "INSERT INTO `jac`.`t_member` (ùser_name` ,èmail` ," + "`full_name` ,`password` ,`sex`,àccess`)" + "VALUES ('"+un+"','"+em+"','"+fn+"','"+rpw+"','"+sex+"','user');"; eksekusi.executeUpdate(query); eksekusi.close(); //JOptionPane.showMessageDialog(null,"Berhasil Memasukan Data"); int done = JOptionPane.showConfirmDialog(null, "Welcome " +box_username.getText()+". Sign In Now ?", "JAC Welcome",JOptionPane.YES_NO_OPTION);


31

if (done == 0) { new sign_in().setVisible(true); this.setVisible(false); }else{ //reset(); this.setVisible(false); new index().setVisible(true); } }catch(Exception e){ label_error.setText("UserName already in use."); } } }

Bisa lo copy ke project lo sob. O iya pada script di atas, ane tambahin script ini : if(un.equals("zogank")){ label_error.setText("UserName already in use."); }

Karena ane gak mau ada user yang namanya ‚zogank‛ selain ane , hahahaha XD Pada script querynya, untuk kolom access ane kasikan secara otomatis ‚user‛ sob. String query = "INSERT INTO `jac`.`t_member` (ùser_name` ,èmail` ," + "`full_name` ,`password` ,`sex`,àccess`)" + "VALUES ('"+un+"','"+em+"','"+fn+"','"+rpw+"','"+sex+"','user');";

Jadi siapun yang daftar pada form ini aka langsung memiliki akses sebagai user biasa. Satu lagi sob pada script ini : int done = JOptionPane.showConfirmDialog(null, "Welcome " +box_username.getText()+". Sign In Now ?", "JAC Welcome",JOptionPane.YES_NO_OPTION);


32

if (done == 0) { new sign_in().setVisible(true); this.setVisible(false); }else{ //reset(); this.setVisible(false); new index().setVisible(true); }

Jika user itu sudah mendaftaran tanpa error atau bisa dibilang sukses gitu sob, maka akan keluar kotak dialog berhasil, dan usernya ditanya mau sign in apa kagak, jika iya maka akan dijalankan kondisi ‘if (done == 0)’ itu sob yaitu akan keluar form sign_in()*. Tapi kalo usernya pilih pilihan NO, maka form signup akan restart. *form sign_in belum kita bikin dibuku ini, bersambung di buku 2.

Kembali ke tab design sob.

Sekarang

kita

panggil

terdapat

pada

form.

method

Karena

signup(),

tombol

yang

pada

tombol

kita

gunakan

yang itu

bukanlah JButton yang udah disediain sama java, melainkan kita pake label. Maka caranya ngasi scriptnya adalah, klik kanan pada label button itu, kemudian pilih Events terus Mouse dan klik pilihan mouseClicked .


33

Tuliskan nama method tadi yakni : signup(); Lakukan hal yang sama seperti langkah diatas pada semua field.

Dan berikan script ini:


34

label_error.setText(""); Jadi ketika terdapat pesan error pada form, akan hilang ketika mengklik salah satu dari field tersebut. Udah jadi sob .. uyeeee :D

Uji program Oke, sekarang kita uji program ini sob, bisa gak yaa.. :p Uji 1. Inputan Coba jalanin programnya sob terus kita daftarkan sebuah user, eh seorang user sob.

Setelah menekan tombol signup-nya akan keluar dialog box.


35

Jika memilih YES, maka akan ke form SignIn, jika memilih NO maka form SignUp akan restart. Dan data user telah tersimpan, mari kita cek pada database.

Uji 2. Inputan Kosong Jika kita menginputkan tidak lengkap pada semua atau salah satu field, maka akan keluar pesan error seperti berikut.

Atau kita lupa memilih jenis kelamin pada ComboBox seperti berikut :


36

Uji 3. Inputan Password dan RePassword Tidak Sama Misalkan kita menginputkan password : 12345 , dan repassword : 123.


37

Uji 4. Inputan Username Yang Sudah di Gunakan Kita coba isikan lagi user name : udin, yang udah ada dalam database, walaupun dengan biodata yang berbeda.

Uji 5. Inputan Penulisan Email Yang Salah Ini kita uji, rumus regex kita berhasil apa gak.


38

Atau ini,

Tuntas sob, hehe :3 Sekarang kita udah biking form SignUp walau masi nyoba-nyoba semoga entar bisa lebih baik, makin banyak masalah yang bisa dipecahkan. Ntar lanjut di buku selanjutnya ;D Oke sob .. bye~~


39

Ngoding holic Buku ini kalo lo mau copy gak apa-apa sob, asal kasi sumbernya yee ..

Kalo ada kesalahan ketik atau ejaan itu semua salah keyboard.

Kalo mau nanya-nanya silahkan datang ke Lab.RPL langsung sob.

Saran berbentuk apapun ( kalimat, puisi, pantun, lagu, kue) kirim aja ke [email protected]


40


Where the idea meets creativity

Recommend Documents