Modul Praktikum Pemrograman Visual Akuntansi II · Modul Praktikum Pemrograman Visual Akuntansi II Page 4 Class Di JSP (Aplikasi SIA) 2.1. Teori Class Diagram Diagram kelas atau class

MODUL PRAKTIKUM

Pemrograman Visual Akuntansi II

Disusun Oleh :

Windi Irmayani, SE. M.Kom.

JURUSAN KOMPUTERISASI AKUNTANSI

AMIK BSI PONTIANAK

2018

KATA PENGANTAR

Alhamdullillah saya panjatkan kehadirat Allah SWT, yang telah melimpahkan rahmat dan

karunia-Nya, karena akhirnya saya dapat menyelesaikan Modul Pemrograman Visual Akuntansi

II ini dengan baik. Oleh karena itu pada kesempatan ini, saya ingin menyampaikan ucapan terima

kasih kepada:

1. Direktur AMIK BSI Pontianak

2. Wakil Direktur Bidang Akademik

3. Ketua Jurusan Komputerisasi Akuntansi AMIK BSI Pontianak

4. Staff / Karyawan / Dosen dilingkungan AMIK BSI Pontianak.

Saya menyadari akan kekurangan yang masih ada, untuk itu saya bersikap terbuka pada

masukan yang membangun demi penyempurnaan modul ini. Terima kasih.

Pontianak, Maret 2018

Penyusun

Page ii

DAFTAR ISI

Kata Pengantar

Daftar Isi ............................................................................................................... ii

Database SIA .................................................................................................. 1

1.1. Pembuatan Database SIA (Lanjutan) .......................................................... 1

1.2. Relasi Database SIA ............................................................................ 3

Class Di JSP (Aplikasi SIA) .......................................................................... 4

2.1. Teori Class Diagram .................................................................................. 4

2.2. Pembuatan Class Di Dalam Aplikasi SIA ............................................. 4

Aplikasi SIA ..................................................................................................... 16

3.1. Form Tampil Periode Aplikasi SIA ............................................................ 16

3.2. Form Periode Aplikasi SIA ....................................................................... 17

3.3. Tugas 1 (Kelompok) Membuat Form Entry User ..................................... 23

Aplikasi SIA (Lanjutan) .................................................................................. 24

4.1. Form Kas Masuk Aplikasi SIA .............................................................. 24

4.2. Tugas 2 (Kelompok) Membuat Form Kas Keluar ................................ 30

4.3. Form Jurnal Umum Aplikasi SIA........................................................... 30

4.4. Tugas 3 (Kelompok) Membuat Tampilan Informasi Data,

modifikasi Template aplikasi SIA dan validasi

dari masing masing form ........................................................................ 41

DAFTAR PUSTAKA ......................................................................................... 43

Modul Praktikum Pemrograman Visual Akuntansi II

Page 1

Database SIA

1.1. Pembuatan Database SIA

Database adlah kumpulan data-data yang saling memiliki hubungan antara

satu dan lainnya. Hubungan ini dapat tergambar dari adanya field kunci dari setiap

table.

Dalam satu file atau table terdapat record yang sejenis dengan ukuran yang

sama dan merupakan kumulan entitas yang sama.

Database memiliki beberapa kriteria yang penting yaitu (Gata:2013):

a. Bersifat data oriented

b. Dapat digunakan oleh beberapa program aplikasi tanpa perlu merubah

basis datanya

c. Dapat dikembangkan dengan mudah baik volume maupun strukturnya

d. Dapat memenuhi kebutuhan system-sistem baru secara mudah

e. Dapat digunakan dengan cara-cara yang berbeda

Studi kasus database yang akan digunakan dalam penyelesai projek

matakuliah pemrograman visual akuntansi II berorientasi pada Sistem Informasi

Akuntansi(SIA). Mahasiswa memiliki pengalaman pembuatan database dan

tabel-tabel di semester 3. Untuk database yang digunakan merupakan lanjutan

dari database aplikasi SIA di semester 3 dan diharapkan jangan membuat

database baru. Berikut lanjutan tabel dari database SIA di semester 3

1. Gunakan Xampp dalam pembuatan database dan tabel yang diperlukan dalam

