1 BAB IV RANCANGAN SISTEM DIUSULKAN 4.1. Network Diagram Perancangan network diagram menggambarkan kelas-kelas pada sistem serta hubungan jaringan dal...
4.1. Network Diagram Perancangan network diagram menggambarkan kelas-kelas pada sistem serta hubungan jaringan dalam mendukung sebuah sistem, berikut adalah penggambaran network diagram.
Cloud
Modem Komputer Karyawan Kabel USB
Server Komputer GA
Printer
Komputer Pimpinan Cabnag
Gambar 4.1 Network diagram
Gambar diatas adalah gambar network diagram dalam membangun sistem informasi maintenance gedung dan sarana pada BRI Syariah Cabang Kebon Jeruk melalui metode web. Dimana web didukung oleh jaringan internet yang diperoleh dari modem, modem tersebut dapat menghubungkan komputer-komputer karyawan, general affair dan pimpinan cabang dan juga printer.Dimana data dapat disiman melalui bantuan cloud.
47
http://digilib.mercubuana.ac.id/
48
4.2. Perancangan Aplikasi (Application Design) Perancangan ini menggambarkan bagaimana software membangun sistem informasi maintenance gedung dan sarana pada PT. BRI Syariah KC. Kebon Jeruk. Berikut ini adalah gambaran perancangan aplikasi yang mendukung pembangunan aplikasi maintenance ini.
Gambar 4.2 Desain Aplikasi Maintenance Gedung dan Sarana PT. BRI Syariah KC. Kebon Jeruk Gambar diatas menjelaskan bahwa Aplikasi yang diakai adalah browser yang dapat diakses melalui desktop maupun mobile. Server yang digunakan adalah Amazon EC2, sedangkan web server yang digunakan adalah Apache, Setelah itu dalam pembuatan coding menggunakan PHP dengan framework Laravel 4.0. Selain itu, terdapat JIT Compiler dan menggunakan MySQL database.
4.3. Struktur Tabel Basis Data Bagian ini dibuat berdasarkan class diagram yang digambarkan pada bab sebelumnya, struktur tabel basis data merupakan rincian dari setiap class yang ada pada class diagram. Pembuatan program aplikasi ini penulis menggunakan satu database yaitu smana.sql yang terdiri dari tabel berikut :
Perancangan Tampilan (MockUp) Perancangan ini menggambarkan bagaimana tampilan web support akan dibuat,
seperti diantaranya susunan menu, button, pengisian kolom apakah combo box dll dirincikan pada bagian ini a.
Login Gambar
berikut
adalah
gambar
pertama
yang
muncul
ketika
Staff
Admin/Manager membuka aplikasi. Pengguna harus login terlebih dahulu.
Gambar 4.3 Mock Up Login
Login adalah tampilan form login sebelum masuk ke dalam menu utama aplikasi maintenance site. Terdapat tombol Login dan Cancel. Ketika pilih tombol login dengan keadaan username dan password benar maka aplikasi akan masuk ke dalam tampilan menu utama
http://digilib.mercubuana.ac.id/
53
b.
Menu Utama Gambar berikut adalah gambar menu utama yang muncul ketika Pengguna
berhasil login aplikasi.
Gambar 4.4 Mock Up Menu Utama
Gambar diatas adalah Menu utama yaitu tampilan yang akan pertama tampil ketika pengguna berhasil melakukan verifikasi login.Terdapat 3 akses level yaitu karyawan, general affair dan pimpinan cabang.
http://digilib.mercubuana.ac.id/
54
c.
Data Karyawan Gambar berikut adalah halaman yang akan muncul ketika General Affair memilih
sub menu Data Karyawan pada Data Master.
Gambar 4.5 Mock Up Data Karyawan
Gambar diatas adalah gambar form data karyawan. Data karyawan adalah sub menu dari data master. Didalam form ini terdapat nik yang terisi otomatis dan yang lain diisi manual oleh general affair. Terdapat tombol simpan, ubah, hapus.
http://digilib.mercubuana.ac.id/
55
d.
Data Inventaris Gambar berikut adalah halaman yang akan muncul ketika General affair memilih
sub menu Data Inventaris pada Data Master.
Gambar 4.6 Mock Up Data Inventaris Gambar diatas adalah Mock Up form Data inventaris. Data inventaris dapat diakss oleh General Affair. Cara akses form ini adalah dengan cara memilih sub menu data master yaitu data inventaris. Dalam data item pilih simpan untuk menyimpan data, sedangkan ubah untuk mengubah dan haus untuk menghapus data.
http://digilib.mercubuana.ac.id/
56
e.
Data Vendor Gambar berikut adalah halaman yang akan muncul ketika General Affair memilih
sub menu Data vendor pada Data Master.
Gambar 4.7 Mock Up Data Vendor
Gambar diatas adalah Mock Up form Data vendor. Data vendor dapat diakss oleh General Affair. Cara akses form ini adalah dengan cara memilih sub menu data master yaitu data vendor. Dalam data pengguna pilih smpan untuk menyimpan data, sedangkan ubah untuk mengubah dan haus untuk menghapus data.
http://digilib.mercubuana.ac.id/
57
f.
Approval Form Perbaikan oleh General Affair Gambar berikut adalah halaman yang akan muncul ketika general affair memilih
Tiket Permohonan Perbaikan dan memilih data pada tabel.
Gambar 4.8 Mock Up Bukti Approval Form Permohonan Perbaikan oleh General affair
Approval Tiket Permohonan Perbaikan adalah TPP yang terkirim setelah TPP ditulis oleh karyawan selain pimpinan cabang dan general affair. Pada Data TPP tidak aktif hanya bisa dilihat tetapi tidak bisa dirubah. Kemudian Nomor Approve dan tanggal approve muncul otomatis. Pilih simpan maka data akan tersimpan.
http://digilib.mercubuana.ac.id/
58
g.
Approval Tiket Permohonan Perbaikan Oleh Pimpinan cabang Gambar berikut adalah halaman yang akan muncul ketika Pimpinan Cabang
memilih Tiket Permohonan Perbaikan dan memilih data pada tabel.
Gambar 4.9 Mock Up Approval Tiket Permohonan Perbaikan Oleh Pimpinan Cabang
Approval Form Permohonan Perbaikan adalah TPP yang terkirim setelah FPP dikirim oleh General affair. Pada Data TPP tidak aktif hanya bisa dilihat tetapi tidak bisa dirubah. Kemudian Nomor Approve dan tanggal approve muncul otomatis. Pilih simpan maka data akan tersimpan.
http://digilib.mercubuana.ac.id/
59
h.
Laporan Gambar berikut adalah halaman yang akan muncul ketika General Affair memilih
menu Laporan
Gambar 4.10 Mock Up Laporan
Laporan dapat diakses oleh general affair yang nantinya hasil cetakan akan dilaporkan pada pimpinan cabang. Pilih bulan laporan lalu pilih cetak.
http://digilib.mercubuana.ac.id/
60
i.
Tiket Permohonan Perbaikan oleh karyawan Gambar berikut adalah gambar yang akan muncul ketika Karyawan memilih
Tiket Permohonan Perbaikan.
Gambar 4.11 Mock Up Tiket Permohonan Perbaikan pada Engineer
Tiket Permohonan Perbaikan pada Karyawan, nomor perbaikan dan nik muncul otomatis,karyawan mengisi data kemudian memilih simpan dan terdapat pilihan tambah data atau tidak. Menu pada atas form tidak aktif.
http://digilib.mercubuana.ac.id/
61
j.
Status Permohonan Perbaikan Gambar berikut adalah mock up form Status Permohonan Perbaikan.
Gambar 4.12 Mock Up Form Status Permohonan Perbaikan
Gambar diatas adalah Form Status Permohonan Perbaikan. Status ini memudahkan karyawan yang mencari apa status permohonan perbaikannya seperti apa.
http://digilib.mercubuana.ac.id/
62
k.
Pemberitahuan untuk general affair Gambar berikut adalah mock up form Pemberitahuan yang akan tampil ketika ada
permohonan yang baru masuk dari karyawan atau pemberitahuan persetujuan dari pimpinan cabang.
Gambar 4.13 Mock Up Pemberitahuan General affair
Pemberitahuan masuk ketika terdapat perkembangan persetujuan dari pimpinan cabang. Pemberitahuan ini dapat menghubungkan dengan status permohonan.
http://digilib.mercubuana.ac.id/
63
l.
Form Pemberitahuan Pimpinan Cabang Gambar berikut adalah mock up form Pemberitahuan Pimmpinan Cabang yang
dapat dibuka dengan memilih menu Pemberitahuan Approve.
Gambar 4.14 Mock Up Form Pemberitahuan Pimpinan Cabang
Gambar diatas adalah gambar mock up Form Pemberitahuan Pimpinan Cabang. Pemberitahuan ini dapat dibuka oleh pimpinan cabang mengenai pemberitahuan approve seperti permohonan yang telah disetujui general affair ataum permohonan persetujuan baru.
http://digilib.mercubuana.ac.id/
64
m.
Laporan maintenance Gedung dan Sarana Gambar berikut adalah desain lembar laporan maintenance gedung dan sarana.
Gambar 4.15 Desain laporan maintenance gedung dan sarana
Gambar diatas adalah gambar desain laporan maintenance gedung dan sarana pada Bank BRI Syariah KC Kebon Jeruk. Laporan ini dapat dibuka oleh general affair kemudian dicetak dan dilaporkan kepada pimpinan cabang.
