73 BAB V
IMPLEMENTASI SISTEM 5.1 Tampilan Antar Muka (Interface Sistem)
Implementasi dari tampilan antar muka (interface) Sistem Informasi Manajemen Proyek ini adalah sebagai berikut :
5.1.1 Halaman Tampilan Awal (Login)
Halaman tampilan awal (Login) merupakan tampilan halaman yang muncul di awal saat user mengakses Sistem Informasi Manajemen Proyek. Halaman ini digunakan pula untuk Login user ke sistem dengan memilih Login akses memasukan nama pengguna kata sandi serta kode pengaman.
Gambar 5.1 Halaman Tampilan Awal (Login) 5.1.2 Halaman Menu Utama
Halaman menu utama merupakan tampilan halaman yang muncul saat user berhasil Login ke Sistem Informasi.
74
Gambar 5.2 Halaman Menu Utama
5.1.3 Halaman Data Pegawai
Halaman menu data master dengan sub menu data pegawai merupakan tampilan halaman yang digunakan untuk melakukan setup data pegawai.
Gambar 5.3 Halaman Data Pegawai
75
Gambar 5.4 Halaman Tambah/Edit Data Pegawai 5.1.4 Halaman Data Klien
Halaman menu data master dengan sub menu data klien merupakan tampilan halaman yang digunakan untuk melakukan setup data klien.
Gambar 5.5 Halaman Data Klien
76
Gambar 5.6 Halaman Tambah/Edit Data Klien 5.1.5 Halaman Data Proyek
Halaman menu data master dengan sub menu data proyek merupakan tampilan halaman yang digunakan untuk melakukan setup data proyek.
Gambar 5.7 Halaman Data Proyek
77
Gambar 5.8 Halaman Tambah/Edit Data Proyek 5.1.6 Halaman Data Akun Biaya
Halaman menu data master dengan sub menu data akun biaya merupakan tampilan halaman yang digunakan untuk melakukan setup data akun biaya.
Gambar 5.9 Halaman Data Akun Biaya
78
Gambar 5.10 Halaman Tambah/Edit Data Akun Biaya 5.1.7 Halaman Data Jenis Proyek
Halaman menu data master dengan sub menu data jenis proyek merupakan tampilan halaman yang digunakan untuk melakukan setup data jenis proyek.
Gambar 5.11 Halaman Data Jenis Proyek
79
Gambar 5.12 Halaman Tambah/Edit Data Jenis Proyek
5.1.8 Halaman Data Jabatan Pegawai
Halaman menu data master dengan sub menu data pegawai merupakan tampilan halaman yang digunakan untuk melakukan setup data pegawai.
Gambar 5.13 Halaman Data Pegawai
80
Gambar 5.14 Halaman Tambah/Edit Data Pegawai 5.1.9 Halaman Perencanaan Anggaran Biaya
Halaman menu perencanaan rencana anggaran biaya merupakan tampilan halaman yang digunakan untuk melakukan input data rencana anggaran biaya.
Gambar 5.15 Halaman Data Rencana Anggaran Biaya
81
Gambar 5.16 Halaman Tambah/Edit Data Rencana Anggaran Biaya 5.1.10 Halaman Rencana Jadwal Kegiatan
Halaman menu perencanaan dengan sub menu rencana jadwal kegiatan merupakan tampilan halaman yang digunakan untuk melakukan input data rencana jadwal kegiatan pekerjaan.
Gambar 5.17 Halaman Data Rencana Jadwal Kegiatan
82
Gambar 5.18 Halaman Tambah/Edit Data Rencana Jadwal Kegiatan 5.1.11 Halaman Realisasi Anggaran Biaya
Halaman menu realisasi dengan sub menu realisasi anggaran biaya merupakan tampilan halaman yang digunakan untuk melakukan input data realisasi anggaran biaya.
Gambar 5.19 Halaman Data Realisasi Anggaran Biaya
83
Gambar 5.20 Halaman Tambah/Edit Realisasi Anggaran Biaya
Gambar 5.21 Halaman Input Detail Realisasi Anggaran Biaya 5.1.12 Halaman Realisasi Jadwal Kegiatan
Halaman menu realisasi rencana jadwal kegiatan merupakan tampilan halaman yang digunakan untuk melakukan input data realisasi jadwal kegiatan pekerjaan.
84
Gambar 5.22 Halaman Data Realisasi Jadwal Kegiatan
Gambar 5.23 Halaman Tambah/Edit Realisasi Jadwal Kegiatan
85
Gambar 5.24 Halaman Input Detail Realisasi Jadwal Kegiatan 5.1.13 Halaman Menu Laporan Data Proyek
Halaman menu laporan data proyek merupakan tampilan halaman yang digunakan untuk pelaporan data proyek.
Gambar 5.25 Halaman Laporan Data Proyek
86
Gambar 5.26 Halaman Download Exel Laporan Data Proyek 5.1.14 Halaman Laporan Laba/Rugi
Halaman menu laporan data realisasi anggaran merupakan tampilan halaman yang digunakan untuk pelaporan data realisasi anggaran.
Gambar 5.27 Halaman Laporan Laba/Rugi
87
Gambar 5.28 Laporan Download Exel Laporan Laba/Rugi 5.1.15 Halaman Laporan Realisasi Jadwal Kegiatan
Halaman menu laporan realisasi jadwal merupakan tampilan halaman yang digunakan untuk pelaporan data realisasi jadwal kegiatan pekerjaan.
Gambar 4.29 Halaman Laporan Realisasi Jadwal Kegiatan
88
Gambar 4.30 Laporan Download Exel Realisasi Jadwal Kegiatan 5.1.16 Halaman Laporan Analisa Anggaran
Halaman menu laporan analisa anggaran merupakan tampilan halaman yang digunakan untuk pelaporan analisa anggaran.
89
Gambar 5.31 Halaman Laporan Analisa Anggaran
Gambar 5.32 Laporan Download Exel Analisa Anggaran
5.2 Pengujian Sistem
Pengujian terhadap sistem yang telah dibuat sangat diperlukan untuk mengetahui apakah sistem yang telah dibuat berjalan dengan baik dan sesuai harapan pengguna atau masih terdapat error. Dalam pengujian ini metode yang digunakan adalah menggunakan metode White Box dan Black Box.
5.2.1 Metode Pengujian White Box
Pengujian White Box merupakan pengujian tentang struktur dan implementasi program. Pengujian White Box pada sistem aplikasi ini digambarkan dalam bentuk flowchart, lalu akan dibuat dalam bentuk flowgraph dan dihitung cyclomatic complexity nya.
a. Bagan Alir (flowchart)
Bagan alir (flowchart) Login menjelaskan bagaimana alur Login menggunakan model flowchart yang dimulai dari
memasukkan Username, Password dan kode captcha sampai proses berhasil maupun gagal. Berikut bagan alir (flowchart) Login ditunjukkan pada Gambar 5.33
90
Gambar 5.33 Bagan alir (flowchart) Login b. Kode Program Login
Kode program 5.1 Pengujian White Box pada proses Login
sebagai berikut :
$(function() {
var l = $('#Login_as');
var u = $('#Username');
var p = $('#Password');
var c = $('#captcha');
1 If (salah)
Else (benar)
Start
Main View Login
Pilih user, input Username, Password & code chapcha
Cek user, Username, Password & kode
captcha
Menu utama m
End
Menampilkan Pesan inputan Salah
91
l.focus();
$('#refresh_captcha, #captcha_img'). Click (function() { refresh_captcha(); });
$('#Login').click(function(e) { e.preventDefault();
}else{
$.post('<?php
echo base_url()?>user/Login_process',$('#form1').serialize(),function(data) { if(data.validate == 'false') {
$('#msg_Login').fadeIn().html(data.message);
$('#'+data.focus).focus();
refresh_captcha();
$('body').css('background-color','#eeeeee');
}else{
location.href = data.redirect;
} },'json');
} });
Pada Kode Program 5.1 Pengujian White Box Proses Login merupakan koding PHP yang bertujuan untuk masuk ke dalam sistem dengan melakukan cek kesesuain pada pemilihan user akses, Username, Password dan kode Captcha.
2
4 3
5
6
92
c. Flowgraph Login
Flowgraph Login ditunjukkan pada Gambar 5.34
1
Gambar 5.34 Flowgraph Login
Gambar diatas menjelaskan bagaimana alur Login dengan model flowgraph yang dimulai dari memasukkan Username, Password, dan kode captcha sampai proses berhasil maupun gagal.
Kompleksitas siklomatis / (cyclomatic complexity) untuk flowgraph diatas dapat diperoleh dari perhitungan :
Jumlah Node (N) : 6 Jumlah Edge (E) : 6 Jumlah Region (R) : 2 Jumlah Predicate Node (P) : 1
Tabel 5.1 Rumus cyclomatic complexity Rumus 1 :
V(G) = E - N + 2
Rumus 2 : V(G) = P + 1
Rumus 3 : V(G) = R Hasil 1 :
V(G) = 6 – 6 + 2 = 2
Hasil 2 :
V(G) = 1 + 1 = 2
Hasil 3 : V(G) = 2 1
3 2
4
5
6
93
Dari Tabel diatas dapat disimpulkan bahwa kompleksitas siklomatisnya dikatakan valid dikarenakan dari rumus 1, 2 dan 3 memiliki nilai yang sama. Dan menghasilkan 2 jalur sebagai berikut : Jalur 1. 1 – 2 – 3 – 5 – 2
Jalur 2. 1 – 2 – 3 – 4 – 6
Tabel 5.2. Pengujian Jalur
Jalur Uji Kasus Hasil yang diharapkan Hasil Aktual Ket Jalur 1 Login
Admin
- Apakah anda Login sebagai apa harus terisi - Username, Password
dan Kode pengaman/
captcha harus terisi sesuai dengan hak akses
- Username benar - Password benar - Kode captcha benar - Masuk sebagai
admin
Sesuai
Jalur 2 Login Admin
- Jika salah satu dari hak akses, Username, Password & kode captcha salah
Akan menampilkan pesan bahwa “Login Gagal, Username, Password dan kode captcha salah” dan kembali ke form login dengan Tampil pembaharuan kode captcha yang baru
Sesuai
Dari tabel diatas dapat disimpulkan bahwa pengujian jalur berhasil dikarenakan keterangan yang dihasilkan dari semua jalur sesuai.
5.2.2 Metode Pengujian Black Box
Pengujian blackbox merupakan pengujian persyaratan fungsional perangkat lunak. Oleh karena itu uji coba black box akan melatih seluruh syarat - syarat fungsional suatu program. Pengujian black box pada sistem ini dilakukan untuk mengetahui fungsi dari elemen-elemen.
94
a. Pengujian Interface sistem
Pengujian interface sistem dilakukan pada elemen-elemen button, bisa dilihat pada tabel 5.3 sebagai berikut
Tabel 5.3 Pengujian Interface Sistem No Elemen Yang
Diuji
Hasil Yang Didapatkan Keterang an 1. Button Tambah
Baru
Sistem akan masuk ke halaman yang menampilkan form tambah data
Berhasil
2. Button Simpan Sistem akan menjalankan proses penyimpanan data.
Berhasil
3. Button Bersihkan Sistem akan menjalankan proses membersihkan form isian data.
Berhasil
4. Button Edit Sistem akan masuk ke halaman yang menampilkan form edit data
Berhasil
5. Button Delete Sistem akan menjalankan proses hapus data
Berhasil
6. Button Cari Sistem akan melakukan pencarian data sesuai data yang dimasukan
Berhasil
7. Button Login Sistem akan menjalankan proses Login ke halaman user
Berhasil
8. Button Reset Sistem akan membersihkan form Berhasil 9. Button Proses Sistem akan menuju proses selanjutnya Berhasil 10. Button Tambah
Komponen Biaya
Sistem akan menambah komponen biaya
Berhasil
11. Button Tambah Jadwal
Sistem akan menambah komponen jadwal kegiatan
Berhasil
12. Button Input Detail Sistem akan menambah detail dari induk data sebelumnya
Berhasil
13. Button Input Pegawai
Sistem akan menambah data pegawai untuk jadwal kegiatan
Berhasil
14. Button Input Realisasi
Sistem akan menambah data realisasi anggaran
Berhasil
15. Button Tambah Realisasi
Sistem akan menambah data detail realisasi anggaran
Berhasil
16. Button Input Kegiatan
Sistem akan menambah data detail kegiatan
Berhasil
17. Button Export Excel
Sistem akan melakukan download laporan berupa excel
Berhasil
95
b. Pengujian Nilai
Pengujian ini dilakukan terhadap fungsi perhitungan perencanaan margin profit yang diinginkan dengan realisasi rab sehingga muncul selisih dan hasil profit sebenarnya.
Tabel 5.4 Pengujian Nilai
c. Pengujian Fungsi Dasar Sistem
Pengujian ini dilakukan terhadap fungsi dasar sistem antara lain fungsi penyimpanan data, fungsi menampilkan data fungsi perubahan data dan fungsi menghapus data.
Tabel 5.5 Pengujian Fungsi Dasar Sistem No Elemen Yang
Diuji
Hasil Yang Didapatkan Keteran gan 1. Fungsi
penyimpanan data
Data yang diinputkan ke dalam sistem dapat tersimpan di dalam database
Berhasil
2. Fungsi
menampilkan data
Data yang telah tersimpan dalam database akan ditampilkan sesuai dengan form tampilan yang dibuat
Berhasil
3. Fungsi perubahan data
Data dapat berubah sesuai update data yang dilakukan oleh user
Berhasil
4. Fungsi menghapus data
Data yang dipilih dapat terhapus No Elemen Yang
Diuji
Hasil Yang Didapatkan Keterang an 1. Fungsi Margin
Profit
Jika diinputkan rencana margin profit yang diinginkan maka sistem akan menghitung dan menampilkan nominal yang diinginkan.
Berhasil
2. Fungsi Realisasi Rab
Jika diinput nominal pengeluaran beban biaya yang telah digunakan maka sistem menghitung dan menampilkan nominal profit real.
Berhasil
3. Fungsi Analisa Profit
Setelah hasil profit real muncul maka sistem menghitung selisih rencana/
margin profit dengan profit real dan menampilkan hasil akhir profitnya.
Berhasil
96
d. Pengujian Keamanan Sistem
Pengujian ini dilakukan untuk mengetahui aspek keamanan yang dimiliki oleh sistem.
Tabel 5.6 Pengujian Keamanan Sistem
No Elemen Yang Diuji Hasil Yang Didapatkan Keterangan 1. User tidak melakukan
proses Login
Sistem selalu menampilkan halaman Login
Berhasil
2. User melakukan Login yang tidak sesuai dengan level user
Sistem memberi peringatan bahwa user melakukan kesalahan dalam Login sehingga sistem tetap menampilkan halaman Login
Berhasil
3. Tampilan menu sesuai dengan hak akses user
Sistem menampilkan menu sesuai dengan hak akses user
Berhasil