studi kasus 2. Database Name: sia (Lanjutan Dari Semester 3)

Tabel periode

Field Type Size Keterangan thn Int 4 Primary Key

awal_bulan Varchar 15

akhir_bln Varchar 15

status Enum “Aktif”,”Nonaktif”

Tabel user

Field Type Size Keterangan user_name Varchar 10 Primary Key

nama_user Varchar 25

password Varchar 10

hak_akses Varchar 8

Tabel kas_in

Field Type Size Keterangan no_km Varchar 10 Primary Key

tgl_km date

keterangan Varchar 50

Tabel kas_in_detail


Page 2

Field Type Size Keterangan no_km Varchar 10 Foreign Key

kode_akun Varchar 5

nominal int 11

Tabel kas_out

Field Type Size Keterangan no_kk Varchar 10 Primary Key

tgl_kk date

memo Varchar 50

Tabel kas_ous_detail

Field Type Size Keterangan no_kk Varchar 10 Foreign Key

kode_akun Varchar 5

nominal int 11

Tabel jurnal

Field Type Size Keterangan no_referensi Varchar 10 Primary Key

tgl_trans Date

no_bukti_trans Varchar 10

transaksi Varchar 100

Tabel jurnal_detail

Field Type Size Keterangan no_referensi Varchar 10 Foreign Key

kode_akun Varchar 5

no_bukti_trans Varchar 10

transaksi Varchar 100


Page 3

1.2. Relasi Database SIA


Page 4

Class Di JSP (Aplikasi SIA)

2.1. Teori Class Diagram

Diagram kelas atau class diagram menggambarkan struktur sistem dari

segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem. Kelas

memiliki apa yang disebut atribut dan metode atau operasi.

Atribut merupakan variabel-variabel yang dimiliki oleh suatu kelas

Operasi atau metode adalah fungsi fungsi yang dimiliki oleh suatu kelas

Diagram kelas dibuat agar pembuatan program atau programmer membuat

kelas-kelas sesuai rancangan di dalam diagram kelas agar antara dokumentasi

perancangan dan perangkat lunak sinkron. Banyak berbagai kasus, perancangan

kelas yang dibuat tidak sesuai dengan kelas-kelas yang dibuat pada perangkat

lunak, sehingga tidaklah ada gunanya lagi sebuah perancangan karena apa yang

dirancang dan hasil jadinya tidak sesuai.

Kelas-kelas yang ada pada struktur sistem harus dapat melakukan fungsi-

fungsi sesuai dengan kebutuhan sistem sehingga pembuat perangkat lunak atau

programmer dapat membuat kelas-kelas di dalam program perangkat lunak sesuai

dengan perancangan diagram kelas. Susunan struktur kelas yang baik pada

diagram kelas sebaiknya memiliki jenis-jenis kelas berikut :

Kelas main

Kelas yang memiliki fungsi awal di eksekusi ketika sistem berjalan

Kelas yang menangani tampilan sistem (view)

Kelas yang mendefinisikan dan mengatur tampilan ke pemakai

Kelas yang diambil dari pendefinisian use-case (controller)

Kelas yang menangani fungsi-fungsi yang harus ada diambil dari

pendefinisian use-case, kelas ini biasanya disebut dengan kelas proses

yang menangani proses bisnis pada perangkat lunak

Kelas yang diambil dari pendefinisian data (model)

Kelas yang digunakan untuk memegang atau membungkus data menjadi

sebuah kesatuan yang diambil maupun akan disimpan ke dalam basis data.

Semua tabel yang dibuat di basis data dapat dijadikan kelas, namun untuk

tabel dari hasil relasi atau atribut multivalue pada ERD dapat dijadikan

kelas tersendiri dapat juga tidak asalkan pengaksesannya dapat di

pertanggungjawabkan atau tetap ada di dalam perancangan kelas.

2.2. Pembuatan Class Di Dalam Aplikasi SIA Di dalam aplikasi SIA class model yang dipakai ada 7 yaitu model akun,

model jurnal, model saldo awal, model user (tugas mahasiswa), model periode,

model kas keluar (tugas mahasiswa) dan model kas masuk. Berikut ini pembuatan

