Kata Pengantar Puji Syukur kepada Tuhan Yang Maha Esa, senantiasa mengiring segala aktifitas dalam penyelesain materi matakuliah Pemrograman Visual Akuntansi. Sesuai dengan tebaran kurikulum
Program
Studi
Komputerisasi
Akuntansi
AMIK
Bina
Sarana
Informatika,
Pemrograman Visual Akuntansi terdapat pada semester 3, 4 dan 5. Materi dikemas dengan menggabungkan unsur Pengetahuan, Ketrampilan, Sikap, Teknik dan Pengalaman. Unsur- unsur tersebut diharapkan adanya interaksi yang aktif mahasiswa dengan dosen setiap proses pembelajaran berlangsung. Ucapan terima kasih atas dukungan waktu, ide kreatif yang sudah kami terima selama penyelesain materi, kepada: 1. Direktur AMIK Bina S Sarana arana Informatika 2. Wadir I Bidang Akademik AMIK Bina Sarana Informatika 3. Ketua Program Studi Komputerisasi Komputerisasi Akuntansi AMIK Bina Sarana Informatika 4. Konsorsium Pengembangan Akademik(KomPak) Program Studi Komputerisasi Akuntansi AMIK Bina Sarana Informatika Informatika 5. Dosen dilingkungan AMIK Bina Sarana S arana Infromatika Infromatika 6. Para cendikiawan Indonesia yang sudah menuangkan ilmu pengetahuan melalui berbagai buku yang menjadi referensi dalam dalam penyelesain modul praktekum. praktekum. 7. Mahasiswa Program Studi Komputerisasi Akuntansi AMIK Bina Sarana Informatika, yang senantiasa memberikan memberikan inspirasi kepada kepada KomPak, Dosen Dosen untuk memberikan memberikan yang terbaik kepada mahasiswa dalam mempersiapkan masa depan. Semoga learning outcomes dari matakuliah Pemrograman Visual Akuntansi II mampu mempersiapkan mahasiswa memiliki pengetahuan, ketrampilan, sikap, teknik dan pengalaman menjadi Junior Programmer Java Web Base. Saran dalam rangka pengembangan modul Pemrograman Visual Akuntansi dapat disampaikan melalui email. Konsorsium Pengembangan Akademik Program Studi Komputerisasi Komputerisasi Akuntansi AMIK Bina Sarana Informatika Informatika
Tim Penyusun 2
Kata Pengantar Puji Syukur kepada Tuhan Yang Maha Esa, senantiasa mengiring segala aktifitas dalam penyelesain materi matakuliah Pemrograman Visual Akuntansi. Sesuai dengan tebaran kurikulum
Program
Studi
Komputerisasi
Akuntansi
AMIK
Bina
Sarana
Informatika,
Pemrograman Visual Akuntansi terdapat pada semester 3, 4 dan 5. Materi dikemas dengan menggabungkan unsur Pengetahuan, Ketrampilan, Sikap, Teknik dan Pengalaman. Unsur- unsur tersebut diharapkan adanya interaksi yang aktif mahasiswa dengan dosen setiap proses pembelajaran berlangsung. Ucapan terima kasih atas dukungan waktu, ide kreatif yang sudah kami terima selama penyelesain materi, kepada: 1. Direktur AMIK Bina S Sarana arana Informatika 2. Wadir I Bidang Akademik AMIK Bina Sarana Informatika 3. Ketua Program Studi Komputerisasi Komputerisasi Akuntansi AMIK Bina Sarana Informatika 4. Konsorsium Pengembangan Akademik(KomPak) Program Studi Komputerisasi Akuntansi AMIK Bina Sarana Informatika Informatika 5. Dosen dilingkungan AMIK Bina Sarana S arana Infromatika Infromatika 6. Para cendikiawan Indonesia yang sudah menuangkan ilmu pengetahuan melalui berbagai buku yang menjadi referensi dalam dalam penyelesain modul praktekum. praktekum. 7. Mahasiswa Program Studi Komputerisasi Akuntansi AMIK Bina Sarana Informatika, yang senantiasa memberikan memberikan inspirasi kepada kepada KomPak, Dosen Dosen untuk memberikan memberikan yang terbaik kepada mahasiswa dalam mempersiapkan masa depan. Semoga learning outcomes dari matakuliah Pemrograman Visual Akuntansi II mampu mempersiapkan mahasiswa memiliki pengetahuan, ketrampilan, sikap, teknik dan pengalaman menjadi Junior Programmer Java Web Base. Saran dalam rangka pengembangan modul Pemrograman Visual Akuntansi dapat disampaikan melalui email. Konsorsium Pengembangan Akademik Program Studi Komputerisasi Komputerisasi Akuntansi AMIK Bina Sarana Informatika Informatika
Tim Penyusun 2
DAFTAR ISI Halaman Kata Kata Pengant Pengantar ar .................................................. .................................................... Daftar Daftar Isi .................................................. .................................................... ............................................................. .........
2 3
Databa Database se SIA .................................................................................... ................................ .................................................... 1.1. Pembuatan Database Database SIA (Lanjutan) (Lanjutan) ........... ...... ........... ........... ........... ............ ........... .......... ..... 2.2. Relasi Database SIA ............. ....... ............. .............. .............. .............. .............. ............. ............. .......
4 5 6
Class Di Di JSP (Aplikasi (Aplikasi SIA) .................................................... ........................................................... ....... 2.1. Teori Teori Class Class Diagra Diagram m .................................................... .................................................................... ................ 2.2. Pembuatan Class Di Dalam Aplikasi Aplikasi SIA .............. ....... .............. .............. .......... ...
7 7 8
Aplikas Aplikasii SIA ............................................................................... ....... 3.1. Form Tampil Periode Aplikasi Aplikasi SIA ........... ..... ............ ........... ........... ........... .......... ........... ........ .. 3.2. Form Periode Aplikasi SIA .................................................. ....... 3.3. Tugas 1 (Kelompok) Membuat Form Entry User .......................
17 17 18 23
Aplikas Aplikasii SIA (Lanjut (Lanjutan) an) .......................................... ......................... 4.1. Form Kas Masuk Aplikasi SIA ............................................... 4.2. Tugas 2 (Kelompok) Membuat Form Kas Keluar .................. 4.3. Form Jurnal Umum Aplikasi SIA ............................................ 4.4. Tugas 3 (Kelompok) Membuat Tampilan Informasi Data, modifikasi Template aplikasi SIA dan validasi dari masing masing form ................................................... .......
25 25 32 33
DAFTAR DAFTAR PUSTAKA PUSTAKA .................................................................................. ............................ ............................................................. .......
44
41
3
Database SIA 1.1.
Pembuatan Database SIA Studi
kasus
database
yang
akan
digunakan
dalam
penyelesai
projek
matakuliah
pemrograman pemrograman visual akuntansi II berorientasi pada Sistem Informasi Informasi Akuntansi(SIA). 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 awal_bulan akhir_bln status
Int Varchar Varchar Enum
4 15 15 “Aktif”,”Nonaktif”
Primary Key
Field
Type
Size
Keterangan
user_name nama_user password hak_akses
Varchar Varchar Varchar Varchar
10 25 10 8
Primary Key
Field
Type
Size
Keterangan
no_km tgl_km keterangan
Varchar date Varchar
10
Primary Key
Tabel user
Tabel kas_in
50
Tabel kas_in_detail
Field
Type
Size
Keterangan
no_km kode_akun nominal
Varchar Varchar int
10 5 11
Foreign Key
4
Tabel kas_out
Field
Type
Size
Keterangan
no_kk tgl_kk memo
Varchar date Varchar
10
Primary Key
50
Tabel kas_ous_detail
Field
Type
Size
Keterangan
no_kk kode_akun nominal
Varchar Varchar int
10 5 11
Foreign Key
Tabel jurnal
Field
Type
Size
Keterangan
no_referensi tgl_trans no_bukti_trans transaksi
Varchar Date Varchar Varchar
10
Primary Key
10 100
Tabel jurnal_detail
Field
Type
no_referensi Varchar kode_akun Varchar no_bukti_trans Varchar transaksi Varchar
Size
Keterangan
10 5 10 100
Foreign Key
5
1.2.
Relasi Database SIA
Note : Dosen Menjelaskan tentang relasi database
6
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 kelaskelas 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
7
Kelas yang diambil dari pendefinisian data (mode l) 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
Lalu berikan nama folder “model” setela h itu klik finish 8
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
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.
9
Isi dengan nama class masing masing form
Pastikan berada di dalam folder model
Berikut masing-masing coding dari class yang digunakan di dalam Aplikasi SIA 1. Class Periode
10
11
2. Class Kas Masuk
12
3. Class Jurnal
13
14
15
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
tampil_periode.jsp .
Pembuatan form periode dibagi menjadi 3 step yaitu : 1. Pembuatan pencarian data periode 2. Pembuatan link untuk tambah periode
Cara yang digunakan sama seperti form master akun yang di pelajari di semester 3
3. Pembuatan tampilan data periode
16
nama
Berikut source code dari tampilan tersebut:
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 s eperti gambar dibawah dan berikan nama add_periode.jsp
Berikut source code dari tampilan tersebut:
18
Ada sedikit perbedaan di tampilan periode saat kita klik tambah periode atau klik edit di tampil periode.
Tampilan saat kllik tambah periode
Tampilan Periode Saat Di Klik Edit
19
Berikut source code untuk edit periode :
Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan servlet akun di semester 3. Berikut source code servlet periode.
20
21
22
3.3. Tugas 1 (Kelompok) Membuat Form Entry User
23
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
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
25
Berikut source code untuk kas masuk :
26
27
28
Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan servlet periode. Berikut source code servlet kas masuk.
29
30
31
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
32
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
1. Pembuatan
form Jurnal menggunakan masing masing nomor referensi(jurnal)
nomor
otomatis
untuk
2. Untuk no bukti transaksi dan keterangan di input secara manual
3. Untuk
penyimpanan data yang berikan cek list terlebih dahulu agar tersimpan
ingin
disimpan
harus
Note : disarankan membuka aplikasi dengan google chrome agar tanggal transaksi tidak tampil sebagai textbox
33
di
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
34
Klik next lalu berikan file dengan nama setting
Pastikan berada di dalam folder config
Klik Finish
Setelah setting.js sudah terbuat maka ketikkan coding berikut di dalam setting.js
35
Setelah file setting.js sudah terbuat dan sudah terisi coding maka tinggal kita proses coding untuk jurnal_umum.jsp, berikut codingnya
36
37
38
Setelah pembuatan form lakukan pembuatan servlet seperti pembuatan servlet periode dan kas masuk. Berikut source code servlet jurnal umum.
39
40
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
41
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.
42
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.
43
