No title

BAB IV PERANCANGAN LAYAR

4.1 User Interface 1. Rancangan Layar Halaman Login

Gambar 4.1 Rancangan Layar Halaman Login

Keterangan : Halaman Login merupakan halaman awal pada aplikasi monitoring pelaksanaan anggaran di lingkungan Direktorat Jenderal Penyelenggaraan Haji dan Umrah. Source code Login : = 1){ $_SESSION[id_user] = $r[id_user]; $_SESSION[username]

= $r[username];

$_SESSION[nama_lengkap] = $r[nama_lengkap]; $_SESSION[level] = $r[level];

95

http://digilib.mercubuana.ac.id/

echo "<script>window.alert('Anda Sukses Login.'); window.location='index.php'"; }else{ echo "

Terjadi Kesalahan!
Maaf, kombinasi username dan password yang anda masukkan tidak valid dengan database kami.
"; } } ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan login pada aplikasi sistem informasi monitoring sesuai dengan tabel rb_user pada database. Sistem akan memverifikasi jika dilakukan penginputan yang akan disesuaikan dengan database, Jika berhasil maka akan ada informasi “Anda Sukses Login”, jika terjadi kesalahan maka sistem akan memberikan informasi bahwa data yang diinput tidak valid dengan database. 2. Rancangan Layar Halaman Utama

Gambar 4.2 Rancangan Layar Halaman Utama

96


Keterangan : Halaman Utama

merupakan halaman Utama pada aplikasi monitoring

pelaksanaan anggaran di lingkungan Direktorat Jenderal Penyelenggaraan Haji dan Umrah. 3. Rancangan Layar Menu Master Pegawai a. Tambah Pegawai

Gambar 4.3 Rancangan Layar Tambah Pegawai

Source code Tambah Pegawai :
97


('$_POST[a]','$_POST[b]','$_POST[d]','$_POST[cc]','$_POST[e]','$_POST[f]','$_POST[g]','$filen ame','$_POST[h]','$_POST[i]','$_POST[j]','$_SESSION[id_user]')"); echo "<script>window.alert('Sukses Tambahkan Data Pegawai !!!'); window.location=('pegawai.mu')"; }else{ echo "<script>window.alert('Gagal Tambahkan Data Pegawai.'); window.location='pegawai.mu'"; } } ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan perintah simpan data pegawai pada aplikasi sistem informasi monitoring. Sistem akan penyimpan pada tabel pegawai sesuai dengan yang telah diinput. Jika berhasil ada informasi

“Suskes

Tambahkan

Data

Pegawai”,

jika

terjadi

kesalahan

penyimpanan maka sistem akan memberikan informasi “Gagal Tambahkan Data Pegawai”. b. Tampil Pegawai

Gambar 4.4 Rancangan Layar Tampil Pegawai 98


Keterangan: Tampil data pegawai merupakan rancangan layar untuk menampilkan data pegawai yang diambil dari database. c. Lihat Detail Pegawai

Gambar 4.4 Rancangan Layar Detail Pegawai

Keterangan: Lihat detail data pegawai merupakan rancangan layar untuk menampilkan data detail pegawai yang diambil dari database. d. Edit Pegawai

Gambar 4.6 Rancangan Layar edit Pegawai 99


Source code Edit Pegawai : window.alert('Sukses Update Data Pegawai !!!'); window.location=('pegawai.mu')"; }else{ echo "<script>window.alert('Gagal Update Data Pegawai.'); window.location='pegawai.mu'"; } $dtu = mysql_fetch_array(mysql_query("SELECT * FROM rb_pegawai where id_pegawai='$_GET[id]'")); ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan edit data pegawai pada aplikasi sistem informasi monitoring. Pengambilan data pada database menggunakan metode post dan get terhadap id_pegawai pada tabel pegawai, jika sesuai maka akan tampil data pegawai berdasarkan id_pegawai. 100


Selanjutnya data update disimpan, jika berhasil maka ada informasi “Sukses Update Data Pegawai” jika terjadi kesalahan maka sistem akan memberikan informasi “Gagal Update Data Pegawai”. 4. Rancangan Layar Kegiatan a. Tambah Kegiatan

Gambar 4.7 Rancangan Layar Tambah kegiatan

Source code Tambah Kegiatan : window.alert('Sukses Tambahkan Data kegiatan.'); window.location='kegiatan.mu'"; } ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan perintah simpan data kegiatan pada aplikasi sistem informasi monitoring. Sistem akan penyimpan pada tabel kegiatan sesuai dengan yang telah diinput. Jika berhasil ada informasi “Suskes Tambahkan Data Kegiatan”.

101


b. Tampil Kegiatan

Gambar 4.8 Rancangan Layar Tampil kegiatan Keterangan: Tampil data kegiatan merupakan rancangan layar untuk menampilkan data kegiatan yang diambil dari database. c. Edit Kegiatan

Gambar 4.9 Rancangan Layar Edit kegiatan

Source code Edit Kegiatan : window.alert('Sukses Update Data kegiatan.'); window.location='kegiatan.mu'";

102


} $dtu = mysql_fetch_array(mysql_query("SELECT * FROM kegiatan where kode_kegiatan='$_GET[id]'")); ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan edit data kegiatan pada aplikasi sistem informasi monitoring. Pengambilan data pada database menggunakan metode post dan get terhadap kode_kegiatan pada tabel kegiatan, jika sesuai maka akan tampil data kegiatan berdasarkan kode_kegiatan. Selanjutnya data update disimpan, jika berhasil maka ada informasi “Sukses Update Data kegiatan”.

