71 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 lunak yang digunakan dalam pembangunan sistem :
Xampp 1.7.7
Web Browser Google Chrome
Sublime Text
System Operating : Windows 7 Ultimate
5.2 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 Informasi Query
1. Jumlah Registrasi Mahasiswa
select P.NM_PRODI, P.NM_FAKULTAS,
PER.Tahun, sum(reg.JML_MHS_REG) as
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
2. Rekap biaya keseluruhan per tahun
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 3. Jumlah transaksi dengan
tipe pembayaran
autodebet
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 4. Jumlah transaksi dengan
biaya angsuran
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)
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.
Gambar 5.1 Tampilan Halaman Login Gambar 5.2 Tampilan Halaman Gagal Login
2. 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.
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.
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
men-costum 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.
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.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
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
Index.php
File CSS & File
JavaScript config.php
home.php Logout.php
Content.php
dashboard.php koneksi.php periode.php
actionPeriode.php actionKoneksi.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
index.php, kode program pada file tersebut berfungsi untuk menampilkan menu-menu sistem administrator dashboard. Pada saat pengguna memilih menu-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
Index.php File CSS & File
JavaScript config.php
Folder Conten
home.php Grafik.php Tabel.php Costumchart.php
conten.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
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.
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.
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.
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
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.
d. Untuk kembali ke level lebih tinggi dapat klik tombol Back yang teletak di kanan atas.
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 , lalu pilih salah satu file ekstensi gambar yang akan diunduh.
3. 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.
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.
1. Login Administrator
Tabel 5.2 Pengujian Login Administrator
Data Masukan Keluaran yang diharapkan
Keluaran yang
diterima Kesimpulan Memasukkan Data Yang Benar
Username:
admin,
password: admin
User dan password
valid, masuk ke halaman utama admin
PuPd
User dan password
valid dan masuk kehalaman utama
admin PuPd
Diterima
Memasukkan Data Yang Salah
Username:
widyatama
password: utama
Menampilkan kembali halaman login dan menampilkan pesan
Gagal Login,
Username dan Password Anda tidak
sesuai Menampilkan kembali halaman login dan menampilkan pesan Gagal Login, Username dan Password Anda tidak sesuai Diterima 2. Mengubah Koneksi
Tabel 5.3 Pengujian Mengubah Koneksi
Data Masukan Keluaran yang diharapkan
Keluaran yang
diterima Kesimpulan Memasukkan data koneksi yang sesuai
Database Server: localhost, Database User: root, Database Password: - , Database Name: dwh_widyatama
Sistem akan memberi pesan bahwa “Koneksi
Terhubung” dan menyimpan di database Sistem memberi pesan bahwa “Koneksi Terhubung” dan menyimpan di database Diterima
Memasukkan data koneksi yang tidak sesuai
Database Server: localhost, Database User: admin, Database Password: -, Database Name: dwh_utama
Sistem akan memberi pesan bahwa “Koneksi
Tidak Terhubung”, tidak menyimpan data,
dan kembali ke halaman koneksi Sistem memberi pesan bahwa “Koneksi Tidak Terhubung”, tidak menyimpan data, dan kembali ke halaman koneksi Diterima
Tidak mengisi salah satu field Database Server: -, Database User : root, Database Password: - , Database Name: dwh_widyatama
Sistem akan memberi pesan bahwa Silahkan isi field yang kosong
ini
Sistem memberi pesan bahwa Silahkan isi field
yang kosong ini
Diterima
3. Mengubah Periode
Tabel 5.4 Pengujian Mengubah Periode
Data Masukan Keluaran yang diharapkan
Keluaran yang
diterima Kesimpulan Pilih tahun yang sesuai
Tahun Awal: 2009-2010, Tahun Akhir:
2013-2014
Sistem akan memberi pesan bahwa “Update
Berhasil”, dan menyimpan ke database Sistem memberi pesan bahwa “Update Berhasil”, dan menyimpan ke database Diterima
Pilih tahun yang tidak sesuai Tahun Awal:
2013-2014, Tahun Akhir:
2010-2011
Sistem akan memberi pesan bahwa “Tahun Akhir lebih besar dari
Tahun Awal”.
Sistem memberi pesan bahwa “Tahun
Akhir lebih besar dari Tahun Awal”.
Diterima
Tidak mengisi salah satu form Tahun Awal:
2009-2010, Tahun Akhir: -
Sistem akan memberi pesan bahwa Silahkan isi field yang kosong
ini
Sistem memberi pesan bahwa Silahkan isi field
yang kosong ini
Diterima
4. Drilldown Grafik
Tabel 5.5 Pengujian Drilldown Grafik
Data Masukan Keluaran yang diharapkan
Keluaran yang
diterima Kesimpulan Pengguna
memilih salah satu satu batang
grafik.
Sistem akan menampilkan grafik
dalam tingkat yang lebih rendah
Sistem menampilkan grafik dalam tingkat
yang lebih rendah
Diterima Pengguna memilih tombol Back Sistem akan menampilkan grafik
dalam tingkat lebih tinggi atau grafik
sebelumnya
Sistem menampilkan grafik dalam tingkat
lebih tinggi atau grafik sebelumnya
5. Mengunduh Grafik
Tabel 5.6 Pengujian Mengunduh Grafik
Data Masukan Keluaran yang diharapkan
Keluaran yang
diterima Kesimpulan Pengguna mereview
salah satu grafik, dan memilih salah satu
format file pengunduhan (*.JPEG, *.PNG,*.PDF,*.SVG) Sistem akan mengunduh grafik
yang dipilih dan akan menyimpan ke
drive secara
otomatis
Sistem mengunduh grafik
yang dipilih dan menyimpan ke
drive secara
otomatis
Diterima
6. Custom Chart
Tabel 5.7 Pengujian Custom Chart
Data Masukan Keluaran yang diharapkan
Keluaran yang
diterima Kesimpulan Memilih data yang sesuai
Organisasi: Universitas, Indikator: Jumlah mahasiswa registrasi, Tahun Awal: 2009-2010, Tahun Akhir: 2013-2014, lalu tekan tombol Create Chart Sistem akan menampilkan column
chart sesuai dengan
indikator yang dipilih oleh pengguna
Halaman custom
chart menampilkan column chart sesuai
dengan indikator yang dipilih oleh
pengguna
Diterima
Tidak memilih salah satu form Organisasi: -, Indikator: Jumlah mahasiswa registrasi, Tahun Awal: 2009-2010, Tahun Akhir: 2013-2014, lalu tekan tombol Create Chart
Sistem akan memberi pesan bahwa Silahkan isi field yang kosong
ini
Combobox
Organisasi memberi pesan bahwa Silahkan isi field
yang kosong ini
