BAB IV RANCANGAN SISTEM DIUSULKAN

BAB IV RANCANGAN SISTEM DIUSULKAN 4.1. Struktur Tabel Basis Data Bagian ini dibuat berdasarkan class diagram yang digambarkan pada bab sebelumnya, struktur tabel basis data merupakan rincian dari setiap class yang ada pada class diagram. Pembuatan program aplikasi ini penulis menggunakan satu database yaitu lasalle.sql yang terdiri dari tabel berikut : 1. Tabel datamahasiswa : Data Mahasiswa : 76 karakter : user_id Tabel IV.1 Spesifikasi File datamahasiswa 1 User ID User_id Varchar 11 Primary Key 2 Username Username Varchar 30 3 Jenis Kelamin Jk Varchar 15 4 Program Program Varchar 20 2. Tabel datauser : Data User : 60 karakter : user_id 68

69 Tabel IV.2 Spesifikasi File datauser 1 User ID User_id Varchar 5 Primary Key 2 Username Username Varchar 20 3 Password Password Varchar 15 4 Hak Akses Hakakses Varchar 20 3. Tabel br_form : Budget Request Form : 85 karakter : kode_br Tabel IV.3 Spesifikasi File br_form 1 Kode BR Form Kode_br Varchar 10 Primary Key 2 Requester requester Varchar 25 3 Tanggal Tgl Date 4 Keterangan Keterangan Varchar 50 4. Tabel purchase_order : Purchase Order Form : 50 karakter : po_number Tabel IV.4 Spesifikasi File purchase_order 1 PO Number Po_number Varchar 10 Primary Key 2 Tanggal PO Tgl_po Date 3 Keterangan Keterangan Varchar 30 4 Budget Request Number Br_number Varchar 10

70 5. Tabel cashpayment : Cash Payment Form : 20 karakter : cp_number Tabel IV.5 Spesifikasi File cashpayment 1 Cash Payment Number Cp_number Varchar 10 Primary key 2 Tgl Transaksi Tgl_cp Date 3 Budget Request Number Br_number Varchar 10 6. Tabel invoice : Invoice : 101 karakter : no_inv Tabel IV.6 Spesifikasi File invoice 1 Invoice Number No_inv Varchar 10 Primary Key 2 Tanggal Transaksi Tgl_inv Date 3 Keterangan keterangan Varchar 30 4 Harga Harga Integer 5 Total Total Integer 6 User ID User_id Varchar 11 Foreign Key 7 Username Username Varchar 30 Foreign Key 8 Program Program Varchar 20 Foreign Key 7. Tabel receiptform : Receipt Form : 111 karakter : rf_number

71 Tabel IV.7 Spesifikasi File receiptform 1 Receipt Form Number Rf_number Varchar 10 Primary Key 2 Tanggal Transaksi Tgl_rf Date 3 Keterangan Keterangan Varchar 30 4 Harga Harga Integer 5 Total Total Integer 6 No. Invoice No_inv Varchar 10 Foreign Key 7 User ID User_id Varchar 11 Foreign Key 8 Username Username Varchar 30 Foreign Key 9 Program Program Varchar 20 Foreign Key 8. Tabel transaksilaporan : Laporan : 10 karakter : rf_number Tabel IV.8 Spesifikasi File laporan 1 Kode Laporan Kode_laporan Varchar 10 Primary Key 3 Tanggal Awal Tgl_awal Date 4 Tanggal Akhir Tgl_akhir Date

72 4.2. Perancangan Tampilan (MockUp) Perancangan ini menggambarkan bagaimana tampilan web support akan dibuat, seperti diantaranya susunan menu, button, pengisian kolom apakah combo box dll dirincikan pada bagian ini. a. Menu Login Gambar berikut adalah halaman yang akan muncul ketika user login ke dalam aplikasi. Gambar 4.1 Mock Up Login