5. Rancangan Layar Output a. Tambah Output

Gambar 4.10 Rancangan Layar Tambah Output

Source code Tambah Output :
103


echo "<script>window.alert('Sukses Menambahkan Data Output.'); window.location='sub-jenis-belanja.mu'"; } ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan perintah simpan data tebel output pada aplikasi sistem informasi monitoring. Sistem akan penyimpan pada tabel output sesuai dengan yang telah diinput. Jika berhasil ada informasi “Suskes Tambahkan Data Output”. b. Tampil Output

Gambar 4.11 Rancangan Layar Tampil Output Keterangan: Tampil data output merupakan rancangan layar untuk menampilkan data output yang diambil dari database.

104


c. Edit Output

Gambar 4.12 Rancangan Layar Edit Output

Source code Edit Output : window.alert('Sukses Update Data Output.'); window.location='sub-jenis-belanja.mu'"; } $dtu = mysql_fetch_array(mysql_query("SELECT * FROM output where id_output='$_GET[id]'")); ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan edit data output pada aplikasi sistem informasi monitoring. Pengambilan data pada database menggunakan metode post dan get terhadap id_output pada tabel output, jika sesuai maka akan tampil data pegawai berdasarkan id_output. Selanjutnya 105


data update disimpan, jika berhasil maka ada informasi “Sukses Update Data Output”. 6. Rancangan Layar Akun a. Tambah Akun

Gambar 4.13 Rancangan Layar Tambah Akun

Source code Tambah Akun: window.alert('Sukses Tambahkan Data Akun.'); window.location='akun.mu'"; } ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan perintah simpan data tebel akun pada aplikasi sistem informasi monitoring. Sistem akan menyimpan pada tabel akun sesuai dengan yang telah diinput. Jika berhasil ada informasi “Suskes Tambahkan Data Akun”.

106


b. Tampil Akun

Gambar 4.14 Rancangan Layar Tampil Akun

Keterangan: Tampil data akun merupakan rancangan layar untuk menampilkan data akun yang diambil dari database. c. Edit Akun

Gambar 4.15 Rancangan Layar edit Akun

Source code Edit Akun:
107


echo "<script>window.alert('Sukses Update Data Akun.'); window.location='akun.mu'"; } $dtu = mysql_fetch_array(mysql_query("SELECT * FROM akun where kode_akun='$_GET[id]'")); ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan edit data akun pada aplikasi sistem informasi monitoring. Pengambilan data pada database menggunakan metode post dan get terhadap kode_akun pada tabel akun, jika sesuai maka akan tampil data akun berdasarkan kode_akun. Selanjutnya data update disimpan, jika berhasil maka ada informasi “Sukses Update Data Akun”.

7. Rancangan Layar Jenis Target dan Realisasi

Gambar 4.16 Rancangan Layar Jenis Target dan Realisasi

Keterangan: Tampil data jenis target dan realisasi merupakan rancangan layar untuk menampilkan data jenis target dan realisasi yang diambil dari database.

108


8. Rancangan Layar Data Umum a. Tambah Data Umum

Gambar 4.17 Rancangan Layar Tambah Data Umum window.alert('Sukses Menambahkan Data Umum Baru.'); window.location='data-umum.mu'"; } ?>

109


Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan perintah simpan data pada tabel data umum aplikasi sistem informasi monitoring. Sistem akan penyimpan pada tabel data umum sesuai dengan yang telah diinput. Jika berhasil ada informasi “Suskes Menambahkan Data Umum Baru”. b. Tampil Data Umum

Gambar 4.18 Rancangan Layar Tampil Data Umum

Keterangan: Tampil data umum merupakan rancangan layar untuk menampilkan data umum yang diambil dari database. c. Lihat Detail Data Umum

Gambar 4.19 Rancangan Layar Detail Data Umum 110


