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)


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:


2. Masukkan code seperti Gambar 24:

Gambar 24 Code untuk Result Button


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:


2. Ketikkan code seperti Gambar 27:

Gambar 27 Code Untuk Exit Button


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.

form ktp dengan java

Documents