dan coding untuk masing masing model yang dipakai di aplikasi SIA

A. Pembuatan Folder Model

Klik kanan di source packages lalu pilih new lalu pilih folder seperti

gambar dibawah ini


Page 5

Lalu berikan nama folder “model” setelah itu klik finish

B. Pembuatan Class Model

Untuk pembuatan class model menggunakan java class dan semuanya

disimpan di dalam folder model yang tadi kita buat. Untuk menambahkan java

class baru yaitu dengan cara klik kanan di folder model lalu pilih new dan pilih

java class seperti gambar dibawah ini


Page 6

setelah itu berikan nama class sesuai dengan nama class form masing masing dan

pastikan penyimpanan class berada di dalam folder model, jika sudah ok semua

lalu klik finish.


Page 7

Berikut masing-masing coding dari class yang digunakan di dalam Aplikasi SIA

1. Class Periode

Pastikan berada di dalam folder model

Isi dengan nama

class masing

masing form


Page 8


Page 9

2. Class Kas Masuk


Page 10


Page 11

3. Class Jurnal


Page 12


Page 13


Page 14


Page 15


Page 16

Aplikasi SIA

3.1. Form Tampil Periode Aplikasi SIA

Form periode digunakan untuk menentukan periode aktif dalam tahun

akuntansi berjalan. Berikut tampilan design form periode dan simpan dengan

nama tampil_periode.jsp.

Pembuatan form periode dibagi menjadi 3 step yaitu :

1. Pembuatan pencarian data periode

2. Pembuatan link untuk tambah periode

3. Pembuatan tampilan data periode

Berikut source code dari tampilan tersebut:

Cara yang digunakan sama

seperti form master akun

yang di pelajari di semester

3


Page 17

3.2. Form Periode Aplikasi SIA

Tampilan form periode digunakan untuk menambahkan data baru di

dalam form periode. Berikut ini adalah tampilan form periode, design seperti

gambar dibawah dan berikan nama add_periode.jsp

Berikut source code dari tampilan tersebut:


Page 18

Ada sedikit perbedaan di tampilan periode saat kita klik tambah periode atau klik

edit di tampil periode.

Tampilan saat kllik tambah periode


Page 19

Berikut source code untuk edit periode :

Tampilan Periode Saat Di Klik Edit


Page 20

Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan

servlet akun di semester 3. Berikut source code servlet periode.


Page 21


Page 22


Page 23

3.3. Tugas 1 (Kelompok) Membuat Form Entry User

1. Perhatikan tampilan diatas, adalah Form untuk entry user dimana klik

terlebih dahulu tambah user yang ada di form tampil user lalu kemudian

akan tampil form input user baru dan selanjutnya input lengkap data user

lalu klik insert maka data user akan tampil di tabel user di halaman tampil

user.

2. Mahasiswa di harapkan untuk berkreatifitas terhadap tampilan user dan

tampil_user.jsp


Page 24

Aplikasi SIA (Lanjutan)

4.1. Form Kas Masuk Aplikasi SIA

Form kas masuk digunakan untuk menginput transaksi kas masuk yang

terjadi di tahun periode akuntansi. Berikut tampilan design form kas masuk dan

simpan dengan nama kas_masuk.jsp

Alur Program Kas Masuk :

1. Pembuatan form kas masuk menggunakan nomor otomatis untuk masing masing nomor kas masuk

2. Untuk pemilihan akun pertama di filter hanya kas dan bank saja yang tampil karena digunakan untuk

penerimaan kas masuk,sedangkan untuk pemilihan akun

kedua bebas semua akun bisa tampil

Note : disarankan membuka aplikasi dengan google chrome agar tanggal transaksi tidak tampil

sebagai textbox


Page 25

Berikut source code untuk kas masuk :


Page 26


Page 27


Page 28

Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan

servlet periode. Berikut source code servlet kas masuk.


Page 29


Page 30

4.2. Tugas 2 (Kelompok) Membuat Form Kas Keluar

Panduan Pengerjaan Form Kas Keluar

1. Pembuatan form kas keluar menggunakan nomor otomatis untuk masing

masing nomor kas keluar

