Form KTP dengan Java
-
Upload
ayu-siti-munawaroh -
Category
Documents
-
view
808 -
download
128
description
Transcript of Form KTP dengan Java
-
ALPRO B
DISUSUN OLEH:
AYU SITI MUNAWAROH
5212100039
BALQIS LEMBAH MAHERSMI
5212100066
MEMBUAT KTP DENGAN GUI JAVA
-
Membuat Aplikasi KTP
Program ini kami buat dengan metode drag and drop JFrame Form. Dengan tampilan awal
program, seperti Gambar 1 Tampilan Awal GUI KTP berikut ini:
Gambar 1 Tampilan Awal GUI KTP
Gambar 2 Atribut dari Program
-
Pada Gambar 2, menunjukkan atribut apa saja yang kami gunakan untuk dapat menghasilkan
tampilan GUI seperti pada Gambar 1. Untuk tulisan seperti judul E-KTP Indonesia, Nama, Tempat
Lahir, dan sebagainya, kami menggunakan JLabel (Line 530 545). Sedangkan untuk membuat
pilihan Jenis Kelamis, kami menggunakan JRadioButton (Line 546 547) dan untuk
menggabungkan fungsi dari kedua radiobutton ini, kami gunakan ButtonGroup (Line 520).
Kemudian, untuk tombol-tombol Gol.Darah, Agama, Status Pernikahan, dan Kewarganegaraan, kami
gunakan JComboBox (Line 526 529). Untuk membuat tombol Upload, Save, Status
Pernikahan, dan Kewarganegaraan, kami menggunakan JButton (Line 521 525). Terakhir,
untuk membuat tempat-tempat kosong sebagai tempat inputan dari user, kami menggunakan
JtextField (Line 548 555).
Nah, pada pembahasan selanjutnya, kami akan menjelaskan lebih rinci, bagaimana membuat
kodingannya aga button-buttonnya berjalan.
A. MEMBUAT TAMPILAN BUTTON LEBIH MENARIK
Seperti yang sering Anda lihat, button-button yang disediakan oleh sebuah operating system
terlihat lebih menarik dengan gambar-gambar icon yang ada. Nah, untuk membuat button yang Anda
buat bisa menjadi semenarik yang ada pada tampilan di OS Anda biasanya, maka kami akan
menjelaskan bagaimana langkah-langkahnya. Caranya:
1 Buatlah sebuah button, misal upload (Gambar 3 Button Uploa)
Gambar 3 Button Upload
2 Pada button yang telah Anda buat dan sudah Anda ganti tampilan namanya dari
jButtonX menjadi Upload, maka klik kanan pada button tersebut kemudian pilih
Properties. (Gambar 4 Properties Button)
Gambar 4 Properties Button
-
3 Kemudian, pilih pada menu Icon, klik pada kotak yang sebaris dengan Icon. (Gambar
5 JButton Properties)
Gambar 5 JButton Properties
4 Pilih gambar apa yang ingin Anda masukkan melalui External Image, lalu Anda bisa
memilih gambar apapun yang Anda mau.
Gambar 6 JButton Icon
-
5 Selanjutnya jika sudah dipilih, Anda klik Ok, kemudian Close JButton Properties-nya.
Gambar 7 External Image dengan Gambar Pilihan
6 Maka hasilnya:
Gambar 8 Tampilan JButton Modifikasi
B. MEMBUAT TAMPILAN PROGRAM LEBIH MENARIK
Pada pembahasan kali ini, kami akan menjelaskan bagaimana caranya agar tampilan dari
Program KTP tidak monoton dan lebih menarik. Nah, kami menggunakan Look And Feel, pada Look
And Feel program ini, kami menggunakan tampilan dari Nimbuzz. Untuk perbandingannya bisa dilihat
pada Gambar 9 Perbandingan Tampilan Program, yang mana pada sebelah kiri merupakan tampilan
sebelum diberi LookAndFeel dan sebelah kanan merupakan tampilan setelah diberi LookAndFeel
Nimbuzz.
-
Gambar 9 Perbandingan Tampilan Program
Langkah-langkahnya sebagai berikut:
1. Cari letak main dari program.
2. Ketikkan code seperti Gambar 10 untuk menampilkan LookAndFeel Nimbuzz
Gambar 10 Code LookAndFeel Nimbuzz
3. Pada Gambar 10, Line 520, merupakan settingan untuk mengganti warna dari
background Program. Line 518, untuk mengganti warna dari semua Tombol (meliputi
RadioButton, ComboBox, Button). Sedangkan Line 519, hanya untuk mengganti warna
dari JButtonnya saja. Nah, pada program ini, kami hanya mengganti tampilan warna
backgroundnya saja.
*Nb: isikan warna dengan angka 0 - 255
4. Setelah itu kami mengganti warna tulisan menjadi putih dengan menyorot dari Source
ke Design, kemudian klik semua JLabel-nya, klik kanan Properties foreground
sesuaikan dengan warna kesukaan Anda (di program ini kammi memilih
putih).
5. Save semua modifikasi yang telah Anda buat. Lalu Jalankan program dengan
memencet Shift+F6, maka hasilinya akan terlihat seperti Gambar 11
-
Gambar 11 Hasil Modifikasi Tampilan Program
C. MEMBUAT TAMPILAN JOPTIONPANE MENARIK
Nah, jika sudah mengganti LookAndFeel dari program, maka tampilan dari messageDialog
JoptionPane akan mengikuti settingan dari LookAndFeelnya. Nah, jika belum disetting, maka
tampilannya akan seperti Gambar 12.
Gambar 12 Tampilan Awal JOptionPane sebelum Modifikasi
Pada Gambar 12, tampilan message dari JoptionPane terlihat tidak jelas, karena font automatic
dari netbeansnya adalah hitam (black), maka kami, merubahnya menjadi lebih menarik dengan
warna yang bisa catch dengan warna backgroundnya. Caranya adalah:
1. Cari method main dari program ini
-
2. Kemudian, masukkan code pada UIManager code yang ada di dalam mainnya:
UIManager.put("OptionPane.messageForeground", new Color(255, 255,
255)); (Gambar 13 Code Foreground JOptionPane (Line 525))
Gambar 13 Code Foreground JOptionPane (Line 525)
Karena angka kami 255,255,255 akan menghasilkan warna putih.
3. Save hasil modifikasi Anda, dan jalankan dengan Shift+F6, maka salah satu hasil
JOptionPane-nya bisa dilihat pada Gambar 14 Hasil Modifikasi JOptionPane.
Gambar 14 Hasil Modifikasi JOptionPane
4. Tulisan dari message JOptionPane lebih terlihat, dan lebih menarik.
D. MEMBUAT BUTTON UPLOAD BERFUNGSI
Setelah menyetting tampilannya hingga sesuai dengan yang Anda inginkan, maka kali ini kami
akan menjelaskan cara untuk mengaktifkan fungsi dari tombol upload. Jadi, kalau tombol UPLOAD itu
dipencet, dia bisa me-load image dari direktori yang Anda pilih.
Langkah-langkahnya:
1. Klik kanan pada button Upload Events Action ActionPerformed
2. Selanjutnya, ketikkan code seperti Gambar 12:
-
Gambar 15 Code Upload Button
Jadi, JFileChooser digunakan untuk bisa mengambil gambar dari direktori yang Anda
ingnkan. Kemudian Line 438, kami menggunakan skala untuk bisa memasukkan
gambar sesuai dengan ukuran dari Jlabel-nya. Supaya nantinya gambar tidak perlu
diresize terlebih dahulu.
3. Selanjutnya, simpan modifikasi code tersebut, dan jalankan Shift+F6, kemudian tekan
tombol UPLOAD, maka akan keluar seperti Gambar 16.
Gambar 16 UploadButton Berfungsi
Jadi, setelah itu Anda bisa mengupload gambar sesuai yang Anda inginkan.
4. Hasil tampilan gambar yang sudah dimasukkan ke program dapat dilihat seperti
Gambar 17.
-
Gambar 17 Hasil Upload Gambar ke Program
E. MEMBUAT SAVE BUTTON BERFUNGSI
Setelah berhasil membuat tombol Upload berfungsi, maka kami akan menjelaskan bagaimana
membuat tombol Save dapat berfungsi. Pada program ini, ketika memencet tombol Save yang
tersimpan adalah file berformat .jpg. Berikut langkah-langkah untuk membuat agar tombol save
berfungsi:
1. Klik kanan pada button Save Events Action ActionPerformed
2. Ketikkan code seperti Gambar 18:
-
Gambar 18 Code Untuk Save Button
Keterangan:
Line 404 = mengatur dimensi dari screenshot programnya
Line 405 dan 407 = ukuran width dan height untuk tampilan program (angka
bisa diganti sesuai tampilan programnya)
Line 406 dan 408 = untuk memanggil ukuran program ke dalam dimensinya
Line 409 = untuk memulai screenshotnya dari mana (0,0 sumbu x = 0, dan
y = 0), kemudian memanggil width dan height ke dalam screenshotnya
Line 411 = untuk menampilkan screenshotnya dengan ketentuan try-catch
pada Line 413 420
3. Save hasil editing yang sudah Anda lakukan, kemudian simpan dengan menekan
Shift+F6. Dan simpanan form ini akan berbentuk jpg sesuai dengan koding pada Line
413. Untuk melihat letak filenya ada dimana, maka Anda harus masuk ke direktori
tempat Anda menyimpan program.
-
Gambar 19 Letak file dari Form KTP.jpg
4. Maka jika dibuka filenya, hasilnya akan terlihat seperti Gambar 20.
Gambar 20 Hasil Button Save Berfungsi
-
F. MEMBUAT BUTTON OPEN BERFUNGSI
Setelah membuat tomol Upload menjadi berfungsi, selanjutnya kami akan menerangkan
bagaimana caranya agar tombol Open menjadi berfungsi juga. Fungsinya adalah untuk menampilkan
hasil inputan dari Form KTP yang sudah Anda buat. Langkah-langkahnya:
1. Klik kanan pada button Open Result Events Action ActionPerformed
2. Selanjutnya, ketikkan code seperti Gambar 21 dan Gambar 22:
Gambar 21 Code Open Result Button (1)
Keterangan Gambar 21:
Line 455 462 = code untuk memanggil inputan dari user pada kota
JTextField
Line 463 469 = code untuk memanggil inputan dari radio button, yakni pada
Jenis Kelamin
Line 470 474 = code untuk memanggil inputan dari user yang ada pada
combobox
Gambar 22 Code Open Result Button (2)
Keterangan Gambar 22:
Line 476 = code untuk memanggil seluruh code pada Line 455 - 474
-
3. Selanjutnya save editing code yang telah Anda buat, dan jalankan program dengan
menekan Shift+F6, kemudian tekan Button Open Result, maka hasilnya seperti
Gambar 23
Gambar 23 Hasil Open Result Berfungsi
G. MEMBUAT CLEAR BUTTON BERFUNGSI
Pada program kami ini, kami juga memberikan Clear atau Reset Button untuk menghapus
seluruh inputan yang telah dimasukkan user. Pada implementasinya, biasanya tombol ini digunakan
untuk menghapus seluruh inputan bila banyak kesalahan, dan untuk merest jika ingin membuat
inputan baru (file baru). Berikut langkah-langkahnya:
1. Klik kanan pada button Open Result Events Action ActionPerformed
2. Masukkan code seperti Gambar 24:
Gambar 24 Code untuk Result Button
-
Keterangan Gambar 24:
Line 494 501 = digunakan untuk mereset ulang inputan pada JTextField
Line 502 505 = digunakan untuk mereset ulang inputan pada JcomboBox
Line 506 = digunakan untuk merest ulang inputan pada button group yang
mana di dalamnya terdiri dari beberapa JRadioButton
3. Save hasil modifikasi Anda dan jalankan program dengan menekan Shift+F6, dan jika
ingin melihat hasilnya, inputkan terlebih dahulu seluruh field, kemudian tekan Clear
Button, maka akan terreset. (Perhatikan Gambar 25 dan Gambar 26)
Gambar 25 Inputan dari User --> tekan Clear Button
-
Gambar 26 Hasil Setelah Menekan Clear Button
H. MEMBUAT BUTTON EXIT BERFUNGSI
Setelah semua button difungsikan, maka di sini kami memberikan button Exit untuk keluar dari
programnya. Langkah-langkahnya sebagai berikut:
1. Klik kanan pada button Open Result Events Action ActionPerformed
2. Ketikkan code seperti Gambar 27:
Gambar 27 Code Untuk Exit Button
Keterangan Gambar 27:
Line 399 = fungsi untuk mengeluarkan jalannya program
3. Save hasil editing Anda, kemudian jalankan program, dan untuk melihat hasilnya,
silahkan menekan Exit Button, maka Anda akan keluar dari program.
-
KESIMPULAN
Menurut kami, secara keseluruhan, program kami sudah cukup bagus. Namun, ada
kelemahannya, yakni pada Open Result Button, program kami ini hanya bisa mengeluarkan inputan
berupa teks, piliha pada radio button dan combo box, sedangkan picture yang telah diinputkan tidak
bisa muncul.