BAB 4. PERANCANGAN 4.1. Perancagan Basis Data Perancangan basis data bertujuan untuk menjelaskan hubungan antara entitas yang ada dalam sistem informasi monitoring fasilitas gedung berbasiskan jaringan. Perancangan basis data diperlukan agar basis data menjadi kompak dan efisien dalam penyimpanan, cepat dalam proses pengaksesan, dan mudah dalam memanipulasi data. Gambar 4-1 Gambar Relasi Database 4.1.1 Spesifikasi Basis Data a. Nama file : pegawai Primary Key : id_pegawai Struktur file : Tabel 4-1 Tabel pegawai 1 Id_pegawai int 5 Id 4-1
2 Nama varchar 20 Nama pegawai 3 Email char 50 Email 4 handphone char 20 Handphone 5 Jabatan int 5 Jabatan 6 Nip Varchar 30 nip 7 Jenis_kelamin char 1 Jenis kelamin 8 aktif char 1 aktif b. Nama file : jabatan Primary Key : id_jabatan Strukur file : Tabel 4-2 Tabel jabatan 1 Id_jabatan Int 5 Jabatan id 2 nama varchar 20 nama c. Nama file : user Primary Key : iduser Struktur file : Tabel 4-3 Tabel user 1 Iduser int 5 User id 2 Pegawai_id int 5 Id pegawai 3 Username varchar 20 Username 4 Password char 32 Kata sandi 5 akses Int 5 Level akses d. Nama file : web_akses Primary Key : idakses Struktur File : 4-2
Tabel 4-4 Tabel web_akses 1 Idakses int 5 Id akses 2 nama varchar 20 Nama akses e. Nama file : laporan Primary Key : id_laporan Struktur file : Tabel 4-5 Tabel laporan 1 idlaporan int 11 Laporan id 2 pelapor int 5 pelapor 3 barcode varchar 15 barcode 4 idobjek int 5 Objek id 5 keterangan varchar 100 Keterangan 6 Foto_before varchar 100 Foto masalah 7 fotolokasi varchar 100 Foto tempat 8 longitude varchar 30 longitude 9 latitude varchar 30 latitude 10 Tanggal_pelaporan timestamp Tanggal laporan 11 spk int 5 spk 12 status tinyint 4 status f. Nama file : objek Primary Key : idobjek Struktur file : Tabel 4-6 Tabel objek 4-3
1 idobjek int 5 Id objek 2 nama varchar 20 Nama g. Nama file : spk Primary Key : idspk Struktur file : Tabel 4-7 Tabel spk 1 idspk int 5 Id spk 2 idarea int 5 Id area 3 nospk int 5 No spk h. Nama file : vendor Primary Key : idvendor Struktur file : Tabel 4-8 Tabel vendor 1 idvendor int 5 Id vendor 2 Username varchar 30 username 3 password char 32 Katasandi 4 area int 5 Area 5 perusahaan varchar 100 perusahaan 6 Email varchar 100 Email i. Nama file : log Primary Key : idlog Struktur file : Tabel 4-9 Tabel log 4-4
1 idlog Int 5 idlog 2 laporan int 5 laporan 3 Foto_after varchar 100 Foto perbaikan 4 Tgl_perbaikan timestamp j. Nama file : area Primary Key : id Struktur file : Tabel 4-10 Tabel area 1 id Int 5 Id 2 Area_id int 5 Area 3 alamat varchar 200 alamat 4 phone varchar 30 No kantor 5 fax varchar 30 No fax 6 Email varchar 100 Email 4.1.2 Structure Query Language (SQL) Dalam pembuatan tahap Structure Query Language (SQL) dapat dilakukan dengan dua tahap sebagai berikut: 4.1.2.1 Pembuatan Tabel Berikut adalah sintak SQL yang digunakan dalam pebuatan tabel yang berkenaan dengan sistem monitoring: a. Tabel pegawai CREATE TABLE `pegawai` ( `id_pegawai` int(5) NOT NULL, `nama` varchar(20) DEFAULT NULL, `email` char(50) DEFAULT NULL, `handphone` char(20) DEFAULT NULL, 4-5
`jabatan` int(5) DEFAULT NULL, `nip` varchar(30) DEFAULT NULL, `jenis_kelamin` char(1) DEFAULT NULL, `aktif` char(1) DEFAULT NULL, `area` int(5) DEFAULT NULL b. Tabel jabatan CREATE TABLE `jabatan` ( `idjabatan` int(5) NOT NULL, `nama` varchar(20) DEFAULT NULL c. Tabel user CREATE TABLE `user` ( `iduser` int(5) NOT NULL, `pegawai_id` int(5) NOT NULL, `username` varchar(20) DEFAULT NULL, `password` char(32) DEFAULT NULL, `akses` int(5) DEFAULT NULL d. Tabel web_akses CREATE TABLE `web_akses` ( `idakses` int(5) NOT NULL, `nama` varchar(20) DEFAULT NULL e. Tabel laporan CREATE TABLE `laporan` ( `idlaporan` int(11) NOT NULL, `pelapor` int(5) DEFAULT NULL, `barcode` varchar(15) DEFAULT NULL, `idarea` int(5) DEFAULT NULL, `idobjek` int(5) DEFAULT NULL, `keterangan` varchar(100) DEFAULT NULL, `foto_before` varchar(200) DEFAULT NULL, `fotolokasi` varchar(200) DEFAULT NULL, `longitude` varchar(30) DEFAULT NULL, 4-6
`latitude` varchar(30) DEFAULT NULL, `tanggal_pelaporan` timestamp NULL DEFAULT NULL, `spk` int(5) DEFAULT NULL, `status` tinyint(4) DEFAULT NULL f. Tabel objek CREATE TABLE `objek` ( `idobjek` int(5) NOT NULL, `nama` varchar(30) DEFAULT NULL, `sla` int(5) DEFAULT NULL g. Tabel spk CREATE TABLE `spk` ( `idspk` int(5) NOT NULL, `idarea` int(5) DEFAULT NULL, `nospk` int(5) DEFAULT NULL h. Tabel vendor CREATE TABLE `vendor` ( `idvendor` int(5) NOT NULL, `username` varchar(30) DEFAULT NULL, `password` char(32) DEFAULT NULL, `area` int(5) DEFAULT NULL, `perusahaan` varchar(100) DEFAULT NULL, `email` varchar(100) DEFAULT NULL i. Tabel log CREATE TABLE `log` ( `idlog` int(5) NOT NULL, `laporan` int(5) DEFAULT NULL, `keterangan` varchar(100) DEFAULT NULL, `foto_after` varchar(100) DEFAULT NULL, `tgl_perbaikan` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP 4-7
j. Tabel area CREATE TABLE `area` ( `idarea` int(5) NOT NULL, `nama` varchar(50) DEFAULT NULL, `alamat` varchar(200) DEFAULT NULL, `phone` varchar(30) DEFAULT NULL, `fax` varchar(30) DEFAULT NULL, `email` varchar(100) DEFAULT NULL 4.1.2.2 Manipulasi Data a. area INSERT INTO `area` (`id`, `area_id`, `nama`, `alamat`, `phone`, `fax`) VALUES (1, 101, 'JAKARTA KOTA', 'Jl. Lapangan Stasiun No.12 Jakarta Barat 11210', '(021)5604614', '(021)3008357'), (2, 102, 'JAKARTA KYAI TAPA', 'Jl. Kyai Tapa No.929 Jakarta Barat 11440', '(021)57962890', '(021)3208357'), (3, 103, 'JAKARTA PULOGADUNG', 'Jl. Ir. H. Juanda No.108 Jakarta Pusat 10120', '(021)2102411', '(021)2103744 / 2102567'); b. jabatan INSERT INTO `jabatan` (`idjabatan`, `nama`) VALUES (1, 'Manager'), (2, 'Staff'); c. laporan INSERT INTO `laporan` (`idlaporan`, `pelapor`, `barcode`, `idobjek`, `keterangan`, `foto_before`, `fotolokasi`, `longitude`, `latitude`, `spk`) VALUES (1, 1, '102ABCD', 1, 'rusak', '', '', '', '', 1); d. pegawai INSERT INTO `pegawai` (`id_pegawai`, `nama`, `jabatan`, `nip`, `jenis_kelamin`, `aktif`) VALUES (1, 'Rahmat', 2, '41511120068', 'P', 'Y'), (2, 'Manager', 1, '41511120012', 'P', 'Y'); 4-8
e. spk INSERT INTO `spk` (`idspk`, `idarea`, `nospk`) VALUES (1, 102, 1), (2, 103, 1); f. user INSERT INTO `user` (`iduser`, `username`, `password`, `akses`) VALUES (1, 'surveyor', '0192023a7bbd73250516f069df18b500', 2), (2, 'admin', '0192023a7bbd73250516f069df18b500', 1); g. Vendor INSERT INTO `vendor` (`idvendor`, `username`, `password`, `area`, `perusahaan`) VALUES (1, 'vendor', '0192023a7bbd73250516f069df18b500', 101, 'Vendor 1'); h. Web_akses INSERT INTO `web_akses` (`idakses`, `nama`) VALUES (1, 'administrator'), (2, 'staff'); 4.1.3 Perancangan Struktur Menu Aplikasi Web Perancangan struktur menu aplikasi monitoring fasilitas gedung ini diawali dengam menu login. didalam aplikasi ini terdapat tiga level, admin, user, vendor. Semua mempunyai menu dan sub menu yang berbeda-beda. 4-9
Gambar 4-2 Rancangan Struktur Aplikasi 4.1.3.1 Perancangan Antar Muka Login Antar muka berfungsi sebagai form awal dan juga sebagai penghubung antara pengguna dengan sistem perizinan cuti yang berbasiskan jaringan dalam berinteraksi seperti monitoring fasilitas gedung. Dalam perancangan harus mengacu kepada teknik interaksi manusia dan komputer (IMK) agar sistem menjadi mudah bagi pengguna. Perancangan login merupakan tampilan pertama ketika aplikasi dijalankan. Tampilan ini berfungsi sebagai keamanan sistem, sehingga ketika penguna akan masuk kedalam sistem harus mengisi password dan 4-10
username. Jika proses pengisian ini benar makan pengguna akan masuk ke dalam tampilan menu utama dan jika salah maka sistem akan menolaknya. Gambar 4-3 Menu Login 4.1.3.2 Perancangan Antar Muka Menu Utama Antar muka menu utama adalah tampilan utama program aplikasi Sistem Informasi Monitoring Fasilitas Gedung. 4-11
Gambar 4-4 Gambar Menu Utama 4.1.3.3 Perancangan Antar Muka Entry Data Antar muka menu utama adalah tampilan utama program aplikasi Sistem Informasi Monitoring Fasilitas Gedung. Gambar 4-5 Gambar Menu Entry Data 4.1.4 Perancangan Antar Muka Bagian Client Dalam desain antar muka bagian client terdapat beberapa bagian-bagian yang digunakan untuk merancang aplikasi, diantaranya yaitu; rancangan halaman splash, rancangan halaman login, rancangan halaman surveyor, rancangan halaman konfirmasi vendor. 1. Rancangan Halaman Splash 4-12
Gambar 4-6 Rancangan Halaman Splash Keterangan Gambar : Nomor 1 : Nama program berupa textview Nomor 2 : Logo berupa imageview 2. Racangan Halaman Login Gambar 4-7 Rancangan Halaman Login 4-13
Keterangan Gambar : Nomor 1 : Input username berupa edittext Nomor 2 : Input Password berupa edittext Nomor 3 : Select akses berupa spinner Nomor 4 : Tombol login berupa Button 3. Rancangan Halaman Scan Barcode Gambar 4-8 Rancangan Halaman Barcode Keterangan Gambar : Nomor 1 : Tombol scan berupa imageview Nomor 2 : Inputan barcode id berupa edittext Nomor 3 : Tombol selanjutnya berupa button 4. Rancangan Halaman Surveyor 4-14
Gambar 4-9 Rancangan Halaman Surveyor Keterangan Gambar : Nomor 1 : fasilitas bermasalah berupa spinner Nomor 2 : foto objek berupa imageview Nomor 3 : foto lokasi berupa imageview Nomor 4 : keterangan permasalahan berupa edit text Nomor 5 : submit berupa button 5. Rancangan Halaman Vendor 4-15
Gambar 4-10 Rancangan Halaman Vendor Keterangan Gambar : Nomor 1 : fasilitas bermasalah berupa imageview Nomor 2 : foto lokasi berupa imageview Nomor 3 : foto perbaikan berupa imageview Nomor 4 : kirim berupa button 4-16