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
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
Page 3
1.2. Relasi Database SIA
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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.
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
Page 8
Modul Praktikum Pemrograman Visual Akuntansi II
Page 9
2. Class Kas Masuk
Modul Praktikum Pemrograman Visual Akuntansi II
Page 10
Modul Praktikum Pemrograman Visual Akuntansi II
Page 11
3. Class Jurnal
Modul Praktikum Pemrograman Visual Akuntansi II
Page 12
Modul Praktikum Pemrograman Visual Akuntansi II
Page 13
Modul Praktikum Pemrograman Visual Akuntansi II
Page 14
Modul Praktikum Pemrograman Visual Akuntansi II
Page 15
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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:
Modul Praktikum Pemrograman Visual Akuntansi II
Page 18
Ada sedikit perbedaan di tampilan periode saat kita klik tambah periode atau klik
edit di tampil periode.
Tampilan saat kllik tambah periode
Modul Praktikum Pemrograman Visual Akuntansi II
Page 19
Berikut source code untuk edit periode :
Tampilan Periode Saat Di Klik Edit
Modul Praktikum Pemrograman Visual Akuntansi II
Page 20
Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan
servlet akun di semester 3. Berikut source code servlet periode.
Modul Praktikum Pemrograman Visual Akuntansi II
Page 21
Modul Praktikum Pemrograman Visual Akuntansi II
Page 22
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
Page 25
Berikut source code untuk kas masuk :
Modul Praktikum Pemrograman Visual Akuntansi II
Page 26
Modul Praktikum Pemrograman Visual Akuntansi II
Page 27
Modul Praktikum Pemrograman Visual Akuntansi II
Page 28
Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan
servlet periode. Berikut source code servlet kas masuk.
Modul Praktikum Pemrograman Visual Akuntansi II
Page 29
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
Page 34
Setelah file setting.js sudah terbuat dan sudah terisi coding maka tinggal kita
proses coding untuk jurnal_umum.jsp, berikut codingnya
Modul Praktikum Pemrograman Visual Akuntansi II
Page 35
Modul Praktikum Pemrograman Visual Akuntansi II
Page 36
Modul Praktikum Pemrograman Visual Akuntansi II
Page 37
Modul Praktikum Pemrograman Visual Akuntansi II
Page 38
Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan servlet
periode dan kas masuk. Berikut source code servlet jurnal umum.
Modul Praktikum Pemrograman Visual Akuntansi II
Page 39
Modul Praktikum Pemrograman Visual Akuntansi II
Page 40
Modul Praktikum Pemrograman Visual Akuntansi II
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
Modul Praktikum Pemrograman Visual Akuntansi II
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.
Modul Praktikum Pemrograman Visual Akuntansi II
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