BAB IV DESKRIPSI PEKERJAAN
4.2 Perancangan Sistem
4.2.5 Desain Interface
Desain interface adalah suatu rancangan dari form-form yang mengimplementasikan input-an dan rancangan output yang berupa laporan-laporan dimana laporan-laporan-laporan-laporan tersebut akan digunakan sebagai dokumentasi. Adapun desain input dan output tersebut antara lain :
1. Desain Form Login
Pada form login terdapat textbox NIK dan password yang digunakan untuk mengisi nik dan password karyawan yang ingin menggunakan aplikasi ini. Button masuk digunakan untuk melakukan proses log pada aplikasi ini agar karyawan yang telah mengisi textbox NIK dan password tersebut dapat masuk ke dalam menu aplikasi ini sesuai statusnya masing-masing. Jika NIK dan password
STIKOM
yang diisikan sesuai, maka menu aplikasi ini akan muncul dengan menekan button masuk. Desain form login dapat dilihat pada Gambar 4.29.
LOGO TELKOM
NIK :
PASSWORD :
MASUK
Gambar 4.29 Desain form login
2. Desain Form Input Data Master Klasifikasi
Pada form input data master klasifikasi terdapat textbox kode klasifikasi yang di auto generate, serta textbox nama klasifikasi yang dapat diisi secara manual sesuai dengan data klasifikasi yang akan ditambahkan. Untuk menyimpan data klasifikasi tersebut, dapat dilakukan dengan menekan button simpan. Desain form input data master klasifikasi ini dapat dilihat pada Gambar 4.30.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Kode Klasifikasi : Nama Klasifikasi :
SIMPAN
Gambar 4.30 Desain form input data master klasifikasi
STIKOM
3. Desain Form Cari Data Master Klasifikasi
Pada form cari data master klasifikasi ini terdapat table data yang menampilkan seluruh data klasifikasi yang telah tersimpan. Jika ingin mengubah salah satu data klasifikasi yang telah ada, maka pengguna dapat menekan link update pada kolom olah di table data tersebut. Dengan menekan link update tersebut, maka pengguna akan dibawa menuju form update data master klasifikasi. Desain form cari data master klasifikasi dapat dilihat pada Gambar 4.31.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Olah Data
kode klasifikasi nama klasifikasi olah
kode nama update
Gambar 4.31 Desain form cari data master klasifikasi
4. Desain Form Update Data Master Klasifikasi
Pada form update data master klasifikasi terdapat textbox kode klasifikasi yang dibuat enable sehingga tidak dapat diubah-ubah, serta textbox nama klasifikasi yang dapat diganti secara manual sesuai dengan data klasifikasi yang akan diubah. Untuk menyimpan data klasifikasi yang telah diubah tersebut, dapat dilakukan dengan menekan button simpan. Desain form update data master klasifikasi ini dapat dilihat pada Gambar 4.32.
STIKOM
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Kode Klasifikasi : Nama Klasifikasi :
SIMPAN
Form Update
Gambar 4.32 Desain form update data master klasifikasi
5. Desain Form Input Data Master Subnetwork
Pada form input data master subnetwork terdapat textbox kode subnetwork yang di auto generate, serta textbox nama subnetwork yang dapat diisi secara manual sesuai dengan data subnetwork yang akan ditambahkan. Untuk menyimpan data subnetwork tersebut, dapat dilakukan dengan menekan button simpan. Desain form input data master subnetwork ini dapat dilihat pada Gambar 4.33.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Kode Subnetwork : Nama Subnetwork :
SIMPAN
Gambar 4.33 Desain form input data master subnetwork
STIKOM
6. Desain Form Cari Data Master Subnetwork
Pada form cari data master subnetwork ini terdapat table data yang menampilkan seluruh data subnetwork yang telah tersimpan. Jika ingin mengubah salah satu data subnetwork yang telah ada, maka pengguna dapat menekan link update pada kolom olah di table data tersebut. Dengan menekan link update tersebut, maka pengguna akan dibawa menuju form update data master subnetwork. Desain form cari data master subnetwork dapat dilihat pada Gambar 4.34.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Olah Data
kode subnetwork nama subnetwork olah
kode nama update
Gambar 4.34 Desain form cari data master subnetwork
7. Desain Form Update Data Master Subnetwork
Pada form update data master subnetwork terdapat textbox kode subnetwork yang dibuat enable sehingga tidak dapat diubah-ubah, serta textbox nama subnetwork yang dapat diganti secara manual sesuai dengan data subnetwork yang akan diubah. Untuk menyimpan data subnetwork yang telah diubah tersebut, dapat dilakukan dengan menekan button simpan. Desain form update data master subnetwork ini dapat dilihat pada Gambar 4.35.
STIKOM
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Kode Subnetwork : Nama Subnetwork :
SIMPAN
Form Update
Gambar 4.35 Desain form update data master subnetwork
8. Desain Form Input Data Master Cakupan
Pada form input data master cakupan terdapat textbox kode cakupan yang di auto generate, serta textbox nama cakupan yang dapat diisi secara manual sesuai dengan data cakupan yang akan ditambahkan. Untuk menyimpan data cakupan tersebut, dapat dilakukan dengan menekan button simpan. Desain form input data master cakupan ini dapat dilihat pada Gambar 4.36.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Kode Cakupan : Nama Cakupan :
SIMPAN
Gambar 4.36 Desain form input data master cakupan
STIKOM
9. Desain Form Cari Data Master Cakupan
Pada form cari data master cakupan ini terdapat table data yang menampilkan seluruh data cakupan yang telah tersimpan. Jika ingin mengubah salah satu data cakupan yang telah ada, maka pengguna dapat menekan link update pada kolom olah di table data tersebut. Dengan menekan link update tersebut, maka pengguna akan dibawa menuju form update data master cakupan. Desain form cari data master cakupan dapat dilihat pada Gambar 4.37.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Olah Data
kode cakupan nama cakupan olah
kode nama update
Gambar 4.37 Desain form cari data master cakupan
10.Desain Form Update Data Master Cakupan
Pada form update data master cakupan terdapat textbox kode cakupan yang dibuat enable sehingga tidak dapat diubah-ubah, serta textbox nama cakupan yang dapat diganti secara manual sesuai dengan data cakupan yang akan diubah. Untuk menyimpan data cakupan yang telah diubah tersebut, dapat dilakukan dengan menekan button simpan. Desain form update data master cakupan ini dapat dilihat pada Gambar 4.38.
STIKOM
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Form Update
Kode Cakupan : Nama Cakupan :
SIMPAN
Gambar 4.38 Desain form update data master cakupan
11.Desain Form Input Data Master System
Pada form input data master system terdapat textbox kode system yang di auto generate, serta textbox nama system yang dapat diisi secara manual sesuai dengan data system yang akan ditambahkan. Untuk menyimpan data system tersebut, dapat dilakukan dengan menekan button simpan. Desain form input data master system ini dapat dilihat pada Gambar 4.39.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Kode System : Nama System :
SIMPAN
Gambar 4.39 Desain form input data master system
STIKOM
12.Desain Form Cari Data Master System
Pada form cari data master system ini terdapat table data yang menampilkan seluruh data system yang telah tersimpan. Jika ingin mengubah salah satu data system yang telah ada, maka pengguna dapat menekan link update pada kolom olah di table data tersebut. Dengan menekan link update tersebut, maka pengguna akan dibawa menuju form update data master system. Desain form cari data master system dapat dilihat pada Gambar 4.40.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Olah Data
kode system nama system olah
kode nama update
Gambar 4.40 Desain form cari data master system
13.Desain Form Update Data Master System
Pada form update data master system terdapat textbox kode system yang dibuat enable sehingga tidak dapat diubah-ubah, serta textbox nama system yang dapat diganti secara manual sesuai dengan data system yang akan diubah. Untuk menyimpan data system yang telah diubah tersebut, dapat dilakukan dengan menekan button simpan. Desain form update data master system ini dapat dilihat pada Gambar 4.41.
STIKOM
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Form Update
Kode System : Nama System :
SIMPAN
Gambar 4.41 Desain form update data master system
14.Desain Form Input Data Master Pilihan
Pada form input data master pilihan terdapat textbox kode pilihan yang di auto generate, serta textbox nama pilihan yang dapat diisi secara manual sesuai dengan data pilihan yang akan ditambahkan. Untuk menyimpan data pilihan tersebut, dapat dilakukan dengan menekan button simpan. Desain form input data master pilihan ini dapat dilihat pada Gambar 4.42.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Kode Pilihan : Nama Pilihan :
SIMPAN
Gambar 4.42 Desain form input data master pilihan
STIKOM
15.Desain Form Cari Data Master Pilihan
Pada form cari data master pilihan ini terdapat table data yang menampilkan seluruh data pilihan yang telah tersimpan. Jika ingin mengubah salah satu data pilihan yang telah ada, maka pengguna dapat menekan link update pada kolom olah di table data tersebut. Dengan menekan link update tersebut, maka pengguna akan dibawa menuju form update data master pilihan. Desain form cari data master pilihan dapat dilihat pada Gambar 4.43.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Olah Data
kode pilihan nama pilihan olah
kode nama update
Gambar 4.43 Desain form cari data master pilihan
16.Desain Form Update Data Master Pilihan
Pada form update data master pilihan terdapat textbox kode pilihan yang dibuat enable sehingga tidak dapat diubah-ubah, serta textbox nama pilihan yang dapat diganti secara manual sesuai dengan data pilihan yang akan diubah. Untuk menyimpan data pilihan yang telah diubah tersebut, dapat dilakukan dengan menekan button simpan. Desain form update data master pilihan ini dapat dilihat pada Gambar 4.44.
STIKOM
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Insert Update Insert Update Insert Update Insert Update
Klasifikasi Subnetwork Cakupan System
Form Update
Kode Pilihan : Nama Pilihan :
SIMPAN
Gambar 4.44 Desain form update data master pilihan
17.Desain Form Cari User Application
Pada form cari user application terdapat textbox masukkan NIK yang dapat diisi secara manual sesuai dengan NIK karyawan yang datanya akan diubah. Untuk menampilkan data karyawan sesuai dengan NIK yang telah dimasukkan, dapat dilakukan dengan menekan button cari. Desain form cari user application ini dapat dilihat pada Gambar 4.45.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
Masukkan NIK :
Cari
Gambar 4.45 Desain form cari user application
STIKOM
18.Desain Form Cek Data User Application
Pada form cek data user application ini terdapat textbox masukkan NIK yang dapat diisi secara manual sesuai dengan NIK karyawan yang datanya akan diubah, serta button cari untuk menampilkan data karyawan sesuai dengan NIK yang telah dimasukkan. Selain itu terdapat juga table data yang menampilkan seluruh data karyawan yang sesuai dengan NIK dimasukkan sebelumnya. Jika data karyawan yang ditampilkan salah, maka pengguna dapat memasukkan NIK karyawan kembali pada textbox NIK karyawan yang tersedia diatas table data tersebut. Jika data karyawan yang ditampilkan benar, maka pengguna dapat menekan link update pada kolom action di table data tersebut. Dengan menekan link update tersebut, maka pengguna akan dibawa menuju form update data user application. Desain form cek data user application dapat dilihat pada Gambar 4.46.
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
NIK Karyawan :
Cari
NIK Nama Karyawan Nama Sub Unit Nama Unit Action
nik nama sub unit unit UPDATE
Gambar 4.46 Desain form cek data user application
19.Desain Form Update User Application
Pada form update user application terdapat combobox status yang dapat diganti secara manual sesuai dengan status karyawan sebagai pengguna aplikasi
STIKOM
ini yang akan diubah, serta terdapat table data yang menampilkan data karyawan sesuai NIK yang dimasukkan sebelumnya. Untuk menyimpan data karyawan yang telah diubah tersebut, dapat dilakukan dengan menekan button simpan. Desain form update user application ini dapat dilihat pada Gambar 4.47.
-pilih
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Gangguan Maintenance User Application
NIK Nama Karyawan Nama Sub Unit Nama Unit Status
Status :
Simpan
Gambar 4.47 Desain form update user application
20.Desain Form Input Data Gangguan
Pada form input data gangguan terdapat combobox klasifikasi, combobox user, combobox kota, combobox gedung, combobox subnetwork, combobox cakupan, combobox system, serta textbox gangguan yang dapat diisi manual. Jika pengguna telah memilih user pada combobox tersebut, maka isi combobox kota yakni kota yang sesuai dengan user yang telah dipilih. Jika pengguna telah memilih kota pada combobox tersebut, maka isi combobox gedung yakni gedung yang sesuai dengan kota yang telah dipilih. Selain itu pada form ini juga terdapat textbox NIK, textbox nama, dan textbox bagian dari pelapor. Pengguna hanya memasukkan NIK dari pelapor, maka textbox nama dan bagian pelapor akan terisi sesuai dengan NIK yang diisikan sebelumnya. Textbox nama dan textbox bagian
STIKOM
pada form ini dibuat enable agar tidak dapat diubah-ubah, sehingga menghindari kerancuan data pelapor.
Pada form ini juga terdapat textbox tanggal gangguan yang diisi dengan cara menekan button gambar kalender disebelahnya. Dengan menekan button gambar tersebut, maka pengguna dapat memilih tanggal gangguan yang terjadi. Setelah memilih tanggal, kemudian tanggal tersebut akan masuk ke textbox tanggal gangguan yang dibuat enable sehingga tidak dapat diubah-ubah. Untuk menyimpan data gangguan ini, dapat dilakukan dengan menekan button simpan. Desain form input data gangguan ini dapat dilihat pada Gambar 4.48.
Pelapor -pilih klasifikasi--pilih user--pilih kota--pilih gedung--pilih subnetwork--pilih cakupan--pilih APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Input data gangguan Update data gangguan
Klasifikasi : User : Kota : Gedung : Sub Network : Cakupan : NIK : System : Tanggal Gangguan Gangguan SIMPAN NAMA : BAGIAN :
Gambar 4.48 Desain form input data gangguan
STIKOM
21.Desain Form Cari Data Gangguan
Pada form cari data gangguan terdapat combobox klasifikasi yang dapat diisi secara manual sesuai dengan klasifikasi data gangguan yang akan diubah. Untuk menampilkan data gangguan yang sesuai dengan klasifikasi yang telah dimasukkan, dapat dilakukan dengan menekan button cari. Desain form cari data gangguan ini dapat dilihat pada Gambar 4.49.
-pilih
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Cari
Input data gangguan Update data gangguan
Klasifikasi :
Gambar 4.49 Desain form cari data gangguan
22.Desain Form Cek Data Gangguan
Pada form cek data gangguan ini terdapat combobox klasifikasi yang dapat diisi secara manual sesuai dengan klasifikasi data gangguan yang akan diubah, serta button cari untuk menampilkan data gangguan yang sesuai dengan klasifikasi yang telah dimasukkan. Selain itu terdapat juga table data yang menampilkan seluruh data gangguan yang sesuai dengan klasifikasi dimasukkan sebelumnya. Jika ingin mengubah salah satu data gangguan yang telah ada, maka pengguna dapat menekan link update pada kolom action di table data tersebut. Dengan menekan link update tersebut, maka pengguna akan dibawa menuju form update data gangguan. Desain form cek data gangguan dapat dilihat pada Gambar 4.50.
STIKOM
-pilih APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Cari Input data gangguan
Update data gangguan
Klasifikasi :
klasifikasi nik pelapor gangguan tanggal gangguan action
klasifikasi nik gangguan tanggal Update
Gambar 4.50 Desain form cek data gangguan
23.Desain Form Update Data Gangguan
Pada form update data gangguan terdapat textbox solusi dan textbox keterangan yang dapat diisi manual. Selain itu pada form ini juga terdapat textbox NIK, textbox nama, dan textbox bagian dari solver. Pengguna hanya memasukkan NIK dari solver, maka textbox nama dan bagian solver akan terisi sesuai dengan NIK yang diisikan sebelumnya. Textbox nama dan textbox bagian pada form ini dibuat enable agar tidak dapat diubah-ubah, sehingga menghindari kerancuan data solver. Pada form ini juga terdapat table data gangguan yang menampilkan data gangguan sesuai data yang dipilih sebelumnya dan textbox nomor gangguan sesuai dengan data gangguan yang dipilih.
Form ini juga terdapat textbox tanggal selesai yang diisi dengan cara menekan button gambar kalender disebelahnya. Dengan menekan button gambar tersebut, maka pengguna dapat memilih tanggal selesai gangguan yang terjadi. Setelah memilih tanggal, kemudian tanggal tersebut akan masuk ke textbox tanggal selesai yang dibuat enable sehingga tidak dapat diubah-ubah. Dengan menekan button simpan, maka data gangguan ini dapat diupdate. Desain form input data gangguan ini dapat dilihat pada Gambar 4.51.
STIKOM
Solver
APLIKASI GANGGUAN DAN MAINTENANCE
LOGO TELKOM
Master Gangguan Maintenance Laporan Keluar
Input data gangguan Update data gangguan
NIK : Tanggal Selesai Keterangan SIMPAN NAMA : BAGIAN : Solusi Nomor gangguan :
klasifikasi gedung subnetwork cakupan nik pelapor system gangguan tanggal gangguan
Gambar 4.51 Desain form update data gangguan
24.Desain Form Input Data Maintenance
Pada form input data maintenance terdapat combobox klasifikasi, combobox user, combobox kota, combobox gedung, combobox pilihan, serta textbox uraian pekerjaan yang dapat diisi manual. Jika pengguna telah memilih user pada combobox tersebut, maka isi combobox kota yakni kota yang sesuai dengan user yang telah dipilih. Jika pengguna telah memilih kota pada combobox tersebut, maka isi combobox gedung yakni gedung yang sesuai dengan kota yang telah dipilih. Selain itu pada form ini juga terdapat textbox NIK, textbox nama, dan textbox bagian dari solver. Pengguna hanya memasukkan NIK dari solver, maka textbox nama dan bagian solver akan terisi sesuai dengan NIK yang diisikan
STIKOM
sebelumnya. Textbox nama dan textbox bagian pada form ini dibuat enable agar tidak dapat diubah-ubah, sehingga menghindari kerancuan data solver.
Pada form ini juga terdapat textbox tanggal maintenance yang diisi dengan cara menekan button gambar kalender disebelahnya. Dengan menekan button gambar tersebut, maka pengguna dapat memilih tanggal maintenance yang terjadi. Setelah memilih tanggal, kemudian tanggal tersebut akan masuk ke textbox tanggal maintenance yang dibuat enable sehingga tidak dapat diubah-ubah. Selain itu terdapat juga button attchement konfigurasi lama dan button attchement konfigurasi baru untuk mengupload gambar jika diperlukan. Untuk menyimpan data maintenance ini, dapat dilakukan dengan menekan button simpan. Desain form input data maintenance ini dapat dilihat pada Gambar 4.52.