Rancangan User Interface Rancangan Sistem Informasi Baru

pada aplikasi XAMPP. Berikut merupakan tampilan database sistem informasi baru secara garis besar: Gambar 5.3 Tampilan Database Sistem Informasi pada Program Observasi Keselamatan Kerja dan Pelaporan Nearmiss Berbasis Website. Tampilan database sistem informasi baru secara lebih detail dapat dilihat pada Lampiran 14.

e. Rancangan User Interface

Rancangan user interface merupakan rancangan yang berhubungan langsung dengan pengguna. Rancangan User Interface UI pada perangkat lunak sistem informasi baru dibagi menjadi berdasarkan prosesnya, yaitu administrasi akun, pengisian hasil observasi keselamatan kerja, pengisian laporan nearmiss, dan pencarian akun. Rancangan ini diadopsi dari format kartu pada sistem informasi lama dan menggunakan bahasa Indonesia agar cepat dan mudah dipahami oleh pengguna. 1 Administrasi Akun Rangkaian userinterface pada sub-bagian ini merupakan rangkaian dalam proses 1.0, “Administrasi akun”, yamg terdiri dari “halaman utama”, halaman “pendaftar baru”, halaman “info registrasi”, halaman “verifikasi akun”, dan halaman “login”. Gambar 5.4 Halaman Utama “Program Observasi Keselamatan Kerja dan Pelaporan Nearmiss Berbasis Website” Gambar 5.4 merupakan tampilan awal, atau halaman utama dari aplikasi berbasis website. Pengguna dapat menekan menu “Daftar” untuk melakukan registrasi pada halaman “Pendaftaran Pengguna Baru”. Gambar 5.5 Halaman “Pendaftaran Pengguna Baru” Gambar 5.5 merupakan tampilan halaman “Pendaftaran Pengguna Baru”. Terdapat variabel “Nama Akun”, “Password”, “Nama Lengkap”, “Fungsi”, “E-mail”, “Nomor Handphone” dan “Nama Institusi” untuk disi oleh pengguna baru yang ingin mendaftar. Gambar 5.6 Halaman “Informasi Registrasi” Gambar 5.6 merupakan tampilan Halaman “Info Registrasi” yang berisi hasil registrasi yang telah dilakukan oleh pengguna. Gambar 5.7 Halaman “Verifikasi Akun” Gambar 5.7 merupakan tampilan Halaman “Verifikasi Akun” yang berfungsi untuk memverifikasi akun dan menentukan hak akses. Halaman ini hanya dapat diakses oleh PJ Program atau Admin. Gambar 5.8 Halaman “Login” Gambar 5.8 merupakan tampilan Halaman “Login” yang berfungsi sebagai gerbang masuk. Login terdiri dari variabel input “username” dan “password”, kedua variabel tersebut didapatkan dari registrasi akun. 2 Pengisian Hasil Observasi Keselamatan Kerja Rangkaian userinterface pada sub-bagian ini merupakan rangkaian dalam proses 2.0, “Pengisian Hasil Observasi Keselamatan Kerja”, yamg terdiri dari halaman “Formulir Observasi Keselamatan Kerja”, halaman “Hasil Input Observasi Keselamatan Kerja”, halaman “Tindak Lanjut Observasi Keselamatan Kerja”. Gambar 5.9 Halaman “Formulir Observasi Keselamatan Kerja” Gambar 5.9 merupakan tampilan Halaman “Formulir Observasi Kerja” yang digunakan untuk melakukan input terhadap hasil Observasi Keselamatan Kerja. Pada halaman ini terdapat beberapa variabel, yaitu “Jenis PerilakuKondisi Tidak Aman”, “Jenis kejadian”, “Tanggal laporan”, “Waktu laporan” “Tempat Kejadian”, “Deskripsi Kejadian”, “Aktivitas saat Kejadian”, “Langkah Koreksi”, dan Fitur untuk melakukan unggahan gambar. Setelah pelapor menginput dan menyimpan data, maka akan terkirim notifikasi otomatis ke e-mail PJ Program bahwa terdapat input hasil observasi keselamatan kerja untuk ditindaklanjuti. Gambar 5.10 Halaman “Hasil Input Observasi Keselamatan Kerja” Gambar diatas merupakan tampilan Halaman “Hasil Input Observasi Keselamatan Kerja”. Merupakan halaman yang memberikan informasi mengenai hasil observasi keselamatan kerja yang baru saja diinput. Gambar 5.11 Halaman “Tindak Lanjut Observasi Keselamatan Kerja” Gambar 5.11 merupakan tampilan Halaman “Tindak Lanjut Observasi Keselamatan Kerja”. Merupakan halaman tindak lanjut yang diisi oleh PJ Program dan Manajer, serta dilakukan oleh Person in Charge PIC. Setiap tingkatkan hasil input akan mendapatkan status tindak lanjut yang berbeda-beda. Setiap update oleh masing- masing tingkatan, maka akan terkirim secara otomatis e-mail kepada tingkatan atau pengguna pada alir selanjutnya untuk segera menindaklanjuti laporan. Urutan tindak lanjut adalah PJ Program, Manajer HSE, PIC lalu kembali ke PJ Program. 3 Pengisian Laporan Nearmiss Rangkaian userinterface pada sub-bagian ini merupakan rangkaian dal am proses 3.0, “Pengisian Laporan Nearmiss”, yamg terdiri dari halaman “Formulir Nearmiss”, halaman “Hasil Input Laporan Nearmiss ”, halaman “Tindak Lanjut “Laporan Nearmiss”. Gambar 5.12 Halaman “Formulir Nearmiss” Gambar 5.12 merupakan tampilan Halaman “Formulir Nearmiss” yang digunakan untuk melakukan input terhadap Laporan Nearmiss. Pada halaman ini terdapat beberapa variabel, yaitu “Jenis kejadian”, “Tanggal laporan”, “Waktu laporan” “Tempat Kejadian”, “Aktivitas saat Kejadian”, “Jenis PerilakuKondisi Tidak Aman”, “Deskripsi Kejadian”, “Langkah Koreksi”, dan Fitur untuk melakukan unggahan gambar. Setelah pelapor menginput dan menyimpan data, maka akan terkirim notifikasi otomatis ke e-mail PJ Program bahwa terdapat input laporan nearmiss untuk ditindaklanjuti. Gambar 5.13 Halaman “Hasil Input Laporan Nearmiss” Gambar 5.13 merupakan tampilan Halaman “Hasil Input Laporan Nearmiss ”. Merupakan halaman yang berisi informasi mengenai laporan nearmiss yang telah diinput. Gambar 5.14 Halaman “Tindak Lanjut Laporan Nearmiss” Gambar 5.14 merupakan tampilan Halaman “Tindak Lanjut Laporan Nearmiss ”. Serupa dengan Tindak Lanjut Hasil Observasi Keselamatan Kerja, halaman tindak lanjut ini diisi oleh PJ Program dan Manajer, serta dilakukan oleh Person in Charge PIC. Setiap tingkatkan hasil input akan mendapatkan status tindak lanjut yang berbeda-beda. Setiap update oleh masing-masing tingkatan, maka akan terkirim secara otomatis e-mail kepada tingkatan atau pengguna pada alir selanjutnya untuk segera menindaklanjuti laporan. Urutan tindak lanjut adalah PJ Program, Manajer HSE, PIC lalu kembali ke PJ Program. 4 Pencarian Laporan Rangkaian userinterface pada sub-bagian ini merupakan rangkaian dalam pros es 4.0, “Pencarian Laporan”, yang terdiri dari ha laman “Pencarian Laporan”, halaman “Rangkuman Laporan” dan halaman “Laporanku”. Gambar 5. 15 Pencarian Laporan Gambar 5.15 merupakan tampilan Halaman “Pencarian Laporan”. Halaman ini digunakan untuk mencari daftar laporan dalam rentang tanggal, waktu atau tertentu sesuai dengan kebutuhan. Gambar 5. 16 Rangkuman Laporan Gambar 5.16 merupakan tampilan Halaman “Rangkuman Laporan”. Halaman ini digunakan untuk menampilkan daftar laporan yang dicari pada halaman “Pencarian Laporan” dalam bentuk tabel dan grafik. “Rangkuman laporan” terdiri dari beberapa macam laporan berdasarkan waktu, tempat kejadian, pengguna dan status tindak lanjut, sesuai dengan kebutuhan pengguna dalam analisis sistem. Gambar 5. 17 Laporanku Gambar 5.17 merupakan tampilan Halaman “Laporanku”. Merupakan halaman yang digunakan untuk menampilkan laporan yang telah diinput oleh sebuah akun yang itu sendiri.

f. Uji Coba Rancangan