BAB V IMPLEMENTASI. yang diperlukan dalam membangun aplikasi baik berupa perangkat keras maupun

Transkripsi

1 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 Perangkat Keras Spesifikasi perangkat keras (hardware) yang digunakan dalam pembangunan sistem sebagai berikut : Processor : Intel(R) Core(TM)i CPU 2.40 GHz Memory : 1024MB Monitor Mouse Keyboard Perangak Lunak Berikut uraian kebutuhan perangkat lunak yang digunakan dalam pembangunan sistem : Xampp Web Browser Google Chrome Sublime Text Heidi SQL 71

2 72 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 select P.NM_PRODI, P.NM_FAKULTAS, Mahasiswa 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, 2. Rekap biaya keseluruhan per tahun 3. Jumlah transaksi dengan tipe pembayaran autodebet 4. Jumlah transaksi dengan biaya angsuran 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

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 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.

4 74 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.

5 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

6 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 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.

7 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

8 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

9 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 config.php Logout.php home.php Content.php dashboard.php koneksi.php periode.php actionkoneksi.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

10 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

11 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 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.

12 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.

13 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.

14 84 d. Pilih tahun awal dan tahun akhir periode/tahun akademik yang ingin ditampilkan pada dashboard. Lalu click tombol Update 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 dashboard: Berikut ini merupakan langkah-langkah untuk melihat grafik pada aplikasi

15 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.

16 86 d. Untuk kembali ke level lebih tinggi dapat klik tombol Back yang teletak di kanan atas.

17 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, 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.

18 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 Pengujian Aplikasi Aplikasi harus diuji coba terlebih dahulu untuk menemukan kesalahankesalahan yang mungkin terjadi. Pengujian aplikasi dilakukan dengan menggunakan metode black-box yang berfokus kepada fitur-fitur dari aplikasi.

19 89 1. Login Administrator Tabel 5.2 Pengujian Login Administrator Data Masukan diharapkan Memasukkan Data Yang Benar Username: User dan password admin, valid, masuk ke password: admin halaman utama admin PuPd Memasukkan Data Yang Salah Username: widyatama password: utama Menampilkan kembali halaman login dan menampilkan pesan Gagal Login, Username dan Password Anda tidak sesuai diterima User dan password valid dan masuk kehalaman utama admin PuPd Menampilkan kembali halaman login dan menampilkan pesan Gagal Login, Username dan Password Anda tidak sesuai Kesimpulan 2. Mengubah Koneksi Tabel 5.3 Pengujian Mengubah Koneksi Data Masukan diharapkan Memasukkan data koneksi yang sesuai Database Server: Sistem akan memberi localhost, pesan bahwa Koneksi Database User: Terhubung dan root, Database menyimpan di Password: -, database Database Name: dwh_widyatama Memasukkan data koneksi yang tidak sesuai Database Server: Sistem akan memberi localhost, pesan bahwa Koneksi Database User: Tidak Terhubung, admin, Database tidak menyimpan data, Password: -, dan kembali ke Database Name: halaman koneksi dwh_utama diterima Sistem memberi pesan bahwa Koneksi Terhubung dan menyimpan di database Sistem memberi pesan bahwa Koneksi Tidak Terhubung, tidak menyimpan data, dan kembali ke halaman koneksi Kesimpulan

20 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 Sistem memberi pesan bahwa Silahkan isi field yang kosong ini 3. Mengubah Periode Tabel 5.4 Pengujian Mengubah Periode Data Masukan Pilih tahun yang sesuai Tahun Awal: , Tahun Akhir: Pilih tahun yang tidak sesuai Tahun Awal: , Tahun Akhir: Tidak mengisi salah satu form Tahun Awal: , Tahun Akhir: - diharapkan Sistem akan memberi pesan bahwa Update Berhasil, dan menyimpan ke database Sistem akan memberi pesan bahwa Tahun Akhir lebih besar dari Tahun Awal. Sistem akan memberi pesan bahwa Silahkan isi field yang kosong ini diterima Sistem memberi pesan bahwa Update Berhasil, dan menyimpan ke database Sistem memberi pesan bahwa Tahun Akhir lebih besar dari Tahun Awal. Sistem memberi pesan bahwa Silahkan isi field yang kosong ini Kesimpulan 4. Drilldown Grafik Data Masukan Pengguna memilih salah satu satu batang grafik. Pengguna memilih tombol Back Tabel 5.5 Pengujian Drilldown Grafik diharapkan Sistem akan menampilkan grafik dalam tingkat yang lebih rendah Sistem akan menampilkan grafik dalam tingkat lebih tinggi atau grafik sebelumnya diterima Sistem menampilkan grafik dalam tingkat yang lebih rendah Sistem menampilkan grafik dalam tingkat lebih tinggi atau grafik sebelumnya Kesimpulan

21 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) diharapkan Sistem akan mengunduh grafik yang dipilih dan akan menyimpan ke drive secara otomatis diterima Sistem mengunduh grafik yang dipilih dan menyimpan ke drive secara otomatis Kesimpulan 6. Custom Chart Tabel 5.7 Pengujian Custom Chart Data Masukan 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: , Tahun Akhir: , lalu tekan tombol Create Chart Tidak memilih salah satu form Organisasi: -, Indikator: Jumlah mahasiswa registrasi, Tahun Awal: , Tahun Akhir: , lalu tekan tombol Create Chart Sistem akan memberi pesan bahwa Silahkan isi field yang kosong ini diterima Halaman custom chart menampilkan column chart sesuai dengan indikator yang dipilih oleh pengguna Combobox Organisasi memberi pesan bahwa Silahkan isi field yang kosong ini Kesimpulan