Keterangan: Tampil detail data umum merupakan rancangan layar untuk menampilkan data detail umum yang diambil dari database. d. Edit Data Umum

Gambar 4.20 Rancangan Layar Edit Umum

Source code Edit Data Umum:
111


echo "<script>window.alert('Sukses Update Data Umum.'); window.location='data-umum.mu'"; } $dtu = mysql_fetch_array(mysql_query("SELECT * FROM rb_data_umum where id_data_umum='$_GET[id]'")); ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan edit data tabel data umum pada aplikasi sistem informasi monitoring. Pengambilan data pada database menggunakan metode post dan get terhadap id_data_umum pada tabel data umum, jika sesuai maka akan tampil data pegawai berdasarkan id_data_umum. Selanjutnya data update disimpan, jika berhasil maka ada informasi “Sukses Update Data Umum”. 8. Rancangan Layar Anggaran Belanja a. Tambah anggaran belanja

Gambar 4.21 Rancangan Layar Tambah Anggaran Belanja 112


Source code Tambah Anggaran Belanja:

$id_anggaran=mysql_insert_id(); if ($_POST[b1] == ''){ $persenfisik = '-'; $ttbfisik = '-'; }else{ $persenfisik = ($_POST[b1]/$_POST[e])*100; $ttbfisik = ($persenfisik*$dataumum[bobot])/100; } if ($_POST[b2] == ''){ $persenkeuangan = '-'; $ttbkeuangan

= '-';

}else{

113


$persenkeuangan = ($_POST[b2]/$_POST[d])*100; $ttbkeuangan = ($persenkeuangan*$dataumum[bobot])/100; } mysql_query("INSERT INTO rb_detail_target (id_anggaran_belanja, vol_fisik, persen_fisik, ttb_fisik, rp_keuangan, persen_keuangan, ttb_keuangan, waktu_target, id_user) VALUES ('$id_anggaran','$_POST[b1]','$persenfisik','$ttbfisik','$_POST[b2]','$persenkeuangan','$tt bkeuangan','$waktu','$_SESSION[id_user]')");

if ($_POST[b3] == ''){ $persenfisikrealisasi = '-'; $ttbfisikrealisasi

= '-';

}else{ $persenfisikrealisasi = ($_POST[b3]/$_POST[e])*100; $ttbfisikrealisasi

=

($persenfisikrealisasi*$dataumum[bobot])/100; } if ($_POST[b4] == ''){ $persenkeuanganrealisasi = '-'; $ttbkeuanganrealisasi = '-'; }else{ $persenkeuanganrealisasi = ($_POST[b4]/$_POST[d])*100; $ttbkeuanganrealisasi = ($persenkeuanganrealisasi*$dataumum[bobot])/100; } mysql_query("INSERT INTO rb_detail_realisasi (id_anggaran_belanja, vol_fisik, persen_fisik, ttb_fisik, rp_keuangan, persen_keuangan, ttb_keuangan, waktu_realisasi, id_user) VALUES ('$id_anggaran','$_POST[b3]','$persenfisikrealisasi','$ttbfisikrealisasi','$_POST[b4]','$per senkeuanganrealisasi','$ttbkeuanganrealisasi','$waktu','$_SESSION[id_user]')"); echo "<script>window.alert('Sukses Menambahkan Data Anggaran Belanja Baru.');

114


window.location='anggaran-belanja.mu'"; } ?>

Penjelasan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan perintah simpan data anggaran belanja pada aplikasi sistem informasi monitoring. Sistem akan penyimpan pada tabel rb_anggaran_belanja sesuai dengan yang telah diinput. Jika berhasil ada informasi “Suskes Menambahkan Data Anggaran Belanja Baru”. b. Lihat detail anggaran belanja

Gambar 4.22 Rancangan Layar Detail Anggaran Belanja

Keterangan: Tampil data anggaran belanja merupakan rancangan layar untuk menampilkan data anggaran belanja, target dan realisasi yang diambil dari database.

115


c. Edit anggaran belanja

56. Gambar 4.23 Rancangan Layar Edit Anggaran Belanja
116


