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 masing- masing 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 ;}
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.
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.
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.
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.
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.
Hasilnya nanti akan berubah di propertiesnya.
Terus di JFrameFormnya atur dah ukuran kira-kiranya panjang dan lebar sesuaikan dengan ukuran yang di masukkan di minimumSize barusan. Misal nih punya ane kayak gini ..
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.
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 (>_<)
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.
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.
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, kita gak pake JTextField tapi pake JPasswordField. Yaudah sekarang tambahin aja 2 buah PasswordField untuk inputan Password sama RePassword.
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.
Sekarang ganti nama variable masing-masing textfield, passwordfield, sama comboboxnya sob, untuk memudahkan kita nantinya. Kalo ane ganti nama variablenya kayak gini sob.
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.
box_username box_email box_fullname
box_password
box_repassword combobox_sex
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 ada kesalahan nanti, sama satunya lagi sebagai jam, hehe.
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.
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.
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 kita isikan field, type , dan lengthnya seperti ini :
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 pilih Add Jar/Folder.
Pilih sql connectornya, dan klik tombol open.
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.*;
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 akan kita buat dan di jalankan langsung ketika program di run. Masukkan nama-nama method 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 koneksinya sob, kayak gini neh scriptnya.
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
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.
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 dari user 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
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){
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 : zogank20@gmail.com ? 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@zogank@zogank.com
Itu alamat email yang benar gak ? gak kan ? atau si user inputin email kayak gini :
- @zogank.com - zogank@.com
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
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\\+_\\-]+)*@([a- z0-9\\-]+\\.)+[a-z]{2,6}$";
Untuk mengambil kode-kode pada pola tersebut berikut table aturan dasarnya:
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();
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` (`user_name` ,`email` ,"
+ "`full_name` ,`password` ,`sex`,`access`)"
+ "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);
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` (`user_name` ,`email` ,"
+ "`full_name` ,`password` ,`sex`,`access`)"
+ "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);
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 method signup(), pada tombol yang terdapat pada form. Karena tombol yang kita gunakan 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 .
Tuliskan nama method tadi yakni : signup();
Lakukan hal yang sama seperti langkah diatas pada semua field.
Dan berikan script ini:
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.
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 :
Uji 3. Inputan Password dan RePassword Tidak Sama
Misalkan kita menginputkan password : 12345 , dan repassword : 123.
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.
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~~
