BAB IV RANCANGAN SISTEM DIUSULKAN

BAB IV RANCANGAN SISTEM DIUSULKAN 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 Komputer Karyawan Modem Kabel USB Komputer GA Server 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

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 :

49 1. Tabel karyawan Nama File : Karyawan Panjang Record : 125 karakter Record Key : nik Tabel 4.1 Spesifikasi File karyawan No Nama Field Akronim Tipe Panjang Keterangan 1 No Induk Karyawan Nik Varchar 13 Primary Key 2 Nama Karyawan Namakar Varchar 30 3 Tempat Tempat Varchar 15 4 Tgl_lahir Tgl_lahir Date 5 Alamat Alamat Text 6 Jenis Kelamin jeniskelamin Varchar 10 7 Jabatan Jabatan Varchar 20 8 Telp Karyawan Telpkar Varchar 12 9 Agama agama Varchar 15 10 Password Password Varchar 10 11 Akses Level akseslevel Varchar 10 2. Tabel inventaris Nama File : Inventaris Panjang Record : 119 karakter Record Key : kodeinventaris Tabel 4.2 Spesifikasi File inventaris No Nama Field Akronim Tipe Panjang Keterangan 1 Kode Inventaris Kodeinventaris Varchar 4 Primary Key 2 Nama Inventaris Namainventaris Varchar 20 3 Nama Item namaitem Varchar 20 4 Merk merk Varchar 10 5 Type type Varchar 10 6 Serialno serialno Varchar 15 7 Kapasitas kapasitas Varchar 10 8 Letak Inventaris letakinventaris Varchar 10 9 Keterangan Item Ket_item Varchar 20

50 3. Tabel vendor Nama File : vendor Panjang Record : 119 karakter Record Key : kodevendor Tabel 4.3 Spesifikasi File vendor No Nama Field Akronim Tipe Panjang Keterangan 1 Kode Vendor Kodevendor Varchar 5 Primary key 2 Nama Vendor Namavendor Varchar 20 Foreign key 3 Alamat alamat Varchar 30 4 Contact Person Contactperson Varchar 20 5 Telp Vendor Telpvendor Varchar 24 6 Jenis Barang Jenisbarangdijual Varchar 20 4. Tabel perbaikan Nama File : Perbaikan Panjang Record : 155 karakter Record Key : noperbaikan Tabel 4.4 Spesifikasi File perbaikan No Nama Field Akronim Tipe Panjang Keterangan 1 Nomor Perbaikan Noperbaikan Varchar 13 Primary Key 2 Tanggal permohonan Tgl Date 3 Kode Vendor Kodevendor Varchar 5 Foreign Key 4 No Induk Karyawan nik Varchar 13 Foreign Key 5 Kode Inventaris kodeinventaris Varchar 4 Foreign Key 6 Foto 1 Foto1 Varchar 20 7 Foto 2 Foto2 Varchar 20 8 Foto 3 Foto3 Varchar 20 9 Foto 4 Foto4 Varchar 20 10 Kerusakan kerusakan Varchar 20 11 Ket. Perbaikan Ket_perbaikan Varchar 20

51 5. Tabel AppPerbaikanGA Nama File : AppPerbaikanGA (Approval Oleh General Affair) Panjang Record : 53 karakter Record Key : noapp_perbaikanga Tabel 4.5 Spesifikasi File AppPerbaikanGA No Nama Field Akronim Tipe PJG Keterangan 1 Nomor Approve Noapp_perbaikanga Varchar 13 Primary Key 2 Nomor Perbaikan Noperbaikan Varchar 13 Foreign Key 3 Tanggal Approve Tglappga Date 4 Keterangan Perbaikan Ket_perbaikanga Varchar 20 5 Status Approve Statusapp_perbaikan Varchar 7 8. Tabel AppPerbaikanPinCa Nama File : AppPerbaikanPinCa (Approve Oleh Pimpinan Cabang) Panjang Record : 53 karakter Record Key : nopapp_perbaikanpinca Tabel 4.6 Spesifikasi File Appperbaikanpinca No Nama Field Akronim Tipe PJG Keterangan 1 Nomor Approve Noapp_perbaikanpinca Varchar 13 Primary Key 2 Nomor Perbaikan Noperbaikan Varchar 13 Foreign Key 3 Tanggal Approve Tglapppinca Date 4 Ket. Perbaikan Ket_perbaikanpinca Varchar 20 5 Status Approve Statusapp_perbaikanpinca Varchar 7

52 4.2 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

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.

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.

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.

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.

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.

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.

59 h. Laporan menu Laporan Gambar berikut adalah halaman yang akan muncul ketika General Affair memilih 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.

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.

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.

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.

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.

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.