BAB V IMPLEMENTASI 5.1
Lingkungan Implementasi Lingkungan implementasi merupakan uraian tentang perangkat apa saja
yang diperlukan dalam membangun aplikasi baik berupa perangkat keras maupun perangkat lunak. 5.1.1 Perangkat Keras Spesifikasi perangkat keras (hardware) yang digunakan dalam pembangunan sistem sebagai berikut :
Processor
: Intel(R) Core(TM)i5-2430 CPU support @ 2.40 GHz
Memory
: 1024MB
Monitor
Mouse
Keyboard
5.1.1
Perangak Lunak
Berikut
uraian
kebutuhan
perangkat
pembangunan sistem :
Xampp 1.7.7
Web Browser Google Chrome
Sublime Text
Heidi SQL
71
lunak
yang
digunakan
dalam
72
5.2
System Operating
: Windows 7 Ultimate
Implementasi Query Pada tahap ini, akan dilakukan beberapa query untuk menampilkan data
dan informasi di halaman dashboard pada menu grafik, tabel dan costum chart dimana data tersebut diambil dari sumber data warehouse yang telah dibuat sebelumnya. Berikut ini merupakan implementasi query sesuai dengan kebutuhan data: Tabel 5.1 Implementasi Query
No 1.
Informasi Query Jumlah Registrasi select P.NM_PRODI, P.NM_FAKULTAS, PER.Tahun, sum(reg.JML_MHS_REG) as Mahasiswa
2.
Rekap biaya keseluruhan per tahun
3.
Jumlah transaksi dengan tipe pembayaran autodebet
4.
Jumlah transaksi dengan biaya angsuran
JML_MHS_REG from fact_jml_mhs_reg reg JOIN dim_prodi p on(p.KD_PRODI = reg.KD_PRODI) join dim_periode per on (per.KD_PERIODE = reg.KD_PERIODE) group by reg.KD_PERIODE, reg.KD_PRODI select p.tahun, sum(b.TOTAL_BAYAR) as total_bayar from fact_total_bayar b join dim_periode p on (b.KD_PERIODE = p.KD_PERIODE) group by p.tahun select p.tahun, sum(hiji) as satu, sum(dua) as dua from q_hijidua a join dim_periode p on(p.KD_PERIODE = a.kd_periode) group by tahun select tahun,sum(f.JML_1_ANGSURAN) as satu, sum(f.JML_2_ANGSURAN) as dua from fact_jml_angsuran_1_2 f join dim_periode p on(f.KD_PERIODE = p.KD_PERIODE) group by f.kd_periode
73
5.3
Implementasi Antarmuka Pada tahap ini akan dibangun sistem aplikasi dashboard Keuangan (PuPd)
di Universitas Widyatama berdasarkan hasil rancangan sebelumnya. Terdapat dua halaman utama yang terdapat pada dashboard ini yaitu dashboard admin dan satunya lagi dashboard buat pengunjung.
5.3.1 Antarmuka Dashboard Administrator Antarmuka atau sering disebut interface pada sebuah aplikasi merupakan tahap implementasi hasil rancangan sebelumnya. Pada bagian ini terdapat fitur yang dapat mengatur koneksi data warehouse dan mengubah pengaturan tahun akademik di dalamnya. Berikut merupakan antarmuka aplikasi yang terdapat pada dashboard administrator : 1.
Antarmuka Halaman Login Halaman ini merupakan halaman yang pertama kali muncul saat admin
mengakses sistem ini. Dengan memasukkan username dan password dengan sesuai, admin dapat mengakses halaman utama dashboard admin. Jika admin memasukkan username dan password tidak sesuai, maka akan tampil pesan pemberitahuan dan admin tidak dapat mengakses halaman utama dashboard admin.
74
Gambar 5.1 Tampilan Halaman Login
2.
Gambar 5.2 Tampilan Halaman Gagal Login
Antarmuka Menu Home Halaman ini akan tampil setelah admin melakukan log in dan Menu Home
merupakan halaman utama pada bagian dashboard admin.
Gambar 5.3 Tampilan Antarmuka Halaman Home
3.
Antarmuka Menu Dashboard Halaman ini akan menampilkan halaman review dashboard untuk
pengunjung dengan fitur yang sama yaitu tampil grafik, tabel dan costum chart mengenai keuangan (PuPd) Universitas Widyatama.
75
Gambar 5.4 Tampilan Antarmuka Halaman Dashboard
4.
Antarmuka Menu Koneksi Halaman ini merupakan halaman untuk merubah koneksi ke data warehouse
jika dikemudian hari terdapat perubahan dengan mengisi semua inputan kecuali field database password jika data warehouse yang bersangkutan memiliki password. Halaman ini juga sudah dilengkapi dengan pemberitahuan jika salah satu inputan tidak diisi atau dikosongkan kecuali field database password. Selain itu jika inputan tidak sesuai maka akan muncul juga pemberitahuan. Di bagian review itu merupakan koneksi saat ini yang sedang digunakan.
Gambar 5.5 Tampilan Antarmuka Halaman Koneksi
76
5.
Antarmuka Halaman Periode Halaman ini merupakan halaman untuk mengganti periode akademik yang
sesuai dengan kebutuhan pada bagian keuangan (PuPd) Universitas Widyatama. Di bagian review, admin dapat mengetahui periode akademik saat ini yang telah digunakan.
Gambar 5.6 Tampilan Antarmuka Halaman Periode
5.3.2 Antarmuka Dashboard Antarmuka dashboard merupakan halaman sistem yang menampilkan informasi yang terkait dengan bagian keuangan (PuPd) Universitas Widyatama, baik dalam bentuk grafik dan tabel. Pada halaman ini juga, pengguna dapat mencostum chart yang sesuai dengan kebutuhan. Berikut merupakan antarmuka aplikasi yang terdapat pada dashboard : 1.
Antarmuka Menu Home Halaman ini merupakan halaman utama pada dashboard pengguna atau
pengunjung.
77
Gambar 5.7 Antarmuka Menu Home
2.
Antarmuka Menu Dashboard Pada halaman ini terdapat dua sub menu yaitu grafik dan tabel. Sub menu
grafik dapat menampilkan informasi yang terkait dengan keuangan (PuPd) Universitas Widyatama dalam bentuk grafik. Pada grafik tersebut, disediakan fitur drill-down agar pengguna dapat melihat grafik lebih mendetail. Sedangkan sub menu berikutnya yaitu tabel dimana pengguna dapat melihat rincian data dari setiap grafik yang dibuat.
Gambar 5.8 Antarmuka Sub Menu Grafik
78
Gambar 5.9 Antarmuka Sub Menu Tabel
3.
Antarmuka Menu Custom Chart Halaman ini pengguna dapat membuat grafik berdasarkan kebutuhan dengan
indikator tertentu yang telah dirancang. Pengguna dapat mengubah tingkat organisasi dari universitas, fakultas, hingga ke program studi yang terdapat di Univesitas Widyatama dan merubah indikator apa yang akan ditampilkan serta rentang waktu dari tahun berapa sampai tahun ke berapa yang akan ditampilkan.
Gambar 5.10 Antarmuka Menu Costum Chart
79
5.4
Sitemap Program Sitemap program merupakan pemetaan dari kode-kode yang telah dibuat
agar memudahkan dalam menelusuri jika terdapat kesalahan atau kekurangan pada saat pengimplementasian. Pada sitemap ini terdapat dua macam pemetaannya yaitu admin dashboard dan dashboard untuk pengunjung yang terletak di dalam satu folder yang sama. dashadmin
File CSS & File JavaScript
Index.php
Logout.php
home.php
config.php
Content.php
dashboard.php
koneksi.php
actionKoneksi.php
periode.php
actionPeriode.php
Gambar 5.11 Sitemap Program Dashboard Administrator
File index.php berisi kode program yang menampilkan halaman login sistem administrator dashboard, kode program pada file tersebut berfungsi untuk proses autentifikasi pengguna, jadi tidak semua pengguna bisa masuk ke sistem. Pengguna harus memasukkan username dan password yang sesuai dengan yang ada di database. Setelah proses autentifikasi berhasil maka akan membuka file
80
index.php, kode program pada file tersebut berfungsi untuk menampilkan menumenu sistem administrator dashboard. Pada saat pengguna memilih menu, maka file index.php akan memanggil file konten.php. Apabila pengguna memilih menu yang harus menghubungkan sistem dengan database, maka file config.php akan dipanggil.
Dashboard PUPD
File CSS & File JavaScript
Index.php
config.php
conten.php
Folder Conten
home.php
Grafik.php
Tabel.php
Costumchart.php
Gambar 5.12 Sitemap Program Aplikasi Dashboard
Desain dari Sistem dashboard Keuangan (PuPd) Universitas Widyatama dibangun menggunakan Framework bootstrap, semua file css dan javascript dipanggil di file index.php. File yang digunakan agar sistem terhubung ke database yaitu file config.php. Semua file yang digunakan untuk menampilkan menu – menu yang ada di sistem di simpan di folder content semua file yang
81
menggunakan grafik di folder content memanggil file highchart yang ada di folder highchart dalam folder css. 5.5
Alur Penggunaan Fitur Alur penggunaan fitur merupakan langkah-langkah menggunakan aplikasi
yang telah dibangun, sehingga pengguna dapat mengetahui cara penggunaan fitur dalam aplikasi yang dibangun. 5.5.1 Penggunaan Fitur Aplikasi Administrator Fitur-fitur yang tersedia di dalam aplikasi administrator dashboard ialah melihat dashboard PuPd, melakukan pengaturan untuk koneksi dashboard ke data warehouse, dan melakukan pengaturan tahun akademik yang ingin ditampilkan pada aplikasi dashboard. Berikut ini merupakan penjelasan dari masing-masing fitur. 1.
Melihat Dashboard PuPd Berikut ini merupakan langkah-langkah untuk melihat dashboard PuPd:
a.
Masuk ke aplikasi admin dashboard dengan mengklik tombol Login di aplikasi dashboard yang terletak di ujung atas sebelah kanan.
b.
Pilih tombol Yes.
c.
Masukkan username dan password, lalu klik tombol Sign in.
82
d.
Pilih Menu Dashoard yang terletak disebelah kiri.
1.
Mengubah Pengaturan Koneksi Berikut ini merupakan langkah-langkah untuk mengubah pengaturan koneksi
dari dashboard ke data warehouse: a.
Masuk ke halaman admin PuPd.
b.
Masukkan username dan password, lalu klik tombol Sign in.
c.
Pilih Menu Koneksi yang terletak di sebelah kiri.
83
d.
Masukkan data koneksi yang akan diubah. Jika semua data telah diisi, klik tombol Update.
2.
Mengubah Pengaturan Periode/Tahun Akademik Berikut ini merupakan langkah-langkah untuk mengubah pengaturan
periode/tahun akademik yang ingin ditampilkan pada aplikasi dashboard: a.
Masuk ke halaman admin dashboard PuPd.
b.
Masukkan username dan password, lalu click tombol Sign in.
c.
Pilih Menu Periode yang terletak di sebelah kiri.
84
d.
Pilih tahun awal dan tahun akhir periode/tahun akademik yang ingin ditampilkan pada dashboard. Lalu click tombol Update.
5.5.2
Penggunaan Fitur Aplikasi Dashboard Fitur yang terdapat didalam aplikasi dashboard ialah melihat grafik,
melakukan drill-down pada grafik, mengunduh grafik, melihat informasi dalam bentuk tabel, dan membuat grafik sesuai dengan kebutuhan pengguna. 1.
Melihat Grafik Berikut ini merupakan langkah-langkah untuk melihat grafik pada aplikasi
dashboard:
85
a.
Buka aplikasi dashboard.
b.
Klik menu Dashboard, lalu akan muncul beberapa sub menu. Pilih sub menu Grafik.
c.
Pengguna dapat langsung melihat grafik sesuai dengan kebutuhan informasi dari keuangan (PuPd) Universitas Widyatama seperti pada gambar berikut.
2.
Drill-down pada Grafik Berikut ini merupakan langkah-langkah untuk drill-down grafik pada
aplikasi dashboard: a.
Buka Aplikasi Dashboard.
b.
Pilih menu Dashboard dan pilih sub menu Grafik.
c.
Click pada setiap grafik batang. Untuk level paling atas ialah menampilkan informasi tingkat universitas, sedangkan level kedua ialah tingkat fakultas, dan level terendah ialah tingkat prodi.
86
d.
Untuk kembali ke level lebih tinggi dapat klik tombol Back yang teletak di kanan atas.
87
3.
Mengunduh Grafik Berikut ini merupakan langkah-langkah untuk mengunduh grafik pada
aplikasi dashboard: a.
Buka Aplikasi Dashboard.
b.
Pilih menu Dashboard dan pilih sub menu grafik.
c.
Klik tombol
3.
, lalu pilih salah satu file ekstensi gambar yang akan diunduh.
Melihat Informasi dalam Bentuk Tabel Berikut ini merupakan langkah-langkah untuk melihat informasi dalam
bentuk tabel pada aplikasi dashboard: a.
Buka Aplikasi Dashboard.
b.
Pilih menu Dashboard dan pilih Sub Menu Tabel, maka akan tampil seperti pada gambar berikut.
88
4.
Membuat Grafik Berikut ini merupakan langkah-langkah untuk membuat grafik sesuai
dengan kebutuhan informasi dari pengguna pada aplikasi dashboard: a.
Buka aplikasi Dashboard.
b.
Pilih menu Custom Chart.
c.
Isi semua indikator data pada form custom chart.
d.
Klik tombol Create Chart untuk membuat grafik.
5.6
Pengujian Pengujian merupakan proses untuk dapat menemukan kesalahan-kesalahan
yang belum diketahui dan memastikan aplikasi yang telah dibangun dapat berjalan sesuai dengan fungsinya. 5.6.1
Pengujian Aplikasi Aplikasi harus diuji coba terlebih dahulu untuk menemukan kesalahan-
kesalahan yang mungkin terjadi. Pengujian
aplikasi dilakukan dengan
menggunakan metode black-box yang berfokus kepada fitur-fitur dari aplikasi.
89
1.
Login Administrator Tabel 5.2 Pengujian Login Administrator
Keluaran yang diharapkan Memasukkan Data Yang Benar Username: User dan password admin, valid, masuk ke password: admin halaman utama admin PuPd Memasukkan Data Yang Salah Username: Menampilkan kembali widyatama halaman login dan password: utama menampilkan pesan Gagal Login, Username dan Password Anda tidak sesuai Data Masukan
2.
Keluaran yang diterima
Kesimpulan
User dan password valid dan masuk kehalaman utama admin PuPd
Diterima
Menampilkan kembali halaman login dan menampilkan pesan Gagal Login, Username dan Password Anda tidak sesuai
Diterima
Mengubah Koneksi Tabel 5.3 Pengujian Mengubah Koneksi
Keluaran yang Keluaran yang diharapkan diterima Memasukkan data koneksi yang sesuai Database Server: Sistem akan memberi Sistem memberi localhost, pesan bahwa “Koneksi pesan bahwa Database User: Terhubung” dan “Koneksi root, Database menyimpan di Terhubung” dan Password: - , database menyimpan di Database Name: database dwh_widyatama Memasukkan data koneksi yang tidak sesuai Database Server: Sistem akan memberi Sistem memberi localhost, pesan bahwa “Koneksi pesan bahwa Database User: Tidak Terhubung”, “Koneksi Tidak admin, Database tidak menyimpan data, Terhubung”, tidak Password: -, dan kembali ke menyimpan data, Database Name: halaman koneksi dan kembali ke dwh_utama halaman koneksi Data Masukan
Kesimpulan Diterima
Diterima
90
Tidak mengisi salah satu field Database Server: Sistem akan memberi -, Database User pesan bahwa Silahkan : root, Database isi field yang kosong Password: - , ini Database Name: dwh_widyatama 3.
Sistem memberi pesan bahwa Silahkan isi field yang kosong ini
Diterima
Mengubah Periode Tabel 5.4 Pengujian Mengubah Periode
Keluaran yang diharapkan
Data Masukan
Pilih tahun yang sesuai Tahun Awal: Sistem akan memberi 2009-2010, pesan bahwa “Update Tahun Akhir: Berhasil”, dan 2013-2014 menyimpan ke database Pilih tahun yang tidak sesuai Tahun Awal: Sistem akan memberi 2013-2014, pesan bahwa “Tahun Tahun Akhir: Akhir lebih besar dari 2010-2011 Tahun Awal”. Tidak mengisi salah satu form Tahun Awal: Sistem akan memberi 2009-2010, pesan bahwa Silahkan Tahun Akhir: isi field yang kosong ini 4.
Keluaran yang diterima
Kesimpulan
Sistem memberi pesan bahwa “Update Berhasil”, dan menyimpan ke database
Diterima
Sistem memberi pesan bahwa “Tahun Akhir lebih besar dari Tahun Awal”.
Diterima
Sistem memberi pesan bahwa Silahkan isi field yang kosong ini
Diterima
Drilldown Grafik Tabel 5.5 Pengujian Drilldown Grafik
Data Masukan Pengguna memilih salah satu satu batang grafik. Pengguna memilih tombol Back
Keluaran yang diharapkan Sistem akan menampilkan grafik dalam tingkat yang lebih rendah Sistem akan menampilkan grafik dalam tingkat lebih tinggi atau grafik sebelumnya
Keluaran yang Kesimpulan diterima Sistem menampilkan Diterima grafik dalam tingkat yang lebih rendah Sistem menampilkan grafik dalam tingkat lebih tinggi atau grafik sebelumnya
Diterima
91
5.
Mengunduh Grafik Tabel 5.6 Pengujian Mengunduh Grafik
Data Masukan Pengguna mereview salah satu grafik, dan memilih salah satu format file pengunduhan (*.JPEG, *.PNG,*.PDF,*.SVG)
6.
Keluaran yang diharapkan Sistem akan mengunduh grafik yang dipilih dan akan menyimpan ke drive secara otomatis
Keluaran yang diterima Sistem mengunduh grafik yang dipilih dan menyimpan ke drive secara otomatis
Kesimpulan Diterima
Custom Chart Tabel 5.7 Pengujian Custom Chart
Keluaran yang diharapkan Memilih data yang sesuai Organisasi: Sistem akan Universitas, menampilkan column Indikator: Jumlah chart sesuai dengan mahasiswa indikator yang dipilih registrasi, Tahun oleh pengguna Awal: 20092010, Tahun Akhir: 20132014, lalu tekan tombol Create Chart Tidak memilih salah satu form Organisasi: -, Sistem akan memberi Indikator: Jumlah pesan bahwa Silahkan mahasiswa isi field yang kosong registrasi, Tahun ini Awal: 20092010, Tahun Akhir: 20132014, lalu tekan tombol Create Chart Data Masukan
Keluaran yang diterima
Kesimpulan
Halaman custom chart menampilkan column chart sesuai dengan indikator yang dipilih oleh pengguna
Diterima
Combobox Organisasi memberi pesan bahwa Silahkan isi field yang kosong ini
Diterima
