BAB II Perancangan Aplikasi › index.php › unduh › item › ...4. Muncul jendela Welcome to the...

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


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


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


Notransaksi Varchar 15 Nomer transaksi

Jumlahbeli Int 11 Jumlah beli

Subtotal Double Subtotal


17

Tabel 2.4 Tabel Detai Transaksi

5. Tabel 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 :

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:

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 –


Script diatas berfungsi untuk memanggil form Laporan_User

21. Klik Kanan pada mnUser , pilih Event – Action –


Script diatas berfungsi untuk memanggil form

Aplikasi_Master_User

22. Klik Kanan pada mntransaksi , pilih Event – Mouse –

MouseClicked, ketik script


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 –


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


Aplikasi_Laporan.

Ketikkan Script diatas jika anda telah membuat form

Aplikasi_Laporan.

26. Klik Kanan pada mnGantiPassword , pilih Event –

Action – ActionPerformed, ketik script


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:

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


1. Masih dalam package storage_app, buat form baru

dengan JInternalFrame Form. Beri nama form dengan

nama : Barang_Keluar


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

82

2. Klik kanan pada tkodebarang, pilih Event – Action –


Memanggil method tampildatabarang(), dengan

melakukan pencarian terhadap kode barang yang diinput

pada textfield tkodebarang.

3. Klik kanan pada btbrowse, pilih Event – Action –


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 –


6. Klik kanan pada bttambah, pilih Event – Action –


Memberikan nilai kepada textfield tnotrans, yang diambil

dari method nomor()

7. Klik kanan pada btbatal, pilih Event – Action –


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 –


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 –


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 –


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


1. Masih dalam package storage_app, buat form baru

dengan JInternalFrame Form. Beri nama form dengan

nama : Ganti_Password

88


89


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:

91

1. Klik kanan pada jButtton, pilih Event – Action –


2. Klik kanan pada tpassLama, pilih Event – Action –


3. Klik kanan pada tpassBaru, pilih Event – Action –


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


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:

99

2. Klik kanan pada bt_keluar, pilih Event – Action – Action


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


102

5. Klik kanan pada tkode, pilih Event – key – KeyPressed,


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,


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


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


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


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


ini, setelah itu OK

127

9. Masukkan parameter tgl1 dan tgl2 kedalam laporan

(Click – Drag)


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


ini, setelah itu OK

5. Masukkan parameter dt1 dan dt2 kedalam laporan

(Click – Drag)

131


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:

135

5. Setelah itu pilihlah tempat penyimpanan gambar

tersebut,

Contoh :

Package : gambar

File : background.jpg (nama file dari gambar)

Date post:	27-Jan-2021
Category:	Documents
Upload:	others
View:	1 times
Download:	0 times

BAB II Perancangan Aplikasi › index.php › unduh › item › ...4. Muncul jendela Welcome to the...

Documents