ALPRO B MEMBUAT KTP DENGAN GUI JAVA
DISUSUN OLEH: AYU SITI MUNAWAROH 5212100039 BALQIS LEMBAH MAHERSMI 5212100066
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.