73 b. Menu Utama Gambar berikut adalah halaman yang akan muncul ketika admin finance login ke dalam aplikasi. Gambar 4.2 Mock Up Menu Utama Keterangan : a. Ketika Admin Finance login ke dalam aplikasi, hanya muncul menu : Data Master (Data User & Data Mahasiswa), Data Form (Budget Request Form). Untuk yang lainnya tidak muncul / di hidden. b. Ketika bagian penerimaan keuangan login ke dalam aplikasi, hanya muncul menu : Data Form (Receipt Form & Invoice) dan Menu Laporan (Laporan Bulanan Penerimaan). Untuk yang lainnya tidak muncul / di hidden.

74 c. Ketika bagian pengeluaran keuangan login ke dalam aplikasi, hanya muncul menu : Data Form (Cash Payment Form) dan Menu Laporan (Laporan Pengeluaran Keuangan). Untuk yang lainnya tidak muncul / di hidden. d. Ketika bagian Manager Finance login ke dalam aplikasi, hanya muncul menu : Menu Form Pending Approval (Budget Request Form, Cash Payment Form, Purchasing Order (PO), dan Menu Laporan (Laporan Bulanan Keseluruhan)). Untuk yang lainnya tidak muncul / di hidden. e. Ketika bagian Manager Divisi login ke dalam aplikasi, hanya muncul menu : Menu Form Pending Approval ( Budget Request Form). Untuk yang lainnya tidak muncul / di hidden. f. Ketika bagian Head Principal login ke dalam aplikasi, hanya muncul menu : Menu Form Pending Approval (Budget Request Form). Untuk yang lainnya tidak muncul / di hidden. g. Ketika bagian Purchasing login ke dalam aplikasi, hanya muncul menu : Menu Form Pending Approval (Purchasing Order (PO)). Untuk yang lainnya tidak muncul / di hidden. Catatan : Untuk Menu Utilitas, di semua user muncul setiap kali user login ke dalam aplikasi.

75 c. Data Mahasiswa Gambar berikut adalah halaman yang akan muncul ketika di menu utama admin finance memilih sub menu Data Mahasiswa pada Data Master. Gambar 4.3 Mock Up Data Mahasiswa

76 d. Data User Gambar berikut adalah halaman yang akan muncul ketika di menu utama admin finance memilih sub menu Data Mahasiswa pada Data Master. Gambar 4.4 Mock Up Data User

77 e. Budget Request Form Gambar berikut adalah halaman yang akan muncul ketika admin finance memilih sub menu Budget Request Form pada menu Form. Gambar 4.5 Mock Up Budget Request Form Keterangan : a. Ketika Admin Finance selesai menginput Form Budget Request, form Budget Request masuk ke menu pending approval manager divisi. Form Budget Request harus di approval, agar bisa selanjutnya di proses oleh Manager Finance.

78 b. Ketika Manager Divisi sudah approval, form Budget Requst masuk ke menu pending approval Manager Finance untuk di approval. c. Setelah Manager Finance approval, form budget request masuk ke menu pending approval Head Principal untuk di approval. f. Invoice Gambar berikut adalah halaman yang akan muncul ketika Staff bagian penerimaan keuangan memilih sub menu Invoice pada menu Form. Gambar 4.6 Mock Up Invoice

79 g. Receipt Form Gambar berikut adalah halaman yang akan muncul ketika Staff bagian penerimaan keuangan memilih sub menu Receipt Form pada menu Form. Gambar 4.7 Mock Up Receipt Form

80 h. Laporan Bulanan Penerimaan dan Pengeluaran Keuangan Gambar berikut adalah halaman yang akan muncul ketika Staff bagian penerimaan keuangan memilih sub menu Laporan Bulanan Penerimaan Keuangan pada Menu Laporan. Gambar 4.8 Mock Up Laporan Bulanan Penerimaan dan Pengeluaran Keuangan

81 i. Cash Payment Form Gambar berikut adalah halaman yang akan muncul ketika staff bagian pengeluaran keuangan memilih sub menu Cash Payment Form pada menu Form. Gambar 4.9 Mock Up Cash Payment Form

82 j. Purchase Order Form Gambar berikut adalah halaman yang akan muncul ketika purchasing memilih sub menu purchase order pada menu Form. Gambar 4.10 Mock Up Purchase Order Keterangan : a. Ketika bagian Purchasing approval form purchase order (PO), PO tersebut masuk ke menu form pending approval Manager Finance untuk di approval.