BAB IV PERANCANGAN LAYAR ANTAR MUKA

BAB IV PERANCANGAN LAYAR ANTAR MUKA

Pada bab ini akan dijelaskan tentang rancangan layar sistem yang akan dibangun. Berikut ini adalah rancangan layar dari form – form yang ada pada sistem ini. 4.1

Rancangan Layar Menu Utama Berikut ini adalah rancangan layar menu utama yang akan dibangun, dimana terdapat fitur create problem, view problem, update problem, view solution, pencarian data dan laporan yang sistematis.

Gambar 1 Rancangan Layar Menu Utama 4.2

Rancangan Layar Login Pada tampilan layar form login, user melakukan proses login ke dalam sistem dengan memasukkan username dan password. Jika data yang

1

http://digilib.mercubuana.ac.id/

diinput salah maka akan peringatan bahwa data yang diinput salah jika data yang diinput benar maka user akan masuk ke dalam sistem sesuai dengan tipe user masing – masing.

Gambar 2 Rancangan Layar Login

4.3

Rancangan Layar Mengelola Data Pengguna Pada tampilan layar user list, petugas helpdesk dapat melihat dan mengelola data pengguna sistem. Untuk merubah data user dapat memilih id user, jika kesulitan mencari user yang diinginkan dapat menggunakan fitur search yang ada. Untuk menghapus user dapat dilakukan dengan memilih delete pada data user yang ingin dihapus dan untuk menambahkan data pengguna sistem, petugas helpdesk dapat meng-klik tombol add new user, sistem akan menampilkan form add new user, di dalam form add new user jika tipe user yang akan ditambahkan adalah customer maka textfield pic, pic phone dan fax dapat diisi selain tipe customer akan “disabled.”

2


Gambar 3 Rancangan Layar Data User

Gambar 4 Rancangan Layar Tambah User

3


4.4

Rancangan Layar Mengelola Data Barang Pada tampilan layar item list, petugas helpdesk dapat melihat dan mengelola data barang. Untuk merubah data item, helpdesk dapat memilih id item, jika kesulitan mencari data item yang diinginkan dapat menggunakan fitur search yang ada dengan memasukkan nama item pada search box. Untuk menghapus data item dapat dilakukan dengan memilih delete pada data barang yang ingin dihapus, untuk menambahkan data item, petugas helpdesk dapat meng-klik tombol add new item.

Gambar 5 Rancangan Layar Data Barang

Gambar 6 Rancangan Layar Tambah Barang 4


4.5

Rancangan Layar Mengelola Data SLA Pada tampilan layar SLA, petugas helpdesk dapat melihat dan mengelola data SLA. Untuk merubah data sla dapat memilih id SLA. Untuk menghapus SLA dapat dilakukan dengan memilih delete, untuk menambahkan data SLA, helpdesk dapat meng-klik tombol add new SLA. 1. Responsetime adalah waktu yang dibutuhkan untuk merespon problem dari customer. 2. Resolutiontime adalah waktu yang dibutuhkan untuk menyelesaikan problem. 3. Warningtime adalah problem mendekati batas waktu SLA.

Gambar 7 Rancangan Layar Data SLA

Gambar 8 Rancangan Layar Tambah SLA 5


4.6

Rancangan Layar Mengelola Data Service Center Pada tampilan layar service center, petugas helpdesk dapat melihat dan mengelola data service center. Untuk melakukan perubahan data service center, helpdesk dapat memilih id service center, jika kesulitan mencari data service center yang diinginkan dapat menggunakan fitur search yang ada dengan memasukkan nama service pada search box. Untuk menghapus service center dapat dilakukan dengan memilih delete pada data service center yang ingin dihapus, untuk menambahkan data service center, petugas helpdesk dapat meng-klik tombol add new service center.

Gambar 9 Rancangan Layar Data Service Center

Gambar 10 Rancangan Layar Tambah Service Center 6


4.7

Rancangan Layar Mengisi Data Masalah User yang memiliki hak akses dapat masuk ke dalam form new problem dan mengisi data problem. Sebelum submit problem user perlu menekan tombol check untuk mengecek status garansi barang. No. problem dan reported date (tipe customer) akan tersimpan secara otomatis saat user tekan tombol submit. Pada saat customer melakukan input problem ke dalam form, nama customer, pic dan no telp pic customer akan muncul secara otomatis, Jika data problem sudah lengkap, customer dapat menekan tombol submit. Data problem yang diinput akan secara otomatis ditugaskan kepada helpdesk. Untuk helpdesk, pada form input problem, tombol check customer berguna untuk memverifikasi inputan nama customer. Jika data valid maka nama, pic dan no telp pic akan muncul, jika tidak akan ada peringatan kesalahan bahwa data customer tidak ada dan sistem memberikan notifikasi apakah ingin membuat customer baru jika menekan tombol “yes”, akan muncul form add new user.

Gambar 11 Rancangan Layar Mengisi Data Masalah

7


4.8

Rancangan Layar Melihat Status Masalah Pada tampilan my request, customer dapat melihat status masalah yang diinput ke dalam sistem pada kolom status. Status “pending” berarti helpdesk belum menerima acc penawaran harga dari customer, jika status “process” berarti item atau barang customer sedang dalam proses kirim atau antar barang, status “service” berarti barang dalam proses perbaikan, status “done” berarti item atau barang customer sudah selesai dikerjakan dan akan dikirim kembali. Jika status barang “not resolved” berarti data problem belum terselesaikan. Jika status “closed” berarti data problem sudah selesai atau ditutup oleh requester.

Gambar 12 Rancangan Layar Customer Melihat Status Masalah 4.9

