Sudah tidak asing lagi ya dengan
aplikasi Netbeans? Selain bisa untuk membuat program dengan bahasa pemrograman
Java, Netbeans juga mendukung banyak bahasa pemrograman seperti HTML5, PHP, C,
C++ bahkan Android.
Nah, pada kesempatan kali ini
saya akan membagikan cara membuat form login terlihat keren dan simple
minimalis.
Baca juga:
Kamu pasti bosen jika membuat tampilan login hanya dengan
komponen-komponennya yang terlihat seperti ini kurang lebih:
Atau kamu ingin membuatnya lebih
keren atau wah dibanding seperti itu?
Login adalah form yang dibuat
untuk mengamankan program dari orang yang tidak memiliki hak akses didalamnya.
Dengan form login, program yang kita buat tidak mudah bahkan tidak bisa diakses
oleh orang lain. Karena prinsip login adalah, jika username dan password benar
maka masuk, jika tidak keluar dari program.
Oke, sebelum kita lanjutkan. Bagi
yang bertanya-tanya, sebenarnya yang mau kita buat ini form yang seperti apa
sih? Baiklah saya berikan screenshotnya digambar dibawah ini:
Nah jadi form login yang seperti
itu yang akan kita buat. Terlebih lagi form tersebut akan menjadi lebih wah
lagi jika kamu desain dengan sebagus-bagusnya. Saya hanya memberikan tutorial
bagaimana cara membuatnya. Desainlah sendiri jika ingin sesuai selera. Tapi
untuk kali ini, ikuti saja dulu.
Oke, mari kita mulai. Yang
pertama kamu harus sudah menginstal aplikasi Netbeans di komputermu. Disini
saya pakai Netbeans 8.1. Kemudian download peralatan perangnya dibawah ini:
Sudah? Mari kita mulai perangnya wkwk. Ada kopi siapkan kopi biar enjoy, ada bandrek? Jangan lupa bagi ke saya hehe.
Langkah 1...
Ekstrak file yang sudah
didownload tadi
Langkah 2...
Buka Netbeans nya, dan buat projek baru dengan nama “LoginMetroUI” tanpa kutip
Langkah 3...
Kemudian buat Jframe baru dengan
mengklik kanan package LoginMetroUI
(dibawah Source Packages) pilih New dan Jframe Form... buat saja nama
Jframe nya UI
Langkah 4...
Kemudian pada Navigator klik kanan Jframe pilih Set Layout kemudian pilih Null Layout.
Jika Navigatormu tidak muncul
silahkan aktifkan di menu Window>Navigator
(Ctrl+7)
Langkah 5...
Pada Properties, centang undecorated
untuk menghilangkan tombol minimize,maximize dan exit
Langkah 6...
Kemudian pada Properties Code, ubah Form Size Policy dari Generate Pack() ke Generate Resize Code. Kemudian pada Form Size nya isi dengan [680,
566] begitu juga di Designer Size -ini
berfungsi untuk merubah ukuran form sama dengan ukuran gambar loginnya- Lalu
centang Generate Center untuk membuat
Formnya selalu ditampil di tengah-tengah layar (langkah ini masih berada di
Properties Code)
Langkah 7...
Beralih ke Properties kemudian ubah juga menjadi 680, 566 pada preferredSize.
Nah jika sudah, bagi kamu kedapatan tampilannya menjadi kecil sekali, cobak
kamu closekan form ui nya (pastikann di save dulu) dan buka kembali.
Langkah 8...
Ambil label baru, dan ukurannya sama kan dengan ukuran formnya.
Hilangkan juga teks labelnya yaa. Ubah variabel name nya menjadi labelBg
Langkah 9...
Jika sudah, klik kanan pada package LoginMetroUI>New>Java
Package>Buat namanya menjadi “img”
Langkah 10...
Ke folder ekstrakan tadi, yang
kamu lakukan pada langkah pertama. Pilih semua gambar yang ada di folder tersebut, kemudian drag ke package img yang sudah
kita buat barusan
Langkah 11...
Klik labelBg, kemudia pada Properties pilih icon dan browse (tanda titik 3 disebelah kanan icon)
Langkah 12...
Kemudian pada Package pilih folder img dan pada File pilih loginmember.png,
klik OK
Langkah 13...
Jika sudah, buat label baru tepat di sebelah
kanan atas labelBg
Langkah 14...
Jika labelnya tidak kelihatan,
silahkan pergi ke navigator, dan turunkan labelBg
ke bawah label baru yang kita buat barusan
Langkah 15...
Hapus teks label barunya dan
ganti variabel namenya menjadi “tblExit”
Langkah 16...
Kemudian pada Properties>icon pilih close.png (caranya sama seperti langkah
12, hanya gambar yang berbeda)
Langkah 17...
Buat label baru lagi letakkan
dibawah username dan password. Buat panjang labelnya yaa. Hapus teks labelnya
dan ubah nama variabelnya menjadi tblLogin
Langkah 18...
Pada icon, sama seperti langkah 12, pilih gambarnya menjadi login.png , jika tidak kelihatan
labelnya kenavigator naikkan label nya di atas labelBg -begitu seterusnya pada
komponen-komponen selanjutnya-
Langkah 19...
Masukkan TextField, taruh pas di kotak username.
Hapus teksnya dan beri variabel dengan nama txtUser
Langkah 20...
Masukkan Password Field, letakkan pada kotak password. Hilangkan teksnya dan ubah variabel name menjadi txtPass. Desain menjadi seperti ini:
Langkah 21...
Sekarang, kita ubah textfield dan password field menjadi transparan. Caranya, blog textfield dan password field menggunakan tombol Shift. Kemudian pada properties pilih Border>No Border. Kemudian pada opaque hilangkan centangnya
Langkah 22...
Kemudian kita ke coding yahh...
Klik source
Masukkan coding dibawah ini:
int dragxmouse;
int dragymouse;
Tepat dibawah public
class UI extends javax.swing.JFrame {
Langkah 23...
Masukkan koding dibawah ini:
this.setBackground(new Color(0,0,0,0));
Tepat dibawah public
UI() {
initComponents();
Langkah 24...
Kemudian klik labelBg pada Navigator. Kemudian klik kanan pilih Events>Mouse Motion>Mouse Dragged
Masukkan koding dibawah ini:
int x = evt.getXOnScreen();
int y = evt.getYOnScreen();
this.setLocation(x-dragxmouse,y-dragymouse);
System.out.println(x+","+y);
Langkah 25...
Klik lagi labelBg pada Navigator,
kemudian klik kanan pilih Events>Mouse>Mouse
Pressed
Masukkan koding dibawah ini:
dragxmouse = evt.getX();
dragymouse = evt.getY();
Pastikan pada koding import
(paling atas) sama seperti ini:
import java.awt.Color;
import javax.swing.ImageIcon;
import javax.swing.JOptionPane;
Langkah 26...
Pada tblExit klik kanan, kemudian pilih Events>Mouse>Mouse Clicked
Masukkan koding dibawah ini:
this.dispose();
Langkah 27...
Kemudian lakukan lagi pada tblExit klik kanan, pilih Events>Mouse>Mouse Entered
Masukkan koding dibawah ini:
ImageIcon
formUI = new ImageIcon(getClass().getResource("images/closeho.png"));
tblExit.setIcon(formUI);
Langkah 28...
Masih pada tblExit, pilih Events>Mouse>Mouse
Exited
Masukkan koding dibawah ini:
ImageIcon formUI = new ImageIcon(getClass().getResource("images/close.png"));
tblExit.setIcon(formUI);
Langkah 29...
Masih pada tblExit, pilih Events>Mouse>Mouse
Pressed
Masukkan koding dibawah ini:
ImageIcon formUI = new
ImageIcon(getClass().getResource("images/closec.png"));
tblExit.setIcon(formUI);
Langkah 30...
Masih pada tblExit, pilih Events>Mouse>Mouse
Released
Masukkan koding dibawah ini:
ImageIcon formUI = new
ImageIcon(getClass().getResource("images/close.png"));
tblExit.setIcon(formUI);
Langkah 31...
Pada tblLogin, klik kanan pilih Events>Mouse>Mouse
Clicked
Masukkan koding dibawah ini:
String user = ("@_yudz");
String pass =
("yf");
String usname =
txtUser.getText();
String passw = txtPass.getText();
if
(usname.equals(user)&& passw.equals(pass)){
JOptionPane.showMessageDialog(null,"Username Benar! \n");
}
else{
JOptionPane.showMessageDialog(null, "Username atau Password salah!
\n");
txtUser.setText("");
txtPass.setText("");
}
Langkah 32...
Masih pada tblLogin, klik Events>Mouse>Mouse
Entered
Masukkan koding dibawah ini:
ImageIcon loginbtn = new
ImageIcon(getClass().getResource("images/loginho.png"));
tblLogin.setIcon(loginbtn);
Ikuti sama caranya seperti
membuat tblExit tadi.
Mouse Exited:
ImageIcon loginbtn = new
ImageIcon(getClass().getResource("images/login.png"));
tblLogin.setIcon(loginbtn);
Mouse Pressed:
ImageIcon loginbtn = new ImageIcon(getClass().getResource("images/loginec.png"));
tblLogin.setIcon(loginbtn);
Mouse Released:
ImageIcon loginbtn = new
ImageIcon(getClass().getResource("images/login.png"));
tblLogin.setIcon(loginbtn);
Selesai... Sekarang jalankan! (Shift+F6)
Oiyah, pada tblLogin Mouse Clicked kamu bisa ubah @_yudz dan yf menjadi
apa saja sesuai dengan yang kamu mau
Sekian tutorial kali ini, mohon
maaf kalau tidak mengerti dengan kata-katanya. Jangan lupa komentar dibawah yaa
kalau ada masalah. Nah dengan begitu, bagi kamu yang ingin projek diatas
silahkan download dibawah
Biar begitu, saya sangat
mengapresiasi orang yang sudah mencoba tutorial ini walau tidak berhasil. Kalau
kata lastchild setidaknya kita pernah berjuang. Oke! Thanks sudah mau mampir
0 komentar