Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
14
BAB II
Perancangan Aplikasi
2.1. Rancangan Database
Untuk membuat sistem Implementasi Storage Kartu Perdana
Telkomsel, kita memerlukan 5 tabel sebagai berikut :
1. Tabel User
2. Tabel Sementara
3. Tabel Transaksi
4. Tabel Detail transaksi
5. Tabel Barang
2.1.1 Membuat Data Base Baru
Untuk membuat database dan table kita akan
menggunakan aplikasi phpmyadmin. Pertama yang harus
dilakukan adalah membuat database dan tabel baru,
database dibuat dengan nama yang sesuai dengan program
aplikasi yang akan dibangun. Contohnya kita akan membuat
database dengan nama storage_app. Berikut langkahnya:
1. Buka browser googlechrome/Mozilla firefox
2. Buka phpmyadmin dengan mengetikkan alamat
http://localhost/phpmyadmin/.
http://localhost/phpmyadmin/
15
3. Klik new, masukan nama database storage_app, lalu
klik tombol create.
4. Setelah database dibuat, anda harus mengaktifkan
database tersebut. Caranya klik nama database
storage_app yang ada dijendela bagian kiri.
5. Setelah database aktif, anda bisa membuat tabel
didalamnya.
2.1.2 Membuat Tabel
Pada bagian ini akan membuat tabel untuk menyimpan data,
selain membuat tabel dan struktur datanya akan belajar
menambah data baru ke dalam table,berikut tabel-tabel yang
akan kita buat untuk aplikasi storage_app.
1. Tabel User
Nama Field Type Size Keterangan
Kd_user varchar 10 Kode user
Nama_user varchar 20 Nama user
Password varchar 30
Password untuk pengguna
(admin/user)
Level varchar 1
Menambah level
(admin/user)
Tabel 2.1 Tabel User
16
2. Tabel Sementara
Nama Field Type Size Keterangan
Kd_brg Varchar 10 Kode barang
Nm_brg Varchar 20 Nama barang
Hrg_jual Double Harga jual
Jumlah_beli Int 11 Jumlah beli
Subtotal Double Subtotal
Tabel 2.2 Tabel Sementara
3. Tabel Transaksi
Nama Field Type Size Keterangan
Notransaksi Varchar 15 Nomer transaksi
Tgl Date Tanggal transaksi
Totalbayar Double Total bayar
Kd_user Varchar 10
Kode user pengguna
(Admin/User)
Tabel 2.3 Tabel Transaksi
4. Tabel Detail Transaksi
Nama Field Type Size Keterangan
Notransaksi Varchar 15 Nomer transaksi
Jumlahbeli Int 11 Jumlah beli
Subtotal Double Subtotal
Kd_brg Varchar 10 Kode barang
17
Tabel 2.4 Tabel Detai Transaksi
5. Tabel Barang
Nama Field Type Size Keterangan
Kd_brg Varchar 10 Kode barang
Nm_brg Varchar 20 Nama barang
Hrg_jual Double Harga jual
Stok Int 11 Stok barang
Tabel 2.5 Tabel User
2.2. Rancangan Form Master
Untuk membuat rancangan form master, rancangan
form transaksi, dan rancangan laporan. Aplikasi yang di
butuhkan dalam pembuatan tutorial aplikasi Storage Kartu
Perdana Telkomsel sebagai berikut :
1. Netbeans IDE 8.1
2. JDK 1.7
3. Ireport 4.5.0 plugin dan Ireport 4.5.0 jar
4. Xampp 3.2.1
18
A. Cara instalasi netbeans IDE 8.1
Untuk menjalankan aplikasi NetBeans, mari kita instal
software NetBeans terlebih dahulu. Berikut langkah-
langkahnya.
1. Download NetBeans pada situs resminya
https://netbeans.org/.
2. Dobel klik file instalasi untuk memulai.
3. Installer membutuhkan waktu beberapa detik untuk
mengkonfigurasi dirinya sendiri, lalu setelah itu akan
menampilkan selamat datang dan siap melanjutkan
instalasi. Kllik Next> seperti gambar berikut.
Gambar 2.1 Halaman Utama
19
4. Muncul jendela Welcome to the NetBeans IDE 8.1
Installer, klik Next> untuk melanjutkan.
Gambar 2.2 Halaman Awal NetBeans IDE Installer
5. Centang pada check box berlabel I accept the terms in
the license agreement sebagai tanda menyetujui dan
berniat melanjutkan instalasi, klik tombol Next>.
20
Gambar 2.3 Halaman Persetujuan Instalasi
6. Pilih lokasi di mana folder NetBeans akan diinstal,
kemudian klik Next>.
Gambar 2.4 Halaman Lokasi Folder
21
7. Installer akan kembali menampilkan lokasi instalasi
dan menunjukan besarnya ruang yang diperlukan. Jika
sudah yakin, klik Instal> agar instalasi segera diproses.
Gambar 2.5 Halaman Informasi sebelum Install
NetBeans
8. Proses instalasi akan berjalan dalam beberapa menit
tergantung spesifikasi PC yang digunakan. Semakin
tinggi spesifikasi PC, semakin cepat proses instalasi.
22
Gambar 2.6 Proses Instalasi NetBeans
9. Sestelah proses selesai, klik tombol Finish> untuk
menutup installer. Sekarang NetBeans sudah bisa
dijalankan.
Gambar 2.7 Proses Instalasi NetBeans Selesai
23
B. Instalasi Java
Untuk menjalankan program Java, kita perlu
menginstal Java SDK terlebih dahulu. Adapun langkah-
langkah Instalasi, sebagai berikut.
1. Sebelum instalasi kita harus mengunduh aplikasi Java
terlebih dahulu pada situs resminya
https://java.com/
2. Untuk memulai proses instalasi, klik file berekstensi
.exe yang terdapat pada tool Java yang sudah kita
unduh tadi. Akan keluar tampilan seperti berikut.
Gambar 2.7 Halaman Awal Instalasi
https://java.com/
24
3. Selanjutnya klik Next> untuk melanjutkan proses
berikutnya.
Gambar 2.8 Halaman Penyimpanan
4. Proses instalasi berlangsung. Tunggu beberapa menit
hingga proses instalasi selesai, seperti gambar berikut.
25
Gambar 2.9 Progress Instalasi Java
5. Setelah proses instalasi selesai, kita akan dibawa pada
halaman info lokasi folder instalasi. Kita bisa merubah
lokasi instalasi dengan cara klik Change>. Setelah
menentukan lokasi instalasi klik Next>.
Gambar 2.10 Halaman Informasi Lokasi Instalasi
26
6. Tunggu proses instalasi software sampai selesai,
seperti gambar berikut.
Gambar 2.11 Proses Instalasi Java
7. Jika proses instalasi selesai, klik Close> untuk menutup
installer. Sekarang kita bisa menjalankan Java pada
desktop atau start application.
27
Gambar 2.12 Halaman Informasi Instalasi Sukses
C. Cara instal ireport plugin
Dalam bahasa pemrograman Java kita dapat membuat
laporan dengan menggunakan Plugin tambahan, yaitu
iReport. Ireport atau yang juga dikenal dengan nama Jasper
Report adalah plugin milik IDE Netbeans, yang dapat
digunakan secara bebas karena bersifat Open Source.
Langkah-langkah dalam Instalasi Plugin iReport di Netbeans
adalah sebagai berikut:
1. Jalankan Netbeasn, pilih menu Tools – Plugin
2. Pilih tab Downloadead – Add Plugins
3. Cari hasil download Plugin iReport nya, pastikan sudah
mengekstrak Plugin iReport
28
4. Pilih semua file *.nbm yang ada didalam folder plugin
iReport
Gambar 2.13 Add Plugins
Gambar 2.14 Tampilan Installer
29
5. Ikuti langkah-langkah seperti saat anda menginstall
program aplikasi. Jika proses sudah selesai, biarkan
netbeans untuk restrart.
6. Tambahkan Libraries untuk bisa terhubung ke
database klik kanan pada Libraries – Add Libraries –
Pilih JasperReports 3.0.1 – Add Library
D. Instalasi Xampp
Sebelum kita menjalankan program XAMPP, kita instal
software terlebih dahulu. Berikut langkah-langkahnya.
1. Kita dapat mengunduh software XAMPP pada URL
https://www.apachefriends.org.
https://www.apachefriends.org/
30
2. Dobel klik file XAMPP yang sudah kita didownload,
selanjutnya akan muncul jendela “Installer Language”,
kemudian klik OK> seperti gambar berikut.
Gambar 2.15 Pilih Bahasa Installer
3. Setelah masuk XAMPP Setup Wizard, klik Next> untuk
melanjutkan proses instalasi.
Gambar 2.16 Halaman Awal Instalasi XAMPP
31
Gambar 2.17 Pilih komponen
4. Pada tampilan selanjutnya akan muncul pilihan
mengenai komponen mana dari XAMPP yang ingin dan
tidak ingin diinstal. Atau biarkan secara default saja.
Kemudian klik Next>.
5. Berikutnya silahkan pilih folder tujuan dimana XAMPP
akan diinstal. Kemudian klik Next>.
32
Gambar 2.18 Pilih Lokasi Instalasi XAMPP
6. Selanjutnya akan ada informasi mengenai Bitnami,
jika ingin melihat informasinya silahkan centang. klik Next>
untuk melanjutkan.
33
Gambar 2.19 Halaman Informasi Bitnami for XAMPP
9. Tunggu proses instalasi sampai selesai, seperti gambar
berikut.
Gambar 2.20 Proses Instalasi XAMPP
34
10. Setelah berhasil diinstal, akan muncul pilihan untuk
langsung menjalankan XAMPP control panel atau tidak.
Selanjutnya silahkan klik Finish>.
Gambar 2.21 Proses Instalasi XAMPP Selesai
11. Berikut adalah tampilan XAMPP control panel.
Gambar 2.22 Tampilan XAMPP Control Panel
35
2.2.1 Membuat Projek Storage Aplikasi
1. Buka program aplikasi neatbeans, siapkan folder untuk
menyimpan projeck file -> New Project
Gambar 2.23 Membuat Nama Project
a. Isi project name : Storage_app
b. Pilih tempat penyimpanan
c. Finish
2. Membuat Package
a. Klik kana pada project – New – Java Package
36
b. Beri package dengan nama : storage_app
Gambar 2.24 Pemberian Nama Aplikasi
c. Finish
37
A. Merancang Class Koneksi
Class koneksi digunakan sebagai penghubung antara
database deng form aplikasi yang kita buat pada netbeans
Langkah-langkahnya adalah sebagai berikut :
1. Klik kanan pada package storage_App – New – Java
Class
2. Beri nama Class dengan Nama : koneksi
Package : storage_App
Finish
ketikan codingan berikut :
38
Tambahkan libraries untuk bisa hubung ke database
Klik kanan pada libraries – add librarries – pilih mysql JDBC
Driver – add library
39
2.2.2 Membuat Form Master Barang
1. Klik kanan pada package storage_app – New –
JInternalFrame Form
2. Isi Class Name : Master_Barang – Finish
Gambar 2.25 Penamaan Master Barang
40
a. Kemudian ketik kodingan di bawah ini :
41
42
43
b. Klik kanan pada bt_keluar, pilih Event – Action – Action
Performed, ketikan Script Berikut:
c. Klik kanan pada bt_tambah, pilih Event – Action –
Action Performed, ketikan Script Berikut:
44
d. Klik kanan pada tkd_brg, pilih Event – key –
KeyPressed, ketikan Script Berikut:
e. Klik kanan pada tnm_brg, dan thrg_jual, pilih Event –
key – KeyPressed, ketikan Script Berikut:
(memindahkan posisi kursor ke object tertentu saat
dienter)
45
f. Klik kanan pada tbl_brg, pilih Event – Mouse –
MouseClicked, ketikan Script Berikut: (memanggil
method SetTabel yang berfungsi untuk menampilkan
nilai-nilai pada tabel ke dalam form)
g. Klik kanan pada tcari, pilih Event – Key – KeyTyped,
ketikan Script Berikut:
2.2.3. Membuat Form Menu Utama
Dalam studi kasus penyimpanan barang ini, penulis
menggunakan 2 akses level, yaitu level sebagai admin, dan
akses sebagai kasir. Adapun ruang lingkup akses level adalah
sebagai berikut:
46
Tabel 2.6 Ruang Akses Level
Untuk membedakan akses level tersebut, salah satu
cara yang bisa dilakukan adalah dengan membuat 2 form
menu utama. Menu pertama untuk Admin, menu lainnya
untuk level kasir.
1. Tampilan Level Admin
Gambar 2.26 Tampilan Level Admin
47
2. Tampilan Running Level Admin
Gambar 2.27 Tampilan Running Level Admin
48
3. Tampilan Level Kasir
Gambar 2.28 Tampilan Level Kasir
4. Tampilan Running Level Kasir
Gambar 2.29 Tampilan Running Level Kasir
49
A. Membuat Menu Utama Level Admin
Desain Tampilan Level Admin:
Tabel 2.7 Tampilan Level Admin
Langkah-langkah dalam pembuatan Menu utama untuk level
Admin adalah sebagai berikut:
1. Klik kanan pada package storage_app – New – JFrame
Form
50
2. Isi Clase Name : Menu_Utama_Admin – Finish
Gambar 2.30 Clase Name
51
3. Tambahkan Komponen JMenu Bar pada Form
4. Tambahkan 2 Menu Item sebagai sub menu, dengan
cara: Klik kanan pada menu File – Add From Palette –
Menu Item
52
5. Klik Kanan pada JMenuItem1 – Edit Text – Ketik
LogOut
6. Klik kanan pada JMenuItem1 – Change Variable Name
– rename menjadi mnLogout
7. Lakukan langkah 7 dan 8 dengan mengatur
JMenuItem2 menjadi : Edit Text = Keluar
Change Variable Name = mnKeluar
Klik kanan pada menu Edit – Edit Text – beri nilai Master
53
8. Tambahkan 2 Menu Item dengan cara yang sama
seperti langkah no.4, dengan pengaturan sebagai
berikut:
JMenuItem1, Edit Text = Barang, Change Variable
Name = mnBarang JMenuItem2, Edit Text = User,
Change Variable Name = mnUser
9. Untuk membuat menubar baru (Transaksi) silakan klik
kanan pada JMenuBar1 – Add Menu
Silakan atur jMenu3 sebagai berikut:
Edit Text = Transaksi, Change Variable Name = mnTransaksi
54
Komponen Properties jMenu3 Edit Text : Laporan
jMenuItem1 Edit Text : Data Barang
Change Variable Name : mnLapBarang
jMenuItem2 Edit Text : Data Pelanggan
Change Variable Name : mnlapbarang
jMenuItem2 Edit Text : Data Barang
Change Variable Name : mnlapuser
jMenu4 Edit Text : Utility
jMenuItem1 Edit Text : Ganti Passord
Change Variable Name : mnGantiPassword
Jlabel Nama Variabel : lblwaktu,tgl Text : (JAM,TANGGAL)
Tabel 2.8 Form Menu Utama
10. Tambahkan Komponen Desktop Pane pada Form Menu
Utama Admin dan rapihkan
11. Klik kanan pada jDesktopPane3 pilih Customize Code
55
12. Masukkan script berikut :
Code tersebut berfungsi untuk merubah background
dari jDesktopPane3,
13. Tambahkan komponen jLabel ke dalam Form Menu
Utama Admin seperti di bawah ini, untuk jLabel6,
jLabel4, dan jLabel5 biarkan untuk Text dan sedangkan
56
untuk nama variabelnya beri nama masing-masing
lnama, lkode, llevel.
Gambar 2.31 Desain Menu Utama Level Admin
Untuk pembuatan jam dan tanggal gunakan jlabel dan beri
nama JAM & TANGGAL, variable JAM = lblwaktu dan variable
TANGGAL = tgl
14. Hasil Akhir dari Menu Utama Level Admin
Gambar 2.32 Hasil Akhir Menu Utama Level Admin
57
15. Ketikkan script koneksi dan pembuatan Variabel
seperti dibawah ini:
58
59
16. Klik kanan pada jForm, pilih Event – Window –
windowActivated, ketik
17. Klik kanan pada mnLogout , pilih Event – Action –
ActionPerformed, ketik script
Script diatas berfungsi untuk memanggil Form
Aplikasi_Login sekaligus menutup form
Aplikasi_MenuUtama.
18. Klik Kanan pada mnKeluar , pilih Event – Action –
ActionPerformed, ketik Script
19. Klik Kanan pada mnBarang , pilih Event – Action –
ActionPerformed, ketik Script
60
20. Klik Kanan pada mnlapuser , pilih Event – Action –
ActionPerformed, ketik script
Script diatas berfungsi untuk memanggil form Laporan_User
21. Klik Kanan pada mnUser , pilih Event – Action –
ActionPerformed, ketik script
Script diatas berfungsi untuk memanggil form
Aplikasi_Master_User
22. Klik Kanan pada mntransaksi , pilih Event – Mouse –
MouseClicked, ketik script
Script diatas berfungsi untuk memanggil form
Barang_Keluar.
61
23. Klik Kanan pada mnLapBarang , pilih Event – Action
– ActionPerformed, ketik script
Script diatas digunakan untuk memanggil laporan barang.
Ketikkan script diatas jika anda telah membuat file
Laporan_Barang.jasper dan mengimport file
jasperreport.jar
24. Klik Kanan pada mnLapUser , pilih Event – Action –
ActionPerformed, ketik script
Script diatas digunakan untuk memanggil laporan user.
Ketikkan script diatas jika anda telah membuat file
Laporan_User.jasper dan mengimport file
jasperreport.jar
62
25. Klik Kanan pada mnlaptransaksi , pilih Event –
Action – ActionPerformed, ketik script
Script diatas berfungsi untuk memanggil form
Aplikasi_Laporan.
Ketikkan Script diatas jika anda telah membuat form
Aplikasi_Laporan.
26. Klik Kanan pada mnGantiPassword , pilih Event –
Action – ActionPerformed, ketik script
Script diatas berfungsi untuk memanggil form
Ganti_Password. Ketikkan Script diatas jika anda telah
membuat form Ganti_Password
A. Membuat Menu Utama Level Kasir
Untuk membuat Menu Utama Level Kasir silakan anda
ikuti langkah-langkah seperti membuat menu utama level
admin. Rancangan menu untuk level kasir adalah sebagai
berikut:
63
Tabel 2.10 Menu Utama Level Kasir
Beri nama untuk form tersebut : Menu_Kasi
A. Membuat Form Login
Desain Form Login Running Form Login
Gambar 2.33 Desai Form Login
Langkah-langkah untuk membuat form login adalah sebagai
berikut:
1. Klik kanan pada package storage_app – New – JFrame
Form
64
Isi Class Name : Menu_Login – Finish
1. Mendesain Form Login
65
Gambar 34 Desain Form Login
a. Spesifikasi properties komponen form Menu_Login
No Komponen Properties 1 JTextField1 Nama Variabel : tkodeuser
Text : (kosongkan) 2 JTextField2 Nama Variabel : tpassword
Text : (kosongkan)
3 JTextField3 Nama Variabel : tlevel Text : (kosongkan) 4 JButton1 Nama Variabel : bt_tambah
Text : TAMBAH
5 JButton2 Nama Variabel : bt_keluar Text : KELUAR
6 Jlabel Nama Variabel : lblwaktu,tgl Text : JAM,TANGGAL
66
Tabel 2.11 Form Menu Login
Logika jalannya Program:
1. Saat form dijalankan textField yang aktif hanya kode
user.
2. Kode user diinput, jika kode user ditemukan, maka
textField akan aktif dan password diisi. Jika kode user
salah, maka akan muncul pesan bahwa kode user salah
3. Tombol login untuk memeriksa username dan
password, jika benar maka akan masuk ke form menu
utama. Ada 2 kondisi saat masuk ke form menu utama.
Jika level 1, maka akan masuk ke menu utama admin,
jika level 2 maka akan masuk ke menu utama kasir.
Jika Username atau password salah akan muncul pesan
bahwa kode user atau password salah.
A. Script program untuk form Menu_Login:
1. Tambahkan script koneksi pada jendela coding, dan
method-method di bawah ini:
67
68
2. Klik kanan pada jFrame, pilih Event – Window –
windowActivated, ketik script:
69
3. Klik kanan pada tkodeuser, pilih Event – Action –
actionPerformed, ketik script:
4. Klik kanan pada btkeluar, dan btlogin pilih Event –
Action – actionPerformed, ketik script:
70
B. Membuat Form Aplikasi Data Barang
Form aplikasi data barang digunakan untuk
menampilkan data barang yang ada di able barang, dan
digunakan untuk proses transaksi. Langkah-langkah dalam
membuat form aplikasi Data barang adalah sebagai berikut:
1. Masih dalam package storage_App, buat form baru
dengan JinternalFrame Form. Beri nama form dengan
nama : Data_Barang
2. Desain tampilan form seperti dibawah ini:
Gambar 2.35 Form data Barang
71
Spesifikasi properties komonen form Data_Barang
Tabel 2.13 Form Data Barang
3. Ketikkan script koneksi dan methode-methode yang
diperlukan
72
4. Klik kanan pada tbl_barang, pilih Event – Mouse
MouseClicked, ketikkan script berikut:
73
5. Klik kanan pada tcari, pilih Event – Key – KeyTyped,
ketikkan script berikut:
74
2.3. Membuat Form Transaksi
Desain program form transaksi
Gambar 2.36 Form Transaksi
Implementasi program form transaksi
Gambar 2.37 Tampilan Running Form Transaksi
75
Langkah-langkah dalam membuat form Barang Keluar
adalah sebagai berikut:
1. Masih dalam package storage_app, buat form baru
dengan JInternalFrame Form. Beri nama form dengan
nama : Barang_Keluar
2. Desain tampilan form seperti dibawah ini:
76
Spesifikasi properties komonen form
Aplikasi_Transaksi
No Komponen Properties
1 JTextField1 Nama Variabel : tnotrans
Text : (kosongkan)
2 JTextField2 Nama Variabel : ttanggal
Text : (kosongkan)
3 JTextField3 Nama Variabel : tkodeuser
Text : (kosongkan)
4 JTextField4 Nama Variabel : tkodebarang
Text : (kosongkan)
5 JTextField5 Nama Variabel : tnamabarang
Text : (kosongkan)
6 JTextField6 Nama Variabel : tharga
Text : (kosongkan)
7 JTextField7 Nama Variabel : tjumbel
Text : (kosongkan)
8 JTextField8 Nama Variabel : tsubtotal
Text : (kosongkan)
9 JTextField9 Nama Variabel : tbayar
Text : (kosongkan)
Spesifikasi properties komonen form Aplikasi_ Transaksi
No Komponen Properties 10 JTextField10 Nama Variabel : tkembali
Text : (kosongkan)
11 jButton1 Nama Variabel : btbrowse
Text : …
12 jButton2 Nama Variabel : bttambah
Text : TAMBAH
13 jButton3 Nama Variabel : btsimpan
Text : SIMPAN
14 jButton4 Nama Variabel : btbatal
77
Text : TAMBAH
15 jButton5 Nama Variabel : bt_keluar
Text : BATAL
16 jLabel Text : total
Nama Variabel : ltotal
17 jTable1 Nama Variabel : tbtransaksi
Logika Jalannya Program:
1. Saat form dijalankan, tanggal dan kode user muncul
otomatis
2. Tekan tombol TAMBAH, no.transaksi muncul otomatis
3. Kode barang bisa langsung diinput, lalu tekan enter.
Jika ditemukan maka nama barang, dan harga tampil.
4. Atau bisa dengan klik tombol broswse (…), pilih kode
barang yang akan dibeli, maka nama barang dan harga
tampil
5. Jumlah beli diinput, lalu tekan enter, maka akan
muncul pesan:”Mau Tambah Barang?”. Jika pilih Yes,
ulangi peerintah no.3 atau 4. Jika pilih No, total bayar
akan muncul.
6. Input uang bayar, untuk melakukan pembayaran. Uang
kembali akan muncul setelah dienter.
7. Tombol simpan untuk melakukan penyimpanan
transaksi, dan struk akan muncul (pembuatan struk
78
akan dibahas dipertemuan berikutnya saat pembuatan
laporan)
3. Membuat Script Program Form Transaksi
Berikut Langkah-langkah dalam membuat script program
form transaksi:
1. Ketikkan script koneksi dan methode-methode yang
diperlukan
79
80
81
82
2. Klik kanan pada tkodebarang, pilih Event – Action –
actionPerformed, ketik script:
Memanggil method tampildatabarang(), dengan
melakukan pencarian terhadap kode barang yang diinput
pada textfield tkodebarang.
3. Klik kanan pada btbrowse, pilih Event – Action –
actionPerformed, ketik script:
Memanggil form Data_Barang, dan memanggil nilai yg ada
pada variabel KodeBarang, NamaBarang, HargaBarang
kedalam textfield tkodebarang, tnamabarang, dan tharga.
4. Klik kanan pada tkodebarang, pilih Event –
Component – ComponentAdded, ketik script:
83
Script untuk memindahkan kursor ke textfield tjumbel.
5. Klik kanan pada btkeluar, pilih Event – Action –
actionPerformed, ketik script:
6. Klik kanan pada bttambah, pilih Event – Action –
actionPerformed, ketik script:
Memberikan nilai kepada textfield tnotrans, yang diambil
dari method nomor()
7. Klik kanan pada btbatal, pilih Event – Action –
actionPerformed, ketik script:
84
Saat diklik batal, maka isi tabel sementara akan dihapus
melalui method HapusTabelSementara, dan nomor transaksi
menjadi kosong kembali.
8. Klik kanan pada tjumbel, pilih Event – Action –
actionPerformed, ketik script:
Script untuk menghitung subtotal dari tiap penjualan, untuk
disimpan kedalam tabel sementara, dan memberikan total
85
keseluruhan dari semua subtotal jika transaksi lebih dari
satu.
9. Klik kanan pada tbtransaksi, pilih Event – Key –
KeyPressed, ketik script:
Script untuk menghapus isi tabel sementara yang telah
tersimpan.
10. Klik kanan pada btsimpan, pilih Event – Action –
actionPerformed, ketik script:
86
Script untuk melakukan proses penyimpanan ke tabel
transaksi dan detailtransaksi melalui pemanggilan method
SimpanTransaksi() dan simpanDetailTransaksi().
11. Klik kanan pada tbayar, pilih Event – Action –
actionPerformed, ketik script:
87
Script untuk menghitung uang kembali setelah penginputan
uang bayar.
2.3.1. Membuat Form Ganti Password User
Form aplikasi Ganti Password digunakan untuk
merubah password user yang sedang login. Langkah-
langkah dalam membuat form aplikasi Ganti Password
adalah sebagai berikut:
1. Masih dalam package storage_app, buat form baru
dengan JInternalFrame Form. Beri nama form dengan
nama : Ganti_Password
88
2. Desain tampilan form seperti dibawah ini:
89
No Komponen Properties
1 JTextField1 Nama Variabel : tKode_user
Text : (kosongkan)
2 JTextField2 Nama Variabel : tpassLama
Text : (kosongkan)
3 JTextField3 Nama Variabel : tpassBaru
Text : (kosongkan)
4 JTextField4 Nama Variabel : tkonfirmPass
Text : (kosongkan)
5 JButton1 Nama Variabel : jbutton1
Logika jalannya program:
1. Ketikkan Kode user
2. Ketikan password baru, enter. Ketikan konfirmasi
password baru lalu enter. Jika isi password baru dan
konfirmasi password tidak sama, muncul pesan:
(Password baru dan konfirmasi password lama harus
sama). Jika sama, muncul pesan:(password telah
diupdate).
3. Tekan Keluar untuk kembali ke menu utama.
Listing Program Form Ganti Password:
90
.
91
1. Klik kanan pada jButtton, pilih Event – Action –
actionPerformed, ketik script:
2. Klik kanan pada tpassLama, pilih Event – Action –
actionPerformed, ketik script:
3. Klik kanan pada tpassBaru, pilih Event – Action –
actionPerformed, ketik script:
92
4. Klik kanan pada tkomfirmPass, pilih Event – Key –
KeyPressed, ketik script:
93
Tampilan running form Ganti_Password
2.3.2 Membuat Form Master User
Desain Form Master User
94
1. Klik kanan pada package storage_App – New –
JInternalFrame Form
2. Isi Class Name : Master_User –
Finish
Form Aplikasi_Master_User
95
Spesifikasi properties komonen form Master_User
No Komponen Properties
1 JTextField1 Nama Variabel : tkode Text : (kosongkan)
2 JTextField2 Nama Variabel : tnama Text : (kosongkan)
3 JTextField3 Nama Variabel : tpass Text : (kosongkan)
4 JTextField4 Nama Variabel : tlevel Text : (kosongkan)
5 JTextField5 Nama Variabel : tcari Text : (kosongkan)
6 JButton1 Nama Variabel : bt_tambah Text : (kosongkan)
7 JButton2 Nama Variabel : bt_keluar Text : (kosongkan)
8 JButton3 Nama Variabel : bt_hapus Text : (kosongkan)
9 JTable1 Nama Variabel : jtbl
10 Jlabel Nama Variabel : lblwaktu,tgl Text : (JAM, TANGGAL)
96
1. Ketik Script method-method dibawah ini pada
tampilan listing:
97
98
99
2. Klik kanan pada bt_keluar, pilih Event – Action – Action
Performed, ketikan Script Berikut:
100
101
3. Klik kanan pada bt_tambah, pilih Event – Action –
Action Performed, ketikan Script Berikut:
4. Klik kanan pada bt_hapus, pilih Event – Action – Action
Performed, ketikan Script Berikut:
102
5. Klik kanan pada tkode, pilih Event – key – KeyPressed,
ketikan Script Berikut:
6. Klik kanan pada tnama, dan tpass, pilih Event – key –
KeyPressed, ketikan Script Berikut: (memindahkan
posisi kursor ke object tertentu saat dienter)
103
7. Klik kanan pada tbl_brg, pilih Event – Mouse –
MouseClicked, ketikan Script Berikut: (memanggil
method SetTabel yang berfungsi untuk menampilkan
nilai-nilai pada tabel ke dalam form)
8. Klik kanan pada tbl_brg, pilih Event – Key –
KeyPressed, ketikan Script Berikut: (memanggil
method HapusData untuk menghapus data pada tabel
terpilih pada saat ditekan tombol Backspace)
9. Klik kanan pada tcari, pilih Event – Key – KeyTyped,
ketikan Script Berikut:
104
2.3.3 Pembuatan Laporan Data Barang, User, Dan Struk
Penjualan
A. Persiapan pembuatan Laporan
Dalam bahasa pemrograman Java kita dapat membuat
laporan dengan menggunakan Plugin tambahan, yaitu
iReport. Ireport atau yang juga dikenal dengan nama Jasper
Report adalah plugin milik IDE Netbeans, yang dapat
digunakan secara bebas karena bersifat Open Source. Selain
plugin iReport, kita juga membutuhkan Library Jar untuk
memanggil dan menampilkan iReport silakan.
Langkah-langkah dalam Instalasi Plugin iReport di Netbeans
adalah sebagai berikut:
1. Jalankan Netbeasn, pilih menu Tools – Plugin
2. Pilih tab Downloadead – Add Plugins
3. Cari hasil download Plugin iReport nya, pastikan sudah
mengekstrak Plugin iReport
105
4. Pilih semua file *.nbm yang ada didalam folder plugin
iReport
106
5. Ikuti langkah-langkah seperti saat anda menginstall
program aplikasi. Jika proses sudah selesai, biarkan
netbeans untuk restrart.
6. Tambahkan Libraries untuk bisa terhubung ke
database
Klik kanan pada Libraries – Add Libraries – Pilih
JasperReports 3.0.1 – Add Library
107
B. Pembuatan Laporan Data Barang
Langkah-langkah untuk membuat Laporan Data barang
adalah sebagai berikut:
1. Pada jendela Welcome Window klik gambar drum
(Datasource) untuk membuat Datasource baru yang
digunakan untuk koneksi laporan ke Database.
108
2. Pilih Database JDBC Connection - Next
109
3. Silakan isi data berikut, klik test sebelum melakukan
penyimpanan (Save)
4. Setelah kita membuat Datasource untuk koneksi
laporan ke Database, langkah berikutnya adalah
membuat laporan dengan iReport. Masih pada jendela
Welcome Window, klik gambar laporan
110
5. Pilih template (pilih Blank A4, kita desain sendiri) –
pilih Launch Report Wizard
6. Beri nama report dan atur tempat penyimpanannya.
Masukkan dalam package aplikasi_toko. Nama report :
Laporan_Barang. Klik Next >
111
Tuliskan Query yang diperlukan. Karena kita akan
menampilkan laporan data
Barang, maka kita tuliskan query dengan “Select * from
barang” || Next >
112
7. Pilih field yang akan ditampilkan pada laporan || Next
>
8. Pada jendela Group By klik Next saja. Setelah itu Finish
9. Masukkan field yang ingin ditampilkan ke laporan
(drag ke dalam desain report Detail 1)
113
10. Hasil setelah dimasukkan kedalam desain report
114
11. Silakan desain report seperti berikut:
12. Klik Preview Jika ingin melihat hasil reportnya.
C. Menampilkan Laporan iReport
Seperti dijelaskan diawal, Untuk bisa menampilkan
laporan barang, kita perlu
115
Library tambahan iReport jar. Langkah-langkahnya adalah
sebagai berikut:
1. pastikan anda telah mendownload iReport jar. Simpan
file-file jar tersebut ke dalam folder jar (silakan buat
folder jar didalam project storage.App)
2. klik kanan pada Libraries – Add JAR/Folder
3. Pilih File JAR yang dibutuhkan, lihat gambar, || Open
D. Pembuatan Laporan Data User
116
Untuk membuat laporan data User silakan anda ikuti
langkah-langkah seperti
membuat laporan data barang. Dimulai dari langkah ke 4
sampai dengan selesai (langkah ke 1-3 adalah membuat
datasource, cukup sekali untuk membuatnya). Beri nama
laporan user dengan Laporan_User.
E. Pembuatan Struk
Langkah-langkah dalam membuat struk penjualan
adalah sebagai berikut:
1. Ikuti langkah-langkah ke 4 sampai dengan langkah ke 6
dalam pembuatan laporan data barang.
Template : Blank A4 Landscape
Nama report : Struk
Tempat penyimpanan disamakan dengan penyimpanan
laporan barang.
Tuliskan query berikut, || Next >
117
3. Pilih field yang akan ditampilkan di struk
118
4. Pada jendela Group By klik Next saja. Setelah itu Finish
5. Membuat report Group di Footer untuk menampilkan
field Total. Klik Kanan Pada Report Inspector - Struk -
Add Report Group
119
6. Beri nama grup seperti berikut
7. Untuk Details, ceklist Add the Group Footer || Finish
120
8. Masukkan field yang ingin ditampilkan kedalam Struk
9. Desain struk seperti di bawah ini:
10. Langkah berikutnya adalah kita membuat parameter
nomor transaksi, karena kita akan mencetak struk
121
berdasarkan nomor transaksi. Pilih report query yang
berada di sebelah Preview
11. Klik New Parameter, beri nama notrans, value
Expression : Text || OK
122
12. Edit query yang ada pada report query seperti dibawah
ini, setelah itu OK
13. Klik Preview, maka akan muncul jendela Parameter
Prompt, masukan salah satu notarnsaksi yang ada di
tabel. Contoh saya masukkan no.transaksi FK-
1907001 || OK
123
Hasilnya adalah sebagai berikut:
F. Membuat Laporan Penjualan Per Priode
Langkah-langkah untuk membuat laporan
penjualan per priode adalah sebagai berikut:
1. Ikuti langkah-langkah ke 4 sampai dengan langkah ke 6
dalam pembuatan laporan data barang pada
pembahasan sebelumnya.
Template : Blank A4
Nama report : Laporan_Periode
Tempat penyimpanan disamakan dengan
penyimpanan laporan barang
2. Kaena kita akan membuat laporan transaksi, Tuliskan
query berikut, || Next >
124
3. Pilih field yang akan ditampilkan di laporan (Pilih
semua)
4. Pada jendela Group By klik Next saja. Setelah itu
Finish
5. Masukkan field kedalam design report
125
Desain tampilan report seperti di bawah ini
6. Langkah berikutnya adalah kita membuat parameter.
Berbeda dengan sebelumnya pada pembuatan Struk, kita
hanya menggunakan 1 parameter yaitu notrans. Kali ini
kita membutuhkan 2 buah parameter, karena ada 2 buah
tanggal. Yaitu tanggal awal dan tanggal akhir. Untuk
tanggal awal beri nama parameter dengan tgl1, dan untuk
126
tanggal akhir beri nama parameter dengan tgl2. Untuk
Value Expression beri nilai kedua parameter dengan Text.
Cara membuat parameter sudah dibahas saat pembuatan
Struk (langkah 10), jika lupa silakan kembali lagi ke
pertemuan sebelumnya
8. Edit query yang ada pada report query seperti dibawah
ini, setelah itu OK
127
9. Masukkan parameter tgl1 dan tgl2 kedalam laporan
(Click – Drag)
10. Klik Preview, maka akan muncul jendela Parameter
Prompt, masukkan tanggal awal (tgl1) dan tanggal akhir
128
(tgl2) yang akan kita lihat laporannya. Contoh saya
masukkan tgl1 2019-07-01 dan tgl2 2019-07-23 || OK
11. Hasil laporan penjualan per priode
G. Membuat Laporan Penjualan Per Bulan
Pada dasarnya membuat laporan penjualan perbulan
dan laporan penjualan perpriode adalah sama. Langkah-
langkah pembuatan laporan penjualan perbulan adalah
sebagai berikut:
1. Ikuti langkah 1-5 saat pembuatan laporan per priode
Template : Blank A4
Nama report : Laporan_Perbulan
2. Desain laporan seperti berikut:
129
3. Buat 2 buah parameter dengan nama dt1 dan dt2. (dt1
untuk bulan, dt2 untuk tahun)
130
4. Edit query yang ada pada report query seperti dibawah
ini, setelah itu OK
5. Masukkan parameter dt1 dan dt2 kedalam laporan
(Click – Drag)
131
6. Klik Preview, maka akan muncul jendela Parameter
Prompt, masukkan Bulan (dt1) dan Tahun (dt2) yang akan
kita lihat laporannya. Contoh saya masukkan
dt1: 7 , dt2: 2019 || OK
7. Hasil laporan penjualan Perbulan:
132
H. Cara menambahkan gambar pada Java Netbeans
1. Klik kanan pada Source package – klik kanan dan pilih
Java Package
2. Beri nama gambar
133
3. Pilih jlabel – Klik kanan dan pilih Properties, seperti
gambar berikut :
4. Kemudian klik icon, perhatikan gambar berikut:
134
135
5. Setelah itu pilihlah tempat penyimpanan gambar
tersebut,
Contoh :
Package : gambar
File : background.jpg (nama file dari gambar)