Rancangan Layar Melihat Solusi Pada layar popular solution, user dapat mencari solusi - solusi dari kendala yang dihadapi user berdasarkan nama barang yang diinput ke dalam searchbox.

8


Gambar 13 Rancangan Layar Melihat Solusi 4.10

Rancangan Layar Melihat Agenda Kerja Pada layar my assignment, user dapat melihat data problem yang masuk atau ditugaskan. Untuk melihat data problem lebih detail dapat memilih no. problem. Setelah memilih no. problem sistem otomatis menuju ke halaman update problem. Di halaman update problem, pengguna sistem dapat melakukan perubahan data. Petugas helpdesk dapat menjadwalkan atau menugaskan data problem yang ada ke teknisi atau kurir, selain helpdesk, user lain tidak memiliki hak akses “assign to.” Untuk petugas finance, pada halaman my assignment, data problem yang masuk adalah data problem yang memiliki no. surat penawaran yang diinput petugas helpdesk.

9


Gambar 14 Rancangan Layar Melihat Agenda Kerja

4.11

Rancangan Layar Merubah Data Masalah Pada layar update problem, user dapat melihat history dari no. problem yang dipilih. Data customer, barang, detail problem, reported date, sla dan no. problem akan muncul secara otomatis. Pada layar ini pengguna sistem yang saling berinteraksi adalah helpdesk, teknisi, finance dan kurir. Helpdesk dapat membuat surat jalan dan activity dengan memilih assign to ke teknisi atau kurir terlebih dahulu. Setiap perubahan data problem yang dilakukan pengguna sistem dapat terlihat di history problem.

10


Gambar 15 Rancangan Layar Update Problem

Helpdesk yang sebelumnya sudah assign ke salah satu teknisi dapat membuat activity dengan cara klik tombol create act, lalu akan muncul form activity. Dari no activity yang dibuat oleh helpdesk, data problem akan otomatis masuk ke halaman my assignment teknisi, teknisi kemudian dapat melakukan perubahan data activity dengan klik no activity atau menyerahkan activity kepada petugas helpdesk untuk ditindaklanjuti.

11


Gambar 16 Rancangan Layar Form Activity Rancangan keluaran yang dihasilkan dari membuat activity adalah sebagai berikut : Nama Keluaran

:

Activity

Fungsi

:

Sebagai surat pengantar aktifitas kerja teknisi

Media

:

Kertas

Distribusi

:

1. Teknisi 2. Customer

Rangkap

:

2

Frekuensi

:

Setiap teknisi datang ke perusahaan customer

Keterangan

:

1. Untuk mengetahui informasi masalah unit barang customer. 2. Tanda“*”diisi saat teknisi menindaklanjuti aktifitas.

Format

:

12


Gambar 17 Rancangan Output Activity Untuk membuat surat jalan, helpdesk sebelumnya assign ke salah satu kurir, kemudian memilih jenis surat jalan berdasarkan kondisi yang yang diperlukan. Data surat jalan ini akan masuk ke halaman my assignment kurir secara otomatis jika sudah di –create oleh helpdesk. Kurir kemudian dapat melakukan perubahan data surat jalan dengan klik no. surat jalan atau menyerahkan surat jalan kepada petugas helpdesk untuk ditindaklanjuti.

Gambar 18 Rancangan Layar Form Surat Jalan 13


Rancangan keluaran yang dihasilkan dari membuat surat jalan adalah sebagai berikut : Nama Keluaran

:

Surat Jalan

Fungsi

:

Sebagai surat pengantar aktifitas kerja kurir

Media

:

Kertas

Distribusi

:

1. Kurir 2. Customer atau service center

Rangkap

:

2

Frekuensi

:

Setiap kurir datang ke perusahaan customer atau service center.

Keterangan

:

1. Untuk mengetahui informasi unit barang yang ditujukan kepada customer atau service center. 2. Tanda“*”diisi saat kurir menindaklanjuti aktifitas.

Format

:

Gambar 19 Rancangan Output Surat Jalan

14


4.12

Rancangan Layar Melihat Laporan Pada layar report, user dapat melihat data laporan operasional helpdesk yang dapat dipilih per periode. User sebelumnya memilih jenis laporan yang diinginkan.

Gambar 20 Rancangan Layar Melihat Laporan Jenis laporan yang ada seperti : 1. Aktifitas, Adalah jenis laporan yang menampilkan aktifitas kerja teknisi atau kurir.

Gambar 21 Rancangan Layar Laporan Aktifitas

15


2. Servis Barang, Adalah jenis laporan yang menampilkan data barang yang masuk dan keluar service center.

Gambar 22 Rancangan Layar Laporan Servis Barang

3. Closed, Adalah jenis laporan yang menampilkan data – data problem yang memiliki status closed atau problem sudah terselesaikan.

Gambar 23 Rancangan Layar Laporan “Closed”

16


4. Chart, Adalah jenis laporan yang menampilkan data problem berupa grafik. Isi dari laporan grafik adalah data status problem yang masuk ke dalam sistem.

Gambar 24 Rancangan Layar Laporan "Chart”

4.13

Rancangan Layar Merubah Profil Pada layar edit profile, nama user akan muncul secara otomatis, user dapat merubah profil seperti mengganti password, no telepon, alamat atau merubah data pic, pic phone dan no. fax untuk tipe user customer.

Gambar 25 Rancangan Layar Merubah Profil 17


4.14

Rancangan Layar Melihat Log Pengguna Pada layar user log, helpdesk dapat melihat aktivitas user yang ada di dalam sistem.

Gambar 26 Rancangan Layar Melihat Log Pengguna

18


BAB IV PERANCANGAN LAYAR ANTAR MUKA

Recommend Documents