if ($_POST[b1] == ''){ $persenfisik = '-'; $ttbfisik = '-'; }else{ $persenfisik = ($_POST[b1]/$_POST[e])*100; $ttbfisik = ($persenfisik*$dataumum[bobot])/100; } if ($_POST[b2] == ''){ $persenkeuangan = '-'; $ttbkeuangan = '-'; }else{ $persenkeuangan = ($_POST[b2]/$_POST[d])*100; $ttbkeuangan = ($persenkeuangan*$dataumum[bobot])/100; } mysql_query("UPDATE rb_detail_target SET vol_fisik= '$_POST[b1]', persen_fisik= '$persenfisik', ttb_fisik = '$ttbfisik', rp_keuangan= '$_POST[b2]', persen_keuangan = '$persenkeuangan', ttb_keuangan= '$ttbkeuangan' where id_detail_target='$_POST[id]'"); if ($_POST[b3] == ''){ $persenfisikrealisasi = '-'; $ttbfisikrealisasi

= '-';

}else{ $persenfisikrealisasi = ($_POST[b3]/$_POST[e])*100; $ttbfisikrealisasi

= ($persenfisikrealisasi*$dataumum[bobot])/100;

} if ($_POST[b4] == ''){ $persenkeuanganrealisasi = '-'; $ttbkeuanganrealisasi = '-'; }else{ $persenkeuanganrealisasi = ($_POST[b4]/$_POST[d])*100; $ttbkeuanganrealisasi = ($persenkeuanganrealisasi*$dataumum[bobot])/100; }

117


mysql_query("UPDATE rb_detail_realisasi SET vol_fisik= '$_POST[b3]', persen_fisik= '$persenfisikrealisasi', ttb_fisik = '$ttbfisikrealisasi', rp_keuangan= '$_POST[b4]', persen_keuangan = '$persenkeuanganrealisasi', ttb_keuangan= '$ttbkeuanganrealisasi' where id_detail_realisasi='$_POST[idd]'"); echo "<script>window.alert('Sukses Update Data Anggaran Belanja.'); window.location='anggaran-belanja.mu'"; } $eab = mysql_fetch_array(mysql_query("SELECT a.*, b.vol_fisik, b.id_detail_target, b.persen_fisik, b.ttb_fisik, b.rp_keuangan, b.persen_keuangan, b.ttb_keuangan, c.id_detail_realisasi, c.vol_fisik as vol_fisikk, c.persen_fisik as persen_fisikk, c.ttb_fisik as ttb_fisikk, c.rp_keuangan as rp_keuangann, c.persen_keuangan as persen_keuangann, c.ttb_keuangan as ttb_keuangann FROM rb_anggaran_belanja a JOIN rb_detail_target b ON a.id_anggaran_belanja=b.id_anggaran_belanja JOIN rb_detail_realisasi c ON a.id_anggaran_belanja=c.id_anggaran_belanja where a.id_anggaran_belanja='$_GET[id]'")); ?>

Penjelassan Sourcode: Sourcode di atas merupakan sourcode yang digunakan untuk melakukan edit data anggaran belanja pada aplikasi sistem informasi monitoring. Pengambilan data pada database menggunakan metode post dan get terhadap id_anggaran_belanja pada tabel rb_anggaran_belanja, jika sesuai maka akan tampil data pegawai berdasarkan id_anggaran_belanja. Selanjutnya data update disimpan, jika berhasil maka ada informasi “'Sukses Update Data Anggaran Belanja.”.

118


9. Rancangan Laporan a. Tampil Laporan

Gambar 4.24 Rancangan Layar Tampil Laporan

Keterangan: Tampil laporan merupakan rancangan layar untuk menampilkan laporan realisasi pelaksanaan anggaran pada ditjen Penyelenggaraan Haji dan Umrah. b. Lihat Detail Laporan

Gambar 4.25 Rancangan Detail Laporan 119


Keterangan: Detail laporan merupakan rancangan layar untuk menampilkan secara detail format laporan yang merupakan hasil cetak dari aplikasi monitoring pelaksanan anggaran. c. Export Excel Laporan

Keterangan: Export Excel merupakan rancangan layar untuk menampilkan secara detail format laporan yang merupakan hasil cetak dari aplikasi monitoring pelaksanan anggaran dalam bentuk microsoft excel.

120


4.2 Kesimpulan Hasil Rancangan Dalam rancangan layar aplikasi moniring pelaksanaan anggaran di lingkungan direktorat Jenderal Penyelenggaraan Haji dan Umrah, penulis menarik beberapa kesimpulan diantaranya : 1. Untuk menampilkan hasil rancangan ini penulis menggunakan web browser Mozilla

Firefox

versi

35.0,

kemudian

masuk

ke

alamat

browser

http://localhost/monitoring dan akan muncul halaman aplikasi monitoring pelaksanaan anggaran pada Ditjen PHU. 2. Untuk koneksi ke database, penulis menggunakan web server Xampp versi 3.1.0.3.1.0. 3. Dalam perancangan layar aplikasi monitoring pelaksanaan anggaran ini pada menu user sudah dapat dioperasikan untuk proses input, edit, dan delete data file master dan menu proses. 4. Rancangan

layar yang ditampilkan sangat memudahkan user untuk

mengoperasikan aplikasi.

121


No title

Recommend Documents

Terjadi Kesalahan!