Langsung ke konten utama

[Belajar JavaFX] Membuat Program Form Login Sederhana dengan JavaFX dan CSS di Netbeans

Sebelum membuat program form login sederhana ini yang dibuat dengan bahasa pemrograman Java, terlebih dahulu kita memasang peralatan yang dibutuhkan. Saya menggunakan IDE Netbeans 8.0.2 versi All yang didalamnya sudah memasukan banyak dukungan termasuk JavaFX dan JDK 1.8.0 update 25 ( sudah termasuk JRE dan untuk saat ini sudah termasuk JavaFX ).

Membuat Project di Netbeans 
  • Klik FileNew Project. Pada bagian Categories, pilih JavaFX dan pada bagian Projects pilih JavaFX ApplicationsNext. Kemudian masukan nama proyeknya dan pastikan JDK sudah dipasang.
  • Project Name : FormFXExample
  • Klik Finish.
  • Buatlah kode  didalam file FormFXExample.java seperti berikut.



  • Setelah membuat FormFXExample.java, kemudian kita buat file baru dengan nama CSSExample.java didalam folder formfxexample. Cara untuk membuat file baru tersebut dengan cara klik kanan pada formfxexample yang berada dibawah Source Packages → New → Other → pilih Categories ( JavaFX ) dan Filetypes ( JavaFX Main Class ) → Next.
  • Class Name : CSSExample
  • Buatlah kode  didalam file CSSExample.java seperti berikut.






  • Untuk mempercantik tampilan program, pada JavaFX memberikan kemudahan dengan menggunakan CSS (Cascading Style Script). Untuk mempercantik panel / pane bisa menggunakan skrip .root{ -fx-background-color: whitesmoke; } pada file css atau dalam bentuk skrip inline, misal nama pane adalah gridpanel, maka skrip inline yang digunakan adalah gridpanel.setStyle("-fx-background-color: whitesmoke;"); ataupun juga bisa menggunakan ID untuk setiap komponen, misal nama Button adalah btnClose, maka skrip yang digunakan adalah btnClose.setId("tombolKeluar"); .
 
  • Buatlah kode  didalam file Login.css seperti berikut dan simpan pada folder asset yang berada dibawah Source Package, tapi sebelumnya dibuat terlebih dahulu dengan cara klik kanan pada formfxexample → New → Folder → Folder Name: asset → Klik Finish. Folder asset juga digunakan untuk menyimpan file gambar. 

 
Hasil setelah kompilasi


Gambar 1.First
Gambar 2. Sign In in Fields are Empty
Gambar 3. Sign In in Password is Empty
Gambar 4. Sign In in Username is Empty
Gambar 5. Print Button is Pressed
Gambar 6. After Back Button is Pressed

Komentar

  1. gan kebetulan ane baru belajar java,nah ane pengen nanya apakah javafx bisa kayak jpanel gitu bisa drag drop jadi layout yg kita buat kelihatan ,atau mngkin ada cara lain biar layout UI yg kita buat di javafx bisa keliatan bentuknya seperti di jpanel.terima kasih

    BalasHapus
  2. anda bisa menggunakan JavaFXSceneBuilder

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Lokasi untuk Legalisasi Copy Akreditasi Jurusan di BAN PT

Untuk melegalisir akreditasi BAN-PT, bawa KTP untuk mendapatkan visitor pass di Lobby di frontdesk, kemudian menuju ke lift yang ada di sebelah kanan.Di Lantai 17, temui dulu petugas keamanan dan bilang mau legalisir copy akreditasi.

Terkait copy-an Sertifikat/Surat Keterangan Akreditasi BANPT bisa diminta kepada Perguruan Tinggi terkait dikarenakan Hasil Surat Keputusan Akreditasi BANPT dan Sertifikat kami serahkan ke Perguruan Tinggi.
Terkait legalisir silahkan membawa:

1. Copy Sertifikat/Surat Keputusan BAN-PT sesuai prodi/institusi Saudara
2. SKL/Ijazah prodi (hanya menunjukan ke pihak bagian legalisir)

Untuk jam operasional layanan legalisir pada:

Senin, Selasa, Rabu pk. 09:00 s.d 16:00
Kamis pk 09:00 s.d 12:00

Alamat:
Gedung II Badan Pengkajian dan Penerapan Teknologi (BPPT) Lt, 17.
Jl. M.H. Thamrin 8, Kebon Sirih, Menteng, Jakarta Pusat. 10340.


sumber : Sekretariat BANPT

[Belajar JavaFX] Membuat Aplikasi Sederhana yang Menggunakan Database MySQL

Kali ini saya menulis tutorial untuk membuat aplikasi sederhana yang menggunakan database MySQL. Tutorial ini adalah hasil modifikasi dari tutorial Crud JavaFX. Pada blog tersebut, aplikasi dibuat dengan menggunakan bantuan aplikasi SceneBuilder, komponen-komponen atau yang lebih dikenal sebagai UI Controls dapat diseret atau drag and drop ke alas atau pane yang disediakan. Pane yang disediakan juga dapat diganti. Namun, kali ini saya memodifikasi aplikasi tersebut dengan cara manual yakni dengan menuliskan baris kode tanpa menggunakan aplikasi SceneBuilder.
MEMBUAT DATABASE Sebelum membuat aplikasinya, kita buat dahulu databasenya. Saya memberikan nama universitas untuk nama databasenya dan mhs untuk nama tabelnya. Buat tabelnya dengan struktur seperti gambar berikut.
Untuk membuat database universitas gunakan perintah berikut. create database nama_database; catatan: nama_database diganti dengan universitas.
Untuk memilih database yang sudah dibuat, gunakan perintah berikut. use nama_d…