2. Untuk pemilihan akun pertama di filter hanya kas dan bank saja yang

tampil karena digunakan untuk pengeluaran aktiva lancar perusahaan,

sedangkan untuk pemilihan akun kedua bebas semua akun bisa tampil

3. Jika masih ada data yang belum lengkap tidak dapat disimpan

4. Pada saat klik insert data akan tersimpan ke tabel kas keluar dan kas keluar

detail

5. Mahasiswa di harapkan untuk berkreatifitas terhadap tampilan

kas_keluar.jsp

4.3. Form Jurnal Umum Aplikasi SIA

Form jurnal umum digunakan untuk menginput transaksi jurnal umum

yang terjadi di tahun berjalannya periode akuntansi. Berikut tampilan design form

jurnal umum dan simpan dengan nama jurnalUmum.jsp


Page 31

1. Pembuatan form Jurnal menggunakan nomor otomatis

untuk masing masing nomor referensi(jurnal)

2. Untuk no bukti transaksi dan keterangan di input

secara manual

3. Untuk penyimpanan data yang ingin disimpan harus

di berikan cek list terlebih dahulu agar tersimpan

Note : disarankan membuka aplikasi dengan google chrome agar tanggal transaksi

tidak tampil sebagai textbox


Page 32

Sebelum memulai coding pada jurnal umum, terlebih dahulu kita membuat file

penambahan program yang digunakan di form jurnal umum yaitu penambahan

javascript untuk penghitungan di jurnal umum, berikut proses pembuatannya

1. Klik kanan di folder config lalu pilih new lalu pilih other seperti

gambar dibawah ini

Setelah itu pilih web lalu pilih java script file seperti gambar dibawah ini


Page 33

Klik next lalu berikan file dengan nama setting

Setelah setting.js sudah terbuat maka ketikkan coding berikut di dalam setting.js

Pastikan berada di

dalam folder config

Klik Finish


Page 34

Setelah file setting.js sudah terbuat dan sudah terisi coding maka tinggal kita

proses coding untuk jurnal_umum.jsp, berikut codingnya


Page 35


Page 36


Page 37


Page 38

Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan servlet

periode dan kas masuk. Berikut source code servlet jurnal umum.


Page 39


Page 40


Page 41

4.4. Tugas 3 (Kelompok) Membuat Tampilan Informasi Data, modifikasi

template aplikasi SIA dan validasi dari masing masing form

1. Informasi Data Mahasiswa diharapkan mampu berkreatifitas untuk membuat

tampilan informasi data.

Buat Tampilan Informasi data dan tambahkan fungsi pencarian data di

masing masing informasi data.

1. Cari Data Akun

2. Cari Data User

3. Cari Data Kas Keluar

4. Cari Data Kas Masuk

5. Cari Data Jurnal Umum


Page 42

2. Modifikasi Template Aplikasi SIA

Modifikasi template aplikasi SIA semenarik mungkin seperti contoh

dibawah ini

Buatlah tampilan aplikasi SIA seperti contoh di atas (Wajib berbeda dengan yg di

atas atau tampilan asli aplikasi SIA & masing masing kelompok tidak boleh

sama), bebas menggunakan template dari mana saja (CMS, Bootstrap, Dll).

Mahasiswa diharapkan dapat mampu membuat template web aplikasi SIA

semenarik mungkin.

3. Validasi data masing masing form

Buat Validasi kelengkapan data dari masing masing form, apabila data input

belum lengkap maka tidak akan bisa disimpan ke dalam database dan muncul

pesan java script seperti di atas.


Page 43

Daftar Pustaka

A.S, Rosa dan M. Shalahuddin. 2011. Modul Pembelajaran Rekayasa Perangkat

Lunak (Terstruktur Dan Berorientasi Objek). Bandung: Modula.

Gata, Windu dan Grace Gata. 2013. Sukses Membangun Aplikasi Penjualan

dengan Java. Jakarta: PT. Elex Media Komputindo

Modul Praktikum Pemrograman Visual Akuntansi II · Modul Praktikum Pemrograman Visual Akuntansi II Page 4 Class Di JSP (Aplikasi SIA) 2.1. Teori Class Diagram Diagram kelas atau class

Documents